add hotkey

src/contextmenu.js

@@ -37,6 +37,7 @@ export default class Contextmenu {
 
     proxy(refs.$container, 'contextmenu', event => {
       event.preventDefault();
+      this.art.focus = true;
       if (!refs.$contextmenu) {
         this.creatMenu();
       }

src/events.js

@@ -3,7 +3,6 @@ export default class Events {
     this.art = art;
     this.destroyEvents = [];
     this.proxy = this.proxy.bind(this);
-    this.init();
   }
 
   proxy(target, name, callback, option = {}) {
@@ -13,10 +12,6 @@ export default class Events {
     });
   }
 
-  init() {
-    console.log('Events init');
-  }
-
   destroy() {
     this.destroyEvents.forEach(event => event());
   }

src/hotkey.js

@@ -1,5 +1,67 @@
 export default class Hotkey {
   constructor(art) {
     this.art = art;
+    if (this.art.option.hotkey) {
+      this.init();
+    }
+  }
+
+  init() {
+    const {
+      player,
+      notice,
+      i18n,
+      refs: { $container },
+      events: { proxy }
+    } = this.art;
+
+    proxy(document, 'click', event => {
+      this.art.focus = event.path.indexOf($container) > -1;
+    });
+
+    proxy(window, 'keydown', event => {
+      if (this.art.focus) {
+        const tag = document.activeElement.tagName.toUpperCase();
+        const editable = document.activeElement.getAttribute('contenteditable');
+        if (
+          tag !== 'INPUT' &&
+          tag !== 'TEXTAREA' &&
+          editable !== '' &&
+          editable !== 'true'
+        ) {
+          let percentage;
+          switch (event.keyCode) {
+            case 39:
+              event.preventDefault();
+              player.seek(player.currentTime + 10);
+              notice.show(i18n.get('Fast forward 10 seconds'), true);
+              break;
+            case 37:
+              event.preventDefault();
+              player.seek(player.currentTime - 10);
+              notice.show(i18n.get('Rewind 10 seconds'), true);
+              break;
+            case 38:
+              event.preventDefault();
+              percentage = player.volume() + 0.1;
+              player.volume(percentage);
+              notice.show(i18n.get('10% increase in volume'), true);
+              break;
+            case 40:
+              event.preventDefault();
+              percentage = player.volume() - 0.1;
+              player.volume(percentage);
+              notice.show(i18n.get('10% reduction in volume'), true);
+              break;
+            case 32:
+              event.preventDefault();
+              player.toggle();
+              break;
+            default:
+              break;
+          }
+        }
+      }
+    });
   }
 }

src/i18n.js

@@ -2,12 +2,22 @@ const i18nMap = {
   'zh-cn': {
     'About author': '关于作者',
     'Video info': '视频统计信息',
-    'Close': '关闭'
+    'Close': '关闭',
+    'Video load failed': '视频加载失败',
+    'Fast forward 10 seconds': '快进10秒',
+    'Rewind 10 seconds': '快退10秒',
+    '10% increase in volume': '音量增加10%',
+    '10% reduction in volume': '音量减少10%'
   },
   'zh-tw': {
     'About author': '關於作者',
     'Video info': '影片統計訊息',
-    'Close': '關閉'
+    'Close': '關閉',
+    'Video load failed': '影片載入失敗',
+    'Fast forward 10 seconds': '快進10秒',
+    'Rewind 10 seconds': '快退10秒',
+    '10% increase in volume': '音量增加10%',
+    '10% reduction in volume': '音量減少10%'
   }
 };
 

src/index.js

@@ -8,7 +8,7 @@ import Player from './player';
 import Mse from './mse';
 import Controls from './controls';
 import Contextmenu from './contextmenu';
-import Danmaku from './danmaku';
+import Danmu from './danmu';
 import Info from './info';
 import Subtitle from './subtitle';
 import Events from './events';
@@ -51,6 +51,7 @@ class Artplayer extends Emitter {
       contextmenu: [],
       loading: '',
       theme: '#1aafff',
+      hotkey: true,
       lang: navigator.language.toLowerCase()
     };
   }
@@ -73,6 +74,7 @@ class Artplayer extends Emitter {
   }
 
   init() {
+    this.focus = false;
     this.refs = {
       $container: this.option.container
     };
@@ -85,12 +87,12 @@ class Artplayer extends Emitter {
     this.layers = new Layers(this);
     this.controls = new Controls(this);
     this.contextmenu = new Contextmenu(this);
-    this.danmaku = new Danmaku(this);
+    this.danmu = new Danmu(this);
     this.subtitle = new Subtitle(this);
     this.info = new Info(this);
-    this.hotkey = new Hotkey(this);
     this.loading = new Loading(this);
     this.notice = new Notice(this);
+    this.hotkey = new Hotkey(this);
     this.mask = new Mask(this);
 
     this.id = id++;

src/mse.js

@@ -1,4 +1,4 @@
-import { errorHandle, request } from './utils';
+import { errorHandle, request, getExt } from './utils';
 import config from './config';
 
 export default class Mse {
@@ -15,11 +15,7 @@ export default class Mse {
   setMimeCodec() {
     const { option } = this.art;
     if (!option.type) {
-      const type = option.url
-        .trim()
-        .toLowerCase()
-        .split('.')
-        .pop();
+      const type = getExt(option.url);
       errorHandle(
         Object.keys(config.mimeCodec).includes(type),
         `Can't find video's type '${type}' from '${option.url}'`
@@ -95,7 +91,7 @@ export default class Mse {
   }
 
   fetchUrl() {
-    const { option, notice } = this.art;
+    const { option, notice, i18n, loading } = this.art;
     request(option.url)
       .then(response => {
         this.sourceBuffer.appendBuffer(response);
@@ -104,7 +100,9 @@ export default class Mse {
         if (this.repeat++ < this.maxRepeat) {
           this.fetchUrl();
         } else {
-          notice.show(err);
+          notice.show(i18n.get('Video load failed'));
+          console.warn(err);
+          loading.hide();
         }
       });
   }

src/notice.js

@@ -1,12 +1,19 @@
 export default class Notice {
   constructor(art) {
     this.art = art;
+    this.timer = null;
   }
 
-  show(msg) {
+  show(msg, autoHide) {
     const { refs: { $notice } } = this.art;
     $notice.style.display = 'block';
     $notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
+    if (autoHide) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.hide();
+      }, 1000);
+    }
   }
 
   hide() {

src/style/index.scss

@@ -126,6 +126,6 @@
         line-height: 30px;
         padding: 0 10px;
         color: #fff;
-        background: rgba(0, 0, 0, 0.5);
+        background: rgba(0, 0, 0, 0.6);
     }
 }

src/utils/index.js

@@ -16,4 +16,12 @@ export function request(url) {
     .catch(err => {
       throw new ArtPlayerError(err.message);
     });
-}
+}
+
+export function getExt(url) {
+  return url
+    .trim()
+    .toLowerCase()
+    .split('.')
+    .pop();
+}

src/utils/verification.js

@@ -75,4 +75,9 @@ export default function verification(option) {
     typeof option.theme === 'string',
     `'theme' option require 'string' type, but got '${typeof option.theme}'.`
   );
+
+  errorHandle(
+    typeof option.hotkey === 'boolean',
+    `'hotkey' option require 'boolean' type, but got '${typeof option.hotkey}'.`
+  );
 }