update docs

packages/artplayer/src/events/resizeInit.js

@@ -1,17 +1,18 @@
 import { throttle } from '../utils';
 
 export default function resizeInit(art, events) {
-    const { option } = art;
+    const { option, constructor } = art;
 
-    const resizeFn = throttle(() => {
-        if (art.state === 'standard') {
-            art.autoSize = option.autoSize;
+    art.on('resize', () => {
+        const { aspectRatio, notice } = art;
+        art.aspectRatio = aspectRatio;
+        if (art.state === 'standard' && option.autoSize) {
+            art.autoSize();
         }
-        art.aspectRatioReset();
-        art.notice.show = '';
-        art.emit('resize');
-    }, art.constructor.RESIZE_TIME);
+        notice.show = '';
+    });
 
+    const resizeFn = throttle(() => art.emit('resize'), constructor.RESIZE_TIME);
     events.proxy(window, ['orientationchange', 'resize'], () => resizeFn());
     if (screen && screen.orientation && screen.orientation.onchange) {
         events.proxy(screen.orientation, 'change', () => resizeFn());

packages/artplayer/src/player/aspectRatioMix.js

@@ -42,11 +42,4 @@ export default function aspectRatioMix(art) {
             art.emit('aspectRatio', ratio);
         },
     });
-
-    def(art, 'aspectRatioReset', {
-        value() {
-            const { aspectRatio } = art;
-            art.aspectRatio = aspectRatio;
-        },
-    });
 }

packages/artplayer/src/player/autoHeightMix.js

@@ -1,32 +1,17 @@
-import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
+import { setStyle, def } from '../utils';
 
 export default function autoHeightMix(art) {
     const {
-        option,
         template: { $container, $video },
     } = art;
 
-    const heightCache = $container.style.height;
-
     def(art, 'autoHeight', {
-        get() {
-            return hasClass($container, 'art-auto-height');
-        },
-        set(value) {
-            if (value) {
-                const { clientWidth } = $container;
-                const { videoHeight, videoWidth } = $video;
-                const height = videoHeight * (clientWidth / videoWidth);
-                setStyle($container, 'height', height + 'px');
-                addClass($container, 'art-auto-height');
-                art.autoSize = option.autoSize;
-                art.emit('autoHeight', height);
-            } else {
-                setStyle($container, 'height', heightCache);
-                removeClass($container, 'art-auto-height');
-                art.autoSize = option.autoSize;
-                art.emit('autoHeight');
-            }
+        value() {
+            const { clientWidth } = $container;
+            const { videoHeight, videoWidth } = $video;
+            const height = videoHeight * (clientWidth / videoWidth);
+            setStyle($container, 'height', height + 'px');
+            art.emit('autoHeight', height);
         },
     });
 }

packages/artplayer/src/player/autoSizeMix.js

@@ -1,38 +1,27 @@
-import { setStyle, addClass, removeClass, hasClass, def } from '../utils';
+import { setStyle, def } from '../utils';
 
 export default function resizeMix(art) {
     const { $container, $player, $video } = art.template;
 
     def(art, 'autoSize', {
-        get() {
-            return hasClass($container, 'art-auto-size');
-        },
-        set(value) {
-            if (value) {
-                const { videoWidth, videoHeight } = $video;
-                const { width, height } = $container.getBoundingClientRect();
-                const videoRatio = videoWidth / videoHeight;
-                const containerRatio = width / height;
-                addClass($container, 'art-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}%`);
-                }
-                art.emit('autoSize', {
-                    width: art.width,
-                    height: art.height,
-                });
+        value() {
+            const { videoWidth, videoHeight } = $video;
+            const { width, height } = $container.getBoundingClientRect();
+            const videoRatio = videoWidth / videoHeight;
+            const containerRatio = width / height;
+            if (containerRatio > videoRatio) {
+                const percentage = ((height * videoRatio) / width) * 100;
+                setStyle($player, 'width', `${percentage}%`);
+                setStyle($player, 'height', '100%');
             } else {
-                removeClass($container, 'art-auto-size');
-                setStyle($player, 'width', null);
-                setStyle($player, 'height', null);
-                art.emit('autoSize');
+                const percentage = (width / videoRatio / height) * 100;
+                setStyle($player, 'width', '100%');
+                setStyle($player, 'height', `${percentage}%`);
             }
+            art.emit('autoSize', {
+                width: art.width,
+                height: art.height,
+            });
         },
     });
 }

packages/artplayer/src/player/eventInit.js

@@ -83,7 +83,7 @@ export default function eventInit(art) {
     // });
 
     art.on('video:loadedmetadata', () => {
-        art.autoSize = option.autoSize;
+        art.emit('resize');
         if (isMobile) {
             art.loading.show = false;
             art.controls.show = true;

packages/artplayer/src/player/fullscreenMix.js

@@ -20,15 +20,11 @@ export default function fullscreenMix(art) {
             async set(value) {
                 if (value) {
                     art.state = 'fullscreen';
-                    art.aspectRatioReset();
-                    art.autoSize = false;
                     await screenfull.request($player);
                     addClass($player, 'art-fullscreen');
                     art.emit('resize');
                     notice.show = '';
                 } else {
-                    art.aspectRatioReset();
-                    art.autoSize = art.option.autoSize;
                     await screenfull.exit();
                     removeClass($player, 'art-fullscreen');
                     art.emit('resize');

packages/artplayer/src/player/fullscreenWebMix.js

@@ -2,7 +2,6 @@ import { addClass, removeClass, hasClass, def, append } from '../utils';
 
 export default function fullscreenWebMix(art) {
     const {
-        option,
         notice,
         constructor,
         template: { $container, $player },
@@ -21,8 +20,6 @@ export default function fullscreenWebMix(art) {
                 }
                 art.state = 'fullscreenWeb';
                 addClass($player, 'art-fullscreen-web');
-                art.aspectRatioReset();
-                art.autoSize = false;
                 art.emit('resize');
                 art.emit('fullscreenWeb', true);
                 notice.show = '';
@@ -35,8 +32,6 @@ export default function fullscreenWebMix(art) {
                     cssText = '';
                 }
                 removeClass($player, 'art-fullscreen-web');
-                art.aspectRatioReset();
-                art.autoSize = option.autoSize;
                 art.emit('resize');
                 art.emit('fullscreenWeb', false);
                 notice.show = '';

packages/artplayer/src/style/artplayer.less

@@ -15,6 +15,7 @@
     color: var(--art-font-color);
     background-color: var(--art-background-color);
     text-shadow: 0 0 2px var(--art-text-shadow-color);
+    transition: width, height var(--art-transition-duration) ease;
     font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -ms-touch-action: manipulation;

packages/artplayer/src/style/autoSize.less

@@ -1,7 +0,0 @@
-.art-auto-size {
-    .art-center();
-
-    .art-video-player {
-        transition: width, height var(--art-transition-duration) ease;
-    }
-}

packages/artplayer/src/style/fullscreenWeb.less

@@ -1,4 +1,5 @@
 .art-fullscreen-web {
     .art-fullscreen();
     .art-full(var(--art-fullscreen-web-index), fixed);
+    width: 100% !important;
 }

packages/artplayer/src/style/index.less

@@ -23,7 +23,6 @@
 @import './fullscreen.less';
 @import './fullscreenWeb.less';
 @import './mini.less';
-@import './autoSize.less';
 @import './flip.less';
 @import './plugins.less';
 @import './selector.less';