分离所有默认菜单

src/contextmenu.js

@@ -1,159 +0,0 @@
-import { append, setStyles, setStyle, sublings } from './utils';
-
-let id = 0;
-export default class Contextmenu {
-  constructor(art) {
-    this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { option, player, i18n, refs, events: { proxy } } = this.art;
-
-    option.contextmenu.push(
-      {
-        disable: !option.playbackRate,
-        name: 'playbackRate',
-        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: (art, event) => {
-          const { target } = event;
-          const { rate } = target.dataset;
-          if (rate) {
-            player.playbackRate(Number(rate));
-            sublings(target).forEach(item => item.classList.remove('current'));
-            target.classList.add('current');
-            this.hide();
-          }
-        }
-      },
-      {
-        disable: !option.aspectRatio,
-        name: 'aspectRatio',
-        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: (art, event) => {
-          const { target } = event;
-          const { ratio } = target.dataset;
-          if (ratio) {
-            player.aspectRatio(ratio.split(':'));
-            sublings(target).forEach(item => item.classList.remove('current'));
-            target.classList.add('current');
-            this.hide();
-          }
-        }
-      },
-      {
-        disable: false,
-        name: 'info',
-        html: i18n.get('Video info'),
-        click: () => {
-          this.art.info.show();
-          this.hide();
-        }
-      },
-      {
-        disable: false,
-        name: 'version',
-        html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>'
-      },
-      {
-        disable: false,
-        name: 'close',
-        html: i18n.get('Close'),
-        click: () => {
-          this.hide();
-        }
-      }
-    );
-
-    proxy(refs.$player, 'contextmenu', event => {
-      event.preventDefault();
-      this.art.isFocus = true;
-      if (!refs.$contextmenu) {
-        this.creatMenu();
-      }
-      this.show();
-      this.setPos(event);
-    });
-
-    proxy(refs.$player, 'click', event => {
-      if (refs.$contextmenu && !event.path.includes(refs.$contextmenu)) {
-        this.hide();
-      }
-    });
-  }
-
-  creatMenu() {
-    const { option, refs, events: { proxy } } = this.art;
-    refs.$contextmenu = document.createElement('div');
-    refs.$contextmenu.classList.add('artplayer-contextmenu');
-    option.contextmenu
-      .filter(item => !item.disable)
-      .forEach(item => {
-        id++;
-        const $menu = document.createElement('div');
-        $menu.setAttribute('data-art-menu-id', id);
-        $menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
-        append($menu, item.html);
-        setStyles($menu, item.style || {});
-        if (item.click) {
-          proxy($menu, 'click', event => {
-            event.preventDefault();
-            item.click(this.art, event);
-            this.art.emit('contextmenu:click', $menu);
-          });
-        }
-        this[`$${item.name || id}`] = append(refs.$contextmenu, $menu);
-      });
-    append(refs.$player, refs.$contextmenu);
-  }
-
-  setPos(event) {
-    const { refs } = this.art;
-    const mouseX = event.clientX;
-    const mouseY = event.clientY;
-    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$player.getBoundingClientRect();
-    const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
-    let menuLeft = mouseX - cLeft;
-    let menuTop = mouseY - cTop;
-
-    if (mouseX + mWidth > cLeft + cWidth) {
-      menuLeft = cWidth - mWidth;
-    }
-
-    if (mouseY + mHeight > cTop + cHeight) {
-      menuTop = cHeight - mHeight;
-    }
-
-    setStyle(refs.$contextmenu, 'left', `${menuLeft}px`);
-    setStyle(refs.$contextmenu, 'top', `${menuTop}px`);
-  }
-
-  hide() {
-    const { refs: { $contextmenu } } = this.art;
-    if ($contextmenu) {
-      setStyle($contextmenu, 'display', 'none');
-      this.art.emit('contextmenu:hide', $contextmenu);
-    }
-  }
-
-  show() {
-    const { refs: { $contextmenu } } = this.art;
-    if ($contextmenu) {
-      setStyle($contextmenu, 'display', 'block');
-      this.art.emit('contextmenu:show', $contextmenu);
-    }
-  }
-}

src/contextmenu/aspectRatio.js

@@ -0,0 +1,25 @@
+import { sublings } from '../utils';
+
+export default function aspectRatio(art) {
+  const { option, i18n, player, contextmenu } = art;
+  return {
+    disable: !option.aspectRatio,
+    name: 'aspectRatio',
+    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(':'));
+        sublings(target).forEach(item => item.classList.remove('current'));
+        target.classList.add('current');
+        contextmenu.hide();
+      }
+    }
+  };
+}

src/contextmenu/close.js

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

src/contextmenu/index.js

@@ -0,0 +1,105 @@
+import { append, setStyles, setStyle } from '../utils';
+import playbackRate from './playbackRate';
+import aspectRatio from './aspectRatio';
+import info from './info';
+import version from './version';
+import close from './close';
+
+let id = 0;
+export default class Contextmenu {
+  constructor(art) {
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    const { option, refs, events: { proxy } } = this.art;
+
+    option.contextmenu.push(
+      playbackRate,
+      aspectRatio,
+      info,
+      version,
+      close
+    );
+
+    proxy(refs.$player, 'contextmenu', event => {
+      event.preventDefault();
+      this.art.isFocus = true;
+      if (!refs.$contextmenu) {
+        this.creatMenu();
+      }
+      this.show();
+      this.setPos(event);
+    });
+
+    proxy(refs.$player, 'click', event => {
+      if (refs.$contextmenu && !event.path.includes(refs.$contextmenu)) {
+        this.hide();
+      }
+    });
+  }
+
+  creatMenu() {
+    const { option, refs, events: { proxy } } = this.art;
+    refs.$contextmenu = document.createElement('div');
+    refs.$contextmenu.classList.add('artplayer-contextmenu');
+    option.contextmenu
+      .filter(item => !item.disable)
+      .forEach(item => {
+        id++;
+        const menu = typeof item === 'function' ? item(this.art) : item;
+        const $menu = document.createElement('div');
+        $menu.setAttribute('data-art-menu-id', id);
+        $menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
+        append($menu, menu.html);
+        setStyles($menu, menu.style || {});
+        if (menu.click) {
+          proxy($menu, 'click', event => {
+            event.preventDefault();
+            menu.click(event);
+            this.art.emit('contextmenu:click', $menu);
+          });
+        }
+        this[`$${menu.name || id}`] = append(refs.$contextmenu, $menu);
+      });
+    append(refs.$player, refs.$contextmenu);
+  }
+
+  setPos(event) {
+    const { refs } = this.art;
+    const mouseX = event.clientX;
+    const mouseY = event.clientY;
+    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$player.getBoundingClientRect();
+    const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
+    let menuLeft = mouseX - cLeft;
+    let menuTop = mouseY - cTop;
+
+    if (mouseX + mWidth > cLeft + cWidth) {
+      menuLeft = cWidth - mWidth;
+    }
+
+    if (mouseY + mHeight > cTop + cHeight) {
+      menuTop = cHeight - mHeight;
+    }
+
+    setStyle(refs.$contextmenu, 'left', `${menuLeft}px`);
+    setStyle(refs.$contextmenu, 'top', `${menuTop}px`);
+  }
+
+  hide() {
+    const { refs: { $contextmenu } } = this.art;
+    if ($contextmenu) {
+      setStyle($contextmenu, 'display', 'none');
+      this.art.emit('contextmenu:hide', $contextmenu);
+    }
+  }
+
+  show() {
+    const { refs: { $contextmenu } } = this.art;
+    if ($contextmenu) {
+      setStyle($contextmenu, 'display', 'block');
+      this.art.emit('contextmenu:show', $contextmenu);
+    }
+  }
+}

src/contextmenu/info.js

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

src/contextmenu/playbackRate.js

@@ -0,0 +1,28 @@
+import { sublings } from '../utils';
+
+export default function playbackRate(art) {
+  const { option, i18n, player, contextmenu } = art;
+  return {
+    disable: !option.playbackRate,
+    name: 'playbackRate',
+    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));
+        sublings(target).forEach(item => item.classList.remove('current'));
+        target.classList.add('current');
+        contextmenu.hide();
+      }
+    }
+  };
+}

src/contextmenu/version.js

@@ -0,0 +1,5 @@
+export default {
+  disable: false,
+  name: 'version',
+  html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>'
+};

src/controls/danmu.js

@@ -17,12 +17,12 @@ export default class Danmu {
     proxy(this.$danmu, 'click', () => {
       danmu.hide();
       setStyle(this.$danmu, 'display', 'none');
-      setStyle(this.$danmuClose, 'display', 'block');
+      setStyle(this.$danmuClose, 'display', 'flex');
     });
 
     proxy(this.$danmuClose, 'click', () => {
       danmu.show();
-      setStyle(this.$danmu, 'display', 'block');
+      setStyle(this.$danmu, 'display', 'flex');
       setStyle(this.$danmuClose, 'display', 'none');
     });
   }

src/controls/subtitle.js

@@ -17,12 +17,12 @@ export default class Subtitle {
     proxy(this.$subtitle, 'click', () => {
       subtitle.hide();
       setStyle(this.$subtitle, 'display', 'none');
-      setStyle(this.$subtitleClose, 'display', 'block');
+      setStyle(this.$subtitleClose, 'display', 'flex');
     });
 
     proxy(this.$subtitleClose, 'click', () => {
       subtitle.show();
-      setStyle(this.$subtitle, 'display', 'block');
+      setStyle(this.$subtitle, 'display', 'flex');
       setStyle(this.$subtitleClose, 'display', 'none');
     });
   }

src/danmu.js

@@ -11,14 +11,16 @@ export default class Danmu {
   }
 
   show() {
-    const { $danmu } = this.art.refs;
+    const { refs: { $danmu }, i18n, notice } = this.art;
     setStyle($danmu, 'display', 'block');
+    notice.show(i18n.get('Show danmu'));
     this.art.emit('danmu:show', $danmu);
   }
 
   hide() {
-    const { $danmu } = this.art.refs;
+    const { refs: { $danmu }, i18n, notice } = this.art;
     setStyle($danmu, 'display', 'none');
+    notice.show(i18n.get('Hide danmu'));
     this.art.emit('danmu:hide', $danmu);
   }
 }

src/i18n.js

@@ -12,8 +12,8 @@ let i18nMap = {
     'Reconnect': '重新连接',
     'Hide subtitle': '隐藏字幕',
     'Show subtitle': '显示字幕',
-    'Hide danmu': '隐藏彈幕',
-    'Show danmu': '显示彈幕',
+    'Hide danmu': '隐藏弹幕',
+    'Show danmu': '显示弹幕',
     'Screenshot': '截图',
     'Play speed': '播放速度',
     'Aspect ratio': '画面比例',

src/icons/danmu-close.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 100%; height: 100%; opacity: .5">
-    <path d="M 3 6 L 3 26 L 12.585938 26 L 16 29.414063 L 19.414063 26 L 29 26 L 29 6 Z M 5 8 L 27 8 L 27 24 L 18.585938 24 L 16 26.585938 L 13.414063 24 L 5 24 Z M 9 11 L 9 13 L 23 13 L 23 11 Z M 9 15 L 9 17 L 23 17 L 23 15 Z M 9 19 L 9 21 L 19 21 L 19 19 Z "/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" style="width: 85%; height: 85%; opacity: .5">
+	<path d="M54,2.5H6c-3.252,0-6,2.748-6,6v33c0,3.252,2.748,6,6,6h14.555l8.702,9.669C29.446,57.38,29.717,57.5,30,57.5 s0.554-0.12,0.743-0.331l8.702-9.669H54c3.252,0,6-2.748,6-6v-33C60,5.248,57.252,2.5,54,2.5z M16,28.5c-2.206,0-4-1.794-4-4 s1.794-4,4-4s4,1.794,4,4S18.206,28.5,16,28.5z M30,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S32.206,28.5,30,28.5z M44,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S46.206,28.5,44,28.5z"/>
 </svg>

src/icons/danmu.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 100%; height: 100%">
-    <path d="M 3 6 L 3 26 L 12.585938 26 L 16 29.414063 L 19.414063 26 L 29 26 L 29 6 Z M 5 8 L 27 8 L 27 24 L 18.585938 24 L 16 26.585938 L 13.414063 24 L 5 24 Z M 9 11 L 9 13 L 23 13 L 23 11 Z M 9 15 L 9 17 L 23 17 L 23 15 Z M 9 19 L 9 21 L 19 21 L 19 19 Z "/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" style="width: 85%; height: 85%">
+	<path d="M54,2.5H6c-3.252,0-6,2.748-6,6v33c0,3.252,2.748,6,6,6h14.555l8.702,9.669C29.446,57.38,29.717,57.5,30,57.5 s0.554-0.12,0.743-0.331l8.702-9.669H54c3.252,0,6-2.748,6-6v-33C60,5.248,57.252,2.5,54,2.5z M16,28.5c-2.206,0-4-1.794-4-4 s1.794-4,4-4s4,1.794,4,4S18.206,28.5,16,28.5z M30,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S32.206,28.5,30,28.5z M44,28.5c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S46.206,28.5,44,28.5z"/>
 </svg>

src/subtitle.js

@@ -90,14 +90,16 @@ export default class Subtitle {
   }
 
   show() {
-    const { $subtitle } = this.art.refs;
+    const { refs: { $subtitle }, i18n, notice } = this.art;
     setStyle($subtitle, 'display', 'block');
+    notice.show(i18n.get('Show subtitle'));
     this.art.emit('subtitle:show', $subtitle);
   }
 
   hide() {
-    const { $subtitle } = this.art.refs;
+    const { refs: { $subtitle }, i18n, notice } = this.art;
     setStyle($subtitle, 'display', 'none');
+    notice.show(i18n.get('Hide subtitle'));
     this.art.emit('subtitle:hide', $subtitle);
   }