Combine related media component using VMediaCollection.vue (#3831)

* Combine related media component using VMediaCollection.vue

Signed-off-by: Olga Bulat <[email protected]>

* Add e2e tests

And also relatedTo to the related images

* Use a dynamic component for media and remove unnecessary wrapper

Signed-off-by: Olga Bulat <[email protected]>

* Revert unnecessary changes

Signed-off-by: Olga Bulat <[email protected]>

* Update frontend/src/components/VSearchResultsGrid/VAudioCollection.vue

Co-authored-by: zack <[email protected]>

---------

Signed-off-by: Olga Bulat <[email protected]>
Co-authored-by: zack <[email protected]>

frontend/src/components/VCollectionPage.vue

@@ -7,7 +7,7 @@
       :media-type="mediaType"
       :class="mediaType === 'image' ? 'mb-4' : 'mb-2'"
     />
-    <VAudioCollection
+    <VAudioList
       v-if="results.type === 'audio'"
       :collection-label="collectionLabel"
       :fetch-state="fetchState"
@@ -35,12 +35,12 @@ import { Results } from "~/types/result"
 import { useI18n } from "~/composables/use-i18n"
 
 import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
-import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
+import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
 import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
 
 export default defineComponent({
   name: "VCollectionPage",
-  components: { VAudioCollection, VImageGrid, VCollectionHeader },
+  components: { VAudioList, VImageGrid, VCollectionHeader },
   props: {
     mediaType: {
       type: String as PropType<SupportedMediaType>,

frontend/src/components/VMediaInfo/VRelatedMedia.vue

@@ -0,0 +1,105 @@
+<template>
+  <VMediaCollection
+    v-if="showRelated"
+    :results="results"
+    :is-fetching="isFetching"
+    :collection-label="collectionLabel"
+    kind="related"
+    :related-to="relatedTo"
+    :search-term="searchTerm"
+    :aria-label="collectionLabel"
+  >
+    <template #header>
+      <h2
+        id="related-heading"
+        class="heading-6 mb-6"
+        :class="results.type === 'image' ? 'md:heading-5' : 'lg:heading-6'"
+      >
+        {{ collectionLabel }}
+      </h2>
+    </template>
+  </VMediaCollection>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, watch } from "vue"
+import { useRoute } from "@nuxtjs/composition-api"
+
+import { useRelatedMediaStore } from "~/stores/media/related-media"
+import { useI18n } from "~/composables/use-i18n"
+
+import type { SupportedMediaType } from "~/constants/media"
+import type { AudioResults, ImageResults } from "~/types/result"
+
+import VMediaCollection from "~/components/VSearchResultsGrid/VMediaCollection.vue"
+
+export default defineComponent({
+  name: "VRelatedMedia",
+  components: { VMediaCollection },
+  props: {
+    mediaType: {
+      type: String as PropType<SupportedMediaType>,
+      required: true,
+    },
+    relatedTo: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const relatedMediaStore = useRelatedMediaStore()
+
+    const route = useRoute()
+
+    const results = computed(() => {
+      const media = relatedMediaStore.media ?? []
+      return { type: props.mediaType, items: media } as
+        | ImageResults
+        | AudioResults
+    })
+    watch(
+      route,
+      async (newRoute) => {
+        if (newRoute.params.id !== relatedMediaStore.mainMediaId) {
+          await relatedMediaStore.fetchMedia(
+            props.mediaType,
+            newRoute.params.id
+          )
+        }
+      },
+      { immediate: true }
+    )
+
+    const isFetching = computed(() => relatedMediaStore.fetchState.isFetching)
+    const showRelated = computed(
+      () => results.value.items.length > 0 || isFetching.value
+    )
+
+    const searchTerm = computed(() => {
+      const q = Array.isArray(route.value.query.q)
+        ? route.value.query.q[0]
+        : route.value.query.q
+      return q ?? ""
+    })
+
+    const i18n = useI18n()
+
+    const collectionLabel = computed(() => {
+      const key =
+        props.mediaType === "audio"
+          ? "audioDetails.relatedAudios"
+          : "imageDetails.relatedImages"
+      return i18n.t(key).toString()
+    })
+
+    return {
+      results,
+      showRelated,
+      isFetching,
+
+      searchTerm,
+      collectionLabel,
+    }
+  },
+})
+</script>

frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue

@@ -51,7 +51,7 @@
           :search-term="searchTerm"
           layout="box"
           :size="isSm ? 'l' : 's'"
-          :is-related="false"
+          kind="search"
         />
       </template>
     </ol>