add mask

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();
+    });
   }
 }