add autoHeight option

packages/artplayer/src/player/autoHeightMix.js

@@ -0,0 +1,25 @@
+import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
+
+export default function autoHeightMix(art, player) {
+    const { $container, $video } = art.template;
+
+    def(player, 'autoHeight', {
+        get() {
+            return hasClass($container, 'art-auto-height');
+        },
+        set(value) {
+            if (value) {
+                const { clientWidth } = $container;
+                const { videoHeight, videoWidth } = $video;
+                const height = videoHeight * (clientWidth / videoWidth) + 'px';
+                setStyle($container, 'height', height);
+                addClass($container, 'art-auto-height');
+                art.emit('autoHeight', height);
+            } else {
+                setStyle($container, 'height', null);
+                removeClass($container, 'art-auto-size');
+                art.emit('autoHeight');
+            }
+        },
+    });
+}

packages/artplayer/src/player/eventInit.js

@@ -92,6 +92,7 @@ export default function eventInit(art, player) {
     // });
 
     art.once('video:loadedmetadata', () => {
+        player.autoHeight = option.autoHeight;
         player.autoSize = option.autoSize;
         if (isMobile) {
             art.loading.show = false;

packages/artplayer/src/player/fullscreenMix.js

@@ -22,6 +22,7 @@ const nativeScreenfull = (art, player) => {
                 screenfull.exit().then(() => {
                     removeClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
+                    player.autoHeight = art.option.autoHeight;
                     player.autoSize = art.option.autoSize;
                     art.emit('resize');
                     art.emit('fullscreen');

packages/artplayer/src/player/fullscreenWebMix.js

@@ -16,6 +16,7 @@ export default function fullscreenWebMix(art, player) {
             } else {
                 removeClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
+                player.autoHeight = art.option.autoHeight;
                 player.autoSize = art.option.autoSize;
                 art.emit('resize');
                 art.emit('fullscreenWeb');

packages/artplayer/src/player/index.js

@@ -26,6 +26,7 @@ import miniMix from './miniMix';
 import loopMin from './loopMin';
 import rotateMix from './rotateMix';
 import posterMix from './posterMix';
+import autoHeightMix from './autoHeightMix';
 import { proxyPropertys } from '../utils';
 
 export default class Player {
@@ -58,6 +59,7 @@ export default class Player {
         loopMin(art, this);
         rotateMix(art, this);
         posterMix(art, this);
+        autoHeightMix(art, this);
         proxyPropertys(art, this);
     }
 }

packages/artplayer/src/player/miniMix.js

@@ -55,6 +55,7 @@ export default function miniMix(art, player) {
         },
         set(value) {
             if (value) {
+                player.autoHeight = false;
                 player.autoSize = false;
                 cacheStyle = $player.style.cssText;
                 addClass($player, 'art-mini');
@@ -87,6 +88,7 @@ export default function miniMix(art, player) {
                 setStyle($player, 'left', null);
                 player.aspectRatio = false;
                 player.playbackRate = false;
+                player.autoHeight = option.autoHeight;
                 player.autoSize = option.autoSize;
                 art.emit('mini');
             }

packages/artplayer/src/player/switchMix.js

@@ -12,6 +12,7 @@ export default function switchMix(art, player) {
                 player.playbackRate = false;
                 player.aspectRatio = false;
                 player.flip = 'normal';
+                player.autoHeight = option.autoHeight;
                 player.autoSize = option.autoSize;
                 player.currentTime = currentTime;
                 art.notice.show = '';