Merged from master, 1.25.0 1ff15c8

kn007 · Sep 24, 2019 · de641f7 · de641f7
1 parent 1b98dd2
commit de641f7
Show file tree

Hide file tree

Showing 17 changed files with 289 additions and 296 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ## Introduction
-DPlayer Lite, based on [DPlayer](https://github.com/MoePlayer/DPlayer) 1.25.0 ecc2411.
+DPlayer Lite, based on [DPlayer](https://github.com/MoePlayer/DPlayer) 1.25.0 1ff15c8.
 
 ![dplayer-lite-preview](https://user-images.githubusercontent.com/6196903/33885965-eed74a92-df7f-11e7-9a18-d8e53b522c3f.png)
 
@@ -8,7 +8,7 @@ DPlayer Lite, based on [DPlayer](https://github.com/MoePlayer/DPlayer) 1.25.0 ec
 - Streaming Formats
 	- [HLS](https://github.com/video-dev/hls.js)
 	- [FLV](https://github.com/Bilibili/flv.js)
-	- [DASH](https://github.com/Dash-Industry-Forum/dash.js)
+	- [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
 	- [WebTorrent](https://github.com/webtorrent/webtorrent)
 	- Any other custom streaming formats
 - Media Formats

diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js
diff --git a/src/js/bar.js b/src/js/bar.js
@@ -1,5 +1,5 @@
 class Bar {
-    constructor (template) {
+    constructor(template) {
         this.elements = {};
         this.elements.volume = template.volumeBar;
         this.elements.played = template.playedBar;
@@ -13,13 +13,13 @@ class Bar {
      * @param {Number} percentage
      * @param {String} direction - Point out the direction of this bar, Should be height or width
      */
-    set (type, percentage, direction) {
+    set(type, percentage, direction) {
         percentage = Math.max(percentage, 0);
         percentage = Math.min(percentage, 1);
         this.elements[type].style[direction] = percentage * 100 + '%';
     }
 
-    get (type) {
+    get(type) {
         return parseFloat(this.elements[type].style.width) / 100;
     }
 }

diff --git a/src/js/bezel.js b/src/js/bezel.js
@@ -1,13 +1,13 @@
 class Bezel {
-    constructor (container) {
+    constructor(container) {
         this.container = container;
 
         this.container.addEventListener('animationend', () => {
             this.container.classList.remove('dplayer-bezel-transition');
         });
     }
 
-    switch (icon) {
+    switch(icon) {
         this.container.innerHTML = icon;
         this.container.classList.add('dplayer-bezel-transition');
     }

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -2,7 +2,7 @@ import utils from './utils';
 import Icons from './icons';
 
 class Controller {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
 
         this.autoHideTimer = 0;
@@ -29,7 +29,7 @@ class Controller {
         }
     }
 
-    initPlayButton () {
+    initPlayButton() {
         this.player.template.playButton.addEventListener('click', () => {
             this.player.toggle();
         });
@@ -41,8 +41,7 @@ class Controller {
             this.player.template.controllerMask.addEventListener('click', () => {
                 this.player.toggle();
             });
-        }
-        else {
+        } else {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.toggle();
             });
@@ -52,7 +51,7 @@ class Controller {
         }
     }
 
-    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);
@@ -69,22 +68,24 @@ class Controller {
             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.timer.enable('progress');
         };
 
         this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragStart, () => {
+            this.player.timer.disable('progress');
             document.addEventListener(utils.nameMap.dragMove, thumbMove);
             document.addEventListener(utils.nameMap.dragEnd, thumbUp);
         });
 
         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;
                 }
                 const time = this.player.video.duration * (tx / this.player.template.playedBarWrap.offsetWidth);
-                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');
             }
@@ -106,7 +107,7 @@ class Controller {
         }
     }
 
-    initFullButton () {
+    initFullButton() {
         this.player.template.browserFullButton.addEventListener('click', () => {
             this.player.fullScreen.toggle('browser');
         });
@@ -116,7 +117,7 @@ class Controller {
         });
     }
 
-    initVolumeButton () {
+    initVolumeButton() {
         const vWidth = 35;
 
         const volumeMove = (event) => {
@@ -145,16 +146,15 @@ 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');
             }
         });
     }
 
-    setAutoHide () {
+    setAutoHide() {
         this.show();
         clearTimeout(this.autoHideTimer);
         this.autoHideTimer = setTimeout(() => {
@@ -164,28 +164,27 @@ class Controller {
         }, 3000);
     }
 
-    show () {
+    show() {
         this.player.container.classList.remove('dplayer-hide-controller');
     }
 
-    hide () {
+    hide() {
         this.player.container.classList.add('dplayer-hide-controller');
     }
 
-    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);
     }
 }

diff --git a/src/js/events.js b/src/js/events.js
@@ -1,22 +1,47 @@
 class Events {
-    constructor () {
+    constructor() {
         this.events = {};
 
         this.videoEvents = [
-            'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error',
-            'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'pause', 'play',
-            'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend',
-            'timeupdate', 'volumechange', 'waiting'
+            'abort',
+            'canplay',
+            'canplaythrough',
+            'durationchange',
+            'emptied',
+            'ended',
+            'error',
+            'loadeddata',
+            'loadedmetadata',
+            'loadstart',
+            'mozaudioavailable',
+            'pause',
+            'play',
+            'playing',
+            'progress',
+            'ratechange',
+            'seeked',
+            'seeking',
+            'stalled',
+            'suspend',
+            'timeupdate',
+            'volumechange',
+            'waiting',
         ];
         this.playerEvents = [
-            'loop_enable', 'loop_disable',
-            'notice_show', 'notice_hide',
-            'destroy', 'resize',
-            'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
+            'loop_enable',
+            'loop_disable',
+            'notice_show',
+            'notice_hide',
+            'destroy',
+            'resize',
+            'fullscreen',
+            'fullscreen_cancel',
+            'webfullscreen',
+            'webfullscreen_cancel'
         ];
     }
 
-    on (name, callback) {
+    on(name, callback) {
         if (this.type(name) && typeof callback === 'function') {
             if (!this.events[name]) {
                 this.events[name] = [];
@@ -25,19 +50,18 @@ class Events {
         }
     }
 
-    trigger (name, info) {
+    trigger(name, info) {
         if (this.events[name] && this.events[name].length) {
             for (let i = 0; i < this.events[name].length; i++) {
                 this.events[name][i](info);
             }
         }
     }
 
-    type (name) {
+    type(name) {
         if (this.playerEvents.indexOf(name) !== -1) {
             return 'player';
-        }
-        else if (this.videoEvents.indexOf(name) !== -1) {
+        } else if (this.videoEvents.indexOf(name) !== -1) {
             return 'video';
         }