From 2b034f857c651069944b035e2b11c5c6135fcb39 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 28 Jul 2023 14:25:41 +0300
Subject: [PATCH] Extract reusable VAudioCollection.vue (#2695)

* Extract reusable VAudioCollection.vue

Co-authored-by: Zack Krida <zackkrida@pm.me>

* Move analytics test to e2e

* Move the gap setting to the `ol` level

---------

Co-authored-by: Zack Krida <zackkrida@pm.me>
---
 .../VAudioDetails/VRelatedAudio.vue           |  66 ++--------
 .../components/VAudioTrack/VAudioTrack.vue    |  21 ++-
 .../VSearchResultsGrid/VAllResultsGrid.vue    |  18 +--
 .../VSearchResultsGrid/VAudioCell.vue         |  12 ++
 .../VSearchResultsGrid/VAudioCollection.vue   |  91 +++++++++++++
 .../VSearchResultsGrid/VAudioList.vue         | 124 ++++++++++++++++++
 frontend/src/pages/search.vue                 |   2 +-
 frontend/src/pages/search/audio.vue           | 112 +++++-----------
 frontend/src/pages/search/image.vue           |  29 ++--
 frontend/src/pages/search/index.vue           |   3 -
 .../src/pages/search/search-page.types.ts     |  29 ----
 frontend/src/types/events.ts                  |   1 +
 .../e2e/all-results-analytics.spec.ts         |  75 +++++++++++
 .../VSearchResultsGrid/v-audio-cell.spec.js   |  49 -------
 .../VSearchResultsGrid/v-image-cell.spec.js   |  19 ---
 15 files changed, 386 insertions(+), 265 deletions(-)
 create mode 100644 frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
 create mode 100644 frontend/src/components/VSearchResultsGrid/VAudioList.vue
 delete mode 100644 frontend/src/pages/search/search-page.types.ts
 create mode 100644 frontend/src/types/events.ts
 create mode 100644 frontend/test/playwright/e2e/all-results-analytics.spec.ts
 delete mode 100644 frontend/test/unit/specs/components/VSearchResultsGrid/v-audio-cell.spec.js

diff --git a/frontend/src/components/VAudioDetails/VRelatedAudio.vue b/frontend/src/components/VAudioDetails/VRelatedAudio.vue
index ff4e72878a4..a5cacb356c7 100644
--- a/frontend/src/components/VAudioDetails/VRelatedAudio.vue
+++ b/frontend/src/components/VAudioDetails/VRelatedAudio.vue
@@ -1,72 +1,41 @@
 <template>
-  <aside
-    v-if="showRelated"
-    :aria-label="$t('audioDetails.relatedAudios').toString()"
-  >
+  <section v-if="showRelated">
     <h2 class="heading-6 lg:heading-6 mb-6">
       {{ $t("audioDetails.relatedAudios") }}
     </h2>
-    <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-    <ol
-      v-if="!fetchState.fetchingError"
-      :aria-label="$t('audioDetails.relatedAudios').toString()"
-      class="-mx-2 mb-12 flex flex-col gap-4 md:-mx-4"
-    >
-      <li v-for="audio in media" :key="audio.id">
-        <VAudioTrack
-          :audio="audio"
-          layout="row"
-          :size="audioTrackSize"
-          @mousedown="sendSelectSearchResultEvent(audio)"
-          @interacted="$emit('interacted', $event)"
-        />
-      </li>
-    </ol>
-    <LoadingIcon
-      v-if="!fetchState.fetchingError"
-      v-show="fetchState.isFetching"
+    <VAudioCollection
+      :results="media"
+      :fetch-state="fetchState"
+      :is-related="true"
+      :collection-label="$t('audioDetails.relatedAudios').toString()"
+      class="mb-12"
     />
-    <p v-show="!!fetchState.fetchingError">
-      {{ $t("mediaDetails.relatedError") }}
-    </p>
-  </aside>
+  </section>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, watch } from "vue"
-
 import { useRoute } from "@nuxtjs/composition-api"
 
-import { useUiStore } from "~/stores/ui"
-import { useSearchStore } from "~/stores/search"
 import { useRelatedMediaStore } from "~/stores/media/related-media"
 
-import { useAnalytics } from "~/composables/use-analytics"
-import { AUDIO } from "~/constants/media"
-
 import { defineEvent } from "~/types/emits"
 import type { AudioDetail } from "~/types/media"
 import type { AudioInteractionData } from "~/types/analytics"
 
-import LoadingIcon from "~/components/LoadingIcon.vue"
-import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
+import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
 
 export default defineComponent({
   name: "VRelatedAudio",
-  components: { VAudioTrack, LoadingIcon },
+  components: { VAudioCollection },
   emits: {
     interacted: defineEvent<[Omit<AudioInteractionData, "component">]>(),
   },
   setup() {
-    const uiStore = useUiStore()
     const relatedMediaStore = useRelatedMediaStore()
 
     const route = useRoute()
 
-    const audioTrackSize = computed(() => {
-      return uiStore.isBreakpoint("md") ? "l" : "s"
-    })
-
     const media = computed(
       () => (relatedMediaStore.media ?? []) as AudioDetail[]
     )
@@ -86,25 +55,10 @@ export default defineComponent({
 
     const fetchState = computed(() => relatedMediaStore.fetchState)
 
-    const { sendCustomEvent } = useAnalytics()
-    const sendSelectSearchResultEvent = (audio: AudioDetail) => {
-      sendCustomEvent("SELECT_SEARCH_RESULT", {
-        id: audio.id,
-        relatedTo: relatedMediaStore.mainMediaId,
-        mediaType: AUDIO,
-        provider: audio.provider,
-        query: useSearchStore().searchTerm,
-      })
-    }
-
     return {
       media,
       showRelated,
       fetchState,
-
-      audioTrackSize,
-
-      sendSelectSearchResultEvent,
     }
   },
 })
diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index 3ab57e9824e..5de184c70e4 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -9,7 +9,7 @@
     @keydown.native.shift.tab.exact="$emit('shift-tab', $event)"
     @keydown="handleKeydown"
     @blur="handleBlur"
-    @mousedown="$emit('mousedown', $event)"
+    @mousedown="handleMousedown"
     @focus="$emit('focus', $event)"
   >
     <Component
@@ -21,6 +21,7 @@
     >
       <template #controller="waveformProps">
         <VWaveform
+          ref="waveformRef"
           v-bind="waveformProps"
           :is-parent-seeking="isSeeking"
           :peaks="audio.peaks"
@@ -82,6 +83,8 @@ import type { AudioDetail } from "~/types/media"
 
 import { defineEvent } from "~/types/emits"
 
+import type { AudioTrackClickEvent } from "~/types/events"
+
 import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VFullLayout from "~/components/VAudioTrack/layouts/VFullLayout.vue"
@@ -143,7 +146,7 @@ export default defineComponent({
   emits: {
     "shift-tab": defineEvent<[KeyboardEvent]>(),
     interacted: defineEvent<[Omit<AudioInteractionData, "component">]>(),
-    mousedown: defineEvent<[MouseEvent]>(),
+    mousedown: defineEvent<[AudioTrackClickEvent]>(),
     focus: defineEvent<[FocusEvent]>(),
   },
   setup(props, { emit }) {
@@ -474,6 +477,18 @@ export default defineComponent({
      */
     const playPauseRef = ref<HTMLElement | null>(null)
 
+    /**
+     * A ref used on the waveform, so we can capture mousedown on the
+     * audio track outside it as it will open a detail page.
+     */
+    const waveformRef = ref<{ $el: HTMLElement } | null>(null)
+
+    const handleMousedown = (event: MouseEvent) => {
+      const inWaveform =
+        waveformRef.value?.$el.contains(event.target as Node) ?? false
+      emit("mousedown", { event, inWaveform })
+    }
+
     /**
      * These layout-conditional props and listeners allow us
      * to set properties on the parent element depending on
@@ -536,6 +551,7 @@ export default defineComponent({
       handleSeeked,
       handleKeydown,
       handleBlur: seekable.listeners.blur,
+      handleMousedown,
 
       isSeeking,
 
@@ -549,6 +565,7 @@ export default defineComponent({
       containerAttributes,
 
       playPauseRef,
+      waveformRef,
     }
   },
 })
diff --git a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
index 662874d5900..a3e31952289 100644
--- a/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue
@@ -49,7 +49,7 @@
           :key="item.id"
           :audio="item"
           :search-term="searchTerm"
-          @interacted="handleInteraction"
+          @interacted="snackbar.hide"
           @focus="snackbar.show"
         />
       </template>
@@ -67,9 +67,7 @@ import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
 import { isDetail } from "~/types/media"
-import type { AudioInteractionData } from "~/types/analytics"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
 import { useI18n } from "~/composables/use-i18n"
 
@@ -97,8 +95,6 @@ export default defineComponent({
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
 
-    const { sendCustomEvent } = useAnalytics()
-
     const searchTerm = computed(() => searchStore.searchTerm)
 
     const resultsLoading = computed(() => {
@@ -129,20 +125,11 @@ export default defineComponent({
       () => fetchState.value.isFinished && allMedia.value.length === 0
     )
 
-    const snackbar = useAudioSnackbar()
-
     const uiStore = useUiStore()
+    const snackbar = useAudioSnackbar()
 
     const isSidebarVisible = computed(() => uiStore.isFilterVisible)
 
-    const handleInteraction = (data: AudioInteractionData) => {
-      snackbar.hide()
-      sendCustomEvent("AUDIO_INTERACTION", {
-        ...data,
-        component: "VAllResultsGrid",
-      })
-    }
-
     return {
       searchTerm,
       isError,
@@ -157,7 +144,6 @@ export default defineComponent({
 
       isSidebarVisible,
 
-      handleInteraction,
       snackbar,
 
       isDetail,
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioCell.vue b/frontend/src/components/VSearchResultsGrid/VAudioCell.vue
index 74bba4ca685..58c836a76ce 100644
--- a/frontend/src/components/VSearchResultsGrid/VAudioCell.vue
+++ b/frontend/src/components/VSearchResultsGrid/VAudioCell.vue
@@ -6,6 +6,7 @@
       :search-term="searchTerm"
       v-bind="$attrs"
       v-on="$listeners"
+      @interacted="sendInteractionEvent"
       @mousedown="sendSelectSearchResultEvent(audio)"
     />
   </li>
@@ -19,6 +20,8 @@ import type { AudioDetail } from "~/types/media"
 import { useAnalytics } from "~/composables/use-analytics"
 import { AUDIO } from "~/constants/media"
 
+import type { AudioInteractionData } from "~/types/analytics"
+
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 
 export default defineComponent({
@@ -46,9 +49,18 @@ export default defineComponent({
         relatedTo: null,
       })
     }
+    const sendInteractionEvent = (
+      data: Omit<AudioInteractionData, "component">
+    ) => {
+      sendCustomEvent("AUDIO_INTERACTION", {
+        ...data,
+        component: "VAllResultsGrid",
+      })
+    }
 
     return {
       sendSelectSearchResultEvent,
+      sendInteractionEvent,
     }
   },
 })
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
new file mode 100644
index 00000000000..f8b5e6da17c
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VAudioCollection.vue
@@ -0,0 +1,91 @@
+<template>
+  <section>
+    <VGridSkeleton
+      v-if="results.length === 0 && !fetchState.isFinished"
+      is-for-tab="audio"
+    />
+    <VSnackbar size="large" :is-visible="snackbar.isVisible.value">
+      <i18n path="audioResults.snackbar.text" tag="p">
+        <template
+          v-for="keyboardKey in ['spacebar', 'left', 'right']"
+          #[keyboardKey]
+        >
+          <kbd :key="keyboardKey" class="font-sans">{{
+            $t(`audioResults.snackbar.${keyboardKey}`)
+          }}</kbd>
+        </template>
+      </i18n>
+    </VSnackbar>
+    <VAudioList
+      :collection-label="collectionLabel"
+      :is-related="isRelated"
+      :results="results"
+      @focus="snackbar.show"
+      @interacted="snackbar.hide"
+      @mousedown="snackbar.handleMouseDown"
+    />
+    <footer v-if="!isRelated">
+      <VLoadMore />
+    </footer>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+import type { AudioDetail } from "~/types/media"
+import type { FetchState } from "~/types/fetch-state"
+import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
+
+import VAudioList from "~/components/VSearchResultsGrid/VAudioList.vue"
+import VLoadMore from "~/components/VLoadMore.vue"
+import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
+import VSnackbar from "~/components/VSnackbar.vue"
+
+import type { NuxtError } from "@nuxt/types"
+
+/**
+ * This component shows a loading skeleton if the results are not yet loaded,
+ * and then shows the list of audio, with the Load more button if needed.
+ */
+export default defineComponent({
+  name: "VAudioCollection",
+  components: {
+    VSnackbar,
+    VAudioList,
+    VGridSkeleton,
+    VLoadMore,
+  },
+  props: {
+    results: {
+      type: Array as PropType<AudioDetail[]>,
+      default: () => [],
+    },
+    /**
+     * If used for Related audio, do not show the Load more button.
+     */
+    isRelated: {
+      type: Boolean,
+      required: true,
+    },
+    fetchState: {
+      type: Object as PropType<FetchState<NuxtError> | FetchState>,
+      required: true,
+    },
+    /**
+     * The label used for the list of audio for accessibility.
+     */
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const snackbar = useAudioSnackbar()
+
+    return {
+      snackbar,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VSearchResultsGrid/VAudioList.vue b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
new file mode 100644
index 00000000000..bc09d6f9409
--- /dev/null
+++ b/frontend/src/components/VSearchResultsGrid/VAudioList.vue
@@ -0,0 +1,124 @@
+<template>
+  <!-- Negative margin compensates for the `p-4` padding in row layout. -->
+  <ol
+    :aria-label="collectionLabel"
+    class="-mx-2 flex flex-col md:-mx-4"
+    :class="isRelated ? 'gap-4' : 'gap-2 md:gap-1'"
+  >
+    <li v-for="audio in results" :key="audio.id">
+      <VAudioTrack
+        :audio="audio"
+        :size="audioTrackSize"
+        layout="row"
+        :search-term="searchTerm"
+        @interacted="handleInteraction"
+        @mousedown="handleMousedown(audio, $event)"
+        @focus="$emit('focus', $event)"
+      />
+    </li>
+  </ol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref, PropType } from "vue"
+import { useRoute } from "@nuxtjs/composition-api"
+
+import type { AudioInteractionData } from "~/types/analytics"
+import type { AudioDetail } from "~/types/media"
+import { IsSidebarVisibleKey } from "~/types/provides"
+import { defineEvent } from "~/types/emits"
+import { useSearchStore } from "~/stores/search"
+import { useUiStore } from "~/stores/ui"
+import { useAnalytics } from "~/composables/use-analytics"
+import { AUDIO } from "~/constants/media"
+
+import type { AudioTrackClickEvent } from "~/types/events"
+
+import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
+
+/**
+ * The list of audio for the search results and the related audio.
+ */
+export default defineComponent({
+  name: "VAudioList",
+  components: { VAudioTrack },
+  props: {
+    results: {
+      type: Array as PropType<AudioDetail[]>,
+      default: () => [],
+    },
+    isRelated: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * The label used for the list of audio for accessibility.
+     */
+    collectionLabel: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: {
+    interacted: defineEvent<[Omit<AudioInteractionData, "component">]>(),
+    mousedown: defineEvent<[AudioTrackClickEvent]>(),
+    focus: defineEvent<[FocusEvent]>(),
+  },
+  setup(props, { emit }) {
+    const route = useRoute()
+    const uiStore = useUiStore()
+
+    const filterVisibleRef = inject(IsSidebarVisibleKey, ref(false))
+
+    const audioTrackSize = computed(() => {
+      if (props.isRelated) {
+        return uiStore.isBreakpoint("md") ? "l" : "s"
+      } else {
+        return !uiStore.isDesktopLayout
+          ? "s"
+          : filterVisibleRef.value
+          ? "l"
+          : "m"
+      }
+    })
+
+    const searchStore = useSearchStore()
+    const searchTerm = computed(() => searchStore.searchTerm)
+
+    const { sendCustomEvent } = useAnalytics()
+    const handleInteraction = (
+      data: Omit<AudioInteractionData, "component">
+    ) => {
+      sendCustomEvent("AUDIO_INTERACTION", {
+        ...data,
+        component: props.isRelated ? "VRelatedAudio" : "AudioSearch",
+      })
+      emit("interacted", data)
+    }
+    const handleMousedown = (
+      audio: AudioDetail,
+      { event, inWaveform }: AudioTrackClickEvent
+    ) => {
+      // We only navigate when clicking the audio track outside the waveform.
+      if (!inWaveform) {
+        sendCustomEvent("SELECT_SEARCH_RESULT", {
+          id: audio.id,
+          relatedTo: props.isRelated ? route.value.params.id : null,
+          mediaType: AUDIO,
+          provider: audio.provider,
+          query: searchTerm.value,
+        })
+      }
+      emit("mousedown", { event, inWaveform })
+    }
+
+    return {
+      audioTrackSize,
+      searchTerm,
+
+      handleInteraction,
+      handleMousedown,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 776c381a109..46c7f66151f 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -15,7 +15,7 @@
       <template #media>
         <NuxtChild
           :key="$route.path"
-          :result-items="resultItems"
+          :results="resultItems[searchType]"
           :fetch-state="fetchState"
           :search-term="query.q"
           :supported="supported"
diff --git a/frontend/src/pages/search/audio.vue b/frontend/src/pages/search/audio.vue
index 014aafabf46..0a5a15f83dc 100644
--- a/frontend/src/pages/search/audio.vue
+++ b/frontend/src/pages/search/audio.vue
@@ -1,102 +1,50 @@
 <template>
-  <!-- Negative margin compensates for the `p-4` padding in row layout. -->
-  <section class="-mx-2 md:-mx-4">
-    <VSnackbar size="large" :is-visible="snackbar.isVisible.value">
-      <i18n path="audioResults.snackbar.text" tag="p">
-        <template
-          v-for="keyboardKey in ['spacebar', 'left', 'right']"
-          #[keyboardKey]
-        >
-          <kbd :key="keyboardKey" class="font-sans">{{
-            $t(`audioResults.snackbar.${keyboardKey}`)
-          }}</kbd>
-        </template>
-      </i18n>
-    </VSnackbar>
-    <VGridSkeleton
-      v-if="results.length === 0 && !fetchState.isFinished"
-      is-for-tab="audio"
-    />
-    <ol :aria-label="$t('browsePage.aria.results', { query: searchTerm })">
-      <li v-for="audio in results" :key="audio.id">
-        <VAudioTrack
-          class="mb-2 md:mb-1"
-          :audio="audio"
-          :size="audioTrackSize"
-          layout="row"
-          :search-term="searchTerm"
-          @interacted="handleInteraction"
-          @mousedown="snackbar.handleMouseDown"
-          @focus="snackbar.show"
-        />
-      </li>
-    </ol>
-    <VLoadMore />
-  </section>
+  <VAudioCollection
+    :results="results"
+    :is-related="false"
+    :fetch-state="fetchState"
+    :collection-label="collectionLabel"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from "vue"
+import { computed, defineComponent, PropType } from "vue"
 
 import { useSearchStore } from "~/stores/search"
-import { useUiStore } from "~/stores/ui"
+import { useI18n } from "~/composables/use-i18n"
+import type { AudioDetail } from "~/types/media"
+import type { FetchState } from "~/types/fetch-state"
 
-import { useAnalytics } from "~/composables/use-analytics"
-import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
+import VAudioCollection from "~/components/VSearchResultsGrid/VAudioCollection.vue"
 
-import { IsSidebarVisibleKey } from "~/types/provides"
-import type { AudioInteractionData } from "~/types/analytics"
-
-import VSnackbar from "~/components/VSnackbar.vue"
-import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
-import VLoadMore from "~/components/VLoadMore.vue"
-import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
-
-import { propTypes } from "./search-page.types"
+import type { NuxtError } from "@nuxt/types"
 
 export default defineComponent({
   name: "AudioSearch",
   components: {
-    VSnackbar,
-    VAudioTrack,
-    VGridSkeleton,
-    VLoadMore,
+    VAudioCollection,
   },
-  props: propTypes,
-  setup(props) {
-    const searchStore = useSearchStore()
-
-    const uiStore = useUiStore()
-
-    const { sendCustomEvent } = useAnalytics()
-
-    const searchTerm = computed(() => searchStore.searchTerm)
-    const results = computed(() => props.resultItems.audio)
-
-    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
-    const filterVisibleRef = inject(IsSidebarVisibleKey)
+  props: {
+    results: {
+      type: Array as PropType<AudioDetail[]>,
+      required: true,
+    },
+    fetchState: {
+      type: Object as PropType<FetchState<NuxtError> | FetchState>,
+      required: true,
+    },
+  },
+  setup() {
+    const i18n = useI18n()
 
-    const audioTrackSize = computed(() =>
-      !isDesktopLayout.value ? "s" : filterVisibleRef.value ? "l" : "m"
-    )
+    const collectionLabel = computed(() => {
+      const query = useSearchStore().searchTerm
 
-    const snackbar = useAudioSnackbar()
-
-    const handleInteraction = (data: AudioInteractionData) => {
-      snackbar.hide()
-      sendCustomEvent("AUDIO_INTERACTION", {
-        ...data,
-        component: "AudioSearch",
-      })
-    }
+      return i18n.t("browsePage.aria.results", { query }).toString()
+    })
 
     return {
-      searchTerm,
-      results,
-      audioTrackSize,
-
-      handleInteraction,
-      snackbar,
+      collectionLabel,
     }
   },
 })
diff --git a/frontend/src/pages/search/image.vue b/frontend/src/pages/search/image.vue
index 3a1f01f7727..8259cd8cd3a 100644
--- a/frontend/src/pages/search/image.vue
+++ b/frontend/src/pages/search/image.vue
@@ -3,25 +3,38 @@
     :images="results"
     :is-single-page="false"
     :fetch-state="fetchState"
-    :image-grid-label="$t('browsePage.aria.results', { query: searchTerm })"
+    :image-grid-label="
+      $t('browsePage.aria.results', { query: searchTerm }).toString()
+    "
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue"
+import { defineComponent, PropType } from "vue"
 
-import { propTypes } from "~/pages/search/search-page.types"
+import type { ImageDetail } from "~/types/media"
+import type { FetchState } from "~/types/fetch-state"
 
 import VImageGrid from "~/components/VSearchResultsGrid/VImageGrid.vue"
 
+import type { NuxtError } from "@nuxt/types"
+
 export default defineComponent({
   name: "ImageSearch",
   components: { VImageGrid },
-  props: propTypes,
-  setup(props) {
-    const results = computed(() => props.resultItems.image)
-
-    return { results }
+  props: {
+    results: {
+      type: Array as PropType<ImageDetail[]>,
+      required: true,
+    },
+    fetchState: {
+      type: Object as PropType<FetchState<NuxtError> | FetchState>,
+      required: true,
+    },
+    searchTerm: {
+      type: String,
+      required: true,
+    },
   },
 })
 </script>
diff --git a/frontend/src/pages/search/index.vue b/frontend/src/pages/search/index.vue
index 9e7f609e27d..079473bc73e 100644
--- a/frontend/src/pages/search/index.vue
+++ b/frontend/src/pages/search/index.vue
@@ -5,13 +5,10 @@
 <script lang="ts">
 import { defineComponent } from "vue"
 
-import { propTypes } from "~/pages/search/search-page.types"
-
 import VAllResultsGrid from "~/components/VSearchResultsGrid/VAllResultsGrid.vue"
 
 export default defineComponent({
   name: "SearchIndex",
   components: { VAllResultsGrid },
-  props: propTypes,
 })
 </script>
diff --git a/frontend/src/pages/search/search-page.types.ts b/frontend/src/pages/search/search-page.types.ts
deleted file mode 100644
index ccce5fb7c50..00000000000
--- a/frontend/src/pages/search/search-page.types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { SupportedMediaType } from "~/constants/media"
-import type { Media } from "~/types/media"
-import type { FetchState } from "~/types/fetch-state"
-
-import type { ExtractPropTypes, PropType } from "vue"
-
-export const propTypes = {
-  resultItems: {
-    type: Object as PropType<Record<SupportedMediaType, Media[]>>,
-    required: true,
-  },
-  fetchState: {
-    type: Object as PropType<FetchState>,
-    required: true,
-  },
-  isFilterVisible: {
-    type: Boolean,
-    required: false,
-  },
-  searchTerm: {
-    type: String,
-    required: true,
-  },
-  supported: {
-    type: Boolean,
-    required: false,
-  },
-}
-export type SearchPageProps = ExtractPropTypes<typeof propTypes>
diff --git a/frontend/src/types/events.ts b/frontend/src/types/events.ts
new file mode 100644
index 00000000000..d3d20857966
--- /dev/null
+++ b/frontend/src/types/events.ts
@@ -0,0 +1 @@
+export type AudioTrackClickEvent = { event: MouseEvent; inWaveform: boolean }
diff --git a/frontend/test/playwright/e2e/all-results-analytics.spec.ts b/frontend/test/playwright/e2e/all-results-analytics.spec.ts
new file mode 100644
index 00000000000..353ffc56e63
--- /dev/null
+++ b/frontend/test/playwright/e2e/all-results-analytics.spec.ts
@@ -0,0 +1,75 @@
+import { test } from "@playwright/test"
+
+import { openFirstResult } from "~~/test/playwright/utils/navigation"
+import {
+  collectAnalyticsEvents,
+  expectEventPayloadToMatch,
+} from "~~/test/playwright/utils/analytics"
+
+import { AUDIO, IMAGE } from "~/constants/media"
+
+test.describe("all results grid analytics test", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/search/?q=birds")
+  })
+
+  test("should send SELECT_SEARCH_RESULT event when audio result is selected", async ({
+    context,
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+    await openFirstResult(page, "audio")
+    const selectSearchResultEvent = analyticsEvents.find(
+      (event) => event.n === "SELECT_SEARCH_RESULT"
+    )
+    expectEventPayloadToMatch(selectSearchResultEvent, {
+      mediaType: AUDIO,
+      query: "birds",
+      relatedTo: null,
+      id: "2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95",
+      provider: "jamendo",
+    })
+  })
+  test("should send SELECT_SEARCH_RESULT event when image result is selected", async ({
+    context,
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(context)
+    await openFirstResult(page, "image")
+    const selectSearchResultEvent = analyticsEvents.find(
+      (event) => event.n === "SELECT_SEARCH_RESULT"
+    )
+
+    expectEventPayloadToMatch(selectSearchResultEvent, {
+      id: "da5cb478-c093-4d62-b721-cda18797e3fb",
+      mediaType: IMAGE,
+      query: "birds",
+      provider: "flickr",
+      relatedTo: null,
+    })
+  })
+
+  test("should send AUDIO_INTERACTION event when audio is interacted", async ({
+    page,
+  }) => {
+    const analyticsEvents = collectAnalyticsEvents(page.context())
+
+    const firstResultPlay = page
+      .locator(`a[href*="/audio/"]`)
+      .first()
+      .locator(`[aria-label="Play"]`)
+
+    await firstResultPlay.click()
+
+    const audioInteractionEvent = analyticsEvents.find(
+      (event) => event.n === "AUDIO_INTERACTION"
+    )
+
+    expectEventPayloadToMatch(audioInteractionEvent, {
+      id: "2e38ac1e-830c-4e9c-b13d-2c9a1ad53f95",
+      event: "play",
+      provider: "jamendo",
+      component: "VAllResultsGrid",
+    })
+  })
+})
diff --git a/frontend/test/unit/specs/components/VSearchResultsGrid/v-audio-cell.spec.js b/frontend/test/unit/specs/components/VSearchResultsGrid/v-audio-cell.spec.js
deleted file mode 100644
index ab6a55519ec..00000000000
--- a/frontend/test/unit/specs/components/VSearchResultsGrid/v-audio-cell.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { fireEvent } from "@testing-library/vue"
-
-import { render } from "~~/test/unit/test-utils/render"
-
-import { getAudioObj } from "~~/test/unit/fixtures/audio"
-
-import { useAnalytics } from "~/composables/use-analytics"
-import { AUDIO } from "~/constants/media"
-
-import VAudioCell from "~/components/VSearchResultsGrid/VAudioCell.vue"
-
-jest.mock("~/composables/use-analytics", () => ({
-  useAnalytics: jest.fn(),
-}))
-
-describe("VAudioCell", () => {
-  let options = {}
-  let sendCustomEventMock = null
-  const audio = getAudioObj()
-
-  beforeEach(() => {
-    sendCustomEventMock = jest.fn()
-    useAnalytics.mockImplementation(() => ({
-      sendCustomEvent: sendCustomEventMock,
-    }))
-    options = {
-      props: {
-        audio,
-        searchTerm: "cat",
-        relatedTo: null,
-      },
-    }
-  })
-
-  it("sends SELECT_SEARCH_RESULT event when clicked", async () => {
-    const { getByRole } = render(VAudioCell, options)
-    const link = getByRole("application")
-
-    await fireEvent.click(link)
-
-    expect(sendCustomEventMock).toHaveBeenCalledWith("SELECT_SEARCH_RESULT", {
-      id: audio.id,
-      mediaType: AUDIO,
-      query: "cat",
-      provider: audio.provider,
-      relatedTo: null,
-    })
-  })
-})
diff --git a/frontend/test/unit/specs/components/VSearchResultsGrid/v-image-cell.spec.js b/frontend/test/unit/specs/components/VSearchResultsGrid/v-image-cell.spec.js
index 17de7621956..e3d02ba5fac 100644
--- a/frontend/test/unit/specs/components/VSearchResultsGrid/v-image-cell.spec.js
+++ b/frontend/test/unit/specs/components/VSearchResultsGrid/v-image-cell.spec.js
@@ -1,12 +1,8 @@
-import { fireEvent } from "@testing-library/vue"
-
 import { render } from "~~/test/unit/test-utils/render"
 import { image } from "~~/test/unit/fixtures/image"
 
 import { useAnalytics } from "~/composables/use-analytics"
 
-import { IMAGE } from "~/constants/media"
-
 import VImageCell from "~/components/VSearchResultsGrid/VImageCell.vue"
 
 jest.mock("~/composables/use-analytics", () => ({
@@ -31,21 +27,6 @@ describe("VImageCell", () => {
     }
   })
 
-  it("sends SELECT_SEARCH_RESULT event when clicked", async () => {
-    const { getByRole } = render(VImageCell, options)
-    const link = getByRole("link")
-
-    await fireEvent.click(link)
-
-    expect(sendCustomEventMock).toHaveBeenCalledWith("SELECT_SEARCH_RESULT", {
-      id: image.id,
-      mediaType: IMAGE,
-      query: "cat",
-      provider: image.provider,
-      relatedTo: null,
-    })
-  })
-
   it("is blurred when the image is sensitive", async () => {
     options.props.image.isSensitive = true
     const { getByAltText } = render(VImageCell, options)