添加自动尺寸

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,7 +1,7 @@
 import { sublings } from '../utils';
 
 export default function aspectRatio(art) {
-  const { option, i18n, player, contextmenu } = art;
+  const { option, i18n, player } = art;
   return {
     disable: !option.aspectRatio,
     name: 'aspectRatio',
@@ -19,7 +19,7 @@ export default function aspectRatio(art) {
         player.aspectRatio(ratio.split(':'));
         sublings(target).forEach(item => item.classList.remove('current'));
         target.classList.add('current');
-        contextmenu.hide();
+        art.contextmenu.hide();
       }
     }
   };

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,7 +1,7 @@
 import { sublings } from '../utils';
 
 export default function playbackRate(art) {
-  const { option, i18n, player, contextmenu } = art;
+  const { option, i18n, player } = art;
   return {
     disable: !option.playbackRate,
     name: 'playbackRate',
@@ -22,7 +22,7 @@ export default function playbackRate(art) {
         player.playbackRate(Number(rate));
         sublings(target).forEach(item => item.classList.remove('current'));
         target.classList.add('current');
-        contextmenu.hide();
+        art.contextmenu.hide();
       }
     }
   };

packages/artplayer/src/controls/index.js

@@ -17,7 +17,7 @@ export default class Controls {
   constructor(art) {
     id = 0;
     this.art = art;
-    this.art.on('firstCanplay', () => {
+    this.art.on('video:loadedmetadata', () => {
       this.init();
     });
   }

packages/artplayer/src/controls/progress.js

@@ -39,11 +39,11 @@ export default class Progress {
     this.set('loaded', player.loaded);
 
     this.art.on('video:progress', () => {
-      this.set('loaded', this.loaded);
+      this.set('loaded', player.loaded);
     });
 
     this.art.on('video:timeupdate', () => {
-      this.set('played', this.played);
+      this.set('played', player.played);
     });
 
     this.art.on('video:ended', () => {

packages/artplayer/src/events/resizeInit.js

@@ -2,9 +2,12 @@ import { sleep } from '../utils';
 import { ResizeObserver } from 'resize-observer';
 
 export default function clickInit(art, events) {
-  const { refs: { $player } } = art;
+  const { option, refs: { $player } } = art;
   const resizeObserver = new ResizeObserver(() => {
     sleep().then(() => {
+      if (option.autoSize) {
+        art.player.autoSize();
+      }
       art.player.aspectRatioReset();
       art.emit('resize');
     });

packages/artplayer/src/index.js

@@ -60,6 +60,7 @@ class Artplayer extends Emitter {
       },
       screenshot: false,
       autoplay: false,
+      autoSize: false,
       playbackRate: true,
       aspectRatio: true,
       loop: false,

packages/artplayer/src/player/autoSizeMix.js

@@ -0,0 +1,32 @@
+import { setStyle } from '../utils';
+
+export default function resizeMix(art, player) {
+  const { refs: { $container, $player, $video } } = art;
+
+  Object.defineProperty(player, 'autoSize', {
+    value: () => {
+      const { videoWidth, videoHeight } = $video;
+      const { width, height } = $container.getBoundingClientRect();
+      const videoRatio = videoWidth / videoHeight;
+      const containerRatio = width / height;
+      $container.classList.add('artplayer-auto-size');
+      if (containerRatio > videoRatio) {
+        const percentage = height * videoRatio / width * 100;
+        setStyle($player, 'width', `${percentage}%`);
+        setStyle($player, 'height', '100%');
+      } else {
+        const percentage = width / videoRatio / height * 100;
+        setStyle($player, 'width', '100%');
+        setStyle($player, 'height', `${percentage}%`);
+      }
+    }
+  });
+
+  Object.defineProperty(player, 'autoSizeRemove', {
+    value: () => {
+      $container.classList.remove('artplayer-auto-size');
+      setStyle($player, 'width', null);
+      setStyle($player, 'height', null);
+    }
+  });
+}

packages/artplayer/src/player/eventInit.js

@@ -4,6 +4,8 @@ import { sleep } from '../utils';
 export default function eventInit(art, player) {
   const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = art;
   let firstCanplay = false;
+  let reconnectTime = 0;
+  const maxReconnectTime = 5;
 
   proxy($video, 'click', () => {
     player.toggle();
@@ -19,6 +21,12 @@ export default function eventInit(art, player) {
     art.loading.show();
   });
 
+  art.on('video:loadedmetadata', () => {
+    if (option.autoSize) {
+      player.autoSize();
+    }
+  });
+
   art.on('video:loadeddata', () => {
     art.loading.hide();
   });
@@ -32,6 +40,7 @@ export default function eventInit(art, player) {
   });
 
   art.on('video:canplay', () => {
+    reconnectTime = 0;
     if (!firstCanplay) {
       firstCanplay = true;
       art.emit('firstCanplay');
@@ -68,12 +77,12 @@ export default function eventInit(art, player) {
   });
 
   art.on('video:error', () => {
-    if (player.reconnectTime < player.maxReconnectTime) {
+    if (reconnectTime < maxReconnectTime) {
       sleep(1000).then(() => {
         player.reconnectTime++;
         art.emit('beforeMountUrl', option.url);
         $video.src = player.mountUrl(option.url);
-        notice.show(`${i18n.get('Reconnect')}: ${player.reconnectTime}`);
+        notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
       });
     } else {
       art.isPlaying = false;

packages/artplayer/src/player/index.js

@@ -17,12 +17,10 @@ import fullscreenWebMix from './fullscreenWebMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
+import autoSizeMix from './autoSizeMix';
 
 export default class Player {
   constructor(art) {
-    this.reconnectTime = 0;
-    this.maxReconnectTime = 5;
-
     mountUrlMix(art, this);
     attrInit(art, this);
     eventInit(art, this);
@@ -42,5 +40,6 @@ export default class Player {
     pipMix(art, this);
     loadedMix(art, this);
     playedMix(art, this);
+    autoSizeMix(art, this);
   }
 }

packages/artplayer/src/player/loadedMix.js

@@ -1,10 +1,9 @@
 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;
-    }
+    get: () =>
+      art.refs.$video.buffered.length
+        ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) /
+          art.refs.$video.duration
+        : 0
   });
 }

packages/artplayer/src/player/playedMix.js

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

packages/artplayer/src/player/switchMix.js

@@ -9,7 +9,6 @@ export default function switchMix(art, player) {
       option.url = url;
       player.playbackRateRemove();
       player.aspectRatioRemove();
-      player.reconnectTime = 0;
       player.seek(currentTime);
       if (isPlaying) {
         player.play();

packages/artplayer/src/scheme/index.js

@@ -25,6 +25,7 @@ export default {
   },
   screenshot: 'boolean',
   autoplay: 'boolean',
+  autoSize: 'boolean',
   playbackRate: 'boolean',
   aspectRatio: 'boolean',
   loop: 'boolean',

packages/artplayer/src/storage.js

@@ -11,11 +11,11 @@ export default class Storage {
 
   get(key) {
     const storage = JSON.parse(localStorage.getItem(this.storageName));
-    return storage[key];
+    return key ? storage[key] : {};
   }
 
   set(key, value) {
-    const storage = Object.assign({}, this.get() || {}, {
+    const storage = Object.assign({}, this.get(), {
       [key]: value
     });
     localStorage.setItem(this.storageName, JSON.stringify(storage));

packages/artplayer/src/style/autoSize.scss

@@ -0,0 +1,5 @@
+.artplayer-auto-size {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

packages/artplayer/src/style/index.js

@@ -13,3 +13,4 @@ import './hideCursor.scss';
 import './aspectRatio.scss';
 import './fullscreenWeb.scss';
 import './pip.scss';
+import './autoSize.scss';