Fix waveform misalignment for short audios

src/components/VAudioTrack/VAudioTrack.vue

@@ -189,10 +189,13 @@ export default defineComponent({
         : undefined
 
     const updateTimeLoop = () => {
-      if (localAudio && status.value === 'playing') {
-        currentTime.value = localAudio.currentTime
-        window.requestAnimationFrame(updateTimeLoop)
-      }
+      if (localAudio)
+        if (status.value === 'playing') {
+          currentTime.value = localAudio.currentTime
+          window.requestAnimationFrame(updateTimeLoop)
+        } else {
+          currentTime.value = localAudio.currentTime
+        }
     }
 
     const setPlaying = () => {

src/components/VAudioTrack/VWaveform.vue

@@ -176,6 +176,11 @@ import { hash, rand as prng } from '~/utils/prng'
 
 import type { CSSProperties } from '@vue/runtime-dom'
 
+/**
+ * If the duration is above this threshold, the progress timestamp will show ms.
+ */
+const MAX_SECONDS_FOR_MS = 1
+
 /**
  * Renders an SVG representation of the waveform given a list of heights for the
  * bars.
@@ -261,14 +266,22 @@ export default defineComponent({
     /* Utils */
 
     /**
-     * Format the time as hh:mm:ss, dropping the hour part if it is zero.
+     * Format the time as hh:mm:ss:ms.
+     * We drop the hour part if it is zero, and the ms part if the audio
+     * is longer than MAX_SECONDS_FOR_MS seconds.
+     *
      * @param seconds - the number of seconds in the duration
      * @returns the duration in a human-friendly format
      */
     const timeFmt = (seconds: number): string => {
       const date = new Date(0)
-      date.setSeconds(Number.isFinite(seconds) ? seconds : 0)
-      return date.toISOString().substr(11, 8).replace(/^00:/, '')
+      const timeInSeconds = Number.isFinite(seconds) ? seconds : 0
+      date.setSeconds(0, timeInSeconds * 1000)
+
+      return date
+        .toISOString()
+        .substr(11, showMsInTimestamp.value ? 12 : 8)
+        .replace(/^00:/, '')
     }
     /**
      * Get the x-coordinate of the event with respect to the bounding box of the
@@ -401,6 +414,15 @@ export default defineComponent({
       return barWidth < timestampWidth + 2
     })
 
+    /**
+     * Whether to show the ms part in the timestamps. True when the duration
+     * is below MAX_SECONDS_FOR_MS seconds.
+     */
+    const showMsInTimestamp = computed(
+      () =>
+        Number.isFinite(props.duration) && props.duration < MAX_SECONDS_FOR_MS
+    )
+
     /* Seek bar */
 
     const seekFrac = ref<number | null>(null)
@@ -558,7 +580,7 @@ export default defineComponent({
     }))
 
     const seekTimeLeft = computed<CSSProperties>(() => ({
-      '--seek-time-left': `${seekBarWidth}px`,
+      '--seek-time-left': `${seekBarWidth.value}px`,
     }))
 
     return {
@@ -587,6 +609,7 @@ export default defineComponent({
       progressTimestamp,
       progressTimestampEl,
       isProgressTimestampCutoff,
+      showMsInTimestamp,
 
       seekFrac,
       seekBarWidth,

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-06-08T09:57:11+00:00\n"
+"POT-Creation-Date: 2022-06-09T12:59:13+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -254,13 +254,13 @@ msgid "Replay"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VAudioTrack.vue:386
+#: src/components/VAudioTrack/VAudioTrack.vue:389
 msgctxt "audio-track.aria-label"
 msgid "###title### - Audio Player"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VAudioTrack.vue:383
+#: src/components/VAudioTrack/VAudioTrack.vue:386
 msgctxt "audio-track.aria-label-interactive"
 msgid "###title### - audio player - press the spacebar to play and pause a preview of the audio"
 msgstr ""
@@ -308,7 +308,7 @@ msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VWaveform.vue:621
+#: src/components/VAudioTrack/VWaveform.vue:644
 msgctxt "waveform.current-time"
 msgid "###time### second"
 msgid_plural "###time### seconds"