分离事件中心

packages/artplayer/src/events/clickInit.js

@@ -0,0 +1,11 @@
+export default function clickInit(art, events) {
+  const { refs: { $player } } = art;
+  events.proxy(document, ['click', 'contextmenu'], event => {
+    if (event.composedPath().indexOf($player) > -1) {
+      art.isFocus = true;
+    } else {
+      art.isFocus = false;
+      art.contextmenu.hide();
+    }
+  });
+}

packages/artplayer/src/events/hoverInit.js

@@ -0,0 +1,15 @@
+export default function hoverInit(art, events) {
+  const { refs: { $player } } = art;
+  events.hover(
+    $player,
+    () => {
+      $player.classList.add('artplayer-hover');
+      art.emit('hoverenter');
+    },
+    () => {
+      $player.classList.remove('artplayer-hover');
+      $player.classList.remove('artplayer-hide-cursor');
+      art.emit('hoverleave');
+    }
+  );
+}

packages/artplayer/src/events/index.js

@@ -0,0 +1,37 @@
+import clickInit from './clickInit';
+import hoverInit from './hoverInit';
+import mousemoveInit from './mousemoveInit';
+import resizeInit from './resizeInit';
+
+export default class Events {
+  constructor(art) {
+    this.destroyEvents = [];
+    this.proxy = this.proxy.bind(this);
+    this.hover = this.hover.bind(this);
+    clickInit(art, this);
+    hoverInit(art, this);
+    mousemoveInit(art, this);
+    resizeInit(art, this);
+  }
+
+  proxy(target, name, callback, option = {}) {
+    if (Array.isArray(name)) {
+      name.forEach(item => this.proxy(target, item, callback, option));
+      return;
+    }
+
+    target.addEventListener(name, callback, option);
+    this.destroyEvents.push(() => {
+      target.removeEventListener(name, callback, option);
+    });
+  }
+
+  hover(target, mouseenter, mouseleave) {
+    this.proxy(target, 'mouseenter', mouseenter);
+    this.proxy(target, 'mouseleave', mouseleave);
+  }
+
+  destroy() {
+    this.destroyEvents.forEach(event => event());
+  }
+}

packages/artplayer/src/events/mousemoveInit.js

@@ -0,0 +1,23 @@
+import { debounce } from '../utils';
+
+export default function mousemoveInitInit(art, events) {
+  const { refs: { $player } } = art;
+
+  const hideCursor = debounce(() => {
+    $player.classList.add('artplayer-hide-cursor');
+    if (art.player.fullscreenState || art.player.fullscreenWebState) {
+      $player.classList.remove('artplayer-hover');
+      art.controls.hide();
+    }
+  }, 5000);
+
+  events.proxy($player, 'mousemove', () => {
+    $player.classList.remove('artplayer-hide-cursor');
+    art.controls.show();
+    if (!art.player.pipState) {
+      hideCursor();
+    } else {
+      hideCursor.clearTimeout();
+    }
+  });
+}

packages/artplayer/src/events/resizeInit.js

@@ -0,0 +1,16 @@
+import { sleep } from '../utils';
+import { ResizeObserver } from 'resize-observer';
+
+export default function clickInit(art, events) {
+  const { refs: { $player } } = art;
+  const resizeObserver = new ResizeObserver(() => {
+    sleep().then(() => {
+      art.player.aspectRatioReset();
+      art.emit('resize');
+    });
+  });
+  resizeObserver.observe($player);
+  events.destroyEvents.push(() => {
+    resizeObserver.unobserve($player);
+  });
+}