合并字幕插件

packages/artplayer-plugin-subtitle/.npmignore

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

packages/artplayer-plugin-subtitle/.npmrc

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

packages/artplayer-plugin-subtitle/README.md

@@ -1,53 +0,0 @@
-# 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,
-    ],
-});
-
-// There will be a slider in the settings panel.
-// Or, you can set subtitle offset time by yourself, range from -5 to 5.
-art.artplayerPluginSubtitle.set(-1);
-```
-
-## License
-
-MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js

@@ -1,8 +0,0 @@
-/*!
- * artplayer-plugin-subtitle.js v1.0.4
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2018 Harvey Zack
- * Released under the MIT License.
- */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t["artplayer-plugin-subtitle"]={})}(this,function(t){"use strict";function e(i){var t=i.i18n,a=i.events.proxy;return{title:"Subtitle",name:"subtitle",index:20,html:'\n            <div class="art-setting-header">\n                '.concat(t.get("Subtitle offset time"),': <span class="art-subtitle-value">0</span>s\n            </div>\n            <div class="art-setting-body">\n                <input\n                    style="width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;"\n                    class="art-subtitle-range"\n                    type="range"\n                    min="-5"\n                    max="5"\n                    step="0.5"\n                >\n            </div>\n        '),mounted:function(t){var e=t.querySelector(".art-subtitle-range"),n=t.querySelector(".art-subtitle-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginSubtitle.offset(Number(t))}),i.on("subtitle:switch",function(){e.value=0,n.innerText=0}),i.on("artplayerPluginSubtitle:set",function(t){e.value!==t&&(e.value=t,n.innerText=t)})}}}function n(i){var a=i.constructor.utils.clamp,t=i.setting,r=i.notice,u=i.template,o=i.i18n;o.update({"zh-cn":{"Subtitle offset time":"字幕偏移时间"},"zh-tw":{"Subtitle offset time":"字幕偏移時間"}}),t.add(e);var l=[];return i.on("subtitle:switch",function(){l=[]}),{offset:function(t){var e=Array.from(u.$track.track.cues),n=a(t,-5,5);e.forEach(function(t,e){l[e]||(l[e]={startTime:t.startTime,endTime:t.endTime}),t.startTime=l[e].startTime+n,t.endTime=l[e].endTime+n}),r.show("".concat(o.get("Subtitle offset time"),": ").concat(t,"s")),i.emit("artplayerPluginSubtitle:set",t)}}}window.artplayerPluginSubtitle=n,t.default=n,Object.defineProperty(t,"__esModule",{value:!0})});

packages/artplayer-plugin-subtitle/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "artplayer-plugin-subtitle",
-  "version": "1.0.5",
-  "description": "Danmu plugin for ArtPlayer",
-  "main": "dist/artplayer-plugin-subtitle.js",
-  "style": "dist/artplayer-plugin-subtitle.css",
-  "scripts": {
-    "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"
-}

packages/artplayer/src/plugins/artplayer-plugin-localPreview.js

@@ -0,0 +1,7 @@
+export default function artplayerPluginLocalPreview(art) {
+    const { getExt } = art.constructor.utils;
+    const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt'];
+    return {
+        // TODO...
+    };
+}

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

@@ -57,7 +57,7 @@ function settingMix(art) {
     };
 }
 
-function artplayerPluginSubtitle(art) {
+export default function artplayerPluginSubtitle(art) {
     const { clamp } = art.constructor.utils;
     const { setting, notice, template, i18n } = art;
     i18nMix(i18n);
@@ -87,6 +87,3 @@ function artplayerPluginSubtitle(art) {
         },
     };
 }
-
-window.artplayerPluginSubtitle = artplayerPluginSubtitle;
-export default artplayerPluginSubtitle;

packages/artplayer/src/plugins/index.js

@@ -1,7 +1,13 @@
+import artplayerPluginSubtitle from './artplayer-plugin-subtitle';
+import artplayerPluginLocalPreview from './artplayer-plugin-localPreview';
+
 export default class Plugins {
     constructor(art) {
         this.art = art;
         this.id = 0;
+
+        this.add(artplayerPluginSubtitle);
+        this.add(artplayerPluginLocalPreview);
         art.option.plugins.forEach(plugin => {
             this.add(plugin);
         });

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { errorHandle, setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
+import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
 
 export default class Subtitle {
     constructor(art) {
@@ -6,26 +6,31 @@ export default class Subtitle {
         this.state = true;
         const { url } = this.art.option.subtitle;
         if (url) {
-            this.init();
+            this.init(url);
         }
     }
 
-    init() {
+    init(url) {
         const {
             events: { proxy },
             option: { subtitle },
-            template: { $video, $subtitle },
+            template: { $video, $subtitle, $track },
         } = this.art;
 
         setStyles($subtitle, subtitle.style || {});
-        const $track = document.createElement('track');
-        $track.default = true;
-        $track.kind = 'metadata';
-        $video.appendChild($track);
-        this.art.template.$track = $track;
-        this.load(subtitle.url).then(url => {
-            $track.src = url;
+
+        if (!$track) {
+            const $newTrack = document.createElement('track');
+            $newTrack.default = true;
+            $newTrack.kind = 'metadata';
+            $video.appendChild($newTrack);
+            this.art.template.$track = $newTrack;
+        }
+
+        this.load(url).then(url => {
+            this.art.template.$track.src = url;
             this.art.emit('subtitle:load', url);
+            
             if ($video.textTracks && $video.textTracks[0]) {
                 const [track] = $video.textTracks;
                 proxy(track, 'cuechange', () => {
@@ -100,13 +105,4 @@ export default class Subtitle {
             this.show();
         }
     }
-
-    switch(url) {
-        const { $track } = this.art.template;
-        errorHandle($track, 'You need to initialize the subtitle option first.');
-        this.load(url).then(url => {
-            $track.src = url;
-            this.art.emit('subtitle:switch', url);
-        });
-    }
 }

packages/artplayer/src/utils/index.js

@@ -104,6 +104,10 @@ export function append(parent, child) {
     return parent.lastElementChild;
 }
 
+export function remove(child) {
+    return child.parentNode.removeChild(child);
+}
+
 export function insertByIndex(parent, child, index) {
     const childs = Array.from(parent.children);
     child.dataset.index = index;