add theme

src/events.js

@@ -6,10 +6,10 @@ export default class Events {
     this.init();
   }
 
-  proxy(target, name, callback) {
-    target.addEventListener(name, callback);
+  proxy(target, name, callback, option = {}) {
+    target.addEventListener(name, callback, option);
     this.destroyEvents.push(() => {
-      target.removeEventListener(name, callback);
+      target.removeEventListener(name, callback, option);
     });
   }
 

src/index.js

@@ -50,6 +50,7 @@ class Artplayer extends Emitter {
       layers: [],
       contextmenu: [],
       loading: '',
+      theme: '#1aafff',
       lang: navigator.language.toLowerCase()
     };
   }
@@ -101,7 +102,6 @@ class Artplayer extends Emitter {
     this.events.destroy();
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
-    return this;
   }
 }
 

src/layers.js

@@ -4,6 +4,16 @@ export default class Layers {
     this.art = art;
     this.add = this.add.bind(this);
     this.art.option.layers.forEach(this.add);
+    this.init();
+  }
+
+  init() {
+    const { refs, events: { proxy } } = this.art;
+    proxy(refs.$layers, 'click', event => {
+      if (event.path[0] === refs.$layers) {
+        refs.$video.pause();
+      }
+    });
   }
 
   add(option, callback) {

src/mask.js

@@ -7,7 +7,19 @@ export default class Mask {
   }
 
   init() {
-    this.art.refs.$mask.appendChild(Icons.play);
+    const {
+      option,
+      refs,
+      events: { proxy }
+    } = this.art;
+
+    Icons.play.style.backgroundColor = option.theme;
+    refs.$mask.appendChild(Icons.play);
+
+    proxy(refs.$mask, 'click', () => {
+      refs.$video.play();
+      this.hide();
+    });
   }
 
   show() {

src/style/index.scss

@@ -51,13 +51,13 @@
         cursor: pointer;
 
         .art-icon-play {
+            opacity: .8;
             display: flex;
             align-items: center;
             justify-content: center;
             width: 50px;
             height: 50px;
             border-radius: 50px;
-            background: #1aafff;
         }
     }
 

src/utils/verification.js

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