add autoHeight option

docs/assets/css/mobile.css

@@ -10,7 +10,6 @@ html, body {
 
 .artplayer-app {
     width: 100%;
-    height: 50%;
 }
 
 .tip {

docs/assets/js/mobile.js

@@ -6,6 +6,7 @@ var art = new Artplayer({
     title: 'One More Time One More Chance',
     poster: '/assets/sample/poster.jpg',
     autoSize: true,
+    autoHeight: true,
     loop: true,
     mutex: true,
     theme: '#ffad00',

docs/assets/ts/artplayer.d.ts

@@ -212,6 +212,11 @@ type Option = {
      */
     autoMini?: boolean;
 
+    /**
+     * Set the container height based on the video length aspect ratio and the container width
+     */
+    autoHeight?: boolean;
+
     /**
      * Whether video auto loop
      */

docs/uncompiled/artplayer.js

@@ -733,6 +733,7 @@
     autoplay: b,
     autoSize: b,
     autoMini: b,
+    autoHeight: b,
     loop: b,
     flip: b,
     rotate: b,
@@ -1232,6 +1233,7 @@
     // });
 
     art.once('video:loadedmetadata', function () {
+      player.autoHeight = option.autoHeight;
       player.autoSize = option.autoSize;
 
       if (isMobile) {
@@ -1457,6 +1459,7 @@
           player.playbackRate = false;
           player.aspectRatio = false;
           player.flip = 'normal';
+          player.autoHeight = option.autoHeight;
           player.autoSize = option.autoSize;
           player.currentTime = currentTime;
           art.notice.show = '';
@@ -1845,6 +1848,7 @@
           screenfull.exit().then(function () {
             removeClass($player, 'art-fullscreen');
             player.aspectRatioReset = true;
+            player.autoHeight = art.option.autoHeight;
             player.autoSize = art.option.autoSize;
             art.emit('resize');
             art.emit('fullscreen');
@@ -1912,6 +1916,7 @@
         } 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');
@@ -2179,6 +2184,7 @@
       },
       set: function set(value) {
         if (value) {
+          player.autoHeight = false;
           player.autoSize = false;
           cacheStyle = $player.style.cssText;
           addClass($player, 'art-mini');
@@ -2217,6 +2223,7 @@
           setStyle($player, 'left', null);
           player.aspectRatio = false;
           player.playbackRate = false;
+          player.autoHeight = option.autoHeight;
           player.autoSize = option.autoSize;
           art.emit('mini');
         }
@@ -2350,6 +2357,32 @@
     });
   }
 
+  function autoHeightMix(art, player) {
+    var _art$template = art.template,
+        $container = _art$template.$container,
+        $video = _art$template.$video;
+    def(player, 'autoHeight', {
+      get: function get() {
+        return hasClass($container, 'art-auto-height');
+      },
+      set: function set(value) {
+        if (value) {
+          var clientWidth = $container.clientWidth;
+          var videoHeight = $video.videoHeight,
+              videoWidth = $video.videoWidth;
+          var 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');
+        }
+      }
+    });
+  }
+
   var Player = function Player(art) {
     _classCallCheck(this, Player);
 
@@ -2381,6 +2414,7 @@
     loopMin(art, this);
     rotateMix(art, this);
     posterMix(art, this);
+    autoHeightMix(art, this);
     proxyPropertys(art, this);
   };
 
@@ -3779,6 +3813,7 @@
         player = art.player;
     var resizeFn = throttle(function () {
       if (player.normalSize) {
+        player.autoHeight = option.autoHeight;
         player.autoSize = option.autoSize;
       }
 
@@ -4928,7 +4963,7 @@
     }, {
       key: "build",
       get: function get() {
-        return '1640651817041';
+        return '1640928352550';
       }
     }, {
       key: "config",
@@ -4981,6 +5016,7 @@
           autoplay: false,
           autoSize: false,
           autoMini: false,
+          autoHeight: false,
           loop: false,
           flip: false,
           rotate: false,

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.jLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screensLine truncated

packages/artplayer/src/events/resizeInit.js

@@ -5,6 +5,7 @@ export default function resizeInit(art, events) {
 
     const resizeFn = throttle(() => {
         if (player.normalSize) {
+            player.autoHeight = option.autoHeight;
             player.autoSize = option.autoSize;
         }
         player.aspectRatioReset = true;

packages/artplayer/src/index.js

@@ -126,6 +126,7 @@ export default class Artplayer extends Emitter {
             autoplay: false,
             autoSize: false,
             autoMini: false,
+            autoHeight: false,
             loop: false,
             flip: false,
             rotate: false,

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 = '';

packages/artplayer/src/scheme/index.js

@@ -39,6 +39,7 @@ export default {
     autoplay: b,
     autoSize: b,
     autoMini: b,
+    autoHeight: b,
     loop: b,
     flip: b,
     rotate: b,

packages/artplayer/types/artplayer.d.ts

@@ -212,6 +212,11 @@ type Option = {
      */
     autoMini?: boolean;
 
+    /**
+     * Set the container height based on the video length aspect ratio and the container width
+     */
+    autoHeight?: boolean;
+
     /**
      * Whether video auto loop
      */