分离工具函数

packages/artplayer/src/utils/dom.js

@@ -0,0 +1,63 @@
+export function query(selector, parent = document) {
+    return parent.querySelector(selector);
+}
+
+export function queryAll(selector, parent = document) {
+    return Array.from(parent.querySelectorAll(selector));
+}
+
+export function addClass(target, className) {
+    return target.classList.add(className);
+}
+
+export function removeClass(target, className) {
+    return target.classList.remove(className);
+}
+
+export function hasClass(target, className) {
+    return target.classList.contains(className);
+}
+
+export function append(parent, child) {
+    if (child instanceof Element) {
+        parent.appendChild(child);
+    } else {
+        parent.insertAdjacentHTML('beforeend', String(child));
+    }
+    return parent.lastElementChild || parent.lastChild;
+}
+
+export function remove(child) {
+    return child.parentNode.removeChild(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 => removeClass(item, className));
+    addClass(target, className);
+}
+
+export function tooltip(target, msg, pos = 'up') {
+    target.setAttribute('aria-label', msg);
+    target.setAttribute('data-balloon-pos', pos);
+}

packages/artplayer/src/utils/error.js

@@ -1,4 +1,4 @@
-export default class ArtPlayerError extends Error {
+export class ArtPlayerError extends Error {
     constructor(message, context) {
         super(message);
         if (typeof Error.captureStackTrace === 'function') {
@@ -7,3 +7,10 @@ export default class ArtPlayerError extends Error {
         this.name = 'ArtPlayerError';
     }
 }
+
+export function errorHandle(condition, msg) {
+    if (!condition) {
+        throw new ArtPlayerError(msg);
+    }
+    return condition;
+}

packages/artplayer/src/utils/file.js

@@ -0,0 +1,25 @@
+export function getExt(url) {
+    if (url.includes('?')) {
+        return getExt(url.split('?')[0]);
+    }
+
+    if (url.includes('#')) {
+        return getExt(url.split('#')[0]);
+    }
+
+    return url
+        .trim()
+        .toLowerCase()
+        .split('.')
+        .pop();
+}
+
+export function downloadFile(url, name) {
+    const elink = document.createElement('a');
+    elink.style.display = 'none';
+    elink.href = url;
+    elink.download = name;
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+}

packages/artplayer/src/utils/format.js

@@ -0,0 +1,11 @@
+export function clamp(num, a, b) {
+    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+}
+
+export function secondToTime(second) {
+    const add0 = num => (num < 10 ? `0${num}` : String(num));
+    const hour = Math.floor(second / 3600);
+    const min = Math.floor((second - hour * 3600) / 60);
+    const sec = Math.floor(second - hour * 3600 - min * 60);
+    return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
+}

packages/artplayer/src/utils/index.js

@@ -1,210 +1,7 @@
-import ArtPlayerError from './ArtPlayerError';
-
-export function errorHandle(condition, msg) {
-    if (!condition) {
-        throw new ArtPlayerError(msg);
-    }
-    return condition;
-}
-
-export function hasOwnProperty(obj, name) {
-    return Object.prototype.hasOwnProperty.call(obj, name);
-}
-
-export function query(selector, parent = document) {
-    return parent.querySelector(selector);
-}
-
-export function queryAll(selector, parent = document) {
-    return Array.from(parent.querySelectorAll(selector));
-}
-
-export function addClass(target, className) {
-    return target.classList.add(className);
-}
-
-export function removeClass(target, className) {
-    return target.classList.remove(className);
-}
-
-export function hasClass(target, className) {
-    return target.classList.contains(className);
-}
-
-export function clamp(num, a, b) {
-    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
-}
-
-export function getExt(url) {
-    if (url.includes('?')) {
-        return getExt(url.split('?')[0]);
-    }
-
-    if (url.includes('#')) {
-        return getExt(url.split('#')[0]);
-    }
-
-    return url
-        .trim()
-        .toLowerCase()
-        .split('.')
-        .pop();
-}
-
-export function secondToTime(second) {
-    const add0 = num => (num < 10 ? `0${num}` : String(num));
-    const hour = Math.floor(second / 3600);
-    const min = Math.floor((second - hour * 3600) / 60);
-    const sec = Math.floor(second - hour * 3600 - min * 60);
-    return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
-}
-
-export function sleep(ms = 0) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export function debounce(func, wait, context) {
-    let timeout;
-    function fn(...args) {
-        const later = function later() {
-            timeout = null;
-            func.apply(context, args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    }
-
-    fn.clearTimeout = function ct() {
-        clearTimeout(timeout);
-    };
-
-    return fn;
-}
-
-export function throttle(callback, delay) {
-    let isThrottled = false;
-    let args;
-    let context;
-    function fn(...args2) {
-        if (isThrottled) {
-            args = args2;
-            context = this;
-            return;
-        }
-
-        isThrottled = true;
-        callback.apply(this, args2);
-        setTimeout(() => {
-            isThrottled = false;
-            if (args) {
-                fn.apply(context, args);
-                args = null;
-                context = null;
-            }
-        }, delay);
-    }
-    return fn;
-}
-
-export function mergeDeep(...objects) {
-    const isObject = item => item && typeof item === 'object' && !Array.isArray(item);
-    return objects.reduce((prev, obj) => {
-        Object.keys(obj).forEach(key => {
-            const pVal = prev[key];
-            const oVal = obj[key];
-            if (Array.isArray(pVal) && Array.isArray(oVal)) {
-                prev[key] = pVal.concat(...oVal);
-            } else if (isObject(pVal) && isObject(oVal) && !(oVal instanceof Element)) {
-                prev[key] = mergeDeep(pVal, oVal);
-            } else {
-                prev[key] = oVal;
-            }
-        });
-        return prev;
-    }, {});
-}
-
-export function append(parent, child) {
-    if (child instanceof Element) {
-        parent.appendChild(child);
-    } else {
-        parent.insertAdjacentHTML('beforeend', String(child));
-    }
-    return parent.lastElementChild || parent.lastChild;
-}
-
-export function remove(child) {
-    return child.parentNode.removeChild(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 => removeClass(item, className));
-    addClass(target, className);
-}
-
-export function tooltip(target, msg, pos = 'up') {
-    target.setAttribute('aria-label', msg);
-    target.setAttribute('data-balloon-pos', pos);
-}
-
-export function srtToVtt(srtText) {
-    return 'WEBVTT \r\n\r\n'.concat(
-        srtText
-            .replace(/{[\s\S]*?}/g, '')
-            .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',
-        }),
-    );
-}
-
-export function downloadFile(url, name) {
-    const elink = document.createElement('a');
-    setStyle(elink, 'display', 'none');
-    elink.href = url;
-    elink.download = name;
-    document.body.appendChild(elink);
-    elink.click();
-    document.body.removeChild(elink);
-}
-
-export function proxyPropertys(target, ...sources) {
-    return sources.reduce((result, source) => {
-        Object.getOwnPropertyNames(source).forEach(key => {
-            errorHandle(!hasOwnProperty(result, key), `Target attribute name is duplicated: ${key}`);
-            Object.defineProperty(result, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-        return result;
-    }, target);
-}
+export * from './dom';
+export * from './error';
+export * from './subtitle';
+export * from './file';
+export * from './property';
+export * from './time';
+export * from './format';

packages/artplayer/src/utils/property.js

@@ -0,0 +1,33 @@
+import { errorHandle } from './error';
+
+export function hasOwnProperty(obj, name) {
+    return Object.prototype.hasOwnProperty.call(obj, name);
+}
+
+export function proxyPropertys(target, ...sources) {
+    return sources.reduce((result, source) => {
+        Object.getOwnPropertyNames(source).forEach(key => {
+            errorHandle(!hasOwnProperty(result, key), `Target attribute name is duplicated: ${key}`);
+            Object.defineProperty(result, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+        return result;
+    }, target);
+}
+
+export function mergeDeep(...objects) {
+    const isObject = item => item && typeof item === 'object' && !Array.isArray(item);
+    return objects.reduce((prev, obj) => {
+        Object.keys(obj).forEach(key => {
+            const pVal = prev[key];
+            const oVal = obj[key];
+            if (Array.isArray(pVal) && Array.isArray(oVal)) {
+                prev[key] = pVal.concat(...oVal);
+            } else if (isObject(pVal) && isObject(oVal) && !(oVal instanceof Element)) {
+                prev[key] = mergeDeep(pVal, oVal);
+            } else {
+                prev[key] = oVal;
+            }
+        });
+        return prev;
+    }, {});
+}

packages/artplayer/src/utils/subtitle.js

@@ -1,4 +1,25 @@
-export default function assToVtt(ass) {
+export function srtToVtt(srtText) {
+    return 'WEBVTT \r\n\r\n'.concat(
+        srtText
+            .replace(/{[\s\S]*?}/g, '')
+            .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',
+        }),
+    );
+}
+
+export function assToVtt(ass) {
     const reAss = new RegExp(
         'Dialogue:\\s\\d,' +
             '(\\d+:\\d\\d:\\d\\d.\\d\\d),' +

packages/artplayer/src/utils/time.js

@@ -0,0 +1,46 @@
+export function sleep(ms = 0) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export function debounce(func, wait, context) {
+    let timeout;
+    function fn(...args) {
+        const later = function later() {
+            timeout = null;
+            func.apply(context, args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    }
+
+    fn.clearTimeout = function ct() {
+        clearTimeout(timeout);
+    };
+
+    return fn;
+}
+
+export function throttle(callback, delay) {
+    let isThrottled = false;
+    let args;
+    let context;
+    function fn(...args2) {
+        if (isThrottled) {
+            args = args2;
+            context = this;
+            return;
+        }
+
+        isThrottled = true;
+        callback.apply(this, args2);
+        setTimeout(() => {
+            isThrottled = false;
+            if (args) {
+                fn.apply(context, args);
+                args = null;
+                context = null;
+            }
+        }, delay);
+    }
+    return fn;
+}