typofix

src/contextmenu/index.js

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

src/controls/progress.js

@@ -36,10 +36,7 @@ export default class Progress {
     this.set('loaded', this.getLoaded());
     highlight.forEach(item => {
       const left = Number(item.time) / $video.duration;
-      append(this.$highlight, `
-        <span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
-      `
-      );
+      append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>`);
     });
 
     this.art.on('video:progress', () => {

src/controls/thumbnails.js

@@ -43,7 +43,6 @@ export default class Thumbnails {
       }
 
       proxy(image, 'load', () => resolve(image));
-
       proxy(image, 'error', () => reject(image));
     });
   }

src/controls/time.js

@@ -7,23 +7,24 @@ export default class Time {
 
   apply(art, $control) {
     this.art = art;
+    this.$control = $control;
     $control.innerHTML = '00:00 / 00:00';
 
     this.art.on('video:canplay', () => {
-      $control.innerHTML = this.getTime();
+      this.getTime();
     });
 
     this.art.on('video:timeupdate', () => {
-      $control.innerHTML = this.getTime();
+      this.getTime();
     });
 
     this.art.on('video:seeking', () => {
-      $control.innerHTML = this.getTime();
+      this.getTime();
     });
   }
 
   getTime() {
     const { player } = this.art;
-    return `${secondToTime(player.currentTime())} / ${secondToTime(player.duration())}`;
+    this.$control.innerHTML = `${secondToTime(player.currentTime())} / ${secondToTime(player.duration())}`;
   }
 }

src/hotkey.js

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

src/i18n.js

@@ -19,7 +19,8 @@ let i18nMap = {
     'Aspect ratio': '画面比例',
     'Default': '默认',
     'Normal': '正常',
-    'Switch': '切换',
+    'Switch video': '切换',
+    'Switch subtitle': '切换字幕',
     'Common': '常规',
     'Hide setting': '隐藏设置',
     'Show setting': '显示设置'
@@ -44,7 +45,8 @@ let i18nMap = {
     'Aspect ratio': '畫面比例',
     'Default': '默認',
     'Normal': '正常',
-    'Switch': '切換',
+    'Switch video': '切換',
+    'Switch subtitle': '切換字幕',
     'Common': '常規',
     'Hide setting': '隱藏設置',
     'Show setting': '顯示設置'

src/index.js

@@ -66,6 +66,7 @@ class Artplayer extends Emitter {
       contextmenu: [],
       quality: [],
       loading: '',
+      play: '',
       theme: '#f00',
       setting: false,
       hotkey: true,

src/layers.js

@@ -5,30 +5,19 @@ export default class Layers {
   constructor(art) {
     this.art = art;
     this.add = this.add.bind(this);
-    this.art.option.layers.filter(item => item.disable === false).forEach(this.add);
-    this.init();
-  }
-
-  init() {
-    const { refs, player, events: { proxy } } = this.art;
-    proxy(refs.$layers, 'click', event => {
-      if (event.path[0] === refs.$layers) {
-        player.pause();
-      }
-    });
+    this.art.option.layers.filter(item => !item.disable).forEach(this.add);
   }
 
   add(option, callback) {
-    const { refs } = this.art;
+    const { refs: { $layers } } = this.art;
     id++;
-
     const $layer = document.createElement('div');
     $layer.setAttribute('data-art-layer-id', id);
     $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
     setStyle($layer, 'z-index', option.index || id);
     append($layer, option.html);
     setStyles($layer, option.style || {});
-    refs.$layers.appendChild($layer);
+    $layers.appendChild($layer);
     this.art.emit('layers:add', $layer);
     callback && callback($layer);
   }

src/mask.js

@@ -8,14 +8,8 @@ export default class Mask {
   }
 
   init() {
-    const { player, refs, events: { proxy } } = this.art;
-
-    append(refs.$mask, icons.playBig);
-
-    proxy(refs.$mask, 'click', () => {
-      player.play();
-      this.hide();
-    });
+    const { option, refs: { $mask } } = this.art;
+    append($mask, option.play || icons.playBig);
   }
 
   show() {

src/player.js

@@ -12,21 +12,32 @@ export default class Player {
   }
 
   init() {
-    const { option, refs: { $video } } = this.art;
+    const { option, refs: { $player, $video }, events: { proxy, hover } } = this.art;
     Object.keys(option.moreVideoAttr).forEach(key => {
-      const value = option.moreVideoAttr[key];
-      $video[key] = value;
+      $video[key] = option.moreVideoAttr[key];
     });
     $video.volume = clamp(option.volume, 0, 1);
     $video.poster = option.poster;
     $video.autoplay = option.autoplay;
 
+    hover($player, () => {
+      $player.classList.add('artplayer-hover');
+      this.art.emit('hoverenter');
+    }, () => {
+      $player.classList.remove('artplayer-hover');
+      this.art.emit('hoverleave');
+    });
+
+    proxy($video, 'click', () => {
+      this.toggle();
+    });
+
     // TODO
     $video.src = option.url;
   }
 
   eventBind() {
-    const { option, events: { proxy, hover }, refs: { $player, $video }, i18n, notice } = this.art;
+    const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = this.art;
 
     config.video.events.forEach(eventName => {
       proxy($video, eventName, event => {
@@ -105,14 +116,6 @@ export default class Player {
         });
       }
     });
-
-    hover($player, () => {
-      $player.classList.add('artplayer-hover');
-      this.art.emit('hoverenter');
-    }, () => {
-      $player.classList.remove('artplayer-hover');
-      this.art.emit('hoverleave');
-    });
   }
 
   play() {
@@ -186,7 +189,7 @@ export default class Player {
       this.play();
     }
     this.resetStyle();
-    notice.show(`${i18n.get('Switch')}: ${name}`);
+    notice.show(`${i18n.get('Switch video')}: ${name}`);
     this.art.emit('switch', url);
   }
 

src/scheme/index.js

@@ -59,7 +59,8 @@ export default {
       url: 'string'
     }
   },
-  loading: 'string',
+  loading: validElement,
+  play: validElement,
   theme: 'string',
   hotkey: 'boolean',
   pip: 'boolean',

src/style/bottom.scss

@@ -133,6 +133,7 @@
                 float: left;
                 font-size: 12px;
                 height: 36px;
+                line-height: 36px;
                 cursor: pointer;
                 .art-icon {
                     display: flex;
@@ -195,14 +196,12 @@
             }
     
             .art-control-time {
-                line-height: 36px;
                 padding: 0 10px;
             }
 
             .art-control-quality {
                 position: relative;
                 z-index: 30;
-                line-height: 36px;
                 padding: 0 10px;
                 .art-qualitys {
                     display: none;

src/style/danmu.scss

@@ -8,5 +8,6 @@
         bottom: 0;
         width: 100%;
         height: 100%;
+        pointer-events: none;
     }
 }

src/style/layers.scss

@@ -8,9 +8,11 @@
         bottom: 0;
         width: 100%;
         height: 100%;
+        pointer-events: none;
     
         .art-layer {
             position: absolute;
+            pointer-events: all;
         }
     }
 }

src/style/mask.scss

@@ -9,7 +9,7 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        cursor: pointer;
+        pointer-events: none;
     
         .art-icon-playBig {
             position: absolute;

src/style/video.scss

@@ -10,5 +10,6 @@
         height: 100%;
         background-color: #000;
         outline: 0;
+        cursor: pointer;
     }
 }

src/subtitle.js

@@ -12,17 +12,11 @@ export default class Subtitle {
   }
 
   init() {
-    const {
-      events: { proxy },
-      option: { subtitle },
-      refs: { $video, $subtitle }
-    } = this.art;
-
+    const { events: { proxy }, option: { subtitle }, refs: { $video, $subtitle } } = this.art;
     setStyles($subtitle, subtitle.style || {});
     const $track = document.createElement('track');
     $track.default = true;
     $track.kind = 'metadata';
-
     this.load(subtitle.url).then(data => {
       $track.src = data;
       $video.appendChild($track);
@@ -47,6 +41,7 @@ export default class Subtitle {
   }
 
   load(url) {
+    const { notice } = this.art;
     let type;
     return fetch(url)
       .then(response => {
@@ -60,6 +55,7 @@ export default class Subtitle {
         return url;
       })
       .catch(err => {
+        notice.show(err);
         throw err;
       });
   }
@@ -105,13 +101,14 @@ export default class Subtitle {
     this.art.emit('subtitle:hide', $subtitle);
   }
 
-  switch(url) {
-    const { $track } = this.art.refs;
+  switch(url, name = '') {
+    const { $track, i18n, notice } = this.art.refs;
     this.checkExt(url);
     errorHandle($track, 'You need to initialize the subtitle option first.');
     this.load(url).then(data => {
       if (url !== data) {
         $track.src = data;
+        notice.show(`${i18n.get('Switch subtitle')}: ${name}`);
         this.art.emit('subtitle:switch', url);
       }
     });

src/template.js

@@ -1,41 +1,36 @@
 export default class Template {
   constructor(art) {
-    this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { refs } = this.art;
+    const { refs } = art;
     refs.$container.innerHTML = `
-        <div class="artplayer-video-player">
-          <video class="artplayer-video"></video>
-          <div class="artplayer-subtitle"></div>
-          <div class="artplayer-danmu"></div>
-          <div class="artplayer-layers"></div>
-          <div class="artplayer-mask"></div>
-          <div class="artplayer-bottom">
-            <div class="artplayer-progress"></div>
-            <div class="artplayer-controls">
-              <div class="artplayer-controls-left"></div>
-              <div class="artplayer-controls-right"></div>
-            </div>
-          </div>
-          <div class="artplayer-loading"></div>
-          <div class="artplayer-notice">
-            <div class="artplayer-notice-inner"></div>
-          </div>
-          <div class="artplayer-setting">
-            <div class="artplayer-setting-inner">
-              <div class="artplayer-setting-body"></div>
-              <div class="artplayer-setting-close">×</div>
-            </div>
-          </div>
-          <div class="artplayer-info">
-            <div class="artplayer-info-panel"></div>
-            <div class="artplayer-info-close">[x]</div>
+      <div class="artplayer-video-player">
+        <video class="artplayer-video"></video>
+        <div class="artplayer-subtitle"></div>
+        <div class="artplayer-danmu"></div>
+        <div class="artplayer-layers"></div>
+        <div class="artplayer-mask"></div>
+        <div class="artplayer-bottom">
+          <div class="artplayer-progress"></div>
+          <div class="artplayer-controls">
+            <div class="artplayer-controls-left"></div>
+            <div class="artplayer-controls-right"></div>
           </div>
         </div>
-      `;
+        <div class="artplayer-loading"></div>
+        <div class="artplayer-notice">
+          <div class="artplayer-notice-inner"></div>
+        </div>
+        <div class="artplayer-setting">
+          <div class="artplayer-setting-inner">
+            <div class="artplayer-setting-body"></div>
+            <div class="artplayer-setting-close">×</div>
+          </div>
+        </div>
+        <div class="artplayer-info">
+          <div class="artplayer-info-panel"></div>
+          <div class="artplayer-info-close">[x]</div>
+        </div>
+      </div>
+    `;
     refs.$player = refs.$container.querySelector('.artplayer-video-player');
     refs.$video = refs.$container.querySelector('.artplayer-video');
     refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');