Handle collections in GET_SEARCH_RESULTS

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { AudioDetail } from "~/types/media"
 import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
-import { useRouteResultParams } from "~/composables/use-route-result-params"
 
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
@@ -12,8 +11,6 @@ defineProps<{
   status?: AudioStatus
   currentTime: number
 }>()
-
-const { resultParams } = useRouteResultParams()
 </script>
 
 <template>
@@ -45,7 +42,6 @@ const { resultParams } = useRouteResultParams()
         />
         <VGetMediaButton
           :media="audio"
-          :result-params="resultParams"
           media-type="audio"
           class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
         />

frontend/src/components/VMediaInfo/VGetMediaButton.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
+import { useRouteResultParams } from "~/composables/use-route-result-params"
 import type { SupportedMediaType } from "~/constants/media"
-import type { SearchResultParams } from "~/types/analytics"
 import type { Media } from "~/types/media"
 
 import VButton from "~/components/VButton.vue"
 
 const props = defineProps<{
   media: Media
   mediaType: SupportedMediaType
-  resultParams: SearchResultParams
 }>()
-
+const { resultParams } = useRouteResultParams()
 const { $sendCustomEvent } = useNuxtApp()
 
 const sendGetMediaEvent = () => {
   $sendCustomEvent("GET_MEDIA", {
     provider: props.media.provider,
     mediaType: props.mediaType,
-    ...props.resultParams,
+    ...resultParams.value,
   })
 }
 </script>

frontend/src/pages/audio/[id]/index.vue

@@ -19,11 +19,13 @@ import type { AudioDetail } from "~/types/media"
 import type { AudioInteractionData } from "~/types/analytics"
 import { validateUUID } from "~/utils/query-utils"
 
+import { useAnalytics } from "~/composables/use-analytics"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
-import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
 import { useSingleResultStore } from "~/stores/media/single-result"
 import singleResultMiddleware from "~/middleware/single-result"
 
+import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
+
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
@@ -77,13 +79,12 @@ useHead(() => ({
   title: pageTitle.value,
 }))
 
-const { $sendCustomEvent } = useNuxtApp()
-
+const { sendCustomEvent } = useAnalytics()
 const sendAudioEvent = (
   data: Omit<AudioInteractionData, "component">,
   component: "AudioDetailPage" | "VRelatedAudio"
 ) => {
-  $sendCustomEvent("AUDIO_INTERACTION", {
+  sendCustomEvent("AUDIO_INTERACTION", {
     ...data,
     component,
   })

frontend/src/pages/image/[id]/index.vue

@@ -18,14 +18,16 @@ import { computed, ref, watch } from "vue"
 import { IMAGE } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
 import type { ImageDetail } from "~/types/media"
+import { useAnalytics } from "~/composables/use-analytics"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 import { useSingleResultPageMeta } from "~/composables/use-single-result-page-meta"
-import { useRouteResultParams } from "~/composables/use-route-result-params"
-import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
 
 import { useSingleResultStore } from "~/stores/media/single-result"
 import singleResultMiddleware from "~/middleware/single-result"
 
+import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
+import { useRouteResultParams } from "~/composables/use-route-result-params"
+
 import VBone from "~/components/VSkeleton/VBone.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
@@ -100,12 +102,12 @@ const showLoadingState = computed(() => {
   return isLoadingThumbnail.value
 })
 
-const { $sendCustomEvent } = useNuxtApp()
+const { sendCustomEvent } = useAnalytics()
 
 const { resultParams } = useRouteResultParams()
 
 const handleRightClick = () => {
-  $sendCustomEvent("RIGHT_CLICK_IMAGE", resultParams.value)
+  sendCustomEvent("RIGHT_CLICK_IMAGE", resultParams.value)
 }
 
 const { reveal, isHidden } = useSensitiveMedia(image.value)
@@ -285,7 +287,6 @@ watch(error, (err) => {
           <VMediaInfo :media="image" class="min-w-0 sm:col-start-1" />
           <VGetMediaButton
             :media="image"
-            :result-params="resultParams"
             media-type="image"
             class="row-start-1 mb-4 !w-full flex-initial sm:col-start-2 sm:mb-0 sm:mt-1 sm:!w-auto"
           />

frontend/src/stores/media/index.ts

@@ -485,9 +485,14 @@ export const useMediaStore = defineStore("media", {
         let errorData: FetchingError | undefined
 
         if (page == 1) {
+          const { kind, query, collectionType, collectionValue } =
+            searchStore.searchParamsForEvent
           $sendCustomEvent("GET_SEARCH_RESULTS", {
-            mediaType: mediaType,
-            query: queryParams.q,
+            kind,
+            query,
+            collectionType,
+            collectionValue,
+            mediaType,
             resultsCount: mediaCount,
           })
         }

frontend/src/stores/search.ts

@@ -244,7 +244,7 @@ export const useSearchStore = defineStore("search", {
     searchParamsForEvent(): SearchParamsForEvent {
       return {
         kind: this.strategy === "default" ? "search" : "collection",
-        query: this.searchTerm,
+        query: this.strategy === "default" ? this.searchTerm : "null",
         searchType: isSearchTypeSupported(this.searchType)
           ? this.searchType
           : ALL_MEDIA,

frontend/src/types/analytics.ts

@@ -88,11 +88,9 @@ export type Events = {
    *   - How often are searches returning fewer than one page of results?
    *   - How many results do most searches yield?
    */
-  GET_SEARCH_RESULTS: {
+  GET_SEARCH_RESULTS: Omit<SearchParamsForEvent, "searchType"> & {
     /** the media type being searched */
     mediaType: SupportedMediaType
-    /** The search term */
-    query: string
     /** The number of results found for this search */
     resultsCount: number
   }