WordPress#692) Set duration after audio is loaded

Before this commit the duration would be set based on the audio context
state as the page was loaded. Since the audio file is never loaded by
the time we check for the duration of the audio object, it is always
null thus defaulting to the metadata for audio duration always.

This commit adds a `durationchange` listener while initializing the
audio object and sets the duration in a new `audioDuration` property
which the computed `duration` property watches.

src/components/VAudioTrack/VAudioTrack.vue

@@ -124,6 +124,7 @@ export default defineComponent({
 
     const status = ref('paused')
     const currentTime = ref(0)
+    const audioDuration = ref(null)
 
     const initLocalAudio = () => {
       // Preserve existing local audio if we plucked it from the global active audio
@@ -133,6 +134,7 @@ export default defineComponent({
       localAudio.addEventListener('pause', setPaused)
       localAudio.addEventListener('ended', setPlayed)
       localAudio.addEventListener('timeupdate', setTimeWhenPaused)
+      localAudio.addEventListener('durationchange', setDuration)
 
       /**
        * Similar to the behavior in the global audio track,
@@ -216,6 +218,9 @@ export default defineComponent({
         }
       }
     }
+    const setDuration = () => {
+      audioDuration.value = localAudio?.duration
+    }
 
     /**
      * If we're transforming the globally active audio
@@ -238,6 +243,7 @@ export default defineComponent({
       localAudio.removeEventListener('pause', setPaused)
       localAudio.removeEventListener('ended', setPlayed)
       localAudio.removeEventListener('timeupdate', setTimeWhenPaused)
+      localAudio.removeEventListener('durationchange', setDuration)
 
       if (
         route.value.params.id == props.audio.id ||
@@ -286,7 +292,7 @@ export default defineComponent({
     /* Timekeeping */
 
     const duration = computed(
-      () => (localAudio?.duration ?? props.audio?.duration ?? 0) / 1e3 // seconds
+      () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0 // seconds
     )
 
     const message = computed(() => store.state.active.message)

src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -113,6 +113,7 @@ export default defineComponent({
 
     const status = ref('paused')
     const currentTime = ref(0)
+    const audioDuration = ref(null)
 
     const setPlaying = () => {
       status.value = 'playing'
@@ -133,6 +134,9 @@ export default defineComponent({
         }
       }
     }
+    const setDuration = () => {
+      audioDuration.value = activeAudio.obj.value?.duration
+    }
 
     const updateTimeLoop = () => {
       if (activeAudio.obj.value && status.value === 'playing') {
@@ -149,7 +153,9 @@ export default defineComponent({
         audio.addEventListener('pause', setPaused)
         audio.addEventListener('ended', setPlayed)
         audio.addEventListener('timeupdate', setTimeWhenPaused)
+        audio.addEventListener('durationchange', setDuration)
         currentTime.value = audio.currentTime
+        audioDuration.value = audio.duration
 
         /**
          * By the time the `activeAudio` is updated and a rerender
@@ -179,6 +185,7 @@ export default defineComponent({
           audio.removeEventListener('pause', setPaused)
           audio.removeEventListener('ended', setPlayed)
           audio.removeEventListener('timeupdate', setTimeWhenPaused)
+          audio.removeEventListener('durationchange', setDuration)
         })
       },
       { immediate: true }
@@ -190,8 +197,7 @@ export default defineComponent({
     /* Timekeeping */
 
     const duration = computed(
-      () =>
-        (activeAudio.obj.value?.duration ?? props.audio?.duration ?? 0) / 1e3
+      () => audioDuration.value ?? props.audio?.duration / 1e3 ?? 0
     ) // seconds
 
     const message = computed(() => store.state.active.message)