From 290a99722b0c097514a5d89699df2b9ff723ad5f Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 16 Dec 2021 11:16:05 +0400
Subject: [PATCH 1/3] Allow enabling or disabling interactivity of waveform

---
 src/components/AudioTrack/Waveform.vue        | 52 ++++++++++++++-----
 src/components/AudioTrack/layouts/Row.vue     |  2 +-
 .../AudioTrack/meta/Waveform.stories.mdx      | 10 ++--
 3 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/components/AudioTrack/Waveform.vue b/src/components/AudioTrack/Waveform.vue
index 790f942ff0..7586e0e7ed 100644
--- a/src/components/AudioTrack/Waveform.vue
+++ b/src/components/AudioTrack/Waveform.vue
@@ -6,26 +6,20 @@
       '--usable-height': `${Math.floor(usableFrac * 100)}%`,
       '--unusable-height': `${Math.floor((1 - usableFrac) * 100)}%`,
     }"
-    :tabIndex="!message && isReady ? 0 : -1"
-    :role="!message && isReady ? 'slider' : null"
-    :aria-disabled="!(!message && isReady)"
+    :tabIndex="isInteractive ? 0 : -1"
+    :role="isInteractive ? 'slider' : null"
+    :aria-disabled="!isInteractive"
     :aria-label="$t('waveform.label')"
     aria-orientation="horizontal"
     aria-valuemin="0"
     :aria-valuemax="duration"
     :aria-valuenow="currentTime"
     :aria-valuetext="currentTimeText"
-    @mousedown="handleMouseDown"
-    @mousemove="handleMouseMove"
-    @mouseup="handleMouseUp"
-    @mouseleave="handleMouseLeave"
-    @keydown.arrow-left.prevent="handleArrowKeys"
-    @keydown.arrow-right.prevent="handleArrowKeys"
-    @keydown.home.prevent="handlePosKeys(0)"
-    @keydown.end.prevent="handlePosKeys(1)"
+    v-on="eventHandlers"
   >
     <!-- Focus ring -->
     <svg
+      v-if="isInteractive"
       class="hidden group-focus:block absolute inset-0 w-full h-full z-20 shadow-ring-1"
       xmlns="http://www.w3.org/2000/svg"
       :viewBox="viewBox"
@@ -94,8 +88,9 @@
       />
     </svg>
 
-    <!-- Keyboard focus -->
+    <!-- Focus bar -->
     <div
+      v-if="isInteractive"
       class="focus-indicator hidden absolute z-30 top-0 flex flex-col items-center justify-between bg-black h-full"
       :style="{ width: `${barWidth}px`, left: `${seekSpaceBefore}px` }"
     >
@@ -212,11 +207,11 @@ export default {
     },
     /**
      * selectively enable features in the waveform; Available features are
-     * `'timestamp'` and `'duration'`.
+     * `'timestamp'`, `'duration'`, `'seek'`.
      */
     features: {
       type: Array,
-      default: () => ['timestamps'],
+      default: () => ['timestamps', 'seek'],
     },
   },
   setup(props, { emit }) {
@@ -286,10 +281,12 @@ export default {
 
     const showDuration = computed(() => props.features.includes('duration'))
     const showTimestamps = computed(() => props.features.includes('timestamps'))
+    const isSeekable = computed(() => props.features.includes('seek'))
 
     /* State */
 
     const isReady = computed(() => !props.message)
+    const isInteractive = computed(() => isSeekable.value && isReady.value)
 
     /* Resampling */
 
@@ -437,6 +434,29 @@ export default {
         emit('seeked', currentFrac.value + delta)
       }
     }
+    const handleKeys = (event) => {
+      event.preventDefault()
+      if (['ArrowLeft', 'ArrowRight'].includes(event.key))
+        return handleArrowKeys(event)
+      if (event.key === 'Home') return handlePosKeys(0)
+      if (event.key === 'End') return handlePosKeys(1)
+    }
+
+    /* v-on */
+
+    const eventHandlers = computed(() => {
+      if (isInteractive.value) {
+        return {
+          mousedown: handleMouseDown,
+          mousemove: handleMouseMove,
+          mouseup: handleMouseUp,
+          mouseleave: handleMouseLeave,
+          keydown: handleKeys,
+        }
+      } else {
+        return {}
+      }
+    })
 
     return {
       timeFmt,
@@ -445,8 +465,10 @@ export default {
 
       showDuration,
       showTimestamps,
+      isSeekable,
 
       isReady,
+      isInteractive,
 
       barWidth,
       normalizedPeaks,
@@ -477,6 +499,8 @@ export default {
 
       handlePosKeys,
       handleArrowKeys,
+
+      eventHandlers,
     }
   },
   computed: {
diff --git a/src/components/AudioTrack/layouts/Row.vue b/src/components/AudioTrack/layouts/Row.vue
index f95e0d0e92..90f7293aff 100644
--- a/src/components/AudioTrack/layouts/Row.vue
+++ b/src/components/AudioTrack/layouts/Row.vue
@@ -71,7 +71,7 @@
         <slot name="play-pause" :size="isLarge ? 'medium' : 'large'" />
         <slot
           name="controller"
-          :waveform-props="{ features: ['timestamps', 'duration'] }"
+          :waveform-props="{ features: ['timestamps', 'duration', 'seek'] }"
         />
       </div>
     </div>
diff --git a/src/components/AudioTrack/meta/Waveform.stories.mdx b/src/components/AudioTrack/meta/Waveform.stories.mdx
index 43a3360db1..3ac32eaf0f 100644
--- a/src/components/AudioTrack/meta/Waveform.stories.mdx
+++ b/src/components/AudioTrack/meta/Waveform.stories.mdx
@@ -47,7 +47,7 @@ Here 9 points are upsampled to as many as required to fill the viewport.
       peaks: [0.5, 1, 0.5, 0, 0.5, 1, 0.5, 0, 0.5], // triangular wave with 9 points
       currentTime: 2,
       duration: 10,
-      features: ['timestamps', 'duration'],
+      features: ['timestamps', 'duration', 'seek'],
     }}
   >
     {Template.bind({})}
@@ -68,7 +68,7 @@ Here 1000 points are downsampled to as many as required to fill the viewport.
       ), // sine wave with 1000 points
       currentTime: 2,
       duration: 10,
-      features: ['timestamps', 'duration'],
+      features: ['timestamps', 'duration', 'seek'],
     }}
   >
     {Template.bind({})}
@@ -88,7 +88,7 @@ the `--waveform-background-color` CSS custom property on the component or on the
       peaks: [0.5, 1, 0.5, 0, 0.5],
       currentTime: 2,
       duration: 10,
-      features: ['timestamps', 'duration'],
+      features: ['timestamps', 'duration', 'seek'],
       style: { '--waveform-background-color': '#d7fcd4' },
     }}
   >
@@ -120,7 +120,7 @@ contains both the bars and the timestamps so the actual bar height is less than
       peaks: [0.5, 1, 0.5, 0, 0.5],
       currentTime: 2,
       duration: 10,
-      features: ['timestamps', 'duration'],
+      features: ['timestamps', 'duration', 'seek'],
       usableFrac: 0.5,
     }}
   >
@@ -141,7 +141,7 @@ meet the design requirements and space/information density constraints. The
       peaks: [0.5, 1, 0.5, 0, 0.5],
       currentTime: 2,
       duration: 10,
-      features: ['timestamps', 'duration'],
+      features: ['timestamps', 'duration', 'seek'],
     }}
   >
     {Template.bind({})}

From 909ef9ef264652c095a1acc885fbc98106afb3f1 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 16 Dec 2021 14:08:15 +0400
Subject: [PATCH 2/3] Add 'V-' prefix to all components associated with the
 audio track

---
 src/components/AudioDetails/Related.vue       |  2 +-
 .../VAudioController.vue}                     | 20 +++--
 .../VAudioTrack.vue}                          | 44 +++++-----
 .../VPlayPause.vue}                           |  8 +-
 .../VWaveform.vue}                            |  7 +-
 .../layouts/VBoxLayout.vue}                   | 12 +--
 .../layouts/VFullLayout.vue}                  |  8 +-
 .../layouts/VGlobalLayout.vue}                | 12 ++-
 .../layouts/VRowLayout.vue}                   | 13 +--
 .../meta/VAudioTrack.stories.mdx}             | 16 ++--
 .../meta/VPlayPause.stories.mdx}              | 16 ++--
 .../meta/VWaveform.stories.mdx}               |  8 +-
 .../meta/flac-waveform.json                   |  0
 .../meta/mp3-waveform.json                    |  0
 .../meta/ogg-waveform.json                    |  0
 .../meta/wav-waveform.json                    |  0
 src/locales/po-files/openverse.pot            | 84 +++++++++----------
 src/pages/audio/_id.vue                       |  2 +-
 src/pages/search/audio.vue                    |  6 +-
 19 files changed, 137 insertions(+), 121 deletions(-)
 rename src/components/{AudioTrack/AudioController.vue => VAudioTrack/VAudioController.vue} (94%)
 rename src/components/{AudioTrack/AudioTrack.vue => VAudioTrack/VAudioTrack.vue} (72%)
 rename src/components/{AudioTrack/PlayPause.vue => VAudioTrack/VPlayPause.vue} (93%)
 rename src/components/{AudioTrack/Waveform.vue => VAudioTrack/VWaveform.vue} (99%)
 rename src/components/{AudioTrack/layouts/Box.vue => VAudioTrack/layouts/VBoxLayout.vue} (91%)
 rename src/components/{AudioTrack/layouts/Full.vue => VAudioTrack/layouts/VFullLayout.vue} (96%)
 rename src/components/{AudioTrack/layouts/Global.vue => VAudioTrack/layouts/VGlobalLayout.vue} (83%)
 rename src/components/{AudioTrack/layouts/Row.vue => VAudioTrack/layouts/VRowLayout.vue} (95%)
 rename src/components/{AudioTrack/meta/AudioTrack.stories.mdx => VAudioTrack/meta/VAudioTrack.stories.mdx} (95%)
 rename src/components/{AudioTrack/meta/PlayPause.stories.mdx => VAudioTrack/meta/VPlayPause.stories.mdx} (85%)
 rename src/components/{AudioTrack/meta/Waveform.stories.mdx => VAudioTrack/meta/VWaveform.stories.mdx} (94%)
 rename src/components/{AudioTrack => VAudioTrack}/meta/flac-waveform.json (100%)
 rename src/components/{AudioTrack => VAudioTrack}/meta/mp3-waveform.json (100%)
 rename src/components/{AudioTrack => VAudioTrack}/meta/ogg-waveform.json (100%)
 rename src/components/{AudioTrack => VAudioTrack}/meta/wav-waveform.json (100%)

diff --git a/src/components/AudioDetails/Related.vue b/src/components/AudioDetails/Related.vue
index b72d77ac82..06f207f942 100644
--- a/src/components/AudioDetails/Related.vue
+++ b/src/components/AudioDetails/Related.vue
@@ -4,7 +4,7 @@
       {{ $t('audio-details.related-audios') }}
     </h4>
     <template v-if="!$fetchState.error">
-      <AudioTrack
+      <VAudioTrack
         v-for="audio in audios"
         :key="audio.id"
         :audio="audio"
diff --git a/src/components/AudioTrack/AudioController.vue b/src/components/VAudioTrack/VAudioController.vue
similarity index 94%
rename from src/components/AudioTrack/AudioController.vue
rename to src/components/VAudioTrack/VAudioController.vue
index 8ce9964937..5cf816f858 100644
--- a/src/components/AudioTrack/AudioController.vue
+++ b/src/components/VAudioTrack/VAudioController.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="audio-controller">
-    <Waveform
+    <VWaveform
       v-bind="waveformProps"
       :message="message ? $t(`audio-track.messages.${message}`) : null"
       :current-time="currentTime"
@@ -27,9 +27,15 @@
 </template>
 
 <script>
-import { computed, ref, useStore, watch } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  ref,
+  useStore,
+  watch,
+} from '@nuxtjs/composition-api'
 
-import Waveform from '~/components/AudioTrack/Waveform'
+import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
 
 import { ACTIVE } from '~/constants/store-modules.js'
 import {
@@ -42,9 +48,9 @@ import {
  * HTMLAudioElement and the Active Media Store. Also displays the waveform that
  * is deeply linked to timekeeping for the HTMLAudioElement.
  */
-export default {
-  name: 'AudioController',
-  components: { Waveform },
+export default defineComponent({
+  name: 'VAudioController',
+  components: { VWaveform },
   inheritAttrs: false,
   model: {
     prop: 'status',
@@ -201,5 +207,5 @@ export default {
       handleSeeked,
     }
   },
-}
+})
 </script>
diff --git a/src/components/AudioTrack/AudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
similarity index 72%
rename from src/components/AudioTrack/AudioTrack.vue
rename to src/components/VAudioTrack/VAudioTrack.vue
index 4af180c31b..37afa375a2 100644
--- a/src/components/AudioTrack/AudioTrack.vue
+++ b/src/components/VAudioTrack/VAudioTrack.vue
@@ -6,7 +6,7 @@
   >
     <Component :is="layoutComponent" :audio="audio" :size="size">
       <template #controller="controllerProps">
-        <AudioController
+        <VAudioController
           v-model="status"
           v-bind="controllerProps"
           :audio="audio"
@@ -17,7 +17,7 @@
       </template>
 
       <template #play-pause="playPauseProps">
-        <PlayPause
+        <VPlayPause
           v-model="status"
           v-bind="playPauseProps"
           :disabled="!isReady"
@@ -28,31 +28,31 @@
 </template>
 
 <script>
-import { computed, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 
-import PlayPause from '~/components/AudioTrack/PlayPause.vue'
-import AudioController from '~/components/AudioTrack/AudioController.vue'
+import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
+import VAudioController from '~/components/VAudioTrack/VAudioController.vue'
 
-import Full from '~/components/AudioTrack/layouts/Full.vue'
-import Row from '~/components/AudioTrack/layouts/Row.vue'
-import Box from '~/components/AudioTrack/layouts/Box.vue'
-import Global from '~/components/AudioTrack/layouts/Global.vue'
+import VFullLayout from '~/components/VAudioTrack/layouts/VFullLayout.vue'
+import VRowLayout from '~/components/VAudioTrack/layouts/VRowLayout.vue'
+import VBoxLayout from '~/components/VAudioTrack/layouts/VBoxLayout.vue'
+import VGlobalLayout from '~/components/VAudioTrack/layouts/VGlobalLayout.vue'
 
 /**
  * Displays the waveform and basic information about the track, along with
  * controls to play, pause or seek to a point on the track.
  */
-export default {
-  name: 'AudioTrack',
+export default defineComponent({
+  name: 'VAudioTrack',
   components: {
-    AudioController,
-    PlayPause,
+    VAudioController,
+    VPlayPause,
 
     // Layouts
-    Full,
-    Row,
-    Box,
-    Global,
+    VFullLayout,
+    VRowLayout,
+    VBoxLayout,
+    VGlobalLayout,
   },
   props: {
     /**
@@ -105,10 +105,10 @@ export default {
     /* Layout */
 
     const layoutMappings = {
-      full: 'Full',
-      row: 'Row',
-      box: 'Box',
-      global: 'Global',
+      full: 'VFullLayout',
+      row: 'VRowLayout',
+      box: 'VBoxLayout',
+      global: 'VGlobalLayout',
     }
     const layoutComponent = computed(() => layoutMappings[props.layout])
 
@@ -123,5 +123,5 @@ export default {
       layoutComponent,
     }
   },
-}
+})
 </script>
diff --git a/src/components/AudioTrack/PlayPause.vue b/src/components/VAudioTrack/VPlayPause.vue
similarity index 93%
rename from src/components/AudioTrack/PlayPause.vue
rename to src/components/VAudioTrack/VPlayPause.vue
index 1dfd8e3a68..e6f0b31d0b 100644
--- a/src/components/AudioTrack/PlayPause.vue
+++ b/src/components/VAudioTrack/VPlayPause.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 
 import playIcon from '~/assets/icons/play.svg'
@@ -19,8 +21,8 @@ import replayIcon from '~/assets/icons/replay.svg'
  * Displays the control for switching between the playing and paused states of
  * a media file.
  */
-export default {
-  name: 'PlayPause',
+export default defineComponent({
+  name: 'VPlayPause',
   components: { VIconButton },
   inheritAttrs: false,
   model: {
@@ -72,5 +74,5 @@ export default {
       this.$emit('toggle', this.isPlaying ? 'paused' : 'playing')
     },
   },
-}
+})
 </script>
diff --git a/src/components/AudioTrack/Waveform.vue b/src/components/VAudioTrack/VWaveform.vue
similarity index 99%
rename from src/components/AudioTrack/Waveform.vue
rename to src/components/VAudioTrack/VWaveform.vue
index 7586e0e7ed..977abde933 100644
--- a/src/components/AudioTrack/Waveform.vue
+++ b/src/components/VAudioTrack/VWaveform.vue
@@ -153,6 +153,7 @@
 <script>
 import {
   computed,
+  defineComponent,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -163,8 +164,8 @@ import { downsampleArray, upsampleArray } from '~/utils/resampling'
  * Renders an SVG representation of the waveform given a list of heights for the
  * bars.
  */
-export default {
-  name: 'Waveform',
+export default defineComponent({
+  name: 'VWaveform',
   props: {
     /**
      * an array of heights of the bars; The waveform will be generated with
@@ -513,7 +514,7 @@ export default {
       return this.$t('waveform.current-time', { time })
     },
   },
-}
+})
 </script>
 
 <style scoped lang="css">
diff --git a/src/components/AudioTrack/layouts/Box.vue b/src/components/VAudioTrack/layouts/VBoxLayout.vue
similarity index 91%
rename from src/components/AudioTrack/layouts/Box.vue
rename to src/components/VAudioTrack/layouts/VBoxLayout.vue
index df1d7e6450..ef82424e56 100644
--- a/src/components/AudioTrack/layouts/Box.vue
+++ b/src/components/VAudioTrack/layouts/VBoxLayout.vue
@@ -28,13 +28,15 @@
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import VLicense from '~/components/License/VLicense.vue'
 
-export default {
-  name: 'Box',
-  components: { VLicense },
+export default defineComponent({
+  name: 'VBoxLayout',
+  components: {
+    VLicense,
+  },
   props: ['audio', 'size'],
   setup(props) {
     const isSmall = computed(() => props.size === 's')
@@ -54,7 +56,7 @@ export default {
       width,
     }
   },
-}
+})
 </script>
 
 <style>
diff --git a/src/components/AudioTrack/layouts/Full.vue b/src/components/VAudioTrack/layouts/VFullLayout.vue
similarity index 96%
rename from src/components/AudioTrack/layouts/Full.vue
rename to src/components/VAudioTrack/layouts/VFullLayout.vue
index c30b65ffd9..3714c83bbf 100644
--- a/src/components/AudioTrack/layouts/Full.vue
+++ b/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -45,12 +45,12 @@
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import DownloadButton from '~/components/DownloadButton.vue'
 
-export default {
-  name: 'Full',
+export default defineComponent({
+  name: 'VFullLayout',
   components: {
     DownloadButton,
   },
@@ -119,7 +119,7 @@ export default {
       isSmall,
     }
   },
-}
+})
 </script>
 
 <style>
diff --git a/src/components/AudioTrack/layouts/Global.vue b/src/components/VAudioTrack/layouts/VGlobalLayout.vue
similarity index 83%
rename from src/components/AudioTrack/layouts/Global.vue
rename to src/components/VAudioTrack/layouts/VGlobalLayout.vue
index 5e7c9a79ca..1626e5ff8d 100644
--- a/src/components/AudioTrack/layouts/Global.vue
+++ b/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -18,13 +18,17 @@
 </template>
 
 <script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
 import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
 
-export default {
-  name: 'Global',
-  components: { AudioThumbnail },
+export default defineComponent({
+  name: 'VGlobalLayout',
+  components: {
+    AudioThumbnail,
+  },
   props: ['audio'],
-}
+})
 </script>
 
 <style>
diff --git a/src/components/AudioTrack/layouts/Row.vue b/src/components/VAudioTrack/layouts/VRowLayout.vue
similarity index 95%
rename from src/components/AudioTrack/layouts/Row.vue
rename to src/components/VAudioTrack/layouts/VRowLayout.vue
index 90f7293aff..f1784b328c 100644
--- a/src/components/AudioTrack/layouts/Row.vue
+++ b/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -79,13 +79,16 @@
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
 import VLicense from '~/components/License/VLicense.vue'
 
-export default {
-  name: 'Row',
-  components: { AudioThumbnail, VLicense },
+export default defineComponent({
+  name: 'VRowLayout',
+  components: {
+    AudioThumbnail,
+    VLicense,
+  },
   props: ['audio', 'size'],
   setup(props) {
     /* Utils */
@@ -116,7 +119,7 @@ export default {
       isLarge,
     }
   },
-}
+})
 </script>
 
 <style>
diff --git a/src/components/AudioTrack/meta/AudioTrack.stories.mdx b/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
similarity index 95%
rename from src/components/AudioTrack/meta/AudioTrack.stories.mdx
rename to src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
index 96170826a7..1bf6a6e44a 100644
--- a/src/components/AudioTrack/meta/AudioTrack.stories.mdx
+++ b/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx
@@ -6,7 +6,7 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import AudioTrack from '~/components/AudioTrack/AudioTrack'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
 import flacWaveform from './flac-waveform.json'
 import mp3Waveform from './mp3-waveform.json'
@@ -15,7 +15,7 @@ import wavWaveform from './wav-waveform.json'
 
 <Meta
   title="Components/Audio track"
-  component={AudioTrack}
+  component={VAudioTrack}
   argTypes={{
     format: {
       defaultValue: 'mp3',
@@ -79,8 +79,8 @@ export const formatExamples = {
 }
 
 export const Template = (args, { argTypes }) => ({
-  template: `<AudioTrack v-bind="$props" :audio="audioObj"/>`,
-  components: { AudioTrack },
+  template: `<VAudioTrack v-bind="$props" :audio="audioObj"/>`,
+  components: { VAudioTrack },
   props: Object.keys(argTypes),
   computed: {
     audioObj() {
@@ -94,9 +94,9 @@ export const Template = (args, { argTypes }) => ({
 
 # Audio track
 
-<Description of={AudioTrack} />
+<Description of={VAudioTrack} />
 
-<ArgsTable of={AudioTrack} />
+<ArgsTable of={VAudioTrack} />
 
 **Audio thumbnail:** "Mozart Family" by
 [Johann Nepomuk della Croce](https://en.wikipedia.org/wiki/Johann_Nepomuk_della_Croce)
@@ -268,7 +268,7 @@ media, enabling only one player to be active at any given time.
 export const Multiple = () => ({
   template: `
     <div>
-      <AudioTrack
+      <VAudioTrack
         v-for="(audio, key) in formatExamples"
         :key="key"
         class="mb-8"
@@ -276,7 +276,7 @@ export const Multiple = () => ({
         layout="row"/>
     </div>
   `,
-  components: { AudioTrack },
+  components: { VAudioTrack },
   data() {
     return { formatExamples }
   },
diff --git a/src/components/AudioTrack/meta/PlayPause.stories.mdx b/src/components/VAudioTrack/meta/VPlayPause.stories.mdx
similarity index 85%
rename from src/components/AudioTrack/meta/PlayPause.stories.mdx
rename to src/components/VAudioTrack/meta/VPlayPause.stories.mdx
index 68d9fd41ce..bc5257e41b 100644
--- a/src/components/AudioTrack/meta/PlayPause.stories.mdx
+++ b/src/components/VAudioTrack/meta/VPlayPause.stories.mdx
@@ -6,11 +6,11 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import PlayPause from '~/components/AudioTrack/PlayPause'
+import VPlayPause from '~/components/VAudioTrack/VPlayPause.vue'
 
 <Meta
   title="Components/Audio track/Play-pause toggle"
-  components={PlayPause}
+  components={VPlayPause}
   argTypes={{
     status: {
       options: ['playing', 'paused', 'played'],
@@ -28,16 +28,16 @@ import PlayPause from '~/components/AudioTrack/PlayPause'
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<PlayPause v-bind="$props" v-on="$props"/>`,
-  components: { PlayPause },
+  template: `<VPlayPause v-bind="$props" v-on="$props"/>`,
+  components: { VPlayPause },
   props: Object.keys(argTypes),
 })
 
 # Play-pause toggle
 
-<Description of={PlayPause} />
+<Description of={VPlayPause} />
 
-<ArgsTable of={PlayPause} />
+<ArgsTable of={VPlayPause} />
 
 It should be noted that the component emits the `toggle` event with the opposite
 value of its `status` state.
@@ -72,11 +72,11 @@ be achieved by playing till the end of a track.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <PlayPause v-model="status" />
+      <VPlayPause v-model="status" />
       {{ status }}
     </div>
   `,
-  components: { PlayPause },
+  components: { VPlayPause },
   data() {
     return {
       status: 'played',
diff --git a/src/components/AudioTrack/meta/Waveform.stories.mdx b/src/components/VAudioTrack/meta/VWaveform.stories.mdx
similarity index 94%
rename from src/components/AudioTrack/meta/Waveform.stories.mdx
rename to src/components/VAudioTrack/meta/VWaveform.stories.mdx
index 3ac32eaf0f..bff9c5b19c 100644
--- a/src/components/AudioTrack/meta/Waveform.stories.mdx
+++ b/src/components/VAudioTrack/meta/VWaveform.stories.mdx
@@ -6,11 +6,11 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import Waveform from '~/components/AudioTrack/Waveform'
+import VWaveform from '~/components/VAudioTrack/VWaveform.vue'
 
 <Meta
   title="Components/Audio track/Waveform"
-  components={Waveform}
+  components={VWaveform}
   argTypes={{
     seeked: {
       action: 'seeked',
@@ -19,8 +19,8 @@ import Waveform from '~/components/AudioTrack/Waveform'
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<Waveform class="w-full h-30" v-bind="$props" v-on="$props"/>`,
-  components: { Waveform },
+  template: `<VWaveform class="w-full h-30" v-bind="$props" v-on="$props"/>`,
+  components: { VWaveform },
   props: Object.keys(argTypes),
 })
 
diff --git a/src/components/AudioTrack/meta/flac-waveform.json b/src/components/VAudioTrack/meta/flac-waveform.json
similarity index 100%
rename from src/components/AudioTrack/meta/flac-waveform.json
rename to src/components/VAudioTrack/meta/flac-waveform.json
diff --git a/src/components/AudioTrack/meta/mp3-waveform.json b/src/components/VAudioTrack/meta/mp3-waveform.json
similarity index 100%
rename from src/components/AudioTrack/meta/mp3-waveform.json
rename to src/components/VAudioTrack/meta/mp3-waveform.json
diff --git a/src/components/AudioTrack/meta/ogg-waveform.json b/src/components/VAudioTrack/meta/ogg-waveform.json
similarity index 100%
rename from src/components/AudioTrack/meta/ogg-waveform.json
rename to src/components/VAudioTrack/meta/ogg-waveform.json
diff --git a/src/components/AudioTrack/meta/wav-waveform.json b/src/components/VAudioTrack/meta/wav-waveform.json
similarity index 100%
rename from src/components/AudioTrack/meta/wav-waveform.json
rename to src/components/VAudioTrack/meta/wav-waveform.json
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 6a555b887f..c6a2a69dc9 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: 2021-12-02T15:06:49+00:00\n"
+"POT-Creation-Date: 2021-12-16T09:49:12+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -13,12 +13,12 @@ msgstr ""
 "Language-Team: LANGUAGE <LL@li.org>\n"
 
 
-#: src/components/AudioTrack/layouts/Full.vue:25
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:32
 msgctxt "interpunct"
 msgid "•"
 msgstr ""
 
-#: src/components/VModal/VModalContent.vue:19
+#: src/components/VModal/VModalContent.vue:25
 msgctxt "modal.close"
 msgid "Close"
 msgstr ""
@@ -134,7 +134,7 @@ msgctxt "audio-categories.podcast"
 msgid "Podcast"
 msgstr ""
 
-#: src/components/Header/SearchBar/SearchButton.vue:5
+#: src/components/Header/SearchBar/SearchButton.vue:7
 msgctxt "search.search"
 msgid "Search"
 msgstr ""
@@ -151,13 +151,13 @@ msgctxt "play-pause.replay"
 msgid "Replay"
 msgstr ""
 
-#: src/components/AudioTrack/AudioTrack.vue:4
+#: src/components/VAudioTrack/VAudioTrack.vue:4
 msgctxt "audio-track.aria-label"
 msgid "Audio Player"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/layouts/Full.vue:12
+#: src/components/VAudioTrack/layouts/VFullLayout.vue:17
 msgctxt "audio-track.creator"
 msgid "by ###creator###"
 msgstr ""
@@ -188,13 +188,13 @@ msgctxt "audio-thumbnail.alt"
 msgid "Cover art for \"###title###\" by ###creator###"
 msgstr ""
 
-#: src/components/AudioTrack/Waveform.vue:8
+#: src/components/VAudioTrack/Waveform.vue:12
 msgctxt "waveform.label"
 msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioTrack/Waveform.vue:432
+#: src/components/VAudioTrack/Waveform.vue:513
 msgctxt "waveform.current-time"
 msgid "###time### seconds"
 msgstr ""
@@ -215,7 +215,7 @@ msgctxt "browsers.edge"
 msgid "Edge"
 msgstr ""
 
-#: src/components/MetaSearch/MetaSearchForm.vue:43
+#: src/components/VMetaSearch/VMetaSearchForm.vue:43
 msgctxt "meta-search.caption"
 msgid "Openverse does not currently index the sources listed above, but through this interface is offering convenient access to search services provided by other independent organizations. Openverse has no control over the results that are returned. Do not assume that the results displayed in this search portal are under a CC license. Always verify that the work is actually under a CC license by following the link. If you are in doubt, you should contact the copyright holder directly, or try to contact the site where you found the content."
 msgstr ""
@@ -232,13 +232,13 @@ msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/MetaSearch/MetaSearchForm.vue:4
+#: src/components/VMetaSearch/VMetaSearchForm.vue:4
 msgctxt "meta-search.form.no-results-title"
 msgid "No ###type### results for \"###query###\"."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/MetaSearch/MetaSearchForm.vue:31
+#: src/components/VMetaSearch/VMetaSearchForm.vue:31
 msgctxt "meta-search.form.caption"
 msgid "Click on a source below to directly search other collections of CC-licensed ###type###.###break###Please note that Use filters are not supported for ###filter###."
 msgstr ""
@@ -660,12 +660,10 @@ msgctxt "browse-page.all-no-results"
 msgid "No results"
 msgstr ""
 
-#: src/components/AudioResultsList.vue:72
 msgctxt "browse-page.audio-no-results"
 msgid "No audio results"
 msgstr ""
 
-#: src/components/SearchGridManualLoad.vue:101
 msgctxt "browse-page.image-no-results"
 msgid "No image results"
 msgstr ""
@@ -713,18 +711,18 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioResultsList.vue:26
+#: src/components/ImageGrid/LoadMoreButton.vue:42
 msgctxt "browse-page.no-more"
 msgid "No more ###type### :("
 msgstr ""
 
-#: src/components/AudioResultsList.vue:30
+#: src/components/ImageGrid/LoadMoreButton.vue:45
 msgctxt "browse-page.load"
 msgid "Load more results"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/AudioResultsList.vue:40
+#: src/components/ImageGrid/ImageGrid.vue:53
 msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
@@ -734,7 +732,7 @@ msgctxt "browse-page.aria.close"
 msgid "close"
 msgstr ""
 
-#: src/components/ScrollButton.vue:4
+#: src/components/VScrollButton.vue:3
 msgctxt "browse-page.aria.scroll"
 msgid "scroll to top"
 msgstr ""
@@ -757,27 +755,27 @@ msgctxt "browse-page.aria.creator"
 msgid "search by creator"
 msgstr ""
 
-#: src/components/SearchRating.vue:7
+#: src/components/VSearchRating.vue:7
 msgctxt "browse-page.aria.relevance.yes"
 msgid "relevant result? answer: yes"
 msgstr ""
 
-#: src/components/SearchRating.vue:16
+#: src/components/VSearchRating.vue:16
 msgctxt "browse-page.aria.relevance.no"
 msgid "relevant result? answer: no"
 msgstr ""
 
-#: src/components/SaferBrowsing.vue:9
+#: src/components/VSaferBrowsing.vue:9
 msgctxt "browse-page.safer-browsing.title"
 msgid "Safer Browsing"
 msgstr ""
 
-#: src/components/SaferBrowsing.vue:21
+#: src/components/VSaferBrowsing.vue:21
 msgctxt "browse-page.safer-browsing.caption"
 msgid "By default, search results will not include results that have been reported as mature by users and sources."
 msgstr ""
 
-#: src/components/SaferBrowsing.vue:33
+#: src/components/VSaferBrowsing.vue:33
 msgctxt "browse-page.safer-browsing.label"
 msgid "Show Mature Content"
 msgstr ""
@@ -817,12 +815,12 @@ msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
 
-#: src/components/ImageGrid/ImageGrid.vue:64
+#: src/components/ImageGrid/ImageGrid.vue:52
 msgctxt "browse-page.search-form.image"
 msgid "images"
 msgstr ""
 
-#: src/components/AudioResultsList.vue:27
+#: src/pages/search/audio.vue:53
 msgctxt "browse-page.search-form.audio"
 msgid "audio"
 msgstr ""
@@ -844,22 +842,22 @@ msgctxt "browse-page.search-form.button"
 msgid "Search"
 msgstr ""
 
-#: src/components/SearchRating.vue:5
+#: src/components/VSearchRating.vue:5
 msgctxt "browse-page.search-rating.content"
 msgid "Are these results relevant?"
 msgstr ""
 
-#: src/components/SearchRating.vue:12
+#: src/components/VSearchRating.vue:12
 msgctxt "browse-page.search-rating.yes"
 msgid "Yes"
 msgstr ""
 
-#: src/components/SearchRating.vue:21
+#: src/components/VSearchRating.vue:21
 msgctxt "browse-page.search-rating.no"
 msgid "No"
 msgstr ""
 
-#: src/components/SearchRating.vue:26
+#: src/components/VSearchRating.vue:26
 msgctxt "browse-page.search-rating.feedback-thanks"
 msgid "Thank you for the feedback!"
 msgstr ""
@@ -1142,7 +1140,7 @@ msgid "An error occurred"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/photos/_id.vue:54
+#: src/pages/image/_id.vue:54
 msgctxt "error.image-not-found"
 msgid "Couldn't find image with id ###id###"
 msgstr ""
@@ -1757,12 +1755,12 @@ msgctxt "sources.providers.source"
 msgid "Source"
 msgstr ""
 
-#: src/pages/sources.vue:101
+#: src/pages/sources.vue:107
 msgctxt "sources.providers.domain"
 msgid "Domain"
 msgstr ""
 
-#: src/pages/sources.vue:108
+#: src/pages/sources.vue:117
 msgctxt "sources.providers.item"
 msgid "Total items"
 msgstr ""
@@ -1997,7 +1995,7 @@ msgctxt "header.extension-nav-item"
 msgid "Web extension"
 msgstr ""
 
-#: src/components/NavSection.vue:172
+#: src/components/NavSection.vue:173
 msgctxt "header.placeholder"
 msgid "Search all content"
 msgstr ""
@@ -2051,12 +2049,12 @@ msgid "OK"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/layouts/default.vue:10
+#: src/components/TranslationStatusBanner.vue:7
 msgctxt "notification.translation.text"
 msgid "The translation for ###locale### locale is incomplete. Help us get to 100 percent by ###link###."
 msgstr ""
 
-#: src/layouts/default.vue:13
+#: src/components/TranslationStatusBanner.vue:10
 msgctxt "notification.translation.link"
 msgid "contributing a translation"
 msgstr ""
@@ -2065,12 +2063,12 @@ msgctxt "hero.brand"
 msgid "Openverse"
 msgstr ""
 
-#: src/components/HeroSection.vue:6
+#: src/components/VHeroSection.vue:6
 msgctxt "hero.title"
 msgid "Search for content to reuse"
 msgstr ""
 
-#: src/components/HeroSection.vue:9
+#: src/components/VHeroSection.vue:9
 msgctxt "hero.subtitle"
 msgid "Browse over 500 million images, available for reuse"
 msgstr ""
@@ -2085,17 +2083,17 @@ msgctxt "hero.search-type.image"
 msgid "Images"
 msgstr ""
 
-#: src/components/HeroSection.vue:40
+#: src/components/VHeroSection.vue:40
 msgctxt "hero.search-type.prompt"
 msgid "I would like to find:"
 msgstr ""
 
-#: src/components/HeroSection.vue:24
+#: src/components/VHeroSection.vue:24
 msgctxt "hero.aria.search"
 msgid "search"
 msgstr ""
 
-#: src/components/HeroSection.vue:50
+#: src/components/VHeroSection.vue:50
 msgctxt "hero.aria.caption"
 msgid "about cc licenses"
 msgstr ""
@@ -2120,22 +2118,22 @@ msgid "I want something I can"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/HeroSection.vue:45
+#: src/components/VHeroSection.vue:45
 msgctxt "hero.caption.content"
 msgid "All our content is under Creative Commons licenses or in the public domain. ###link### about CC licenses and tools."
 msgstr ""
 
-#: src/components/HeroSection.vue:53
+#: src/components/VHeroSection.vue:53
 msgctxt "hero.caption.link"
 msgid "Learn more"
 msgstr ""
 
-#: src/components/HeroSection.vue:28
+#: src/components/VHeroSection.vue:28
 msgctxt "hero.search.placeholder"
 msgid "Search all content"
 msgstr ""
 
-#: src/components/HeroSection.vue:35
+#: src/components/VHeroSection.vue:35
 msgctxt "hero.search.button"
 msgid "Search"
 msgstr ""
diff --git a/src/pages/audio/_id.vue b/src/pages/audio/_id.vue
index 67ea468d7b..9a223c1ec3 100644
--- a/src/pages/audio/_id.vue
+++ b/src/pages/audio/_id.vue
@@ -1,6 +1,6 @@
 <template>
   <div :aria-label="$t('photo-details.aria.main')" class="audio-page">
-    <AudioTrack :audio="audio" class="main-track" />
+    <VAudioTrack :audio="audio" class="main-track" />
     <MediaReuse
       data-testid="audio-attribution"
       :media="audio"
diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue
index 5075721e62..705242b880 100644
--- a/src/pages/search/audio.vue
+++ b/src/pages/search/audio.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <template v-if="supported">
-      <AudioTrack
+      <VAudioTrack
         v-for="audio in mediaResults.items"
         :key="audio.id"
         class="px-6 mb-6"
@@ -31,7 +31,7 @@
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 import { useLoadMore } from '~/composables/use-load-more'
 
-import AudioTrack from '~/components/AudioTrack/AudioTrack.vue'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 import LoadMoreButton from '~/components/ImageGrid/LoadMoreButton.vue'
 
 import { propTypes } from './search-page.types'
@@ -39,7 +39,7 @@ import { propTypes } from './search-page.types'
 const AudioSearch = defineComponent({
   name: 'AudioSearch',
   components: {
-    AudioTrack,
+    VAudioTrack,
     LoadMoreButton,
   },
   props: propTypes,

From cd46e6a45e2050c209245b5b271ea34d3d3935bf Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 16 Dec 2021 14:13:06 +0400
Subject: [PATCH 3/3] Fix tests

---
 .../components/AudioTrack/audio-track.spec.js    | 16 ++++++++--------
 .../unit/specs/components/related-audios.spec.js |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/unit/specs/components/AudioTrack/audio-track.spec.js b/test/unit/specs/components/AudioTrack/audio-track.spec.js
index 5014e104c2..494787b68b 100644
--- a/test/unit/specs/components/AudioTrack/audio-track.spec.js
+++ b/test/unit/specs/components/AudioTrack/audio-track.spec.js
@@ -1,4 +1,4 @@
-import AudioTrack from '~/components/AudioTrack/AudioTrack'
+import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 import { render } from '@testing-library/vue'
 import Vuei18n from 'vue-i18n'
 
@@ -18,12 +18,12 @@ const useVueI18n = (vue) => {
 }
 
 const stubs = {
-  AudioController: true,
+  VAudioController: true,
   DownloadButton: true,
-  PlayPause: true,
+  VPlayPause: true,
   NuxtLink: true,
   VLicense: true,
-  Waveform: true,
+  VWaveform: true,
 }
 
 describe('AudioTrack', () => {
@@ -82,7 +82,7 @@ describe('AudioTrack', () => {
   })
 
   it('should render the full audio track component even without duration', () => {
-    const { getByText } = render(AudioTrack, options, useVueI18n)
+    const { getByText } = render(VAudioTrack, options, useVueI18n)
     getByText(props.audio.creator)
   })
 
@@ -91,19 +91,19 @@ describe('AudioTrack', () => {
       ...options.propsData,
       layout: 'row',
     }
-    const { getByText } = render(AudioTrack, options, useVueI18n)
+    const { getByText } = render(VAudioTrack, options, useVueI18n)
     getByText('by ' + props.audio.creator)
   })
 
   it('should show audio title as main page title', () => {
-    const { getByText } = render(AudioTrack, options, useVueI18n)
+    const { getByText } = render(VAudioTrack, options, useVueI18n)
     const element = getByText(props.audio.title)
     expect(element).toBeInstanceOf(HTMLHeadingElement)
     expect(element.tagName).toEqual('H1')
   })
 
   it('should show audio creator with link', () => {
-    const { getByText } = render(AudioTrack, options, useVueI18n)
+    const { getByText } = render(VAudioTrack, options, useVueI18n)
     const element = getByText(props.audio.creator)
     expect(element).toBeInstanceOf(HTMLAnchorElement)
     expect(element).toHaveAttribute('href', props.audio.creator_url)
diff --git a/test/unit/specs/components/related-audios.spec.js b/test/unit/specs/components/related-audios.spec.js
index 288de77674..1c22ddabd4 100644
--- a/test/unit/specs/components/related-audios.spec.js
+++ b/test/unit/specs/components/related-audios.spec.js
@@ -25,7 +25,7 @@ const doRender = async () => {
       localVue,
       propsData: { audioId: 'foo', service: serviceMock },
       mocks: { $fetchState: { pending: false, error: null, timestamp: null } },
-      stubs: { LoadingIcon: true, AudioTrack: true },
+      stubs: { LoadingIcon: true, VAudioTrack: true },
     },
     mount
   )
@@ -38,7 +38,7 @@ describe('RelatedAudios', () => {
     const header = wrapper.find('h4').text()
     expect(header).toEqual('audio-details.related-audios')
 
-    const audioTracks = wrapper.findAll('audiotrack-stub')
+    const audioTracks = wrapper.findAll('vaudiotrack-stub')
     expect(audioTracks.length).toEqual(audioResults.length)
 
     expect(serviceMock.getRelatedMedia).toHaveBeenCalledTimes(1)