添加自动旋转全屏

packages/artplayer/src/player/fullscreenRotateMix.js

@@ -0,0 +1,40 @@
+import { addClass, removeClass, hasClass, def, setStyle } from '../utils';
+
+export default function fullscreenRotateMix(art, player) {
+    const { $container, $player } = art.template;
+
+    def(player, 'fullscreenRotate', {
+        get() {
+            return hasClass($container, 'art-fullscreen-rotate');
+        },
+        set: (value) => {
+            if (value) {
+                addClass($container, 'art-fullscreen-rotate');
+                player.autoSize = true;
+                const { clientHeight: bodyHeight, clientWidth: bodyWidth } = document.body;
+                const { clientHeight: playerHeight, clientWidth: playerWidth } = $player;
+                const bodyRatio = bodyWidth / bodyHeight;
+                const videoRatio = playerWidth / playerHeight;
+                const needSpin = bodyRatio < videoRatio;
+                if (needSpin) {
+                    const scale = Math.min(bodyHeight / playerWidth, bodyWidth / playerHeight).toFixed(2);
+                    setStyle($player, 'transform', `rotate(90deg) scale(${scale},${scale})`);
+                    art.emit('fullscreenRotateChange', true);
+                }
+            } else {
+                removeClass($container, 'art-fullscreen-rotate');
+                player.autoSize = art.option.autoSize;
+                setStyle($player, 'transform', null);
+                art.emit('fullscreenRotateChange', false);
+            }
+        },
+    });
+
+    def(player, 'fullscreenRotateToggle', {
+        set(value) {
+            if (value) {
+                player.fullscreenRotate = !player.fullscreenRotate;
+            }
+        },
+    });
+}

packages/artplayer/src/player/fullscreenWebMix.js

@@ -5,7 +5,7 @@ export default function fullscreenWebMix(art, player) {
 
     def(player, 'fullscreenWeb', {
         get() {
-            return hasClass($player, 'art-web-fullscreen');
+            return hasClass($player, 'art-fullscreen-web');
         },
         set(value) {
             if (player.fullscreen) {
@@ -13,11 +13,11 @@ export default function fullscreenWebMix(art, player) {
             }
 
             if (value) {
-                addClass($player, 'art-web-fullscreen');
+                addClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebChange', true);
             } else {
-                removeClass($player, 'art-web-fullscreen');
+                removeClass($player, 'art-fullscreen-web');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebChange', false);
             }

packages/artplayer/src/player/index.js

@@ -14,6 +14,7 @@ import aspectRatioMix from './aspectRatioMix';
 import screenshotMix from './screenshotMix';
 import fullscreenMix from './fullscreenMix';
 import fullscreenWebMix from './fullscreenWebMix';
+import fullscreenRotateMix from './fullscreenRotateMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
@@ -42,6 +43,7 @@ export default class Player {
         screenshotMix(art, this);
         fullscreenMix(art, this);
         fullscreenWebMix(art, this);
+        fullscreenRotateMix(art, this);
         pipMix(art, this);
         loadedMix(art, this);
         playedMix(art, this);