修改包管理

packages/artplayer/src/contextmenu/aspectRatio.js

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

packages/artplayer/src/contextmenu/close.js

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

packages/artplayer/src/contextmenu/index.js

@@ -0,0 +1,96 @@
+import { append, insertByIndex, 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
+    );
+
+    option.contextmenu.forEach(item => {
+      this.add(item);
+    });
+
+    proxy(refs.$player, 'contextmenu', event => {
+      event.preventDefault();
+      this.show();
+      this.setPos(event);
+    });
+
+    proxy(refs.$player, 'click', event => {
+      if (refs.$contextmenu && !event.composedPath().includes(refs.$contextmenu)) {
+        this.hide();
+      }
+    });
+  }
+
+  add(item) {
+    if (!item.disable) {
+      const { refs, events: { proxy } } = this.art;
+      id++;
+      const menu = typeof item === 'function' ? item(this.art) : item;
+      const $menu = document.createElement('div');
+      $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.call(this, event);
+          this.art.emit('contextmenu:click', $menu);
+        });
+      }
+      this[`$${menu.name || id}`] = $menu;
+      insertByIndex(refs.$contextmenu, $menu, menu.index || id);
+    }
+  }
+
+  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;
+    setStyle($contextmenu, 'display', 'none');
+    this.art.emit('contextmenu:hide', $contextmenu);
+  }
+
+  show() {
+    const { refs: { $contextmenu } } = this.art;
+    setStyle($contextmenu, 'display', 'block');
+    this.art.emit('contextmenu:show', $contextmenu);
+  }
+}

packages/artplayer/src/contextmenu/info.js

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

packages/artplayer/src/contextmenu/playbackRate.js

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

packages/artplayer/src/contextmenu/version.js

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