Merge branch 'master' into center-title

pages/bookshelf/authors.vue

@@ -1,14 +1,83 @@
 <template>
-  <div>Authors</div>
+  <div>
+    <div id="bookshelf" class="w-full h-full p-4 overflow-y-auto">
+      <div class="flex flex-wrap justify-center">
+        <template v-for="author in authors">
+          <cards-author-card :key="author.id" :author="author" :width="96" :height="120" class="p-2" />
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      loading: true,
+      authors: [],
+      loadedLibraryId: null
+    }
   },
-  watch: {},
-  computed: {},
-  methods: {}
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async init() {
+      this.loadedLibraryId = this.currentLibraryId
+      this.authors = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/authors`)
+        .then((response) => response.authors)
+        .catch((error) => {
+          console.error('Failed to load authors', error)
+          return []
+        })
+      console.log('Loaded authors', this.authors)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      this.loading = false
+    },
+    authorAdded(author) {
+      if (!this.authors.some((au) => au.id === author.id)) {
+        this.authors.push(author)
+        this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      }
+    },
+    authorUpdated(author) {
+      this.authors = this.authors.map((au) => {
+        if (au.id === author.id) {
+          return author
+        }
+        return au
+      })
+    },
+    authorRemoved(author) {
+      this.authors = this.authors.filter((au) => au.id !== author.id)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+    },
+    libraryChanged(libraryId) {
+      if (libraryId !== this.loadedLibraryId) {
+        if (this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'book') {
+          this.init()
+        } else {
+          this.$router.replace('/bookshelf')
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.$socket.$on('author_added', this.authorAdded)
+    this.$socket.$on('author_updated', this.authorUpdated)
+    this.$socket.$on('author_removed', this.authorRemoved)
+    this.$eventBus.$on('library-changed', this.libraryChanged)
+  },
+  beforeDestroy() {
+    this.$socket.$off('author_added', this.authorAdded)
+    this.$socket.$off('author_updated', this.authorUpdated)
+    this.$socket.$off('author_removed', this.authorRemoved)
+    this.$eventBus.$off('library-changed', this.libraryChanged)
+  }
 }
 </script>

pages/bookshelf/index.vue

@@ -37,6 +37,7 @@ export default {
   data() {
     return {
       shelves: [],
+      isSettingsLoaded: false,
       isFirstNetworkConnection: true,
       lastServerFetch: 0,
       lastServerFetchLibraryId: null,
@@ -276,12 +277,25 @@ export default {
 
       this.isLoading = false
     },
-    openMediaPlayerWithMostRecentListening() {
+    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?.[0]
       if (mostRecentEntity) {
@@ -356,11 +370,16 @@ 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/bookshelf/latest.vue

@@ -17,7 +17,8 @@ export default {
       totalEpisodes: 0,
       currentPage: 0,
       localEpisodeMap: {},
-      isLocal: false
+      isLocal: false,
+      loadedLibraryId: null
     }
   },
   watch: {},
@@ -39,6 +40,7 @@ export default {
       this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
     },
     async loadRecentEpisodes(page = 0) {
+      this.loadedLibraryId = this.currentLibraryId
       this.processing = true
       const episodePayload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
         console.error('Failed to get recent episodes', error)
@@ -50,10 +52,23 @@ export default {
       this.recentEpisodes = episodePayload.episodes || []
       this.totalEpisodes = episodePayload.total
       this.currentPage = page
+    },
+    libraryChanged(libraryId) {
+      if (libraryId !== this.loadedLibraryId) {
+        if (this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast') {
+          this.loadRecentEpisodes()
+        } else {
+          this.$router.replace('/bookshelf')
+        }
+      }
     }
   },
   mounted() {
     this.loadRecentEpisodes()
+    this.$eventBus.$on('library-changed', this.libraryChanged)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('library-changed', this.libraryChanged)
   }
 }
 </script>

pages/bookshelf/library.vue

@@ -7,7 +7,6 @@ export default {
   async asyncData({ store, params, query }) {
     // Set filter by
     if (query.filter) {
-      store.commit('user/setSettings', { mobileFilterBy: query.filter })
       await store.dispatch('user/updateUserSettings', { mobileFilterBy: query.filter })
     }
   }

pages/item/_id/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full px-3 py-4 overflow-y-auto overflow-x-hidden relative bg-bg">
+  <div class="w-full h-full px-3 pb-4 overflow-y-auto overflow-x-hidden relative bg-bg">
     <div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
       <div class="w-full h-full" :style="{ backgroundColor: coverRgb }" />
       <div class="w-full h-full absolute top-0 left-0" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%)" />

pages/localMedia/folders/_id.vue

@@ -189,7 +189,11 @@ export default {
 
 <style scoped>
 .media-item-container {
-  height: calc(100vh - 200px);
-  max-height: calc(100vh - 200px);
+  height: calc(100vh - 210px);
+  max-height: calc(100vh - 210px);
+}
+.playerOpen .media-item-container {
+  height: calc(100vh - 310px);
+  max-height: calc(100vh - 310px);
 }
 </style>

pages/localMedia/item/_id.vue

@@ -390,7 +390,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .media-item-container {
   height: calc(100vh - 200px);
   max-height: calc(100vh - 200px);