Add:Podcast search page

client/components/app/BookShelfToolbar.vue

@@ -12,7 +12,7 @@
       </nuxt-link>
     </div>
     <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
-      <template v-if="page !== 'search' && !isHome">
+      <template v-if="page !== 'search' && page !== 'podcast-search' && !isHome">
         <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
         <div v-else class="items-center hidden md:flex">
           <div @click="seriesBackArrow" class="rounded-full h-9 w-9 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">

client/components/app/SideRail.vue

@@ -52,6 +52,14 @@
       <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="showExperimentalFeatures && isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <icons-podcasts-svg class="w-6 h-6" />
+
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>
+
+      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
@@ -62,36 +70,6 @@
         <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
       </div>
     </nuxt-link>
-
-    <!-- <nuxt-link to="/library/collections" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-      </svg>
-
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Collections</p>
-
-      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
-
-    <!-- <nuxt-link to="/library/tags" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'tags' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-      </svg>
-
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Tags</p>
-
-      <div v-show="paramId === 'tags'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
-
-    <!-- <nuxt-link to="/library/authors" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'authors' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-      </svg>
-
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Authors</p>
-
-      <div v-show="paramId === 'authors'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
   </div>
 </template>
 
@@ -110,6 +88,15 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcasts'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
+    },
     homePage() {
       return this.$route.name === 'library-library'
     },

client/pages/library/_library/podcast/search.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="page" :class="streamAudiobook ? 'streaming' : ''">
+    <div class="flex h-full">
+      <app-side-rail class="hidden md:block" />
+      <div class="flex-grow">
+        <app-book-shelf-toolbar page="podcast-search" />
+        <div class="w-full h-full overflow-y-auto p-12 relative">
+          <div class="w-full max-w-3xl mx-auto">
+            <form @submit.prevent="submitSearch" class="flex">
+              <ui-text-input v-model="searchTerm" :disabled="processing" placeholder="Search term" class="flex-grow mr-2" />
+              <ui-btn type="submit" :disabled="processing">Search Podcasts</ui-btn>
+            </form>
+          </div>
+
+          <div class="w-full max-w-3xl mx-auto py-4">
+            <p v-if="termSearched && !results.length && !processing" class="text-center text-xl">No podcasts found</p>
+            <template v-for="podcast in results">
+              <div :key="podcast.id" class="flex p-1 hover:bg-primary hover:bg-opacity-25 cursor-pointer" @click="selectPodcast(podcast)">
+                <div class="w-24 min-w-24 h-24 bg-primary">
+                  <img v-if="podcast.cover" :src="podcast.cover" class="h-full w-full" />
+                </div>
+                <div class="flex-grow pl-4 max-w-2xl">
+                  <a :href="podcast.pageUrl" class="text-lg text-gray-200 hover:underline" target="_blank" @click.stop>{{ podcast.title }}</a>
+                  <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ podcast.artistName }}</p>
+                  <p class="text-xs text-gray-400 leading-5">{{ podcast.genres.join(', ') }}</p>
+                  <p class="text-xs text-gray-400 leading-5">{{ podcast.trackCount }} Episodes</p>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <div v-show="processing" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-25 z-40">
+            <ui-loading-indicator />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchTerm: '',
+      results: [],
+      termSearched: '',
+      processing: false
+    }
+  },
+  computed: {
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    }
+  },
+  methods: {
+    async submitSearch() {
+      if (!this.searchTerm) return
+      console.log('Searching', this.searchTerm)
+      var term = this.searchTerm
+      this.processing = true
+      this.termSearched = ''
+      var results = await this.$axios.$get(`/api/search/podcast?term=${encodeURIComponent(this.searchTerm)}`).catch((error) => {
+        console.error('Search request failed', error)
+        return []
+      })
+      console.log('Got results', results)
+      this.results = results
+      this.termSearched = term
+      this.processing = false
+    },
+    async selectPodcast(podcast) {
+      console.log('Selected podcast', podcast)
+      if (!podcast.feedUrl) {
+        this.$toast.error('Invalid podcast - no feed')
+        return
+      }
+      this.processing = true
+      var podcastfeed = await this.$axios.$post(`/api/getPodcastFeed`, { rssFeed: podcast.feedUrl }).catch((error) => {
+        console.error('Failed to get feed', error)
+        this.$toast.error('Failed to get podcast feed')
+        return null
+      })
+      this.processing = false
+      if (!podcastfeed) return
+      console.log('Got podcast feed', podcastfeed)
+    }
+  },
+  mounted() {}
+}
+</script>

client/store/libraries.js

@@ -18,6 +18,10 @@ export const getters = {
     if (!currentLibrary) return ''
     return currentLibrary.name
   },
+  getCurrentLibraryMediaType: (state, getters) => {
+    if (!getters.getCurrentLibrary) return null
+    return getters.getCurrentLibrary.mediaType
+  },
   getSortedLibraries: state => () => {
     return state.libraries.map(lib => ({ ...lib })).sort((a, b) => a.displayOrder - b.displayOrder)
   },