Add source, creator and tag links to the single result page media info (

#3338) * Make chevron icons RTL-friendly Signed-off-by: Olga Bulat <[email protected]> * Add VByLine and VMediaInfo to SRP Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Add items-center to audio full layout Signed-off-by: Olga Bulat <[email protected]> * Fix tag spacing Signed-off-by: Olga Bulat <[email protected]> * Update scroll button spacings Signed-off-by: Olga Bulat <[email protected]> * Update scroll button spacings Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Update fading Signed-off-by: Olga Bulat <[email protected]> * Remove line-clamping for h1 and fix CTA placement Signed-off-by: Olga Bulat <[email protected]> * Improve scrolling Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Make chevron icons RTL-friendly Signed-off-by: Olga Bulat <[email protected]> * Add VByLine and VMediaInfo to SRP Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Add items-center to audio full layout Signed-off-by: Olga Bulat <[email protected]> * Fix tag spacing Signed-off-by: Olga Bulat <[email protected]> * Update scroll button spacings Signed-off-by: Olga Bulat <[email protected]> * Update scroll button spacings Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Update fading Signed-off-by: Olga Bulat <[email protected]> * Remove line-clamping for h1 and fix CTA placement Signed-off-by: Olga Bulat <[email protected]> * Improve scrolling Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Remove unused variable Signed-off-by: Olga Bulat <[email protected]> * Add more spacing to scroll buttons Signed-off-by: Olga Bulat <[email protected]> * More fading Signed-off-by: Olga Bulat <[email protected]> * Fix scrolling edge-cases Signed-off-by: Olga Bulat <[email protected]> * Stop using the ui store for button variant Signed-off-by: Olga Bulat <[email protected]> * Add requested changes Signed-off-by: Olga Bulat <[email protected]> * Remove scroll snap and update last 2 scrolls Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Nov 27, 2023 · de203f1 · de203f1
1 parent ab219ff
commit de203f1
Show file tree

Hide file tree

Showing 38 changed files with 618 additions and 15 deletions.
diff --git a/frontend/src/assets/svg/raw/chevron-left.svg → frontend/src/assets/svg/raw/chevron-back.svg b/frontend/src/assets/svg/raw/chevron-left.svg → frontend/src/assets/svg/raw/chevron-back.svg
diff --git a/frontend/src/assets/svg/raw/chevron-forward.svg b/frontend/src/assets/svg/raw/chevron-forward.svg
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -16,6 +16,23 @@
       </div>
     </div>
     <div
+      v-if="additionalSearchViews"
+      class="mx-auto grid grid-cols-1 grid-rows-[auto,1fr] gap-y-6 p-6 pb-0 sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6 lg:mb-6 lg:max-w-5xl"
+    >
+      <div
+        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2 sm:mt-1"
+      >
+        <slot name="audio-control" layout="full" size="medium" />
+        <VGetMediaButton
+          :media="audio"
+          media-type="audio"
+          class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
+        />
+      </div>
+      <VMediaInfo :media="audio" class="min-w-0" />
+    </div>
+    <div
+      v-else
       class="mx-auto grid grid-cols-1 grid-rows-[auto,auto] gap-6 p-6 pb-0 lg:mb-6 lg:max-w-5xl lg:flex-nowrap"
     >
       <div class="row-start-1 flex justify-between gap-x-6 sm:col-start-2">
@@ -56,14 +73,18 @@ import { computed, defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 import { timeFmt } from "~/utils/time-fmt"
-import { AudioSize, AudioStatus, audioFeatures } from "~/constants/audio"
+import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useProviderStore } from "~/stores/provider"
 
 import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
+import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
 
 export default defineComponent({
   name: "VFullLayout",
-  components: { VGetMediaButton, VLink },
+  components: { VMediaInfo, VGetMediaButton, VLink },
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
@@ -83,11 +104,27 @@ export default defineComponent({
   setup(props) {
     const isSmall = computed(() => props.size === "s")
 
+    const featureFlagStore = useFeatureFlagStore()
+    const additionalSearchViews = computed(() =>
+      featureFlagStore.isOn("additional_search_views")
+    )
+
+    const providerStore = useProviderStore()
+    const sourceName = computed(() => {
+      return providerStore.getProviderName(
+        props.audio.source ?? props.audio.provider,
+        "audio"
+      )
+    })
+
     return {
       timeFmt,
 
       isSmall,
       audioFeatures,
+      sourceName,
+
+      additionalSearchViews,
     }
   },
 })

diff --git a/frontend/src/components/VBackToSearchResultsLink.vue b/frontend/src/components/VBackToSearchResultsLink.vue
@@ -10,7 +10,7 @@
     v-bind="$attrs"
     @mousedown="handleClick"
   >
-    <VIcon name="chevron-left" :rtl-flip="true" />
+    <VIcon name="chevron-back" :rtl-flip="true" />
     {{ $t("singleResult.back") }}
   </VButton>
 </template>

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -29,7 +29,7 @@
             />
             <VSearchBarButton
               v-show="searchBarIsActive"
-              icon="chevron-left"
+              icon="chevron-back"
               :label="$t('header.backButton')"
               :rtl-flip="true"
               variant="filled-gray"

diff --git a/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx b/frontend/src/components/VHeader/meta/VSearchBarButton.stories.mdx
@@ -17,7 +17,7 @@ import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButto
         type: "select",
         default: "close-small",
       },
-      options: ["close-small", "chevron-left", "source"],
+      options: ["close-small", "chevron-back", "source"],
     },
     rtlFlip: {
       control: {
@@ -100,7 +100,7 @@ corner.
 export const activeButtonsTemplate = (args) => ({
   template: `<div class="wrapper rounded-sm bg-white flex justify-between ring ring-pink">
   <VSearchBarButton
-    icon="chevron-left"
+    icon="chevron-back"
     :label="$t('header.back-button')"
     variant="filled-gray"
     :rtl-flip="true"