优化互斥关系

packages/artplayer/src/setting/index.js

@@ -1,5 +1,6 @@
 import Component from '../utils/component';
 import flip from './flip';
+import rotate from './rotate';
 import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 
@@ -32,6 +33,13 @@ export default class Setting extends Component {
                     }),
                 );
 
+                this.add(
+                    rotate({
+                        disable: !option.rotate,
+                        name: 'rotate',
+                    }),
+                );
+
                 this.add(
                     aspectRatio({
                         disable: !option.aspectRatio,

packages/artplayer/src/setting/rotate.js

@@ -0,0 +1,42 @@
+import { query } from '../utils';
+
+export default function rotate(option) {
+    return (art) => {
+        const { i18n, player } = art;
+        return {
+            ...option,
+            html: `
+                <div class="art-setting-header">
+                    ${i18n.get('Rotate')}: <span class="art-rotate-value">0°</span>
+                </div>
+                <div class="art-setting-radio">
+                    <div class="art-radio-item">
+                        <button type="button" data-value="90">+90°</button>
+                    </div>
+                    <div class="art-radio-item">
+                        <button type="button" data-value="-90">-90°</button>
+                    </div>
+                </div>
+            `,
+            click: (setting, event) => {
+                const { value } = event.target.dataset;
+                if (value) {
+                    const deg = player.rotate + Number(value);
+                    if (deg === 360 || deg === -360) {
+                        player.rotate = 0;
+                    } else {
+                        player.rotate = deg;
+                    }
+                } else {
+                    player.rotate = 0;
+                }
+            },
+            mounted: ($setting) => {
+                const $value = query('.art-rotate-value', $setting);
+                art.on('rotate', (rotate) => {
+                    $value.innerText = `${rotate}°`;
+                });
+            },
+        };
+    };
+}