feat(player): unregister all events on sound instance dispose

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
This commit is contained in:
Kasper Seweryn 2023-03-06 21:02:14 +01:00 committed by Georg krause
parent b6ceb5febd
commit 1b15e955dd
1 changed files with 37 additions and 35 deletions

View File

@ -47,6 +47,7 @@ export class HTMLSound implements Sound {
#soundLoopEventHook = createEventHook<HTMLSound>() #soundLoopEventHook = createEventHook<HTMLSound>()
#soundEndEventHook = createEventHook<HTMLSound>() #soundEndEventHook = createEventHook<HTMLSound>()
#ignoreError = false #ignoreError = false
#scope = effectScope()
readonly isErrored = ref(false) readonly isErrored = ref(false)
readonly isLoaded = ref(false) readonly isLoaded = ref(false)
@ -72,39 +73,41 @@ export class HTMLSound implements Sound {
console.log('CREATED SOUND INSTANCE', this) console.log('CREATED SOUND INSTANCE', this)
useEventListener(this.#audio, 'ended', () => this.#soundEndEventHook.trigger(this)) this.#scope.run(() => {
useEventListener(this.#audio, 'timeupdate', () => { useEventListener(this.#audio, 'ended', () => this.#soundEndEventHook.trigger(this))
if (this.#audio.currentTime === 0) { useEventListener(this.#audio, 'timeupdate', () => {
this.#soundLoopEventHook.trigger(this) if (this.#audio.currentTime === 0) {
} this.#soundLoopEventHook.trigger(this)
}) }
})
useEventListener(this.#audio, 'waiting', () => { useEventListener(this.#audio, 'waiting', () => {
console.log('>> AUDIO WAITING', this) console.log('>> AUDIO WAITING', this)
}) })
useEventListener(this.#audio, 'playing', () => { useEventListener(this.#audio, 'playing', () => {
console.log('>> AUDIO PLAYING', this) console.log('>> AUDIO PLAYING', this)
}) })
useEventListener(this.#audio, 'stalled', () => { useEventListener(this.#audio, 'stalled', () => {
console.log('>> AUDIO STALLED', this) console.log('>> AUDIO STALLED', this)
}) })
useEventListener(this.#audio, 'suspend', () => { useEventListener(this.#audio, 'suspend', () => {
console.log('>> AUDIO SUSPEND', this) console.log('>> AUDIO SUSPEND', this)
}) })
useEventListener(this.#audio, 'loadeddata', () => { useEventListener(this.#audio, 'loadeddata', () => {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
this.isLoaded.value = this.#audio.readyState >= 2 this.isLoaded.value = this.#audio.readyState >= 2
}) })
useEventListener(this.#audio, 'error', (err) => { useEventListener(this.#audio, 'error', (err) => {
if (this.#ignoreError) return if (this.#ignoreError) return
console.error('>> AUDIO ERRORED', err, this) console.error('>> AUDIO ERRORED', err, this)
this.isErrored.value = true this.isErrored.value = true
this.isLoaded.value = true this.isLoaded.value = true
})
}) })
} }
@ -115,17 +118,16 @@ export class HTMLSound implements Sound {
} }
async dispose () { async dispose () {
// Remove all event listeners
this.#scope.stop()
// Stop audio playback
this.audioNode.disconnect() this.audioNode.disconnect()
this.#audio.pause() this.#audio.pause()
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState // Cancel any request downloading the source
if (this.#audio.readyState !== 4) { this.#audio.src = ''
this.#ignoreError = true this.#audio.load()
// Cancel any request downloading the source
this.#audio.src = ''
this.#audio.load()
this.#ignoreError = false
}
} }
async play () { async play () {