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 {
     }
   }
 }
-

src/index.js

@@ -60,6 +60,7 @@ class Artplayer extends Emitter {
         style: {}
       },
       controls: [],
+      highlight: [],
       lang: navigator.language.toLowerCase()
     };
   }

src/mask.js

@@ -15,8 +15,9 @@ export default class Mask {
       events: { proxy }
     } = this.art;
 
-    icons.play.style.backgroundColor = option.theme;
-    append(refs.$mask, icons.play);
+    const playClone = icons.play.cloneNode(true);
+    playClone.style.backgroundColor = option.theme;
+    append(refs.$mask, playClone);
 
     proxy(refs.$mask, 'click', () => {
       player.play();

src/player.js

@@ -109,10 +109,6 @@ export default class Player {
     this.art.emit('seek', newTime);
   }
 
-  currentTime() {
-    return this.art.refs.$video.currentTime;
-  }
-
   volume(percentage) {
     const { $video } = this.art.refs;
     if (percentage) {

src/style/index.scss

@@ -123,7 +123,6 @@
             height: 5px;
             padding: 1px 0;
             cursor: pointer;
-            box-sizing: border-box;
 
             .art-control-progress-inner {
                 position: relative;
@@ -131,7 +130,7 @@
                 background: rgba(255,255,255,.2);
                 .art-progress-loaded {
                     position: absolute;
-                    z-index: 1;
+                    z-index: 10;
                     left: 0;
                     top: 0;
                     right: 0;
@@ -139,25 +138,43 @@
                     height: 100%;
                     width: 0;
                     background: rgba(255,255,255,.4);
-                    transform-origin: 0 0;
                 }
     
                 .art-progress-played {
                     position: absolute;
-                    z-index: 2;
+                    z-index: 20;
                     left: 0;
                     top: 0;
                     right: 0;
                     bottom: 0;
                     height: 100%;
                     width: 0;
-                    transform-origin: 0 0;
+                }
+
+                .art-progress-highlight {
+                    position: absolute;
+                    z-index: 30;
+                    left: 0;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    height: 0;
+                    span {
+                        display: inline-block;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        width: 7px;
+                        height: 3px;
+                        background: #fff;
+                        border-radius: 3px;
+                    }
                 }
     
                 .art-progress-indicator {
                     display: none;
                     position: absolute;
-                    z-index: 3;
+                    z-index: 40;
                     top: -5px;
                     left: -6.5px;
                     width: 13px;
@@ -172,7 +189,7 @@
                 .art-progress-timer {
                     display: none;
                     position: absolute;
-                    z-index: 4;
+                    z-index: 50;
                     top: -25px;
                     left: 0;
                     width: 40px;

src/verification/control.js

@@ -11,11 +11,6 @@ export default function validControl(option) {
     `'disable' option require 'boolean' type, but got '${typeof option.disable}'.`
   );
 
-  errorHandle(
-    typeof option.html === 'string' || option.html instanceof Element,
-    `'html' option require 'string' or 'Element' type, but got '${typeof option.html}'.`
-  );
-
   errorHandle(
     ['top', 'left', 'right'].indexOf(option.position) > -1,
     `'position' option require one of 'top、left、right', but got '${option.position}'.`

src/verification/player.js

@@ -90,4 +90,9 @@ export default function validOption(option) {
     Array.isArray(option.controls),
     `'controls' option require 'array' type, but got '${typeof option.controls}'.`
   );
+
+  errorHandle(
+    Array.isArray(option.highlight),
+    `'highlight' option require 'array' type, but got '${typeof option.highlight}'.`
+  );
 }