添加更多设置项

packages/artplayer/src/setting/aspectRatio.js

@@ -0,0 +1,38 @@
+import { inverseClass } from '../utils';
+
+export default function aspectRatio(settingOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...settingOption,
+            html: `
+                <div class="art-setting-header">${i18n.get('Aspect ratio')}</div>
+                <div class="art-setting-radio">
+                    <div class="art-radio-item current">
+                        <button type="button" data-value="default">${i18n.get('Default')}</button>
+                    </div>
+                    <div class="art-radio-item">
+                        <button type="button" data-value="4:3">4:3</button>
+                    </div>
+                    <div class="art-radio-item">
+                        <button type="button" data-value="16:9">16:9</button>
+                    </div>
+                </div>
+            `,
+            click: event => {
+                const { value } = event.target.dataset;
+                if (value) {
+                    player.aspectRatio(value);
+                }
+            },
+            mounted: $setting => {
+                art.on('aspectRatioChange', ratio => {
+                    const $current = Array.from($setting.querySelectorAll('button')).find(
+                        item => item.dataset.value === ratio,
+                    );
+                    inverseClass($current.parentElement, 'current');
+                });
+            },
+        };
+    };
+}

packages/artplayer/src/setting/index.js

@@ -1,5 +1,7 @@
 import component from '../utils/component';
 import flip from './flip';
+import aspectRatio from './aspectRatio';
+import playbackRate from './playbackRate';
 
 export default class Setting {
     constructor(art) {
@@ -33,7 +35,23 @@ export default class Setting {
             flip({
                 disable: false,
                 name: 'flip',
-                index: 10,
+                index: 1,
+            }),
+        );
+
+        this.add(
+            aspectRatio({
+                disable: false,
+                name: 'aspectRatio',
+                index: 2,
+            }),
+        );
+
+        this.add(
+            playbackRate({
+                disable: false,
+                name: 'playbackRate',
+                index: 3,
             }),
         );
     }

packages/artplayer/src/setting/playbackRate.js

@@ -0,0 +1,29 @@
+export default function playbackRate(settingOption) {
+    return art => {
+        const {
+            i18n,
+            player,
+            events: { proxy },
+        } = art;
+        return {
+            ...settingOption,
+            html: `
+                <div class="art-setting-header">
+                    ${i18n.get('Play speed')}: <span class="art-subtitle-value">1.0</span>x
+                </div>
+                <div class="art-setting-range">
+                    <input class="art-subtitle-range" type="range" min="0.5" max="2" step="0.25">
+                </div>
+            `,
+            mounted: $setting => {
+                const $range = $setting.querySelector('.art-setting-range input');
+                const $value = $setting.querySelector('.art-subtitle-value');
+                proxy($range, 'change', () => {
+                    const { value } = $range;
+                    $value.innerText = value;
+                    player.playbackRate(Number(value));
+                });
+            },
+        };
+    };
+}