Update search to include podcast episodes #1793

components/cards/EpisodeSearchCard.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="grow px-2 audiobookSearchCardContent">
+      <p class="truncate text-sm">{{ title }}</p>
+      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    episode: {
+      type: Object,
+      default: () => {}
+    },
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    isPodcast() {
+      return this.mediaType === 'podcast'
+    },
+    title() {
+      return this.episode?.title || 'No Title'
+    },
+    subtitle() {
+      return this.mediaMetadata.title
+    },
+    authorName() {
+      return this.mediaMetadata.author
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.audiobookSearchCardContent {
+  width: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

pages/search.vue

@@ -19,7 +19,7 @@
         </div>
       </template>
 
-      <p v-if="podcastResults.length" class="uppercase text-xs text-fg-muted my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
+      <p v-if="podcastResults.length" class="font-semibold text-sm mb-1 mt-2">{{ $strings.LabelPodcasts }}</p>
       <template v-for="item in podcastResults">
         <div :key="item.libraryItem.id" class="text-fg select-none relative py-1">
           <nuxt-link :to="`/item/${item.libraryItem.id}`">
@@ -28,6 +28,15 @@
         </div>
       </template>
 
+      <p v-if="episodeResults.length" class="font-semibold text-sm mb-1 mt-2">{{ $strings.HeaderEpisodes }}</p>
+      <template v-for="item in episodeResults">
+        <div :key="item.libraryItem.recentEpisode.id" class="text-fg select-none relative py-1">
+          <nuxt-link :to="`/item/${item.libraryItem.id}/${item.libraryItem.recentEpisode.id}`">
+            <cards-episode-search-card :episode="item.libraryItem.recentEpisode" :library-item="item.libraryItem" />
+          </nuxt-link>
+        </div>
+      </template>
+
       <p v-if="seriesResults.length" class="font-semibold text-sm mb-1 mt-2">{{ $strings.LabelSeries }}</p>
       <template v-for="seriesResult in seriesResults">
         <div :key="seriesResult.series.id" class="w-full h-16 py-1">
@@ -77,6 +86,7 @@ export default {
       isFetching: false,
       bookResults: [],
       podcastResults: [],
+      episodeResults: [],
       seriesResults: [],
       authorResults: [],
       narratorResults: [],
@@ -91,7 +101,7 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length + this.narratorResults.length + this.tagResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length + this.narratorResults.length + this.tagResults.length + this.episodeResults.length
     }
   },
   methods: {
@@ -104,6 +114,7 @@ export default {
       if (!this.lastSearch) {
         this.bookResults = []
         this.podcastResults = []
+        this.episodeResults = []
         this.seriesResults = []
         this.authorResults = []
         this.narratorResults = []
@@ -125,6 +136,7 @@ export default {
 
       this.bookResults = results?.book || []
       this.podcastResults = results?.podcast || []
+      this.episodeResults = results?.episodes || []
       this.seriesResults = results?.series || []
       this.authorResults = results?.authors || []
       this.narratorResults = results?.narrators || []