添加字幕插件

packages/artplayer-plugin-subtitle/.babelrc

@@ -0,0 +1,11 @@
+{
+	"presets": [
+		[
+			"@babel/env",
+			{
+				"modules": false
+			}
+		]
+	],
+	"plugins": ["@babel/plugin-external-helpers", "@babel/plugin-transform-runtime"]
+}

packages/artplayer-plugin-subtitle/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-plugin-subtitle/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-plugin-subtitle/README.md

@@ -0,0 +1,51 @@
+# artplayer-plugin-subtitle
+
+Subtitle plugin for ArtPlayer
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-plugin-subtitle
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-plugin-subtitle
+```
+
+```js
+import artplayerPluginSubtitle from 'artplayer-plugin-subtitle';
+```
+
+Or umd builds are also available
+
+```html
+<script src="path/to/artplayer-plugin-subtitle.js"></script>
+```
+
+Will expose the global variable to `window.artplayerPluginSubtitle`.
+
+## Usage
+
+```html
+<div class="artplayer-app"></div>
+```
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+    plugins: [
+        artplayerPluginSubtitle({
+            time: -1, // Subtitle delay time, ranging from -10 to 10
+        }),
+    ],
+});
+```
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-plugin-subtitle/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "artplayer-plugin-subtitle",
+  "version": "1.0.3",
+  "description": "Danmu plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-subtitle.js",
+  "style": "dist/artplayer-plugin-subtitle.css",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup -c -m -w",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "keywords": [
+    "video",
+    "player"
+  ],
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/runtime": "^7.1.2",
+    "autoprefixer": "^9.3.1",
+    "browser-env": "^3.2.5",
+    "cross-env": "^5.2.0",
+    "cssnano": "^4.1.7",
+    "node-sass": "^4.9.4",
+    "rollup": "^0.67.0",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-eslint": "^5.0.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-svgo": "^1.0.1",
+    "rollup-plugin-uglify": "^6.0.0"
+  },
+  "dependencies": {
+    "vtt-adjust": "^1.0.2"
+  }
+}

packages/artplayer-plugin-subtitle/rollup.config.js

@@ -0,0 +1,63 @@
+const path = require('path');
+const babel = require('rollup-plugin-babel');
+const commonjs = require('rollup-plugin-commonjs');
+const nodeResolve = require('rollup-plugin-node-resolve');
+const postcss = require('rollup-plugin-postcss');
+const { eslint } = require('rollup-plugin-eslint');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const replace = require('rollup-plugin-replace');
+const svgo = require('rollup-plugin-svgo');
+const { uglify } = require('rollup-plugin-uglify');
+const { version, homepage, name } = require('./package.json');
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const banner =
+    '/*!\n' +
+    ` * ${name}.js v${version}\n` +
+    ` * Github: ${homepage}\n` +
+    ` * (c) 2017-${new Date().getFullYear()} Harvey Zack\n` +
+    ' * Released under the MIT License.\n' +
+    ' */\n';
+
+export default {
+    input: 'src/index.js',
+    output: {
+        name,
+        file: isProd ? `dist/${name}.js` : path.join(process.cwd(), '../../', `docs/lab/js/${name}.js`),
+        format: 'umd',
+        exports: 'named',
+    },
+    plugins: [
+        eslint({
+            exclude: ['node_modules/**', 'src/**/*.scss', 'src/**/*.svg'],
+        }),
+        postcss({
+            plugins: [autoprefixer, cssnano],
+            extract: isProd ? `dist/${name}.css` : path.join(process.cwd(), '../../', `docs/lab/css/${name}.css`),
+        }),
+        nodeResolve(),
+        commonjs(),
+        babel({
+            runtimeHelpers: true,
+            exclude: 'node_modules/**',
+            presets: [['@babel/env', { modules: false }]],
+            plugins: ['@babel/plugin-external-helpers', '@babel/plugin-transform-runtime'],
+        }),
+        svgo({
+            raw: true,
+        }),
+        replace({
+            exclude: 'node_modules/**',
+            __ENV__: JSON.stringify(process.env.NODE_ENV || 'development'),
+            __VERSION__: version,
+        }),
+        isProd &&
+            uglify({
+                output: {
+                    preamble: banner,
+                },
+            }),
+    ],
+};

packages/artplayer-plugin-subtitle/src/index.js

@@ -0,0 +1,33 @@
+function artplayerPluginSubtitle(option) {
+    return art => {
+        const { errorHandle, clamp, sleep } = art.constructor.utils;
+
+        errorHandle(
+            option && typeof option.time === 'number',
+            `The plugin 'artplayerPluginSubtitle': 'option.time' require 'number' type, but got '${typeof option.time}'`,
+        );
+
+        let retry = 0;
+        const maxRetry = 10;
+        const time = clamp(option.time, -10, 10);
+
+        function adjust() {
+            errorHandle(retry < maxRetry, 'It seems that something wrong for reading subtitle');
+            retry += 1;
+            const cues = Array.from(art.refs.$track.track.cues);
+            if (cues.length === 0) {
+                sleep(100).then(adjust);
+            } else {
+                cues.forEach(cue => {
+                    cue.startTime += time;
+                    cue.endTime += time;
+                });
+            }
+        }
+
+        art.on('subtitle:load', adjust);
+    };
+}
+
+window.artplayerPluginSubtitle = artplayerPluginSubtitle;
+export default artplayerPluginSubtitle;