user module; unlimited danmaku setting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",

src/DPlayer.js

@@ -9,6 +9,7 @@ import Danmaku from './danmaku';
 import Thumbnails from './thumbnails';
 import Events from './events';
 import FullScreen from './fullscreen';
+import User from './user';
 
 let index = 0;
 
@@ -34,6 +35,8 @@ class DPlayer {
 
         this.events = new Events();
 
+        this.user = new User(this);
+
         this.element = this.option.element;
         if (!this.option.danmaku) {
             this.element.classList.add('dplayer-no-danmaku');
@@ -76,7 +79,7 @@ class DPlayer {
         if (this.option.danmaku) {
             this.danmaku = new Danmaku({
                 container: this.element.getElementsByClassName('dplayer-danmaku')[0],
-                opacity: localStorage.getItem('danmaku-opacity') || 0.7,
+                opacity: this.user.get('opacity'),
                 callback: () => {
                     this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
 
@@ -95,7 +98,7 @@ class DPlayer {
                 borderColor: this.option.theme,
                 height: this.arrow ? 24 : 30,
                 time: () => this.video.currentTime,
-                unlimited: this.option.danmaku.unlimited,
+                unlimited: this.user.get('unlimited'),
                 api: {
                     id: this.option.danmaku.id,
                     address: this.option.danmaku.api,
@@ -384,7 +387,11 @@ class DPlayer {
         });
 
         this.loop = this.option.loop;
-        let showdan = true;
+        let showdan = this.user.get('danmaku');
+        if (!showdan) {
+            this.danmaku && this.danmaku.hide();
+        }
+        let unlimitDan = this.user.get('unlimited');
         const settingEvent = () => {
             // loop control
             const loopEle = this.element.getElementsByClassName('dplayer-setting-loop')[0];
@@ -421,6 +428,27 @@ class DPlayer {
                     showdan = false;
                     this.danmaku.hide();
                 }
+                this.user.set('danmaku', showdan ? 1 : 0);
+                closeSetting();
+            });
+
+            // unlimited danmaku control
+            const unlimitDanEle = this.element.getElementsByClassName('dplayer-setting-danunlimit')[0];
+            const unlimitDanToggle = unlimitDanEle.getElementsByClassName('dplayer-danunlimit-setting-input')[0];
+
+            unlimitDanToggle.checked = unlimitDan;
+
+            unlimitDanEle.addEventListener('click', () => {
+                unlimitDanToggle.checked = !unlimitDanToggle.checked;
+                if (unlimitDanToggle.checked) {
+                    unlimitDan = true;
+                    this.danmaku.unlimit(true);
+                }
+                else {
+                    unlimitDan = false;
+                    this.danmaku.unlimit(false);
+                }
+                this.user.set('unlimited', unlimitDan ? 1 : 0);
                 closeSetting();
             });
 
@@ -446,14 +474,17 @@ class DPlayer {
                 const danmakuBarWrap = this.element.getElementsByClassName('dplayer-danmaku-bar')[0];
                 const danmakuSettingBox = this.element.getElementsByClassName('dplayer-setting-danmaku')[0];
                 const dWidth = 130;
-                this.updateBar('danmaku', this.danmaku.opacity(), 'width');
+                this.on('danmaku_opacity', (percentage) => {
+                    this.updateBar('danmaku', percentage, 'width');
+                    this.user.set('opacity', percentage);
+                });
+                this.danmaku.opacity(this.user.get('opacity'));
 
                 const danmakuMove = (event) => {
                     const e = event || window.event;
                     let percentage = (e.clientX - utils.getElementViewLeft(danmakuBarWrap)) / dWidth;
                     percentage = percentage > 0 ? percentage : 0;
                     percentage = percentage < 1 ? percentage : 1;
-                    this.updateBar('danmaku', percentage, 'width');
                     this.danmaku.opacity(percentage);
                 };
                 const danmakuUp = () => {
@@ -467,7 +498,6 @@ class DPlayer {
                     let percentage = (e.clientX - utils.getElementViewLeft(danmakuBarWrap)) / dWidth;
                     percentage = percentage > 0 ? percentage : 0;
                     percentage = percentage < 1 ? percentage : 1;
-                    this.updateBar('danmaku', percentage, 'width');
                     this.danmaku.opacity(percentage);
                 });
                 danmakuBarWrapWrap.addEventListener('mousedown', () => {
@@ -819,7 +849,7 @@ class DPlayer {
             percentage = percentage < 1 ? percentage : 1;
             this.updateBar('volume', percentage, 'width');
             if (!nostorage) {
-                localStorage.setItem('dplayer-volume', percentage);
+                this.user.set('volume', percentage);
             }
             if (!nonotice) {
                 this.notice(`${this.tran('Volume')} ${(percentage * 100).toFixed(0)}%`);
@@ -975,7 +1005,7 @@ class DPlayer {
             });
         }
 
-        this.volume(localStorage.getItem('dplayer-volume') || this.option.volume, true, true);
+        this.volume(this.user.get('volume'), true, true);
     }
 
     switchQuality (index) {

src/DPlayer.scss

@@ -38,7 +38,8 @@
     &.dplayer-no-danmaku {
         .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
             .dplayer-setting-showdan,
-            .dplayer-setting-danmaku {
+            .dplayer-setting-danmaku,
+            .dplayer-setting-danunlimit {
                 display: none;
             }
         }

src/danmaku.js

@@ -12,6 +12,8 @@ class Danmaku {
         this.showing = true;
         this._opacity = this.options.opacity;
         this.events = this.options.events;
+        this.unlimited = this.options.unlimited;
+        this._measure('');
 
         this.load();
     }
@@ -124,7 +126,6 @@ class Danmaku {
                 items[i].style.opacity = percentage;
             }
             this._opacity = percentage;
-            localStorage.setItem('danmaku-opacity', this._opacity);
 
             this.events && this.events.trigger('danmaku_opacity', this._opacity);
         }
@@ -156,7 +157,7 @@ class Danmaku {
         const getTunnel = (ele, type, width) => {
             const tmp = danWidth / danSpeed(width);
 
-            for (let i = 0; this.options.unlimited || i < itemY; i++) {
+            for (let i = 0; this.unlimited || i < itemY; i++) {
                 const item = this.danTunnel[type][i + ''];
                 if (item && item.length) {
                     if (type !== 'right') {
@@ -330,6 +331,10 @@ class Danmaku {
 
         this.events && this.events.trigger('danmaku_show');
     }
+
+    unlimit (boolean) {
+        this.unlimited = boolean;
+    }
 }
 
 module.exports = Danmaku;

src/html.js

@@ -217,17 +217,24 @@ const html = {
                 </div>
             </div>
             <div class="dplayer-setting-item dplayer-setting-showdan">
-                <span class="dplayer-label">${tran('Danmaku')}</span>
+                <span class="dplayer-label">${tran('Show danmaku')}</span>
                 <div class="dplayer-toggle">
                     <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
                     <label for="dplayer-toggle-dan"></label>
                 </div>
             </div>
+            <div class="dplayer-setting-item dplayer-setting-danunlimit">
+                <span class="dplayer-label">${tran('Unlimited danmaku')}</span>
+                <div class="dplayer-toggle">
+                    <input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">
+                    <label for="dplayer-toggle-danunlimit"></label>
+                </div>
+            </div>
             <div class="dplayer-setting-item dplayer-setting-danmaku">
                 <span class="dplayer-label">${tran('Opacity for danmaku')}</span>
                 <div class="dplayer-danmaku-bar-wrap">
                     <div class="dplayer-danmaku-bar">
-                        <div class="dplayer-danmaku-bar-inner" style="width: ${(localStorage.getItem('DPlayer-opacity') || 0.7) * 100}%">
+                        <div class="dplayer-danmaku-bar-inner">
                             <span class="dplayer-thumb"></span>
                         </div>
                     </div>

src/i18n.js

@@ -37,13 +37,14 @@ const tranTxt = {
         'Please input danmaku content!': '要输入弹幕内容啊喂！',
         'Set danmaku color': '设置弹幕颜色',
         'Set danmaku type': '设置弹幕类型',
-        'Danmaku': '弹幕',
+        'Show danmaku': '显示弹幕',
         'This video fails to load': '视频加载失败',
         'Switching to': '正在切换至',
         'Switched to': '已经切换至',
         'quality': '画质',
         'FF to': '快进至',
-        'REW to': '快退至'
+        'REW to': '快退至',
+        'Unlimited danmaku': '海量弹幕'
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',
@@ -61,12 +62,13 @@ const tranTxt = {
         'Please input danmaku content!': '請輸入彈幕内容啊！',
         'Set danmaku color': '設置彈幕顏色',
         'Set danmaku type': '設置彈幕類型',
-        'Danmaku': '彈幕',
+        'Show danmaku': '顯示彈幕',
         'This video fails to load': '視頻加載失敗',
         'Switching to': '正在切換至',
         'Switched to': '已經切換至',
         'quality': '畫質',
         'FF to': '快進至',
-        'REW to': '快退至'
+        'REW to': '快退至',
+        'Unlimited danmaku': '海量彈幕'
     }
 };

src/user.js

@@ -0,0 +1,39 @@
+import utils from './utils';
+
+class User {
+    constructor (player) {
+        this.storageName = {
+            opacity: 'dplayer-danmaku-opacity',
+            volume: 'dplayer-volume',
+            unlimited: 'dplayer-danmaku-unlimited',
+            danmaku: 'dplayer-danmaku-show'
+        };
+        this.default = {
+            opacity: 0.7,
+            volume: player.option.volume || 0.7,
+            unlimited: (player.option.danmaku && player.option.danmaku.unlimited ? 1 : 0) || 0,
+            danmaku: 1
+        };
+        this.data = {};
+
+        this.init();
+    }
+
+    init () {
+        for (const item in this.storageName) {
+            const name = this.storageName[item];
+            this.data[item] = parseFloat(utils.storage.get(name) || this.default[item]);
+        }
+    }
+
+    get (key) {
+        return this.data[key];
+    }
+
+    set (key, value) {
+        this.data[key] = value;
+        utils.storage.set(this.storageName[key], value);
+    }
+}
+
+module.exports = User;

src/utils.js

@@ -39,6 +39,14 @@ module.exports = {
     /**
      * check if user is using mobile or not
      */
-    isMobile: /mobile/i.test(window.navigator.userAgent)
+    isMobile: /mobile/i.test(window.navigator.userAgent),
+
+    storage: {
+        set: (key, value) => {
+            localStorage.setItem(key, value);
+        },
+
+        get: (key) => localStorage.getItem(key)
+    }
 
 };