add mask

src/controls/index.js

@@ -1,5 +1,15 @@
 export default class Controls {
-  constructor({ option }) {
-    //
+  constructor(art) {
+    this.art = art;
+  }
+
+  show() {
+    const { $wrap } = this.art.refs;
+    $wrap.classList.add('controls-show');
+  }
+
+  hide() {
+    const { $wrap } = this.art.refs;
+    $wrap.classList.remove('controls-show');
   }
 }

src/icons/index.js

@@ -1,14 +1,16 @@
 import loading from './loading.svg';
+import play from './play.svg';
 
 const Icons = {
-  loading: loading
+  loading,
+  play
 };
 
 function creatDomFromSvg(map) {
   const result = {};
   Object.keys(map).forEach(name => {
     const tmp = document.createElement('div');
-    tmp.innerHTML = map[name];
+    tmp.innerHTML = `<i class="art-icon art-icon-${name}">${map[name]}</i>`;
     [result[name]] = tmp.childNodes;
   });
   return result;

src/icons/play.svg

@@ -0,0 +1,3 @@
+<svg id="plyr-play" width="16px" height="18px">
+    <path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
+</svg>

src/index.js

@@ -16,6 +16,7 @@ import Hotkey from './hotkey';
 import Layers from './layers';
 import Loading from './loading';
 import Notice from './notice';
+import Mask from './mask';
 
 let id = 0;
 export const instances = [];
@@ -89,15 +90,18 @@ class Artplayer extends Emitter {
     this.hotkey = new Hotkey(this);
     this.loading = new Loading(this);
     this.notice = new Notice(this);
+    this.mask = new Mask(this);
 
     this.id = id++;
     instances.push(this);
+    return this;
   }
 
   destroy() {
     this.events.destroy();
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
+    return this;
   }
 }
 

src/mask.js

@@ -0,0 +1,20 @@
+import Icons from './icons';
+
+export default class Mask {
+  constructor(art) {
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    this.art.refs.$mask.appendChild(Icons.play);
+  }
+
+  show() {
+    this.art.refs.$mask.style.display = 'flex';
+  }
+
+  hide() {
+    this.art.refs.$mask.style.display = 'none';
+  }
+}

src/player.js

@@ -22,10 +22,49 @@ export default class Player {
     const { proxy } = this.art.events;
     const { $video } = this.art.refs;
     const { events } = config.video;
+
     events.forEach(eventName => {
       proxy($video, eventName, event => {
         this.art.emit(`video:${event.type}`, event);
       });
     });
+
+    this.art.on('video:loadstart', () => {
+      this.art.loading.show();
+    });
+
+    this.art.on('video:loadeddata', () => {
+      this.art.loading.hide();
+    });
+
+    this.art.on('video:canplay', () => {
+      this.art.controls.show();
+      this.art.mask.show();
+      if (this.art.option.autoplay) {
+        const promise = $video.play();
+
+        // TODO: chrome autoplay policy changes
+        if (promise !== undefined) {
+          promise.then().catch(err => {
+            console.warn(err);
+          });
+        }
+      }
+    });
+
+    this.art.on('video:playing', () => {
+      this.art.controls.hide();
+      this.art.mask.hide();
+    });
+
+    this.art.on('video:pause', () => {
+      this.art.controls.show();
+      this.art.mask.show();
+    });
+
+    this.art.on('video:ended', () => {
+      this.art.controls.show();
+      this.art.mask.show();
+    });
   }
 }

src/style/index.scss

@@ -8,6 +8,12 @@
     overflow: hidden;
     user-select: none;
 
+    .art-icon {
+        svg {
+            fill: #fff;
+        }
+    }
+
     .artplayer-video {
         position: absolute;
         z-index: 1;
@@ -30,6 +36,31 @@
         height: 100%;
     }
 
+    .artplayer-mask {
+        display: none;
+        position: absolute;
+        z-index: 3;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        .art-icon-play {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 50px;
+            border-radius: 50px;
+            background: #1aafff;
+        }
+    }
+
     .artplayer-contextmenu {
         position: absolute;
         z-index: 7;
@@ -63,7 +94,7 @@
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
     }
 
-    .controls-show, &:hover {
+    &.controls-show, &:hover {
         .artplayer-controls {
             opacity: 1;
             visibility: visible;

src/template.js

@@ -10,6 +10,7 @@ export default class Template {
         <div class="artplayer-wrap">
           <video class="artplayer-video" webkit-playsinline playsinline></video>
           <div class="artplayer-layers"></div>
+          <div class="artplayer-mask"></div>
           <div class="artplayer-controls"></div>
           <div class="artplayer-loading"></div>
           <div class="artplayer-notice"></div>
@@ -21,5 +22,6 @@ export default class Template {
     refs.$layers = refs.$container.querySelector('.artplayer-layers');
     refs.$loading = refs.$container.querySelector('.artplayer-loading');
     refs.$notice = refs.$container.querySelector('.artplayer-notice');
+    refs.$mask = refs.$container.querySelector('.artplayer-mask');
   }
 }