add artplayer-plugin-vtt-thumbnail

packages/artplayer-plugin-vtt-thumbnail/src/getVttArray.js

@@ -0,0 +1,64 @@
+function padEnd(str, targetLength, padString) {
+    if (str.length > targetLength) {
+        return String(str);
+    } else {
+        targetLength = targetLength - str.length;
+        if (targetLength > padString.length) {
+            padString += padString.repeat(targetLength / padString.length);
+        }
+        return String(str) + padString.slice(0, targetLength);
+    }
+}
+
+function t2d(time) {
+    var arr = time.split('.');
+    var left = arr[0].split(':') || [];
+    var right = padEnd(arr[1] || '0', 3, '0');
+    var ms = Number(right) / 1000;
+
+    var h = Number(left[left.length - 3] || 0) * 3600;
+    var m = Number(left[left.length - 2] || 0) * 60;
+    var s = Number(left[left.length - 1] || 0);
+    return h + m + s + ms;
+}
+
+export default async function getVttArray(vttUrl = '') {
+    const vttString = await (await fetch(vttUrl)).text();
+    const lines = vttString.split(/[\n\r]/gm).filter((item) => item.trim());
+    const vttArray = [];
+
+    for (let i = 1; i < lines.length; i += 2) {
+        const time = lines[i];
+        const text = lines[i + 1];
+
+        if (!text.trim()) continue;
+
+        const timeReg =
+            /((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)(?: ?--> ?)((?:[0-9]{2}:)?(?:[0-9]{2}:)?[0-9]{2}(?:.[0-9]{3})?)/;
+        const timeMatch = time.match(timeReg);
+
+        const textReg = /(.*)#(\w{4})=(.*)/i;
+        const textMatch = text.match(textReg);
+
+        const start = Math.floor(t2d(timeMatch[1]));
+        const end = Math.floor(t2d(timeMatch[2]));
+
+        const urlArr = vttUrl.split('/');
+        urlArr.pop();
+        urlArr.push(textMatch[1]);
+        const url = urlArr.join('/');
+
+        const result = { start, end, url };
+
+        const keys = textMatch[2].split('');
+        const values = textMatch[3].split(',');
+
+        for (let j = 0; j < keys.length; j++) {
+            result[keys[j]] = values[j];
+        }
+
+        vttArray.push(result);
+    }
+
+    return vttArray;
+}

packages/artplayer-plugin-vtt-thumbnail/src/index.js

@@ -0,0 +1,71 @@
+import getVttArray from './getVttArray';
+
+export default function artplayerPluginVttThumbnail(option) {
+    return async (art) => {
+        const {
+            constructor: {
+                utils: { setStyle, clamp },
+            },
+            template: { $progress },
+            events: { proxy },
+        } = art;
+
+        const vttArray = await getVttArray(option.vtt);
+
+        function getPosFromEvent(art, event) {
+            const { $progress } = art.template;
+            const { left } = $progress.getBoundingClientRect();
+            const width = clamp(event.pageX - left, 0, $progress.clientWidth);
+            const second = (width / $progress.clientWidth) * art.duration;
+            return { width, second };
+        }
+
+        art.controls.add({
+            name: 'thumbnails',
+            position: 'top',
+            index: 20,
+            style: option.style || {},
+            mounted($control) {
+                proxy($progress, 'mousemove', async (event) => {
+                    setStyle($control, 'display', 'block');
+                    const { second, width } = getPosFromEvent(art, event);
+                    const find = vttArray.find((item) => second >= item.start && second <= item.end);
+                    if (!find) return setStyle($control, 'display', 'none');
+
+                    setStyle($control, 'backgroundImage', `url(${find.url})`);
+                    setStyle($control, 'height', `${find.h}px`);
+                    setStyle($control, 'width', `${find.w}px`);
+                    setStyle($control, 'backgroundPosition', `-${find.x}px -${find.y}px`);
+
+                    if (width <= find.w / 2) {
+                        setStyle($control, 'left', 0);
+                    } else if (width > $progress.clientWidth - find.w / 2) {
+                        setStyle($control, 'left', `${$progress.clientWidth - find.w}px`);
+                    } else {
+                        setStyle($control, 'left', `${width - find.w / 2}px`);
+                    }
+                });
+
+                proxy($progress, 'mouseleave', () => {
+                    setStyle($control, 'display', 'none');
+                });
+
+                art.on('hover', (state) => {
+                    setStyle($control, 'display', state ? 'block' : 'none');
+                });
+            },
+        });
+
+        return {
+            name: 'artplayerPluginVttThumbnail',
+        };
+    };
+}
+
+artplayerPluginVttThumbnail.env = process.env.NODE_ENV;
+artplayerPluginVttThumbnail.version = process.env.APP_VER;
+artplayerPluginVttThumbnail.build = process.env.BUILD_DATE;
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginVttThumbnail'] = artplayerPluginVttThumbnail;
+}