Merge branch 'master' into HStep20/master

assets/app.css

@@ -117,6 +117,20 @@ Bookshelf Label
   filter: blur(20px);
 }
 
+.episode-subtitle {
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-height: 16px;
+  /* fallback */
+  max-height: 32px;
+  /* fallback */
+  -webkit-line-clamp: 2;
+  /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;

components/app/AudioPlayer.vue

@@ -12,7 +12,7 @@
       <div class="top-6 right-4 absolute cursor-pointer">
         <span class="material-icons text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
-      <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" style="font-size: 10px" :class="{ 'text-success': isLocalPlayMethod, 'text-accent': !isLocalPlayMethod }">{{ isDirectPlayMethod ? 'Direct' : isLocalPlayMethod ? 'Local' : 'Transcode' }}</p>
+      <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight }" style="font-size: 10px">{{ isDirectPlayMethod ? 'Direct' : isLocalPlayMethod ? 'Local' : 'Transcode' }}</p>
     </div>
 
     <div v-if="useChapterTrack && useTotalTrack && showFullscreen" class="absolute total-track w-full z-30 px-6">

components/cards/AuthorSearchCard.vue

@@ -7,26 +7,6 @@
       <p class="truncate text-sm">{{ name }}</p>
     </div>
   </div>
-  <!-- <div class="flex h-full px-1 overflow-hidden shadow-sm">
-    <div style="max-height: 48px; max-width: 48px" class="w-12 h-12 bg-primary overflow-hidden rounded">
-      <svg width="140%" height="140%" style="margin-left: -20%; margin-top: -20%; opacity: 0.6" viewBox="0 0 177 266" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fill="white" d="M40.7156 165.47C10.2694 150.865 -31.5407 148.629 -38.0532 155.529L63.3191 204.159L76.9443 190.899C66.828 181.394 54.006 171.846 40.7156 165.47Z" stroke="white" stroke-width="4" transform="translate(-2 -1)" />
-        <path d="M-38.0532 155.529C-31.5407 148.629 10.2694 150.865 40.7156 165.47C54.006 171.846 66.828 181.394 76.9443 190.899L95.0391 173.37C80.6681 159.403 64.7526 149.155 51.5747 142.834C21.3549 128.337 -46.2471 114.563 -60.6897 144.67L-71.5489 167.307L44.5864 223.019L63.3191 204.159L-38.0532 155.529Z" fill="white" />
-        <path
-          d="M105.87 29.6508C80.857 17.6515 50.8784 28.1923 38.879 53.2056C26.8797 78.219 37.4205 108.198 62.4338 120.197C87.4472 132.196 117.426 121.656 129.425 96.6422C141.425 71.6288 130.884 41.6502 105.87 29.6508ZM106.789 85.783C112.761 73.3329 107.461 58.2599 95.0112 52.2874C82.5611 46.3148 67.4881 51.6147 61.5156 64.0648C55.543 76.5149 60.8429 91.5879 73.293 97.5604C85.7431 103.533 100.816 98.2331 106.789 85.783Z"
-          fill="white"
-        />
-        <path
-          d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01ZM181.725 108.497C179.624 108.491 177.436 109.326 175.835 110.918L160.415 126.257L191.848 157.856L207.268 142.517C210.554 139.248 210.568 133.954 207.299 130.667L187.685 110.95C186.009 109.264 183.91 108.502 181.725 108.497ZM151.399 135.226L58.2034 227.931L58.1203 259.447L89.6359 259.53L182.831 166.825L151.399 135.226Z"
-          fill="white"
-        />
-        <path d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01Z" fill="white" stroke="white" stroke-width="10px" />
-      </svg>
-    </div>
-    <div class="flex-grow px-2 authorSearchCardContent h-full">
-      <p class="truncate text-sm">{{ author }}</p>
-    </div>
-  </div> -->
 </template>
 
 <script>

components/cards/ItemSearchCard.vue

@@ -10,7 +10,7 @@
       <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
       <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
 
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
   </div>
 </template>
@@ -78,11 +78,14 @@ export default {
       var lastPart = this.matchText.substr(totalLenSoFar)
       html += lastPart
 
+      if (this.matchKey === 'episode') return `<p class="truncate">Episode: ${html}</p>`
       if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'subtitle') return `<p class="truncate">${html}</p>`
       if (this.matchKey === 'authors') return `by ${html}`
       if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
       if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
       if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
+      if (this.matchKey === 'narrators') return `<p class="truncate">Narrator: ${html}</p>`
       return `${html}`
     }
   },

components/cards/LazyBookCard.vue

@@ -62,8 +62,10 @@
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="recentEpisodeNumber !== null && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">Episode #{{ recentEpisodeNumber }}</p>
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
+        Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+      </p>
     </div>
 
     <!-- Podcast Num Episodes -->
@@ -221,7 +223,7 @@ export default {
       if (this.recentEpisode.episode) {
         return this.recentEpisode.episode.replace(/^#/, '')
       }
-      return this.recentEpisode.index
+      return ''
     },
     collapsedSeries() {
       // Only added to item object when collapseSeries is enabled

components/cards/NarratorSearchCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-icons text-2xl text-gray-200">record_voice_over</span>
+    </div>
+    <div class="flex-grow px-2 narratorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ narrator }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    narrator: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.narratorSearchCardContent {
+  width: calc(100% - 40px);
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

components/tables/podcast/EpisodeRow.vue

@@ -17,7 +17,15 @@
         {{ title }}
       </p>
 
-      <p class="text-sm text-gray-200 line-clamp-2 mt-1.5 mb-0.5">{{ subtitle }}</p>
+      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
+
+      <div v-if="episodeNumber || season || episodeType" class="flex py-2 items-center -mx-0.5">
+        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Episode #{{ episodeNumber }}</div>
+        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Season #{{ season }}</div>
+        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200 capitalize">
+          {{ episodeType }}
+        </div>
+      </div>
 
       <div class="flex items-center pt-2">
         <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
@@ -90,7 +98,17 @@ export default {
       return this.episode.title || ''
     },
     subtitle() {
-      return this.episode.subtitle || ''
+      return this.episode.subtitle || this.episode.description || ''
+    },
+    episodeNumber() {
+      return this.episode.episode
+    },
+    season() {
+      return this.episode.season
+    },
+    episodeType() {
+      if (this.episode.episodeType === 'full') return null // only show Trailer/Bonus
+      return this.episode.episodeType
     },
     duration() {
       return this.$secondsToTimestamp(this.episode.duration)

components/tables/podcast/LatestEpisodeRow.vue

@@ -16,7 +16,16 @@
       <p class="text-sm font-semibold">
         {{ title }}
       </p>
-      <p class="text-sm text-gray-200 line-clamp-2 mt-1.5 mb-0.5">{{ subtitle }}</p>
+
+      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
+
+      <div v-if="episodeNumber || season || episodeType" class="flex pt-2 items-center -mx-0.5">
+        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Episode #{{ episodeNumber }}</div>
+        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Season #{{ season }}</div>
+        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200 capitalize">
+          {{ episodeType }}
+        </div>
+      </div>
 
       <div class="flex items-center pt-2">
         <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
@@ -92,7 +101,17 @@ export default {
       return this.episode.title || ''
     },
     subtitle() {
-      return this.episode.subtitle || ''
+      return this.episode.subtitle || this.episode.description || ''
+    },
+    episodeNumber() {
+      return this.episode.episode
+    },
+    season() {
+      return this.episode.season
+    },
+    episodeType() {
+      if (this.episode.episodeType === 'full') return null // only show Trailer/Bonus
+      return this.episode.episodeType
     },
     duration() {
       return this.$secondsToTimestamp(this.episode.duration)

pages/bookshelf/index.vue

@@ -37,7 +37,6 @@ export default {
   data() {
     return {
       shelves: [],
-      isSettingsLoaded: false,
       isFirstNetworkConnection: true,
       lastServerFetch: 0,
       lastServerFetchLibraryId: null,
@@ -258,11 +257,6 @@ export default {
           return cat
         })
 
-        // TODO: iOS has its own implementation of this. Android & iOS should be consistent here.
-        if (!this.isIos) {
-          this.openMediaPlayerWithMostRecentListening()
-        }
-
         // Only add the local shelf with the same media type
         const localShelves = localCategories.filter((cat) => cat.type === this.currentLibraryMediaType && !cat.localOnly)
         this.shelves.push(...localShelves)
@@ -277,53 +271,6 @@ export default {
 
       this.isLoading = false
     },
-    async waitForSettings() {
-      // Wait up to 3 seconds
-      for (let i = 0; i < 6; i++) {
-        if (this.isSettingsLoaded) return true
-        await new Promise((resolve) => setTimeout(resolve, 500))
-      }
-      return false
-    },
-    async openMediaPlayerWithMostRecentListening() {
-      // If we don't already have a player open
-      // Try opening the first book from continue-listening without playing it
-      if (this.$store.state.playerLibraryItemId || !this.$store.state.isFirstAudioLoad) return
-      this.$store.commit('setIsFirstAudioLoad', false) // Only run this once on app launch
-
-      // Wait for settings to load to prevent race condition when setting playback speed.
-      if (!this.isSettingsLoaded) {
-        await this.waitForSettings()
-      }
-
-      const continueListeningShelf = this.shelves.find((cat) => cat.id === 'continue-listening')
-      const mostRecentEntity = continueListeningShelf?.entities?.find((li) => li.media?.audioTracks?.length || li.media?.numTracks)
-      if (mostRecentEntity) {
-        const playObject = {
-          libraryItemId: mostRecentEntity.id,
-          episodeId: mostRecentEntity.recentEpisode?.id || null,
-          paused: true
-        }
-
-        // Check if there is a local copy
-        if (mostRecentEntity.localLibraryItem) {
-          if (mostRecentEntity.recentEpisode) {
-            // Check if the podcast episode has a local copy
-            const localEpisode = mostRecentEntity.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === mostRecentEntity.recentEpisode.id)
-            if (localEpisode) {
-              playObject.libraryItemId = mostRecentEntity.localLibraryItem.id
-              playObject.episodeId = localEpisode.id
-              playObject.serverLibraryItemId = mostRecentEntity.id
-              playObject.serverEpisodeId = mostRecentEntity.recentEpisode.id
-            }
-          } else {
-            playObject.libraryItemId = mostRecentEntity.localLibraryItem.id
-            playObject.serverLibraryItemId = mostRecentEntity.id
-          }
-        }
-        this.$eventBus.$emit('play-item', playObject)
-      }
-    },
     libraryChanged() {
       if (this.currentLibraryId) {
         console.log(`[categories] libraryChanged so fetching categories`)
@@ -370,16 +317,11 @@ export default {
         }
       })
     },
-    settingsUpdated() {
-      this.isSettingsLoaded = true
-    },
     initListeners() {
       this.$eventBus.$on('library-changed', this.libraryChanged)
-      this.$eventBus.$on('user-settings', this.settingsUpdated)
     },
     removeListeners() {
       this.$eventBus.$off('library-changed', this.libraryChanged)
-      this.$eventBus.$off('user-settings', this.settingsUpdated)
     }
   },
   mounted() {

pages/item/_id/_episode/index.vue

@@ -16,6 +16,14 @@
       {{ title }}
     </p>
 
+    <div v-if="episodeNumber || season || episodeType" class="flex py-2 items-center -mx-0.5">
+      <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200">Episode #{{ episodeNumber }}</div>
+      <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200">Season #{{ season }}</div>
+      <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200 capitalize">
+        {{ episodeType }}
+      </div>
+    </div>
+
     <!-- user progress card -->
     <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
       <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
@@ -160,6 +168,16 @@ export default {
     description() {
       return this.episode.description || ''
     },
+    episodeNumber() {
+      return this.episode.episode
+    },
+    season() {
+      return this.episode.season
+    },
+    episodeType() {
+      if (this.episode.episodeType === 'full') return null // only show Trailer/Bonus
+      return this.episode.episodeType
+    },
     duration() {
       return this.$secondsToTimestamp(this.episode.duration)
     },

pages/item/_id/index.vue

@@ -86,6 +86,9 @@
           </template>
         </div>
 
+        <div v-if="podcastType" class="text-white text-opacity-60 uppercase text-sm">Type</div>
+        <div v-if="podcastType" class="text-sm capitalize">{{ podcastType }}</div>
+
         <div v-if="series && series.length" class="text-white text-opacity-60 uppercase text-sm">Series</div>
         <div v-if="series && series.length" class="truncate text-sm">
           <template v-for="(series, index) in seriesList">
@@ -260,6 +263,9 @@ export default {
     publishedYear() {
       return this.mediaMetadata.publishedYear
     },
+    podcastType() {
+      return this.mediaMetadata.type
+    },
     podcastAuthor() {
       if (!this.isPodcast) return null
       return this.mediaMetadata.author || ''

pages/search.vue

@@ -41,7 +41,16 @@
       <template v-for="authorResult in authorResults">
         <div :key="authorResult.id" class="w-full h-14 py-1">
           <nuxt-link :to="`/bookshelf/library?filter=authors.${$encode(authorResult.id)}`">
-            <cards-author-search-card :key="authorResult.id" :author="authorResult" />
+            <cards-author-search-card :author="authorResult" />
+          </nuxt-link>
+        </div>
+      </template>
+
+      <p v-if="narratorResults.length" class="font-semibold text-sm mb-1 mt-2">Narrators</p>
+      <template v-for="narrator in narratorResults">
+        <div :key="narrator.name" class="w-full h-14 py-1">
+          <nuxt-link :to="`/bookshelf/library?filter=narrators.${$encode(narrator.name)}`">
+            <cards-narrator-search-card :narrator="narrator.name" />
           </nuxt-link>
         </div>
       </template>
@@ -60,7 +69,8 @@ export default {
       bookResults: [],
       podcastResults: [],
       seriesResults: [],
-      authorResults: []
+      authorResults: [],
+      narratorResults: []
     }
   },
   computed: {
@@ -71,7 +81,7 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.podcastResults.length + this.narratorResults.length
     }
   },
   methods: {
@@ -86,6 +96,7 @@ export default {
         this.podcastResults = []
         this.seriesResults = []
         this.authorResults = []
+        this.narratorResults = []
         return
       }
       this.isFetching = true
@@ -101,10 +112,11 @@ export default {
 
       this.isFetching = false
 
-      this.bookResults = results ? results.book || [] : []
+      this.bookResults = results?.book || []
-      this.podcastResults = results ? results.podcast || [] : []
+      this.podcastResults = results?.podcast || []
-      this.seriesResults = results ? results.series || [] : []
+      this.seriesResults = results?.series || []
-      this.authorResults = results ? results.authors || [] : []
+      this.authorResults = results?.authors || []
+      this.narratorResults = results?.narrators || []
     },
     updateSearch(val) {
       clearTimeout(this.searchTimeout)