变更事件名称

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');