完成rotate

packages/artplayer/src/player/flipMix.js

@@ -20,6 +20,7 @@ export default function flipMix(art, player) {
             if (flip === 'normal') {
                 delete $player.dataset.flip;
             } else {
+                player.rotate = false;
                 $player.dataset.flip = flip;
             }
 

packages/artplayer/src/player/rotateMix.js

@@ -16,15 +16,50 @@ export default function rotateMix(art, player) {
             errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
 
             if (deg === 0) {
-                setStyle($video, 'width', null);
-                setStyle($video, 'height', null);
-                setStyle($video, 'padding', null);
                 delete $player.dataset.rotate;
+                setStyle($video, 'transform', null);
             } else {
-                const { videoWidth, videoHeight } = $video;
-                const { clientWidth, clientHeight } = $player;
-                const degFormat = deg < 0 ? deg + 360 : deg;
+                player.flip = false;
                 $player.dataset.rotate = deg;
+
+                const getScaleValue = () => {
+                    const { clientWidth: videoWidth, clientHeight: videoHeight } = $video;
+                    const { clientWidth: playerWidth, clientHeight: playerHeight } = $player;
+                    const playerRatio = playerWidth / playerHeight;
+                    const videoRatio = videoWidth / videoHeight;
+                    return playerRatio > videoRatio ? playerWidth / videoHeight : playerHeight / videoWidth;
+                };
+
+                let degValue = 0;
+                let scaleValue = 1;
+                switch (deg) {
+                    case -270:
+                        degValue = 90;
+                        scaleValue = getScaleValue();
+                        break;
+                    case -180:
+                        degValue = 180;
+                        break;
+                    case -90:
+                        degValue = 270;
+                        scaleValue = getScaleValue();
+                        break;
+                    case 90:
+                        degValue = 90;
+                        scaleValue = getScaleValue();
+                        break;
+                    case 180:
+                        degValue = 180;
+                        break;
+                    case 270:
+                        degValue = 270;
+                        scaleValue = getScaleValue();
+                        break;
+                    default:
+                        break;
+                }
+
+                setStyle($video, 'transform', `rotate(${degValue}deg) scale(${scaleValue})`);
             }
 
             notice.show = `${i18n.get('Rotate')}: ${deg}°`;

packages/artplayer/src/style/artplayer.scss

@@ -21,6 +21,7 @@
     zoom: 1;
     font-family: Roboto, Arial, Helvetica, sans-serif;
     color: #eee;
+    background-color: #000;
     text-align: left;
     direction: ltr;
     font-size: 14px;

packages/artplayer/src/style/index.scss

@@ -17,6 +17,5 @@
 @import './mini.scss';
 @import './autoSize.scss';
 @import './flip.scss';
-@import './rotate.scss';
 @import './selector.scss';
 @import './balloon.scss';

packages/artplayer/src/style/rotate.scss

@@ -1,22 +0,0 @@
-.art-video-player {
-    &[data-rotate='90'],
-    &[data-rotate='-270'] {
-        .art-video {
-            transform: rotate(90deg);
-        }
-    }
-
-    &[data-rotate='180'],
-    &[data-rotate='-180'] {
-        .art-video {
-            transform: rotate(180deg);
-        }
-    }
-
-    &[data-rotate='270'],
-    &[data-rotate='-90'] {
-        .art-video {
-            transform: rotate(270deg);
-        }
-    }
-}