separate variable constants

packages/artplayer/src/control/index.js

@@ -22,20 +22,22 @@ export default class Control extends Component {
 
         const {
             option,
+            constructor,
+            events: { proxy },
             template: { $player },
         } = art;
 
-        this.mouseMoveTime = Date.now();
+        let activeTime = Date.now();
 
-        art.on('mousemove', () => {
+        proxy($player, ['click', 'mousemove', 'touchstart', 'touchmove'], () => {
             this.show = true;
             removeClass($player, 'art-hide-cursor');
             addClass($player, 'art-hover');
-            this.mouseMoveTime = Date.now();
+            activeTime = Date.now();
         });
 
         art.on('video:timeupdate', () => {
-            if (art.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) {
+            if (art.playing && this.show && Date.now() - activeTime >= constructor.CONTROL_HIDE_TIME) {
                 this.show = false;
                 addClass($player, 'art-hide-cursor');
                 removeClass($player, 'art-hover');

packages/artplayer/src/control/progress.js

@@ -41,10 +41,10 @@ export default function progress(options) {
 
                 setStyle($played, 'backgroundColor', 'var(--theme)');
 
-                let indicatorSize = 14;
+                let indicatorSize = art.constructor.INDICATOR_SIZE;
 
                 if (icons.indicator) {
-                    indicatorSize = 16;
+                    indicatorSize = art.constructor.INDICATOR_SIZE_ICON;
                     append($indicator, icons.indicator);
                 } else {
                     setStyles($indicator, {
@@ -53,7 +53,10 @@ export default function progress(options) {
                 }
 
                 if (isMobile) {
-                    indicatorSize = 20;
+                    indicatorSize = art.constructor.INDICATOR_SIZE_MOBILE;
+                    if (icons.indicator) {
+                        indicatorSize = art.constructor.INDICATOR_SIZE_MOBILE_ICON;
+                    }
                 }
 
                 setStyles($indicator, {

packages/artplayer/src/control/volume.js

@@ -11,8 +11,8 @@ export default function volume(option) {
             } = art;
 
             let isDroging = false;
-            const panelWidth = 60; // 音量条宽度
-            const handleWidth = 12; // 音量把手宽度
+            const panelWidth = art.constructor.VOLUME_PANEL_WIDTH;
+            const handleWidth = art.constructor.VOLUME_HANDLE_WIDTH;
             const $volume = append($control, icons.volume);
             const $volumeClose = append($control, icons.volumeClose);
             const $volumePanel = append($control, '<div class="art-volume-panel"></div>');

packages/artplayer/src/events/clickInit.js

@@ -2,6 +2,7 @@ import { includeFromEvent, isMobile } from '../utils';
 
 export default function clickInit(art, events) {
     const {
+        constructor,
         template: { $player, $video },
     } = art;
 
@@ -19,7 +20,7 @@ export default function clickInit(art, events) {
     events.proxy($video, 'click', () => {
         const now = Date.now();
 
-        if (now - clickTime <= 300) {
+        if (now - clickTime <= constructor.DB_CLICE_TIME) {
             art.emit('dblclick');
 
             if (isMobile) {

packages/artplayer/src/events/gestureInit.js

@@ -51,6 +51,7 @@ export default function gestureInit(art, events) {
         const {
             notice,
             plugins,
+            constructor,
             template: { $video },
         } = art;
 
@@ -69,8 +70,8 @@ export default function gestureInit(art, events) {
 
                 clearTimeout(pressTimer);
                 pressTimer = setTimeout(() => {
-                    art.playbackRate = 3;
-                }, 1000);
+                    art.playbackRate = constructor.MOBILE_AUTO_PLAYBACKRATE;
+                }, constructor.MOBILE_AUTO_PLAYBACKRATE_TIME);
             }
         });
 

packages/artplayer/src/events/resizeInit.js

@@ -10,7 +10,7 @@ export default function resizeInit(art, events) {
         art.aspectRatioReset = true;
         notice.show = '';
         art.emit('resize');
-    }, 500);
+    }, art.constructor.RESIZE_TIME);
 
     events.proxy(window, ['orientationchange', 'resize'], () => {
         resizeFn();

packages/artplayer/src/events/viewInit.js

@@ -3,12 +3,13 @@ import { throttle, isInViewport } from '../utils';
 export default function viewInit(art, events) {
     const {
         option,
+        constructor,
         template: { $container },
     } = art;
 
     const scrollFn = throttle(() => {
-        art.emit('view', isInViewport($container, 50));
-    }, 200);
+        art.emit('view', isInViewport($container, constructor.SCROLL_GAP));
+    }, constructor.SCROLL_TIME);
 
     events.proxy(window, 'scroll', () => {
         scrollFn();

packages/artplayer/src/index.js

@@ -196,6 +196,27 @@ export default class Artplayer extends Emitter {
     }
 }
 
+Artplayer.NOTICE_TIME = 2000;
+Artplayer.SETTING_WIDTH = 250;
+Artplayer.SETTING_ITEM_WIDTH = 200;
+Artplayer.INDICATOR_SIZE = 14;
+Artplayer.INDICATOR_SIZE_ICON = 16;
+Artplayer.INDICATOR_SIZE_MOBILE = 20;
+Artplayer.VOLUME_PANEL_WIDTH = 60;
+Artplayer.VOLUME_HANDLE_WIDTH = 12;
+Artplayer.RESIZE_TIME = 500;
+Artplayer.SCROLL_TIME = 200;
+Artplayer.SCROLL_GAP = 50;
+Artplayer.AUTO_PLAYBACK_MAX = 10;
+Artplayer.RECONNECT_TIME_MAX = 5;
+Artplayer.RECONNECT_SLEEP_TIME = 1000;
+Artplayer.CONTROL_HIDE_TIME = 3000;
+Artplayer.DB_CLICE_TIME = 300;
+Artplayer.MOBILE_AUTO_PLAYBACKRATE = 3;
+Artplayer.MOBILE_AUTO_PLAYBACKRATE_TIME = 1000;
+Artplayer.MOBILE_AUTO_ORIENTATION_TIME = 100;
+Artplayer.INFO_LOOP_TIME = 1000;
+
 // eslint-disable-next-line no-console
 console.log(
     '%c ArtPlayer %c __VERSION__ %c https://artplayer.org',

packages/artplayer/src/info.js

@@ -14,6 +14,7 @@ export default class Info extends Component {
 
     init() {
         const {
+            constructor,
             events: { proxy },
             template: { $infoPanel, $infoClose, $video },
         } = this.art;
@@ -38,7 +39,7 @@ export default class Info extends Component {
                     item.innerText = innerText;
                 }
             }
-            timer = setTimeout(loop, 1000);
+            timer = setTimeout(loop, constructor.INFO_LOOP_TIME);
         }
 
         loop();

packages/artplayer/src/notice.js

@@ -3,7 +3,6 @@ import { addClass, removeClass } from './utils';
 export default class Notice {
     constructor(art) {
         this.art = art;
-        this.time = 2000;
         this.timer = null;
     }
 
@@ -16,6 +15,6 @@ export default class Notice {
         this.timer = setTimeout(() => {
             $noticeInner.innerText = '';
             removeClass($player, 'art-notice-show');
-        }, this.time);
+        }, this.art.constructor.NOTICE_TIME);
     }
 }

packages/artplayer/src/player/eventInit.js

@@ -3,15 +3,15 @@ import { sleep, addClass, setStyle, isMobile } from '../utils';
 
 export default function eventInit(art) {
     const {
-        option,
-        events: { proxy },
-        template: { $player, $video, $poster },
         i18n,
         notice,
+        option,
+        constructor,
+        events: { proxy },
+        template: { $player, $video, $poster },
     } = art;
 
     let reconnectTime = 0;
-    const maxReconnectTime = 5;
 
     for (let index = 0; index < config.events.length; index++) {
         proxy($video, config.events[index], (event) => {
@@ -61,8 +61,8 @@ export default function eventInit(art) {
     });
 
     art.on('video:error', () => {
-        if (reconnectTime < maxReconnectTime) {
-            sleep(1000).then(() => {
+        if (reconnectTime < constructor.RECONNECT_TIME_MAX) {
+            sleep(constructor.RECONNECT_SLEEP_TIME).then(() => {
                 reconnectTime += 1;
                 art.url = option.url;
                 notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
@@ -72,7 +72,7 @@ export default function eventInit(art) {
             art.loading.show = false;
             art.controls.show = false;
             addClass($player, 'art-error');
-            sleep(1000).then(() => {
+            sleep(constructor.RECONNECT_SLEEP_TIME).then(() => {
                 notice.show = i18n.get('Video Load Failed');
                 art.destroy(false);
             });

packages/artplayer/src/plugins/autoOrientation.js

@@ -3,6 +3,7 @@ import { setStyle, addClass, removeClass, hasClass } from '../utils';
 export default function autoOrientation(art) {
     const {
         option,
+        constructor,
         template: { $player, $video },
     } = art;
 
@@ -21,7 +22,7 @@ export default function autoOrientation(art) {
                     setStyle($player, 'transform-origin', '0 0');
                     setStyle($player, 'transform', `rotate(90deg) translate(0, -${viewWidth}px)`);
                     addClass($player, 'art-auto-orientation');
-                }, 100);
+                }, constructor.MOBILE_AUTO_ORIENTATION_TIME);
             }
         } else {
             if (hasClass($player, 'art-auto-orientation')) {

packages/artplayer/src/plugins/autoPlayback.js

@@ -4,13 +4,14 @@ export default function autoPlayback(art) {
     const {
         i18n,
         storage,
+        constructor,
         template: { $poster },
     } = art;
 
     art.on('video:timeupdate', () => {
         const times = storage.get('times') || {};
         const keys = Object.keys(times);
-        if (keys.length > 10) delete times[keys[0]];
+        if (keys.length > constructor.AUTO_PLAYBACK_MAX) delete times[keys[0]];
         times[art.option.url] = art.currentTime;
         storage.set('times', times);
     });

packages/artplayer/src/setting/aspectRatio.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function aspectRatio(art) {
-    const { i18n, icons } = art;
+    const { i18n, icons, constructor } = art;
 
     function getI18n(value) {
         return value === 'default' ? i18n.get('Default') : value;
@@ -14,7 +14,7 @@ export default function aspectRatio(art) {
     }
 
     return {
-        width: 200,
+        width: constructor.SETTING_ITEM_WIDTH,
         html: i18n.get('Aspect Ratio'),
         icon: icons.aspectRatio,
         tooltip: getI18n(art.aspectRatio),

packages/artplayer/src/setting/flip.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function flip(art) {
-    const { i18n, icons } = art;
+    const { i18n, icons, constructor } = art;
 
     const keys = {
         normal: 'Normal',
@@ -16,7 +16,7 @@ export default function flip(art) {
     }
 
     return {
-        width: 200,
+        width: constructor.SETTING_ITEM_WIDTH,
         html: i18n.get('Video Flip'),
         tooltip: i18n.get(keys[art.flip]),
         icon: icons.config,

packages/artplayer/src/setting/index.js

@@ -31,7 +31,6 @@ export default class Setting extends Component {
         this.name = 'setting';
         this.$parent = $setting;
 
-        this.width = 250;
         this.option = [];
         this.events = [];
         this.cache = new Map();
@@ -241,7 +240,7 @@ export default class Setting extends Component {
                 append($panel, this.creatItem(option[index]));
             }
 
-            $panel.dataset.width = width || this.width;
+            $panel.dataset.width = width || this.art.constructor.SETTING_WIDTH;
             append(this.$parent, $panel);
             this.cache.set(option, $panel);
             inverseClass($panel, 'art-current');

packages/artplayer/src/setting/playbackRate.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function playbackRate(art) {
-    const { i18n, icons } = art;
+    const { i18n, icons, constructor } = art;
 
     function getI18n(value) {
         return value === 1.0 ? i18n.get('Normal') : value;
@@ -14,7 +14,7 @@ export default function playbackRate(art) {
     }
 
     return {
-        width: 200,
+        width: constructor.SETTING_ITEM_WIDTH,
         html: i18n.get('Play Speed'),
         tooltip: getI18n(art.playbackRate),
         icon: icons.playbackRate,

packages/artplayer/src/setting/subtitleOffset.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function subtitleOffset(art) {
-    const { i18n, icons } = art;
+    const { i18n, icons, constructor } = art;
 
     function getI18n(value) {
         return value === 0 ? i18n.get('Normal') : value;
@@ -14,7 +14,7 @@ export default function subtitleOffset(art) {
     }
 
     return {
-        width: 200,
+        width: constructor.SETTING_ITEM_WIDTH,
         html: i18n.get('Subtitle Offset'),
         tooltip: getI18n(art.subtitleOffset),
         icon: icons.subtitle,