refactor event handlers

src/player/audio.ts

@@ -3,9 +3,13 @@ export class AudioController {
   private handle = -1
   private volume = 1.0
   private fadeDuration = 200
-  private eventHandlers = null as any
   private buffer = new Audio()
 
+  ontimeupdate: (value: number) => void = () => { /* do nothing */ }
+  ondurationchange: (value: number) => void = () => { /* do nothing */ }
+  onended: () => void = () => { /* do nothing */ }
+  onerror: (err: MediaError | null) => void = () => { /* do nothing */ }
+
   currentTime() {
     return this.audio.currentTime
   }
@@ -14,10 +18,6 @@ export class AudioController {
     return this.audio.duration
   }
 
-  setEventHandlers(handlers: any) {
-    this.eventHandlers = handlers
-  }
-
   setBuffer(url: string) {
     this.buffer.src = url
   }
@@ -52,20 +52,20 @@ export class AudioController {
       endPlayback(this.audio, this.fadeDuration)
     }
     this.audio = new Audio(url)
-    this.audio.ondurationchange = () => {
-      this.eventHandlers?.onDurationChange(this.audio.duration)
-    }
     this.audio.onerror = () => {
-      this.eventHandlers?.onError(this.audio.error)
+      this.onerror(this.audio.error)
     }
     this.audio.onended = () => {
-      this.eventHandlers?.onEnded()
+      this.onended()
     }
     this.audio.ontimeupdate = () => {
-      this.eventHandlers?.onTimeUpdate(this.audio.currentTime)
+      this.ontimeupdate(this.audio.currentTime)
     }
-    this.eventHandlers?.onDurationChange(this.audio.duration)
-    this.eventHandlers?.onTimeUpdate(this.audio.currentTime)
+    this.audio.ondurationchange = () => {
+      this.ondurationchange(this.audio.duration)
+    }
+    this.ondurationchange(this.audio.duration)
+    this.ontimeupdate(this.audio.currentTime)
     this.audio.volume = 0.0
 
     if (options.paused !== true) {

src/player/store.ts

@@ -240,35 +240,33 @@ export const playerModule: Module<State, any> = {
 }
 
 export function setupAudio(store: Store<any>, api: API) {
-  audio.setEventHandlers({
-    onTimeUpdate: (value: number) => {
-      store.commit('player/setCurrentTime', value)
-      // Scrobble
-      if (
-        store.state.player.scrobbled === false &&
-        store.state.player.duration > 30 &&
-        audio.currentTime() / store.state.player.duration > 0.7
-      ) {
-        const id = store.getters['player/trackId']
-        store.commit('player/setScrobbled')
-        api.scrobble(id)
-      }
-    },
-    onDurationChange: (value: number) => {
-      store.commit('player/setDuration', value)
-    },
-    onError: (error: any) => {
-      store.commit('player/setPaused')
-      store.commit('setError', error)
-    },
-    onEnded: () => {
-      if (store.getters['player/hasNext'] || store.state.player.repeat) {
-        return store.dispatch('player/next')
-      } else {
-        return store.dispatch('player/resetQueue')
-      }
-    },
-  })
+  audio.ontimeupdate = (value: number) => {
+    store.commit('player/setCurrentTime', value)
+    // Scrobble
+    if (
+      store.state.player.scrobbled === false &&
+      store.state.player.duration > 30 &&
+      audio.currentTime() / store.state.player.duration > 0.7
+    ) {
+      const id = store.getters['player/trackId']
+      store.commit('player/setScrobbled')
+      api.scrobble(id)
+    }
+  }
+  audio.ondurationchange = (value: number) => {
+    store.commit('player/setDuration', value)
+  }
+  audio.onended = () => {
+    if (store.getters['player/hasNext'] || store.state.player.repeat) {
+      return store.dispatch('player/next')
+    } else {
+      return store.dispatch('player/resetQueue')
+    }
+  }
+  audio.onerror = (error: any) => {
+    store.commit('player/setPaused')
+    store.commit('setError', error)
+  }
 
   audio.setVolume(storedMuteState ? 0.0 : storedVolume)
   const url = store.getters['player/track']?.url