优化icon

packages/artplayer/src/icons/index.js

@@ -1,4 +1,4 @@
-import { append } from '../utils';
+import { append, def, addClass } from '../utils';
 import loading from './loading.svg';
 import state from './state.svg';
 import play from './play.svg';
@@ -30,12 +30,16 @@ export default class Icons {
             ...art.option.icons,
         };
 
-        Object.keys(icons).forEach(key => {
-            const icon = document.createElement('i');
-            icon.classList.add('art-icon');
-            icon.classList.add(`art-icon-${key}`);
-            append(icon, icons[key]);
-            this[key] = icon;
+        Object.keys(icons).forEach((key) => {
+            def(this, key, {
+                get: () => {
+                    const icon = document.createElement('i');
+                    addClass(icon, 'art-icon');
+                    addClass(icon, `art-icon-${key}`);
+                    append(icon, icons[key]);
+                    return icon;
+                },
+            });
         });
     }
 }

packages/artplayer/src/scheme/index.js

@@ -1,59 +1,64 @@
 import { errorHandle } from '../utils';
 
+const b = 'boolean';
+const s = 'string';
+const n = 'number';
+const o = 'object';
+const a = 'array';
+const f = 'function';
+const r = 'regexp';
+
 function validElement(value, type, paths) {
-    return errorHandle(
-        type === 'string' || value instanceof Element,
-        `${paths.join('.')} require 'string' or 'Element' type`,
-    );
+    return errorHandle(type === s || value instanceof Element, `${paths.join('.')} require s or 'Element' type`);
 }
 
 const component = {
     html: validElement,
-    disable: '?boolean',
-    name: '?string',
-    index: '?number',
-    style: '?object',
-    click: '?function',
-    mounted: '?function',
-    tooltip: '?string',
-    selector: '?array',
-    onSelect: '?function',
+    disable: `?${b}`,
+    name: `?${s}`,
+    index: `?${n}`,
+    style: `?${o}`,
+    click: `?${f}`,
+    mounted: `?${f}`,
+    tooltip: `?${s}`,
+    selector: `?${a}`,
+    onSelect: `?${f}`,
 };
 
 export default {
     container: validElement,
-    url: 'string',
-    poster: 'string',
-    title: 'string',
-    theme: 'string',
-    lang: 'string',
-    volume: 'number',
-    isLive: 'boolean',
-    muted: 'boolean',
-    autoplay: 'boolean',
-    autoSize: 'boolean',
-    autoMini: 'boolean',
-    loop: 'boolean',
-    flip: 'boolean',
-    rotate: 'boolean',
-    playbackRate: 'boolean',
-    aspectRatio: 'boolean',
-    screenshot: 'boolean',
-    setting: 'boolean',
-    hotkey: 'boolean',
-    pip: 'boolean',
-    mutex: 'boolean',
-    light: 'boolean',
-    backdrop: 'boolean',
-    fullscreen: 'boolean',
-    fullscreenWeb: 'boolean',
-    subtitleOffset: 'boolean',
-    miniProgressBar: 'boolean',
-    localVideo: 'boolean',
-    localSubtitle: 'boolean',
-    networkMonitor: 'boolean',
-    plugins: ['function'],
-    whitelist: ['string|function|regexp'],
+    url: s,
+    poster: s,
+    title: s,
+    theme: s,
+    lang: s,
+    volume: n,
+    isLive: b,
+    muted: b,
+    autoplay: b,
+    autoSize: b,
+    autoMini: b,
+    loop: b,
+    flip: b,
+    rotate: b,
+    playbackRate: b,
+    aspectRatio: b,
+    screenshot: b,
+    setting: b,
+    hotkey: b,
+    pip: b,
+    mutex: b,
+    light: b,
+    backdrop: b,
+    fullscreen: b,
+    fullscreenWeb: b,
+    subtitleOffset: b,
+    miniProgressBar: b,
+    localVideo: b,
+    localSubtitle: b,
+    networkMonitor: b,
+    plugins: [f],
+    whitelist: [`${s}|${f}|${r}`],
     layers: [component],
     contextmenu: [component],
     controls: [
@@ -70,31 +75,31 @@ export default {
     ],
     quality: [
         {
-            default: '?boolean',
-            name: 'string',
-            url: 'string',
+            default: `?${b}`,
+            name: s,
+            url: s,
         },
     ],
     highlight: [
         {
-            time: 'number',
-            text: 'string',
+            time: n,
+            text: s,
         },
     ],
     thumbnails: {
-        url: 'string',
-        number: 'number',
-        width: 'number',
-        height: 'number',
-        column: 'number',
+        url: s,
+        number: n,
+        width: n,
+        height: n,
+        column: n,
     },
     subtitle: {
-        url: 'string',
-        style: 'object',
-        encoding: 'string',
-        bilingual: 'boolean',
+        url: s,
+        style: o,
+        encoding: s,
+        bilingual: b,
     },
-    moreVideoAttr: 'object',
-    icons: 'object',
-    customType: 'object',
+    moreVideoAttr: o,
+    icons: o,
+    customType: o,
 };