分离部分工具函数

packages/artplayer/src/utils/component.js

@@ -1,57 +1,57 @@
 import { append, insertByIndex, setStyles, setStyle } from './index';
 
-function commonMethod(art, option, $element, title) {
-    Object.defineProperty(option, '$ref', {
-        get: () => $element,
-    });
-
-    Object.defineProperty(option, 'hide', {
-        value: () => {
-            setStyle($element, 'display', 'none');
-            art.emit(`${title}:hide`, $element);
-        },
-    });
-
-    Object.defineProperty(option, 'show', {
-        value: () => {
-            setStyle($element, 'display', 'block');
-            art.emit(`${title}:show`, $element);
-        },
-    });
-}
-
-export default function componentMethod(art, parent, target, component, callback, title) {
-    const { proxy } = art.events;
+export default function component(art, parent, target, component, callback, title) {
     const option = typeof component === 'function' ? component(art) : component;
     if (!option.disable) {
-        if (parent.id === undefined) {
-            parent.id = 0;
-        }
         parent.id += 1;
         const name = option.name || `${title}${parent.id}`;
         const $element = document.createElement('div');
         $element.classList.value = `art-${title} art-${title}-${name}`;
-        insertByIndex(target, $element, option.index || parent.id);
+
         if (option.html) {
             append($element, option.html);
         }
+
         if (option.style) {
             setStyles($element, option.style);
         }
+
         if (option.click) {
-            proxy($element, 'click', event => {
+            art.events.proxy($element, 'click', event => {
                 event.preventDefault();
                 option.click.call(parent, event);
                 art.emit(`${title}:click`, $element);
             });
         }
+
+        Object.defineProperty(option, '$ref', {
+            get: () => $element,
+        });
+
+        Object.defineProperty(option, 'hide', {
+            value: () => {
+                setStyle($element, 'display', 'none');
+                art.emit(`${title}:hide`, $element);
+            },
+        });
+
+        Object.defineProperty(option, 'show', {
+            value: () => {
+                setStyle($element, 'display', 'block');
+                art.emit(`${title}:show`, $element);
+            },
+        });
+
+        insertByIndex(target, $element, option.index || parent.id);
+
         if (option.mounted) {
             option.mounted($element);
         }
+
         if (callback) {
             callback($element);
         }
-        commonMethod(art, option, $element, title);
+
         parent[name] = option;
         art.emit(`${title}:add`, option);
     }

packages/artplayer/src/utils/dom.js

@@ -0,0 +1,51 @@
+export function append(parent, child) {
+    if (child instanceof Element) {
+        parent.appendChild(child);
+    } else {
+        parent.insertAdjacentHTML('beforeend', child);
+    }
+    return parent.lastElementChild;
+}
+
+export function insertByIndex(parent, child, index) {
+    const childs = Array.from(parent.children);
+    child.dataset.index = index;
+    const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
+    if (nextChild) {
+        nextChild.insertAdjacentElement('beforebegin', child);
+    } else {
+        append(parent, child);
+    }
+    return child;
+}
+
+export function setStyle(element, key, value) {
+    element.style[key] = value;
+    return element;
+}
+
+export function setStyles(element, styles) {
+    Object.keys(styles).forEach(key => {
+        setStyle(element, key, styles[key]);
+    });
+    return element;
+}
+
+export function getStyle(element, key, numberType = true) {
+    const value = window.getComputedStyle(element, null).getPropertyValue(key);
+    return numberType ? parseFloat(value) : value;
+}
+
+export function sublings(target) {
+    return Array.from(target.parentElement.children).filter(item => item !== target);
+}
+
+export function inverseClass(target, className) {
+    sublings(target).forEach(item => item.classList.remove(className));
+    target.classList.add(className);
+}
+
+export function tooltip(target, msg, pos = 'up') {
+    target.setAttribute('data-balloon', msg);
+    target.setAttribute('data-balloon-pos', pos);
+}

packages/artplayer/src/utils/error.js

@@ -0,0 +1,16 @@
+export class ArtPlayerError extends Error {
+    constructor(message, context) {
+        super(message);
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, context || this.constructor);
+        }
+        this.name = 'ArtPlayerError';
+    }
+}
+
+export function errorHandle(condition, msg) {
+    const isFun = typeof condition === 'function';
+    if (isFun ? !isFun() : !condition) {
+        throw new ArtPlayerError(msg);
+    }
+}

packages/artplayer/src/utils/index.js

@@ -1,21 +1,6 @@
-export const instances = [];
-
-export class ArtPlayerError extends Error {
-    constructor(message, context) {
-        super(message);
-        if (typeof Error.captureStackTrace === 'function') {
-            Error.captureStackTrace(this, context || this.constructor);
-        }
-        this.name = 'ArtPlayerError';
-    }
-}
-
-export function errorHandle(condition, msg) {
-    const isFun = typeof condition === 'function';
-    if (isFun ? !isFun() : !condition) {
-        throw new ArtPlayerError(msg);
-    }
-}
+export * from './error';
+export * from './dom';
+export * from './subtitle';
 
 export function clamp(num, a, b) {
     return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
@@ -37,44 +22,6 @@ export function getExt(url) {
         .pop();
 }
 
-export function append(parent, child) {
-    if (child instanceof Element) {
-        parent.appendChild(child);
-    } else {
-        parent.insertAdjacentHTML('beforeend', child);
-    }
-    return parent.lastElementChild;
-}
-
-export function insertByIndex(parent, child, index) {
-    const childs = Array.from(parent.children);
-    child.dataset.index = index;
-    const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
-    if (nextChild) {
-        nextChild.insertAdjacentElement('beforebegin', child);
-    } else {
-        append(parent, child);
-    }
-    return child;
-}
-
-export function setStyle(element, key, value) {
-    element.style[key] = value;
-    return element;
-}
-
-export function setStyles(element, styles) {
-    Object.keys(styles).forEach(key => {
-        setStyle(element, key, styles[key]);
-    });
-    return element;
-}
-
-export function getStyle(element, key, numberType = true) {
-    const value = window.getComputedStyle(element, null).getPropertyValue(key);
-    return numberType ? parseFloat(value) : value;
-}
-
 export function secondToTime(second) {
     const add0 = num => (num < 10 ? `0${num}` : String(num));
     const hour = Math.floor(second / 3600);
@@ -83,24 +30,10 @@ export function secondToTime(second) {
     return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
 }
 
-export function tooltip(target, msg, pos = 'up') {
-    target.setAttribute('data-balloon', msg);
-    target.setAttribute('data-balloon-pos', pos);
-}
-
 export function sleep(ms = 0) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export function sublings(target) {
-    return Array.from(target.parentElement.children).filter(item => item !== target);
-}
-
-export function inverseClass(target, className) {
-    sublings(target).forEach(item => item.classList.remove(className));
-    target.classList.add(className);
-}
-
 export function debounce(func, wait, context) {
     let timeout;
     function fn(...args) {
@@ -118,14 +51,3 @@ export function debounce(func, wait, context) {
 
     return fn;
 }
-
-export function show(target, display) {
-    target.classList.remove('art-hide');
-    if (display) {
-        target.style.display = display;
-    }
-}
-
-export function hide(target) {
-    target.classList.add('art-hide');
-}

packages/artplayer/src/utils/subtitle.js

@@ -0,0 +1,19 @@
+export function srtToVtt(srtText) {
+    return 'WEBVTT \r\n\r\n'.concat(
+        srtText
+            .replace(/\{\\([ibu])\}/g, '</$1>')
+            .replace(/\{\\([ibu])1\}/g, '<$1>')
+            .replace(/\{([ibu])\}/g, '<$1>')
+            .replace(/\{\/([ibu])\}/g, '</$1>')
+            .replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g, '$1.$2')
+            .concat('\r\n\r\n'),
+    );
+}
+
+export function vttToBlob(vttText) {
+    return URL.createObjectURL(
+        new Blob([vttText], {
+            type: 'text/vtt',
+        }),
+    );
+}