Added subtitles plugin

.eslintrc.js

@@ -4,8 +4,9 @@ module.exports = {
     browser: true,
     es6: true,
     node: true,
+    'jest/globals': true,
   },
-  plugins: ['prettier'],
+  plugins: ['prettier', 'jest'],
   extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

.github/workflows/test.yml

@@ -0,0 +1,59 @@
+# Heavily based on https://joelhooks.com/jest-and-github-actions
+name: Tests CI
+
+on:
+  pull_request:
+    paths-ignore:
+      - 'README.md'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Reconfigure git to use HTTPS authentication
+        uses: GuillaumeFalourd/SSH-to-HTTPS@v1
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '17'
+
+      - name: Install
+        run: |
+          npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run Jest tests
+        run: npm run test:ci
+
+      - name: Tests ✅
+        if: ${{ success() }}
+        run: |
+          curl --request POST \
+          --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
+          --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
+          --header 'content-type: application/json' \
+          --data '{
+            "context": "tests",
+            "state": "success",
+            "description": "Tests passed",
+            "target_url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+          }'
+
+      - name: Tests 🚨
+        if: ${{ failure() }}
+        run: |
+          curl --request POST \
+          --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
+          --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
+          --header 'content-type: application/json' \
+          --data '{
+            "context": "tests",
+            "state": "failure",
+            "description": "Tests failed",
+            "target_url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+          }'

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_store
 .idea
+coverage

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
+}

docs/plugins/subtitles.md

@@ -0,0 +1,63 @@
+# Subtitles
+
+subtitle plugin allows you to fetch and parse the subtitle file from the given URL and you can read the subtitle text from the parsed file based on the current videoplayback time.
+
+## Usage
+
+If you want to access Subtitles in your App code directly, import the *Subtitles* plugin from the Lightning SDK:
+
+```js
+import { Subtitles } from '@lightningjs/sdk'
+```
+
+
+## Available methods
+
+### fetchAndParseSubs
+
+`fetchAndParseSubs` method expects a valid file URL as an argument.
+This method will fetch a file from the URL and parse it to create a list of objects. created subtitles list is stored in the plugin.
+This method returns a promise that resolves to parsed subtitles as a list of objects containing {start, end, payload}.
+```js
+const subtitlesUrl = 'http://abc.def.com/xyz.srt'
+Subtitles.fetchAndParseSubs(URL)
+```
+### customParser
+
+you can also send a customParser as a callback to `fetchAndParseSubs` as a second argument, customParser should return a list of subtitle objects that contains
+{start: <float>, end: <float>, payload: <string>}
+
+
+```js
+const customParser = (str) = {
+    ...
+    ...
+    return [{start: 3, end: 10, payload: 'this is subtitle text'}, { start: 11, end: 14, payload: 'this is subtitle text2'}, ...]
+}
+const subtitlesUrl = 'http://abc.def.com/xyz.srt'
+Subtitles.fetchAndParseSubs(URL, customParser)
+```
+
+### removeSubtitleTextStyles
+
+By default, all the TextStyles in the subtitle string are removed, you can pass {removeSubtitleTextStyles: false} as
+the third argument to keep text styles in subtitle string
+
+```js
+Subtitles.fetchAndParseSubs(URL, null, {removeSubtitleTextStyles: false})
+```
+### getSubtitleByTimeIndex
+From the stored subtitles you can get subtitles as text when you pass currentTime(in seconds) as an argument to the method.
+
+```js
+Subtitles.getSubtitleByTimeIndex(currentTime)
+```
+
+### clearCurrentSubtitle
+
+`clearCurrentSubtitle` method will clear all the stored subtitles in the plugin.
+
+```js
+Subtitles.clearCurrentSubtitle()
+```
+

docs/plugins/videoplayer.md

@@ -476,3 +476,69 @@ The available events are:
 * $videoPlayerVolumeChange
 * $videoPlayerWaiting
 * $videoPlayerClear
+
+### SubtitlesParse
+
+subtitle plugin allows you to fetch and parse the subtitle file from the given URL and you can read the subtitle text from the parsed file based on the current videoplayback time.
+
+```js
+const subtitlesUrl = 'http://abc.def.com/xyz.srt'
+VideoPlayer.openSubtitles(subtitlesUrl)
+```
+If you don't want to use the default parser you can also pass a custom parser as a callback as the second argument.
+
+NOTE: customParser must return list of subtitle object contains {start: \<float\>, end: \<float\>, payload: \<string\>}
+
+```js
+const customParser = (str) = {
+    ...
+    ...
+    return [{start: 3, end: 10, payload: 'this is subtitle text'}, { start: 11, end: 14, payload: 'this is subtitle text2'}, ...]
+}
+const subtitlesUrl = 'http://abc.def.com/xyz.srt'
+VideoPlayer.openSubtitles(subtitlesUrl, customParser)
+```
+By default, all the TextStyles are removed in subtitle text, you can pass {removeSubtitleTextStyles: false} as
+the third argument to keep text styles in subtitle string
+
+```js
+const subtitlesUrl = 'http://abc.def.com/xyz.srt'
+VideoPlayer.openSubtitles(subtitlesUrl, null, {removeSubtitleTextStyles: false})
+```
+on successful parsing of subtitles $videoPlayerSubtitlesReady is fired on the consumer.
+if VideoPlayer fails to parse subtitles a $videoPlayerSubtitlesError is fired on the consumer. error returned as first argument.
+
+
+### currentSubtitleText
+
+getter that retrieves the current subtitle as a string based on videoPlayer currentTime, which can be rendered in your app using the text component.
+or
+you can use the $VidePlayerSubtitleTextChanged event that fires when there is a subtitle text change, in this event you will receive
+subtitle string as the first argument.
+videoPlayer current time as the second argument.
+ ```js
+class DummyComponent extends Lightning.component {
+    static _template() {
+        return {
+            Subtitles: {
+                text: {
+                    text: ''
+                    textColor: 0xff000000,
+                    fontSize: 48,
+                    textAlign: 'center',
+                }
+            }
+        }
+    }
+
+    $videoPlayerSubtitleTextChanged(text, currentTime){
+        const _subtitleText = text || ''// current subtitle to render depending on video playback
+        // update subtitle text to your template
+        this.tag('Subtitles').text = _subtitleText;
+    }
+
+    const _subtitleText = VideoPlayer.currentSubtitleText || ''
+    this.tag('Subtitles').text = _subtitleText;
+}
+```
+

github-actions-reporter.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+class GithubActionsReporter {
+  constructor(globalConfig, options) {
+    this._globalConfig = globalConfig
+    this._options = options
+  }
+
+  onRunComplete(contexts, results) {
+    results.testResults.forEach(testResultItem => {
+      const testFilePath = testResultItem.testFilePath
+
+      testResultItem.testResults.forEach(result => {
+        if (result.status !== 'failed') {
+          return
+        }
+
+        result.failureMessages.forEach(failureMessages => {
+          const newLine = '%0A'
+          const message = failureMessages.replace(/\n/g, newLine)
+          const captureGroup = message.match(/:([0-9]+):([0-9]+)/)
+
+          if (!captureGroup) {
+            console.log('Unable to extract line number from call stack')
+            return
+          }
+
+          const [, line, col] = captureGroup
+          console.log(`::error file=${testFilePath},line=${line},col=${col}::${message}`)
+        })
+      })
+    })
+  }
+}
+
+// eslint-disable-next-line no-undef
+module.exports = GithubActionsReporter

index.js

@@ -25,3 +25,4 @@ export { default as TV, initTV } from './src/TV'
 export { default as Pin, initPin } from './src/Pin'
 export { default as VideoPlayer, initVideoPlayer, mediaUrl } from './src/VideoPlayer'
 export { initLightningSdkPlugin } from './src/LightningSdkPlugins'
+export { default as SubtitlesParser } from './src/SubtitlesParser'

jest.config.js

@@ -0,0 +1,27 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  coverageThreshold: {
+    global: {
+      lines: 70,
+    },
+  },
+  testEnvironment: 'jsdom', // jsdom
+  testEnvironmentOptions: { resources: 'usable' },
+  moduleNameMapper: {
+    '@/(.*)$': '<rootDir>/src/$1',
+    '^src(.*)': '<rootDir>/src$1',
+    '^test(.*)': '<rootDir>/test$1',
+  },
+  transform: { '^.+\\.[m|t]?js$': 'babel-jest' },
+  transformIgnorePatterns: [],
+  verbose: true,
+  testURL: 'http://github.com/andreyvit/subtitle-tools/blob/master/sample.srt',
+}