合并字幕插件

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

@@ -0,0 +1,31 @@
+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);
+        });
+    }
+
+    add(plugin) {
+        this.id += 1;
+        const result = plugin.call(this, this.art);
+        let pluginName = '';
+        if (result && result.name) {
+            pluginName = result.name;
+        } else if (plugin.name) {
+            pluginName = plugin.name;
+        } else {
+            pluginName = `plugin${this.id}`;
+        }
+        this[pluginName] = result;
+        this.art.emit('plugin:add', plugin);
+        return this;
+    }
+}