bar module

README.md

@@ -140,4 +140,4 @@ var dp = new DPlayer({
 **DPlayer** © [DIYgod](https://github.com/DIYgod), Released under the [MIT](./LICENSE) License.<br>
 Authored and maintained by DIYgod with help from contributors ([list](https://github.com/DIYgod/DPlayer/contributors)).
 
-> Blog [@Anotherhome](https://www.anotherhome.net) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)
+> [Blog](https://diygod.me) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod)

src/DPlayer.js

@@ -11,6 +11,7 @@ import Events from './events';
 import FullScreen from './fullscreen';
 import User from './user';
 import Subtitle from './subtitle';
+import Bar from './bar';
 
 let index = 0;
 const instances = [];
@@ -26,22 +27,17 @@ class DPlayer {
     constructor (options) {
         this.options = handleOption(options);
 
-        this.options.container.classList.add('dplayer');
-
         if (this.options.video.quality) {
             this.qualityIndex = this.options.video.defaultQuality;
             this.quality = this.options.video.quality[this.options.video.defaultQuality];
         }
-
         this.tran = new i18n(this.options.lang).tran;
-
         this.icons = new SvgCollection(this.options);
-
         this.events = new Events();
-
         this.user = new User(this);
-
         this.container = this.options.container;
+
+        this.container.classList.add('dplayer');
         if (!this.options.danmaku) {
             this.container.classList.add('dplayer-no-danmaku');
         }
@@ -60,24 +56,7 @@ class DPlayer {
             icons: this.icons
         });
 
-        const bar = {};
-        bar.volumeBar = this.template.volumeBar;
-        bar.playedBar = this.template.playedBar;
-        bar.loadedBar = this.template.loadedBar;
-        let barWidth;
-
-        /**
-         * Update progress bar, including loading progress bar and play progress bar
-         *
-         * @param {String} type - Point out which bar it is, should be played loaded or volume
-         * @param {Number} percentage
-         * @param {String} direction - Point out the direction of this bar, Should be height or width
-         */
-        this.updateBar = (type, percentage, direction) => {
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            bar[type + 'Bar'].style[direction] = percentage * 100 + '%';
-        };
+        this.bar = new Bar(this.template);
 
         document.addEventListener('click', () => {
             this.focus = false;
@@ -208,7 +187,7 @@ class DPlayer {
         this.playedTime = false;
         this.animationFrame = () => {
             if (this.playedTime) {
-                this.updateBar('played', this.video.currentTime / this.video.duration, 'width');
+                this.bar.set('played', this.video.currentTime / this.video.duration, 'width');
                 this.template.ptime.innerHTML = utils.secondToTime(this.video.currentTime);
             }
             window.requestAnimationFrame(this.animationFrame);
@@ -249,12 +228,12 @@ class DPlayer {
         this.template.playedBarWrap.addEventListener('mouseenter', this.mouseHandler);
         this.template.playedBarWrap.addEventListener('mouseleave', this.mouseHandler);
 
-
+        let barWidth;
         const thumbMove = (e) => {
             let percentage = (e.clientX - utils.getElementViewLeft(this.template.playedBarWrap)) / barWidth;
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            this.updateBar('played', percentage, 'width');
+            percentage = Math.max(percentage, 0);
+            percentage = Math.min(percentage, 1);
+            this.bar.set('played', percentage, 'width');
             this.template.ptime.innerHTML = utils.secondToTime(percentage * this.video.duration);
         };
 
@@ -262,10 +241,10 @@ class DPlayer {
             document.removeEventListener('mouseup', thumbUp);
             document.removeEventListener('mousemove', thumbMove);
             let percentage = (e.clientX - utils.getElementViewLeft(this.template.playedBarWrap)) / barWidth;
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            this.updateBar('played', percentage, 'width');
-            this.seek(parseFloat(bar.playedBar.style.width) / 100 * this.video.duration);
+            percentage = Math.max(percentage, 0);
+            percentage = Math.min(percentage, 1);
+            this.bar.set('played', percentage, 'width');
+            this.seek(this.bar.get('played') * this.video.duration);
             this.setTime();
         };
 
@@ -318,12 +297,12 @@ class DPlayer {
             if (this.video.muted) {
                 this.video.muted = false;
                 this.switchVolumeIcon();
-                this.updateBar('volume', this.volume(), 'width');
+                this.bar.set('volume', this.volume(), 'width');
             }
             else {
                 this.video.muted = true;
                 this.template.volumeIcon.innerHTML = this.icons.get('volume-off');
-                this.updateBar('volume', 0, 'width');
+                this.bar.set('volume', 0, 'width');
             }
         });
 
@@ -451,10 +430,9 @@ class DPlayer {
 
         if (this.danmaku) {
             // danmaku opacity
-            bar.danmakuBar = this.template.danmakuOpacityBar;
             const dWidth = 130;
             this.on('danmaku_opacity', (percentage) => {
-                this.updateBar('danmaku', percentage, 'width');
+                this.bar.set('danmaku', percentage, 'width');
                 this.user.set('opacity', percentage);
             });
             this.danmaku.opacity(this.user.get('opacity'));
@@ -462,8 +440,8 @@ class DPlayer {
             const danmakuMove = (event) => {
                 const e = event || window.event;
                 let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
-                percentage = percentage > 0 ? percentage : 0;
-                percentage = percentage < 1 ? percentage : 1;
+                percentage = Math.max(percentage, 0);
+                percentage = Math.min(percentage, 1);
                 this.danmaku.opacity(percentage);
             };
             const danmakuUp = () => {
@@ -475,8 +453,8 @@ class DPlayer {
             this.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
                 const e = event || window.event;
                 let percentage = (e.clientX - utils.getElementViewLeft(this.template.danmakuOpacityBarWrap)) / dWidth;
-                percentage = percentage > 0 ? percentage : 0;
-                percentage = percentage < 1 ? percentage : 1;
+                percentage = Math.max(percentage, 0);
+                percentage = Math.min(percentage, 1);
                 this.danmaku.opacity(percentage);
             });
             this.template.danmakuOpacityBarWrapWrap.addEventListener('mousedown', () => {
@@ -778,7 +756,7 @@ class DPlayer {
             this.danmaku.seek();
         }
 
-        this.updateBar('played', time / this.video.duration, 'width');
+        this.bar.set('played', time / this.video.duration, 'width');
     }
 
     /**
@@ -836,9 +814,9 @@ class DPlayer {
     volume (percentage, nostorage, nonotice) {
         percentage = parseFloat(percentage);
         if (!isNaN(percentage)) {
-            percentage = percentage > 0 ? percentage : 0;
-            percentage = percentage < 1 ? percentage : 1;
-            this.updateBar('volume', percentage, 'width');
+            percentage = Math.max(percentage, 0);
+            percentage = Math.min(percentage, 1);
+            this.bar.set('volume', percentage, 'width');
             const formatPercentage = `${(percentage * 100).toFixed(0)}%`;
             this.template.volumeBarWrapWrap.dataset.balloon = formatPercentage;
             if (!nostorage) {
@@ -890,8 +868,8 @@ class DPlayer {
         this.initMSE(this.video, video.type || 'auto');
         if (danmakuAPI) {
             this.template.danmakuLoading.style.display = 'block';
-            this.updateBar('played', 0, 'width');
-            this.updateBar('loaded', 0, 'width');
+            this.bar.set('played', 0, 'width');
+            this.bar.set('loaded', 0, 'width');
             this.template.ptime.innerHTML = '00:00';
             this.template.danmaku.innerHTML = '';
             if (this.danmaku) {
@@ -963,7 +941,7 @@ class DPlayer {
         // show video loaded bar: to inform interested parties of progress downloading the media
         this.on('progress', () => {
             const percentage = video.buffered.length ? video.buffered.end(video.buffered.length - 1) / video.duration : 0;
-            this.updateBar('loaded', percentage, 'width');
+            this.bar.set('loaded', percentage, 'width');
         });
 
         // video download error: an error occurs
@@ -974,7 +952,7 @@ class DPlayer {
         // video end
         this.ended = false;
         this.on('ended', () => {
-            this.updateBar('played', 1, 'width');
+            this.bar.set('played', 1, 'width');
             if (!this.loop) {
                 this.ended = true;
                 this.pause();

src/bar.js

@@ -0,0 +1,28 @@
+class Bar {
+    constructor (template) {
+        this.elements = {};
+        this.elements.volume = template.volumeBar;
+        this.elements.played = template.playedBar;
+        this.elements.loaded = template.loadedBar;
+        this.elements.danmaku = template.danmakuOpacityBar;
+    }
+
+    /**
+     * Update progress
+     *
+     * @param {String} type - Point out which bar it is
+     * @param {Number} percentage
+     * @param {String} direction - Point out the direction of this bar, Should be height or width
+     */
+    set (type, percentage, direction) {
+        percentage = Math.max(percentage, 0);
+        percentage = Math.min(percentage, 1);
+        this.elements[type].style[direction] = percentage * 100 + '%';
+    }
+
+    get (type) {
+        return parseFloat(this.elements[type].style.width) / 100;
+    }
+}
+
+module.exports = Bar;