Fix:Playlist items playing from server and not using local copy #734

components/cards/LazyBookCard.vue

@@ -47,6 +47,7 @@
     <!-- No progress shown for collapsed series in library -->
     <div v-if="!collapsedSeries && (!isPodcast || recentEpisode)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
+    <!-- Downloaded icon -->
     <div v-if="showHasLocalDownload" class="absolute right-0 top-0 z-20" :style="{ top: (isPodcast ? 1.75 : 0.375) * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <span class="material-icons text-2xl text-success">{{ isLocalOnly ? 'task' : 'download_done' }}</span>
     </div>

components/tables/playlist/ItemTableRow.vue

@@ -6,9 +6,9 @@
       </div>
       <div class="item-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
-          <p class="truncate block text-sm">{{ itemTitle }}</p>
-          <p class="truncate block text-gray-400 text-xs">{{ bookAuthorName }}</p>
-          <p class="text-xxs text-gray-500">{{ itemDuration }}</p>
+          <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
+          <p v-if="authorName" class="truncate block text-gray-300 text-xs">{{ authorName }}</p>
+          <p class="text-xxs text-gray-400">{{ itemDuration }}</p>
         </div>
       </div>
       <div class="w-8 min-w-8 flex justify-center">
@@ -39,11 +39,17 @@ export default {
     libraryItem() {
       return this.item.libraryItem || {}
     },
+    localLibraryItem() {
+      return this.item.localLibraryItem
+    },
     episode() {
       return this.item.episode
     },
     episodeId() {
-      return this.episode ? this.episode.id : null
+      return this.episode?.id || null
+    },
+    localEpisode() {
+      return this.item.localEpisode
     },
     media() {
       return this.libraryItem.media || {}
@@ -66,6 +72,10 @@ export default {
     bookAuthorName() {
       return this.bookAuthors.map((au) => au.name).join(', ')
     },
+    authorName() {
+      if (this.episode) return this.mediaMetadata.author
+      return this.bookAuthorName
+    },
     itemDuration() {
       if (this.episode) return this.$elapsedPretty(this.episode.duration)
       return this.$elapsedPretty(this.media.duration)
@@ -92,6 +102,7 @@ export default {
       return !this.isMissing && !this.isInvalid && (this.tracks.length || this.episode)
     },
     isStreaming() {
+      if (this.localLibraryItem && this.$store.getters['getIsEpisodeStreaming'](this.localLibraryItem.id, this.localEpisode?.id)) return true
       return this.$store.getters['getIsEpisodeStreaming'](this.libraryItem.id, this.episodeId)
     },
     streamIsPlaying() {
@@ -103,6 +114,13 @@ export default {
       await this.$hapticsImpact()
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
+      } else if (this.localLibraryItem) {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.localLibraryItem.id,
+          episodeId: this.localEpisode?.id,
+          serverLibraryItemId: this.libraryItem.id,
+          serverEpisodeId: this.episodeId
+        })
       } else {
         this.$eventBus.$emit('play-item', {
           libraryItemId: this.libraryItem.id,