feat: enhance Artplayer type definitions and improve component interfaces

- Updated Artplayer class to specify environment as 'development' | 'production'.
- Refined template query method to return specific element types.
- Improved event proxy method to handle multiple event names.
- Enhanced storage get method to support both key retrieval and full record retrieval.
- Modified i18n interface to include language initialization and partial language records.
- Adjusted notice interface to provide a getter for show state and a setter for messages.
- Updated layers, controls, and contextmenu to allow undefined elements.
- Enhanced subtitle interface with initialization method.
- Refined hotkey methods to use KeyboardEvent instead of Event.
- Updated setting methods to return updated settings instead of arrays.
- Improved plugin method to return a promise.
- Added new events for video handling and refined existing event parameters.
- Enhanced option interface for proxy and plugins to support promises.
- Updated player interface to include reset method.
- Refined setting props to allow optional values.
- Enhanced template interface with additional control elements.
- Improved utils methods for querying and manipulating DOM elements.

fix: update type definitions for notice and subtitle properties, and refine event types

fix: remove unnecessary console warnings in event listener error handling

fix: refactor event listener management to use Set for better performance and error handling

packages/artplayer/src/events/index.js

@@ -9,7 +9,7 @@ import viewInit from './viewInit'
 
 export default class Events {
   constructor(art) {
-    this.destroyEvents = []
+    this.destroyEvents = new Set()
     this.proxy = this.proxy.bind(this)
     this.hover = this.hover.bind(this)
 
@@ -30,7 +30,7 @@ export default class Events {
 
     target.addEventListener(name, callback, option)
     const destroy = () => target.removeEventListener(name, callback, option)
-    this.destroyEvents.push(destroy)
+    this.destroyEvents.add(destroy)
     return destroy
   }
 
@@ -44,16 +44,28 @@ export default class Events {
   }
 
   remove(destroyEvent) {
-    const index = this.destroyEvents.indexOf(destroyEvent)
-    if (index > -1) {
-      destroyEvent()
-      this.destroyEvents.splice(index, 1)
+    if (this.destroyEvents.has(destroyEvent)) {
+      try {
+        destroyEvent()
+      }
+      catch (error) {
+        console.warn('Failed to remove event listener:', error)
+      }
+      finally {
+        this.destroyEvents.delete(destroyEvent)
+      }
     }
   }
 
   destroy() {
-    for (let index = 0; index < this.destroyEvents.length; index++) {
-      this.destroyEvents[index]()
+    for (const destroyEvent of this.destroyEvents) {
+      try {
+        destroyEvent()
+      }
+      catch (error) {
+        console.warn('Failed to destroy event listener:', error)
+      }
     }
+    this.destroyEvents.clear()
   }
 }

packages/artplayer/src/hotkey.js

@@ -71,7 +71,9 @@ export default class Hotkey {
 
   add(key, event) {
     if (this.keys[key]) {
-      this.keys[key].push(event)
+      if (!this.keys[key].includes(event)) {
+        this.keys[key].push(event)
+      }
     }
     else {
       this.keys[key] = [event]
@@ -85,6 +87,9 @@ export default class Hotkey {
       if (index !== -1) {
         this.keys[key].splice(index, 1)
       }
+      if (this.keys[key].length === 0) {
+        delete this.keys[key]
+      }
     }
     return this
   }

packages/artplayer/src/notice.js

@@ -4,6 +4,15 @@ export default class Notice {
   constructor(art) {
     this.art = art
     this.timer = null
+
+    art.on('destroy', () => this.destroy())
+  }
+
+  destroy() {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
   }
 
   set show(msg) {

packages/artplayer/src/player/switchMix.js

@@ -3,21 +3,30 @@ import { def } from '../utils'
 export default function switchMix(art) {
   function switchUrl(url, currentTime) {
     return new Promise((resolve, reject) => {
-      if (url === art.url)
+      if (url === art.url) {
+        resolve()
         return
+      }
       const { playing, aspectRatio, playbackRate } = art
 
       art.pause()
       art.url = url
       art.notice.show = ''
 
-      art.once('video:error', reject)
+      const handlers = {}
 
-      art.once('video:loadedmetadata', () => {
+      handlers.error = (error) => {
+        art.off('video:canplay', handlers.canplay)
+        art.off('video:loadedmetadata', handlers.metadata)
+        reject(error)
+      }
+
+      handlers.metadata = () => {
         art.currentTime = currentTime
-      })
+      }
 
-      art.once('video:canplay', async () => {
+      handlers.canplay = async () => {
+        art.off('video:error', handlers.error)
         art.playbackRate = playbackRate
         art.aspectRatio = aspectRatio
 
@@ -28,7 +37,11 @@ export default function switchMix(art) {
         art.notice.show = ''
 
         resolve()
-      })
+      }
+
+      art.once('video:error', handlers.error)
+      art.once('video:loadedmetadata', handlers.metadata)
+      art.once('video:canplay', handlers.canplay)
     })
   }
 

packages/artplayer/src/utils/component.js

@@ -40,8 +40,7 @@ export default class Component {
     if (!this.$parent || !this.name || option.disable)
       return
     const name = option.name || `${this.name}${this.id}`
-    const item = this.cache.get(name)
-    errorHandle(!item, `Can't add an existing [${name}] to the [${this.name}]`)
+    errorHandle(!this.cache.has(name), `Can't add an existing [${name}] to the [${this.name}]`)
 
     this.id += 1
     const $ref = createElement('div')
@@ -94,15 +93,15 @@ export default class Component {
   }
 
   remove(name) {
+    errorHandle(this.cache.has(name), `Can't find [${name}] from the [${this.name}]`)
     const item = this.cache.get(name)
-    errorHandle(item, `Can't find [${name}] from the [${this.name}]`)
 
     if (item.option.beforeUnmount) {
       item.option.beforeUnmount.call(this.art, item.$ref)
     }
 
-    for (let index = 0; index < item.events.length; index++) {
-      this.art.events.remove(item.events[index])
+    for (const event of item.events) {
+      this.art.events.remove(event)
     }
 
     this.cache.delete(name)
@@ -111,8 +110,8 @@ export default class Component {
   }
 
   update(option) {
-    const item = this.cache.get(option.name)
-    if (item) {
+    if (this.cache.has(option.name)) {
+      const item = this.cache.get(option.name)
       option = Object.assign(item.option, option)
       this.remove(option.name)
     }