分离事件中心

packages/artplayer/src/player/currentTimeMix.js

@@ -1,5 +1,8 @@
 export default function currentTimeMix(art, player) {
   Object.defineProperty(player, 'currentTime', {
-    value: () => art.refs.$video.currentTime || 0
+    get: () => art.refs.$video.currentTime || 0,
+    set: currentTime => {
+      art.refs.$video.currentTime = currentTime;
+    }
   });
 }

packages/artplayer/src/player/durationMix.js

@@ -1,5 +1,5 @@
 export default function durationMix(art, player) {
   Object.defineProperty(player, 'duration', {
-    value: () => art.refs.$video.duration || 0
+    get: () => art.refs.$video.duration || 0
   });
 }

packages/artplayer/src/player/eventInit.js

@@ -71,7 +71,8 @@ export default function eventInit(art, player) {
     if (player.reconnectTime < player.maxReconnectTime) {
       sleep(1000).then(() => {
         player.reconnectTime++;
-        $video.src = option.url;
+        art.emit('beforeMountUrl', option.url);
+        $video.src = player.mountUrl(option.url);
         notice.show(`${i18n.get('Reconnect')}: ${player.reconnectTime}`);
       });
     } else {

packages/artplayer/src/player/fullscreenMix.js

@@ -4,7 +4,6 @@ export default function fullscreenMix(art, player) {
   const { notice, events: { destroyEvents }, refs: { $player } } = art;
 
   const screenfullChange = () => {
-    player.aspectRatioReset();
     art.emit('fullscreen', screenfull.isFullscreen);
   };
 

packages/artplayer/src/player/fullscreenWebMix.js

@@ -11,7 +11,6 @@ export default function fullscreenWebMix(art, player) {
         player.fullscreenExit();
       }
       $player.classList.add('artplayer-web-fullscreen');
-      player.aspectRatioReset();
       art.emit('fullscreenWeb:enabled');
     }
   });
@@ -22,7 +21,6 @@ export default function fullscreenWebMix(art, player) {
         player.fullscreenExit();
       }
       $player.classList.remove('artplayer-web-fullscreen');
-      player.aspectRatioReset();
       art.emit('fullscreenWeb:exit');
     }
   });

packages/artplayer/src/player/index.js

@@ -15,6 +15,8 @@ import screenshotMix from './screenshotMix';
 import fullscreenMix from './fullscreenMix';
 import fullscreenWebMix from './fullscreenWebMix';
 import pipMix from './pipMix';
+import loadedMix from './loadedMix';
+import playedMix from './playedMix';
 
 export default class Player {
   constructor(art) {
@@ -38,5 +40,7 @@ export default class Player {
     fullscreenMix(art, this);
     fullscreenWebMix(art, this);
     pipMix(art, this);
+    loadedMix(art, this);
+    playedMix(art, this);
   }
 }

packages/artplayer/src/player/loadedMix.js

@@ -0,0 +1,10 @@
+export default function seekMix(art, player) {
+  Object.defineProperty(player, 'loaded', {
+    get: () => {
+      const { $video } = art.refs;
+      return $video.buffered.length
+        ? $video.buffered.end($video.buffered.length - 1) / $video.duration
+        : 0;
+    }
+  });
+}

packages/artplayer/src/player/playedMix.js

@@ -0,0 +1,8 @@
+export default function seekMix(art, player) {
+  Object.defineProperty(player, 'played', {
+    get: () => {
+      const { $video } = art.refs;
+      return $video.currentTime / $video.duration;
+    }
+  });
+}

packages/artplayer/src/player/seekMix.js

@@ -1,16 +1,16 @@
 import { secondToTime } from '../utils';
 
 export default function seekMix(art, player) {
-  const { refs: { $video }, notice } = art;
+  const { notice } = art;
 
   Object.defineProperty(player, 'seek', {
     value: time => {
       let newTime = Math.max(time, 0);
-      if ($video.duration) {
-        newTime = Math.min(newTime, $video.duration);
+      if (player.duration) {
+        newTime = Math.min(newTime, player.duration);
       }
-      $video.currentTime = newTime;
-      notice.show(`${secondToTime(newTime)} / ${secondToTime($video.duration)}`);
+      player.currentTime = newTime;
+      notice.show(`${secondToTime(newTime)} / ${secondToTime(player.duration)}`);
       art.emit('seek', newTime);
     }
   });

packages/artplayer/src/player/switchMix.js

@@ -3,7 +3,7 @@ export default function switchMix(art, player) {
 
   Object.defineProperty(player, 'switch', {
     value: (url, name = 'unknown') => {
-      const currentTime = player.currentTime();
+      const { currentTime } = player;
       art.emit('beforeMountUrl', url);
       $video.src = player.mountUrl(url);
       option.url = url;

packages/artplayer/src/player/volumeMix.js

@@ -1,19 +1,19 @@
-import { clamp, setStorage } from '../utils';
+import { clamp } from '../utils';
 
 export default function volumeMix(art, player) {
-  const { refs: { $video }, i18n, notice } = art;
+  const { refs: { $video }, i18n, notice, storage } = art;
 
   Object.defineProperty(player, 'volume', {
-    value: percentage => {
+    get: () => $video.volume || 0,
+    set: percentage => {
       if (percentage !== undefined) {
         $video.volume = clamp(percentage, 0, 1);
         notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
         if ($video.volume !== 0) {
-          setStorage('volume', $video.volume);
+          storage.set('volume', $video.volume);
         }
         art.emit('volume', $video.volume);
       }
-      return $video.volume || 0;
     }
   });
 }