变更事件名称

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -21,7 +21,7 @@ export default function aspectRatio(art) {
       }
     },
     callback: $menu => {
-      art.on('aspectRatio', ratio => {
+      art.on('aspectRatioChange', ratio => {
         const $current = Array.from($menu.querySelectorAll('span')).find(
           item => item.dataset.ratio === ratio.join(':')
         );

packages/artplayer/src/contextmenu/playbackRate.js

@@ -24,7 +24,7 @@ export default function playbackRate(art) {
       }
     },
     callback: $menu => {
-      art.on('playbackRate', rate => {
+      art.on('playbackRateChange', rate => {
         const $current = Array.from($menu.querySelectorAll('span')).find(
           item => Number(item.dataset.rate) === rate
         );

packages/artplayer/src/controls/progress.js

@@ -32,8 +32,8 @@ export default class Progress {
     this.$tip = $control.querySelector('.art-progress-tip');
 
     highlight.forEach(item => {
-      const left = Number(item.time || 0) / player.duration;
-      append(this.$highlight, `<span data-text="${item.text || ''}" data-time="${item.time || 0}" style="left: ${left * 100}%"></span>`);
+      const left = clamp(item.time, 0, player.duration) / player.duration * 100;
+      append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`);
     });
 
     this.set('loaded', player.loaded);
@@ -78,7 +78,7 @@ export default class Progress {
     proxy(document, 'mousemove', event => {
       if (this.isDroging) {
         const { second, percentage } = this.getPosFromEvent(event);
-        this.$indicator.classList.add('show-indicator');
+        this.$indicator.classList.add('art-show-indicator');
         this.set('played', percentage);
         player.seek(second);
       }
@@ -87,7 +87,7 @@ export default class Progress {
     proxy(document, 'mouseup', () => {
       if (this.isDroging) {
         this.isDroging = false;
-        this.$indicator.classList.remove('show-indicator');
+        this.$indicator.classList.remove('art-show-indicator');
       }
     });
   }

packages/artplayer/src/controls/quality.js

@@ -15,9 +15,9 @@ export default class Quality {
     const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
 
     hover($control, () => {
-      $control.classList.add('hover');
+      $control.classList.add('art-quality-hover');
     }, () => {
-      $control.classList.remove('hover');
+      $control.classList.remove('art-quality-hover');
     });
 
     proxy($qualitys, 'click', event => {

packages/artplayer/src/controls/subtitle.js

@@ -16,12 +16,12 @@ export default class Subtitle {
     });
 
     art.on('subtitle:show', () => {
-      setStyle(this.$subtitle, 'opacity', '0.8');
+      setStyle(this.$subtitle, 'opacity', '1');
       tooltip(this.$subtitle, i18n.get('Hide subtitle'));
     });
 
     art.on('subtitle:hide', () => {
-      setStyle(this.$subtitle, 'opacity', '1');
+      setStyle(this.$subtitle, 'opacity', '0.8');
       tooltip(this.$subtitle, i18n.get('Show subtitle'));
     });
   }

packages/artplayer/src/controls/thumbnails.js

@@ -10,13 +10,13 @@ export default class Thumbnails {
   apply(art, $control) {
     this.art = art;
     errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
-    const { refs: { $progress }, events: { proxy } } = art;
+    const { refs: { $progress }, events: { proxy, loadImg } } = art;
     this.$control = $control;
 
     proxy($progress, 'mousemove', event => {
       if (!this.loading) {
         this.loading = true;
-        this.load(this.art.option.thumbnails.url).then(() => {
+        loadImg(this.art.option.thumbnails.url).then(() => {
           this.isLoad = true;
         });
       }
@@ -32,21 +32,6 @@ export default class Thumbnails {
     });
   }
 
-  load(url) {
-    const { proxy } = this.art.events;
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.src = url;
-
-      if (image.complete) {
-        return resolve(image);
-      }
-
-      proxy(image, 'load', () => resolve(image));
-      proxy(image, 'error', () => reject(image));
-    });
-  }
-
   showThumbnails(event) {
     const { refs: { $progress }, controls } = this.art;
     const { width: posWidth } = controls.progress.getPosFromEvent(event);

packages/artplayer/src/controls/time.js

@@ -7,7 +7,10 @@ export default class Time {
 
   apply(art, $control) {
     function getTime() {
-      $control.innerHTML = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
+      const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
+      if (newTime !== $control.innerHTML) {
+        $control.innerHTML = newTime;
+      }
     }
 
     getTime();

packages/artplayer/src/controls/volume.js

@@ -16,7 +16,7 @@ export default class Volume {
     tooltip(this.$volume, i18n.get('Mute'));
     setStyle(this.$volumeClose, 'display', 'none');
 
-    art.on('volume', percentage => {
+    art.on('volumeChange', percentage => {
       if (percentage === 0) {
         setStyle(this.$volume, 'display', 'none');
         setStyle(this.$volumeClose, 'display', 'flex');

packages/artplayer/src/events/index.js

@@ -9,6 +9,7 @@ export default class Events {
     this.destroyEvents = [];
     this.proxy = this.proxy.bind(this);
     this.hover = this.hover.bind(this);
+    this.loadImg = this.loadImg.bind(this);
     clickInit(art, this);
     hoverInit(art, this);
     mousemoveInit(art, this);
@@ -33,6 +34,28 @@ export default class Events {
     this.proxy(target, 'mouseleave', mouseleave);
   }
 
+  loadImg(img) {
+    return new Promise((resolve, reject) => {
+      let image;
+
+      if (img instanceof HTMLImageElement) {
+        image = img;
+      } else if (typeof img === 'string') {
+        image = new Image();
+        image.src = img;
+      } else {
+        return reject(img);
+      }
+
+      if (image.complete) {
+        return resolve(image);
+      }
+
+      this.proxy(image, 'load', () => resolve(image));
+      this.proxy(image, 'error', () => reject(image));
+    });
+  }
+
   destroy() {
     this.destroyEvents.forEach(event => event());
   }

packages/artplayer/src/hotkey.js

@@ -10,7 +10,6 @@ export default class Hotkey {
 
   init() {
     const { player, events: { proxy } } = this.art;
-
     proxy(window, 'keydown', event => {
       if (this.art.isFocus) {
         const tag = document.activeElement.tagName.toUpperCase();
@@ -21,6 +20,7 @@ export default class Hotkey {
           editable !== '' &&
           editable !== 'true'
         ) {
+          this.art.emit('hotkey', event);
           switch (event.keyCode) {
             case 39:
               event.preventDefault();

packages/artplayer/src/icons/index.js

@@ -13,7 +13,17 @@ import pip from './pip.svg';
 import prev from './prev.svg';
 import next from './next.svg';
 
-const icons = {
+function creatDomFromSvg(map) {
+  const result = {};
+  Object.keys(map).forEach(name => {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
+    [result[name]] = tmp.childNodes;
+  });
+  return result;
+}
+
+export default creatDomFromSvg({
   loading,
   playBig,
   play,
@@ -28,16 +38,4 @@ const icons = {
   pip,
   prev,
   next
-};
-
-function creatDomFromSvg(map) {
-  const result = {};
-  Object.keys(map).forEach(name => {
-    const tmp = document.createElement('div');
-    tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
-    [result[name]] = tmp.childNodes;
-  });
-  return result;
-}
-
-export default creatDomFromSvg(icons);
+});

packages/artplayer/src/player/aspectRatioMix.js

@@ -35,7 +35,7 @@ export default function aspectRatioMix(art, player) {
       }
 
       notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
-      art.emit('aspectRatio', ratio);
+      art.emit('aspectRatioChange', ratio);
     }
   });
 
@@ -46,6 +46,7 @@ export default function aspectRatioMix(art, player) {
         setStyle($video, 'height', null);
         setStyle($video, 'padding', null);
         delete $player.dataset.aspectRatio;
+        art.emit('aspectRatioRemove');
       }
     }
   });
@@ -55,6 +56,7 @@ export default function aspectRatioMix(art, player) {
       const { aspectRatio } = $player.dataset;
       if (aspectRatio) {
         player.aspectRatio(aspectRatio.split(':'));
+        art.emit('aspectRatioReset');
       }
     }
   });

packages/artplayer/src/player/autoSizeMix.js

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

packages/artplayer/src/player/flipMix.js

@@ -6,16 +6,18 @@ export default function flipMix(art, player) {
   });
 
   Object.defineProperty(player, 'flip', {
-    value: dir => {
-      const dirList = ['normal', 'horizontal', 'vertical'];
-      errorHandle(dirList.includes(dir), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${dir}`);
-      art.refs.$player.dataset.flip = dir;
+    value: flip => {
+      const flipList = ['normal', 'horizontal', 'vertical'];
+      errorHandle(flipList.includes(flip), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${flip}`);
+      art.refs.$player.dataset.flip = flip;
+      art.emit('flipChange', flip);
     }
   });
 
   Object.defineProperty(player, 'flipRemove', {
     value: () => {
       delete art.refs.$player.dataset.flip;
+      art.emit('flipRemove');
     }
   });
 }

packages/artplayer/src/player/pauseMin.js

@@ -5,7 +5,7 @@ export default function pauseMin(art, player) {
     value: () => {
       $video.pause();
       notice.show(i18n.get('Pause'));
-      art.emit('pause', $video);
+      art.emit('pause');
     }
   });
 }

packages/artplayer/src/player/pipMix.js

@@ -44,7 +44,7 @@ export default function pipMix(art, player) {
       player.fullscreenWebExit();
       player.aspectRatioRemove();
       player.playbackRateRemove();
-      art.emit('pip', true);
+      art.emit('pipEnabled');
     }
   });
 
@@ -59,7 +59,7 @@ export default function pipMix(art, player) {
         player.fullscreenWebExit();
         player.aspectRatioRemove();
         player.playbackRateRemove();
-        art.emit('pip', false);
+        art.emit('pipExit');
       }
     }
   });

packages/artplayer/src/player/playMix.js

@@ -18,7 +18,7 @@ export default function playMix(art, player) {
       }
 
       notice.show(i18n.get('Play'));
-      art.emit('play', $video);
+      art.emit('play');
     }
   });
 }

packages/artplayer/src/player/playbackRateMix.js

@@ -13,7 +13,7 @@ export default function playbackRateMix(art, player) {
       $video.playbackRate = newRate;
       $player.dataset.playbackRate = newRate;
       notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
-      art.emit('playbackRate', newRate);
+      art.emit('playbackRateChange', newRate);
     }
   });
 
@@ -22,6 +22,7 @@ export default function playbackRateMix(art, player) {
       if (player.$playbackRateState) {
         player.playbackRate(1);
         delete $player.dataset.playbackRate;
+        art.emit('playbackRateRemove');
       }
     }
   });
@@ -31,6 +32,7 @@ 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,10 +1,9 @@
 import { setStyle, secondToTime } from '../utils';
 
 export default function screenshotMix(art, player) {
-  const { option, notice } = art;
+  const { option, notice, refs: { $video } } = art;
 
   function captureFrame() {
-    const { $video } = art.refs;
     const canvas = document.createElement('canvas');
     canvas.width = $video.videoWidth;
     canvas.height = $video.videoHeight;
@@ -17,16 +16,21 @@ export default function screenshotMix(art, player) {
     document.body.appendChild(elink);
     elink.click();
     document.body.removeChild(elink);
+    return dataUri;
   }
 
   Object.defineProperty(player, 'screenshot', {
     value: () => {
+      const { crossOrigin } = $video;
       try {
-        captureFrame();
-        art.emit('screenshot');
+        $video.crossOrigin = 'anonymous';
+        const dataUri = captureFrame();
+        art.emit('screenshot', dataUri);
       } catch (error) {
         notice.show(error);
         console.warn(error);
+      } finally {
+        $video.crossOrigin = crossOrigin;
       }
     }
   });

packages/artplayer/src/player/volumeMix.js

@@ -12,7 +12,7 @@ export default function volumeMix(art, player) {
         if ($video.volume !== 0) {
           storage.set('volume', $video.volume);
         }
-        art.emit('volume', $video.volume);
+        art.emit('volumeChange', $video.volume);
       }
     }
   });

packages/artplayer/src/setting/flip.js

@@ -28,8 +28,14 @@ export default class Flip {
       const { flip } = target.dataset;
       if (flip) {
         player.flip(flip);
-        inverseClass(target.parentElement, 'current');
       }
     });
+
+    art.on('flipChange', flip => {
+      const $current = Array.from(this.$btns.querySelectorAll('span')).find(
+        item => item.dataset.flip === flip
+      );
+      inverseClass($current.parentElement, 'current');
+    });
   }
 }

packages/artplayer/src/setting/index.js

@@ -30,10 +30,10 @@ export default class Setting {
   }
 
   add(setting, callback) {
-    const { refs, i18n } = this.art;
     const { option } = setting;
     if (option && !option.disable) {
       id++;
+      const { refs, i18n } = this.art;
       const name = option.name || `setting${id}`;
       const title = option.title || name;
       const $setting = document.createElement('div');
@@ -41,9 +41,10 @@ export default class Setting {
       append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
       append($setting, '<div class="art-setting-body"></div>');
       setting.apply && setting.apply(this.art, $setting);
-      callback && callback($setting);
-      this[name] = $setting;
       insertByIndex(refs.$settingBody, $setting, option.index || id);
+      this[name] = $setting;
+      callback && callback($setting);
+      this.art.emit('setting:add', $setting);
     }
   }
 

packages/artplayer/src/style/bottom.scss

@@ -80,7 +80,7 @@
                         height: 13px;
                         border-radius: 50%;
     
-                        &.show-indicator {
+                        &.art-show-indicator {
                             display: block;
                         }
                     }
@@ -225,7 +225,7 @@
                         }
                     }
                 }
-                &.hover .art-qualitys{
+                &.art-quality-hover .art-qualitys{
                     display: block;
                 }
             }