提取共用方法

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function aspectRatio(menuOption) {
+export default function aspectRatio(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...menuOption,
+            ...option,
             html: `
                 ${i18n.get('Aspect ratio')}:
                 <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
@@ -12,8 +12,7 @@ export default function aspectRatio(menuOption) {
                 <span data-ratio="16:9">16:9</span>
             `,
             click: (contextmenu, event) => {
-                const { target } = event;
-                const { ratio } = target.dataset;
+                const { ratio } = event.target.dataset;
                 if (ratio) {
                     player.aspectRatio = ratio;
                     contextmenu.show = false;
@@ -21,10 +20,10 @@ export default function aspectRatio(menuOption) {
             },
             mounted: $menu => {
                 art.on('aspectRatioChange', ratio => {
-                    const $current = Array.from($menu.querySelectorAll('span')).find(
-                        item => item.dataset.ratio === ratio,
-                    );
-                    inverseClass($current, 'current');
+                    const $current = queryAll('span', $menu).find(item => item.dataset.ratio === ratio);
+                    if ($current) {
+                        inverseClass($current, 'current');
+                    }
                 });
             },
         };

packages/artplayer/src/contextmenu/close.js

@@ -1,6 +1,6 @@
-export default function close(menuOption) {
+export default function close(option) {
     return art => ({
-        ...menuOption,
+        ...option,
         html: art.i18n.get('Close'),
         click: contextmenu => {
             contextmenu.show = false;

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { setStyle } from '../utils';
+import { setStyle, addClass, removeClass } from '../utils';
 import component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -26,35 +26,45 @@ export default class Contextmenu {
             events: { proxy },
         } = this.art;
 
-        this.add(playbackRate({
-            disable: !option.playbackRate,
-            name: 'playbackRate',
-            index: 10,
-        }));
+        this.add(
+            playbackRate({
+                disable: !option.playbackRate,
+                name: 'playbackRate',
+                index: 10,
+            }),
+        );
 
-        this.add(aspectRatio({
-            disable: !option.aspectRatio,
-            name: 'aspectRatio',
-            index: 20,
-        }));
+        this.add(
+            aspectRatio({
+                disable: !option.aspectRatio,
+                name: 'aspectRatio',
+                index: 20,
+            }),
+        );
 
-        this.add(info({
-            disable: false,
-            name: 'info',
-            index: 30,
-        }));
+        this.add(
+            info({
+                disable: false,
+                name: 'info',
+                index: 30,
+            }),
+        );
 
-        this.add(version({
-            disable: false,
-            name: 'version',
-            index: 40,
-        }));
+        this.add(
+            version({
+                disable: false,
+                name: 'version',
+                index: 40,
+            }),
+        );
 
-        this.add(close({
-            disable: false,
-            name: 'close',
-            index: 50,
-        }));
+        this.add(
+            close({
+                disable: false,
+                name: 'close',
+                index: 50,
+            }),
+        );
 
         option.contextmenu.forEach(item => {
             this.add(item);
@@ -104,11 +114,11 @@ export default class Contextmenu {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-contextmenu-show');
+            addClass($player, 'artplayer-contextmenu-show');
             this.art.emit('contextmenu:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-contextmenu-show');
+            removeClass($player, 'artplayer-contextmenu-show');
             this.art.emit('contextmenu:hide');
         }
     }

packages/artplayer/src/contextmenu/info.js

@@ -1,6 +1,6 @@
-export default function info(menuOption) {
+export default function info(option) {
     return art => ({
-        ...menuOption,
+        ...option,
         html: art.i18n.get('Video info'),
         click: contextmenu => {
             art.info.show = true;

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function playbackRate(menuOption) {
+export default function playbackRate(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...menuOption,
+            ...option,
             html: `
                 ${i18n.get('Play speed')}:
                 <span data-rate="0.5">0.5</span>
@@ -15,8 +15,7 @@ export default function playbackRate(menuOption) {
                 <span data-rate="2.0">2.0</span>
             `,
             click: (contextmenu, event) => {
-                const { target } = event;
-                const { rate } = target.dataset;
+                const { rate } = event.target.dataset;
                 if (rate) {
                     player.playbackRate = Number(rate);
                     contextmenu.show = false;
@@ -24,9 +23,7 @@ export default function playbackRate(menuOption) {
             },
             mounted: $menu => {
                 art.on('playbackRateChange', rate => {
-                    const $current = Array.from($menu.querySelectorAll('span')).find(
-                        item => Number(item.dataset.rate) === rate,
-                    );
+                    const $current = queryAll('span', $menu).find(item => Number(item.dataset.rate) === rate);
                     if ($current) {
                         inverseClass($current, 'current');
                     }

packages/artplayer/src/contextmenu/version.js

@@ -1,6 +1,6 @@
-export default function version(menuOption) {
+export default function version(option) {
     return {
-        ...menuOption,
+        ...option,
         html: '<a href="https://artplayer.org" target="_blank">ArtPlayer __VERSION__</a>',
     };
 }