合并字幕插件

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

@@ -0,0 +1,89 @@
+function i18nMix(i18n) {
+    i18n.update({
+        'zh-cn': {
+            'Subtitle offset time': '字幕偏移时间',
+        },
+        'zh-tw': {
+            'Subtitle offset time': '字幕偏移時間',
+        },
+    });
+}
+
+function settingMix(art) {
+    const {
+        i18n,
+        events: { proxy },
+    } = art;
+    return {
+        title: 'Subtitle',
+        name: 'subtitle',
+        index: 20,
+        html: `
+            <div class="art-setting-header">
+                ${i18n.get('Subtitle offset time')}: <span class="art-subtitle-value">0</span>s
+            </div>
+            <div class="art-setting-body">
+                <input
+                    style="width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;"
+                    class="art-subtitle-range"
+                    type="range"
+                    min="-5"
+                    max="5"
+                    step="0.5"
+                >
+            </div>
+        `,
+        mounted: $setting => {
+            const $range = $setting.querySelector('.art-subtitle-range');
+            const $value = $setting.querySelector('.art-subtitle-value');
+            proxy($range, 'change', () => {
+                const { value } = $range;
+                $value.innerText = value;
+                art.plugins.artplayerPluginSubtitle.offset(Number(value));
+            });
+
+            art.on('subtitle:switch', () => {
+                $range.value = 0;
+                $value.innerText = 0;
+            });
+
+            art.on('artplayerPluginSubtitle:set', value => {
+                if ($range.value !== value) {
+                    $range.value = value;
+                    $value.innerText = value;
+                }
+            });
+        },
+    };
+}
+
+export default function artplayerPluginSubtitle(art) {
+    const { clamp } = art.constructor.utils;
+    const { setting, notice, template, i18n } = art;
+    i18nMix(i18n);
+    setting.add(settingMix);
+    
+    let cuesCache = [];
+    art.on('subtitle:switch', () => {
+        cuesCache = [];
+    });
+
+    return {
+        offset(value) {
+            const cues = Array.from(template.$track.track.cues);
+            const time = clamp(value, -5, 5);
+            cues.forEach((cue, index) => {
+                if (!cuesCache[index]) {
+                    cuesCache[index] = {
+                        startTime: cue.startTime,
+                        endTime: cue.endTime,
+                    };
+                }
+                cue.startTime = cuesCache[index].startTime + time;
+                cue.endTime = cuesCache[index].endTime + time;
+            });
+            notice.show(`${i18n.get('Subtitle offset time')}: ${value}s`);
+            art.emit('artplayerPluginSubtitle:set', value);
+        },
+    };
+}

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;