add autoOrientation

packages/artplayer/src/plugins/autoOrientation.js

@@ -0,0 +1,35 @@
+import { setStyle } from '../utils';
+
+export default function autoOrientation(art) {
+    const {
+        option,
+        template: { $player, $video },
+    } = art;
+
+    art.on('fullscreenWeb', (state) => {
+        if (state) {
+            const { videoWidth, videoHeight } = $video;
+            const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
+            if (
+                (videoWidth > videoHeight && viewWidth < viewHeight) ||
+                (videoWidth < videoHeight && viewWidth > viewHeight)
+            ) {
+                setStyle($player, 'width', `${viewHeight}px`);
+                setStyle($player, 'height', `${viewWidth}px`);
+                setStyle($player, 'transform', `rotate(90deg) translate(0,-${viewWidth}px)`);
+                setStyle($player, 'transform-origin', '0 0');
+            }
+        } else {
+            setStyle($player, 'width', null);
+            setStyle($player, 'height', null);
+            setStyle($player, 'transform', null);
+            setStyle($player, 'transform-origin', null);
+            art.autoSize = option.autoSize;
+            art.notice.show = '';
+        }
+    });
+
+    return {
+        name: 'autoOrientation',
+    };
+}

packages/artplayer/src/plugins/index.js

@@ -1,5 +1,6 @@
 import { errorHandle, isMobile, has, def } from '../utils';
 import miniProgressBar from './miniProgressBar';
+import autoOrientation from './autoOrientation';
 import autoPlayback from './autoPlayback';
 import lock from './lock';
 
@@ -22,6 +23,10 @@ export default class Plugins {
             this.add(autoPlayback);
         }
 
+        if (isMobile) {
+            this.add(autoOrientation);
+        }
+
         for (let index = 0; index < option.plugins.length; index++) {
             this.add(option.plugins[index]);
         }