add autoOrientation state

packages/artplayer-document/docs/en/Options.md

@@ -1074,4 +1074,21 @@ var art = new Artplayer({
     autoplay: true,
     autoPlayback: true,
 });
+```
+
+## autoOrientation
+
+-   Type: `Boolean`
+-   Default: `false`
+
+Whether to rotate the player according to the video size and viewport size, when the player web-fullscreen in mobile
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
 ```

packages/artplayer-document/docs/zh-cn/Options.md

@@ -1076,3 +1076,20 @@ var art = new Artplayer({
     autoPlayback: true,
 });
 ```
+
+## autoOrientation
+
+-   类型: `Boolean`
+-   默认: `false`
+
+是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
+```

packages/artplayer/src/index.js

@@ -148,6 +148,7 @@ export default class Artplayer extends Emitter {
             playsInline: true,
             lock: true,
             autoPlayback: false,
+            autoOrientation: false,
             ads: [],
             layers: [],
             contextmenu: [],

packages/artplayer/src/plugins/autoOrientation.js

@@ -1,4 +1,4 @@
-import { setStyle } from '../utils';
+import { setStyle, addClass, removeClass, hasClass } from '../utils';
 
 export default function autoOrientation(art) {
     const {
@@ -14,22 +14,33 @@ export default function autoOrientation(art) {
                 (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');
+                // There is a conflict with the fullscreen event, and it is changed to asynchronous execution
+                setTimeout(() => {
+                    setStyle($player, 'width', `${viewHeight}px`);
+                    setStyle($player, 'height', `${viewWidth}px`);
+                    setStyle($player, 'transform-origin', '0 0');
+                    setStyle($player, 'transform', `rotate(90deg) translate(0, -${viewWidth}px)`);
+                    addClass($player, 'art-auto-orientation');
+                }, 100);
             }
         } 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 = '';
+            if (hasClass($player, 'art-auto-orientation')) {
+                setStyle($player, 'width', null);
+                setStyle($player, 'height', null);
+                setStyle($player, 'transform', null);
+                setStyle($player, 'transform-origin', null);
+                removeClass($player, 'art-auto-orientation');
+                art.aspectRatioReset = true;
+                art.autoSize = option.autoSize;
+                art.notice.show = '';
+            }
         }
     });
 
     return {
         name: 'autoOrientation',
+        get state() {
+            return hasClass($player, 'art-auto-orientation');
+        },
     };
 }

packages/artplayer/src/plugins/index.js

@@ -23,7 +23,7 @@ export default class Plugins {
             this.add(autoPlayback);
         }
 
-        if (isMobile) {
+        if (option.autoOrientation && isMobile) {
             this.add(autoOrientation);
         }
 

packages/artplayer/src/scheme/index.js

@@ -58,6 +58,7 @@ export default {
     playsInline: b,
     lock: b,
     autoPlayback: b,
+    autoOrientation: b,
     ads: [
         {
             url: s,

packages/artplayer/types/artplayer.d.ts

@@ -334,6 +334,11 @@ type Option = {
      */
     autoPlayback?: boolean;
 
+    /**
+     * Whether use auto orientation in mobile
+     */
+    autoOrientation?: boolean;
+
     /**
      * Custom plugin list
      */