subtitle button; subtitle events

demo/index.html

@@ -129,7 +129,8 @@
                 'quality_start', 'quality_end',
                 'destroy',
                 'resize',
-                'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
+                'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel',
+                'subtitle_show', 'subtitle_hide', 'subtitle_change'
             ];
             var eventsEle = document.getElementById('events');
             for (let i = 0; i < events.length; i++) {

package.json

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

src/DPlayer.js

@@ -762,6 +762,29 @@ class DPlayer {
             });
         }
 
+        /**
+         * Toggle subtitle
+         */
+        if (this.options.subtitle) {
+            const subtitleIcon = this.container.getElementsByClassName('dplayer-subtitle-icon')[0];
+            const subtitleIn = subtitleIcon.getElementsByClassName('dplayer-icon-content')[0];
+
+            this.events.on('subtitle_show', () => {
+                subtitleIcon.dataset.balloon = this.tran('Hide subtitle');
+                subtitleIn.style.opacity = '';
+                this.user.set('subtitle', 1);
+            });
+            this.events.on('subtitle_hide', () => {
+                subtitleIcon.dataset.balloon = this.tran('Show subtitle');
+                subtitleIn.style.opacity = '0.4';
+                this.user.set('subtitle', 0);
+            });
+
+            subtitleIcon.addEventListener('click', () => {
+                this.subtitle.toggle();
+            });
+        }
+
         this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
 
         index++;
@@ -1001,7 +1024,10 @@ class DPlayer {
         this.volume(this.user.get('volume'), true);
 
         if (this.options.subtitle) {
-            this.subtitle = new Subtitle(this.container.getElementsByClassName('dplayer-subtitle')[0], this.video, this.options.subtitle);
+            this.subtitle = new Subtitle(this.container.getElementsByClassName('dplayer-subtitle')[0], this.video, this.options.subtitle, this.events);
+            if (!this.user.get('subtitle')) {
+                this.subtitle.hide();
+            }
         }
     }
 

src/DPlayer.scss

@@ -256,6 +256,10 @@
         color: #fff;
         text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
         font-size: 20px;
+
+        &.dplayer-subtitle-hide {
+            display: none;
+        }
     }
 
     .dplayer-bezel {
@@ -607,6 +611,11 @@
                 }
             }
 
+            .dplayer-subtitle-btn {
+                display: inline-block;
+                height: 100%;
+            }
+
             .dplayer-setting {
                 display: inline-block;
                 height: 100%;

src/events.js

@@ -18,7 +18,8 @@ class Events {
             'quality_start', 'quality_end',
             'destroy',
             'resize',
-            'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel'
+            'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel',
+            'subtitle_show', 'subtitle_hide', 'subtitle_change'
         ];
     }
 

src/html.js

@@ -135,6 +135,13 @@ const html = {
                         </button>
                     </div>
                 </div>
+                ${options.subtitle ? `
+                <div class="dplayer-subtitle-btn">
+                    <button class="dplayer-icon dplayer-subtitle-icon" data-balloon="${tran('Hide subtitle')}" data-balloon-pos="up">
+                        <span class="dplayer-icon-content">${icons.get('subtitle')}</span>
+                    </button>
+                </div>
+                ` : ``}
                 <div class="dplayer-setting">
                     <button class="dplayer-icon dplayer-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
                         <span class="dplayer-icon-content">${icons.get('setting')}</span>

src/i18n.js

@@ -51,7 +51,9 @@ const tranTxt = {
         'Web full screen': '页面全屏',
         'Send': '发送',
         'Screenshot': '截图',
-        's': '秒'
+        's': '秒',
+        'Show subtitle': '显示字幕',
+        'Hide subtitle': '隐藏字幕'
     },
     "zh-tw" : {
         'Danmaku is loading': '彈幕加載中',
@@ -83,6 +85,8 @@ const tranTxt = {
         'Web full screen': '頁面全屏',
         'Send': '發送',
         'Screenshot': '截圖',
-        's': '秒'
+        's': '秒',
+        'Show subtitle': '顯示字幕',
+        'Hide subtitle': '隱藏字幕'
     }
 };

src/options.js

@@ -81,6 +81,10 @@ module.exports = (options) => {
             camera: [
                 '0 0 32 32',
                 'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
+            ],
+            subtitle: [
+                '0 0 32 32',
+                'M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z'
             ]
         },
         iconsColor: '#ffffff',

src/subtitle.js

@@ -1,8 +1,9 @@
 class Subtitle {
-    constructor (container, video, options) {
+    constructor (container, video, options, events) {
         this.container = container;
         this.video = video;
         this.options = options;
+        this.events = events;
 
         this.init();
     }
@@ -26,9 +27,29 @@ class Subtitle {
                 else {
                     this.container.innerHTML = '';
                 }
+                this.events.trigger('subtitle_change');
             };
         }
     }
+
+    show () {
+        this.container.classList.remove('dplayer-subtitle-hide');
+        this.events.trigger('subtitle_show');
+    }
+
+    hide () {
+        this.container.classList.add('dplayer-subtitle-hide');
+        this.events.trigger('subtitle_hide');
+    }
+
+    toggle () {
+        if (this.container.classList.contains('dplayer-subtitle-hide')) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
 }
 
 module.exports = Subtitle;

src/user.js

@@ -6,13 +6,15 @@ class User {
             opacity: 'dplayer-danmaku-opacity',
             volume: 'dplayer-volume',
             unlimited: 'dplayer-danmaku-unlimited',
-            danmaku: 'dplayer-danmaku-show'
+            danmaku: 'dplayer-danmaku-show',
+            subtitle: 'dplayer-subtitle-show'
         };
         this.default = {
             opacity: 0.7,
             volume: player.options.volume || 0.7,
             unlimited: (player.options.danmaku && player.options.danmaku.unlimited ? 1 : 0) || 0,
-            danmaku: 1
+            danmaku: 1,
+            subtitle: 1
         };
         this.data = {};