update

src/controls/index.js

@@ -4,7 +4,6 @@ import Fullscreen from './fullscreen';
 import Pip from './pip';
 import PlayAndPause from './playAndPause';
 import Progress from './progress';
-import Screenshot from './screenshot';
 import Subtitle from './subtitle';
 import Time from './time';
 import Volume from './volume';
@@ -31,13 +30,6 @@ export default class Controls {
       index: 10
     });
 
-    this.add({
-      control: Screenshot,
-      disable: false,
-      position: 'top',
-      index: 20
-    });
-
     this.add({
       control: PlayAndPause,
       disable: false,

src/controls/progress.js

@@ -26,7 +26,10 @@ export default class Progress {
       <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-highlight">
+          <div class="highlight-text"></div>
+        </div>
+        <div class="art-progress-screenshot"></div>
         <div class="art-progress-indicator" style="background: ${theme}"></div>
         <div class="art-progress-timer">00:00</div>
       </div>
@@ -36,6 +39,7 @@ export default class Progress {
     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.$screenshot = this.option.ref.querySelector('.art-progress-screenshot');
     this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
     this.$timer = this.option.ref.querySelector('.art-progress-timer');
 
@@ -43,7 +47,9 @@ export default class Progress {
       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>`);
+        append(this.$highlight, `
+          <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
+        `);
       });
     });
 
@@ -61,12 +67,18 @@ export default class Progress {
 
     proxy(this.option.ref, 'mousemove', event => {
       if (event.path.indexOf(this.$highlight) > -1) {
-        this.showHighlight();
+        this.$timer.style.visibility = 'hidden';
+        this.showHighlight(event);
       } else {
+        this.$timer.style.visibility = 'visible';
         this.showTime(event);
       }
     });
 
+    proxy(this.option.ref, 'mouseleave', event => {
+      console.log(event);
+    });
+
     proxy(this.option.ref, 'click', event => {
       if (event.target !== this.$indicator) {
         const { second, percentage } = this.getPos(event);
@@ -96,7 +108,7 @@ export default class Progress {
     });
   }
 
-  showHighlight() {
+  showHighlight(event) {
     console.log('showHighlight');
   }
 
@@ -112,10 +124,14 @@ export default class Progress {
     this.$timer.innerHTML = time;
   }
 
+  showScreenshot() {
+    //
+  }
+
   getPos(event) {
     const { $video } = this.art.refs;
     const { left } = this.option.ref.getBoundingClientRect();
-    const width = event.x - left;
+    const width = Math.max(0, event.x - left);
     const second = width / this.option.ref.clientWidth * $video.duration;
     const time = secondToTime(second);
     const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);

src/controls/screenshot.js

@@ -1,6 +0,0 @@
-export default class Screenshot {
-  constructor(art, option) {
-    this.art = art;
-    this.option = option;
-  }
-}

src/style/index.scss

@@ -159,6 +159,11 @@
                     right: 0;
                     bottom: 0;
                     height: 0;
+
+                    .highlight-text{
+                        //
+                    }
+
                     span {
                         display: inline-block;
                         position: absolute;