Update:Syncing playback time when media item is open in player

components/app/Appbar.vue

@@ -79,7 +79,7 @@ export default {
   },
   methods: {
     castClick() {
-      if (this.$store.state.playerIsLocal) {
+      if (this.$store.getters['getIsCurrentSessionLocal']) {
         this.$eventBus.$emit('cast-local-item')
         return
       }

components/app/AudioPlayer.vue

@@ -574,8 +574,8 @@ export default {
       AbsAudioPlayer.seek({ value: Math.floor(time) })
 
       if (this.$refs.playedTrack) {
-        var perc = time / this.totalDuration
-        var ptWidth = Math.round(perc * this.trackWidth)
+        const perc = time / this.totalDuration
+        const ptWidth = Math.round(perc * this.trackWidth)
         this.$refs.playedTrack.style.width = ptWidth + 'px'
 
         this.$refs.playedTrack.classList.remove('bg-gray-200')
@@ -721,7 +721,7 @@ export default {
       AbsAudioPlayer.closePlayback()
     },
     endPlayback() {
-      this.$store.commit('setPlayerItem', null)
+      this.$store.commit('setPlaybackSession', null)
       this.showFullscreen = false
       this.isEnded = false
       this.isLoading = false
@@ -767,7 +767,7 @@ export default {
       this.isEnded = false
       this.isLoading = true
       this.syncStatus = 0
-      this.$store.commit('setPlayerItem', this.playbackSession)
+      this.$store.commit('setPlaybackSession', this.playbackSession)
 
       // Set track width
       this.$nextTick(() => {

components/app/AudioPlayerContainer.vue

@@ -110,7 +110,7 @@ export default {
     },
     streamProgress(data) {
       if (!data.numSegments) return
-      var chunks = data.chunks
+      const chunks = data.chunks
       if (this.$refs.audioPlayer) {
         this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
       }
@@ -265,8 +265,7 @@ export default {
       this.$store.commit('globals/updateLocalMediaProgress', localMediaProgress)
     },
     onMediaPlayerChanged(data) {
-      var mediaPlayer = data.value
-      this.$store.commit('setMediaPlayer', mediaPlayer)
+      this.$store.commit('setMediaPlayer', data.value)
     },
     onReady() {
       // The UI is reporting elsewhere we are ready
@@ -283,6 +282,9 @@ export default {
         this.$store.commit('setIsFirstAudioLoad', false) // Only run this once on app launch
         AbsAudioPlayer.onReady()
       }
+    },
+    playbackTimeUpdate(currentTime) {
+      this.$refs.audioPlayer?.seek(currentTime)
     }
   },
   mounted() {
@@ -300,6 +302,7 @@ export default {
     this.$eventBus.$on('close-stream', this.closeStreamOnly)
     this.$eventBus.$on('cast-local-item', this.castLocalItem)
     this.$eventBus.$on('user-settings', this.settingsUpdated)
+    this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
   },
   beforeDestroy() {
     if (this.onLocalMediaProgressUpdateListener) this.onLocalMediaProgressUpdateListener.remove()
@@ -313,6 +316,7 @@ export default {
     this.$eventBus.$off('close-stream', this.closeStreamOnly)
     this.$eventBus.$off('cast-local-item', this.castLocalItem)
     this.$eventBus.$off('user-settings', this.settingsUpdated)
+    this.$eventBus.$off('playback-time-update', this.playbackTimeUpdate)
   }
 }
 </script>

components/cards/LazyBookCard.vue

@@ -213,7 +213,7 @@ export default {
       return this.mediaMetadata.series
     },
     seriesSequence() {
-      return this.series ? this.series.sequence : null
+      return this.series?.sequence || null
     },
     recentEpisode() {
       // Only added to item when getting currently listening podcasts
@@ -232,14 +232,14 @@ export default {
     },
     booksInSeries() {
       // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
+      return this.collapsedSeries?.numBooks || 0
     },
     seriesSequenceList() {
-      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
+      return this.collapsedSeries?.seriesSequenceList || null
     },
     libraryItemIdsInSeries() {
       // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
+      return this.collapsedSeries?.libraryItemIds || []
     },
     displayTitle() {
       if (this.recentEpisode) return this.recentEpisode.title
@@ -291,20 +291,18 @@ export default {
     showError() {
       return this.numMissingParts || this.isMissing || this.isInvalid
     },
-    playerIsLocal() {
-      return !!this.$store.state.playerIsLocal
-    },
     localLibraryItemId() {
       if (this.isLocal) return this.libraryItemId
-      return this.localLibraryItem ? this.localLibraryItem.id : null
+      return this.localLibraryItem?.id || null
+    },
+    localEpisode() {
+      if (!this.recentEpisode || !this.localLibraryItem) return null
+      // Current recentEpisode is only implemented server side so this will always be the serverEpisodeId
+      return this.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === this.recentEpisode.id)
     },
     isStreaming() {
       if (this.isPodcast) {
-        if (this.playerIsLocal) {
-          // Check is streaming local version of this episode
-          return false // episode cards not implemented for local yet
-        }
-        return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.recentEpisode.id)
+        return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.recentEpisode.id)
       } else {
         return false // not yet necessary for books
       }
@@ -380,8 +378,7 @@ export default {
     showHasLocalDownload() {
       if (this.localLibraryItem || this.isLocal) {
         if (this.recentEpisode && !this.isLocal) {
-          const localEpisode = this.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === this.recentEpisode.id)
-          return !!localEpisode
+          return !!this.localEpisode
         } else {
           return true
         }
@@ -436,18 +433,15 @@ export default {
         return
       }
 
-      if (this.localLibraryItem) {
-        const localEpisode = this.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === this.recentEpisode.id)
-        if (localEpisode) {
-          // Play episode locally
-          eventBus.$emit('play-item', {
-            libraryItemId: this.localLibraryItemId,
-            episodeId: localEpisode.id,
-            serverLibraryItemId: this.libraryItemId,
-            serverEpisodeId: this.recentEpisode.id
-          })
-          return
-        }
+      if (this.localEpisode) {
+        // Play episode locally
+        eventBus.$emit('play-item', {
+          libraryItemId: this.localLibraryItemId,
+          episodeId: this.localEpisode.id,
+          serverLibraryItemId: this.libraryItemId,
+          serverEpisodeId: this.recentEpisode.id
+        })
+        return
       }
 
       eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId: this.recentEpisode.id })

components/readers/ComicReader.vue

@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>
@@ -148,8 +148,8 @@ export default {
         }
       })
     },
-    playerLibraryItemId() {
-      return this.$store.state.playerLibraryItemId
+    isPlayerOpen() {
+      return this.$store.getters['getIsPlayerOpen']
     }
   },
   methods: {

components/readers/EpubReader.vue

@@ -2,7 +2,7 @@
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="h-full w-full"></div>
 
-    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-primary text-white/80'" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-primary text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ progress }}%</p>
     </div>
@@ -37,7 +37,7 @@ export default {
     }
   },
   watch: {
-    playerLibraryItemId() {
+    isPlayerOpen() {
       this.updateHeight()
     }
   },
@@ -65,11 +65,11 @@ export default {
       }
       return null
     },
-    playerLibraryItemId() {
-      return this.$store.state.playerLibraryItemId
+    isPlayerOpen() {
+      return this.$store.getters['getIsPlayerOpen']
     },
     readerHeightOffset() {
-      return this.playerLibraryItemId ? 204 : 84
+      return this.isPlayerOpen ? 204 : 104
     },
     /** @returns {Array<ePub.NavItem>} */
     chapters() {

components/readers/MobiReader.vue

@@ -23,9 +23,6 @@ export default {
     return {}
   },
   computed: {
-    playerLibraryItemId() {
-      return this.$store.state.playerLibraryItemId
-    },
     userToken() {
       return this.$store.getters['user/getToken']
     }

components/readers/PdfReader.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>
@@ -114,8 +114,8 @@ export default {
         }
       }
     },
-    playerLibraryItemId() {
-      return this.$store.state.playerLibraryItemId
+    isPlayerOpen() {
+      return this.$store.getters['getIsPlayerOpen']
     }
   },
   methods: {

components/readers/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!playerLibraryItemId }">
+  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
     <!-- toolbar -->
     <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-white" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
@@ -213,8 +213,8 @@ export default {
       }
       return `${serverAddress}/api/items/${this.selectedLibraryItem.id}/ebook`
     },
-    playerLibraryItemId() {
-      return this.$store.state.playerLibraryItemId
+    isPlayerOpen() {
+      return this.$store.getters['getIsPlayerOpen']
     },
     keepProgress() {
       return this.$store.state.ereaderKeepProgress

components/tables/collection/BookTableRow.vue

@@ -74,7 +74,7 @@ export default {
       return !this.isMissing && !this.isInvalid && this.tracks.length
     },
     isStreaming() {
-      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId)
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId)
     },
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming

components/tables/playlist/ItemTableRow.vue

@@ -102,8 +102,8 @@ 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)
+      if (this.localLibraryItem && this.localEpisode && this.$store.getters['getIsMediaStreaming'](this.localLibraryItem.id, this.localEpisode.id)) return true
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItem.id, this.episodeId)
     },
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming

components/tables/podcast/EpisodeRow.vue

@@ -114,14 +114,7 @@ export default {
       return this.$secondsToTimestamp(this.episode.duration)
     },
     isStreaming() {
-      if (this.playerIsLocal && this.localLibraryItemId && this.localEpisode) {
-        // Check is streaming local version of this episode
-        return this.$store.getters['getIsEpisodeStreaming'](this.localLibraryItemId, this.localEpisode.id)
-      }
-      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
-    },
-    playerIsLocal() {
-      return !!this.$store.state.playerIsLocal
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
     },
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming

components/tables/podcast/LatestEpisodeRow.vue

@@ -117,14 +117,7 @@ export default {
       return this.$secondsToTimestamp(this.episode.duration)
     },
     isStreaming() {
-      if (this.playerIsLocal && this.localLibraryItemId && this.localEpisode) {
-        // Check is streaming local version of this episode
-        return this.$store.getters['getIsEpisodeStreaming'](this.localLibraryItemId, this.localEpisode.id)
-      }
-      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
-    },
-    playerIsLocal() {
-      return !!this.$store.state.playerIsLocal
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
     },
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming