bugfix

packages/artplayer/src/contextmenu/index.js

@@ -10,7 +10,9 @@ export default class Contextmenu {
   constructor(art) {
     id = 0;
     this.art = art;
-    this.init();
+    this.art.on('firstCanplay', () => {
+      this.init();
+    });
   }
 
   init() {

packages/artplayer/src/events/mousemoveInit.js

@@ -5,18 +5,22 @@ export default function mousemoveInitInit(art, events) {
 
   const hideCursor = debounce(() => {
     $player.classList.add('artplayer-hide-cursor');
-    if (art.player.fullscreenState || art.player.fullscreenWebState) {
-      $player.classList.remove('artplayer-hover');
-      art.controls.hide();
-    }
+  }, 5000);
+
+  const hideControl = debounce(() => {
+    $player.classList.remove('artplayer-hover');
+    art.controls.hide();
   }, 5000);
 
   art.on('hoverleave', () => {
+    hideControl();
     hideCursor.clearTimeout();
     $player.classList.remove('artplayer-hide-cursor');
   });
 
   events.proxy($player, 'mousemove', () => {
+    hideControl.clearTimeout();
+    art.controls.show();
     $player.classList.remove('artplayer-hide-cursor');
     art.controls.show();
     if (!art.player.pipState) {

packages/artplayer/src/icons/danmu.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" style="width: 85%; height: 85%">
-	<path d="M54,2.5H6c-3.252,0-6,2.748-6,6v33c0,3.252,2.748,6,6,6h14.555l8.702,9.669C29.446,57.38,29.717,57.5,30,57.5 s0.554-0.12,0.743-0.331l8.702-9.669H54c3.252,0,6-2.748,6-6v-33C60,5.248,57.252,2.5,54,2.5z M16,28.5c-2.206,0-4-1.794-4-4 s1.794-4,4-4s4,1.794,4,4S18.206,28.5,16,28.5z M30,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S32.206,28.5,30,28.5z M44,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S46.206,28.5,44,28.5z"/>
-</svg>

packages/artplayer/src/icons/index.js

@@ -6,7 +6,6 @@ import volume from './volume.svg';
 import volumeClose from './volume-close.svg';
 import subtitle from './subtitle.svg';
 import screenshot from './screenshot.svg';
-import danmu from './danmu.svg';
 import setting from './setting.svg';
 import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
@@ -21,7 +20,6 @@ const icons = {
   volumeClose,
   subtitle,
   screenshot,
-  danmu,
   setting,
   fullscreen,
   fullscreenWeb,

packages/artplayer/src/index.js

@@ -69,8 +69,6 @@ class Artplayer extends Emitter {
       layers: [],
       contextmenu: [],
       quality: [],
-      loading: '',
-      play: '',
       theme: '#f00',
       setting: false,
       hotkey: true,
@@ -91,6 +89,20 @@ class Artplayer extends Emitter {
         'webkit-playsinline': true,
         'playsinline': true
       },
+      replace: {
+        loading: '',
+        playBig: '',
+        play: '',
+        pause: '',
+        volume: '',
+        volumeClose: '',
+        subtitle: '',
+        screenshot: '',
+        setting: '',
+        fullscreen: '',
+        fullscreenWeb: '',
+        pip: ''
+      },
       lang: navigator.language.toLowerCase()
     };
   }

packages/artplayer/src/loading.js

@@ -4,8 +4,8 @@ import { append, setStyle } from './utils';
 export default class Loading {
   constructor(art) {
     this.art = art;
-    const { option, refs: { $loading } } = art;
-    append($loading, option.loading || icons.loading);
+    const { refs: { $loading } } = art;
+    append($loading, icons.loading);
   }
 
   hide() {

packages/artplayer/src/mask.js

@@ -4,8 +4,8 @@ import { append, setStyle } from './utils';
 export default class Mask {
   constructor(art) {
     this.art = art;
-    const { option, refs: { $mask } } = art;
-    append($mask, option.play || icons.playBig);
+    const { refs: { $mask } } = art;
+    append($mask, icons.playBig);
   }
 
   show() {

packages/artplayer/src/player/aspectRatioMix.js

@@ -3,6 +3,10 @@ import { setStyle, inverseClass } from '../utils';
 export default function aspectRatioMix(art, player) {
   const { refs: { $video, $player }, i18n, notice } = art;
 
+  Object.defineProperty(player, 'aspectRatioState', {
+    get: () => $player.dataset.aspectRatio
+  });
+
   Object.defineProperty(player, 'aspectRatio', {
     value: ratio => {
       const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
@@ -37,11 +41,11 @@ export default function aspectRatioMix(art, player) {
 
   Object.defineProperty(player, 'aspectRatioRemove', {
     value: () => {
-      setStyle($video, 'width', null);
-      setStyle($video, 'height', null);
-      setStyle($video, 'padding', null);
-      delete $player.dataset.aspectRatio;
-      if (art.contextmenu.$aspectRatio) {
+      if (player.aspectRatioState) {
+        setStyle($video, 'width', null);
+        setStyle($video, 'height', null);
+        setStyle($video, 'padding', null);
+        delete $player.dataset.aspectRatio;
         const $default = art.contextmenu.$aspectRatio.querySelector('.default');
         inverseClass($default, 'current');
       }

packages/artplayer/src/player/fullscreenMix.js

@@ -37,10 +37,10 @@ export default function fullscreenMix(art, player) {
     value: () => {
       if (player.fullscreenWebState) {
         player.fullscreenWebExit();
+        $player.classList.remove('artplayer-fullscreen');
+        screenfull.exit();
+        art.emit('fullscreen:exit');
       }
-      $player.classList.remove('artplayer-fullscreen');
-      screenfull.exit();
-      art.emit('fullscreen:exit');
     }
   });
 

packages/artplayer/src/player/fullscreenWebMix.js

@@ -19,9 +19,9 @@ export default function fullscreenWebMix(art, player) {
     value: () => {
       if (player.fullscreenState) {
         player.fullscreenExit();
+        $player.classList.remove('artplayer-web-fullscreen');
+        art.emit('fullscreenWeb:exit');
       }
-      $player.classList.remove('artplayer-web-fullscreen');
-      art.emit('fullscreenWeb:exit');
     }
   });
 

packages/artplayer/src/player/pipMix.js

@@ -50,15 +50,17 @@ export default function pipMix(art, player) {
 
   Object.defineProperty(player, 'pipExit', {
     value: () => {
-      $player.classList.remove('artplayer-pip');
-      cachePos = draggie.position;
-      setStyle($player, 'left', null);
-      setStyle($player, 'top', null);
-      player.fullscreenExit();
-      player.fullscreenWebExit();
-      player.aspectRatioRemove();
-      player.playbackRateRemove();
-      art.emit('pip', false);
+      if (player.pipState) {
+        $player.classList.remove('artplayer-pip');
+        cachePos = draggie.position;
+        setStyle($player, 'left', null);
+        setStyle($player, 'top', null);
+        player.fullscreenExit();
+        player.fullscreenWebExit();
+        player.aspectRatioRemove();
+        player.playbackRateRemove();
+        art.emit('pip', false);
+      }
     }
   });
 

packages/artplayer/src/player/playbackRateMix.js

@@ -3,6 +3,10 @@ import { clamp, inverseClass } from '../utils';
 export default function playbackRateMix(art, player) {
   const { refs: { $video, $player }, i18n, notice } = art;
 
+  Object.defineProperty(player, 'playbackRateState', {
+    get: () => $player.dataset.playbackRate
+  });
+
   Object.defineProperty(player, 'playbackRate', {
     value: rate => {
       const newRate = clamp(rate, 0.1, 10);
@@ -15,9 +19,9 @@ export default function playbackRateMix(art, player) {
 
   Object.defineProperty(player, 'playbackRateRemove', {
     value: () => {
-      player.playbackRate(1);
-      delete $player.dataset.playbackRate;
-      if (art.contextmenu.$playbackRate) {
+      if (player.$playbackRateState) {
+        player.playbackRate(1);
+        delete $player.dataset.playbackRate;
         const $normal = art.contextmenu.$playbackRate.querySelector('.normal');
         inverseClass($normal, 'current');
       }

packages/artplayer/src/scheme/index.js

@@ -1,5 +1,6 @@
 import validElement from './validElement';
 import validStringEmpty from './validStringEmpty';
+import validElementMap from './validElementMap';
 
 export default {
   container: {
@@ -63,8 +64,10 @@ export default {
       url: 'string'
     }
   },
-  loading: validElement,
-  play: validElement,
+  replace: {
+    type: 'object',
+    validator: validElementMap
+  },
   theme: 'string',
   hotkey: 'boolean',
   pip: 'boolean',

packages/artplayer/src/scheme/validElementMap.js

@@ -0,0 +1,12 @@
+import { ArtPlayerError } from '../utils';
+
+export default function validElementMap(paths, value) {
+  return Object.keys(value).every(key => {
+    const mapValue = value[key];
+    const mapType = typeof mapValue;
+    if (mapValue instanceof Element || mapType === 'string') {
+      return true;
+    }
+    throw new ArtPlayerError(`${paths.join('.')} require 'string' or 'Element' type, but got '${mapType}'`);
+  });
+}