feat: Refactor global event handling in ArtPlayer

- Introduced a new globalInit function to manage document and window events.
- Replaced direct event proxies with a unified bindGlobalEvents method.
- Updated event handling in various modules to utilize the new global event system.
- Removed the deprecated documentInit module.
- Bumped version to 5.2.6 in package.json.

packages/artplayer/src/events/clickInit.js

@@ -6,7 +6,7 @@ export default function clickInit(art, events) {
     template: { $player, $video },
   } = art
 
-  events.proxy(document, ['click', 'contextmenu'], (event) => {
+  function onDocumentClick(event) {
     if (includeFromEvent(event, $player)) {
       art.isInput = event.target.tagName === 'INPUT'
       art.isFocus = true
@@ -17,7 +17,10 @@ export default function clickInit(art, events) {
       art.isFocus = false
       art.emit('blur', event)
     }
-  })
+  }
+
+  art.on('document:click', onDocumentClick)
+  art.on('document:contextmenu', onDocumentClick)
 
   let clickTimes = []
   events.proxy($video, 'click', (event) => {

packages/artplayer/src/events/documentInit.js

@@ -1,9 +0,0 @@
-export default function documentInit(art, events) {
-  events.proxy(document, 'mousemove', (event) => {
-    art.emit('document:mousemove', event)
-  })
-
-  events.proxy(document, 'mouseup', (event) => {
-    art.emit('document:mouseup', event)
-  })
-}

packages/artplayer/src/events/gestureInit.js

@@ -99,6 +99,6 @@ export default function gestureInit(art, events) {
     })
 
     events.proxy($progress, 'touchmove', onTouchMove)
-    events.proxy(document, 'touchend', onTouchEnd)
+    art.on('document:touchend', onTouchEnd)
   }
 }

packages/artplayer/src/events/globalInit.js

@@ -0,0 +1,49 @@
+export default function globalInit(art, events) {
+  const documentEvents = [
+    'click',
+    'mouseup',
+    'keydown',
+    'touchend',
+    'touchmove',
+    'mousemove',
+    'contextmenu',
+    'webkitfullscreenchange',
+  ]
+
+  const windowEvents = [
+    'resize',
+    'scroll',
+    'orientationchange',
+  ]
+
+  const destroyEvents = []
+
+  function bindGlobalEvents(source = {}) {
+    for (let index = 0; index < destroyEvents.length; index++) {
+      events.remove(destroyEvents[index])
+    }
+
+    destroyEvents.length = 0
+
+    const { $player } = art.template
+
+    documentEvents.forEach((name) => {
+      const doc = source.document || $player.ownerDocument || document
+      const destroy = events.proxy(doc, name, (event) => {
+        art.emit(`document:${name}`, event)
+      })
+      destroyEvents.push(destroy)
+    })
+
+    windowEvents.forEach((name) => {
+      const win = source.window || $player.ownerDocument?.defaultView || window
+      const destroy = events.proxy(win, name, (event) => {
+        art.emit(`window:${name}`, event)
+      })
+      destroyEvents.push(destroy)
+    })
+  }
+
+  bindGlobalEvents()
+  events.bindGlobalEvents = bindGlobalEvents
+}

packages/artplayer/src/events/index.js

@@ -1,6 +1,6 @@
 import clickInit from './clickInit'
-import documentInit from './documentInit'
 import gestureInit from './gestureInit'
+import globalInit from './globalInit'
 import hoverInit from './hoverInit'
 import moveInit from './moveInit'
 import resizeInit from './resizeInit'
@@ -19,7 +19,7 @@ export default class Events {
     resizeInit(art, this)
     gestureInit(art, this)
     viewInit(art, this)
-    documentInit(art, this)
+    globalInit(art, this)
     updateInit(art, this)
   }
 

packages/artplayer/src/events/resizeInit.js

@@ -13,7 +13,10 @@ export default function resizeInit(art, events) {
   })
 
   const resizeFn = debounce(() => art.emit('resize'), constructor.RESIZE_TIME)
-  events.proxy(window, ['orientationchange', 'resize'], () => resizeFn())
+
+  art.on('window:orientationchange', () => resizeFn())
+  art.on('window:resize', () => resizeFn())
+
   if (screen && screen.orientation && screen.orientation.onchange) {
     events.proxy(screen.orientation, 'change', () => resizeFn())
   }

packages/artplayer/src/events/viewInit.js

@@ -1,6 +1,6 @@
 import { isInViewport, throttle } from '../utils'
 
-export default function viewInit(art, events) {
+export default function viewInit(art) {
   const {
     option,
     constructor,
@@ -11,7 +11,7 @@ export default function viewInit(art, events) {
     art.emit('view', isInViewport($container, constructor.SCROLL_GAP))
   }, constructor.SCROLL_TIME)
 
-  events.proxy(window, 'scroll', () => scrollFn())
+  art.on('window:scroll', () => scrollFn())
 
   art.on('view', (state) => {
     if (option.autoMini) {

packages/artplayer/src/hotkey.js

@@ -11,7 +11,7 @@ export default class Hotkey {
   }
 
   init() {
-    const { proxy, constructor } = this.art
+    const { constructor } = this.art
 
     this.add('Escape', () => {
       if (this.art.fullscreenWeb) {
@@ -39,7 +39,7 @@ export default class Hotkey {
       this.art.volume -= constructor.VOLUME_STEP
     })
 
-    proxy(document, 'keydown', (event) => {
+    this.art.on('document:keydown', (event) => {
       if (this.art.isFocus) {
         const tag = document.activeElement.tagName.toUpperCase()
         const editable = document.activeElement.getAttribute('contenteditable')

packages/artplayer/src/player/fullscreenMix.js

@@ -43,7 +43,7 @@ export default function fullscreenMix(art) {
   }
 
   const webkitScreenfull = (art) => {
-    art.proxy(document, 'webkitfullscreenchange', () => {
+    art.on('document:webkitfullscreenchange', () => {
       art.emit('fullscreen', art.fullscreen)
       art.emit('resize')
     })

packages/artplayer/src/plugins/fastForward.js

@@ -32,8 +32,8 @@ export default function fastForward(art) {
   }
 
   proxy($video, 'touchstart', onStart)
-  proxy(document, 'touchmove', onStop)
-  proxy(document, 'touchend', onStop)
+  art.on('document:touchmove', onStop)
+  art.on('document:touchend', onStop)
 
   return {
     name: 'fastForward',