Put updated single audio detail page changes behind flag

frontend/src/components/VAudioTrack/VAudioTrack.vue

@@ -38,8 +38,9 @@
 
       <template #play-pause="playPauseProps">
         <VAudioControl
-          v-if="layout === 'full'"
+          v-if="layout === 'full' && additionalSearchViews"
           ref="playPauseRef"
+          size="medium"
           :status="status"
           v-bind="playPauseProps"
           @toggle="handleToggle"
@@ -79,6 +80,7 @@ import {
 
 import { useActiveMediaStore } from "~/stores/active-media"
 import { useMediaStore } from "~/stores/media"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { AUDIO } from "~/constants/media"
 import {
@@ -581,6 +583,11 @@ export default defineComponent({
       }
     }
 
+    const featureFlagStore = useFeatureFlagStore()
+    const additionalSearchViews = computed(() =>
+      featureFlagStore.isOn("additional_search_views")
+    )
+
     return {
       status,
       message,
@@ -607,6 +614,8 @@ export default defineComponent({
 
       playPauseRef,
       waveformRef,
+
+      additionalSearchViews,
     }
   },
 })

frontend/src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -15,30 +15,34 @@
         <slot name="controller" :features="audioFeatures" :usable-frac="0.8" />
       </div>
     </div>
-
     <div
-      class="mx-auto grid grid-cols-1 grid-rows-[auto,auto] gap-6 p-6 pb-0 lg:mb-6 lg:max-w-5xl"
+      class="mx-auto gap-6 lg:max-w-5xl lg:flex-nowrap"
+      :class="[
+        additionalSearchViews
+          ? 'grid grid-cols-1 grid-rows-[auto,auto] p-6 pb-0 lg:mb-6'
+          : 'items-top mt-6 flex flex-row flex-wrap px-6',
+      ]"
     >
-      <div class="row-start-1 flex justify-between gap-x-6 sm:col-start-2">
+      <div
+        v-if="additionalSearchViews"
+        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2"
+      >
         <slot name="play-pause" size="medium" />
-        <VButton
-          as="VLink"
-          :href="audio.foreign_landing_url"
-          size="large"
-          variant="filled-pink"
-          has-icon-end
-          show-external-icon
-          :external-icon-size="6"
-          class="description-bold col-start-2 flex-shrink-0"
-          :send-external-link-click-event="false"
-          @click="sendGetMediaEvent"
-        >
-          {{ $t("audioDetails.weblink") }}
-        </VButton>
+        <VGetMediaButton
+          :media="audio"
+          media-type="audio"
+          class="col-start-2 flex-shrink-0"
+        />
       </div>
+      <slot v-else name="play-pause" :size="isSmall ? 'small' : 'large'" />
 
       <div
-        class="audio-info row-start-2 flex w-full flex-col justify-center sm:col-start-1 sm:row-start-1 lg:w-auto"
+        class="audio-info flex w-full flex-col justify-center lg:w-auto"
+        :class="[
+          additionalSearchViews
+            ? 'row-start-2 sm:col-start-1 sm:row-start-1'
+            : 'order-2 lg:order-1',
+        ]"
       >
         <h1 class="description-bold lg:heading-5 lg:line-clamp-2">
           {{ audio.title }}
@@ -49,16 +53,36 @@
           <i18n as="span" path="audioTrack.creator" class="font-semibold">
             <template #creator>
               <VLink
-                class="rounded-sm p-px focus-visible:outline-none focus-visible:ring focus-visible:ring-pink"
+                class="rounded-sm p-px"
+                :class="
+                  additionalSearchViews
+                    ? 'focus-visible:outline-none focus-visible:ring focus-visible:ring-pink'
+                    : 'focus:outline-none focus:ring focus:ring-pink'
+                "
                 :href="audio.creator_url"
                 :send-external-link-click-event="false"
               >
                 {{ audio.creator }}
               </VLink>
             </template>
           </i18n>
+          <template v-if="!additionalSearchViews">
+            <span
+              class="hidden text-dark-charcoal-70 lg:block"
+              aria-hidden="true"
+              >{{ $t("interpunct") }}</span
+            >
+
+            <div>{{ timeFmt(audio.duration || 0, true) }}</div>
+          </template>
         </div>
       </div>
+      <VGetMediaButton
+        v-if="!additionalSearchViews"
+        media-type="audio"
+        :media="audio"
+        class="order-1 my-1 ms-auto flex-shrink-0 lg:order-2"
+      />
     </div>
   </div>
 </template>
@@ -68,22 +92,23 @@ import { computed, defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 import { timeFmt } from "~/utils/time-fmt"
-import { AudioStatus, audioFeatures } from "~/constants/audio"
-import { AUDIO } from "~/constants/media"
-import { useAnalytics } from "~/composables/use-analytics"
-import { useUiStore } from "~/stores/ui"
+import { AudioSize, AudioStatus, audioFeatures } from "~/constants/audio"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
-import VButton from "~/components/VButton.vue"
 import VLink from "~/components/VLink.vue"
+import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 
 export default defineComponent({
   name: "VFullLayout",
-  components: { VButton, VLink },
+  components: { VGetMediaButton, VLink },
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
       required: true,
     },
+    size: {
+      type: String as PropType<AudioSize>,
+    },
     status: {
       type: String as PropType<AudioStatus>,
     },
@@ -93,27 +118,20 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const uiStore = useUiStore()
+    const isSmall = computed(() => props.size === "s")
 
-    const isSm = computed(() => uiStore.isBreakpoint("sm"))
+    const featureFlagStore = useFeatureFlagStore()
 
-    const { sendCustomEvent } = useAnalytics()
-
-    const sendGetMediaEvent = () => {
-      sendCustomEvent("GET_MEDIA", {
-        id: props.audio.id,
-        provider: props.audio.provider,
-        mediaType: AUDIO,
-      })
-    }
+    const additionalSearchViews = computed(() => {
+      return featureFlagStore.isOn("additional_search_views")
+    })
 
     return {
-      isSm,
       timeFmt,
 
+      isSmall,
       audioFeatures,
-
-      sendGetMediaEvent,
+      additionalSearchViews,
     }
   },
 })

frontend/src/components/VMediaInfo/VGetMediaButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <VButton
+    as="VLink"
+    :href="media.foreign_landing_url"
+    size="large"
+    variant="filled-pink"
+    has-icon-end
+    show-external-icon
+    :external-icon-size="6"
+    class="description-bold"
+    :send-external-link-click-event="false"
+    @click="sendGetMediaEvent"
+  >
+    {{ $t(`${mediaType}Details.weblink`) }}
+  </VButton>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+import { useAnalytics } from "~/composables/use-analytics"
+import type { SupportedMediaType } from "~/constants/media"
+import type { Media } from "~/types/media"
+
+import VButton from "~/components/VButton.vue"
+
+export default defineComponent({
+  name: "VGetMediaButton",
+  components: { VButton },
+  props: {
+    media: {
+      type: Object as PropType<Media>,
+      required: true,
+    },
+    mediaType: {
+      type: String as PropType<SupportedMediaType>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { sendCustomEvent } = useAnalytics()
+
+    const sendGetMediaEvent = () => {
+      sendCustomEvent("GET_MEDIA", {
+        id: props.media.id,
+        provider: props.media.provider,
+        mediaType: props.mediaType,
+      })
+    }
+    return {
+      sendGetMediaEvent,
+    }
+  },
+})
+</script>

frontend/src/pages/audio/_id/index.vue

@@ -65,10 +65,12 @@ import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue"
 import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue"
 import VSingleResultControls from "~/components/VSingleResultControls.vue"
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
+import VErrorSection from "~/components/VErrorSection/VErrorSection.vue"
 
 export default defineComponent({
   name: "AudioDetailPage",
   components: {
+    VErrorSection,
     VAudioThumbnail,
     VSingleResultControls,
     VSafetyWall,

frontend/src/pages/image/_id/index.vue

@@ -45,20 +45,11 @@
           id="title-button"
           class="flex flex-row flex-wrap justify-between gap-x-6 md:mt-6 md:flex-row-reverse"
         >
-          <VButton
-            as="VLink"
-            :href="image.foreign_landing_url"
-            variant="filled-pink"
-            class="description-bold mb-4 !w-full flex-initial md:mb-0 md:!w-max"
-            show-external-icon
-            :external-icon-size="6"
-            has-icon-end
-            size="large"
-            :send-external-link-click-event="false"
-            @click="sendGetMediaEvent"
-          >
-            {{ $t("imageDetails.weblink") }}
-          </VButton>
+          <VGetMediaButton
+            :media="image"
+            media-type="image"
+            class="mb-4 !w-full flex-initial md:mb-0 md:!w-max"
+          />
           <div class="description-bold flex flex-1 flex-col justify-center">
             <h1 class="description-bold md:heading-5 line-clamp-2">
               {{ image.title }}
@@ -124,25 +115,25 @@ import { useSingleResultStore } from "~/stores/media/single-result"
 import { singleResultMiddleware } from "~/middleware/single-result"
 
 import VBone from "~/components/VSkeleton/VBone.vue"
-import VButton from "~/components/VButton.vue"
 import VLink from "~/components/VLink.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedImages from "~/components/VImageDetails/VRelatedImages.vue"
 import VSketchFabViewer from "~/components/VSketchFabViewer.vue"
 import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue"
 import VSingleResultControls from "~/components/VSingleResultControls.vue"
 import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue"
+import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 
 import errorImage from "~/assets/image_not_available_placeholder.png"
 
 export default defineComponent({
   name: "VImageDetailsPage",
   components: {
+    VGetMediaButton,
     VMediaDetails,
     VSingleResultControls,
     VSafetyWall,
     VBone,
-    VButton,
     VLink,
     VMediaReuse,
     VRelatedImages,