Update the global audio player (#3265)

* Update global audio component * Remove unused VCloseButton component * Add changes from code review Set border to dark-charcoal opacity-20, corner radius to 4px Signed-off-by: Olga Bulat <[email protected]> * Fix global player border radius Refactor Global layout to use CSS grid Signed-off-by: Olga Bulat <[email protected]> * Replace the border with a ring Signed-off-by: Olga Bulat <[email protected]> * Remove `handleError` from returns Signed-off-by: Olga Bulat <[email protected]> * Make VButton accept an array for connections Signed-off-by: Olga Bulat <[email protected]> * Fix global player border radius Refactor Global layout to use CSS grid Signed-off-by: Olga Bulat <[email protected]> * Replace the border with a ring Signed-off-by: Olga Bulat <[email protected]> * Lower the ring width to 1px (from 1.5) * Fix types Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Nov 7, 2023 · 75712ef · 75712ef
1 parent fda20d7
commit 75712ef
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 287 deletions.
diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -1,7 +1,7 @@
 <template>
   <VIconButton
     :tabindex="isTabbable ? 0 : -1"
-    class="play-pause"
+    class="audio-control"
     :size="buttonSize"
     variant="filled-dark"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
@@ -52,12 +52,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} as const
+const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
+  {
+    row: ["end"],
+    global: ["top", "end"],
+    box: [],
+    full: [],
+  } as const
 
 /**
  * The mapping of play-pause control sizes to the VIconButton sizes
@@ -137,8 +138,8 @@ export default defineComponent({
      */
     const connections = computed(() => {
       return props.layout === "row" && props.size === "small"
-        ? "none"
-        : layoutConnectionsMap[props.layout]
+        ? []
+        : [...layoutConnectionsMap[props.layout]]
     })
 
     /** Convert the `play-pause` sizes to `VIconButton` sizes */

diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="audio-track" :aria-label="ariaLabel" role="region">
+  <div
+    class="audio-track relative rounded"
+    :aria-label="ariaLabel"
+    role="region"
+  >
     <VGlobalLayout :audio="audio">
       <template #controller="waveformProps">
         <VWaveform
@@ -14,9 +18,10 @@
         />
       </template>
 
-      <template #play-pause="playPauseProps">
-        <VPlayPause
-          v-bind="playPauseProps"
+      <template #audio-control="{ size, layout }">
+        <VAudioControl
+          :size="size"
+          :layout="layout"
           :status="status"
           @toggle="handleToggle"
         />
@@ -40,7 +45,7 @@ import type { AudioInteraction } from "~/types/analytics"
 import type { AudioDetail } from "~/types/media"
 import type { AudioStatus } from "~/constants/audio"
 
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
+import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 
@@ -51,7 +56,7 @@ import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 export default defineComponent({
   name: "VGlobalAudioTrack",
   components: {
-    VPlayPause,
+    VAudioControl,
     VWaveform,
     VGlobalLayout,
   },

diff --git a/frontend/src/components/VAudioTrack/VPlayPause.vue b/frontend/src/components/VAudioTrack/VPlayPause.vue
@@ -45,12 +45,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} as const
+const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
+  {
+    row: ["end"],
+    global: ["top", "end"],
+    box: [],
+    full: [],
+  } as const
 
 /**
  * Displays the control for switching between the playing and paused states of
@@ -109,7 +110,7 @@ export default defineComponent({
     const buttonProps = computed(() => {
       const variant = "plain--avoid" as ButtonVariant
 
-      return { variant, connections: layoutConnectionsMap[props.layout] }
+      return { variant, connections: [...layoutConnectionsMap[props.layout]] }
     })
 
     const handleMouseDown = (event: MouseEvent) => {

diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="global-track flex w-full flex-row">
-    <div class="flex-shrink-0">
-      <VAudioThumbnail :audio="audio" />
-      <slot name="play-pause" size="large" layout="global" />
+  <div
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-dark-charcoal ring-opacity-20"
+  >
+    <div class="h-12 w-12 rounded-ss">
+      <VAudioThumbnail class="rounded-ss" :audio="audio" />
     </div>
 
-    <div class="relative flex-grow">
+    <div class="flex h-12 items-center justify-between rounded-se bg-white">
       <VLink
         :href="`/audio/${audio.id}`"
-        class="hover-underline absolute inset-x-0 top-[10.5px] z-10 line-clamp-2 flex flex-row items-center justify-between px-4 pe-12 text-sr font-semibold text-dark-charcoal"
+        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-dark-charcoal"
         :class="{ 'blur-text': shouldBlur }"
       >
         {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
       </VLink>
-
-      <slot name="controller" :usable-frac="0.5" />
     </div>
+    <slot name="audio-control" size="medium" layout="global" />
+    <slot name="controller" :usable-frac="1" />
   </div>
 </template>
 
@@ -52,12 +53,20 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 .global-track .thumbnail {
-  @apply h-14 w-14;
+  @apply h-12 w-12 rounded-ss;
+}
+.global-track .thumbnail img,
+.global-track .thumbnail ~ svg {
+  @apply rounded-ss;
 }
 
 .global-track .waveform {
-  @apply h-full;
+  @apply h-full rounded-ee;
+  --waveform-background-color: theme("colors.white");
+}
+.global-track .audio-control {
+  @apply rounded-es;
 }
 </style>
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
@@ -7,9 +7,9 @@
       $style.button,
       $style[variant],
       $style[`size-${size}${iconOnly ? '-icon-only' : ''}`],
+      connectionStyles,
       {
         [$style[`${variant}-pressed`]]: isActive,
-        [$style[`connection-${connections}`]]: isConnected,
         [$style[`icon-start-${size}`]]: hasIconStart,
         [$style[`icon-end-${size}`]]: hasIconEnd,
         [$style[`icon-only`]]: iconOnly,
@@ -159,13 +159,12 @@ const VButton = defineComponent({
     /**
      * Whether the button is connected to another control and needs to have no rounded
      * borders at that edge.
-     * `all` means that the button is not rounded.
      *
-     * @default 'none'
+     * @default []
      */
     connections: {
-      type: String as PropType<ButtonConnections>,
-      default: "none",
+      type: Array as PropType<ButtonConnections[]>,
+      default: () => [] as ButtonConnections[],
     },
     /**
      * Whether the button has an icon at the inline start of the button.
@@ -203,7 +202,11 @@ const VButton = defineComponent({
     const typeRef = ref<ButtonType | undefined>(propsRef.type.value)
     const supportsDisabledAttributeRef = ref(true)
 
-    const isConnected = computed(() => props.connections !== "none")
+    const connectionStyles = computed(() =>
+      props.connections
+        .map((connection) => `connection-${connection}`)
+        .join(" ")
+    )
 
     const isActive = computed(() => {
       return (
@@ -272,7 +275,7 @@ const VButton = defineComponent({
       ariaDisabledRef,
       typeRef,
       isActive,
-      isConnected,
+      connectionStyles,
       isPlainDangerous,
       isFocusSlimFilled,
       isFocusSlimTx,
@@ -386,14 +389,19 @@ a.button {
 .dropdown-label-pressed {
   @apply border-tx bg-dark-charcoal text-white active:hover:border-white;
 }
+</style>
 
+<style scoped>
 .connection-start {
   @apply rounded-s-none;
 }
 .connection-end {
   @apply rounded-e-none;
 }
-.connection-all {
-  @apply rounded-none;
+.connection-top {
+  @apply rounded-se-none rounded-ss-none;
+}
+.connection-bottom {
+  @apply rounded-ee-none rounded-es-none;
 }
 </style>
diff --git a/frontend/src/components/VCloseButton.vue b/frontend/src/components/VCloseButton.vue