Update the Audio track in row, box and full layouts (#3297)

* Fix global player border radius Refactor Global layout to use CSS grid Signed-off-by: Olga Bulat <obulat@gmail.com> * Replace the border with a ring Signed-off-by: Olga Bulat <obulat@gmail.com> * Make the `layout` a required prop for `VAudioTrack` Signed-off-by: Olga Bulat <obulat@gmail.com> * Update unit tests Signed-off-by: Olga Bulat <obulat@gmail.com> * Use AudioControl in Full, Box and Row layouts Signed-off-by: Olga Bulat <obulat@gmail.com> * Update snapshots Signed-off-by: Olga Bulat <obulat@gmail.com> * Update global audio snapshots Signed-off-by: Olga Bulat <obulat@gmail.com> * Update v-box-layout.spec.js Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix row layout when creator name is very long Signed-off-by: Olga Bulat <obulat@gmail.com> * Update snapshots Signed-off-by: Olga Bulat <obulat@gmail.com> * Remove debugging long title Signed-off-by: Olga Bulat <obulat@gmail.com> * Remove VPlayPause Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix VBoxLayout size and control style Signed-off-by: Olga Bulat <obulat@gmail.com> * Fix VRowLayout spacings Signed-off-by: Olga Bulat <obulat@gmail.com> * Add box layout size to tests Signed-off-by: Olga Bulat <obulat@gmail.com> * Update snapshots Signed-off-by: Olga Bulat <obulat@gmail.com> --------- Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Nov 13, 2023 · fd61b0c · fd61b0c
1 parent 8f9ea0a
commit fd61b0c
Show file tree

Hide file tree

Showing 47 changed files with 208 additions and 513 deletions.
diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -3,7 +3,7 @@
     :tabindex="isTabbable ? 0 : -1"
     class="audio-control"
     :size="buttonSize"
-    variant="filled-dark"
+    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
     :label="$t(label)"
     :connections="connections"
@@ -61,7 +61,7 @@ const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
   } as const
 
 /**
- * The mapping of play-pause control sizes to the VIconButton sizes
+ * The mapping of audio control sizes to the VIconButton sizes
  * and the sizes of the contained icon.
  */
 const sizes = {
@@ -111,7 +111,7 @@ export default defineComponent({
         (audioLayouts as readonly string[]).includes(val),
     },
     /**
-     * Whether the play-pause button can be focused by using the `Tab` key
+     * Whether the audio control button can be focused by using the `Tab` key
      */
     isTabbable: {
       type: Boolean,
@@ -142,7 +142,7 @@ export default defineComponent({
         : [...layoutConnectionsMap[props.layout]]
     })
 
-    /** Convert the `play-pause` sizes to `VIconButton` sizes */
+    /** Convert the `audio-control` sizes to `VIconButton` sizes */
     const buttonSize = computed(() => sizes[props.size].button)
 
     const iSize = computed(() => sizes[props.size].icon)

diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -36,20 +36,11 @@
         />
       </template>
 
-      <template #play-pause="playPauseProps">
+      <template #audio-control="audioControlProps">
         <VAudioControl
-          v-if="layout === 'full' && additionalSearchViews"
-          ref="playPauseRef"
-          size="medium"
+          ref="audioControlRef"
           :status="status"
-          v-bind="playPauseProps"
-          @toggle="handleToggle"
-        />
-        <VPlayPause
-          v-else
-          ref="playPauseRef"
-          :status="status"
-          v-bind="playPauseProps"
+          v-bind="audioControlProps"
           @toggle="handleToggle"
         />
       </template>
@@ -80,7 +71,6 @@ import {
 
 import { useActiveMediaStore } from "~/stores/active-media"
 import { useMediaStore } from "~/stores/media"
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { AUDIO } from "~/constants/media"
 import {
@@ -99,7 +89,6 @@ import { defineEvent } from "~/types/emits"
 import type { AudioTrackClickEvent } from "~/types/events"
 
 import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VFullLayout from "~/components/VAudioTrack/layouts/VFullLayout.vue"
 import VRowLayout from "~/components/VAudioTrack/layouts/VRowLayout.vue"
@@ -116,7 +105,6 @@ export default defineComponent({
   name: "VAudioTrack",
   components: {
     VAudioControl,
-    VPlayPause,
     VWaveform,
     VLink,
     VWarningSuppressor,
@@ -141,7 +129,7 @@ export default defineComponent({
      */
     layout: {
       type: String as PropType<AudioLayout>,
-      default: "full",
+      required: true,
     },
     /**
      * the size of the component; Both 'box' and 'row' layouts offer multiple
@@ -412,7 +400,7 @@ export default defineComponent({
         : ""
     )
 
-    /* Interface with VPlayPause */
+    /* Interface with VAudioControl */
 
     /**
      * This function can safely ignore the `loading` status because
@@ -490,7 +478,7 @@ export default defineComponent({
      * so we can capture clicks and skip
      * sending an event to the boxed layout.
      */
-    const playPauseRef = ref<{ $el: HTMLElement } | null>(null)
+    const audioControlRef = ref<{ $el: HTMLElement } | null>(null)
 
     /**
      * A ref used on the waveform, so we can capture mousedown on the
@@ -583,11 +571,6 @@ export default defineComponent({
       }
     }
 
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() =>
-      featureFlagStore.isOn("additional_search_views")
-    )
-
     return {
       status,
       message,
@@ -612,10 +595,8 @@ export default defineComponent({
       isComposite,
       containerAttributes,
 
-      playPauseRef,
+      audioControlRef,
       waveformRef,
-
-      additionalSearchViews,
     }
   },
 })

diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -196,7 +196,7 @@ export default defineComponent({
       () => activeMediaStore.message ?? undefined
     )
 
-    /* Interface with VPlayPause */
+    /* Interface with VAudioControl */
 
     const sendAudioInteractionEvent = (event: AudioInteraction) => {
       sendCustomEvent("AUDIO_INTERACTION", {

diff --git a/frontend/src/components/VAudioTrack/VPlayPause.vue b/frontend/src/components/VAudioTrack/VPlayPause.vue