ArtPlayer/packages/artplayer/src/player/rotateMix.js

import { setStyle, errorHandle, def } from '../utils';

export default function rotateMix(art, player) {
    const {
        template: { $video, $player },
        i18n,
        notice,
    } = art;

    def(player, 'rotate', {
        get: () => Number($player.dataset.rotate) || 0,
        set: (deg) => {
            if (!deg) deg = 0;

            const degList = [-270, -180, -90, 0, 90, 180, 270];
            errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);

            if (deg === 0) {
                delete $player.dataset.rotate;
                setStyle($video, 'transform', null);
            } else {
                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}°`;
            art.emit('rotate', deg);
        },
    });

    def(player, 'rotateReset', {
        set(value) {
            if (value && player.rotate) {
                const { rotate } = player;
                player.rotate = rotate;
            }
        },
    });
}