From 9f2286400d3c866d735551936f5d87d04469b395 Mon Sep 17 00:00:00 2001
From: Britt Gresham <britt@brittg.com>
Date: Fri, 18 Feb 2022 11:54:39 -0800
Subject: [PATCH]  #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       |  8 +++++++-
 src/components/VAudioTrack/VGlobalAudioTrack.vue | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
index 839c809927..44429a9a17 100644
--- a/src/components/VAudioTrack/VAudioTrack.vue
+++ b/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)
diff --git a/src/components/VAudioTrack/VGlobalAudioTrack.vue b/src/components/VAudioTrack/VGlobalAudioTrack.vue
index 3df109f616..edc63a72f3 100644
--- a/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/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)