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

src/icons/index.js

@@ -1,9 +1,13 @@
 import loading from './loading.svg';
+import playBig from './play-big.svg';
 import play from './play.svg';
+import pause from './pause.svg';
 
 const icons = {
   loading,
-  play
+  playBig,
+  play,
+  pause
 };
 
 function creatDomFromSvg(map) {

src/icons/pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+    <path d="M7 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zM15 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2z"></path>
+</svg>

src/icons/play-big.svg

@@ -0,0 +1,6 @@
+<svg style="width: 60px; height: 60px; filter: drop-shadow(0px 1px 1px black);" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="info"/>
+    <g id="icons">
+        <path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16   C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z" id="video"/>
+    </g>
+</svg>

src/icons/play.svg

@@ -1,3 +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>
+<svg xmlns="http://www.w3.org/2000/svg" style="width: 36px; height: 22px" viewBox="0 0 22 22">
+  <path d="M17.982 9.275L8.06 3.27A2.013 2.013 0 0 0 5 4.994v12.011a2.017 2.017 0 0 0 3.06 1.725l9.922-6.005a2.017 2.017 0 0 0 0-3.45z"></path>
+</svg>

src/mask.js

@@ -10,14 +10,11 @@ export default class Mask {
   init() {
     const {
       player,
-      option,
       refs,
       events: { proxy }
     } = this.art;
 
-    const playClone = icons.play.cloneNode(true);
-    playClone.style.backgroundColor = option.theme;
-    append(refs.$mask, playClone);
+    append(refs.$mask, icons.playBig);
 
     proxy(refs.$mask, 'click', () => {
       player.play();
@@ -27,7 +24,7 @@ export default class Mask {
 
   show() {
     const { $mask } = this.art.refs;
-    $mask.style.display = 'flex';
+    $mask.style.display = 'block';
     this.art.emit('mask:show', $mask);
   }
 

src/player.js

@@ -136,11 +136,11 @@ export default class Player {
   }
 
   currentTime() {
-    return this.art.refs.$video.currentTime;
+    return this.art.refs.$video.currentTime || 0;
   }
 
   duration() {
-    return this.art.refs.$video.duration;
+    return this.art.refs.$video.duration || 0;
   }
 
   playbackRate(rate) {

src/style/index.scss

@@ -22,6 +22,7 @@
     }
 
     .art-icon {
+        display: inline-block;
         svg {
             fill: #fff;
         }
@@ -81,18 +82,13 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        align-items: center;
-        justify-content: center;
         cursor: pointer;
     
-        .art-icon-play {
-            opacity: .8;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 50px;
-            height: 50px;
-            border-radius: 50px;
+        .art-icon-playBig {
+            position: absolute;
+            right: 30px;
+            bottom: 65px;
+            opacity: .6;
         }
     }
 
@@ -117,14 +113,16 @@
         right: 0;
         bottom: 0;
         height: 100px;
-        padding: 50px 10px 0;
+        padding: 55px 10px 0;
         opacity: 0;
         visibility: hidden;
         transition: all .2s ease-in-out;
+        pointer-events: none;
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
     
         .artplayer-progress {
             position: relative;
+            pointer-events: all;
             .art-control-progress {
                 position: relative;
                 height: 5px;
@@ -228,6 +226,30 @@
                 background-color: rgba(0,0,0,.7);
             }
         }
+
+        .artplayer-controls {
+            position: relative;
+            pointer-events: all;
+            display: flex;
+            align-items: center;
+            height: 40px;
+
+            .art-control {
+                height: 22px;
+                line-height: 22px;
+                float: left;
+                cursor: pointer;
+                font-size: 12px;
+            }
+
+            .artplayer-controls-left {
+
+            }
+
+            .artplayer-controls-right {
+                
+            }
+        }
     }
     
     &.controls-show, &:hover {

src/utils/ArtPlayerError.js

@@ -1,9 +0,0 @@
-export default class ArtPlayerError extends Error {
-  constructor(message, context) {
-    super(message);
-    if (typeof Error.captureStackTrace === 'function') {
-      Error.captureStackTrace(this, context || this.constructor);
-    }
-    this.name = 'ArtPlayerError';
-  }
-}

src/utils/index.js

@@ -1,4 +1,12 @@
-import ArtPlayerError from './ArtPlayerError';
+export class ArtPlayerError extends Error {
+  constructor(message, context) {
+    super(message);
+    if (typeof Error.captureStackTrace === 'function') {
+      Error.captureStackTrace(this, context || this.constructor);
+    }
+    this.name = 'ArtPlayerError';
+  }
+}
 
 export function errorHandle(condition, msg) {
   const isFun = typeof condition === 'function';
@@ -33,7 +41,7 @@ export function append(parent, child) {
   } else {
     parent.insertAdjacentHTML('beforeend', child);
   }
-  return parent;
+  return child;
 }
 
 export function setStyle(element, styles) {