update

packages/artplayer/src/setting/index.js

@@ -1,7 +1,4 @@
 import Component from '../utils/component';
-import flip from './flip';
-import rotate from './rotate';
-import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 
 export default class Setting extends Component {
@@ -12,51 +9,14 @@ export default class Setting extends Component {
 
         const {
             option,
-            template: { $setting, $settingBody },
-            events: { proxy },
+            template: { $setting },
         } = art;
 
-        this.$parent = $settingBody;
+        this.$parent = $setting;
 
         if (option.setting) {
             art.once('ready', () => {
-                proxy($setting, 'click', (event) => {
-                    if (event.target === $setting) {
-                        this.show = false;
-                    }
-                });
-
-                this.add(
-                    flip({
-                        disable: !option.flip,
-                        name: 'flip',
-                    }),
-                );
-
-                this.add(
-                    rotate({
-                        disable: !option.rotate,
-                        name: 'rotate',
-                    }),
-                );
-
-                this.add(
-                    aspectRatio({
-                        disable: !option.aspectRatio,
-                        name: 'aspectRatio',
-                    }),
-                );
-
-                this.add(
-                    playbackRate({
-                        disable: !option.playbackRate,
-                        name: 'playbackRate',
-                    }),
-                );
-
-                for (let index = 0; index < option.settings.length; index++) {
-                    this.add(option.settings[index]);
-                }
+                this.add(playbackRate(art));
             });
 
             art.on('blur', () => {
@@ -64,4 +24,8 @@ export default class Setting extends Component {
             });
         }
     }
+
+    add(option) {
+        console.log(option);
+    }
 }

packages/artplayer/src/setting/playbackRate.js

@@ -1,37 +1,28 @@
-import { query } from '../utils';
+export default function playbackRate(art) {
+    const { i18n } = art;
 
-export default function playbackRate(option) {
-    return (art) => {
-        const {
-            i18n,
-            events: { proxy },
-        } = art;
-        return {
-            ...option,
-            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" value="1" type="range" min="0.5" max="2" step="0.25">
-                </div>
-            `,
-            mounted: ($setting) => {
-                const $range = query('.art-setting-range input', $setting);
-                const $value = query('.art-subtitle-value', $setting);
-                proxy($range, 'change', () => {
-                    const { value } = $range;
-                    $value.innerText = value;
-                    art.playbackRate = Number(value);
-                });
-
-                art.on('playbackRate', (rate) => {
-                    if (rate && $range.value !== rate) {
-                        $range.value = rate;
-                        $value.innerText = rate;
-                    }
-                });
+    return {
+        html: i18n.get('Play speed'),
+        click: () => console.log(0),
+        items: [
+            {
+                html: '111',
+                click: () => console.log(1),
             },
-        };
+            {
+                html: '222',
+                click: () => console.log(2),
+                items: [
+                    {
+                        html: '333',
+                        click: () => console.log(3),
+                    },
+                    {
+                        html: '444',
+                        click: () => console.log(4),
+                    },
+                ],
+            },
+        ],
     };
 }