fix: thumbnails position

src/js/controller.js

@@ -3,7 +3,7 @@ import Thumbnails from './thumbnails';
 import Icons from './icons';
 
 class Controller {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
 
         this.autoHideTimer = 0;
@@ -35,7 +35,7 @@ class Controller {
         }
     }
 
-    initPlayButton () {
+    initPlayButton() {
         this.player.template.playButton.addEventListener('click', () => {
             this.player.toggle();
         });
@@ -47,8 +47,7 @@ class Controller {
             this.player.template.controllerMask.addEventListener('click', () => {
                 this.player.toggle();
             });
-        }
-        else {
+        } else {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.toggle();
             });
@@ -58,7 +57,7 @@ class Controller {
         }
     }
 
-    initHighlights () {
+    initHighlights() {
         this.player.on('durationchange', () => {
             if (this.player.video.duration !== 1 && this.player.video.duration !== Infinity) {
                 if (this.player.options.highlight) {
@@ -72,7 +71,7 @@ class Controller {
                         }
                         const p = document.createElement('div');
                         p.classList.add('dplayer-highlight');
-                        p.style.left =  this.player.options.highlight[i].time / this.player.video.duration * 100 + '%';
+                        p.style.left = (this.player.options.highlight[i].time / this.player.video.duration) * 100 + '%';
                         p.innerHTML = '<span class="dplayer-highlight-text">' + this.player.options.highlight[i].text + '</span>';
                         this.player.template.playedBarWrap.insertBefore(p, this.player.template.playedBarTime);
                     }
@@ -81,22 +80,22 @@ class Controller {
         });
     }
 
-    initThumbnails () {
+    initThumbnails() {
         if (this.player.options.video.thumbnails) {
             this.thumbnails = new Thumbnails({
                 container: this.player.template.barPreview,
                 barWidth: this.player.template.barWrap.offsetWidth,
                 url: this.player.options.video.thumbnails,
-                events: this.player.events
+                events: this.player.events,
             });
 
             this.player.on('loadedmetadata', () => {
-                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160, this.player.template.barWrap.offsetWidth);
+                this.thumbnails.resize(160, (this.player.video.videoHeight / this.player.video.videoWidth) * 160, this.player.template.barWrap.offsetWidth);
             });
         }
     }
 
-    initPlayedBar () {
+    initPlayedBar() {
         const thumbMove = (e) => {
             let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
             percentage = Math.max(percentage, 0);
@@ -124,7 +123,7 @@ class Controller {
 
         this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragMove, (e) => {
             if (this.player.video.duration) {
-                const px = utils.cumulativeOffset(this.player.template.playedBarWrap).left;
+                const px = this.player.template.playedBarWrap.getBoundingClientRect().left;
                 const tx = (e.clientX || e.changedTouches[0].clientX) - px;
                 if (tx < 0 || tx > this.player.template.playedBarWrap.offsetWidth) {
                     return;
@@ -134,7 +133,7 @@ class Controller {
                     this.thumbnails && this.thumbnails.show();
                 }
                 this.thumbnails && this.thumbnails.move(tx);
-                this.player.template.playedBarTime.style.left = `${(tx - (time >= 3600 ? 25 : 20))}px`;
+                this.player.template.playedBarTime.style.left = `${tx - (time >= 3600 ? 25 : 20)}px`;
                 this.player.template.playedBarTime.innerText = utils.secondToTime(time);
                 this.player.template.playedBarTime.classList.remove('hidden');
             }
@@ -163,7 +162,7 @@ class Controller {
         }
     }
 
-    initFullButton () {
+    initFullButton() {
         this.player.template.browserFullButton.addEventListener('click', () => {
             this.player.fullScreen.toggle('browser');
         });
@@ -173,7 +172,7 @@ class Controller {
         });
     }
 
-    initVolumeButton () {
+    initVolumeButton() {
         const vWidth = 35;
 
         const volumeMove = (event) => {
@@ -202,8 +201,7 @@ class Controller {
                 this.player.video.muted = false;
                 this.player.switchVolumeIcon();
                 this.player.bar.set('volume', this.player.volume(), 'width');
-            }
-            else {
+            } else {
                 this.player.video.muted = true;
                 this.player.template.volumeIcon.innerHTML = Icons.volumeOff;
                 this.player.bar.set('volume', 0, 'width');
@@ -211,7 +209,7 @@ class Controller {
         });
     }
 
-    initQualityButton () {
+    initQualityButton() {
         if (this.player.options.video.quality) {
             this.player.template.qualityList.addEventListener('click', (e) => {
                 if (e.target.classList.contains('dplayer-quality-item')) {
@@ -221,7 +219,7 @@ class Controller {
         }
     }
 
-    initScreenshotButton () {
+    initScreenshotButton() {
         if (this.player.options.screenshot) {
             this.player.template.camareButton.addEventListener('click', () => {
                 const canvas = document.createElement('canvas');
@@ -247,7 +245,7 @@ class Controller {
         }
     }
 
-    initSubtitleButton () {
+    initSubtitleButton() {
         if (this.player.options.subtitle) {
             this.player.events.on('subtitle_show', () => {
                 this.player.template.subtitleButton.dataset.balloon = this.player.tran('Hide subtitle');
@@ -266,7 +264,7 @@ class Controller {
         }
     }
 
-    setAutoHide () {
+    setAutoHide() {
         this.show();
         clearTimeout(this.autoHideTimer);
         this.autoHideTimer = setTimeout(() => {
@@ -276,30 +274,29 @@ class Controller {
         }, 3000);
     }
 
-    show () {
+    show() {
         this.player.container.classList.remove('dplayer-hide-controller');
     }
 
-    hide () {
+    hide() {
         this.player.container.classList.add('dplayer-hide-controller');
         this.player.setting.hide();
         this.player.comment && this.player.comment.hide();
     }
 
-    isShow () {
+    isShow() {
         return !this.player.container.classList.contains('dplayer-hide-controller');
     }
 
-    toggle () {
+    toggle() {
         if (this.isShow()) {
             this.hide();
-        }
-        else {
+        } else {
             this.show();
         }
     }
 
-    destroy () {
+    destroy() {
         clearTimeout(this.autoHideTimer);
     }
 }

src/js/utils.js

@@ -101,21 +101,6 @@ const utils = {
         get: (key) => localStorage.getItem(key),
     },
 
-    cumulativeOffset: (element) => {
-        let top = 0,
-            left = 0;
-        do {
-            top += element.offsetTop || 0;
-            left += element.offsetLeft || 0;
-            element = element.offsetParent;
-        } while (element);
-
-        return {
-            top: top,
-            left: left,
-        };
-    },
-
     nameMap: {
         dragStart: isMobile ? 'touchstart' : 'mousedown',
         dragMove: isMobile ? 'touchmove' : 'mousemove',