调整组件嵌入规则

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,32 +1,32 @@
 import { inverseClass } from '../utils';
 
-export default function aspectRatio(art) {
-    const { option, i18n, player } = art;
-    return {
-        disable: !option.aspectRatio,
-        name: 'aspectRatio',
-        index: 20,
-        html: `
-          ${i18n.get('Aspect ratio')}:
-          <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
-          <span data-ratio="4:3">4:3</span>
-          <span data-ratio="16:9">16:9</span>
-        `,
-        click: event => {
-            const { target } = event;
-            const { ratio } = target.dataset;
-            if (ratio) {
-                player.aspectRatio(ratio.split(':'));
-                art.contextmenu.hide();
-            }
-        },
-        callback: $menu => {
-            art.on('aspectRatioChange', ratio => {
-                const $current = Array.from($menu.querySelectorAll('span')).find(
-                    item => item.dataset.ratio === ratio.join(':'),
-                );
-                inverseClass($current, 'current');
-            });
-        },
+export default function aspectRatio(menuOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...menuOption,
+            html: `
+                ${i18n.get('Aspect ratio')}:
+                <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
+                <span data-ratio="4:3">4:3</span>
+                <span data-ratio="16:9">16:9</span>
+            `,
+            click: event => {
+                const { target } = event;
+                const { ratio } = target.dataset;
+                if (ratio) {
+                    player.aspectRatio(ratio.split(':'));
+                    art.contextmenu.hide();
+                }
+            },
+            mounted: $menu => {
+                art.on('aspectRatioChange', ratio => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => item.dataset.ratio === ratio.join(':'),
+                    );
+                    inverseClass($current, 'current');
+                });
+            },
+        };
     };
 }

packages/artplayer/src/contextmenu/close.js

@@ -1,11 +1,9 @@
-export default function close(art) {
-    return {
-        disable: false,
-        name: 'close',
-        index: 50,
+export default function close(menuOption) {
+    return art => ({
+        ...menuOption,
         html: art.i18n.get('Close'),
         click: () => {
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { append, insertByIndex, setStyles, setStyle } from '../utils';
+import { append, insertByIndex, setStyle } from '../utils';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -22,7 +22,35 @@ export default class Contextmenu {
             events: { proxy },
         } = this.art;
 
-        option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
+        this.add(playbackRate({
+            disable: !option.playbackRate,
+            name: 'playbackRate',
+            index: 10,
+        }));
+
+        this.add(aspectRatio({
+            disable: !option.aspectRatio,
+            name: 'aspectRatio',
+            index: 20,
+        }));
+
+        this.add(info({
+            disable: false,
+            name: 'info',
+            index: 30,
+        }));
+
+        this.add(version({
+            disable: false,
+            name: 'version',
+            index: 40,
+        }));
+
+        this.add(close({
+            disable: false,
+            name: 'close',
+            index: 50,
+        }));
 
         option.contextmenu.forEach(item => {
             this.add(item);
@@ -44,16 +72,17 @@ export default class Contextmenu {
     add(item, callback) {
         const menu = typeof item === 'function' ? item(this.art) : item;
         if (!menu.disable) {
-            id += 1;
             const {
                 refs: { $contextmenu },
                 events: { proxy },
             } = this.art;
+            id += 1;
             const name = menu.name || `contextmenu${id}`;
             const $menu = document.createElement('div');
             $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
-            setStyles($menu, menu.style || {});
-            append($menu, menu.html);
+            if (menu.html) {
+                append($menu, menu.html);
+            }
             if (menu.click) {
                 proxy($menu, 'click', event => {
                     event.preventDefault();
@@ -62,13 +91,13 @@ export default class Contextmenu {
                 });
             }
             insertByIndex($contextmenu, $menu, menu.index || id);
-            this[name] = $menu;
-            if (menu.callback) {
-                menu.callback($menu);
+            if (menu.mounted) {
+                menu.mounted($menu);
             }
             if (callback) {
                 callback($menu);
             }
+            this[name] = $menu;
             this.art.emit('contextmenu:add', $menu);
         }
     }

packages/artplayer/src/contextmenu/info.js

@@ -1,12 +1,10 @@
-export default function info(art) {
-    return {
-        disable: false,
-        name: 'info',
-        index: 30,
+export default function info(menuOption) {
+    return art => ({
+        ...menuOption,
         html: art.i18n.get('Video info'),
         click: () => {
             art.info.show();
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,35 +1,35 @@
 import { inverseClass } from '../utils';
 
-export default function playbackRate(art) {
-    const { option, i18n, player } = art;
-    return {
-        disable: !option.playbackRate,
-        name: 'playbackRate',
-        index: 10,
-        html: `
-          ${i18n.get('Play speed')}:
-          <span data-rate="0.5">0.5</span>
-          <span data-rate="0.75">0.75</span>
-          <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
-          <span data-rate="1.25">1.25</span>
-          <span data-rate="1.5">1.5</span>
-          <span data-rate="2.0">2.0</span>
-        `,
-        click: event => {
-            const { target } = event;
-            const { rate } = target.dataset;
-            if (rate) {
-                player.playbackRate(Number(rate));
-                art.contextmenu.hide();
-            }
-        },
-        callback: $menu => {
-            art.on('playbackRateChange', rate => {
-                const $current = Array.from($menu.querySelectorAll('span')).find(
-                    item => Number(item.dataset.rate) === rate,
-                );
-                inverseClass($current, 'current');
-            });
-        },
+export default function playbackRate(menuOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...menuOption,
+            html: `
+                ${i18n.get('Play speed')}:
+                <span data-rate="0.5">0.5</span>
+                <span data-rate="0.75">0.75</span>
+                <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
+                <span data-rate="1.25">1.25</span>
+                <span data-rate="1.5">1.5</span>
+                <span data-rate="2.0">2.0</span>
+            `,
+            click: event => {
+                const { target } = event;
+                const { rate } = target.dataset;
+                if (rate) {
+                    player.playbackRate(Number(rate));
+                    art.contextmenu.hide();
+                }
+            },
+            mounted: $menu => {
+                art.on('playbackRateChange', rate => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => Number(item.dataset.rate) === rate,
+                    );
+                    inverseClass($current, 'current');
+                });
+            },
+        };
     };
 }

packages/artplayer/src/contextmenu/version.js

@@ -1,6 +1,6 @@
-export default {
-    disable: false,
-    name: 'version',
-    index: 40,
-    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
-};
+export default function version(menuOption) {
+    return {
+        ...menuOption,
+        html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
+    };
+}