update

src/controls/index.js

@@ -1,8 +1,6 @@
-import { append, setStyle } from '../utils';
 import validControl from '../verification/control';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
-import Highlight from './highlight';
 import Pip from './pip';
 import PlayAndPause from './playAndPause';
 import Progress from './progress';
@@ -29,32 +27,20 @@ export default class Controls {
     this.add({
       control: Progress,
       disable: false,
-      html: '',
       position: 'top',
       index: 10
     });
 
     this.add({
-      control: Highlight,
+      control: Screenshot,
       disable: false,
-      html: '<div class="art-progress-highlight"></div>',
       position: 'top',
       index: 20
     });
 
-    this.add({
-      control: Screenshot,
-      disable: false,
-      html: '<div class="art-progress-screenshot"></div>',
-      position: 'top',
-      index: 30
-    });
-
     this.add({
       control: PlayAndPause,
       disable: false,
-      html: 'PlayAndPause',
-      tooltip: 'PlayAndPause',
       position: 'left',
       index: 10
     });
@@ -62,7 +48,6 @@ export default class Controls {
     this.add({
       control: Volume,
       disable: false,
-      html: 'Volume',
       tooltip: 'Volume',
       position: 'left',
       index: 20
@@ -71,7 +56,6 @@ export default class Controls {
     this.add({
       control: Time,
       disable: false,
-      html: 'Time',
       tooltip: 'Volume',
       position: 'left',
       index: 30
@@ -80,7 +64,6 @@ export default class Controls {
     this.add({
       control: Danmu,
       disable: false,
-      html: 'Danmu',
       tooltip: 'Danmu',
       position: 'right',
       index: 10
@@ -89,7 +72,6 @@ export default class Controls {
     this.add({
       control: Subtitle,
       disable: false,
-      html: 'Subtitle',
       tooltip: 'Subtitle',
       position: 'right',
       index: 20
@@ -98,7 +80,6 @@ export default class Controls {
     this.add({
       control: Setting,
       disable: false,
-      html: 'Setting',
       tooltip: 'Setting',
       position: 'right',
       index: 30
@@ -107,7 +88,6 @@ export default class Controls {
     this.add({
       control: Pip,
       disable: false,
-      html: 'Pip',
       tooltip: 'Pip',
       position: 'right',
       index: 40
@@ -116,7 +96,6 @@ export default class Controls {
     this.add({
       control: Fullscreen,
       disable: false,
-      html: 'Fullscreen',
       tooltip: 'Fullscreen',
       position: 'right',
       index: 50
@@ -135,8 +114,6 @@ export default class Controls {
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
       $control.setAttribute('data-control-index', String(option.index) || id);
-      setStyle($control, option.style || {});
-      append($control, option.html);
       option.ref = $control;
       this.commonMethod(option);
       this[name] = new option.control(this.art, option);

src/controls/progress.js

@@ -4,6 +4,7 @@ export default class Progress {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.isDroging = false;
     this.getLoaded = this.getLoaded.bind(this);
     this.getPlayed = this.getPlayed.bind(this);
     this.getPos = this.getPos.bind(this);
@@ -12,24 +13,38 @@ export default class Progress {
   }
 
   init() {
-    const { option: { theme }, events: { proxy }, player } = this.art;
+    const {
+      option: { highlight, theme },
+      events: { proxy },
+      refs: { $video },
+      player
+    } = this.art;
 
-    append(this.option.ref, `
+    append(
+      this.option.ref,
+      `
       <div class="art-control-progress-inner">
         <div class="art-progress-loaded"></div>
         <div class="art-progress-played" style="background: ${theme}"></div>
+        <div class="art-progress-highlight"></div>
         <div class="art-progress-indicator" style="background: ${theme}"></div>
         <div class="art-progress-timer">00:00</div>
       </div>
-    `);
+    `
+    );
 
     this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
     this.$played = this.option.ref.querySelector('.art-progress-played');
+    this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
     this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
     this.$timer = this.option.ref.querySelector('.art-progress-timer');
 
     this.art.on('video:canplay', () => {
       this.set('loaded', this.getLoaded());
+      highlight.forEach(item => {
+        const left = Number(item.time) / $video.duration;
+        append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>`);
+      });
     });
 
     this.art.on('video:progress', () => {
@@ -64,7 +79,6 @@ export default class Progress {
       }
     });
 
-    this.isDroging = false;
     proxy(this.$indicator, 'mousedown', () => {
       this.isDroging = true;
     });
@@ -103,7 +117,9 @@ export default class Progress {
 
   getLoaded() {
     const { $video } = this.art.refs;
-    return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0;
+    return $video.buffered.length
+      ? $video.buffered.end($video.buffered.length - 1) / $video.duration
+      : 0;
   }
 
   set(type, percentage) {
@@ -113,4 +129,3 @@ export default class Progress {
     }
   }
 }
-