support dragging bar in mobile

DIYgod · Jan 19, 2018 · 9573835 · 9573835
1 parent 4c079a6
commit 9573835
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 30 deletions.
diff --git a/src/js/controller.js b/src/js/controller.js
@@ -25,10 +25,12 @@ class Controller {
         this.initThumbnails();
         this.initPlayedBar();
         this.initFullButton();
-        this.initVolumeButton();
         this.initQualityButton();
         this.initScreenshotButton();
         this.initSubtitleButton();
+        if (!utils.isMobile) {
+            this.initVolumeButton();
+        }
     }
 
     initPlayButton () {
@@ -71,34 +73,34 @@ class Controller {
 
     initPlayedBar () {
         const thumbMove = (e) => {
-            let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
+            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
             percentage = Math.max(percentage, 0);
             percentage = Math.min(percentage, 1);
             this.player.bar.set('played', percentage, 'width');
             this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.video.duration);
         };
 
         const thumbUp = (e) => {
-            document.removeEventListener('mouseup', thumbUp);
-            document.removeEventListener('mousemove', thumbMove);
-            let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
+            document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
+            document.removeEventListener(utils.nameMap.dragMove, thumbMove);
+            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
             percentage = Math.max(percentage, 0);
             percentage = Math.min(percentage, 1);
             this.player.bar.set('played', percentage, 'width');
             this.player.seek(this.player.bar.get('played') * this.player.video.duration);
             this.player.time.enable('progress');
         };
 
-        this.player.template.playedBarWrap.addEventListener('mousedown', () => {
+        this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragStart, () => {
             this.player.time.disable('progress');
-            document.addEventListener('mousemove', thumbMove);
-            document.addEventListener('mouseup', thumbUp);
+            document.addEventListener(utils.nameMap.dragMove, thumbMove);
+            document.addEventListener(utils.nameMap.dragEnd, thumbUp);
         });
 
-        this.player.template.playedBarWrap.addEventListener('mousemove', (e) => {
+        this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragMove, (e) => {
             if (this.player.video.duration) {
                 const px = utils.cumulativeOffset(this.player.template.playedBarWrap).left;
-                const tx = e.clientX - px;
+                const tx = (e.clientX || e.changedTouches[0].clientX) - px;
                 if (tx < 0 || tx > this.player.template.playedBarWrap.offsetWidth) {
                     return;
                 }
@@ -140,23 +142,23 @@ class Controller {
 
         const volumeMove = (event) => {
             const e = event || window.event;
-            const percentage = (e.clientX - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
+            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
             this.player.volume(percentage);
         };
         const volumeUp = () => {
-            document.removeEventListener('mouseup', volumeUp);
-            document.removeEventListener('mousemove', volumeMove);
+            document.removeEventListener(utils.nameMap.dragEnd, volumeUp);
+            document.removeEventListener(utils.nameMap.dragMove, volumeMove);
             this.player.template.volumeButton.classList.remove('dplayer-volume-active');
         };
 
         this.player.template.volumeBarWrapWrap.addEventListener('click', (event) => {
             const e = event || window.event;
-            const percentage = (e.clientX - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
+            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
             this.player.volume(percentage);
         });
-        this.player.template.volumeBarWrapWrap.addEventListener('mousedown', () => {
-            document.addEventListener('mousemove', volumeMove);
-            document.addEventListener('mouseup', volumeUp);
+        this.player.template.volumeBarWrapWrap.addEventListener(utils.nameMap.dragStart, () => {
+            document.addEventListener(utils.nameMap.dragMove, volumeMove);
+            document.addEventListener(utils.nameMap.dragEnd, volumeUp);
             this.player.template.volumeButton.classList.add('dplayer-volume-active');
         });
         this.player.template.volumeIcon.addEventListener('click', () => {

diff --git a/src/js/setting.js b/src/js/setting.js
@@ -85,27 +85,27 @@ class Setting {
 
             const danmakuMove = (event) => {
                 const e = event || window.event;
-                let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
+                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
                 percentage = Math.max(percentage, 0);
                 percentage = Math.min(percentage, 1);
                 this.player.danmaku.opacity(percentage);
             };
             const danmakuUp = () => {
-                document.removeEventListener('mouseup', danmakuUp);
-                document.removeEventListener('mousemove', danmakuMove);
+                document.removeEventListener(utils.nameMap.dragEnd, danmakuUp);
+                document.removeEventListener(utils.nameMap.dragMove, danmakuMove);
                 this.player.template.danmakuOpacityBox.classList.remove('dplayer-setting-danmaku-active');
             };
 
             this.player.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
                 const e = event || window.event;
-                let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
+                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
                 percentage = Math.max(percentage, 0);
                 percentage = Math.min(percentage, 1);
                 this.player.danmaku.opacity(percentage);
             });
-            this.player.template.danmakuOpacityBarWrapWrap.addEventListener('mousedown', () => {
-                document.addEventListener('mousemove', danmakuMove);
-                document.addEventListener('mouseup', danmakuUp);
+            this.player.template.danmakuOpacityBarWrapWrap.addEventListener(utils.nameMap.dragStart, () => {
+                document.addEventListener(utils.nameMap.dragMove, danmakuMove);
+                document.addEventListener(utils.nameMap.dragEnd, danmakuUp);
                 this.player.template.danmakuOpacityBox.classList.add('dplayer-setting-danmaku-active');
             });
         }

diff --git a/src/js/utils.js b/src/js/utils.js
@@ -1,4 +1,6 @@
-export default {
+const isMobile = /mobile/i.test(window.navigator.userAgent);
+
+const utils = {
 
     /**
     * Parse second to 00:00 format
@@ -53,10 +55,7 @@ export default {
         }
     },
 
-    /**
-     * check if user is using mobile or not
-     */
-    isMobile: /mobile/i.test(window.navigator.userAgent),
+    isMobile: isMobile,
 
     isFirefox: /firefox/i.test(window.navigator.userAgent),
 
@@ -82,6 +81,13 @@ export default {
             top: top,
             left: left
         };
-    }
+    },
 
+    nameMap: {
+        dragStart: isMobile ? 'touchstart' : 'mousedown',
+        dragMove: isMobile ? 'touchmove' : 'mousemove',
+        dragEnd: isMobile ? 'touchend' : 'mouseup'
+    }
 };
+
+export default utils;