diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue index c529497ccd..160f3709b2 100644 --- a/src/components/VAudioTrack/VAudioTrack.vue +++ b/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 = () => { diff --git a/src/components/VAudioTrack/VWaveform.vue b/src/components/VAudioTrack/VWaveform.vue index b3b69bd1ac..38630c3f88 100644 --- a/src/components/VAudioTrack/VWaveform.vue +++ b/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(null) @@ -558,7 +580,7 @@ export default defineComponent({ })) const seekTimeLeft = computed(() => ({ - '--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, diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot index 96074a3113..0b9e27358b 100644 --- a/src/locales/po-files/openverse.pot +++ b/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" diff --git a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png index 23ba5a8c13..c242659ba7 100644 Binary files a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png and b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png differ diff --git a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png index 49d473f8dd..a3658eebf8 100644 Binary files a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png and b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png differ diff --git a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-md-linux.png b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-md-linux.png index 35ae8ccf57..b12dd89708 100644 Binary files a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-md-linux.png and b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-md-linux.png differ diff --git a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png index 4805491ea2..30828d9541 100644 Binary files a/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png and b/test/playwright/visual-regression/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png differ