Add time tips

src/DPlayer.js

@@ -209,6 +209,7 @@ class DPlayer {
         bar.playedBar = this.element.getElementsByClassName('dplayer-played')[0];
         bar.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];
         const pbar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];
+        const pbarTimeTips = this.element.getElementsByClassName('dplayer-bar-time')[0];
         let barWidth;
 
         if (this.option.danmaku) {
@@ -278,6 +279,15 @@ class DPlayer {
             this.video.currentTime = parseFloat(bar.playedBar.style.width) / 100 * this.video.duration;
         });
 
+        this.isTipsShow = false
+        this.timeTipsHandler = this.timeTipsHandler(
+            pbar, pbarTimeTips, secondToTime).bind(this)
+        pbar.addEventListener('mousemove', this.timeTipsHandler)
+        pbar.addEventListener('mouseover', this.timeTipsHandler)
+        pbar.addEventListener('mouseenter', this.timeTipsHandler)
+        pbar.addEventListener('mouseout', this.timeTipsHandler)
+        pbar.addEventListener('mouseleave', this.timeTipsHandler)
+
         const thumbMove = (event) => {
             const e = event || window.event;
             let percentage = (e.clientX - getElementViewLeft(pbar)) / barWidth;
@@ -1184,6 +1194,47 @@ class DPlayer {
             this.readDanmaku();
         }
     }
+
+    timeTipsHandler(pbar, timeTips, secondToTime) {
+        // http://stackoverflow.com/questions/1480133/how-can-i-get-an-objects-absolute-position-on-the-page-in-javascript
+        const cumulativeOffset = function(element) {
+            var top = 0, left = 0;
+            do {
+                top += element.offsetTop  || 0;
+                left += element.offsetLeft || 0;
+                element = element.offsetParent;
+            } while(element);
+
+            return {
+                top: top,
+                left: left
+            };
+        };
+
+        return (e) => {
+            if (!this.video.duration) return
+            const { clientX, target } = e;
+            const px = cumulativeOffset(pbar).left
+            const tx = clientX - px;
+            timeTips.innerText = secondToTime(this.video.duration * (tx/pbar.offsetWidth));
+            timeTips.style.left = `${(tx - 20)}px`;
+            switch(e.type) {
+                case 'mouseenter':
+                case 'mouseover':
+                case 'mousemove':
+                    if (this.isTipsShow) return
+                    timeTips.classList.remove('hidden')
+                    this.isTipsShow = true
+                    break;
+                case 'mouseleave':
+                case 'mouseout':
+                    if (!this.isTipsShow) return
+                    timeTips.classList.add('hidden')
+                    this.isTipsShow = false
+                    break;
+            }
+        }
+    }
 }
 
-module.exports = DPlayer;
+module.exports = DPlayer;

src/DPlayer.scss

@@ -361,6 +361,25 @@
                 }
             }
 
+            .dplayer-bar-time {
+                &.hidden {
+                    opacity: 0;
+                }
+                position: absolute;
+                left: 0px;
+                top: -25px;
+                width: 30px;
+                border-radius: 10px;
+                box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.62);
+                padding: 10px 5px;
+                background-color: rgba(0, 0, 0, 0.62);
+                color: #fff;
+                font-size: 12px;
+                text-align: center;
+                opacity: 1;
+                transition: left opacity .1s ease-in-out;
+            }
+
             .dplayer-bar {
                 position: relative;
                 height: 3px;

src/html.js

@@ -142,6 +142,7 @@ module.exports = {
                     </div>
                 </div>
                 <div class="dplayer-bar-wrap">
+                    <div class="dplayer-bar-time hidden">00:00</div>
                     <div class="dplayer-bar">
                         <div class="dplayer-loaded" style="width: 0;"></div>
                         <div class="dplayer-played" style="width: 0; background: ${option.theme}">