删除多余事件

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { setStyle } from '../utils';
+import { setStyles } from '../utils';
 import Component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -82,8 +82,10 @@ export default class Contextmenu extends Component {
                     menuTop = cHeight - mHeight;
                 }
 
-                setStyle($contextmenu, 'left', `${menuLeft}px`);
-                setStyle($contextmenu, 'top', `${menuTop}px`);
+                setStyles($contextmenu, {
+                    top: `${menuTop}px`,
+                    left: `${menuLeft}px`,
+                });
             });
 
             proxy($player, 'click', event => {

packages/artplayer/src/control/fullscreen.js

@@ -1,8 +1,9 @@
-import { append, tooltip, setStyle } from '../utils';
+import { append, tooltip } from '../utils';
 
 export default function fullscreen(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Fullscreen'),
         mounted: $control => {
             const {
                 events: { proxy },
@@ -11,21 +12,14 @@ export default function fullscreen(option) {
                 player,
             } = art;
 
-            const $fullscreen = append($control, icons.fullscreen);
-            tooltip($fullscreen, i18n.get('Fullscreen'));
+            append($control, icons.fullscreen);
 
             proxy($control, 'click', () => {
                 player.fullscreenToggle = true;
             });
 
-            art.on('fullscreenEnabled', () => {
-                setStyle($fullscreen, 'opacity', '0.8');
-                tooltip($fullscreen, i18n.get('Exit fullscreen'));
-            });
-
-            art.on('fullscreenExit', () => {
-                setStyle($fullscreen, 'opacity', '1');
-                tooltip($fullscreen, i18n.get('Fullscreen'));
+            art.on('fullscreenChange', value => {
+                tooltip($control, i18n.get(value ? 'Exit fullscreen' : 'Fullscreen'));
             });
         },
     });

packages/artplayer/src/control/fullscreenWeb.js

@@ -1,8 +1,9 @@
-import { append, tooltip, setStyle } from '../utils';
+import { append, tooltip } from '../utils';
 
 export default function fullscreenWeb(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Web fullscreen'),
         mounted: $control => {
             const {
                 events: { proxy },
@@ -11,21 +12,14 @@ export default function fullscreenWeb(option) {
                 player,
             } = art;
 
-            const $fullscreenWeb = append($control, icons.fullscreenWeb);
-            tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
+            append($control, icons.fullscreenWeb);
 
             proxy($control, 'click', () => {
                 player.fullscreenWebToggle = true;
             });
 
-            art.on('fullscreenWebEnabled', () => {
-                setStyle($fullscreenWeb, 'opacity', '0.8');
-                tooltip($fullscreenWeb, i18n.get('Exit web fullscreen'));
-            });
-
-            art.on('fullscreenWebExit', () => {
-                setStyle($fullscreenWeb, 'opacity', '1');
-                tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
+            art.on('fullscreenWebChange', value => {
+                tooltip($control, i18n.get(value ? 'Exit web fullscreen' : 'Web fullscreen'));
             });
         },
     });

packages/artplayer/src/control/index.js

@@ -136,7 +136,10 @@ export default class Control extends Component {
 
     add(getOption, callback) {
         const option = typeof getOption === 'function' ? getOption(this.art) : getOption;
-        errorHandle(option.position, 'Controls option.position can not be empty');
+        errorHandle(
+            ['top', 'left', 'right'].includes(option.position),
+            `Control option.position must one of 'top', 'left', 'right'`,
+        );
         const { $progress, $controlsLeft, $controlsRight } = this.art.template;
 
         switch (option.position) {

packages/artplayer/src/control/pip.js

@@ -3,6 +3,7 @@ import { append, tooltip } from '../utils';
 export default function pip(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Mini player'),
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,10 +11,15 @@ export default function pip(option) {
                 i18n,
                 player,
             } = art;
-            const $pip = append($control, icons.pip);
-            tooltip($pip, i18n.get('Mini player'));
+
+            append($control, icons.pip);
+
             proxy($control, 'click', () => {
-                player.pip = true;
+                player.pipToggle = true;
+            });
+
+            art.on('pipChange', value => {
+                tooltip($control, i18n.get(value ? 'Exit mini player' : 'Mini player'));
             });
         },
     });

packages/artplayer/src/control/screenshot.js

@@ -1,19 +1,18 @@
-import { append, tooltip } from '../utils';
+import { append } from '../utils';
 
 export default function screenshot(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Screenshot'),
         mounted: $control => {
             const {
                 events: { proxy },
                 icons,
-                i18n,
                 player,
             } = art;
 
-            const $screenshot = append($control, icons.screenshot);
-            tooltip($screenshot, i18n.get('Screenshot'));
-            proxy($screenshot, 'click', () => {
+            append($control, icons.screenshot);
+            proxy($control, 'click', () => {
                 player.screenshot();
             });
         },

packages/artplayer/src/control/setting.js

@@ -1,8 +1,9 @@
-import { append, tooltip, setStyle } from '../utils';
+import { append, tooltip } from '../utils';
 
 export default function setting(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Show setting'),
         mounted: $control => {
             const {
                 events: { proxy },
@@ -11,8 +12,7 @@ export default function setting(option) {
                 setting,
             } = art;
 
-            const $setting = append($control, icons.setting);
-            tooltip($setting, i18n.get('Show setting'));
+            append($control, icons.setting);
 
             proxy($control, 'click', () => {
                 setting.toggle();
@@ -20,11 +20,9 @@ export default function setting(option) {
 
             art.on('setting:toggle', value => {
                 if (value) {
-                    setStyle($setting, 'opacity', '0.8');
-                    tooltip($setting, i18n.get('Hide setting'));
+                    tooltip($control, i18n.get('Hide setting'));
                 } else {
-                    setStyle($setting, 'opacity', '1');
-                    tooltip($setting, i18n.get('Show setting'));
+                    tooltip($control, i18n.get('Show setting'));
                 }
             });
         },

packages/artplayer/src/control/subtitle.js

@@ -1,8 +1,9 @@
-import { append, tooltip, setStyle } from '../utils';
+import { append, tooltip } from '../utils';
 
 export default function subtitle(option) {
     return art => ({
         ...option,
+        tooltip: art.i18n.get('Hide subtitle'),
         mounted: $control => {
             const {
                 events: { proxy },
@@ -11,21 +12,14 @@ export default function subtitle(option) {
                 subtitle,
             } = art;
 
-            const $subtitle = append($control, icons.subtitle);
-            tooltip($subtitle, i18n.get('Hide subtitle'));
+            append($control, icons.subtitle);
 
             proxy($control, 'click', () => {
-                subtitle.toggle();
+                subtitle.toggle = true;
             });
 
             art.on('subtitle:toggle', value => {
-                if (value) {
-                    setStyle($subtitle, 'opacity', '1');
-                    tooltip($subtitle, i18n.get('Hide subtitle'));
-                } else {
-                    setStyle($subtitle, 'opacity', '0.8');
-                    tooltip($subtitle, i18n.get('Show subtitle'));
-                }
+                tooltip($control, i18n.get(value ? 'Hide subtitle' : 'Show subtitle'));
             });
         },
     });

packages/artplayer/src/i18n/zh-cn.json

@@ -31,6 +31,7 @@
     "Web fullscreen": "网页全屏",
     "Exit web fullscreen": "退出网页全屏",
     "Mini player": "迷你播放器",
+    "Exit mini player": "退出迷你播放器",
     "Does not support fullscreen": "不支持全屏",
     "Local Subtitle": "本地字幕",
     "Local Video": "本地视频",

packages/artplayer/src/i18n/zh-tw.json

@@ -31,6 +31,7 @@
     "Web fullscreen": "網頁全屏",
     "Exit web fullscreen": "退出網頁全屏",
     "Mini player": "迷你播放器",
+    "Exit mini player": "退出迷你播放器",
     "Does not support fullscreen": "不支持全屏",
     "Local Subtitle": "本地字幕",
     "Local Video": "本地視頻",

packages/artplayer/src/mobile.js

@@ -40,13 +40,11 @@ export default class Mobile {
         const typeName = option.type || getExt(option.url);
         const typeCallback = option.customType[typeName];
         if (typeName && typeCallback) {
-            art.emit('beforeCustomType', typeName);
             typeCallback($video, option.url, art);
-            art.emit('afterCustomType', typeName);
+            art.emit('customType', typeName);
         } else {
-            art.emit('beforeAttachUrl', option.url);
             $video.src = option.url;
-            art.emit('afterAttachUrl', $video.src);
+            art.emit('urlChange', $video.src);
         }
     }
 }

packages/artplayer/src/notice.js

@@ -3,7 +3,7 @@ import { addClass, removeClass } from './utils';
 export default class Notice {
     constructor(art) {
         this.art = art;
-        this.time = 1000;
+        this.time = 2000;
         this.timer = null;
     }
 

packages/artplayer/src/player/attachUrlMix.js

@@ -1,49 +0,0 @@
-import { getExt, sleep, errorHandle, def } from '../utils';
-
-export default function attachUrlMix(art, player) {
-    const {
-        option: { type, customType },
-        template: { $video },
-    } = art;
-
-    def(player, 'url', {
-        get() {
-            return $video.src;
-        },
-    });
-
-    def(player, 'attachUrl', {
-        value: url =>
-            sleep().then(() => {
-                function attachUrl(videoUrl) {
-                    const typeName = type || getExt(videoUrl);
-                    const typeCallback = customType[typeName];
-                    if (typeName && typeCallback) {
-                        art.loading.show = true;
-                        art.emit('beforeCustomType', typeName);
-                        typeCallback.call(art, $video, videoUrl, art);
-                        art.emit('afterCustomType', typeName);
-                    } else {
-                        art.emit('beforeAttachUrl', videoUrl);
-                        $video.src = videoUrl;
-                        art.emit('afterAttachUrl', videoUrl);
-                    }
-                    return Promise.resolve(videoUrl);
-                }
-
-                if (typeof url === 'function') {
-                    const result = url.call(art);
-                    errorHandle(
-                        typeof result.then === 'function',
-                        'If url is a function, it needs to return a promise.',
-                    );
-                    return result.then(videoUrl => {
-                        art.loading.show = true;
-                        return attachUrl(videoUrl);
-                    });
-                }
-
-                return attachUrl(url);
-            }),
-    });
-}

packages/artplayer/src/player/attrInit.js

@@ -3,9 +3,10 @@ import { clamp } from '../utils';
 export default function attrInit(art, player) {
     const {
         option,
+        storage,
         template: { $video },
     } = art;
-    
+
     Object.keys(option.moreVideoAttr).forEach(key => {
         $video[key] = option.moreVideoAttr[key];
     });
@@ -13,11 +14,16 @@ export default function attrInit(art, player) {
     if (option.muted) {
         $video.muted = option.muted;
     }
-    
+
     if (option.volume) {
         $video.volume = clamp(option.volume, 0, 1);
     }
 
+    const volume = storage.get('volume');
+    if (volume) {
+        $video.volume = clamp(volume, 0, 1);
+    }
+
     if (option.poster) {
         $video.poster = option.poster;
     }
@@ -27,6 +33,5 @@ export default function attrInit(art, player) {
     }
 
     $video.controls = false;
-
-    player.attachUrl(option.url);
+    player.url = option.url;
 }

packages/artplayer/src/player/eventInit.js

@@ -63,7 +63,7 @@ export default function eventInit(art, player) {
         if (reconnectTime < maxReconnectTime) {
             sleep(1000).then(() => {
                 reconnectTime += 1;
-                player.attachUrl(option.url);
+                player.url = option.url;
                 notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
             });
         } else {

packages/artplayer/src/player/fullscreenMix.js

@@ -2,59 +2,28 @@ import screenfull from 'screenfull';
 import { addClass, removeClass, def } from '../utils';
 
 export default function fullscreenMix(art, player) {
-    const {
-        i18n,
-        notice,
-        events: { destroyEvents },
-        template: { $player },
-    } = art;
-
-    const screenfullChange = () => {
-        art.emit('fullscreenChange', screenfull.isFullscreen);
-    };
-
-    const screenfullError = () => {
-        notice.show = i18n.get('Does not support fullscreen');
-    };
-
-    if (player.fullscreenIsEnabled) {
-        screenfull.on('change', screenfullChange);
-        screenfull.on('error', screenfullError);
-        destroyEvents.push(() => {
-            screenfull.off('change', screenfullChange);
-            screenfull.off('error', screenfullError);
-        });
-    }
+    const { $player } = art.template;
 
     def(player, 'fullscreen', {
         get() {
             return screenfull.isFullscreen;
         },
         set(value) {
-            if (!player.fullscreenIsEnabled) {
-                screenfullError();
-                return;
+            if (player.fullscreenWeb) {
+                player.fullscreenWeb = false;
             }
 
             if (value) {
-                if (player.fullscreenWeb) {
-                    player.fullscreenWeb = false;
-                }
-
                 screenfull.request($player).then(() => {
                     addClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
-                    art.emit('fullscreenEnabled');
+                    art.emit('fullscreenChange', true);
                 });
             } else {
-                if (player.fullscreenWeb) {
-                    player.fullscreenWeb = false;
-                }
-
                 screenfull.exit().then(() => {
                     removeClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
-                    art.emit('fullscreenExit');
+                    art.emit('fullscreenChange', false);
                 });
             }
         },
@@ -67,10 +36,4 @@ export default function fullscreenMix(art, player) {
             }
         },
     });
-
-    def(player, 'fullscreenIsEnabled', {
-        get() {
-            return screenfull.isEnabled;
-        },
-    });
 }

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,29 +1,25 @@
 import { addClass, removeClass, hasClass, def } from '../utils';
 
 export default function fullscreenWebMix(art, player) {
-    const {
-        template: { $player },
-    } = art;
+    const { $player } = art.template;
 
     def(player, 'fullscreenWeb', {
         get() {
             return hasClass($player, 'art-web-fullscreen');
         },
         set(value) {
+            if (player.fullscreen) {
+                player.fullscreen = false;
+            }
+
             if (value) {
-                if (player.fullscreen) {
-                    player.fullscreen = false;
-                }
                 addClass($player, 'art-web-fullscreen');
                 player.aspectRatioReset = true;
-                art.emit('fullscreenWebEnabled');
+                art.emit('fullscreenWebChange', true);
             } else {
-                if (player.fullscreen) {
-                    player.fullscreen = false;
-                }
                 removeClass($player, 'art-web-fullscreen');
                 player.aspectRatioReset = true;
-                art.emit('fullscreenWebExit');
+                art.emit('fullscreenWebChange', false);
             }
         },
     });

packages/artplayer/src/player/index.js

@@ -1,4 +1,4 @@
-import attachUrlMix from './attachUrlMix';
+import urlMix from './urlMix';
 import attrInit from './attrInit';
 import eventInit from './eventInit';
 import playMix from './playMix';
@@ -25,7 +25,7 @@ import { proxyPropertys } from '../utils';
 
 export default class Player {
     constructor(art) {
-        attachUrlMix(art, this);
+        urlMix(art, this);
         eventInit(art, this);
         attrInit(art, this);
         playMix(art, this);

packages/artplayer/src/player/pipMix.js

@@ -29,17 +29,11 @@ function nativePip(art, player) {
     });
 
     proxy($video, 'enterpictureinpicture', () => {
-        art.emit('pipEnabled');
+        art.emit('pipChange', true);
     });
 
     proxy($video, 'leavepictureinpicture', () => {
-        art.emit('pipExit');
-    });
-
-    art.on('destroy', () => {
-        if (player.pip) {
-            player.pip = false;
-        }
+        art.emit('pipChange', false);
     });
 }
 
@@ -55,10 +49,10 @@ function webkitPip(art, player) {
         set(value) {
             if (value) {
                 $video.webkitSetPresentationMode('picture-in-picture');
-                art.emit('pipEnabled');
+                art.emit('pipChange', true);
             } else {
                 $video.webkitSetPresentationMode('inline');
-                art.emit('pipExit');
+                art.emit('pipChange', false);
             }
         },
     });
@@ -108,7 +102,7 @@ function customPip(art, player) {
 
     append($pipTitle, option.title || i18n.get('Mini player'));
 
-    const property = {
+    def(player, 'pip', {
         get() {
             return hasClass($player, 'art-pip');
         },
@@ -124,8 +118,8 @@ function customPip(art, player) {
                 player.fullscreenWeb = false;
                 player.aspectRatio = false;
                 player.playbackRate = false;
-                art.emit('pipEnabled');
-            } else if (player.pip) {
+                art.emit('pipChange', true);
+            } else {
                 $player.style.cssText = cacheStyle;
                 removeClass($player, 'art-pip');
                 setStyle($player, 'top', null);
@@ -135,12 +129,10 @@ function customPip(art, player) {
                 player.aspectRatio = false;
                 player.playbackRate = false;
                 player.autoSize = true;
-                art.emit('pipExit');
+                art.emit('pipChange', false);
             }
         },
-    };
-
-    def(player, 'pip', property);
+    });
 }
 
 export default function pipMix(art, player) {

packages/artplayer/src/player/switchMix.js

@@ -1,26 +1,24 @@
 import { def } from '../utils';
 
 export default function switchMix(art, player) {
-    const { i18n, notice, option } = art;
+    const { i18n, notice } = art;
 
     function switchUrl(url, name, currentTime) {
-        if (url === player.url) return Promise.resolve(url);
+        if (url === player.url) return;
         URL.revokeObjectURL(player.url);
-        return player.attachUrl(url).then(() => {
-            option.url = url;
-            player.playbackRate = false;
-            player.aspectRatio = false;
-            art.once('video:canplay', () => {
-                player.currentTime = currentTime;
-            });
-            if (player.playing) {
-                player.play = true;
-            }
-            if (name) {
-                notice.show = `${i18n.get('Switch video')}: ${name}`;
-            }
-            art.emit('switch', url);
+        player.url = url;
+        player.playbackRate = false;
+        player.aspectRatio = false;
+        art.once('video:canplay', () => {
+            player.currentTime = currentTime;
         });
+        if (player.playing) {
+            player.play = true;
+        }
+        if (name) {
+            notice.show = `${i18n.get('Switch video')}: ${name}`;
+        }
+        art.emit('switch', url);
     }
 
     def(player, 'switchQuality', {

packages/artplayer/src/player/urlMix.js

@@ -0,0 +1,27 @@
+import { getExt, def } from '../utils';
+
+export default function urlMix(art, player) {
+    const {
+        option: { type, customType },
+        template: { $video },
+    } = art;
+
+    def(player, 'url', {
+        get() {
+            return $video.src;
+        },
+        set(url) {
+            const typeName = type || getExt(url);
+            const typeCallback = customType[typeName];
+            if (typeName && typeCallback) {
+                art.loading.show = true;
+                typeCallback.call(art, $video, url, art);
+                art.emit('customType', typeName);
+            } else {
+                $video.src = url;
+                art.option.url = url;
+                art.emit('urlChange', url);
+            }
+        },
+    });
+}

packages/artplayer/src/plugins/autoPip.js

@@ -1,22 +0,0 @@
-import { debounce } from '../utils';
-
-export default function autoPip(art) {
-    const { events, player, template } = art;
-
-    const scrollDebounce = debounce(() => {
-        const { top, height } = template.$player.getBoundingClientRect();
-        if (top + height <= 0 && !player.pip) {
-            player.pip = true;
-            art.emit('autoPip', true);
-        } else if (player.pip) {
-            player.pip = false;
-            art.emit('autoPip', false);
-        }
-    }, 300);
-    
-    events.proxy(window, 'scroll', scrollDebounce);
-
-    return {
-        name: 'autoPip',
-    };
-}

packages/artplayer/src/plugins/index.js

@@ -4,7 +4,6 @@ import localVideo from './localVideo';
 import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
-import autoPip from './autoPip';
 
 export default class Plugins {
     constructor(art) {
@@ -33,10 +32,6 @@ export default class Plugins {
             this.add(networkMonitor);
         }
 
-        if (option.autoPip) {
-            this.add(autoPip);
-        }
-
         art.option.plugins.forEach(plugin => {
             this.add(plugin);
         });

packages/artplayer/src/plugins/subtitleOffset.js

@@ -3,6 +3,7 @@ import { query } from '../utils';
 function settingMix(art) {
     const {
         i18n,
+        plugins,
         subtitle,
         events: { proxy },
     } = art;
@@ -25,7 +26,7 @@ function settingMix(art) {
             proxy($range, 'change', () => {
                 const { value } = $range;
                 $value.innerText = value;
-                art.plugins.subtitleOffset.offset(Number(value));
+                plugins.subtitleOffset.offset(Number(value));
             });
 
             art.on('subtitle:switch', () => {

packages/artplayer/src/scheme/index.js

@@ -9,7 +9,7 @@ function validElement(value, type, paths) {
 
 export default {
     container: validElement,
-    url: 'string|function',
+    url: 'string',
     poster: 'string',
     title: 'string',
     theme: 'string',

packages/artplayer/src/storage.js

@@ -1,11 +1,6 @@
 export default class Storage {
-    constructor(art) {
+    constructor() {
         this.name = 'artplayer_settings';
-
-        const volume = this.get('volume');
-        if (volume) {
-            art.option.volume = volume;
-        }
     }
 
     get(key) {

packages/artplayer/src/template.js

@@ -136,8 +136,8 @@ export default class Template {
         this.$video = this.query('.art-video');
     }
 
-    destroy(removeHtml) {
-        if (removeHtml) {
+    destroy(remove) {
+        if (remove) {
             this.$container.innerHTML = '';
         } else {
             addClass(this.$player, 'art-destroy');

packages/artplayer/src/utils/component.js

@@ -23,8 +23,10 @@ export default class Component {
         this.art.emit(`${this.name}:toggle`, value);
     }
 
-    toggle() {
-        this.show = !this.show;
+    set toggle(value) {
+        if (value) {
+            this.show = !this.show;
+        }
     }
 
     add(getOption, callback) {

packages/artplayer/src/whitelist.js

@@ -9,8 +9,7 @@ export default class Whitelist {
         this.state =
             !this.isMobile ||
             whitelist.some(item => {
-                const type = kindOf(item);
-                switch (type) {
+                switch (kindOf(item)) {
                     case 'string':
                         return this.ua.indexOf(item) > -1;
                     case 'function':