.github/workflows/codeql.yml

@@ -47,7 +47,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -60,7 +60,7 @@ jobs:
       # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -73,6 +73,6 @@ jobs:
       #     ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2
         with:
           category: '/language:${{matrix.language}}'

Dockerfile

@@ -1,9 +1,5 @@
-ARG NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
-ARG NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
-
 ### STAGE 0: Build client ###
 FROM node:20-alpine AS build-client
-
 WORKDIR /client
 COPY /client /client
 RUN npm ci && npm cache clean --force
@@ -12,9 +8,6 @@ RUN npm run generate
 ### STAGE 1: Build server ###
 FROM node:20-alpine AS build-server
 
-ARG NUSQLITE3_DIR
-ARG TARGETPLATFORM
-
 ENV NODE_ENV=production
 
 RUN apk add --no-cache --update \
@@ -28,6 +21,11 @@ WORKDIR /server
 COPY index.js package* /server
 COPY /server /server/server
 
+ARG TARGETPLATFORM
+
+ENV NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
+ENV NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
+
 RUN case "$TARGETPLATFORM" in \
   "linux/amd64") \
   curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-x64.zip" ;; \
@@ -43,9 +41,6 @@ RUN npm ci --only=production
 ### STAGE 2: Create minimal runtime image ###
 FROM node:20-alpine
 
-ARG NUSQLITE3_DIR
-ARG NUSQLITE3_PATH
-
 # Install only runtime dependencies
 RUN apk add --no-cache --update \
   tzdata \
@@ -57,17 +52,13 @@ WORKDIR /app
 # Copy compiled frontend and server from build stages
 COPY --from=build-client /client/dist /app/client/dist
 COPY --from=build-server /server /app
-COPY --from=build-server ${NUSQLITE3_PATH} ${NUSQLITE3_PATH}
 
 EXPOSE 80
 
 ENV PORT=80
-ENV NODE_ENV=production
 ENV CONFIG_PATH="/config"
 ENV METADATA_PATH="/metadata"
 ENV SOURCE="docker"
-ENV NUSQLITE3_DIR=${NUSQLITE3_DIR}
-ENV NUSQLITE3_PATH=${NUSQLITE3_PATH}
 
 ENTRYPOINT ["tini", "--"]
 CMD ["node", "index.js"]

build/debian/DEBIAN/preinst

@@ -22,7 +22,7 @@ add_user() {
   declare -r descr="${4:-No description}"
   declare -r shell="${5:-/bin/false}"
 
-  if ! getent passwd "$user" 2>&1 >/dev/null; then
+  if ! getent passwd | grep -q "^$user:"; then
     echo "Creating system user: $user in $group with $descr and shell $shell"
     useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
   fi
@@ -39,7 +39,7 @@ add_group() {
     declare -r gid_flags="--gid $gid"
   fi
 
-  if ! getent group "$group" 2>&1 >/dev/null; then
+  if ! getent group | grep -q "^$group:" ; then
     echo "Creating system group: $group"
     groupadd $gid_flags --system $group
   fi

client/components/app/Appbar.vue

@@ -196,7 +196,6 @@ export default {
     requestBatchQuickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
-        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/app/BookShelfCategorized.vue

@@ -217,16 +217,6 @@ export default {
         })
       }
 
-      if (this.results.episodes?.length) {
-        shelves.push({
-          id: 'episodes',
-          label: 'Episodes',
-          labelStringKey: 'LabelEpisodes',
-          type: 'episode',
-          entities: this.results.episodes.map((res) => res.libraryItem)
-        })
-      }
-
       if (this.results.series?.length) {
         shelves.push({
           id: 'series',
@@ -300,8 +290,6 @@ export default {
         })
     },
     userUpdated(user) {
-      if (user.id !== this.$store.state.user.user.id) return
-
       if (user.seriesHideFromContinueListening && user.seriesHideFromContinueListening.length) {
         this.removeAllSeriesFromContinueSeries(user.seriesHideFromContinueListening)
       }

client/components/app/BookShelfRow.vue

@@ -93,10 +93,10 @@ export default {
     editAuthor(author) {
       this.$store.commit('globals/showEditAuthorModal', author)
     },
-    editItem(libraryItem, tab = 'details') {
+    editItem(libraryItem) {
       var itemIds = this.shelf.entities.map((e) => e.id)
       this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModalOnTab', { libraryItem, tab: tab || 'details' })
+      this.$store.commit('showEditModal', libraryItem)
     },
     editEpisode({ libraryItem, episode }) {
       this.$store.commit('setEpisodeTableEpisodeIds', [episode.id])

client/components/app/BookShelfToolbar.vue

@@ -3,18 +3,24 @@
     <div class="flex md:hidden h-10 items-center">
       <nuxt-link :to="`/library/${currentLibraryId}`" class="grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary/80' : 'bg-primary/40'">
         <p v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
-        <span v-else class="material-symbols text-lg">home</span>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
       </nuxt-link>
       <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
-        <span v-else class="material-symbols text-lg">import_contacts</span>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
       </nuxt-link>
       <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p class="text-sm">{{ $strings.ButtonLatest }}</p>
       </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
-        <span v-else class="material-symbols text-lg">view_column</span>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+        </svg>
       </nuxt-link>
       <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
@@ -26,7 +32,12 @@
       </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
-        <span v-else class="material-symbols text-lg">groups</span>
+        <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          />
+        </svg>
       </nuxt-link>
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary/80' : 'bg-primary/40'">
         <p class="text-sm">{{ $strings.ButtonAdd }}</p>

client/components/app/ConfigSideNav.vue

@@ -70,11 +70,6 @@ export default {
           title: this.$strings.HeaderUsers,
           path: '/config/users'
         },
-        {
-          id: 'config-api-keys',
-          title: this.$strings.HeaderApiKeys,
-          path: '/config/api-keys'
-        },
         {
           id: 'config-sessions',
           title: this.$strings.HeaderListeningSessions,

client/components/app/LazyBookshelf.vue

@@ -232,11 +232,11 @@ export default {
     clearFilter() {
       this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
     },
-    editEntity(entity, tab = 'details') {
+    editEntity(entity) {
       if (this.entityName === 'items' || this.entityName === 'series-books') {
         const bookIds = this.entities.map((e) => e.id)
         this.$store.commit('setBookshelfBookIds', bookIds)
-        this.$store.commit('showEditModalOnTab', { libraryItem: entity, tab: tab || 'details' })
+        this.$store.commit('showEditModal', entity)
       } else if (this.entityName === 'collections') {
         this.$store.commit('globals/setEditCollection', entity)
       } else if (this.entityName === 'playlists') {
@@ -778,6 +778,10 @@ export default {
     windowResize() {
       this.executeRebuild()
     },
+    socketInit() {
+      // Server settings are set on socket init
+      this.executeRebuild()
+    },
     initListeners() {
       window.addEventListener('resize', this.windowResize)
 
@@ -790,6 +794,7 @@ export default {
       })
 
       this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$on('socket_init', this.socketInit)
       this.$eventBus.$on('user-settings', this.settingsUpdated)
 
       if (this.$root.socket) {
@@ -821,6 +826,7 @@ export default {
       }
 
       this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$off('socket_init', this.socketInit)
       this.$eventBus.$off('user-settings', this.settingsUpdated)
 
       if (this.$root.socket) {

client/components/app/SideRail.vue

@@ -5,7 +5,9 @@
 
     <div id="siderail-buttons-container" role="navigation" aria-label="Library Navigation" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
       <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">home</span>
+        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
@@ -21,7 +23,9 @@
       </nuxt-link>
 
       <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">import_contacts</span>
+        <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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
@@ -29,7 +33,9 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">view_column</span>
+        <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="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+        </svg>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
@@ -53,7 +59,12 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">groups</span>
+        <svg class="w-6 h-6" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          />
+        </svg>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
 
@@ -105,7 +116,7 @@
     </div>
 
     <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
-      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1 cursor-pointer" @click="clickChangelog">v{{ $config.version }}</p>
+      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>

client/components/cards/AuthorCard.vue

@@ -71,6 +71,9 @@ export default {
     coverHeight() {
       return this.cardHeight
     },
+    userToken() {
+      return this.store.getters['user/getToken']
+    },
     _author() {
       return this.author || {}
     },

client/components/cards/BookMatchCard.vue

@@ -13,17 +13,9 @@
           <div class="grow" />
           <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
         </div>
-
-        <div class="flex items-center">
-          <div>
         <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">{{ $getString('LabelByAuthor', [book.author]) }}</p>
         <p v-if="book.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
         <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
-          </div>
-          <div class="grow" />
-          <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
-        </div>
-
         <div v-if="book.series?.length" class="flex py-1 -mx-1">
           <div v-for="(series, index) in book.series" :key="index" class="bg-white/10 rounded-full px-1 py-0.5 mx-1">
             <p class="leading-3 text-xs text-gray-400">

client/components/cards/EpisodeSearchCard.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-center h-full px-1 overflow-hidden">
-    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    <div class="grow px-2 episodeSearchCardContent">
-      <p class="truncate text-sm">{{ episodeTitle }}</p>
-      <p class="text-xs text-gray-200 truncate">{{ podcastTitle }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    },
-    episode: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    coverWidth() {
-      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
-      return 50
-    },
-    media() {
-      return this.libraryItem?.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    episodeTitle() {
-      return this.episode.title || 'No Title'
-    },
-    podcastTitle() {
-      return this.mediaMetadata.title || 'No Title'
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.episodeSearchCardContent {
-  width: calc(100% - 80px);
-  height: 75px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>

client/components/cards/ItemUploadCard.vue

@@ -62,24 +62,7 @@
     </widgets-alert>
 
     <div v-if="isNonInteractable" class="absolute top-0 left-0 w-full h-full bg-black/50 flex items-center justify-center z-20">
-      <ui-loading-indicator>
-        <div class="mb-4">
-          <span class="text-lg font-medium text-white">
-            {{ nonInteractionLabel }}
-          </span>
-        </div>
-
-        <div v-if="isUploading" class="w-64 mx-auto mb-2">
-          <div class="flex items-center justify-center mb-2">
-            <span class="text-sm font-medium text-white/60 text-center w-full">
-              {{ uploadProgressText }}
-            </span>
-          </div>
-          <div class="w-full bg-primary/20 rounded-full h-2.5">
-            <div class="bg-green-500 h-2.5 rounded-full transition-all duration-300 ease-out" :style="{ width: uploadProgressPercent + '%' }"></div>
-          </div>
-        </div>
-      </ui-loading-indicator>
+      <ui-loading-indicator :text="nonInteractionLabel" />
     </div>
   </div>
 </template>
@@ -108,11 +91,7 @@ export default {
       isUploading: false,
       uploadFailed: false,
       uploadSuccess: false,
-      isFetchingMetadata: false,
-      uploadProgress: {
-        loaded: 0,
-        total: 0
-      }
+      isFetchingMetadata: false
     }
   },
   computed: {
@@ -137,15 +116,6 @@ export default {
       } else if (this.isFetchingMetadata) {
         return this.$strings.LabelFetchingMetadata
       }
-    },
-    uploadProgressPercent() {
-      if (this.uploadProgress.total === 0) return 0
-      return Math.min(100, Math.round((this.uploadProgress.loaded / this.uploadProgress.total) * 100))
-    },
-    uploadProgressText() {
-      const loaded = this.$bytesPretty(this.uploadProgress.loaded)
-      const total = this.$bytesPretty(this.uploadProgress.total)
-      return `${this.uploadProgressPercent}% (${loaded} / ${total})`
     }
   },
   methods: {
@@ -153,21 +123,6 @@ export default {
       this.isUploading = status === 'uploading'
       this.uploadFailed = status === 'failed'
       this.uploadSuccess = status === 'success'
-
-      if (status !== 'uploading') {
-        this.uploadProgress = {
-          loaded: 0,
-          total: 0
-        }
-      }
-    },
-    setUploadProgress(progress) {
-      if (this.isUploading && progress) {
-        this.uploadProgress = {
-          loaded: progress.loaded || 0,
-          total: progress.total || 0
-        }
-      }
     },
     titleUpdated() {
       this.error = ''

client/components/cards/LazyBookCard.vue

@@ -78,7 +78,7 @@
         </div>
 
         <!-- Error widget -->
-        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" plaintext class="absolute bottom-4e left-0 z-10">
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
           <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
             <span class="material-symbols text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
           </div>
@@ -101,8 +101,7 @@
         <!-- Podcast Episode # -->
         <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
           <p :style="{ fontSize: 0.8 + 'em' }">
-            Episode
-            <span v-if="recentEpisodeNumber">#{{ recentEpisodeNumber }}</span>
+            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
           </p>
         </div>
 
@@ -121,12 +120,12 @@
     <!-- Alternative bookshelf title/author/sort -->
     <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
       <div :style="{ fontSize: 0.9 + 'em' }">
-        <ui-tooltip v-if="displayTitle" :text="displayTitle" plaintext :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
-      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" plaintext :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
         <p cy-id="subtitle" class="truncate" ref="displaySubtitle" :style="{ fontSize: 0.6 + 'em' }">{{ displaySubtitle }}</p>
       </ui-tooltip>
       <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
@@ -199,10 +198,7 @@ export default {
       return this.store.getters['user/getSizeMultiplier']
     },
     dateFormat() {
-      return this.store.getters['getServerSetting']('dateFormat')
-    },
-    timeFormat() {
-      return this.store.getters['getServerSetting']('timeFormat')
+      return this.store.state.serverSettings.dateFormat
     },
     _libraryItem() {
       return this.libraryItem || {}
@@ -349,18 +345,6 @@ export default {
         if (this.mediaMetadata.publishedYear) return this.$getString('LabelPublishedDate', [this.mediaMetadata.publishedYear])
         return '\u00A0'
       }
-      if (this.orderBy === 'progress') {
-        if (!this.userProgressLastUpdated) return '\u00A0'
-        return this.$getString('LabelLastProgressDate', [this.$formatDatetime(this.userProgressLastUpdated, this.dateFormat, this.timeFormat)])
-      }
-      if (this.orderBy === 'progress.createdAt') {
-        if (!this.userProgressStartedDate) return '\u00A0'
-        return this.$getString('LabelStartedDate', [this.$formatDatetime(this.userProgressStartedDate, this.dateFormat, this.timeFormat)])
-      }
-      if (this.orderBy === 'progress.finishedAt') {
-        if (!this.userProgressFinishedDate) return '\u00A0'
-        return this.$getString('LabelFinishedDate', [this.$formatDatetime(this.userProgressFinishedDate, this.dateFormat, this.timeFormat)])
-      }
       return null
     },
     episodeProgress() {
@@ -393,18 +377,6 @@ export default {
       let progressPercent = this.itemIsFinished ? 1 : this.booksInSeries ? this.seriesProgressPercent : this.useEBookProgress ? this.userProgress?.ebookProgress || 0 : this.userProgress?.progress || 0
       return Math.max(Math.min(1, progressPercent), 0)
     },
-    userProgressLastUpdated() {
-      if (!this.userProgress) return null
-      return this.userProgress.lastUpdate
-    },
-    userProgressStartedDate() {
-      if (!this.userProgress) return null
-      return this.userProgress.startedAt
-    },
-    userProgressFinishedDate() {
-      if (!this.userProgress) return null
-      return this.userProgress.finishedAt
-    },
     itemIsFinished() {
       if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false
@@ -788,11 +760,11 @@ export default {
     },
     showEditModalFiles() {
       // More menu func
-      this.$emit('edit', this.libraryItem, 'files')
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'files' })
     },
     showEditModalMatch() {
       // More menu func
-      this.$emit('edit', this.libraryItem, 'match')
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
     },
     sendToDevice(deviceName) {
       // More menu func

client/components/cards/LazySeriesCard.vue

@@ -71,7 +71,7 @@ export default {
       return this.height * this.sizeMultiplier
     },
     dateFormat() {
-      return this.store.getters['getServerSetting']('dateFormat')
+      return this.store.state.serverSettings.dateFormat
     },
     labelFontSize() {
       if (this.width < 160) return 0.75

client/components/controls/GlobalSearch.vue

@@ -39,15 +39,6 @@
             </li>
           </template>
 
-          <p v-if="episodeResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelEpisodes }}</p>
-          <template v-for="item in episodeResults">
-            <li :key="item.libraryItem.recentEpisode.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-episode-search-card :episode="item.libraryItem.recentEpisode" :library-item="item.libraryItem" />
-              </nuxt-link>
-            </li>
-          </template>
-
           <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
           <template v-for="item in authorResults">
             <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
@@ -109,7 +100,6 @@ export default {
       isFetching: false,
       search: null,
       podcastResults: [],
-      episodeResults: [],
       bookResults: [],
       authorResults: [],
       seriesResults: [],
@@ -125,7 +115,7 @@ export default {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length + this.episodeResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length
     }
   },
   methods: {
@@ -142,7 +132,6 @@ export default {
       this.search = null
       this.lastSearch = null
       this.podcastResults = []
-      this.episodeResults = []
       this.bookResults = []
       this.authorResults = []
       this.seriesResults = []
@@ -186,7 +175,6 @@ export default {
       if (!this.isFetching) return
 
       this.podcastResults = searchResults.podcast || []
-      this.episodeResults = searchResults.episodes || []
       this.bookResults = searchResults.book || []
       this.authorResults = searchResults.authors || []
       this.seriesResults = searchResults.series || []

client/components/controls/LibraryFilterSelect.vue

@@ -94,9 +94,6 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
-    userCanAccessExplicitContent() {
-      return this.$store.getters['user/getUserCanAccessExplicitContent']
-    },
     libraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -242,15 +239,6 @@ export default {
           sublist: false
         }
       ]
-
-      if (this.userCanAccessExplicitContent) {
-        items.push({
-          text: this.$strings.LabelExplicit,
-          value: 'explicit',
-          sublist: false
-        })
-      }
-
       if (this.userIsAdminOrUp) {
         items.push({
           text: this.$strings.LabelShareOpen,
@@ -261,7 +249,7 @@ export default {
       return items
     },
     podcastItems() {
-      const items = [
+      return [
         {
           text: this.$strings.LabelAll,
           value: 'all'
@@ -288,23 +276,8 @@ export default {
           text: this.$strings.ButtonIssues,
           value: 'issues',
           sublist: false
-        },
-        {
-          text: this.$strings.LabelRSSFeedOpen,
-          value: 'feed-open',
-          sublist: false
         }
       ]
-
-      if (this.userCanAccessExplicitContent) {
-        items.push({
-          text: this.$strings.LabelExplicit,
-          value: 'explicit',
-          sublist: false
-        })
-      }
-
-      return items
     },
     selectItems() {
       if (this.isSeries) return this.seriesItems
@@ -338,18 +311,6 @@ export default {
             const series = this.series.find((se) => se.id == decoded)
             if (series) filterValue = series.name
           }
-        } else if (parts[0] === 'progress') {
-          const item = this.progress.find((p) => p.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'tracks') {
-          const item = this.tracks.find((t) => t.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'ebooks') {
-          const item = this.ebooks.find((e) => e.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'missing') {
-          const item = this.missing.find((m) => m.id == decoded)
-          if (item) filterValue = item.name
         } else {
           filterValue = decoded
         }

client/components/controls/LibrarySortSelect.vue

@@ -7,7 +7,7 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="librarySortMenu absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
       <template v-for="item in selectItems">
         <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
           <div class="flex items-center">
@@ -130,18 +130,6 @@ export default {
           text: this.$strings.LabelFileModified,
           value: 'mtimeMs'
         },
-        {
-          text: this.$strings.LabelLibrarySortByProgress,
-          value: 'progress'
-        },
-        {
-          text: this.$strings.LabelLibrarySortByProgressStarted,
-          value: 'progress.createdAt'
-        },
-        {
-          text: this.$strings.LabelLibrarySortByProgressFinished,
-          value: 'progress.finishedAt'
-        },
         {
           text: this.$strings.LabelRandomly,
           value: 'random'
@@ -203,9 +191,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.librarySortMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>

client/components/covers/AuthorImage.vue

@@ -39,6 +39,9 @@ export default {
     }
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     _author() {
       return this.author || {}
     },

client/components/modals/AccountModal.vue

@@ -309,9 +309,9 @@ export default {
           } else {
             console.log('Account updated', data.user)
 
-            if (data.user.id === this.user.id && data.user.accessToken !== this.user.accessToken) {
-              console.log('Current user access token was updated')
-              this.$store.commit('user/setAccessToken', data.user.accessToken)
+            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
+              console.log('Current user token was updated')
+              this.$store.commit('user/setUserToken', data.user.token)
             }
 
             this.$toast.success(this.$strings.ToastAccountUpdateSuccess)
@@ -351,6 +351,9 @@ export default {
           this.$toast.error(errMsg || 'Failed to create account')
         })
     },
+    toggleActive() {
+      this.newUser.isActive = !this.newUser.isActive
+    },
     userTypeUpdated(type) {
       this.newUser.permissions = {
         download: type !== 'guest',

client/components/modals/ApiKeyCreatedModal.vue

@@ -1,60 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="api-key-created" :width="800" :height="'unset'" persistent>
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 200px; max-height: 80vh">
-        <div class="w-full p-8">
-          <p class="text-lg text-white mb-4">{{ $getString('LabelApiKeyCreated', [apiKeyName]) }}</p>
-
-          <p class="text-lg text-white mb-4">{{ $strings.LabelApiKeyCreatedDescription }}</p>
-
-          <ui-text-input label="API Key" :value="apiKeyKey" readonly show-copy />
-
-          <div class="flex justify-end mt-4">
-            <ui-btn color="bg-primary" @click="show = false">{{ $strings.ButtonClose }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    apiKey: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return this.$strings.HeaderNewApiKey
-    },
-    apiKeyName() {
-      return this.apiKey?.name || ''
-    },
-    apiKeyKey() {
-      return this.apiKey?.apiKey || ''
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>

client/components/modals/ApiKeyModal.vue

@@ -1,198 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="api-key" :width="800" :height="'unset'" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
-        <div class="w-full p-8">
-          <div class="flex py-2">
-            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newApiKey.name" :readonly="!isNew" :label="$strings.LabelName" />
-            </div>
-            <div v-if="isNew" class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newApiKey.expiresIn" :label="$strings.LabelExpiresInSeconds" type="number" :min="0" />
-            </div>
-          </div>
-          <div class="flex items-center pt-4 pb-2 gap-2">
-            <div class="flex items-center px-2">
-              <p class="px-3 font-semibold" id="user-enabled-toggle">{{ $strings.LabelEnable }}</p>
-              <ui-toggle-switch :disabled="isExpired && !apiKey.isActive" labeledBy="user-enabled-toggle" v-model="newApiKey.isActive" />
-            </div>
-            <div v-if="isExpired" class="px-2">
-              <p class="text-sm text-error">{{ $strings.LabelExpired }}</p>
-            </div>
-          </div>
-
-          <div class="w-full border-t border-b border-black-200 py-4 px-3 mt-4">
-            <p class="text-lg mb-2 font-semibold">{{ $strings.LabelApiKeyUser }}</p>
-            <p class="text-sm mb-2 text-gray-400">{{ $strings.LabelApiKeyUserDescription }}</p>
-            <ui-select-input v-model="newApiKey.userId" :disabled="isExpired && !apiKey.isActive" :items="userItems" :placeholder="$strings.LabelSelectUser" :label="$strings.LabelApiKeyUser" label-hidden />
-          </div>
-
-          <div class="flex pt-4 px-2">
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    apiKey: {
-      type: Object,
-      default: () => null
-    },
-    users: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      processing: false,
-      newApiKey: {},
-      isNew: true
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return this.isNew ? this.$strings.HeaderNewApiKey : this.$strings.HeaderUpdateApiKey
-    },
-    userItems() {
-      return this.users
-        .filter((u) => {
-          // Only show root user if the current user is root
-          return u.type !== 'root' || this.$store.getters['user/getIsRoot']
-        })
-        .map((u) => ({ text: u.username, value: u.id, subtext: u.type }))
-    },
-    isExpired() {
-      if (!this.apiKey || !this.apiKey.expiresAt) return false
-
-      return new Date(this.apiKey.expiresAt).getTime() < Date.now()
-    }
-  },
-  methods: {
-    submitForm() {
-      if (!this.newApiKey.name) {
-        this.$toast.error(this.$strings.ToastNameRequired)
-        return
-      }
-
-      if (!this.newApiKey.userId) {
-        this.$toast.error(this.$strings.ToastNewApiKeyUserError)
-        return
-      }
-
-      if (this.isNew) {
-        this.submitCreateApiKey()
-      } else {
-        this.submitUpdateApiKey()
-      }
-    },
-    submitUpdateApiKey() {
-      if (this.newApiKey.isActive === this.apiKey.isActive && this.newApiKey.userId === this.apiKey.userId) {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
-        this.show = false
-        return
-      }
-
-      const apiKey = {
-        isActive: this.newApiKey.isActive,
-        userId: this.newApiKey.userId
-      }
-
-      this.processing = true
-      this.$axios
-        .$patch(`/api/api-keys/${this.apiKey.id}`, apiKey)
-        .then((data) => {
-          this.processing = false
-          if (data.error) {
-            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
-          } else {
-            this.show = false
-            this.$emit('updated', data.apiKey)
-          }
-        })
-        .catch((error) => {
-          this.processing = false
-          console.error('Failed to update apiKey', error)
-          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
-        })
-    },
-    submitCreateApiKey() {
-      const apiKey = { ...this.newApiKey }
-
-      if (this.newApiKey.expiresIn) {
-        apiKey.expiresIn = parseInt(this.newApiKey.expiresIn)
-      } else {
-        delete apiKey.expiresIn
-      }
-
-      this.processing = true
-      this.$axios
-        .$post('/api/api-keys', apiKey)
-        .then((data) => {
-          this.processing = false
-          if (data.error) {
-            this.$toast.error(this.$strings.ToastFailedToCreate + ': ' + data.error)
-          } else {
-            this.show = false
-            this.$emit('created', data.apiKey)
-          }
-        })
-        .catch((error) => {
-          this.processing = false
-          console.error('Failed to create apiKey', error)
-          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToCreate)
-        })
-    },
-    init() {
-      this.isNew = !this.apiKey
-
-      if (this.apiKey) {
-        this.newApiKey = {
-          name: this.apiKey.name,
-          isActive: this.apiKey.isActive,
-          userId: this.apiKey.userId
-        }
-      } else {
-        this.newApiKey = {
-          name: null,
-          expiresIn: null,
-          isActive: true,
-          userId: null
-        }
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/BatchQuickMatchModel.vue

@@ -88,7 +88,7 @@ export default {
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
-      return this.$store.state.scanners.bookProviders
+      return this.$store.state.scanners.providers
     },
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
@@ -96,9 +96,6 @@ export default {
   },
   methods: {
     init() {
-      // Fetch providers when modal is shown
-      this.$store.dispatch('scanners/fetchProviders')
-
       // If we don't have a set provider (first open of dialog) or we've switched library, set
       // the selected provider to the current library default provider
       if (!this.options.provider || this.lastUsedLibrary != this.currentLibraryId) {
@@ -130,7 +127,8 @@ export default {
           this.show = false
         })
     }
-  }
+  },
+  mounted() {}
 }
 </script>
 

client/components/modals/BookmarksModal.vue

@@ -79,10 +79,10 @@ export default {
       return !this.bookmarks.find((bm) => Math.abs(this.currentTime - bm.time) < 1)
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/components/modals/EditSeriesInputInnerModal.vue

@@ -14,7 +14,6 @@
               <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
             </div>
           </div>
-          <div v-if="error" class="text-error text-sm mt-2 p-1">{{ error }}</div>
           <div class="flex justify-end mt-2 p-1">
             <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
@@ -35,17 +34,12 @@ export default {
     existingSeriesNames: {
       type: Array,
       default: () => []
-    },
-    originalSeriesSequence: {
-      type: String,
-      default: null
     }
   },
   data() {
     return {
       el: null,
-      content: null,
-      error: null
+      content: null
     }
   },
   watch: {
@@ -91,17 +85,10 @@ export default {
       }
     },
     submitSeriesForm() {
-      this.error = null
-
       if (this.$refs.newSeriesSelect) {
         this.$refs.newSeriesSelect.blur()
       }
 
-      if (this.selectedSeries.sequence !== this.originalSeriesSequence && this.selectedSeries.sequence.includes(' ')) {
-        this.error = this.$strings.MessageSeriesSequenceCannotContainSpaces
-        return
-      }
-
       this.$emit('submit')
     },
     clickClose() {
@@ -113,7 +100,6 @@ export default {
       }
     },
     setShow() {
-      this.error = null
       if (!this.el || !this.content) {
         this.init()
       }

client/components/modals/ListeningSessionModal.vue

@@ -81,7 +81,7 @@
         </div>
         <div class="w-full md:w-1/3">
           <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ username }}</p>
+          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
 
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>
@@ -132,9 +132,6 @@ export default {
     _session() {
       return this.session || {}
     },
-    username() {
-      return this._session.user?.username || this._session.userId || ''
-    },
     deviceInfo() {
       return this._session.deviceInfo || {}
     },
@@ -162,10 +159,10 @@ export default {
       return 'Unknown'
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     },
     isOpenSession() {
       return !!this._session.open

client/components/modals/Modal.vue

@@ -23,7 +23,7 @@ export default {
     processing: Boolean,
     persistent: {
       type: Boolean,
-      default: false
+      default: true
     },
     width: {
       type: [String, Number],
@@ -99,7 +99,7 @@ export default {
         this.preventClickoutside = false
         return
       }
-      if (this.processing || this.persistent) return
+      if (this.processing && this.persistent) return
       if (ev.srcElement && ev.srcElement.classList.contains('modal-bg')) {
         this.show = false
       }

client/components/modals/ShareModal.vue

@@ -144,7 +144,7 @@ export default {
     expirationDateString() {
       if (!this.expireDurationSeconds) return this.$strings.LabelPermanent
       const dateMs = Date.now() + this.expireDurationSeconds * 1000
-      return this.$formatDatetime(dateMs, this.$store.getters['getServerSetting']('dateFormat'), this.$store.getters['getServerSetting']('timeFormat'))
+      return this.$formatDatetime(dateMs, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat)
     }
   },
   methods: {

client/components/modals/changelog/ViewModal.vue

@@ -40,7 +40,7 @@ export default {
       }
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     releasesToShow() {
       return this.versionData?.releasesToShow || []

client/components/modals/collections/AddCreateModal.vue

@@ -227,7 +227,7 @@ export default {
         .catch((error) => {
           console.error('Failed to create collection', error)
           var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg)
+          this.$toast.error(this.$strings.ToastCollectionCreateFailed + ': ' + errMsg)
           this.processing = false
         })
     }

client/components/modals/item/tabs/Cover.vue

@@ -51,21 +51,19 @@
     <form @submit.prevent="submitSearchForm">
       <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
         <div class="w-48 grow p-1">
-          <ui-dropdown v-model="provider" :items="providers" :disabled="searchInProgress" :label="$strings.LabelProvider" small />
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
         <div class="w-72 grow p-1">
-          <ui-text-input-with-label v-model="searchTitle" :disabled="searchInProgress" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
         </div>
         <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 grow p-1">
-          <ui-text-input-with-label v-model="searchAuthor" :disabled="searchInProgress" :label="$strings.LabelAuthor" />
+          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn v-if="!searchInProgress" class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
-        <ui-btn v-else class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="button" color="bg-error" @click.prevent="cancelCurrentSearch">{{ $strings.ButtonCancel }}</ui-btn>
+        <ui-btn class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
     <div v-if="hasSearched" class="flex items-center flex-wrap justify-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
-      <p v-if="searchInProgress && !coversFound.length" class="text-gray-300 py-4">{{ $strings.MessageLoading }}</p>
-      <p v-else-if="!searchInProgress && !coversFound.length" class="text-gray-300 py-4">{{ $strings.MessageNoCoversFound }}</p>
+      <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
       <template v-for="cover in coversFound">
         <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
@@ -107,10 +105,7 @@ export default {
       showLocalCovers: false,
       previewUpload: null,
       selectedFile: null,
-      provider: 'google',
-      currentSearchRequestId: null,
-      searchInProgress: false,
-      socketListenersActive: false
+      provider: 'google'
     }
   },
   watch: {
@@ -133,8 +128,8 @@ export default {
       }
     },
     providers() {
-      if (this.isPodcast) return this.$store.state.scanners.podcastCoverProviders
-      return this.$store.state.scanners.bookCoverProviders
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return [{ text: 'All', value: 'all' }, ...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
     },
     searchTitleLabel() {
       if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@@ -191,9 +186,6 @@ export default {
           _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
           return _file
         })
-    },
-    socket() {
-      return this.$root.socket
     }
   },
   methods: {
@@ -243,19 +235,7 @@ export default {
       this.searchTitle = this.mediaMetadata.title || ''
       this.searchAuthor = this.mediaMetadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else {
-        // Migrate from 'all' to 'best' (only once)
-        const migrationKey = 'book-cover-provider-migrated'
-        const currentProvider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
-
-        if (!localStorage.getItem(migrationKey) && currentProvider === 'all') {
-          localStorage.setItem('book-cover-provider', 'best')
-          localStorage.setItem(migrationKey, 'true')
-          this.provider = 'best'
-        } else {
-          this.provider = currentProvider
-        }
-      }
+      else this.provider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
     },
     removeCover() {
       if (!this.coverPath) {
@@ -311,116 +291,22 @@ export default {
         console.error('PersistProvider', error)
       }
     },
-    generateRequestId() {
-      return `cover-search-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-    },
-    addSocketListeners() {
-      if (!this.socket || this.socketListenersActive) return
-
-      this.socket.on('cover_search_result', this.handleSearchResult)
-      this.socket.on('cover_search_complete', this.handleSearchComplete)
-      this.socket.on('cover_search_error', this.handleSearchError)
-      this.socket.on('cover_search_provider_error', this.handleProviderError)
-      this.socket.on('cover_search_cancelled', this.handleSearchCancelled)
-      this.socket.on('disconnect', this.handleSocketDisconnect)
-      this.socketListenersActive = true
-    },
-    removeSocketListeners() {
-      if (!this.socket || !this.socketListenersActive) return
-
-      this.socket.off('cover_search_result', this.handleSearchResult)
-      this.socket.off('cover_search_complete', this.handleSearchComplete)
-      this.socket.off('cover_search_error', this.handleSearchError)
-      this.socket.off('cover_search_provider_error', this.handleProviderError)
-      this.socket.off('cover_search_cancelled', this.handleSearchCancelled)
-      this.socket.off('disconnect', this.handleSocketDisconnect)
-      this.socketListenersActive = false
-    },
-    handleSearchResult(data) {
-      if (data.requestId !== this.currentSearchRequestId) return
-
-      // Add new covers to the list (avoiding duplicates)
-      const newCovers = data.covers.filter((cover) => !this.coversFound.includes(cover))
-      this.coversFound.push(...newCovers)
-    },
-    handleSearchComplete(data) {
-      if (data.requestId !== this.currentSearchRequestId) return
-
-      this.searchInProgress = false
-      this.currentSearchRequestId = null
-    },
-    handleSearchError(data) {
-      if (data.requestId !== this.currentSearchRequestId) return
-
-      console.error('[Cover Search] Search error:', data.error)
-      this.$toast.error(this.$strings.ToastCoverSearchFailed)
-      this.searchInProgress = false
-      this.currentSearchRequestId = null
-    },
-    handleProviderError(data) {
-      if (data.requestId !== this.currentSearchRequestId) return
-
-      console.warn(`[Cover Search] Provider ${data.provider} failed:`, data.error)
-    },
-    handleSearchCancelled(data) {
-      if (data.requestId !== this.currentSearchRequestId) return
-
-      this.searchInProgress = false
-      this.currentSearchRequestId = null
-    },
-    handleSocketDisconnect() {
-      // If we were in the middle of a search, cancel it (server can't send results anymore)
-      if (this.searchInProgress && this.currentSearchRequestId) {
-        this.searchInProgress = false
-        this.currentSearchRequestId = null
-      }
-    },
-    cancelCurrentSearch() {
-      if (!this.currentSearchRequestId || !this.socket?.connected) {
-        console.error('[Cover Search] Socket not connected')
-        this.$toast.error(this.$strings.ToastConnectionNotAvailable)
-        return
-      }
-
-      this.socket.emit('cancel_cover_search', this.currentSearchRequestId)
-      this.currentSearchRequestId = null
-      this.searchInProgress = false
-    },
     async submitSearchForm() {
-      if (!this.socket?.connected) {
-        console.error('[Cover Search] Socket not connected')
-        this.$toast.error(this.$strings.ToastConnectionNotAvailable)
-        return
-      }
-
-      // Cancel any existing search
-      if (this.searchInProgress) {
-        this.cancelCurrentSearch()
-      }
-
       // Store provider in local storage
       this.persistProvider()
 
-      // Setup socket listeners if not already done
-      this.addSocketListeners()
-
-      // Clear previous results
-      this.coversFound = []
-      this.hasSearched = true
-      this.searchInProgress = true
-
-      // Generate unique request ID
-      const requestId = this.generateRequestId()
-      this.currentSearchRequestId = requestId
-
-      // Emit search request via WebSocket
-      this.socket.emit('search_covers', {
-        requestId,
-        title: this.searchTitle,
-        author: this.searchAuthor || '',
-        provider: this.provider,
-        podcast: this.isPodcast
+      this.isProcessing = true
+      const searchQuery = this.getSearchQuery()
+      const results = await this.$axios
+        .$get(`/api/search/covers?${searchQuery}`)
+        .then((res) => res.results)
+        .catch((error) => {
+          console.error('Failed', error)
+          return []
         })
+      this.coversFound = results
+      this.isProcessing = false
+      this.hasSearched = true
     },
     setCover(coverFile) {
       this.isProcessing = true
@@ -434,20 +320,6 @@ export default {
           this.isProcessing = false
         })
     }
-  },
-  mounted() {
-    // Setup socket listeners when component is mounted
-    this.addSocketListeners()
-    // Fetch providers if not already loaded
-    this.$store.dispatch('scanners/fetchProviders')
-  },
-  beforeDestroy() {
-    // Cancel any ongoing search when component is destroyed
-    if (this.searchInProgress) {
-      this.cancelCurrentSearch()
-    }
-    // Remove socket listeners
-    this.removeSocketListeners()
   }
 }
 </script>

client/components/modals/item/tabs/Files.vue

@@ -29,6 +29,9 @@ export default {
     media() {
       return this.libraryItem.media || {}
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },

client/components/modals/item/tabs/Match.vue

@@ -2,7 +2,7 @@
   <div id="match-wrapper" class="w-full h-full overflow-hidden px-2 md:px-4 py-4 md:py-6 relative">
     <form @submit.prevent="submitSearch">
       <div class="flex flex-wrap md:flex-nowrap items-center justify-start -mx-1">
-        <div v-if="providersLoaded" class="w-36 px-1">
+        <div class="w-36 px-1">
           <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
         <div class="grow md:w-72 px-1">
@@ -77,8 +77,8 @@
           <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
-            <p v-if="mediaMetadata.authorName || (isPodcast && mediaMetadata.author)" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', isPodcast ? mediaMetadata.author : mediaMetadata.authorName)">{{ isPodcast ? mediaMetadata.author : mediaMetadata.authorName }}</a>
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white/60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', mediaMetadata.authorName)">{{ mediaMetadata.authorName }}</a>
             </p>
           </div>
         </div>
@@ -87,7 +87,7 @@
           <div class="grow ml-4">
             <ui-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
             <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('narrator', mediaMetadata.narrators)">{{ mediaMetadata.narratorName }}</a>
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('narrator', mediaMetadata.narrators)">{{ mediaMetadata.narratorName }}</a>
             </p>
           </div>
         </div>
@@ -96,7 +96,7 @@
           <div class="grow ml-4">
             <ui-rich-text-editor v-model="selectedMatch.description" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
             <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.descriptionPlain.substr(0, 100) + (mediaMetadata.descriptionPlain.length > 100 ? '...' : '') }}</a>
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.descriptionPlain.substr(0, 100) + (mediaMetadata.descriptionPlain.length > 100 ? '...' : '') }}</a>
             </p>
           </div>
         </div>
@@ -105,7 +105,7 @@
           <div class="grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" :label="$strings.LabelPublisher" />
             <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publisher', mediaMetadata.publisher)">{{ mediaMetadata.publisher }}</a>
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publisher', mediaMetadata.publisher)">{{ mediaMetadata.publisher }}</a>
             </p>
           </div>
         </div>
@@ -114,7 +114,7 @@
           <div class="grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" :label="$strings.LabelPublishYear" />
             <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publishedYear', mediaMetadata.publishedYear)">{{ mediaMetadata.publishedYear }}</a>
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publishedYear', mediaMetadata.publishedYear)">{{ mediaMetadata.publishedYear }}</a>
             </p>
           </div>
         </div>
@@ -253,7 +253,6 @@ export default {
       hasSearched: false,
       selectedMatch: null,
       selectedMatchOrig: null,
-      waitingForProviders: false,
       selectedMatchUsage: {
         title: true,
         subtitle: true,
@@ -286,19 +285,9 @@ export default {
       handler(newVal) {
         if (newVal) this.init()
       }
-    },
-    providersLoaded(isLoaded) {
-      // Complete initialization once providers are loaded
-      if (isLoaded && this.waitingForProviders) {
-        this.waitingForProviders = false
-        this.initProviderAndSearch()
-      }
     }
   },
   computed: {
-    providersLoaded() {
-      return this.$store.getters['scanners/areProvidersLoaded']
-    },
     isProcessing: {
       get() {
         return this.processing
@@ -330,7 +319,7 @@ export default {
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
-      return this.$store.state.scanners.bookProviders
+      return this.$store.state.scanners.providers
     },
     searchTitleLabel() {
       if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@@ -411,9 +400,7 @@ export default {
         this.$toast.warning(this.$strings.ToastTitleRequired)
         return
       }
-      if (!this.isPodcast) {
       this.persistProvider()
-      }
       this.runSearch()
     },
     async runSearch() {
@@ -489,24 +476,6 @@ export default {
 
       this.checkboxToggled()
     },
-    initProviderAndSearch() {
-      // Set provider based on media type
-      if (this.isPodcast) {
-        this.provider = 'itunes'
-      } else {
-        this.provider = this.getDefaultBookProvider()
-      }
-
-      // Prefer using ASIN if set and using audible provider
-      if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
-        this.searchTitle = this.libraryItem.media.metadata.asin
-        this.searchAuthor = ''
-      }
-
-      if (this.searchTitle) {
-        this.submitSearch()
-      }
-    },
     init() {
       this.clearSelectedMatch()
       this.initSelectedMatchUsage()
@@ -524,13 +493,19 @@ export default {
       }
       this.searchTitle = this.libraryItem.media.metadata.title
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
+      if (this.isPodcast) this.provider = 'itunes'
+      else {
+        this.provider = this.getDefaultBookProvider()
+      }
 
-      // Wait for providers to be loaded before setting provider and searching
-      if (this.providersLoaded || this.isPodcast) {
-        this.waitingForProviders = false
-        this.initProviderAndSearch()
-      } else {
-        this.waitingForProviders = true
+      // Prefer using ASIN if set and using audible provider
+      if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
+        this.searchTitle = this.libraryItem.media.metadata.asin
+        this.searchAuthor = ''
+      }
+
+      if (this.searchTitle) {
+        this.submitSearch()
       }
     },
     selectMatch(match) {
@@ -660,10 +635,6 @@ export default {
       this.selectedMatch = null
       this.selectedMatchOrig = null
     }
-  },
-  mounted() {
-    // Fetch providers if not already loaded
-    this.$store.dispatch('scanners/fetchProviders')
   }
 }
 </script>

client/components/modals/item/tabs/Tools.vue

@@ -107,7 +107,6 @@ export default {
     quickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
-        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/modals/libraries/EditLibrary.vue

@@ -74,7 +74,7 @@ export default {
     },
     providers() {
       if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
-      return this.$store.state.scanners.bookProviders
+      return this.$store.state.scanners.providers
     }
   },
   methods: {
@@ -156,8 +156,6 @@ export default {
   },
   mounted() {
     this.init()
-    // Fetch providers if not already loaded
-    this.$store.dispatch('scanners/fetchProviders')
   }
 }
 </script>

client/components/modals/libraries/LibrarySettings.vue

@@ -104,6 +104,7 @@ export default {
   },
   data() {
     return {
+      provider: null,
       useSquareBookCovers: false,
       enableWatcher: false,
       skipMatchingMediaWithAsin: false,
@@ -133,6 +134,10 @@ export default {
     isPodcastLibrary() {
       return this.mediaType === 'podcast'
     },
+    providers() {
+      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
     maskAsFinishedWhenItems() {
       return [
         {

client/components/modals/playlists/AddCreateModal.vue

@@ -97,10 +97,7 @@ export default {
             ...playlist
           }
         })
-        .sort((a, b) => {
-          if (a.isItemIncluded !== b.isItemIncluded) return a.isItemIncluded ? -1 : 1
-          return a.name.localeCompare(b.name)
-        })
+        .sort((a, b) => (a.isItemIncluded ? -1 : 1))
     },
     isBatch() {
       return this.selectedPlaylistItems.length > 1

client/components/modals/podcast/EpisodeFeed.vue

@@ -35,14 +35,7 @@
               <widgets-podcast-type-indicator :type="episode.episodeType" />
             </div>
             <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
-            <div class="flex items-center space-x-2">
-              <!-- published -->
-              <p class="text-xs text-gray-300 w-40">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
-              <!-- duration -->
-              <p v-if="episode.durationSeconds && !isNaN(episode.durationSeconds)" class="text-xs text-gray-300 min-w-28">{{ $strings.LabelDuration }}: {{ $elapsedPretty(episode.durationSeconds) }}</p>
-              <!-- size -->
-              <p v-if="episode.enclosure?.length && !isNaN(episode.enclosure.length) && Number(episode.enclosure.length) > 0" class="text-xs text-gray-300">{{ $strings.LabelSize }}: {{ $bytesPretty(Number(episode.enclosure.length)) }}</p>
-            </div>
+            <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>
         </div>
       </div>
@@ -251,8 +244,8 @@ export default {
       const sizeInMb = payloadSize / 1024 / 1024
       const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
       console.log('Request size', sizeInMb)
-      if (sizeInMb > 9.99) {
-        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 10Mb`)
+      if (sizeInMb > 4.99) {
+        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
       }
 
       this.processing = true

client/components/modals/podcast/RemoveEpisode.vue

@@ -11,7 +11,7 @@
           {{ $getString('MessageConfirmRemoveEpisode', [episodeTitle]) }}
         </p>
         <p v-else class="text-lg text-gray-200 mb-4">{{ $getString('MessageConfirmRemoveEpisodes', [episodes.length]) }}</p>
-        <p class="text-xs font-semibold text-warning/90">{{ $strings.MessageConfirmRemoveEpisodeNote }}</p>
+        <p class="text-xs font-semibold text-warning/90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
       </div>
       <div class="flex justify-between items-center pt-4">
         <ui-checkbox v-model="hardDeleteFile" :label="$strings.LabelHardDeleteFile" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
@@ -94,6 +94,7 @@ export default {
       }
 
       this.processing = false
+      this.$toast.success(`${this.episodes.length} episode${this.episodes.length > 1 ? 's' : ''} removed`)
       this.show = false
       this.$emit('clearSelected')
     }

client/components/modals/podcast/ViewEpisode.vue

@@ -16,7 +16,7 @@
         </div>
       </div>
       <p dir="auto" class="text-lg font-semibold mb-6">{{ title }}</p>
-      <div v-if="description" dir="auto" class="default-style less-spacing" @click="handleDescriptionClick" v-html="description" />
+      <div v-if="description" dir="auto" class="default-style less-spacing" v-html="description" />
       <p v-else class="mb-2">{{ $strings.MessageNoDescription }}</p>
 
       <div class="w-full h-px bg-white/5 my-4" />
@@ -34,12 +34,6 @@
             {{ audioFileSize }}
           </p>
         </div>
-        <div class="grow">
-          <p class="font-semibold text-xs mb-1">{{ $strings.LabelDuration }}</p>
-          <p class="mb-2 text-xs">
-            {{ audioFileDuration }}
-          </p>
-        </div>
       </div>
     </div>
   </modals-modal>
@@ -74,7 +68,7 @@ export default {
       return this.episode.title || 'No Episode Title'
     },
     description() {
-      return this.parseDescription(this.episode.description || '')
+      return this.episode.description || ''
     },
     media() {
       return this.libraryItem?.media || {}
@@ -96,49 +90,11 @@ export default {
 
       return this.$bytesPretty(size)
     },
-    audioFileDuration() {
-      const duration = this.episode.duration || 0
-      return this.$elapsedPretty(duration)
-    },
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     }
   },
-  methods: {
-    handleDescriptionClick(e) {
-      if (e.target.matches('span.time-marker')) {
-        const time = parseInt(e.target.dataset.time)
-        if (!isNaN(time)) {
-          this.$eventBus.$emit('play-item', {
-            episodeId: this.episodeId,
-            libraryItemId: this.libraryItem.id,
-            startTime: time
-          })
-        }
-        e.preventDefault()
-      }
-    },
-    parseDescription(description) {
-      const timeMarkerLinkRegex = /<a href="#([^"]*?\b\d{1,2}:\d{1,2}(?::\d{1,2})?)">(.*?)<\/a>/g
-      const timeMarkerRegex = /\b\d{1,2}:\d{1,2}(?::\d{1,2})?\b/g
-
-      function convertToSeconds(time) {
-        const timeParts = time.split(':').map(Number)
-        return timeParts.reduce((acc, part, index) => acc * 60 + part, 0)
-      }
-
-      return description
-        .replace(timeMarkerLinkRegex, (match, href, displayTime) => {
-          const time = displayTime.match(timeMarkerRegex)[0]
-          const seekTimeInSeconds = convertToSeconds(time)
-          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${displayTime}</span>`
-        })
-        .replace(timeMarkerRegex, (match) => {
-          const seekTimeInSeconds = convertToSeconds(match)
-          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${match}</span>`
-        })
-    }
-  },
+  methods: {},
   mounted() {}
 }
 </script>

client/components/modals/podcast/tabs/EpisodeMatch.vue

@@ -114,7 +114,7 @@ export default {
         .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatePayload)
         .then(() => {
           this.isProcessing = false
-          this.$toast.success(this.$strings.ToastPodcastEpisodeUpdated)
+          this.$toast.success('Podcast episode updated')
           this.$emit('selectTab', 'details')
         })
         .catch((error) => {

client/components/player/PlayerPlaybackControls.vue

@@ -8,7 +8,7 @@
           </button>
         </ui-tooltip>
         <ui-tooltip direction="top" :text="jumpBackwardText">
-          <button :aria-label="jumpBackwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
             <span class="material-symbols text-2xl sm:text-3xl">replay</span>
           </button>
         </ui-tooltip>

client/components/player/PlayerUi.vue

@@ -129,6 +129,9 @@ export default {
         return `${hoursRounded}h`
       }
     },
+    token() {
+      return this.$store.getters['user/getToken']
+    },
     timeRemaining() {
       if (this.useChapterTrack && this.currentChapter) {
         var currChapTime = this.currentTime - this.currentChapter.start

client/components/prompt/Confirm.vue

@@ -3,8 +3,7 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-linear-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p v-if="allowHtmlMessage" id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="sanitizedMessage" />
-        <p v-else id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1">{{ message }}</p>
+        <p id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />
 
         <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
 
@@ -53,17 +52,6 @@ export default {
     message() {
       return this.confirmPromptOptions.message || ''
     },
-    allowHtmlMessage() {
-      return !!this.confirmPromptOptions.allowHtml
-    },
-    sanitizedMessage() {
-      if (!this.allowHtmlMessage) return this.message
-
-      return this.escapeHtml(this.message)
-        .replace(/&lt;br\s*\/?&gt;/gi, '<br>')
-        .replace(/&lt;code&gt;/gi, '<code>')
-        .replace(/&lt;\/code&gt;/gi, '</code>')
-    },
     callback() {
       return this.confirmPromptOptions.callback
     },
@@ -115,14 +103,6 @@ export default {
       if (this.callback) this.callback(true, this.checkboxValue)
       this.show = false
     },
-    escapeHtml(value) {
-      return String(value)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-    },
     setShow() {
       this.checkboxValue = this.checkboxDefaultValue
       this.$eventBus.$emit('showing-prompt', true)

client/components/readers/ComicReader.vue

@@ -104,6 +104,9 @@ export default {
     }
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     libraryItemId() {
       return this.libraryItem?.id
     },
@@ -231,7 +234,10 @@ export default {
     async extract() {
       this.loading = true
       var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob'
+        responseType: 'blob',
+        headers: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
       const archive = await Archive.open(buff)
       const originalFilesObject = await archive.getFilesObject()

client/components/readers/EpubReader.vue

@@ -57,6 +57,9 @@ export default {
     }
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     /** @returns {string} */
     libraryItemId() {
       return this.libraryItem?.id
@@ -94,37 +97,27 @@ export default {
     },
     ebookUrl() {
       if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+        return `${this.$config.routerBasePath}/api/items/${this.libraryItemId}/ebook/${this.fileId}`
       }
-      return `/api/items/${this.libraryItemId}/ebook`
+      return `${this.$config.routerBasePath}/api/items/${this.libraryItemId}/ebook`
     },
     themeRules() {
-      const theme = this.ereaderSettings.theme
-      const isDark = theme === 'dark'
-      const isSepia = theme === 'sepia'
-
-      const fontColor = isDark
-        ? '#fff'
-        : isSepia
-        ? '#5b4636'
-        : '#000'
-
-      const backgroundColor = isDark
-        ? 'rgb(35 35 35)'
-        : isSepia
-        ? 'rgb(244, 236, 216)'
-        : 'rgb(255, 255, 255)'
+      const isDark = this.ereaderSettings.theme === 'dark'
+      const fontColor = isDark ? '#fff' : '#000'
+      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
 
       const lineSpacing = this.ereaderSettings.lineSpacing / 100
+
       const fontScale = this.ereaderSettings.fontScale / 100
+
       const textStroke = this.ereaderSettings.textStroke / 100
 
       return {
         '*': {
           color: `${fontColor}!important`,
           'background-color': `${backgroundColor}!important`,
-          'line-height': `${lineSpacing * fontScale}rem!important`,
-          '-webkit-text-stroke': `${textStroke}px ${fontColor}!important`
+          'line-height': lineSpacing * fontScale + 'rem!important',
+          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
         },
         a: {
           color: `${fontColor}!important`
@@ -316,24 +309,14 @@ export default {
       /** @type {EpubReader} */
       const reader = this
 
-      // Use axios to make request because we have token refresh logic in interceptor
-      const customRequest = async (url) => {
-        try {
-          return this.$axios.$get(url, {
-            responseType: 'arraybuffer'
-          })
-        } catch (error) {
-          console.error('EpubReader.initEpub customRequest failed:', error)
-          throw error
-        }
-      }
-
       /** @type {ePub.Book} */
       reader.book = new ePub(reader.ebookUrl, {
         width: this.readerWidth,
         height: this.readerHeight - 50,
         openAs: 'epub',
-        requestMethod: customRequest
+        requestHeaders: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
 
       /** @type {ePub.Rendition} */
@@ -354,8 +337,7 @@ export default {
         this.applyTheme()
       })
 
-      reader.book.ready
-        .then(() => {
+      reader.book.ready.then(() => {
         // set up event listeners
         reader.rendition.on('relocated', reader.relocated)
         reader.rendition.on('keydown', reader.keyUp)
@@ -378,9 +360,6 @@ export default {
         }
         this.getChapters()
       })
-        .catch((error) => {
-          console.error('EpubReader.initEpub failed:', error)
-        })
     },
     getChapters() {
       // Load the list of chapters in the book. See https://github.com/futurepress/epub.js/issues/759

client/components/readers/MobiReader.vue

@@ -26,6 +26,9 @@ export default {
     return {}
   },
   computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     libraryItemId() {
       return this.libraryItem?.id
     },
@@ -93,8 +96,11 @@ export default {
     },
     async initMobi() {
       // Fetch mobi file as blob
-      const buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob'
+      var buff = await this.$axios.$get(this.ebookUrl, {
+        responseType: 'blob',
+        headers: {
+          Authorization: `Bearer ${this.userToken}`
+        }
       })
       var reader = new FileReader()
       reader.onload = async (event) => {

client/components/readers/PdfReader.vue

@@ -55,8 +55,7 @@ export default {
       loadedRatio: 0,
       page: 1,
       numPages: 0,
-      pdfDocInitParams: null,
-      isRefreshing: false
+      pdfDocInitParams: null
     }
   },
   computed: {
@@ -153,34 +152,7 @@ export default {
       this.page++
       this.updateProgress()
     },
-    async refreshToken() {
-      if (this.isRefreshing) return
-      this.isRefreshing = true
-      const newAccessToken = await this.$store.dispatch('user/refreshToken').catch((error) => {
-        console.error('Failed to refresh token', error)
-        return null
-      })
-      if (!newAccessToken) {
-        // Redirect to login on failed refresh
-        this.$router.push('/login')
-        return
-      }
-
-      // Force Vue to re-render the PDF component by creating a new object
-      this.pdfDocInitParams = {
-        url: this.ebookUrl,
-        httpHeaders: {
-          Authorization: `Bearer ${newAccessToken}`
-        }
-      }
-      this.isRefreshing = false
-    },
-    async error(err) {
-      if (err && err.status === 401) {
-        console.log('Received 401 error, refreshing token')
-        await this.refreshToken()
-        return
-      }
+    error(err) {
       console.error(err)
     },
     resize() {

client/components/readers/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black data-[theme=sepia]:bg-[rgb(244,236,216)] data-[theme=sepia]:text-[#5b4636]" :class="{ 'reader-player-open': !!streamLibraryItem }">
+  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
     <div class="absolute top-4 left-4 z-20 flex items-center">
       <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
         <span class="material-symbols text-2xl">menu</span>
@@ -27,12 +27,7 @@
 
     <!-- TOC side nav -->
     <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div
-      v-if="isEpub"
-      class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black group-data-[theme=sepia]:bg-[rgb(244,236,216)] group-data-[theme=sepia]:text-[#5b4636]"
-      :class="tocOpen ? 'translate-x-0' : '-translate-x-96'"
-      @click.stop.prevent
-    >
+    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
       <div class="flex flex-col p-4 h-full">
         <div class="flex items-center mb-2">
           <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
@@ -42,7 +37,7 @@
           <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
         </div>
         <form @submit.prevent="searchBook" @click.stop.prevent>
-          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" custom-input-class="text-inherit !bg-inherit" class="h-8 w-full text-sm flex mb-2" />
+          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" class="h-8 w-full text-sm flex mb-2" />
         </form>
 
         <div class="overflow-y-auto">
@@ -186,10 +181,6 @@ export default {
             text: this.$strings.LabelThemeDark,
             value: 'dark'
           },
-          {
-            text: this.$strings.LabelThemeSepia,
-            value: 'sepia'
-          },
           {
             text: this.$strings.LabelThemeLight,
             value: 'light'
@@ -275,6 +266,9 @@ export default {
     isComic() {
       return this.ebookFormat == 'cbz' || this.ebookFormat == 'cbr'
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     keepProgress() {
       return this.$store.state.ereaderKeepProgress
     },

client/components/stats/DailyListeningChart.vue

@@ -14,7 +14,7 @@
         <div :key="n" class="absolute pointer-events-none left-0 h-px bg-white/10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
 
         <div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
-          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" plaintext direction="top">
+          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" direction="top">
             <div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
           </ui-tooltip>
         </div>
@@ -186,16 +186,10 @@ export default {
     daysInARow() {
       var count = 0
       while (true) {
-        const _date = this.$addDaysToToday(count * -1 - 1)
-        const datestr = this.$formatJsDate(_date, 'yyyy-MM-dd')
+        var _date = this.$addDaysToToday(count * -1)
+        var datestr = this.$formatJsDate(_date, 'yyyy-MM-dd')
 
         if (!this.listeningStatsDays[datestr] || this.listeningStatsDays[datestr] === 0) {
-          // don't require listening today to count towards days in a row, but do count it if already listened today
-          const today = this.$formatJsDate(new Date(), 'yyyy-MM-dd')
-          if (this.listeningStatsDays[today]) {
-            count++
-          }
-
           return count
         }
         count++

client/components/stats/Heatmap.vue

@@ -152,7 +152,7 @@ export default {
 
       this.showingTooltipIndex = index
       this.tooltipEl.style.display = 'block'
-      this.tooltipTextEl.innerHTML = block.value ? this.$getString('MessageHeatmapListeningTimeTooltip', [this.$elapsedPrettyLocalized(block.value, true), block.datePretty]) : this.$getString('MessageHeatmapNoListeningSessions', [block.datePretty])
+      this.tooltipTextEl.innerHTML = block.value ? `<strong>${this.$elapsedPretty(block.value, true)} listening</strong> on ${block.datePretty}` : `No listening sessions on ${block.datePretty}`
 
       const calculateRect = this.tooltipEl.getBoundingClientRect()
 

client/components/stats/PreviewIcons.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="flex flex-wrap justify-center mt-6">
     <div class="flex p-2">
-      <span class="material-symbols text-5xl py-1">newsstand</span>
+      <svg class="h-14 w-14" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
+      </svg>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalItems) }}</p>
         <p class="text-xs md:text-sm text-white/80">{{ $strings.LabelStatsItemsInLibrary }}</p>
@@ -17,7 +19,9 @@
     </div>
 
     <div v-if="isBookLibrary" class="flex p-2">
-      <span class="material-symbols text-5xl py-1">person</span>
+      <svg class="h-14 w-14" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
+      </svg>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalAuthors) }}</p>
         <p class="text-xs md:text-sm text-white/80">{{ $strings.LabelStatsAuthors }}</p>

client/components/tables/ApiKeysTable.vue

@@ -1,177 +0,0 @@
-<template>
-  <div>
-    <div class="text-center">
-      <table v-if="apiKeys.length > 0" id="api-keys">
-        <tr>
-          <th>{{ $strings.LabelName }}</th>
-          <th class="w-44">{{ $strings.LabelApiKeyUser }}</th>
-          <th class="w-32">{{ $strings.LabelExpiresAt }}</th>
-          <th class="w-32">{{ $strings.LabelCreatedAt }}</th>
-          <th class="w-32"></th>
-        </tr>
-        <tr v-for="apiKey in apiKeys" :key="apiKey.id" :class="apiKey.isActive ? '' : 'bg-error/10!'">
-          <td>
-            <div class="flex items-center">
-              <p class="pl-2 truncate">{{ apiKey.name }}</p>
-            </div>
-          </td>
-          <td class="text-xs">
-            <nuxt-link v-if="apiKey.user" :to="`/config/users/${apiKey.user.id}`" class="text-xs hover:underline">
-              {{ apiKey.user.username }}
-            </nuxt-link>
-            <p v-else class="text-xs">Error</p>
-          </td>
-          <td class="text-xs">
-            <p v-if="apiKey.expiresAt" class="text-xs" :title="apiKey.expiresAt">{{ getExpiresAtText(apiKey) }}</p>
-            <p v-else class="text-xs">{{ $strings.LabelExpiresNever }}</p>
-          </td>
-          <td class="text-xs font-mono">
-            <ui-tooltip direction="top" :text="$formatJsDatetime(new Date(apiKey.createdAt), dateFormat, timeFormat)">
-              {{ $formatJsDate(new Date(apiKey.createdAt), dateFormat) }}
-            </ui-tooltip>
-          </td>
-          <td class="py-0">
-            <div class="w-full flex justify-left">
-              <div class="h-8 w-8 flex items-center justify-center text-white/50 hover:text-white/100 cursor-pointer" @click.stop="editApiKey(apiKey)">
-                <button type="button" :aria-label="$strings.ButtonEdit" class="material-symbols text-base">edit</button>
-              </div>
-              <div class="h-8 w-8 flex items-center justify-center text-white/50 hover:text-error cursor-pointer" @click.stop="deleteApiKeyClick(apiKey)">
-                <button type="button" :aria-label="$strings.ButtonDelete" class="material-symbols text-base">delete</button>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </table>
-      <p v-else class="text-base text-gray-300 py-4">{{ $strings.LabelNoApiKeys }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      apiKeys: [],
-      isDeletingApiKey: false
-    }
-  },
-  computed: {
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
-    },
-    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
-    }
-  },
-  methods: {
-    getExpiresAtText(apiKey) {
-      if (new Date(apiKey.expiresAt).getTime() < Date.now()) {
-        return this.$strings.LabelExpired
-      }
-      return this.$formatJsDatetime(new Date(apiKey.expiresAt), this.dateFormat, this.timeFormat)
-    },
-    deleteApiKeyClick(apiKey) {
-      if (this.isDeletingApiKey) return
-
-      const payload = {
-        message: this.$getString('MessageConfirmDeleteApiKey', [apiKey.name]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.deleteApiKey(apiKey)
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    deleteApiKey(apiKey) {
-      this.isDeletingApiKey = true
-      this.$axios
-        .$delete(`/api/api-keys/${apiKey.id}`)
-        .then((data) => {
-          if (data.error) {
-            this.$toast.error(data.error)
-          } else {
-            this.removeApiKey(apiKey.id)
-            this.$emit('numApiKeys', this.apiKeys.length)
-          }
-        })
-        .catch((error) => {
-          console.error('Failed to delete apiKey', error)
-          this.$toast.error(this.$strings.ToastFailedToDelete)
-        })
-        .finally(() => {
-          this.isDeletingApiKey = false
-        })
-    },
-    editApiKey(apiKey) {
-      this.$emit('edit', apiKey)
-    },
-    addApiKey(apiKey) {
-      this.apiKeys.push(apiKey)
-    },
-    removeApiKey(apiKeyId) {
-      this.apiKeys = this.apiKeys.filter((a) => a.id !== apiKeyId)
-    },
-    updateApiKey(apiKey) {
-      this.apiKeys = this.apiKeys.map((a) => (a.id === apiKey.id ? apiKey : a))
-    },
-    loadApiKeys() {
-      this.$axios
-        .$get('/api/api-keys')
-        .then((res) => {
-          this.apiKeys = res.apiKeys.sort((a, b) => {
-            return a.createdAt - b.createdAt
-          })
-          this.$emit('numApiKeys', this.apiKeys.length)
-        })
-        .catch((error) => {
-          console.error('Failed to load apiKeys', error)
-        })
-    }
-  },
-  mounted() {
-    this.loadApiKeys()
-  }
-}
-</script>
-
-<style>
-#api-keys {
-  table-layout: fixed;
-  border-collapse: collapse;
-  border: 1px solid #474747;
-  width: 100%;
-}
-
-#api-keys td,
-#api-keys th {
-  /* border: 1px solid #2e2e2e; */
-  padding: 8px 8px;
-  text-align: left;
-}
-
-#api-keys td.py-0 {
-  padding: 0px 8px;
-}
-
-#api-keys tr:nth-child(even) {
-  background-color: #373838;
-}
-
-#api-keys tr:nth-child(odd) {
-  background-color: #2f2f2f;
-}
-
-#api-keys tr:hover {
-  background-color: #444;
-}
-
-#api-keys th {
-  font-size: 0.8rem;
-  font-weight: 600;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  background-color: #272727;
-}
-</style>

client/components/tables/BackupsTable.vue

@@ -78,10 +78,10 @@ export default {
       return this.$store.getters['user/getToken']
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/components/tables/EbookFilesTable.vue

@@ -49,6 +49,9 @@ export default {
     libraryItemId() {
       return this.libraryItem.id
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },

client/components/tables/LibraryFilesTable.vue

@@ -53,6 +53,9 @@ export default {
     libraryItemId() {
       return this.libraryItem.id
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },

client/components/tables/UsersTable.vue

@@ -76,10 +76,10 @@ export default {
       return usermap
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/components/tables/podcast/LazyEpisodeRow.vue

@@ -112,7 +112,7 @@ export default {
       return this.episode?.publishedAt
     },
     dateFormat() {
-      return this.store.getters['getServerSetting']('dateFormat')
+      return this.store.state.serverSettings.dateFormat
     },
     itemProgress() {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episodeId)

client/components/tables/podcast/LazyEpisodesTable.vue

@@ -239,10 +239,10 @@ export default {
       })
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/components/ui/LoadingIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="hasSlotContent ? 'w-auto' : 'w-40'">
+  <div class="w-40">
     <div class="bg-bg border border-gray-500 py-2 px-5 rounded-lg flex items-center flex-col box-shadow-md">
       <div class="loader-dots block relative w-20 h-5 mt-2">
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
@@ -7,9 +7,7 @@
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
         <div class="absolute top-0 mt-1 w-3 h-3 rounded-full bg-green-500"></div>
       </div>
-      <slot>
       <div class="text-gray-200 text-xs font-light mt-2 text-center">{{ message }}</div>
-      </slot>
     </div>
   </div>
 </template>
@@ -25,9 +23,6 @@ export default {
   computed: {
     message() {
       return this.text || this.$strings.MessagePleaseWait
-    },
-    hasSlotContent() {
-      return this.$slots.default && this.$slots.default.length > 0
     }
   }
 }

client/components/ui/MultiSelect.vue

@@ -4,11 +4,10 @@
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" role="list" style="min-height: 36px" class="flex-wrap relative w-full shadow-xs flex items-center border border-gray-600 rounded-sm px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
-          <!-- Use index in v-for and key in case the same key exists multiple times -->
-          <div v-for="(item, idx) in selected" :key="item + '-' + idx" role="listitem" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
+          <div v-for="item in selected" :key="item" role="listitem" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
             <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg/75 flex items-center justify-end opacity-0 hover:opacity-100" :class="{ 'opacity-100': inputFocused }">
               <button v-if="showEdit" type="button" :aria-label="$strings.ButtonEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</button>
-              <button type="button" :aria-label="$strings.ButtonRemove" class="material-symbols text-white hover:text-error focus:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item, idx)" @keydown.enter.stop.prevent="removeItem(item, idx)" @focus="setInputFocused(true)" @blur="setInputFocused(false)" tabindex="0">close</button>
+              <button type="button" :aria-label="$strings.ButtonRemove" class="material-symbols text-white hover:text-error focus:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)" @keydown.enter.stop.prevent="removeItem(item)" @focus="setInputFocused(true)" @blur="setInputFocused(false)" tabindex="0">close</button>
             </div>
             {{ item }}
           </div>
@@ -260,9 +259,8 @@ export default {
       }
       this.focus()
     },
-    removeItem(item, idx) {
-      var remaining = this.selected.slice()
-      remaining.splice(idx, 1)
+    removeItem(item) {
+      var remaining = this.selected.filter((i) => i !== item)
       this.$emit('input', remaining)
       this.$emit('removedItem', item)
       this.$nextTick(() => {
@@ -278,7 +276,7 @@ export default {
       })
     },
     insertNewItem(item) {
-      if (!this.selected.includes(item)) this.selected.push(item)
+      this.selected.push(item)
       this.$emit('input', this.selected)
       this.$emit('newItem', item)
       this.textInput = null

client/components/ui/MultiSelectQueryInput.vue

@@ -85,6 +85,9 @@ export default {
         this.$emit('input', val)
       }
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     wrapperClass() {
       var classes = []
       if (this.disabled) classes.push('bg-black-300')
@@ -287,7 +290,7 @@ export default {
       })
     },
     insertNewItem(item) {
-      if (!this.selected.find((i) => i.name === item.name)) this.selected.push(item)
+      this.selected.push(item)
       this.$emit('input', this.selected)
       this.$emit('newItem', item)
       this.textInput = null

client/components/ui/ReadIconBtn.vue

@@ -1,8 +1,12 @@
 <template>
   <button :aria-label="isRead ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" :class="borderless ? '' : 'bg-primary border border-gray-600'" @click="clickBtn">
-    <div class="w-5 h-5 relative">
-      <span v-if="isRead" class="material-symbols fill text-xl text-success">beenhere</span>
-      <span v-else class="material-symbols text-xl text-white">beenhere</span>
+    <div class="w-5 h-5 text-white relative">
+      <svg v-if="isRead" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
+        <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
+      </svg>
     </div>
   </button>
 </template>

client/components/ui/SelectInput.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative w-full">
-    <p v-if="label && !labelHidden" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <button ref="buttonWrapper" type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded-sm shadow-xs pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
-        <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small, 'text-gray-400': !selectedText }">{{ selectedText || placeholder }}</span>
+        <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
         <span v-if="selectedSubtext">:&nbsp;</span>
         <span v-if="selectedSubtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ selectedSubtext }}</span>
       </span>
@@ -36,15 +36,10 @@ export default {
       type: String,
       default: ''
     },
-    labelHidden: Boolean,
     items: {
       type: Array,
       default: () => []
     },
-    placeholder: {
-      type: String,
-      default: ''
-    },
     disabled: Boolean,
     small: Boolean,
     menuMaxHeight: {

client/components/ui/TextInputWithLabel.vue

@@ -6,7 +6,7 @@
         <em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
       </label>
     </slot>
-    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" :min="min" :show-copy="showCopy" class="w-full" :class="inputClass" :trim-whitespace="trimWhitespace" @blur="inputBlurred" />
+    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" :show-copy="showCopy" class="w-full" :class="inputClass" :trim-whitespace="trimWhitespace" @blur="inputBlurred" />
   </div>
 </template>
 
@@ -21,7 +21,6 @@ export default {
       type: String,
       default: 'text'
     },
-    min: [String, Number],
     readonly: Boolean,
     disabled: Boolean,
     inputClass: String,

client/components/ui/Tooltip.vue

@@ -22,8 +22,7 @@ export default {
       type: Number,
       default: 0
     },
-    disabled: Boolean,
-    plaintext: Boolean
+    disabled: Boolean
   },
   data() {
     return {
@@ -47,11 +46,7 @@ export default {
   methods: {
     updateText() {
       if (this.tooltip) {
-        if (this.plaintext) {
-          this.tooltip.textContent = this.text
-        } else {
         this.tooltip.innerHTML = this.text
-        }
         this.setTooltipPosition(this.tooltip)
       }
     },
@@ -63,11 +58,7 @@ export default {
       tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white text-xs rounded-sm shadow-lg max-w-xs text-center hidden sm:block'
       tooltip.style.zIndex = 100
       tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
-      if (this.plaintext) {
-        tooltip.textContent = this.text
-      } else {
       tooltip.innerHTML = this.text
-      }
       tooltip.addEventListener('mouseover', this.cancelHide)
       tooltip.addEventListener('mouseleave', this.hideTooltip)
 

client/components/ui/VueTrix.vue

@@ -31,7 +31,7 @@
         </div>
       </div>
     </trix-toolbar>
-    <trix-editor :toolbar="toolbarId" :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" @trix-attachment-add="handleAttachmentAdd" />
+    <trix-editor :toolbar="toolbarId" :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" />
     <input type="hidden" :name="inputName" :id="computedId" :value="editorContent" />
   </div>
 </template>
@@ -316,10 +316,6 @@ export default {
       if (this.$refs.trix && this.$refs.trix.blur) {
         this.$refs.trix.blur()
       }
-    },
-    handleAttachmentAdd(event) {
-      // Prevent pasting in images/any files from the browser
-      event.attachment.remove()
     }
   },
   mounted() {

client/components/widgets/CronExpressionBuilder.vue

@@ -85,7 +85,7 @@ export default {
     nextRun() {
       if (!this.cronExpression) return ''
       const parsed = this.$getNextScheduledDate(this.cronExpression)
-      return this.$formatJsDatetime(parsed, this.$store.getters['getServerSetting']('dateFormat'), this.$store.getters['getServerSetting']('timeFormat')) || ''
+      return this.$formatJsDatetime(parsed, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat) || ''
     },
     description() {
       if ((this.selectedInterval !== 'custom' || !this.selectedWeekdays.length) && this.selectedInterval !== 'daily') return ''

client/components/widgets/EncoderOptionsCard.vue

@@ -143,19 +143,11 @@ export default {
       localStorage.setItem('embedMetadataCodec', val)
     },
     getEncodingOptions() {
-      if (this.showAdvancedView) {
-        return {
-          codec: this.customCodec || this.selectedCodec || 'aac',
-          bitrate: this.customBitrate || this.selectedBitrate || '128k',
-          channels: this.customChannels || this.selectedChannels || 2
-        }
-      } else {
       return {
         codec: this.selectedCodec || 'aac',
         bitrate: this.selectedBitrate || '128k',
         channels: this.selectedChannels || 2
       }
-      }
     },
     setPreset() {
       // If already AAC and not mixed, set copy
@@ -170,7 +162,7 @@ export default {
       } else {
         // Find closest bitrate rounding up
         const bitratesToMatch = [32, 64, 128, 192]
-        const closestBitrate = bitratesToMatch.find((bitrate) => bitrate >= this.currentBitrate) || 192
+        const closestBitrate = bitratesToMatch.find((bitrate) => bitrate >= this.currentBitrate)
         this.selectedBitrate = closestBitrate + 'k'
       }
 

client/components/widgets/ExplicitIndicator.vue

@@ -1,6 +1,40 @@
 <template>
   <ui-tooltip :text="$strings.LabelExplicit" direction="top">
-    <span class="material-symbols fill text-sm ml-1 !block">explicit</span>
+    <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 512 512" class="ml-1">
+      <path
+        fill="white"
+        d="M 89.00,40.12
+           C 89.00,40.12 127.00,40.12 127.00,40.12
+             127.00,40.12 198.00,40.12 198.00,40.12
+             198.00,40.12 416.00,40.12 416.00,40.12
+             446.58,40.05 472.95,66.42 473.00,97.00
+             473.00,97.00 473.00,303.00 473.00,303.00
+             473.00,303.00 473.00,418.00 473.00,418.00
+             472.65,447.55 445.06,472.95 416.00,473.00
+             416.00,473.00 210.00,473.00 210.00,473.00
+             210.00,473.00 95.00,473.00 95.00,473.00
+             65.45,472.65 40.05,445.06 40.00,416.00
+             40.00,416.00 40.00,136.00 40.00,136.00
+             40.00,136.00 40.00,109.00 40.00,109.00
+             40.00,109.00 40.00,96.00 40.00,96.00
+             40.07,81.58 46.89,67.14 57.01,57.01
+             61.17,52.86 64.86,50.13 70.00,47.31
+             77.25,43.33 81.02,42.18 89.00,40.12 Z
+           M 337.00,121.00
+           C 337.00,121.00 175.00,121.00 175.00,121.00
+             175.00,121.00 175.00,392.00 175.00,392.00
+             175.00,392.00 337.00,392.00 337.00,392.00
+             337.00,392.00 337.00,349.00 337.00,349.00
+             337.00,349.00 226.00,349.00 226.00,349.00
+             226.00,349.00 226.00,274.00 226.00,274.00
+             226.00,274.00 332.00,274.00 332.00,274.00
+             332.00,274.00 332.00,232.00 332.00,232.00
+             332.00,232.00 226.00,232.00 226.00,232.00
+             226.00,232.00 226.00,164.00 226.00,164.00
+             226.00,164.00 337.00,164.00 337.00,164.00
+             337.00,164.00 337.00,121.00 337.00,121.00 Z"
+      />
+    </svg>
   </ui-tooltip>
 </template>
 

client/components/widgets/ItemSlider.vue

@@ -132,10 +132,10 @@ export default {
     editAuthor(author) {
       this.$store.commit('globals/showEditAuthorModal', author)
     },
-    editItem(libraryItem, tab = 'details') {
+    editItem(libraryItem) {
       var itemIds = this.items.map((e) => e.id)
       this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModalOnTab', { libraryItem, tab: tab || 'details' })
+      this.$store.commit('showEditModal', libraryItem)
     },
     selectItem(payload) {
       this.$emit('selectEntity', payload)

client/components/widgets/SeriesInputWidget.vue

@@ -2,7 +2,7 @@
   <div>
     <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" :label="$strings.LabelSeries" :disabled="disabled" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
 
-    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" :original-series-sequence="originalSeriesSequence" @submit="submitSeriesForm" />
+    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
   </div>
 </template>
 
@@ -18,7 +18,6 @@ export default {
   data() {
     return {
       selectedSeries: null,
-      originalSeriesSequence: null,
       showSeriesForm: false
     }
   },
@@ -60,7 +59,6 @@ export default {
         ..._series
       }
 
-      this.originalSeriesSequence = _series.sequence
       this.showSeriesForm = true
     },
     addNewSeries() {
@@ -70,7 +68,6 @@ export default {
         sequence: ''
       }
 
-      this.originalSeriesSequence = null
       this.showSeriesForm = true
     },
     submitSeriesForm() {

client/cypress/tests/components/cards/LazySeriesCard.cy.js

@@ -40,7 +40,6 @@ describe('LazySeriesCard', () => {
     },
     $store: {
       getters: {
-        getServerSetting: () => 'MM/dd/yyyy',
         'user/getUserCanUpdate': true,
         'user/getUserMediaProgress': (id) => null,
         'user/getSizeMultiplier': 1,

client/layouts/default.vue

@@ -33,7 +33,6 @@ export default {
     return {
       socket: null,
       isSocketConnected: false,
-      isSocketAuthenticated: false,
       isFirstSocketConnection: true,
       socketConnectionToastId: null,
       currentLang: null,
@@ -82,28 +81,9 @@ export default {
         document.body.classList.add('app-bar')
       }
     },
-    tokenRefreshed(newAccessToken) {
-      if (this.isSocketConnected && !this.isSocketAuthenticated) {
-        console.log('[SOCKET] Re-authenticating socket after token refresh')
-        this.socket.emit('auth', newAccessToken)
-      }
-    },
     updateSocketConnectionToast(content, type, timeout) {
       if (this.socketConnectionToastId !== null && this.socketConnectionToastId !== undefined) {
-        const toastUpdateOptions = {
-          content: content,
-          options: {
-            timeout: timeout,
-            type: type,
-            closeButton: false,
-            position: 'bottom-center',
-            onClose: () => {
-              this.socketConnectionToastId = null
-            },
-            closeOnClick: timeout !== null
-          }
-        }
-        this.$toast.update(this.socketConnectionToastId, toastUpdateOptions, false)
+        this.$toast.update(this.socketConnectionToastId, { content: content, options: { timeout: timeout, type: type, closeButton: false, position: 'bottom-center', onClose: () => null, closeOnClick: timeout !== null } }, false)
       } else {
         this.socketConnectionToastId = this.$toast[type](content, { position: 'bottom-center', timeout: timeout, closeButton: false, closeOnClick: timeout !== null })
       }
@@ -129,7 +109,7 @@ export default {
       this.updateSocketConnectionToast(this.$strings.ToastSocketDisconnected, 'error', null)
     },
     reconnect() {
-      console.log('[SOCKET] reconnected')
+      console.error('[SOCKET] reconnected')
     },
     reconnectAttempt(val) {
       console.log(`[SOCKET] reconnect attempt ${val}`)
@@ -140,10 +120,6 @@ export default {
     reconnectFailed() {
       console.error('[SOCKET] reconnect failed')
     },
-    authFailed(payload) {
-      console.error('[SOCKET] auth failed', payload.message)
-      this.isSocketAuthenticated = false
-    },
     init(payload) {
       console.log('Init Payload', payload)
 
@@ -151,7 +127,7 @@ export default {
         this.$store.commit('users/setUsersOnline', payload.usersOnline)
       }
 
-      this.isSocketAuthenticated = true
+      this.$eventBus.$emit('socket_init')
     },
     streamOpen(stream) {
       if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamOpen(stream)
@@ -199,7 +175,7 @@ export default {
           }
         } else {
           console.error('User has no more accessible libraries')
-          this.$store.commit('libraries/setCurrentLibrary', { id: null })
+          this.$store.commit('libraries/setCurrentLibrary', null)
         }
       }
     },
@@ -371,24 +347,13 @@ export default {
     },
     customMetadataProviderAdded(provider) {
       if (!provider?.id) return
-      // Refresh providers cache
-      this.$store.dispatch('scanners/refreshProviders')
+      this.$store.commit('scanners/addCustomMetadataProvider', provider)
     },
     customMetadataProviderRemoved(provider) {
       if (!provider?.id) return
-      // Refresh providers cache
-      this.$store.dispatch('scanners/refreshProviders')
+      this.$store.commit('scanners/removeCustomMetadataProvider', provider)
     },
     initializeSocket() {
-      if (this.$root.socket) {
-        // Can happen in dev due to hot reload
-        console.warn('Socket already initialized')
-        this.socket = this.$root.socket
-        this.isSocketConnected = this.$root.socket?.connected
-        this.isFirstSocketConnection = false
-        this.socketConnectionToastId = null
-        return
-      }
       this.socket = this.$nuxtSocket({
         name: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
         persist: 'main',
@@ -399,7 +364,6 @@ export default {
         path: `${this.$config.routerBasePath}/socket.io`
       })
       this.$root.socket = this.socket
-      this.isSocketAuthenticated = false
       console.log('Socket initialized')
 
       // Pre-defined socket events
@@ -413,7 +377,6 @@ export default {
 
       // Event received after authorizing socket
       this.socket.on('init', this.init)
-      this.socket.on('auth_failed', this.authFailed)
 
       // Stream Listeners
       this.socket.on('stream_open', this.streamOpen)
@@ -608,7 +571,6 @@ export default {
     this.updateBodyClass()
     this.resize()
     this.$eventBus.$on('change-lang', this.changeLanguage)
-    this.$eventBus.$on('token_refreshed', this.tokenRefreshed)
     window.addEventListener('resize', this.resize)
     window.addEventListener('keydown', this.keyDown)
 
@@ -632,7 +594,6 @@ export default {
   },
   beforeDestroy() {
     this.$eventBus.$off('change-lang', this.changeLanguage)
-    this.$eventBus.$off('token_refreshed', this.tokenRefreshed)
     window.removeEventListener('resize', this.resize)
     window.removeEventListener('keydown', this.keyDown)
   }

client/mixins/bookshelfCardsHelpers.js

@@ -118,8 +118,8 @@ export default {
         propsData: props,
         parent: this,
         created() {
-          this.$on('edit', (entity, tab) => {
-            if (_this.editEntity) _this.editEntity(entity, tab)
+          this.$on('edit', (entity) => {
+            if (_this.editEntity) _this.editEntity(entity)
           })
           this.$on('select', ({ entity, shiftKey }) => {
             if (_this.selectEntity) _this.selectEntity(entity, shiftKey)

client/nuxt.config.js

@@ -73,8 +73,7 @@ module.exports = {
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
-    baseURL: routerBasePath,
-    progress: false
+    baseURL: routerBasePath
   },
 
   // nuxt/pwa https://pwa.nuxtjs.org

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.33.2",
+  "version": "2.22.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf-client",
-      "version": "2.33.2",
+      "version": "2.22.0",
       "license": "ISC",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.33.2",
+  "version": "2.22.0",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",

client/pages/account.vue

@@ -182,19 +182,18 @@ export default {
           password: this.password,
           newPassword: this.newPassword
         })
-        .then(() => {
+        .then((res) => {
+          if (res.success) {
             this.$toast.success(this.$strings.ToastUserPasswordChangeSuccess)
             this.resetForm()
+          } else {
+            this.$toast.error(res.error || this.$strings.ToastUnknownError)
+          }
+          this.changingPassword = false
         })
         .catch((error) => {
-          console.error('Failed to change password', error)
-          let errorMessage = this.$strings.ToastUnknownError
-          if (error.response?.data && typeof error.response.data === 'string') {
-            errorMessage = error.response.data
-          }
-          this.$toast.error(errorMessage)
-        })
-        .finally(() => {
+          console.error(error)
+          this.$toast.error(this.$strings.ToastUnknownError)
           this.changingPassword = false
         })
     },

client/pages/audiobook/_id/chapters.vue

@@ -12,24 +12,24 @@
       <p class="text-base font-mono ml-4 hidden md:block">{{ $secondsToTimestamp(mediaDurationRounded) }}</p>
     </div>
 
-    <div class="flex flex-wrap-reverse min-[1120px]:flex-nowrap justify-center py-4 px-4">
+    <div class="flex flex-wrap-reverse lg:flex-nowrap justify-center py-4 px-4">
       <div class="w-full max-w-3xl py-4">
         <div class="flex items-center">
-          <div class="w-12 hidden min-w-[1120px]:block" />
+          <div class="w-12 hidden lg:block" />
           <p class="text-lg mb-4 font-semibold">{{ $strings.HeaderChapters }}</p>
           <div class="grow" />
           <ui-checkbox v-model="showSecondInputs" checkbox-bg="primary" small label-class="text-sm text-gray-200 pl-1" :label="$strings.LabelShowSeconds" class="mx-2" />
-          <div class="w-32 hidden min-[1120px]:block" />
+          <div class="w-32 hidden lg:block" />
         </div>
         <div class="flex items-center mb-3 py-1 -mx-1">
-          <div class="w-12 hidden min-[1120px]:block" />
+          <div class="w-12 hidden lg:block" />
           <ui-btn v-if="chapters.length" color="bg-primary" small class="mx-1 whitespace-nowrap" @click.stop="removeAllChaptersClick">{{ $strings.ButtonRemoveAll }}</ui-btn>
           <ui-btn v-if="newChapters.length > 1" :color="showShiftTimes ? 'bg-bg' : 'bg-primary'" class="mx-1 whitespace-nowrap" small @click="showShiftTimes = !showShiftTimes">{{ $strings.ButtonShiftTimes }}</ui-btn>
           <ui-btn color="bg-primary" small :class="{ 'mx-1': newChapters.length > 1 }" @click="showFindChaptersModal = true">{{ $strings.ButtonLookup }}</ui-btn>
           <div class="grow" />
           <ui-btn v-if="hasChanges" small class="mx-1" @click.stop="resetChapters">{{ $strings.ButtonReset }}</ui-btn>
           <ui-btn v-if="hasChanges" color="bg-success" class="mx-1" :disabled="!hasChanges" small @click="saveChapters">{{ $strings.ButtonSave }}</ui-btn>
-          <div class="w-32 hidden min-[1120px]:block" />
+          <div class="w-32 hidden lg:block" />
         </div>
 
         <div class="overflow-hidden">
@@ -53,80 +53,43 @@
 
         <div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
           <div class="w-8 min-w-8 md:w-12 md:min-w-12"></div>
-          <div class="w-38 min-w-38 md:w-40 md:min-w-40 px-1 pl-8">{{ $strings.LabelStart }}</div>
-          <div class="grow px-1 min-w-54">{{ $strings.LabelTitle }}</div>
-          <div class="w-7 min-w-7 px-1 flex items-center justify-center">
-            <ui-tooltip :text="allChaptersLocked ? $strings.TooltipUnlockAllChapters : $strings.TooltipLockAllChapters" direction="bottom">
-              <button class="w-7 h-7 rounded-full flex items-center justify-center cursor-pointer transition-colors duration-150" :class="allChaptersLocked ? 'text-orange-400 hover:text-orange-300' : 'text-gray-300 hover:text-white'" @click="toggleAllChaptersLock">
-                <span class="material-symbols text-xl">{{ allChaptersLocked ? 'lock' : 'lock_open' }}</span>
-              </button>
-            </ui-tooltip>
-          </div>
+          <div class="w-24 min-w-24 md:w-32 md:min-w-32 px-2">{{ $strings.LabelStart }}</div>
+          <div class="grow px-2">{{ $strings.LabelTitle }}</div>
           <div class="w-32"></div>
         </div>
-        <div v-for="chapter in newChapters" :key="chapter.id" class="flex py-1">
+        <template v-for="chapter in newChapters">
+          <div :key="chapter.id" class="flex py-1">
             <div class="w-8 min-w-8 md:w-12 md:min-w-12">#{{ chapter.id + 1 }}</div>
-          <div class="w-38 min-w-38 md:w-40 md:min-w-40 px-1">
-            <div class="flex items-center gap-1">
-              <ui-tooltip :text="$strings.TooltipSubtractOneSecond" direction="bottom">
-                <button
-                  class="w-6 h-6 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150 flex-shrink-0"
-                  :class="{ 'opacity-50 cursor-not-allowed': chapter.id === 0 && chapter.start - timeIncrementAmount < 0 }"
-                  @click="incrementChapterTime(chapter, -timeIncrementAmount)"
-                  :disabled="chapter.id === 0 && chapter.start - timeIncrementAmount < 0"
-                >
-                  <span class="material-symbols text-sm">remove</span>
-                </button>
-              </ui-tooltip>
-
-              <div class="flex-1 min-w-0">
+            <div class="w-24 min-w-24 md:w-32 md:min-w-32 px-1">
               <ui-text-input v-if="showSecondInputs" v-model="chapter.start" type="number" class="text-xs" @change="checkChapters" />
               <ui-time-picker v-else class="text-xs" v-model="chapter.start" :show-three-digit-hour="mediaDuration >= 360000" @change="checkChapters" />
             </div>
-
-              <ui-tooltip :text="$strings.TooltipAddOneSecond" direction="bottom">
-                <button class="w-6 h-6 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150 flex-shrink-0" :class="{ 'opacity-50 cursor-not-allowed': chapter.start + timeIncrementAmount >= mediaDuration }" @click="incrementChapterTime(chapter, timeIncrementAmount)" :disabled="chapter.start + timeIncrementAmount >= mediaDuration">
-                  <span class="material-symbols text-sm">add</span>
-                </button>
-              </ui-tooltip>
-            </div>
-          </div>
             <div class="grow px-1">
               <ui-text-input v-model="chapter.title" @change="checkChapters" class="text-xs min-w-52" />
             </div>
-          <div class="w-7 min-w-7 px-1 py-1">
-            <div class="flex items-center justify-center">
-              <ui-tooltip :text="lockedChapters.has(chapter.id) ? $strings.TooltipUnlockChapter : $strings.TooltipLockChapter" direction="bottom">
-                <button class="w-7 h-7 rounded-full flex items-center justify-center transform hover:scale-110 duration-150 flex-shrink-0" :class="lockedChapters.has(chapter.id) ? 'text-orange-400 hover:text-orange-300' : 'text-gray-300 hover:text-white'" @click="toggleChapterLock(chapter, $event)">
-                  <span class="material-symbols text-base">{{ lockedChapters.has(chapter.id) ? 'lock' : 'lock_open' }}</span>
-                </button>
-              </ui-tooltip>
-            </div>
-          </div>
             <div class="w-32 min-w-32 px-2 py-1">
               <div class="flex items-center">
                 <ui-tooltip :text="$strings.MessageRemoveChapter" direction="bottom">
                   <button v-if="newChapters.length > 1" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-error transform hover:scale-110 duration-150" @click="removeChapter(chapter)">
-                  <span class="material-symbols text-base">delete</span>
+                    <span class="material-symbols text-base">remove</span>
                   </button>
                 </ui-tooltip>
 
                 <ui-tooltip :text="$strings.MessageInsertChapterBelow" direction="bottom">
                   <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150" @click="addChapter(chapter)">
-                  <span class="material-symbols text-lg">add_row_below</span>
+                    <span class="material-symbols text-lg">add</span>
                   </button>
                 </ui-tooltip>
+
                 <ui-tooltip :text="selectedChapterId === chapter.id && isPlayingChapter ? $strings.MessagePauseChapter : $strings.MessagePlayChapter" direction="bottom">
-                <button :disabled="!getAudioTrackForTime(chapter.start)" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150 disabled:opacity-50 disabled:cursor-not-allowed" @click="playChapter(chapter)">
+                  <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150" @click="playChapter(chapter)">
                     <widgets-loading-spinner v-if="selectedChapterId === chapter.id && isLoadingChapter" />
                     <span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-symbols text-base">pause</span>
-                  <span v-else class="material-symbols text-xl">play_arrow</span>
+                    <span v-else class="material-symbols text-base">play_arrow</span>
                   </button>
                 </ui-tooltip>
-              <ui-tooltip v-if="selectedChapterId === chapter.id && (isPlayingChapter || isLoadingChapter)" :text="$strings.TooltipAdjustChapterStart" direction="bottom">
-                <div class="ml-2 text-xs text-gray-300 font-mono min-w-10 cursor-pointer hover:text-white transition-colors duration-150" @click="adjustChapterStartTime(chapter)">{{ elapsedTime }}s</div>
-              </ui-tooltip>
-              <ui-tooltip v-if="chapter.error" :text="chapter.error" plaintext direction="left">
+
+                <ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
                   <button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
                     <span class="material-symbols text-lg">error_outline</span>
                   </button>
@@ -134,23 +97,10 @@
               </div>
             </div>
           </div>
-        <div class="flex items-center mt-4 mb-2">
-          <div class="w-8 min-w-8 md:w-12 md:min-w-12"></div>
-          <div class="w-38 min-w-38 md:w-40 md:min-w-40 px-1"></div>
-          <div class="flex items-center gap-2 grow px-1">
-            <ui-text-input v-model="bulkChapterInput" :placeholder="$strings.PlaceholderBulkChapterInput" class="text-xs grow min-w-52" @keyup.enter="handleBulkChapterAdd" />
-          </div>
-          <div class="w-39 min-w-39 px-1 py-1">
-            <ui-tooltip :text="$strings.TooltipAddChapters" direction="bottom" class="inline-block align-middle">
-              <button class="w-5 h-5 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150 flex-shrink-0" :aria-label="$strings.TooltipAddChapters" :class="{ 'opacity-50 cursor-not-allowed': !bulkChapterInput.trim() }" :disabled="!bulkChapterInput.trim()" @click="handleBulkChapterAdd">
-                <span class="material-symbols text-lg">add</span>
-              </button>
-            </ui-tooltip>
-          </div>
-        </div>
+        </template>
       </div>
 
-      <div class="w-full max-w-3xl min-[1120px]:max-w-xl py-4 px-2">
+      <div class="w-full max-w-xl py-4 px-2">
         <div class="flex items-center mb-4 py-1">
           <p class="text-lg font-semibold">{{ $strings.HeaderAudioTracks }}</p>
           <div class="grow" />
@@ -160,27 +110,30 @@
           </ui-tooltip>
         </div>
         <div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
-          <div class="grow min-[1120px]:max-w-64 xl:max-w-sm">{{ $strings.LabelFilename }}</div>
+          <div class="grow">{{ $strings.LabelFilename }}</div>
           <div class="w-20">{{ $strings.LabelDuration }}</div>
           <div class="w-20 hidden md:block text-center">{{ $strings.HeaderChapters }}</div>
         </div>
-        <div v-for="track in audioTracks" :key="track.ino" class="flex items-center py-2" :class="currentTrackIndex === track.index && isPlayingChapter ? 'bg-success/10' : ''">
-          <div class="pr-2 grow min-[1120px]:max-w-64 xl:max-w-sm">
-            <p class="text-xs truncate">{{ track.metadata.filename }}</p>
+        <template v-for="track in audioTracks">
+          <div :key="track.ino" class="flex items-center py-2" :class="currentTrackIndex === track.index && isPlayingChapter ? 'bg-success/10' : ''">
+            <div class="grow max-w-[calc(100%-80px)] pr-2">
+              <p class="text-xs truncate max-w-sm">{{ track.metadata.filename }}</p>
             </div>
             <div class="w-20" style="min-width: 80px">
               <p class="text-xs font-mono text-gray-200">{{ $secondsToTimestamp(Math.round(track.duration), false, true) }}</p>
             </div>
-          <div class="w-20 hidden md:flex justify-center" style="min-width: 80px"><span v-if="(track.chapters || []).length" class="material-symbols text-success text-sm">check</span></div>
+            <div class="w-20 hidden md:flex justify-center" style="min-width: 80px">
+              <span v-if="(track.chapters || []).length" class="material-symbols text-success text-sm">check</span>
             </div>
           </div>
+        </template>
+      </div>
     </div>
 
     <div v-if="saving" class="w-full h-full absolute top-0 left-0 bottom-0 right-0 z-30 bg-black/25 flex items-center justify-center">
       <ui-loading-indicator />
     </div>
 
-    <!-- audible chapter lookup modal -->
     <modals-modal v-model="showFindChaptersModal" name="edit-book" :width="500" :processing="findingChapters">
       <template #outer>
         <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
@@ -206,16 +159,12 @@
           </div>
         </div>
         <div v-else class="w-full p-4">
-          <div class="flex mb-4">
-            <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white flex-shrink-0" :aria-label="$strings.ButtonBack" @click="resetChapterLookupData">
-              <span class="material-symbols text-lg">arrow_back</span>
-            </button>
+          <div class="flex justify-between mb-4">
             <p>
-              {{ $strings.LabelDurationFound }} <span class="font-semibold">{{ $secondsToTimestamp(chapterData.runtimeLengthSec) }}</span>
-              <br />
+              {{ $strings.LabelDurationFound }} <span class="font-semibold">{{ $secondsToTimestamp(chapterData.runtimeLengthSec) }}</span
+              ><br />
               <span class="font-semibold" :class="{ 'text-warning': chapters.length !== chapterData.chapters.length }">{{ chapterData.chapters.length }}</span> {{ $strings.LabelChaptersFound }}
             </p>
-            <div class="grow" />
             <p>
               {{ $strings.LabelYourAudiobookDuration }}: <span class="font-semibold">{{ $secondsToTimestamp(mediaDurationRounded) }}</span
               ><br />
@@ -249,49 +198,17 @@
               <p class="pl-2">{{ $strings.MessageChapterStartIsAfter }}</p>
             </div>
           </div>
-          <div class="flex items-center pt-2 justify-between">
-            <div class="flex items-center gap-2">
-              <ui-btn small color="bg-primary" @click="applyChapterNamesOnly">{{ $strings.ButtonMapChapterTitles }}</ui-btn>
+          <div class="flex items-center pt-2">
+            <ui-btn small color="bg-primary" class="mr-1" @click="applyChapterNamesOnly">{{ $strings.ButtonMapChapterTitles }}</ui-btn>
             <ui-tooltip :text="$strings.MessageMapChapterTitles" direction="top" class="flex items-center">
               <span class="material-symbols text-xl text-gray-200">info</span>
             </ui-tooltip>
-            </div>
+            <div class="grow" />
             <ui-btn small color="bg-success" @click="applyChapterData">{{ $strings.ButtonApplyChapters }}</ui-btn>
           </div>
         </div>
       </div>
     </modals-modal>
-
-    <!-- create bulk chapters modal -->
-    <modals-modal v-model="showBulkChapterModal" name="bulk-chapters" :width="400">
-      <template #outer>
-        <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-          <p class="text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderBulkChapterModal }}</p>
-        </div>
-      </template>
-      <div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative p-6">
-        <div class="flex flex-col space-y-8">
-          <p class="text-base">{{ $strings.MessageBulkChapterPattern }}</p>
-
-          <div v-if="detectedPattern" class="text-sm text-gray-400 bg-gray-800 p-2 rounded">
-            <strong>{{ $strings.LabelDetectedPattern }}</strong> "{{ detectedPattern.before }}{{ formatNumberWithPadding(detectedPattern.startingNumber, detectedPattern) }}{{ detectedPattern.after }}"
-            <br />
-            <strong>{{ $strings.LabelNextChapters }}</strong>
-            "{{ detectedPattern.before }}{{ formatNumberWithPadding(detectedPattern.startingNumber + 1, detectedPattern) }}{{ detectedPattern.after }}", "{{ detectedPattern.before }}{{ formatNumberWithPadding(detectedPattern.startingNumber + 2, detectedPattern) }}{{ detectedPattern.after }}", etc.
-          </div>
-          <div class="flex px-1 items-center">
-            <label class="text-base font-medium">{{ $strings.LabelNumberOfChapters }}</label>
-            <div class="grow" />
-            <ui-text-input v-model="bulkChapterCount" type="number" min="1" max="50" class="w-14" :style="{ height: `2em` }" @keyup.enter="addBulkChapters" />
-          </div>
-          <div class="flex px-1 items-center">
-            <ui-btn small @click="showBulkChapterModal = false">{{ $strings.ButtonCancel }}</ui-btn>
-            <div class="grow" />
-            <ui-btn small color="bg-success" @click="addBulkChapters">{{ $strings.ButtonAddChapters }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </modals-modal>
   </div>
 </template>
 
@@ -348,17 +265,7 @@ export default {
       removeBranding: false,
       showSecondInputs: false,
       audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES'],
-      hasChanges: false,
-      timeIncrementAmount: 1,
-      elapsedTime: 0,
-      playStartTime: null,
-      elapsedTimeInterval: null,
-      lockedChapters: new Set(),
-      lastSelectedLockIndex: null,
-      bulkChapterInput: '',
-      showBulkChapterModal: false,
-      bulkChapterCount: 1,
-      detectedPattern: null
+      hasChanges: false
     }
   },
   computed: {
@@ -397,18 +304,9 @@ export default {
     },
     selectedChapterId() {
       return this.selectedChapter ? this.selectedChapter.id : null
-    },
-    allChaptersLocked() {
-      return this.newChapters.length > 0 && this.newChapters.every((chapter) => this.lockedChapters.has(chapter.id))
     }
   },
   methods: {
-    formatNumberWithPadding(number, pattern) {
-      if (!pattern || !pattern.hasLeadingZeros || !pattern.originalPadding) {
-        return number.toString()
-      }
-      return number.toString().padStart(pattern.originalPadding, '0')
-    },
     setChaptersFromTracks() {
       let currentStartTime = 0
       let index = 0
@@ -423,7 +321,7 @@ export default {
         currentStartTime += track.duration
       }
       this.newChapters = chapters
-      this.lockedChapters = new Set()
+
       this.checkChapters()
     },
     toggleRemoveBranding() {
@@ -436,22 +334,19 @@ export default {
 
       const amount = Number(this.shiftAmount)
 
-      // Check if any unlocked chapters would be affected negatively
-      const unlockedChapters = this.newChapters.filter((chap) => !this.lockedChapters.has(chap.id))
+      const lastChapter = this.newChapters[this.newChapters.length - 1]
+      if (lastChapter.start + amount > this.mediaDurationRounded) {
+        this.$toast.error(this.$strings.ToastChaptersInvalidShiftAmountLast)
+        return
+      }
 
-      if (unlockedChapters.length === 0) {
-        this.$toast.warning(this.$strings.ToastChaptersAllLocked)
+      if (this.newChapters[1].start + amount <= 0) {
+        this.$toast.error(this.$strings.ToastChaptersInvalidShiftAmountStart)
         return
       }
 
       for (let i = 0; i < this.newChapters.length; i++) {
         const chap = this.newChapters[i]
-
-        // Skip locked chapters
-        if (this.lockedChapters.has(chap.id)) {
-          continue
-        }
-
         chap.end = Math.min(chap.end + amount, this.mediaDuration)
         if (i > 0) {
           chap.start = Math.max(0, chap.start + amount)
@@ -459,83 +354,6 @@ export default {
       }
       this.checkChapters()
     },
-    incrementChapterTime(chapter, amount) {
-      if (chapter.id === 0 && chapter.start + amount < 0) {
-        return
-      }
-      if (chapter.start + amount >= this.mediaDuration) {
-        return
-      }
-
-      chapter.start = Math.max(0, chapter.start + amount)
-      this.checkChapters()
-    },
-    adjustChapterStartTime(chapter) {
-      const newStartTime = chapter.start + this.elapsedTime
-      chapter.start = newStartTime
-      this.checkChapters()
-      this.$toast.success(this.$strings.ToastChapterStartTimeAdjusted.replace('{0}', this.elapsedTime))
-
-      this.destroyAudioEl()
-    },
-    startElapsedTimeTracking() {
-      this.elapsedTime = 0
-      this.playStartTime = Date.now()
-      this.elapsedTimeInterval = setInterval(() => {
-        this.elapsedTime = Math.floor((Date.now() - this.playStartTime) / 1000)
-      }, 100)
-    },
-    stopElapsedTimeTracking() {
-      if (this.elapsedTimeInterval) {
-        clearInterval(this.elapsedTimeInterval)
-        this.elapsedTimeInterval = null
-      }
-      this.elapsedTime = 0
-      this.playStartTime = null
-    },
-    toggleChapterLock(chapter, event) {
-      const chapterId = chapter.id
-
-      if (event.shiftKey && this.lastSelectedLockIndex !== null) {
-        const startIndex = Math.min(this.lastSelectedLockIndex, chapterId)
-        const endIndex = Math.max(this.lastSelectedLockIndex, chapterId)
-        const shouldLock = !this.lockedChapters.has(chapterId)
-
-        for (let i = startIndex; i <= endIndex; i++) {
-          if (shouldLock) {
-            this.lockedChapters.add(i)
-          } else {
-            this.lockedChapters.delete(i)
-          }
-        }
-      } else {
-        if (this.lockedChapters.has(chapterId)) {
-          this.lockedChapters.delete(chapterId)
-        } else {
-          this.lockedChapters.add(chapterId)
-        }
-      }
-
-      this.lastSelectedLockIndex = chapterId
-      this.lockedChapters = new Set(this.lockedChapters)
-    },
-    lockAllChapters() {
-      this.newChapters.forEach((chapter) => {
-        this.lockedChapters.add(chapter.id)
-      })
-      this.lockedChapters = new Set(this.lockedChapters)
-    },
-    unlockAllChapters() {
-      this.lockedChapters.clear()
-      this.lockedChapters = new Set(this.lockedChapters)
-    },
-    toggleAllChaptersLock() {
-      if (this.allChaptersLocked) {
-        this.unlockAllChapters()
-      } else {
-        this.lockAllChapters()
-      }
-    },
     editItem() {
       this.$store.commit('showEditModal', this.libraryItem)
     },
@@ -550,10 +368,6 @@ export default {
       this.checkChapters()
     },
     removeChapter(chapter) {
-      if (this.lockedChapters.has(chapter.id)) {
-        this.$toast.warning(this.$strings.ToastChapterLocked)
-        return
-      }
       this.newChapters = this.newChapters.filter((ch) => ch.id !== chapter.id)
       this.checkChapters()
     },
@@ -594,14 +408,6 @@ export default {
 
       this.hasChanges = hasChanges
     },
-    getAudioTrackForTime(time) {
-      if (typeof time !== 'number') {
-        return null
-      }
-      return this.tracks.find((at) => {
-        return time >= at.startOffset && time < at.startOffset + at.duration
-      })
-    },
     playChapter(chapter) {
       console.log('Play Chapter', chapter.id)
       if (this.selectedChapterId === chapter.id) {
@@ -616,12 +422,9 @@ export default {
         this.destroyAudioEl()
       }
 
-      const audioTrack = this.getAudioTrackForTime(chapter.start)
-      if (!audioTrack) {
-        console.error('No audio track found for chapter', chapter)
-        return
-      }
-
+      const audioTrack = this.tracks.find((at) => {
+        return chapter.start >= at.startOffset && chapter.start < at.startOffset + at.duration
+      })
       this.selectedChapter = chapter
       this.isLoadingChapter = true
 
@@ -648,7 +451,6 @@ export default {
         console.log('Audio playing')
         this.isLoadingChapter = false
         this.isPlayingChapter = true
-        this.startElapsedTimeTracking()
       })
       audioEl.addEventListener('ended', () => {
         console.log('Audio ended')
@@ -671,10 +473,6 @@ export default {
       this.selectedChapter = null
       this.isPlayingChapter = false
       this.isLoadingChapter = false
-      this.stopElapsedTimeTracking()
-    },
-    resetChapterLookupData() {
-      this.chapterData = null
     },
     saveChapters() {
       this.checkChapters()
@@ -708,7 +506,11 @@ export default {
           this.saving = false
           if (data.updated) {
             this.$toast.success(this.$strings.ToastChaptersUpdated)
-            this.reloadLibraryItem()
+            if (this.previousRoute) {
+              this.$router.push(this.previousRoute)
+            } else {
+              this.$router.push(`/item/${this.libraryItem.id}`)
+            }
           } else {
             this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
           }
@@ -721,7 +523,7 @@ export default {
     },
     applyChapterNamesOnly() {
       this.newChapters.forEach((chapter, index) => {
-        if (this.chapterData.chapters[index] && !this.lockedChapters.has(chapter.id)) {
+        if (this.chapterData.chapters[index]) {
           chapter.title = this.chapterData.chapters[index].title
         }
       })
@@ -733,7 +535,7 @@ export default {
     },
     applyChapterData() {
       let index = 0
-      const audibleChapters = this.chapterData.chapters
+      this.newChapters = this.chapterData.chapters
         .filter((chap) => chap.startOffsetSec < this.mediaDuration)
         .map((chap) => {
           return {
@@ -743,21 +545,6 @@ export default {
             title: chap.title
           }
         })
-
-      const merged = []
-      let audibleIdx = 0
-      for (let i = 0; i < Math.max(this.newChapters.length, audibleChapters.length); i++) {
-        const isLocked = this.lockedChapters.has(i)
-        if (isLocked && this.newChapters[i]) {
-          merged.push({ ...this.newChapters[i], id: i })
-        } else if (audibleChapters[audibleIdx]) {
-          merged.push({ ...audibleChapters[audibleIdx], id: i })
-          audibleIdx++
-        } else if (this.newChapters[i]) {
-          merged.push({ ...this.newChapters[i], id: i })
-        }
-      }
-      this.newChapters = merged
       this.showFindChaptersModal = false
       this.chapterData = null
 
@@ -785,7 +572,7 @@ export default {
           if (data.error) {
             this.asinError = this.$getString(data.stringKey)
           } else {
-            console.log('Chapter data', { ...data })
+            console.log('Chapter data', data)
             this.chapterData = this.removeBranding ? this.removeBrandingFromData(data) : data
           }
         })
@@ -822,11 +609,6 @@ export default {
           data.chapters.pop()
         }
 
-        // Remove Branding durations from Runtime totals
-        data.runtimeLengthMs -= introDuration + outroDuration
-        data.runtimeLengthSec = Math.floor(data.runtimeLengthMs / 1000)
-        console.log('Brandless Chapter data', data)
-
         return data
       } catch {
         return data
@@ -856,7 +638,6 @@ export default {
           }
         ]
       }
-      this.lockedChapters = new Set()
       this.checkChapters()
     },
     removeAllChaptersClick() {
@@ -881,7 +662,11 @@ export default {
         .then((data) => {
           if (data.updated) {
             this.$toast.success(this.$strings.ToastChaptersRemoved)
-            this.reloadLibraryItem()
+            if (this.previousRoute) {
+              this.$router.push(this.previousRoute)
+            } else {
+              this.$router.push(`/item/${this.libraryItem.id}`)
+            }
           } else {
             this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
           }
@@ -894,91 +679,6 @@ export default {
           this.saving = false
         })
     },
-    handleBulkChapterAdd() {
-      const input = this.bulkChapterInput.trim()
-      if (!input) return
-
-      const numberMatch = input.match(/(\d+)/)
-
-      if (numberMatch) {
-        // Extract the base pattern and number, preserving zero-padding
-        const originalNumberString = numberMatch[1]
-        const foundNumber = parseInt(originalNumberString)
-        const numberIndex = numberMatch.index
-        const beforeNumber = input.substring(0, numberIndex)
-        const afterNumber = input.substring(numberIndex + originalNumberString.length)
-
-        this.detectedPattern = {
-          before: beforeNumber,
-          after: afterNumber,
-          startingNumber: foundNumber,
-          originalPadding: originalNumberString.length,
-          hasLeadingZeros: originalNumberString.length > 1 && originalNumberString.startsWith('0')
-        }
-
-        this.bulkChapterCount = 1
-        this.showBulkChapterModal = true
-      } else {
-        this.addSingleChapterFromInput(input)
-      }
-    },
-    addSingleChapterFromInput(title) {
-      // Find the last chapter to determine where to add the new one
-      const lastChapter = this.newChapters[this.newChapters.length - 1]
-      const newStart = lastChapter ? lastChapter.end : 0
-      const newEnd = Math.min(newStart + 300, this.mediaDuration)
-
-      const newChapter = {
-        id: this.newChapters.length,
-        start: newStart,
-        end: newEnd,
-        title: title
-      }
-
-      this.newChapters.push(newChapter)
-      this.bulkChapterInput = ''
-      this.checkChapters()
-    },
-
-    addBulkChapters() {
-      const count = parseInt(this.bulkChapterCount)
-      if (!count || count < 1 || count > 150) {
-        this.$toast.error(this.$strings.ToastBulkChapterInvalidCount)
-        return
-      }
-
-      const { before, after, startingNumber, originalPadding, hasLeadingZeros } = this.detectedPattern
-      const lastChapter = this.newChapters[this.newChapters.length - 1]
-      const baseStart = lastChapter ? lastChapter.start + 1 : 0
-
-      // Add multiple chapters with the detected pattern
-      for (let i = 0; i < count; i++) {
-        const chapterNumber = startingNumber + i
-        let formattedNumber = chapterNumber.toString()
-
-        // Apply zero-padding if the original had leading zeros
-        if (hasLeadingZeros && originalPadding > 1) {
-          formattedNumber = chapterNumber.toString().padStart(originalPadding, '0')
-        }
-
-        const newStart = baseStart + i
-        const newEnd = Math.min(newStart + i + i, this.mediaDuration)
-
-        const newChapter = {
-          id: this.newChapters.length,
-          start: newStart,
-          end: newEnd,
-          title: `${before}${formattedNumber}${after}`
-        }
-
-        this.newChapters.push(newChapter)
-      }
-
-      this.bulkChapterInput = ''
-      this.showBulkChapterModal = false
-      this.detectedPattern = null
-      this.checkChapters()
-    },
     libraryItemUpdated(libraryItem) {
       if (libraryItem.id === this.libraryItem.id) {
         if (!!libraryItem.media.metadata.asin && this.mediaMetadata.asin !== libraryItem.media.metadata.asin) {
@@ -986,18 +686,6 @@ export default {
         }
         this.libraryItem = libraryItem
       }
-    },
-    reloadLibraryItem() {
-      this.$axios
-        .$get(`/api/items/${this.libraryItem.id}?expanded=1`)
-        .then((data) => {
-          this.libraryItem = data
-          this.initChapters()
-        })
-        .catch((error) => {
-          console.error('Failed to reload library item', error)
-          this.$toast.error(this.$strings.ToastFailedToLoadData)
-        })
     }
   },
   mounted() {

client/pages/audiobook/_id/manage.vue

@@ -28,14 +28,14 @@
     <div class="flex justify-center flex-wrap lg:flex-nowrap gap-4">
       <div class="w-full max-w-2xl border border-white/10 bg-bg">
         <div class="flex py-2 px-4">
-          <div class="w-28 min-w-28 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
-          <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
+          <div class="w-1/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
+          <div class="w-2/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
         </div>
         <div class="w-full max-h-72 overflow-auto">
           <template v-for="(value, key, index) in metadataObject">
             <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary/25' : ''">
-              <div class="w-28 min-w-28 font-semibold">{{ key }}</div>
-              <div class="grow">
+              <div class="w-1/3 font-semibold">{{ key }}</div>
+              <div class="w-2/3">
                 {{ value }}
               </div>
             </div>
@@ -45,18 +45,18 @@
       <div class="w-full max-w-2xl border border-white/10 bg-bg">
         <div class="flex py-2 px-4 bg-primary/25">
           <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelChapterTitle }}</div>
-          <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
-          <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
         </div>
         <div class="w-full max-h-72 overflow-auto">
           <p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">{{ $strings.MessageNoChapters }}</p>
           <template v-for="(chapter, index) in metadataChapters">
             <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary/25' : ''">
               <div class="grow font-semibold">{{ chapter.title }}</div>
-              <div class="w-16 min-w-16">
+              <div class="w-24">
                 {{ $secondsToTimestamp(chapter.start) }}
               </div>
-              <div class="w-16 min-w-16">
+              <div class="w-24">
                 {{ $secondsToTimestamp(chapter.end) }}
               </div>
             </div>
@@ -356,8 +356,6 @@ export default {
 
       const encodeOptions = this.$refs.encoderOptionsCard.getEncodingOptions()
 
-      this.encodingOptions = encodeOptions
-
       const queryParams = new URLSearchParams(encodeOptions)
 
       this.processing = true

client/pages/config.vue

@@ -53,7 +53,6 @@ export default {
         else if (pageName === 'sessions') return this.$strings.HeaderListeningSessions
         else if (pageName === 'stats') return this.$strings.HeaderYourStats
         else if (pageName === 'users') return this.$strings.HeaderUsers
-        else if (pageName === 'api-keys') return this.$strings.HeaderApiKeys
         else if (pageName === 'item-metadata-utils') return this.$strings.HeaderItemMetadataUtils
         else if (pageName === 'rss-feeds') return this.$strings.HeaderRSSFeeds
         else if (pageName === 'email') return this.$strings.HeaderEmail

client/pages/config/api-keys/index.vue

@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <app-settings-content :header-text="$strings.HeaderApiKeys">
-      <template #header-items>
-        <div v-if="numApiKeys" class="mx-2 px-1.5 rounded-lg bg-primary/50 text-gray-300/90 text-sm inline-flex items-center justify-center">
-          <span>{{ numApiKeys }}</span>
-        </div>
-
-        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-          <a href="https://www.audiobookshelf.org/guides/api-keys" target="_blank" class="inline-flex">
-            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
-          </a>
-        </ui-tooltip>
-
-        <div class="grow" />
-
-        <ui-btn color="bg-primary" :disabled="loadingUsers || users.length === 0" small @click="setShowApiKeyModal()">{{ $strings.ButtonAddApiKey }}</ui-btn>
-      </template>
-
-      <tables-api-keys-table ref="apiKeysTable" class="pt-2" @edit="setShowApiKeyModal" @numApiKeys="(count) => (numApiKeys = count)" />
-    </app-settings-content>
-    <modals-api-key-modal ref="apiKeyModal" v-model="showApiKeyModal" :api-key="selectedApiKey" :users="users" @created="apiKeyCreated" @updated="apiKeyUpdated" />
-    <modals-api-key-created-modal ref="apiKeyCreatedModal" v-model="showApiKeyCreatedModal" :api-key="selectedApiKey" />
-  </div>
-</template>
-
-<script>
-export default {
-  asyncData({ store, redirect }) {
-    if (!store.getters['user/getIsAdminOrUp']) {
-      redirect('/')
-    }
-  },
-  data() {
-    return {
-      loadingUsers: false,
-      selectedApiKey: null,
-      showApiKeyModal: false,
-      showApiKeyCreatedModal: false,
-      numApiKeys: 0,
-      users: []
-    }
-  },
-  methods: {
-    apiKeyCreated(apiKey) {
-      this.numApiKeys++
-      this.selectedApiKey = apiKey
-      this.showApiKeyCreatedModal = true
-      if (this.$refs.apiKeysTable) {
-        this.$refs.apiKeysTable.addApiKey(apiKey)
-      }
-    },
-    apiKeyUpdated(apiKey) {
-      if (this.$refs.apiKeysTable) {
-        this.$refs.apiKeysTable.updateApiKey(apiKey)
-      }
-    },
-    setShowApiKeyModal(selectedApiKey) {
-      this.selectedApiKey = selectedApiKey
-      this.showApiKeyModal = true
-    },
-    loadUsers() {
-      this.loadingUsers = true
-      this.$axios
-        .$get('/api/users')
-        .then((res) => {
-          this.users = res.users.sort((a, b) => {
-            return a.createdAt - b.createdAt
-          })
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-        })
-        .finally(() => {
-          this.loadingUsers = false
-        })
-    }
-  },
-  mounted() {
-    this.loadUsers()
-  },
-  beforeDestroy() {}
-}
-</script>

client/pages/config/index.vue

@@ -131,26 +131,35 @@
           </div>
 
           <div class="grow py-2">
-            <ui-dropdown :label="$strings.LabelSettingsDateFormat" v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-72" @input="(val) => updateSettingsKey('dateFormat', val)" />
+            <ui-dropdown :label="$strings.LabelSettingsDateFormat" v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-52" @input="(val) => updateSettingsKey('dateFormat', val)" />
             <p class="text-xs ml-1 text-white/60">{{ $strings.LabelExample }}: {{ dateExample }}</p>
           </div>
 
           <div class="grow py-2">
-            <ui-dropdown :label="$strings.LabelSettingsTimeFormat" v-model="newServerSettings.timeFormat" :items="timeFormats" small class="max-w-72" @input="(val) => updateSettingsKey('timeFormat', val)" />
+            <ui-dropdown :label="$strings.LabelSettingsTimeFormat" v-model="newServerSettings.timeFormat" :items="timeFormats" small class="max-w-52" @input="(val) => updateSettingsKey('timeFormat', val)" />
             <p class="text-xs ml-1 text-white/60">{{ $strings.LabelExample }}: {{ timeExample }}</p>
           </div>
 
           <div class="py-2">
-            <ui-dropdown :label="$strings.LabelLanguageDefaultServer" ref="langDropdown" v-model="newServerSettings.language" :items="$languageCodeOptions" small class="max-w-72" @input="updateServerLanguage" />
+            <ui-dropdown :label="$strings.LabelLanguageDefaultServer" ref="langDropdown" v-model="newServerSettings.language" :items="$languageCodeOptions" small class="max-w-52" @input="updateServerLanguage" />
           </div>
 
-          <div class="pt-4">
-            <h2 class="font-semibold">{{ $strings.HeaderSettingsSecurity }}</h2>
+          <!-- old experimental features -->
+          <!-- <div class="pt-4">
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsExperimental }}</h2>
           </div>
 
-          <div class="py-2">
-            <ui-multi-select v-model="newServerSettings.allowedOrigins" :items="newServerSettings.allowedOrigins" :label="$strings.LabelCorsAllowed" class="max-w-72" @input="updateCorsOrigins" />
-          </div>
+          <div class="flex items-center py-2">
+            <ui-toggle-switch labeledBy="settings-experimental-features" v-model="showExperimentalFeatures" />
+            <ui-tooltip :text="$strings.LabelSettingsExperimentalFeaturesHelp">
+              <p class="pl-4">
+                <span id="settings-experimental-features">{{ $strings.LabelSettingsExperimentalFeatures }}</span>
+                <a :aria-label="$strings.LabelSettingsExperimentalFeaturesHelp" href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
+                  <span class="material-symbols icon-text">info</span>
+                </a>
+              </p>
+            </ui-tooltip>
+          </div> -->
         </div>
       </div>
     </app-settings-content>
@@ -247,8 +256,7 @@ export default {
       return this.$store.state.serverSettings
     },
     providers() {
-      // Use book cover providers for the cover provider dropdown
-      return this.$store.state.scanners.bookCoverProviders || []
+      return this.$store.state.scanners.providers
     },
     dateFormats() {
       return this.$store.state.globals.dateFormats
@@ -315,27 +323,6 @@ export default {
     updateServerLanguage(val) {
       this.updateSettingsKey('language', val)
     },
-    updateCorsOrigins(val) {
-      const validOrigins = []
-      const invalidOrigins = []
-
-      val.forEach((origin) => {
-        const trimmedOrigin = origin.trim().toLowerCase()
-        try {
-          new URL(trimmedOrigin)
-          validOrigins.push(trimmedOrigin)
-        } catch {
-          invalidOrigins.push(trimmedOrigin)
-        }
-      })
-
-      if (invalidOrigins.length > 0) {
-        this.$toast.error(this.$strings.ToastInvalidUrls)
-      }
-
-      this.newServerSettings.allowedOrigins = validOrigins
-      this.updateSettingsKey('allowedOrigins', validOrigins)
-    },
     updateSettingsKey(key, val) {
       if (key === 'scannerDisableWatcher') {
         this.newServerSettings.scannerDisableWatcher = val
@@ -365,7 +352,6 @@ export default {
     initServerSettings() {
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
       this.newServerSettings.sortingPrefixes = [...(this.newServerSettings.sortingPrefixes || [])]
-      this.newServerSettings.allowedOrigins = [...(this.newServerSettings.allowedOrigins || [])]
       this.scannerEnableWatcher = !this.newServerSettings.scannerDisableWatcher
 
       this.homepageUseBookshelfView = this.newServerSettings.homeBookshelfView != this.$constants.BookshelfView.DETAIL
@@ -390,8 +376,8 @@ export default {
     },
     purgeItemsCache() {
       const payload = {
+        // message: `This will delete the entire folder at <code>/metadata/cache/items</code>.<br />Are you sure you want to purge items cache?`,
         message: this.$strings.MessageConfirmPurgeItemsCache,
-        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.sendPurgeItemsCache()
@@ -417,8 +403,6 @@ export default {
   },
   mounted() {
     this.initServerSettings()
-    // Fetch providers if not already loaded (for cover provider dropdown)
-    this.$store.dispatch('scanners/fetchProviders')
   }
 }
 </script>

client/pages/config/item-metadata-utils/genres.vue

@@ -90,9 +90,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameGenre', [this.editingGenre, this.newGenreName])
       if (genreNameExists) {
-        message += ` ${this.$strings.MessageConfirmRenameGenreMergeNote}`
+        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameGenreMergeNote}</span>`
       } else if (genreNameExistsOfDifferentCase) {
-        message += ` ${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}`
+        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}</span>`
       }
 
       const payload = {

client/pages/config/item-metadata-utils/tags.vue

@@ -86,9 +86,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameTag', [this.editingTag, this.newTagName])
       if (tagNameExists) {
-        message += ` ${this.$strings.MessageConfirmRenameTagMergeNote}`
+        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameTagMergeNote}</span>`
       } else if (tagNameExistsOfDifferentCase) {
-        message += ` ${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}`
+        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}</span>`
       }
 
       const payload = {

client/pages/config/rss-feeds.vue

@@ -78,10 +78,10 @@ export default {
   },
   computed: {
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/pages/config/sessions.vue

@@ -6,7 +6,6 @@
       </div>
 
       <div v-if="listeningSessions.length" class="block max-w-full relative">
-        <div class="overflow-x-auto">
         <table class="userSessionsTable">
           <tr class="bg-primary/40">
             <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
@@ -66,14 +65,10 @@
               <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
             </td>
             <td class="hidden sm:table-cell max-w-32 min-w-32">
-                <p class="text-xs truncate">
-                  <template v-for="(line, index) in getDeviceInfoLines(session.deviceInfo)">
-                    <br v-if="index > 0" :key="'br-' + index" />{{ line }}
-                  </template>
-                </p>
+              <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
             <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
-                <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+              <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
             </td>
             <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
               <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
@@ -85,7 +80,6 @@
             </td>
           </tr>
         </table>
-        </div>
         <!-- table bottom options -->
         <div class="flex items-center my-2">
           <div class="grow" />
@@ -134,11 +128,7 @@
               <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
             </td>
             <td class="hidden sm:table-cell max-w-32 min-w-32">
-              <p class="text-xs truncate">
-                <template v-for="(line, index) in getDeviceInfoLines(session.deviceInfo)">
-                  <br v-if="index > 0" :key="'br-' + index" />{{ line }}
-                </template>
-              </p>
+              <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
             <td class="text-center">
               <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
@@ -180,11 +170,7 @@
               <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
             </td>
             <td class="hidden sm:table-cell max-w-32 min-w-32">
-              <p class="text-xs truncate">
-                <template v-for="(line, index) in getDeviceInfoLines(session.deviceInfo)">
-                  <br v-if="index > 0" :key="'br-' + index" />{{ line }}
-                </template>
-              </p>
+              <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
             <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
               <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
@@ -264,10 +250,10 @@ export default {
       return user?.username || null
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     },
     numSelected() {
       return this.listeningSessions.filter((s) => s.selected).length
@@ -445,16 +431,16 @@ export default {
       this.selectedSession = session
       this.showSessionModal = true
     },
-    getDeviceInfoLines(deviceInfo) {
-      if (!deviceInfo) return []
-      const lines = []
+    getDeviceInfoString(deviceInfo) {
+      if (!deviceInfo) return ''
+      var lines = []
       if (deviceInfo.clientName) lines.push(`${deviceInfo.clientName} ${deviceInfo.clientVersion || ''}`)
       if (deviceInfo.osName) lines.push(`${deviceInfo.osName} ${deviceInfo.osVersion}`)
       if (deviceInfo.browserName) lines.push(deviceInfo.browserName)
 
       if (deviceInfo.manufacturer && deviceInfo.model) lines.push(`${deviceInfo.manufacturer} ${deviceInfo.model}`)
       if (deviceInfo.sdkVersion) lines.push(`SDK Version: ${deviceInfo.sdkVersion}`)
-      return lines
+      return lines.join('<br>')
     },
     getPlayMethodName(playMethod) {
       if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'

client/pages/config/users/_id/index.vue

@@ -13,10 +13,8 @@
         <widgets-online-indicator :value="!!userOnline" />
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
-      <div v-if="legacyToken" class="text-xs space-y-2 mt-4">
-        <ui-text-input-with-label label="Legacy API Token" :value="legacyToken" readonly show-copy />
-
-        <p class="text-warning" v-html="$strings.MessageAuthenticationLegacyTokenWarning" />
+      <div v-if="userToken" class="flex text-xs mt-4">
+        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly show-copy />
       </div>
       <div class="w-full h-px bg-white/10 my-2" />
       <div class="py-2">
@@ -102,11 +100,8 @@ export default {
     }
   },
   computed: {
-    legacyToken() {
-      return this.user.token
-    },
     userToken() {
-      return this.user.accessToken
+      return this.user.token
     },
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
@@ -134,10 +129,10 @@ export default {
       return this.listeningSessions.sessions[0]
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {

client/pages/config/users/_id/sessions.vue

@@ -19,7 +19,6 @@
       <div class="py-2">
         <h1 class="text-lg mb-2 text-white/90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1>
         <div v-if="listeningSessions.length">
-          <div class="overflow-x-auto">
           <table class="userSessionsTable">
             <tr class="bg-primary/40">
               <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
@@ -38,14 +37,10 @@
                 <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
               </td>
               <td class="hidden sm:table-cell min-w-32 max-w-32">
-                <p class="text-xs truncate">
-                  <template v-for="(line, index) in getDeviceInfoLines(session.deviceInfo)">
-                    <br v-if="index > 0" :key="'br-' + index" />{{ line }}
-                  </template>
-                </p>
+                <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
               </td>
               <td class="text-center">
-                  <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+                <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
               </td>
               <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
                 <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
@@ -57,7 +52,6 @@
               </td>
             </tr>
           </table>
-          </div>
           <div class="flex items-center justify-end py-1">
             <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
             <p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>
@@ -104,10 +98,10 @@ export default {
       return this.$store.getters['users/getIsUserOnline'](this.user.id)
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     timeFormat() {
-      return this.$store.getters['getServerSetting']('timeFormat')
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -197,16 +191,16 @@ export default {
       this.selectedSession = session
       this.showSessionModal = true
     },
-    getDeviceInfoLines(deviceInfo) {
-      if (!deviceInfo) return []
-      const lines = []
+    getDeviceInfoString(deviceInfo) {
+      if (!deviceInfo) return ''
+      var lines = []
       if (deviceInfo.clientName) lines.push(`${deviceInfo.clientName} ${deviceInfo.clientVersion || ''}`)
       if (deviceInfo.osName) lines.push(`${deviceInfo.osName} ${deviceInfo.osVersion}`)
       if (deviceInfo.browserName) lines.push(deviceInfo.browserName)
 
       if (deviceInfo.manufacturer && deviceInfo.model) lines.push(`${deviceInfo.manufacturer} ${deviceInfo.model}`)
       if (deviceInfo.sdkVersion) lines.push(`SDK Version: ${deviceInfo.sdkVersion}`)
-      return lines
+      return lines.join('<br>')
     },
     getPlayMethodName(playMethod) {
       if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'

client/pages/item/_id/index.vue

@@ -193,7 +193,7 @@ export default {
       return `${process.env.serverUrl}/api/items/${this.libraryItemId}/download?token=${this.userToken}`
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
@@ -819,17 +819,6 @@ export default {
   -webkit-line-clamp: 4;
   max-height: calc(6 * 1lh);
 }
-
-/* Safari-specific fix for the description clamping */
-@supports (-webkit-touch-callout: none) {
-  #item-description {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    max-height: calc(6 * 1lh);
-  }
-}
-
 #item-description.show-full {
   -webkit-line-clamp: unset;
   max-height: 999rem;

client/pages/library/_library/narrators.vue

@@ -10,7 +10,7 @@
         </tr>
         <tr v-for="narrator in narrators" :key="narrator.id">
           <td>
-            <nuxt-link v-if="selectedNarrator?.id !== narrator.id" :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="text-sm md:text-base text-gray-100 hover:underline">{{ narrator.name }}</nuxt-link>
+            <p v-if="selectedNarrator?.id !== narrator.id" class="text-sm md:text-base text-gray-100">{{ narrator.name }}</p>
             <form v-else @submit.prevent="saveClick">
               <ui-text-input v-model="newNarratorName" />
             </form>

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

@@ -141,7 +141,7 @@ export default {
       return episodeIds
     },
     dateFormat() {
-      return this.$store.getters['getServerSetting']('dateFormat')
+      return this.$store.state.serverSettings.dateFormat
     }
   },
   methods: {

client/pages/library/_library/search.vue

@@ -22,7 +22,6 @@ export default {
     })
     results = {
       podcasts: results?.podcast || [],
-      episodes: results?.episodes || [],
       books: results?.book || [],
       authors: results?.authors || [],
       series: results?.series || [],
@@ -62,7 +61,6 @@ export default {
       })
       this.results = {
         podcasts: results?.podcast || [],
-        episodes: results?.episodes || [],
         books: results?.book || [],
         authors: results?.authors || [],
         series: results?.series || [],

client/pages/login.vue

@@ -40,15 +40,6 @@
 
           <p v-if="error" class="text-error text-center py-2">{{ error }}</p>
 
-          <div v-if="showNewAuthSystemMessage" class="mb-4">
-            <widgets-alert type="warning">
-              <div>
-                <p>{{ $strings.MessageAuthenticationSecurityMessage }}</p>
-                <a v-if="showNewAuthSystemAdminMessage" href="https://github.com/advplyr/audiobookshelf/discussions/4460" target="_blank" class="underline">{{ $strings.LabelMoreInfo }}</a>
-              </div>
-            </widgets-alert>
-          </div>
-
           <form v-show="login_local" @submit.prevent="submitForm">
             <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelUsername }}</label>
             <ui-text-input v-model.trim="username" :disabled="processing" class="mb-3 w-full" inputName="username" />
@@ -94,10 +85,7 @@ export default {
       MetadataPath: '',
       login_local: true,
       login_openid: false,
-      authFormData: null,
-      // New JWT auth system re-login flags
-      showNewAuthSystemMessage: false,
-      showNewAuthSystemAdminMessage: false
+      authFormData: null
     }
   },
   watch: {
@@ -189,20 +177,13 @@ export default {
         require('@/plugins/chromecast.js').default(this)
       }
 
-      this.$store.commit('libraries/setLastLoad', 0) // Ensure libraries get loaded again when switching users
-      this.$store.commit('libraries/setCurrentLibrary', { id: userDefaultLibraryId })
+      this.$store.commit('libraries/setCurrentLibrary', userDefaultLibraryId)
       this.$store.commit('user/setUser', user)
-      // Access token only returned from login, not authorize
-      if (user.accessToken) {
-        this.$store.commit('user/setAccessToken', user.accessToken)
-      }
 
       this.$store.dispatch('user/loadUserSettings')
     },
     async submitForm() {
       this.error = null
-      this.showNewAuthSystemMessage = false
-      this.showNewAuthSystemAdminMessage = false
       this.processing = true
 
       const payload = {
@@ -229,8 +210,6 @@ export default {
 
       this.processing = true
 
-      this.$store.commit('user/setAccessToken', token)
-
       return this.$axios
         .$post('/api/authorize', null, {
           headers: {
@@ -238,24 +217,14 @@ export default {
           }
         })
         .then((res) => {
-          // Force re-login if user is using an old token with no expiration
-          if (res.user.isOldToken) {
-            this.username = res.user.username
-            this.showNewAuthSystemMessage = true
-            // Admin user sees link to github discussion
-            this.showNewAuthSystemAdminMessage = res.user.type === 'admin' || res.user.type === 'root'
-            return false
-          }
-
           this.setUser(res)
+          this.processing = false
           return true
         })
         .catch((error) => {
           console.error('Authorize error', error)
-          return false
-        })
-        .finally(() => {
           this.processing = false
+          return false
         })
     },
     checkStatus() {
@@ -299,8 +268,8 @@ export default {
       }
 
       if (authMethods.includes('openid')) {
-        // Auto redirect unless query string ?autoLaunch=0 OR when explicity requested through ?autoLaunch=1
-        if ((this.authFormData?.authOpenIDAutoLaunch && this.$route.query?.autoLaunch !== '0') || this.$route.query?.autoLaunch == '1') {
+        // Auto redirect unless query string ?autoLaunch=0
+        if (this.authFormData?.authOpenIDAutoLaunch && this.$route.query?.autoLaunch !== '0') {
           window.location.href = this.openidAuthUri
         }
 
@@ -311,9 +280,8 @@ export default {
     }
   },
   async mounted() {
-    // Token passed as query parameter after successful oidc login
-    if (this.$route.query?.accessToken) {
-      localStorage.setItem('token', this.$route.query.accessToken)
+    if (this.$route.query?.setToken) {
+      localStorage.setItem('token', this.$route.query.setToken)
     }
     if (localStorage.getItem('token')) {
       if (await this.checkAuth()) return // if valid user no need to check status

client/pages/upload/index.vue

@@ -155,7 +155,7 @@ export default {
     },
     providers() {
       if (this.selectedLibraryIsPodcast) return this.$store.state.scanners.podcastProviders
-      return this.$store.state.scanners.bookProviders
+      return this.$store.state.scanners.providers
     },
     canFetchMetadata() {
       return !this.selectedLibraryIsPodcast && this.fetchMetadata.enabled
@@ -297,15 +297,6 @@ export default {
         ref.setUploadStatus(status)
       }
     },
-    updateItemCardProgress(index, progress) {
-      var ref = this.$refs[`itemCard-${index}`]
-      if (ref && ref.length) ref = ref[0]
-      if (!ref) {
-        console.error('Book card ref not found', index, this.$refs)
-      } else {
-        ref.setUploadProgress(progress)
-      }
-    },
     async uploadItem(item) {
       var form = new FormData()
       form.set('title', item.title)
@@ -321,20 +312,8 @@ export default {
         form.set(`${index++}`, file)
       })
 
-      const config = {
-        onUploadProgress: (progressEvent) => {
-          if (progressEvent.lengthComputable) {
-            const progress = {
-              loaded: progressEvent.loaded,
-              total: progressEvent.total
-            }
-            this.updateItemCardProgress(item.index, progress)
-          }
-        }
-      }
-
       return this.$axios
-        .$post('/api/upload', form, config)
+        .$post('/api/upload', form)
         .then(() => true)
         .catch((error) => {
           console.error('Failed to upload item', error)
@@ -380,14 +359,15 @@ export default {
       // Check if path already exists before starting upload
       //  uploading fails if path already exists
       for (const item of items) {
+        const filepath = Path.join(this.selectedFolder.fullPath, item.directory)
         const exists = await this.$axios
-          .$post(`/api/filesystem/pathexists`, { directory: item.directory, folderPath: this.selectedFolder.fullPath })
+          .$post(`/api/filesystem/pathexists`, { filepath, directory: item.directory, folderPath: this.selectedFolder.fullPath })
           .then((data) => {
             if (data.exists) {
               if (data.libraryItemTitle) {
                 this.$toast.error(this.$getString('ToastUploaderItemExistsInSubdirectoryError', [data.libraryItemTitle]))
               } else {
-                this.$toast.error(this.$getString('ToastUploaderFilepathExistsError', [Path.join(this.selectedFolder.fullPath, item.directory)]))
+                this.$toast.error(this.$getString('ToastUploaderFilepathExistsError', [filepath]))
               }
             }
             return data.exists
@@ -415,8 +395,6 @@ export default {
     this.setMetadataProvider()
 
     this.setDefaultFolder()
-    // Fetch providers if not already loaded
-    this.$store.dispatch('scanners/fetchProviders')
     window.addEventListener('dragenter', this.dragenter)
     window.addEventListener('dragleave', this.dragleave)
     window.addEventListener('dragover', this.dragover)

client/players/LocalAudioPlayer.js

@@ -46,20 +46,7 @@ export default class LocalAudioPlayer extends EventEmitter {
     this.player.addEventListener('loadedmetadata', this.evtLoadedMetadata.bind(this))
     this.player.addEventListener('timeupdate', this.evtTimeupdate.bind(this))
 
-    var mimeTypes = [
-      'audio/flac',
-      'audio/mpeg',
-      'audio/mp4',
-      'audio/ogg',
-      'audio/aac',
-      'audio/x-ms-wma',
-      'audio/x-aiff',
-      'audio/webm',
-      // `audio/matroska` is the correct mimetype, but the server still uses `audio/x-matroska`
-      // ref: https://www.iana.org/assignments/media-types/media-types.xhtml
-      'audio/matroska',
-      'audio/x-matroska'
-    ]
+    var mimeTypes = ['audio/flac', 'audio/mpeg', 'audio/mp4', 'audio/ogg', 'audio/aac', 'audio/x-ms-wma', 'audio/x-aiff', 'audio/webm']
     var mimeTypeCanPlayMap = {}
     mimeTypes.forEach((mt) => {
       var canPlay = this.player.canPlayType(mt)

client/plugins/axios.js

@@ -1,19 +1,4 @@
-export default function ({ $axios, store, $root, app }) {
-  // Track if we're currently refreshing to prevent multiple refresh attempts
-  let isRefreshing = false
-  let failedQueue = []
-
-  const processQueue = (error, token = null) => {
-    failedQueue.forEach(({ resolve, reject }) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve(token)
-      }
-    })
-    failedQueue = []
-  }
-
+export default function ({ $axios, store, $config }) {
   $axios.onRequest((config) => {
     if (!config.url) {
       console.error('Axios request invalid config', config)
@@ -22,7 +7,7 @@ export default function ({ $axios, store, $root, app }) {
     if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
       return
     }
-    const bearerToken = store.getters['user/getToken']
+    const bearerToken = store.state.user.user?.token || null
     if (bearerToken) {
       config.headers.common['Authorization'] = `Bearer ${bearerToken}`
     }
@@ -32,79 +17,9 @@ export default function ({ $axios, store, $root, app }) {
     }
   })
 
-  $axios.onError(async (error) => {
-    const originalRequest = error.config
+  $axios.onError((error) => {
     const code = parseInt(error.response && error.response.status)
     const message = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
-
     console.error('Axios error', code, message)
-
-    // Handle 401 Unauthorized (token expired)
-    if (code === 401 && !originalRequest._retry) {
-      // Skip refresh for auth endpoints to prevent infinite loops
-      if (originalRequest.url === '/auth/refresh' || originalRequest.url === '/login') {
-        // Refresh failed or login failed, redirect to login
-        store.commit('user/setUser', null)
-        store.commit('user/setAccessToken', null)
-        app.router.push('/login')
-        return Promise.reject(error)
-      }
-
-      if (isRefreshing) {
-        // If already refreshing, queue this request
-        return new Promise((resolve, reject) => {
-          failedQueue.push({ resolve, reject })
-        })
-          .then((token) => {
-            if (!originalRequest.headers) {
-              originalRequest.headers = {}
-            }
-            originalRequest.headers['Authorization'] = `Bearer ${token}`
-            return $axios(originalRequest)
-          })
-          .catch((err) => {
-            return Promise.reject(err)
-          })
-      }
-
-      originalRequest._retry = true
-      isRefreshing = true
-
-      try {
-        // Attempt to refresh the token
-        // Updates store if successful, otherwise clears store and throw error
-        const newAccessToken = await store.dispatch('user/refreshToken')
-        if (!newAccessToken) {
-          console.error('No new access token received')
-          return Promise.reject(error)
-        }
-
-        // Update the original request with new token
-        if (!originalRequest.headers) {
-          originalRequest.headers = {}
-        }
-        originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`
-
-        // Process any queued requests
-        processQueue(null, newAccessToken)
-
-        // Retry the original request
-        return $axios(originalRequest)
-      } catch (refreshError) {
-        console.error('Token refresh failed:', refreshError)
-
-        // Process queued requests with error
-        processQueue(refreshError, null)
-
-        // Redirect to login
-        app.router.push('/login')
-
-        return Promise.reject(refreshError)
-      } finally {
-        isRefreshing = false
-      }
-    }
-
-    return Promise.reject(error)
   })
 }

client/plugins/i18n.js

@@ -5,8 +5,6 @@ import { supplant } from './utils'
 const defaultCode = 'en-us'
 
 const languageCodeMap = {
-  ar: { label: 'عربي', dateFnsLocale: 'ar' },
-  be: { label: 'Беларуская', dateFnsLocale: 'be' },
   bg: { label: 'Български', dateFnsLocale: 'bg' },
   bn: { label: 'বাংলা', dateFnsLocale: 'bn' },
   ca: { label: 'Català', dateFnsLocale: 'ca' },
@@ -23,16 +21,13 @@ const languageCodeMap = {
   it: { label: 'Italiano', dateFnsLocale: 'it' },
   lt: { label: 'Lietuvių', dateFnsLocale: 'lt' },
   hu: { label: 'Magyar', dateFnsLocale: 'hu' },
-  ko: { label: '한국어', dateFnsLocale: 'ko' },
   nl: { label: 'Nederlands', dateFnsLocale: 'nl' },
   no: { label: 'Norsk', dateFnsLocale: 'no' },
   pl: { label: 'Polski', dateFnsLocale: 'pl' },
   'pt-br': { label: 'Português (Brasil)', dateFnsLocale: 'ptBR' },
   ru: { label: 'Русский', dateFnsLocale: 'ru' },
-  sk: { label: 'Slovenčina', dateFnsLocale: 'sk' },
   sl: { label: 'Slovenščina', dateFnsLocale: 'sl' },
   sv: { label: 'Svenska', dateFnsLocale: 'sv' },
-  tr: { label: 'Türkçe', dateFnsLocale: 'tr' },
   uk: { label: 'Українська', dateFnsLocale: 'uk' },
   'vi-vn': { label: 'Tiếng Việt', dateFnsLocale: 'vi' },
   'zh-cn': { label: '简体中文 (Simplified Chinese)', dateFnsLocale: 'zhCN' },
@@ -50,7 +45,6 @@ const podcastSearchRegionMap = {
   au: { label: 'Australia' },
   br: { label: 'Brasil' },
   be: { label: 'België / Belgique / Belgien' },
-  by: { label: 'Беларусь' },
   cz: { label: 'Česko' },
   dk: { label: 'Danmark' },
   de: { label: 'Deutschland' },
@@ -70,7 +64,6 @@ const podcastSearchRegionMap = {
   pt: { label: 'Portugal' },
   ru: { label: 'Россия' },
   ch: { label: 'Schweiz / Suisse / Svizzera' },
-  sk: { label: 'Slovensko' },
   se: { label: 'Sverige' },
   vn: { label: 'Việt Nam' },
   ua: { label: 'Україна' },