add more event

src/contextmenu.js

@@ -17,8 +17,8 @@ export default class Contextmenu {
     option.contextmenu.push(
       {
         text: i18n.get('Video info'),
-        click: art => {
-          art.info.show();
+        click: () => {
+          this.art.info.show();
         }
       },
       {
@@ -88,16 +88,15 @@ export default class Contextmenu {
     const mouseY = event.clientY;
     const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
     const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
-
     let menuLeft = mouseX - cLeft;
     let menuTop = mouseY - cTop;
 
     if (mouseX + mWidth > cLeft + cWidth) {
-      menuLeft -= mWidth;
+      menuLeft = cWidth - mWidth;
     }
 
     if (mouseY + mHeight > cTop + cHeight) {
-      menuTop -= mHeight;
+      menuTop = cHeight - mHeight;
     }
 
     refs.$contextmenu.style.left = `${menuLeft}px`;
@@ -105,12 +104,18 @@ export default class Contextmenu {
   }
 
   hide() {
-    const { refs } = this.art;
-    refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
+    const { refs: { $contextmenu } } = this.art;
+    if ($contextmenu) {
+      $contextmenu.style.display = 'none';
+      this.art.emit('contextmenu:hide', $contextmenu);
+    }
   }
 
   show() {
-    const { refs } = this.art;
-    refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
+    const { refs: { $contextmenu } } = this.art;
+    if ($contextmenu) {
+      $contextmenu.style.display = 'block';
+      this.art.emit('contextmenu:show', $contextmenu);
+    }
   }
 }

src/index.js

@@ -24,9 +24,11 @@ export const instances = [];
 class Artplayer extends Emitter {
   constructor(option) {
     super();
+    this.art.emit('init:start');
     this.option = Object.assign({}, Artplayer.DEFAULTS, option);
     verification(this.option);
     this.init();
+    this.art.emit('init:end');
   }
 
   static get version() {
@@ -111,6 +113,7 @@ class Artplayer extends Emitter {
     this.events.destroy();
     this.refs.$container.innerHTML = '';
     instances.splice(instances.indexOf(this), 1);
+    this.art.emit('destroy');
   }
 }
 

src/layers.js

@@ -29,14 +29,19 @@ export default class Layers {
     append($layer, option.html);
     setStyle($layer, option.style || {});
     refs.$layers.appendChild($layer);
+    this.art.emit('layers:add', $layer);
     callback && callback($layer);
   }
 
   show() {
-    this.art.refs.$layers.style.display = 'block';
+    const { refs: { $layers } } = this.art;
+    $layers.style.display = 'block';
+    this.art.emit('layers:show', $layers);
   }
 
   hide() {
-    this.art.refs.$layers.style.display = 'none';
+    const { refs: { $layers } } = this.art;
+    $layers.style.display = 'none';
+    this.art.emit('layers:hide', $layers);
   }
 }

src/loading.js

@@ -9,18 +9,18 @@ export default class Loading {
 
   init() {
     const { option, refs: { $loading } } = this.art;
-    if (option.loading) {
-      append($loading, option.loading);
-    } else {
-      append($loading, icons.loading);
-    }
+    append($loading, option.loading || icons.loading);
   }
 
   hide() {
-    this.art.refs.$loading.style.display = 'none';
+    const { refs: { $loading } } = this.art;
+    $loading.style.display = 'none';
+    this.art.emit('loading:hide', $loading);
   }
 
   show() {
-    this.art.refs.$loading.style.display = 'flex';
+    const { refs: { $loading } } = this.art;
+    $loading.style.display = 'flex';
+    this.art.emit('loading:show', $loading);
   }
 }

src/mask.js

@@ -25,10 +25,14 @@ export default class Mask {
   }
 
   show() {
-    this.art.refs.$mask.style.display = 'flex';
+    const { refs: { $mask } } = this.art;
+    $mask.style.display = 'flex';
+    this.art.emit('mask:show', $mask);
   }
 
   hide() {
-    this.art.refs.$mask.style.display = 'none';
+    const { refs: { $mask } } = this.art;
+    $mask.style.display = 'none';
+    this.art.emit('mask:show', $mask);
   }
 }

src/mse.js

@@ -91,10 +91,12 @@ export default class Mse {
   }
 
   fetchUrl() {
-    const { option, notice, i18n, loading } = this.art;
-    request(option.url)
+    const { option: { url }, notice, i18n, loading } = this.art;
+    this.art.emit('player:fetch:start', url);
+    request(url)
       .then(response => {
         this.sourceBuffer.appendBuffer(response);
+        this.art.emit('player:fetch:success', url);
       })
       .catch(err => {
         if (this.repeat++ < this.maxRepeat) {
@@ -103,6 +105,7 @@ export default class Mse {
           notice.show(i18n.get('Video load failed'));
           console.warn(err);
           loading.hide();
+          this.art.emit('player:fetch:failure', url);
         }
       });
   }

src/notice.js

@@ -14,10 +14,12 @@ export default class Notice {
         this.hide();
       }, 1000);
     }
+    this.art.emit('notice:show', $notice);
   }
 
   hide() {
     const { refs: { $notice } } = this.art;
     $notice.style.display = 'none';
+    this.art.emit('notice:hide', $notice);
   }
 }

src/player.js

@@ -68,11 +68,16 @@ export default class Player {
   }
 
   play() {
-    return this.art.refs.$video.play();
+    const { refs: { $video } } = this.art;
+    const promise = $video.play();
+    this.art.emit('play', $video);
+    return promise;
   }
 
   pause() {
-    return this.art.refs.$video.pause();
+    const { refs: { $video } } = this.art;
+    $video.pause();
+    this.art.emit('pause', $video);
   }
 
   toggle() {
@@ -83,16 +88,28 @@ export default class Player {
     }
   }
 
-  seek() {
-    //
+  seek(time) {
+    const { refs: { $video } } = this.art;
+    let newTime = Math.max(time, 0);
+    if ($video.duration) {
+      newTime = Math.min(newTime, $video.duration);
+    }
+
+    $video.currentTime = newTime;
+    this.art.emit('seek', newTime);
   }
 
   currentTime() {
-    //
+    return this.art.refs.$video.currentTime;
   }
 
-  volume() {
-    //
+  volume(percentage) {
+    const { refs: { $video } } = this.art;
+    if (percentage) {
+      $video.volume = clamp(percentage, 0, 1);
+    }
+
+    this.art.emit('volume', $video.volume);
   }
 
   switchVolumeIcon() {
@@ -107,11 +124,13 @@ export default class Player {
     //
   }
 
-  switchSubtitle() {
+  resize() {
     //
   }
 
-  speed() {
-    //
+  speed(rate) {
+    const { refs: { $video } } = this.art;
+    $video.playbackRate = rate;
+    this.art.emit('speed', rate);
   }
 }

src/style/index.scss

@@ -6,6 +6,8 @@
     height: 100%;
     text-align: left;
     overflow: hidden;
+    font-family: Roboto,Arial,Helvetica,sans-serif;
+    -webkit-font-smoothing: antialiased;
     user-select: none;
 
     .art-icon {
@@ -79,9 +81,9 @@
         z-index: 7;
         left: 0;
         top: 0;
-        width: 170px;
+        width: 200px;
         padding: 5px 0;
-        background:rgba(0, 0, 0, 0.75);
+        background:rgba(0, 0, 0, 0.8);
         a {
             font-size: 13px;
             display: block;
@@ -91,6 +93,11 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             text-decoration: none;
+            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+
+            &:hover {
+                background-color: rgba(255,255,255,.1);
+            }
         }
     }
 

src/subtitle.js

@@ -40,23 +40,34 @@ export default class Subtitle {
             .map(item => `<p>${item}</p>`)
             .join('');
         }
+        this.art.emit('subtitle:update', $subtitle);
       });
     }
   }
 
   show() {
-    this.art.refs.$subtitle.style.display = 'block';
+    const { refs: { $subtitle } } = this.art;
+    $subtitle.style.display = 'block';
+    this.art.emit('subtitle:show', $subtitle);
   }
 
   hide() {
-    this.art.refs.$subtitle.style.display = 'none';
+    const { refs: { $subtitle } } = this.art;
+    $subtitle.style.display = 'none';
+    this.art.emit('subtitle:hide', $subtitle);
   }
 
-  change(url) {
+  switch(url) {
+    const { refs: { $track } } = this.art;
     errorHandle(
       getExt(url) === 'vtt',
       `'url' option require 'vtt' format, but got '${getExt(url)}'.`
     );
-    this.art.refs.$track.src = url;
+    errorHandle(
+      $track,
+      'You need to initialize the subtitle option first.'
+    );
+    $track.src = url;
+    this.art.emit('subtitle:switch', url);
   }
 }