typofix

src/contextmenu.js

@@ -18,11 +18,12 @@ export default class Contextmenu {
         click: (art, event) => {
           const { target } = event;
           const rate = target.innerText;
-          if (rate) {
+          if (target.tagName === 'SPAN' && rate) {
             player.playbackRate(Number(rate));
             const sublings = Array.from(target.parentElement.querySelectorAll('span')).filter(item => item !== target);
             sublings.forEach(item => item.classList.remove('current'));
             target.classList.add('current');
+            this.hide();
           }
         }
       },
@@ -33,11 +34,12 @@ export default class Contextmenu {
         click: (art, event) => {
           const { target } = event;
           const ratio = target.innerText;
-          if (ratio) {
+          if (target.tagName === 'SPAN' && ratio) {
             player.aspectRatio(ratio.split(':'));
             const sublings = Array.from(target.parentElement.querySelectorAll('span')).filter(item => item !== target);
             sublings.forEach(item => item.classList.remove('current'));
             target.classList.add('current');
+            this.hide();
           }
         }
       },
@@ -47,6 +49,7 @@ export default class Contextmenu {
         html: i18n.get('Video info'),
         click: () => {
           this.art.info.show();
+          this.hide();
         }
       },
       {
@@ -98,7 +101,6 @@ export default class Contextmenu {
           proxy($menu, 'click', event => {
             event.preventDefault();
             item.click(this.art, event);
-            this.hide();
             this.art.emit('contextmenu:click', $menu);
           });
         }

src/controls/index.js

@@ -16,7 +16,7 @@ export default class Controls {
   constructor(art) {
     this.art = art;
     this.$map = {};
-    this.art.on('player:firstCanplay', () => {
+    this.art.on('firstCanplay', () => {
       this.init();
       this.mount();
     });

src/controls/progress.js

@@ -15,12 +15,7 @@ export default class Progress {
   }
 
   init() {
-    const {
-      option: { highlight, theme },
-      events: { proxy },
-      refs: { $video },
-      player
-    } = this.art;
+    const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = this.art;
 
     append(
       this.option.$control,

src/controls/thumbnails.js

@@ -9,14 +9,12 @@ export default class Thumbnails {
 
   apply(art) {
     this.art = art;
+    errorHandle(this.art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
     this.init();
   }
 
   init() {
-    const {
-      refs: { $progress },
-      events: { proxy }
-    } = this.art;
+    const { refs: { $progress }, events: { proxy } } = this.art;
 
     proxy($progress, 'mousemove', event => {
       if (!this.loading) {
@@ -55,7 +53,6 @@ export default class Thumbnails {
 
   showThumbnails(event) {
     const { refs: { $progress }, controls } = this.art;
-    errorHandle(controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
     const { width: posWidth } = controls.progress.getPosFromEvent(event);
     const { url, height, width, number, column } = this.art.option.thumbnails;
     const perWidth = $progress.clientWidth / number;

src/hotkey.js

@@ -7,11 +7,7 @@ export default class Hotkey {
   }
 
   init() {
-    const {
-      player,
-      refs: { $player },
-      events: { proxy }
-    } = this.art;
+    const { player, refs: { $player }, events: { proxy } } = this.art;
 
     proxy(document, 'click', event => {
       this.art.isFocus = event.path.indexOf($player) > -1;

src/mask.js

@@ -8,11 +8,7 @@ export default class Mask {
   }
 
   init() {
-    const {
-      player,
-      refs,
-      events: { proxy }
-    } = this.art;
+    const { player, refs, events: { proxy } } = this.art;
 
     append(refs.$mask, icons.playBig);
 

src/player.js

@@ -53,7 +53,7 @@ export default class Player {
     this.art.on('video:canplay', () => {
       if (!this.firstCanplay) {
         this.firstCanplay = true;
-        this.art.emit('player:firstCanplay');
+        this.art.emit('firstCanplay');
       }
 
       this.art.controls.show();