优化互斥关系

packages/artplayer/src/player/aspectRatioMix.js

@@ -19,6 +19,7 @@ export default function aspectRatioMix(art, player) {
                     `'aspectRatio' only accept ${ratioList.toString()} as parameters`,
                 );
 
+                player.rotate = 0;
                 if (ratio === 'default') {
                     player.aspectRatio = false;
                 } else {
@@ -48,7 +49,7 @@ export default function aspectRatioMix(art, player) {
                 setStyle($video, 'height', null);
                 setStyle($video, 'padding', null);
                 delete $player.dataset.aspectRatio;
-                art.emit('aspectRatio');
+                art.emit('aspectRatio', 'default');
             }
         },
     });

packages/artplayer/src/player/flipMix.js

@@ -10,11 +10,16 @@ export default function flipMix(art, player) {
             if (flip) {
                 const flipList = ['normal', 'horizontal', 'vertical'];
                 errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
-                $player.dataset.flip = flip;
-                art.emit('flip', flip);
+                player.rotate = 0;
+                if (flip === 'normal') {
+                    player.flip = false;
+                } else {
+                    $player.dataset.flip = flip;
+                    art.emit('flip', flip);
+                }
             } else {
                 delete $player.dataset.flip;
-                art.emit('flip');
+                art.emit('flip', 'normal');
             }
         },
     });

packages/artplayer/src/player/rotateMix.js

@@ -1,7 +1,44 @@
-import { def } from '../utils';
+import { setStyle, errorHandle, def } from '../utils';
 
 export default function rotateMix(art, player) {
+    const {
+        template: { $video, $player },
+        i18n,
+        notice,
+    } = art;
+
     def(player, 'rotate', {
-        get: () => 'rotate',
+        get: () => Number($player.dataset.rotate) || 0,
+        set: (deg) => {
+            const degList = [-270, -180, -90, 0, 90, 180, 270];
+            errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
+            player.flip = false;
+            player.aspectRatio = false;
+            notice.show = `${i18n.get('Rotate')}: ${deg}°`;
+
+            if (deg) {
+                const { videoWidth, videoHeight } = $video;
+                const { clientWidth, clientHeight } = $player;
+                const degFormat = deg < 0 ? deg + 360 : deg;
+
+                $player.dataset.rotate = deg;
+                art.emit('rotate', deg);
+            } else {
+                setStyle($video, 'width', null);
+                setStyle($video, 'height', null);
+                setStyle($video, 'padding', null);
+                delete $player.dataset.rotate;
+                art.emit('rotate', 0);
+            }
+        },
+    });
+
+    def(player, 'rotateReset', {
+        set(value) {
+            if (value && player.rotate) {
+                const { rotate } = player;
+                player.rotate = rotate;
+            }
+        },
     });
 }