add more control

src/controls/playAndPause.js

@@ -1,6 +1,36 @@
+import { append } from '../utils';
+import icons from '../icons';
+
 export default class PlayAndPause {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.init();
+  }
+
+  init() {
+    const { events: { proxy }, player } = this.art;
+
+    this.$play = append(this.option.ref, icons.play);
+    this.$pause = append(this.option.ref, icons.pause);
+    this.$pause.style.display = 'none';
+
+    proxy(this.$play, 'click', () => {
+      player.play();
+    });
+
+    proxy(this.$pause, 'click', () => {
+      player.pause();
+    });
+
+    this.art.on('video:playing', () => {
+      this.$play.style.display = 'none';
+      this.$pause.style.display = 'inline-block';
+    });
+
+    this.art.on('video:pause', () => {
+      this.$play.style.display = 'inline-block';
+      this.$pause.style.display = 'none';
+    });
   }
 }

src/controls/time.js

@@ -1,6 +1,30 @@
+import { secondToTime } from '../utils';
+
 export default class Time {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.init();
+  }
+
+  init() {
+    this.option.ref.innerHTML = '00:00 / 00:00';
+
+    this.art.on('video:canplay', () => {
+      this.option.ref.innerHTML = this.getTime();
+    });
+
+    this.art.on('video:timeupdate', () => {
+      this.option.ref.innerHTML = this.getTime();
+    });
+
+    this.art.on('video:seeking', () => {
+      this.option.ref.innerHTML = this.getTime();
+    });
+  }
+
+  getTime() {
+    const { player } = this.art;
+    return `${secondToTime(player.currentTime())} / ${secondToTime(player.duration())}`;
   }
 }