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

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,
     }
   },
 })

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>

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"

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"