调整传参方式

src/controls/danmu.js

@@ -6,8 +6,7 @@ export default class Danmu {
     this.option = option;
   }
 
-  apply(art) {
-    const { $control } = this.option;
+  apply(art, $control) {
     const { events: { proxy }, i18n, danmu } = art;
     this.$danmu = append($control, icons.danmu);
     tooltip(this.$danmu, i18n.get('Hide danmu'));

src/controls/fullscreen-web.js

@@ -3,7 +3,7 @@ export default class FullscreenWeb {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
   }
 }

src/controls/fullscreen.js

@@ -3,7 +3,7 @@ export default class Fullscreen {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
   }
 }

src/controls/index.js

@@ -129,10 +129,9 @@ export default class Controls {
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
       $control.dataset.controlIndex = option.index || id;
-      option.$control = $control;
       this.commonMethod(control);
       (this.$map[option.position] || (this.$map[option.position] = [])).push($control);
-      control.apply && control.apply(this.art);
+      control.apply && control.apply(this.art, $control);
       this[name] = control;
     }
   }

src/controls/pip.js

@@ -3,7 +3,7 @@ export default class Pip {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
   }
 }

src/controls/playAndPause.js

@@ -6,10 +6,10 @@ export default class PlayAndPause {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     const { events: { proxy }, player, i18n } = art;
-    this.$play = append(this.option.$control, icons.play);
-    this.$pause = append(this.option.$control, icons.pause);
+    this.$play = append($control, icons.play);
+    this.$pause = append($control, icons.pause);
     tooltip(this.$play, i18n.get('Play'));
     tooltip(this.$pause, i18n.get('Pause'));
     setStyle(this.$pause, 'display', 'none');

src/controls/progress.js

@@ -9,16 +9,13 @@ export default class Progress {
     this.set = this.set.bind(this);
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = this.art;
+    this.$control = $control;
+    const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = art;
 
     append(
-      this.option.$control,
+      $control,
       `
         <div class="art-control-progress-inner">
           <div class="art-progress-loaded"></div>
@@ -30,11 +27,11 @@ export default class Progress {
       `
     );
 
-    this.$loaded = this.option.$control.querySelector('.art-progress-loaded');
-    this.$played = this.option.$control.querySelector('.art-progress-played');
-    this.$highlight = this.option.$control.querySelector('.art-progress-highlight');
-    this.$indicator = this.option.$control.querySelector('.art-progress-indicator');
-    this.$tip = this.option.$control.querySelector('.art-progress-tip');
+    this.$loaded = $control.querySelector('.art-progress-loaded');
+    this.$played = $control.querySelector('.art-progress-played');
+    this.$highlight = $control.querySelector('.art-progress-highlight');
+    this.$indicator = $control.querySelector('.art-progress-indicator');
+    this.$tip = $control.querySelector('.art-progress-tip');
 
     this.set('loaded', this.getLoaded());
     highlight.forEach(item => {
@@ -57,7 +54,7 @@ export default class Progress {
       this.set('played', 1);
     });
 
-    proxy(this.option.$control, 'mousemove', event => {
+    proxy($control, 'mousemove', event => {
       setStyle(this.$tip, 'display', 'block');
       if (event.path.indexOf(this.$highlight) > -1) {
         this.showHighlight(event);
@@ -66,11 +63,11 @@ export default class Progress {
       }
     });
 
-    proxy(this.option.$control, 'mouseout', () => {
+    proxy($control, 'mouseout', () => {
       setStyle(this.$tip, 'display', 'none');
     });
 
-    proxy(this.option.$control, 'click', event => {
+    proxy($control, 'click', event => {
       if (event.target !== this.$indicator) {
         const { second, percentage } = this.getPosFromEvent(event);
         this.set('played', percentage);
@@ -104,7 +101,7 @@ export default class Progress {
     const { text, time } = event.target.dataset;
     this.$tip.innerHTML = text;
     const left =
-      Number(time) / $video.duration * this.option.$control.clientWidth +
+      Number(time) / $video.duration * this.$control.clientWidth +
       event.target.clientWidth / 2 -
       this.$tip.clientWidth / 2;
     setStyle(this.$tip, 'left', `${left}px`);
@@ -116,8 +113,8 @@ export default class Progress {
     this.$tip.innerHTML = time;
     if (width <= tipWidth / 2) {
       setStyle(this.$tip, 'left', 0);
-    } else if (width > this.option.$control.clientWidth - tipWidth / 2) {
-      setStyle(this.$tip, 'left', `${this.option.$control.clientWidth - tipWidth}px`);
+    } else if (width > this.$control.clientWidth - tipWidth / 2) {
+      setStyle(this.$tip, 'left', `${this.$control.clientWidth - tipWidth}px`);
     } else {
       setStyle(this.$tip, 'left', `${width - tipWidth / 2}px`);
     }

src/controls/quality.js

@@ -6,8 +6,7 @@ export default class Quality {
     this.playIndex = -1;
   }
 
-  apply(art) {
-    const { $control } = this.option;
+  apply(art, $control) {
     const { option, events: { proxy, hover }, player } = art;
     const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
     this.playIndex = option.quality.indexOf(defaultQuality);

src/controls/screenshot.js

@@ -6,10 +6,10 @@ export default class Screenshot {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
     const { events: { proxy }, i18n, notice } = this.art;
-    this.$screenshot = append(this.option.$control, icons.screenshot);
+    this.$screenshot = append($control, icons.screenshot);
     tooltip(this.$screenshot, i18n.get('Screenshot'));
     proxy(this.$screenshot, 'click', () => {
       try {

src/controls/setting.js

@@ -6,8 +6,7 @@ export default class Setting {
     this.option = option;
   }
 
-  apply(art) {
-    const { $control } = this.option;
+  apply(art, $control) {
     const { events: { proxy }, i18n, setting } = art;
     this.$setting = append($control, icons.setting);
     tooltip(this.$setting, i18n.get('Show setting'));

src/controls/subtitle.js

@@ -6,8 +6,7 @@ export default class Subtitle {
     this.option = option;
   }
 
-  apply(art) {
-    const { $control } = this.option;
+  apply(art, $control) {
     const { events: { proxy }, i18n, subtitle } = art;
     this.$subtitle = append($control, icons.subtitle);
     tooltip(this.$subtitle, i18n.get('Hide subtitle'));

src/controls/thumbnails.js

@@ -7,14 +7,11 @@ export default class Thumbnails {
     this.isLoad = false;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
-    errorHandle(this.art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
-    this.init();
-  }
-
-  init() {
-    const { refs: { $progress }, events: { proxy } } = this.art;
+    errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
+    const { refs: { $progress }, events: { proxy } } = art;
+    this.$control = $control;
 
     proxy($progress, 'mousemove', event => {
       if (!this.loading) {
@@ -25,13 +22,13 @@ export default class Thumbnails {
       }
 
       if (this.isLoad) {
-        setStyle(this.option.$control, 'display', 'block');
+        setStyle($control, 'display', 'block');
         this.showThumbnails(event);
       }
     });
 
     proxy($progress, 'mouseout', () => {
-      setStyle(this.option.$control, 'display', 'none');
+      setStyle($control, 'display', 'none');
     });
   }
 
@@ -60,17 +57,17 @@ export default class Thumbnails {
     let yIndex = Math.ceil(perIndex / column);
     let xIndex = perIndex % column || column;
 
-    setStyle(this.option.$control, 'backgroundImage', `url(${url})`);
-    setStyle(this.option.$control, 'height', `${height}px`);
-    setStyle(this.option.$control, 'width', `${width}px`);
-    setStyle(this.option.$control, 'backgroundPosition', `-${--xIndex * width}px -${--yIndex * height}px`);
+    setStyle(this.$control, 'backgroundImage', `url(${url})`);
+    setStyle(this.$control, 'height', `${height}px`);
+    setStyle(this.$control, 'width', `${width}px`);
+    setStyle(this.$control, 'backgroundPosition', `-${--xIndex * width}px -${--yIndex * height}px`);
 
     if (posWidth <= width / 2) {
-      setStyle(this.option.$control, 'left', 0);
+      setStyle(this.$control, 'left', 0);
     } else if (posWidth > $progress.clientWidth - width / 2) {
-      setStyle(this.option.$control, 'left', `${$progress.clientWidth - width}px`);
+      setStyle(this.$control, 'left', `${$progress.clientWidth - width}px`);
     } else {
-      setStyle(this.option.$control, 'left', `${posWidth - width / 2}px`);
+      setStyle(this.$control, 'left', `${posWidth - width / 2}px`);
     }
   }
 }

src/controls/time.js

@@ -5,24 +5,20 @@ export default class Time {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
-    this.init();
-  }
-
-  init() {
-    this.option.$control.innerHTML = '00:00 / 00:00';
+    $control.innerHTML = '00:00 / 00:00';
 
     this.art.on('video:canplay', () => {
-      this.option.$control.innerHTML = this.getTime();
+      $control.innerHTML = this.getTime();
     });
 
     this.art.on('video:timeupdate', () => {
-      this.option.$control.innerHTML = this.getTime();
+      $control.innerHTML = this.getTime();
     });
 
     this.art.on('video:seeking', () => {
-      this.option.$control.innerHTML = this.getTime();
+      $control.innerHTML = this.getTime();
     });
   }
 

src/controls/volume.js

@@ -7,16 +7,17 @@ export default class Volume {
     this.isDroging = false;
   }
 
-  apply(art) {
+  apply(art, $control) {
     this.art = art;
+    this.$control = $control;
     this.init();
   }
 
   init() {
     const { events: { proxy }, player, i18n } = this.art;
-    this.$volume = append(this.option.$control, icons.volume);
-    this.$volumeClose = append(this.option.$control, icons.volumeClose);
-    this.$volumePanel = append(this.option.$control, '<div class="art-volume-panel"></div>');
+    this.$volume = append(this.$control, icons.volume);
+    this.$volumeClose = append(this.$control, icons.volumeClose);
+    this.$volumePanel = append(this.$control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
     tooltip(this.$volume, i18n.get('Mute'));
     setStyle(this.$volumeClose, 'display', 'none');
@@ -37,7 +38,7 @@ export default class Volume {
       player.volume(getStorage('volume'));
     });
 
-    proxy(this.option.$control, 'mouseenter', () => {
+    proxy(this.$control, 'mouseenter', () => {
       this.$volumePanel.classList.add('art-volume-panel-hover');
 
       // TODO
@@ -46,7 +47,7 @@ export default class Volume {
       }, 200);
     });
 
-    proxy(this.option.$control, 'mouseleave', () => {
+    proxy(this.$control, 'mouseleave', () => {
       this.$volumePanel.classList.remove('art-volume-panel-hover');
     });
 

src/setting/common.js

@@ -5,9 +5,8 @@ export default class Common {
     this.option = option;
   }
 
-  apply(art) {
+  apply(art, $setting) {
     this.art = art;
-    const { $setting } = this.option;
     this.$header = $setting.querySelector('.art-setting-header');
     this.$body = $setting.querySelector('.art-setting-body');
     append(this.$body, '———— 先占坑，暂无设置 ————');

src/setting/index.js

@@ -39,9 +39,8 @@ export default class Setting {
       $setting.dataset.settingIndex = option.index || id;
       append($setting, `<div class="art-setting-header">${this.art.i18n.get(title)}</div>`);
       append($setting, '<div class="art-setting-body"></div>');
-      option.$setting = $setting;
       this.$settings.push($setting);
-      setting.apply && setting.apply(this.art);
+      setting.apply && setting.apply(this.art, $setting);
       this[name] = setting;
     }
   }

src/style/loading.scss

@@ -11,5 +11,6 @@
         height: 100%;
         align-items: center;
         justify-content: center;
+        pointer-events: none;
     }
 }