简化事件

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function aspectRatio(option) {
-    return art => {
+    return (art) => {
         const { i18n, player } = art;
         return {
             ...option,
@@ -17,9 +17,9 @@ export default function aspectRatio(option) {
                     contextmenu.show = false;
                 }
             },
-            mounted: $menu => {
-                art.on('aspectRatioChange', ratio => {
-                    const $current = queryAll('span', $menu).find(item => item.dataset.ratio === ratio);
+            mounted: ($menu) => {
+                art.on('aspectRatio', (ratio) => {
+                    const $current = queryAll('span', $menu).find((item) => item.dataset.ratio === ratio);
                     if ($current) {
                         inverseClass($current, 'art-current');
                     }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,7 +1,7 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function playbackRate(option) {
-    return art => {
+    return (art) => {
         const { i18n, player } = art;
         return {
             ...option,
@@ -20,9 +20,9 @@ export default function playbackRate(option) {
                     contextmenu.show = false;
                 }
             },
-            mounted: $menu => {
-                art.on('playbackRateChange', rate => {
-                    const $current = queryAll('span', $menu).find(item => Number(item.dataset.rate) === rate);
+            mounted: ($menu) => {
+                art.on('playbackRate', (rate) => {
+                    const $current = queryAll('span', $menu).find((item) => Number(item.dataset.rate) === rate);
                     if ($current) {
                         inverseClass($current, 'art-current');
                     }

packages/artplayer/src/control/fullscreen.js

@@ -18,7 +18,7 @@ export default function fullscreen(option) {
                 player.fullscreenToggle = true;
             });
 
-            art.on('fullscreenChange', value => {
+            art.on('fullscreen', value => {
                 tooltip($control, i18n.get(value ? 'Exit fullscreen' : 'Fullscreen'));
             });
         },

packages/artplayer/src/control/fullscreenWeb.js

@@ -18,7 +18,7 @@ export default function fullscreenWeb(option) {
                 player.fullscreenWebToggle = true;
             });
 
-            art.on('fullscreenWebChange', value => {
+            art.on('fullscreenWeb', value => {
                 tooltip($control, i18n.get(value ? 'Exit web fullscreen' : 'Web fullscreen'));
             });
         },

packages/artplayer/src/control/loop.js

@@ -9,14 +9,14 @@ export default function loop(option) {
             const $left = append($control, `<span class="art-loop-point"></span>`);
             const $right = append($control, `<span class="art-loop-point"></span>`);
 
-            art.on('loopAdd', (value) => {
-                setStyle($control, 'display', 'block');
-                setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
-                setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
-            });
-
-            art.on('loopRemove', () => {
-                setStyle($control, 'display', 'none');
+            art.on('loop', (value) => {
+                if (value) {
+                    setStyle($control, 'display', 'block');
+                    setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
+                    setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
+                } else {
+                    setStyle($control, 'display', 'none');
+                }
             });
         },
     });

packages/artplayer/src/control/pip.js

@@ -18,7 +18,7 @@ export default function pip(option) {
                 player.pipToggle = true;
             });
 
-            art.on('pipChange', (value) => {
+            art.on('pip', (value) => {
                 tooltip($control, i18n.get(value ? 'Exit PIP mode' : 'PIP mode'));
             });
         },

packages/artplayer/src/control/setting.js

@@ -18,7 +18,7 @@ export default function setting(option) {
                 setting.toggle = true;
             });
 
-            art.on('settingToggle', value => {
+            art.on('setting', value => {
                 tooltip($control, i18n.get(value ? 'Hide setting' : 'Show setting'));
             });
         },

packages/artplayer/src/control/subtitle.js

@@ -18,7 +18,7 @@ export default function subtitle(option) {
                 subtitle.toggle = true;
             });
 
-            art.on('subtitleToggle', value => {
+            art.on('subtitle', value => {
                 tooltip($control, i18n.get(value ? 'Hide subtitle' : 'Show subtitle'));
             });
         },

packages/artplayer/src/events/hoverInit.js

@@ -10,15 +10,17 @@ export default function hoverInit(art, events) {
         $player,
         () => {
             addClass($player, 'art-hover');
-            art.emit('hoverenter');
+            art.emit('hover', true);
         },
         () => {
             removeClass($player, 'art-hover');
-            art.emit('hoverleave');
+            art.emit('hover');
         },
     );
 
-    art.on('hoverleave', () => {
-        controls.delayHide();
+    art.on('hover', (value) => {
+        if (!value) {
+            controls.delayHide();
+        }
     });
 }

packages/artplayer/src/info.js

@@ -33,7 +33,7 @@ export default class Info extends Component {
             }, 1000);
         }
 
-        art.on('infoToggle', value => {
+        art.on('info', value => {
             clearTimeout(timer);
             if (value) {
                 loop();

packages/artplayer/src/mobile.js

@@ -44,7 +44,7 @@ export default class Mobile {
             art.emit('customType', typeName);
         } else {
             $video.src = option.url;
-            art.emit('urlChange', $video.src);
+            art.emit('url', $video.src);
         }
     }
 }

packages/artplayer/src/player/aspectRatioMix.js

@@ -42,13 +42,13 @@ export default function aspectRatioMix(art, player) {
 
                 $player.dataset.aspectRatio = ratio;
                 notice.show = `${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`;
-                art.emit('aspectRatioChange', ratio);
+                art.emit('aspectRatio', ratio);
             } else if (player.aspectRatio) {
                 setStyle($video, 'width', null);
                 setStyle($video, 'height', null);
                 setStyle($video, 'padding', null);
                 delete $player.dataset.aspectRatio;
-                art.emit('aspectRatioRemove');
+                art.emit('aspectRatio');
             }
         },
     });
@@ -58,7 +58,6 @@ export default function aspectRatioMix(art, player) {
             if (value && player.aspectRatio) {
                 const { aspectRatio } = player;
                 player.aspectRatio = aspectRatio;
-                art.emit('aspectRatioReset');
             }
         },
     });

packages/artplayer/src/player/autoSizeMix.js

@@ -23,7 +23,7 @@ export default function resizeMix(art, player) {
                     setStyle($player, 'width', '100%');
                     setStyle($player, 'height', `${percentage}%`);
                 }
-                art.emit('autoSizeChange', {
+                art.emit('autoSize', {
                     width: player.width,
                     height: player.height,
                 });
@@ -31,7 +31,7 @@ export default function resizeMix(art, player) {
                 removeClass($container, 'art-auto-size');
                 setStyle($player, 'width', null);
                 setStyle($player, 'height', null);
-                art.emit('autoSizeRemove');
+                art.emit('autoSize');
             }
         },
     });

packages/artplayer/src/player/exclusiveInit.js

@@ -4,8 +4,7 @@ export default function exclusiveInit(art, player) {
     const props = ['min', 'pip', 'fullscreen', 'fullscreenWeb', 'fullscreenRotate'];
 
     props.forEach((name) => {
-        const event = `${name}Change`;
-        art.on(event, (state) => {
+        art.on(name, (state) => {
             if (state) {
                 props
                     .filter((item) => item !== name)

packages/artplayer/src/player/flipMix.js

@@ -11,10 +11,10 @@ export default function flipMix(art, player) {
                 const flipList = ['normal', 'horizontal', 'vertical'];
                 errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
                 $player.dataset.flip = flip;
-                art.emit('flipChange', flip);
+                art.emit('flip', flip);
             } else {
                 delete $player.dataset.flip;
-                art.emit('flipRemove');
+                art.emit('flip');
             }
         },
     });

packages/artplayer/src/player/fullscreenMix.js

@@ -14,7 +14,7 @@ export default function fullscreenMix(art, player) {
                     addClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
                     art.emit('resize');
-                    art.emit('fullscreenChange', true);
+                    art.emit('fullscreen', true);
                 });
             } else {
                 screenfull.exit().then(() => {
@@ -22,7 +22,7 @@ export default function fullscreenMix(art, player) {
                     player.aspectRatioReset = true;
                     player.autoSize = art.option.autoSize;
                     art.emit('resize');
-                    art.emit('fullscreenChange', false);
+                    art.emit('fullscreen');
                 });
             }
         },

packages/artplayer/src/player/fullscreenRotateMix.js

@@ -20,14 +20,14 @@ export default function fullscreenRotateMix(art, player) {
                     const scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
                     setStyle($player, 'transform', `rotate(90deg) scale(${scale},${scale})`);
                     art.emit('resize');
-                    art.emit('fullscreenRotateChange', true);
+                    art.emit('fullscreenRotate', true);
                 }
             } else {
                 removeClass($container, 'art-fullscreen-rotate');
                 player.autoSize = art.option.autoSize;
                 setStyle($player, 'transform', null);
                 art.emit('resize');
-                art.emit('fullscreenRotateChange', false);
+                art.emit('fullscreenRotate');
             }
         },
     });

packages/artplayer/src/player/fullscreenWebMix.js

@@ -12,13 +12,13 @@ export default function fullscreenWebMix(art, player) {
                 addClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 art.emit('resize');
-                art.emit('fullscreenWebChange', true);
+                art.emit('fullscreenWeb', true);
             } else {
                 removeClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 player.autoSize = art.option.autoSize;
                 art.emit('resize');
-                art.emit('fullscreenWebChange', false);
+                art.emit('fullscreenWeb');
             }
         },
     });

packages/artplayer/src/player/loopMin.js

@@ -10,14 +10,14 @@ export default function loopMin(art, player) {
                 const end = clamp(value[1], start, player.duration);
                 if (end - start >= 1) {
                     interval = [start, end];
-                    art.emit('loopAdd', interval);
+                    art.emit('loop', interval);
                 } else {
                     interval = [];
-                    art.emit('loopRemove');
+                    art.emit('loop');
                 }
             } else {
                 interval = [];
-                art.emit('loopRemove');
+                art.emit('loop');
             }
         },
     });
@@ -26,7 +26,6 @@ export default function loopMin(art, player) {
         if (interval.length) {
             if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
                 player.seek = interval[0];
-                art.emit('loopStart', interval);
             }
         }
     });

packages/artplayer/src/player/minMix.js

@@ -79,7 +79,7 @@ export default function minMix(art, player) {
                 }
                 player.aspectRatio = false;
                 player.playbackRate = false;
-                art.emit('minChange', true);
+                art.emit('min', true);
             } else {
                 $player.style.cssText = cacheStyle;
                 removeClass($player, 'art-min');
@@ -88,7 +88,7 @@ export default function minMix(art, player) {
                 player.aspectRatio = false;
                 player.playbackRate = false;
                 player.autoSize = option.autoSize;
-                art.emit('minChange', false);
+                art.emit('min');
             }
         },
     });

packages/artplayer/src/player/pipMix.js

@@ -29,11 +29,11 @@ function nativePip(art, player) {
     });
 
     proxy($video, 'enterpictureinpicture', () => {
-        art.emit('pipChange', true);
+        art.emit('pip', true);
     });
 
     proxy($video, 'leavepictureinpicture', () => {
-        art.emit('pipChange', false);
+        art.emit('pip');
     });
 }
 
@@ -49,10 +49,10 @@ function webkitPip(art, player) {
         set(value) {
             if (value) {
                 $video.webkitSetPresentationMode('picture-in-picture');
-                art.emit('pipChange', true);
+                art.emit('pip', true);
             } else {
                 $video.webkitSetPresentationMode('inline');
-                art.emit('pipChange', false);
+                art.emit('pip');
             }
         },
     });

packages/artplayer/src/player/playbackRateMix.js

@@ -19,11 +19,11 @@ export default function playbackRateMix(art, player) {
                 $video.playbackRate = rate;
                 $player.dataset.playbackRate = rate;
                 notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
-                art.emit('playbackRateChange', rate);
+                art.emit('playbackRate', rate);
             } else if (player.playbackRate) {
                 player.playbackRate = 1;
                 delete $player.dataset.playbackRate;
-                art.emit('playbackRateRemove');
+                art.emit('playbackRate');
             }
         },
     });
@@ -34,7 +34,6 @@ export default function playbackRateMix(art, player) {
                 const { playbackRate } = $player.dataset;
                 if (playbackRate) {
                     player.playbackRate = Number(playbackRate);
-                    art.emit('playbackRateReset');
                 }
             }
         },

packages/artplayer/src/player/screenshotMix.js

@@ -1,4 +1,4 @@
-import { secondToTime, downloadFile, def } from '../utils';
+import { secondToTime, download, def } from '../utils';
 
 export default function screenshotMix(art, player) {
     const {
@@ -7,30 +7,31 @@ export default function screenshotMix(art, player) {
         template: { $video },
     } = art;
 
-    def(player, 'getScreenshotDataURL', {
-        value: () => {
-            try {
-                const canvas = document.createElement('canvas');
-                canvas.width = $video.videoWidth;
-                canvas.height = $video.videoHeight;
-                canvas.getContext('2d').drawImage($video, 0, 0);
-                return canvas.toDataURL('image/png');
-            } catch (err) {
-                notice.show = err;
-                throw err;
-            }
-        },
-    });
+    const $canvas = document.createElement('canvas');
 
-    def(player, 'getScreenshotBlobUrl', {
+    def(player, 'getDataURL', {
         value: () =>
             new Promise((resolve, reject) => {
                 try {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = $video.videoWidth;
-                    canvas.height = $video.videoHeight;
-                    canvas.getContext('2d').drawImage($video, 0, 0);
-                    canvas.toBlob(blob => {
+                    $canvas.width = $video.videoWidth;
+                    $canvas.height = $video.videoHeight;
+                    $canvas.getContext('2d').drawImage($video, 0, 0);
+                    resolve($canvas.toDataURL('image/png'));
+                } catch (err) {
+                    notice.show = err;
+                    reject(err);
+                }
+            }),
+    });
+
+    def(player, 'getBlobUrl', {
+        value: () =>
+            new Promise((resolve, reject) => {
+                try {
+                    $canvas.width = $video.videoWidth;
+                    $canvas.height = $video.videoHeight;
+                    $canvas.getContext('2d').drawImage($video, 0, 0);
+                    $canvas.toBlob((blob) => {
                         resolve(URL.createObjectURL(blob));
                     });
                 } catch (err) {
@@ -42,11 +43,10 @@ export default function screenshotMix(art, player) {
 
     def(player, 'screenshot', {
         value: () => {
-            const dataUri = player.getScreenshotDataURL();
-            if (dataUri) {
-                downloadFile(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
+            player.getDataURL().then((dataUri) => {
+                download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
                 art.emit('screenshot', dataUri);
-            }
+            });
         },
     });
 }

packages/artplayer/src/player/urlMix.js

@@ -17,12 +17,11 @@ export default function urlMix(art, player) {
                 sleep().then(() => {
                     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);
+                art.emit('url', url);
             }
         },
     });

packages/artplayer/src/plugins/index.js

@@ -45,7 +45,7 @@ export default class Plugins {
         def(this, pluginName, {
             value: result,
         });
-        this.art.emit('pluginAdd', plugin);
+        this.art.emit('plugin', plugin);
         return this;
     }
 }

packages/artplayer/src/plugins/miniProgressBar.js

@@ -17,7 +17,7 @@ export default function miniProgressBar(art) {
             background: theme,
         },
         mounted($progressBar) {
-            art.on('controlToggle', value => {
+            art.on('control', value => {
                 $progressBar.style.display = value ? 'none' : 'block';
             });
 

packages/artplayer/src/setting/aspectRatio.js

@@ -26,7 +26,7 @@ export default function aspectRatio(option) {
                 }
             },
             mounted: $setting => {
-                art.on('aspectRatioChange', ratio => {
+                art.on('aspectRatio', ratio => {
                     const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio);
                     if ($current) {
                         inverseClass($current.parentElement, 'current');

packages/artplayer/src/setting/flip.js

@@ -26,7 +26,7 @@ export default function flip(option) {
                 }
             },
             mounted: $setting => {
-                art.on('flipChange', flip => {
+                art.on('flip', flip => {
                     const $current = queryAll('button', $setting).find(item => item.dataset.value === flip);
                     if ($current) {
                         inverseClass($current.parentElement, 'current');

packages/artplayer/src/setting/playbackRate.js

@@ -26,8 +26,8 @@ export default function playbackRate(option) {
                     player.playbackRate = Number(value);
                 });
 
-                art.on('playbackRateChange', rate => {
-                    if ($range.value !== rate) {
+                art.on('playbackRate', rate => {
+                    if (rate && $range.value !== rate) {
                         $range.value = rate;
                         $value.innerText = rate;
                     }

packages/artplayer/src/subtitle.js

@@ -94,7 +94,6 @@ export default class Subtitle extends Component {
             })
             .catch((err) => {
                 notice.show = err;
-                this.art.emit('subtitleErr', err);
                 throw err;
             });
     }

packages/artplayer/src/utils/component.js

@@ -21,7 +21,7 @@ export default class Component {
         } else {
             removeClass($player, className);
         }
-        this.art.emit(`${this.name}Toggle`, value);
+        this.art.emit(this.name, value);
     }
 
     set toggle(value) {
@@ -53,7 +53,7 @@ export default class Component {
 
         const childs = Array.from(this.$parent.children);
         $ref.dataset.index = option.index || this.id;
-        const nextChild = childs.find(item => Number(item.dataset.index) >= Number($ref.dataset.index));
+        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number($ref.dataset.index));
         if (nextChild) {
             nextChild.insertAdjacentElement('beforebegin', $ref);
         } else {
@@ -61,7 +61,7 @@ export default class Component {
         }
 
         if (option.click) {
-            this.art.events.proxy($ref, 'click', event => {
+            this.art.events.proxy($ref, 'click', (event) => {
                 event.preventDefault();
                 option.click.call(this.art, this, event);
             });
@@ -75,8 +75,6 @@ export default class Component {
             callback($ref, this, this.art);
         }
 
-        this.art.emit(`${this.name}Add`, option);
-
         def(this, name, {
             get: () => option,
         });

packages/artplayer/src/utils/file.js

@@ -7,14 +7,10 @@ export function getExt(url) {
         return getExt(url.split('#')[0]);
     }
 
-    return url
-        .trim()
-        .toLowerCase()
-        .split('.')
-        .pop();
+    return url.trim().toLowerCase().split('.').pop();
 }
 
-export function downloadFile(url, name) {
+export function download(url, name) {
     const elink = document.createElement('a');
     elink.style.display = 'none';
     elink.href = url;