seek and volume notice; enable hotkey after focus

DIYgod · Aug 18, 2017 · 644e473 · 644e473
1 parent cdb534b
commit 644e473
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 33 deletions.
diff --git a/dist/DPlayer.min.css b/dist/DPlayer.min.css
diff --git a/dist/DPlayer.min.css.map b/dist/DPlayer.min.css.map
diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js
diff --git a/dist/DPlayer.min.js.map b/dist/DPlayer.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dplayer",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Wow, such a lovely HTML5 danmaku video player",
   "main": "dist/DPlayer.min.js",
   "style": "dist/DPlayer.min.css",

diff --git a/src/DPlayer.js b/src/DPlayer.js
@@ -64,6 +64,14 @@ class DPlayer {
 
         this.element.innerHTML = html.main(option, index, this.tran);
 
+        document.addEventListener('click', () => {
+            this.focus = false;
+        }, true);
+
+        this.element.addEventListener('click', () => {
+            this.focus = true;
+        }, true);
+
         if (this.option.danmaku) {
             this.danmaku = new Danmaku({
                 container: this.element.getElementsByClassName('dplayer-danmaku')[0],
@@ -666,34 +674,36 @@ class DPlayer {
          * hot key
          */
         const handleKeyDown = (e) => {
-            const tag = document.activeElement.tagName.toUpperCase();
-            const editable = document.activeElement.getAttribute('contenteditable');
-            if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
-                const event = e || window.event;
-                let percentage;
-                switch (event.keyCode) {
-                case 32:
-                    event.preventDefault();
-                    this.toggle();
-                    break;
-                case 37:
-                    event.preventDefault();
-                    this.seek(this.video.currentTime - 5);
-                    break;
-                case 39:
-                    event.preventDefault();
-                    this.seek(this.video.currentTime + 5);
-                    break;
-                case 38:
-                    event.preventDefault();
-                    percentage = this.video.volume + 0.1;
-                    this.volume(percentage);
-                    break;
-                case 40:
-                    event.preventDefault();
-                    percentage = this.video.volume - 0.1;
-                    this.volume(percentage);
-                    break;
+            if (this.focus) {
+                const tag = document.activeElement.tagName.toUpperCase();
+                const editable = document.activeElement.getAttribute('contenteditable');
+                if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
+                    const event = e || window.event;
+                    let percentage;
+                    switch (event.keyCode) {
+                    case 32:
+                        event.preventDefault();
+                        this.toggle();
+                        break;
+                    case 37:
+                        event.preventDefault();
+                        this.seek(this.video.currentTime - 5);
+                        break;
+                    case 39:
+                        event.preventDefault();
+                        this.seek(this.video.currentTime + 5);
+                        break;
+                    case 38:
+                        event.preventDefault();
+                        percentage = this.video.volume + 0.1;
+                        this.volume(percentage);
+                        break;
+                    case 40:
+                        event.preventDefault();
+                        percentage = this.video.volume - 0.1;
+                        this.volume(percentage);
+                        break;
+                    }
                 }
             }
         };
@@ -790,6 +800,13 @@ class DPlayer {
             time = Math.min(time, this.video.duration);
         }
 
+        if (this.video.currentTime < time) {
+            this.notice(`${this.tran('FF to')} ${utils.secondToTime(time)}`);
+        }
+        else if (this.video.currentTime > time) {
+            this.notice(`${this.tran('REW to')} ${utils.secondToTime(time)}`);
+        }
+
         this.video.currentTime = time;
 
         if (this.danmaku) {
@@ -850,6 +867,7 @@ class DPlayer {
         percentage = percentage > 0 ? percentage : 0;
         percentage = percentage < 1 ? percentage : 1;
         this.updateBar('volume', percentage, 'width');
+        this.notice(`${this.tran('Volume')} ${(percentage * 100).toFixed(0)}%`);
         this.video.volume = percentage;
         if (this.video.muted) {
             this.video.muted = false;

diff --git a/src/DPlayer.scss b/src/DPlayer.scss
@@ -500,6 +500,10 @@
                 &.dplayer-setting-icon {
                     padding-top: 8.5px;
                 }
+
+                &.dplayer-volume-icon {
+                    width: 43px;
+                }
             }
 
             .dplayer-fill {

diff --git a/src/i18n.js b/src/i18n.js
@@ -19,6 +19,9 @@ const tranZH = {
     'Switching to': '正在切换至',
     'Switched to': '已经切换至',
     'quality': '画质',
+    'FF to': '快进至',
+    'REW to': '快退至',
+    'Volume': '音量'
 };
 
 module.exports = function (lang) {