Version bump v2.17.2

Translations update from Hosted Weblate

.github/pull_request_template.md

@@ -0,0 +1,33 @@
+<!--
+For Work In Progress Pull Requests, please use the Draft PR feature,
+see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
+
+If you do not follow this template, the PR may be closed without review.
+
+Please ensure all checks pass.
+If you are a new contributor, the workflows will need to be manually approved before they run.
+-->
+
+## Brief summary
+
+<!-- Please provide a brief summary of what your PR attempts to achieve. -->
+
+## Which issue is fixed?
+
+<!-- Which issue number does this PR fix? Ex: "Fixes #1234" -->
+
+## In-depth Description
+
+<!--
+Describe your solution in more depth.
+How does it work? Why is this the best solution?
+Does it solve a problem that affects multiple users or is this an edge case for your setup?
+-->
+
+## How have you tested this?
+
+<!-- Please describe in detail with reproducible steps how you tested your changes. -->
+
+## Screenshots
+
+<!-- If your PR includes any changes to the web client, please include screenshots or a short video from before and after your changes. -->

.github/workflows/codeql.yml

@@ -1,11 +1,25 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ 'master' ]
+    branches: ['master']
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ 'master' ]
+    branches: ['master']
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
   schedule:
     - cron: '16 5 * * 4'
 
@@ -21,45 +35,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Use only 'java' to analyze code written in Java, Kotlin or both
         # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
+      - name: Checkout repository
-      uses: actions/checkout@v3
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
+      # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
+      - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v2
-      with:
+        with:
-        languages: ${{ matrix.language }}
+          languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
+          # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
+          # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # queries: security-extended,security-and-quality
 
+      # 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@v2
 
-    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # ℹ️ Command-line programs to run using the OS shell.
-    # If this step fails, then you should remove it and run the build manually (see below)
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
 
-    # ℹ️ Command-line programs to run using the OS shell.
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      # - run: |
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
+      - name: Perform CodeQL Analysis
-    #     echo "Run, Build Application using script"
+        uses: github/codeql-action/analyze@v2
-    #     ./location_of_script_within_repo/buildscript.sh
+        with:
-
+          category: '/language:${{matrix.language}}'
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"

.github/workflows/docker-build.yml

@@ -70,6 +70,7 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
           context: .
           platforms: linux/amd64,linux/arm64
           push: true

.github/workflows/integration-test.yml

@@ -5,6 +5,13 @@ on:
   push:
     branches-ignore:
       - 'dependabot/**' # Don't run dependabot branches, as they are already covered by pull requests
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
 
 jobs:
   build:

.gitignore

@@ -16,6 +16,7 @@
 /ffmpeg*
 /ffprobe*
 /unicode*
+/libnusqlite3*
 
 sw.*
 .DS_STORE

Dockerfile

@@ -11,20 +11,35 @@ FROM node:20-alpine
 ENV NODE_ENV=production
 
 RUN apk update && \
-    apk add --no-cache --update \
+  apk add --no-cache --update \
-    curl \
+  curl \
-    tzdata \
+  tzdata \
-    ffmpeg \
+  ffmpeg \
-    make \
+  make \
-    gcompat \
+  python3 \
-    python3 \
+  g++ \
-    g++ \
+  tini \
-    tini
+  unzip
 
 COPY --from=build /client/dist /client/dist
 COPY index.js package* /
 COPY 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" ;; \
+  "linux/arm64") \
+  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-arm64.zip" ;; \
+  *) echo "Unsupported platform: $TARGETPLATFORM" && exit 1 ;; \
+  esac && \
+  unzip /tmp/library.zip -d $NUSQLITE3_DIR && \
+  rm /tmp/library.zip
+
 RUN npm ci --only=production
 
 RUN apk del make python3 g++

client/components/app/Appbar.vue

@@ -264,7 +264,6 @@ export default {
       libraryItems.forEach((item) => {
         let subtitle = ''
         if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
-        else if (item.mediaType === 'music') subtitle = item.media.metadata.artists.join(', ')
         queueItems.push({
           libraryItemId: item.id,
           libraryId: item.libraryId,

client/components/app/BookShelfCategorized.vue

@@ -347,6 +347,13 @@ export default {
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
 
+      // First items added to library
+      const isThisLibrary = libraryItems.some((li) => li.libraryId === this.currentLibraryId)
+      if (!this.shelves.length && !this.search && isThisLibrary) {
+        this.fetchCategories()
+        return
+      }
+
       const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
       if (!recentlyAddedShelf) return
 

client/components/app/BookShelfRow.vue

@@ -24,7 +24,7 @@
         </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
+            <cards-author-card :key="entity.id" :authorMount="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
           </template>
         </div>
         <div v-if="shelf.type === 'narrators'" class="flex items-center">

client/components/app/BookShelfToolbar.vue

@@ -30,7 +30,7 @@
         <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
         <span v-else class="material-symbols text-lg">&#xe431;</span>
       </nuxt-link>
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
         <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
           <path
@@ -50,7 +50,7 @@
           {{ seriesName }}
         </p>
         <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
-          <span class="font-mono">{{ numShowing }}</span>
+          <span class="font-mono">{{ $formatNumber(numShowing) }}</span>
         </div>
         <div class="flex-grow" />
 
@@ -62,8 +62,8 @@
         <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
       </template>
       <!-- library & collections page -->
-      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
-        <p class="hidden md:block">{{ numShowing }} {{ entityName }}</p>
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
 
         <div class="flex-grow hidden sm:inline-block" />
 
@@ -80,7 +80,7 @@
         <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
 
         <!-- issues page remove all button -->
-        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
+        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ $formatNumber(numShowing) }} {{ entityName }}</ui-btn>
 
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
@@ -92,12 +92,14 @@
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- authors page -->
-      <template v-else-if="page === 'authors'">
+      <template v-else-if="isAuthorsPage">
-        <div class="flex-grow" />
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
-        <ui-btn v-if="userCanUpdate && authors?.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+
+        <div class="flex-grow hidden sm:inline-block" />
+        <ui-btn v-if="userCanUpdate && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
 
         <!-- author sort select -->
-        <controls-sort-select v-if="authors?.length" v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
+        <controls-sort-select v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
       </template>
       <!-- home page -->
       <template v-else-if="isHome">
@@ -117,11 +119,7 @@ export default {
       type: Object,
       default: () => null
     },
-    searchQuery: String,
+    searchQuery: String
-    authors: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
@@ -246,9 +244,6 @@ export default {
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
-    isMusicLibrary() {
-      return this.currentLibraryMediaType === 'music'
-    },
     isLibraryPage() {
       return this.page === ''
     },
@@ -271,7 +266,7 @@ export default {
       return this.$route.name === 'library-library-podcast-latest'
     },
     isAuthorsPage() {
-      return this.$route.name === 'library-library-authors'
+      return this.page === 'authors'
     },
     isAlbumsPage() {
       return this.page === 'albums'
@@ -281,13 +276,13 @@ export default {
     },
     entityName() {
       if (this.isAlbumsPage) return 'Albums'
-      if (this.isMusicLibrary) return 'Tracks'
 
       if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
       if (!this.page) return this.$strings.LabelBooks
       if (this.isSeriesPage) return this.$strings.LabelSeries
       if (this.isCollectionsPage) return this.$strings.LabelCollections
       if (this.isPlaylistsPage) return this.$strings.LabelPlaylists
+      if (this.isAuthorsPage) return this.$strings.LabelAuthors
       return ''
     },
     seriesId() {
@@ -477,42 +472,54 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to re-add series to continue listening', error)
-          this.$toast.error(this.$strings.ToastItemUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processingSeries = false
         })
     },
+    async fetchAllAuthors() {
+      // fetch all authors from the server, in the order that they are currently displayed
+      const response = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors?sort=${this.settings.authorSortBy}&desc=${this.settings.authorSortDesc}`)
+      return response.authors
+    },
     async matchAllAuthors() {
       this.processingAuthors = true
 
-      for (const author of this.authors) {
+      try {
-        const payload = {}
+        const authors = await this.fetchAllAuthors()
-        if (author.asin) payload.asin = author.asin
-        else payload.q = author.name
 
-        payload.region = 'us'
+        for (const author of authors) {
-        if (this.libraryProvider.startsWith('audible.')) {
+          const payload = {}
-          payload.region = this.libraryProvider.split('.').pop() || 'us'
+          if (author.asin) payload.asin = author.asin
+          else payload.q = author.name
+
+          payload.region = 'us'
+          if (this.libraryProvider.startsWith('audible.')) {
+            payload.region = this.libraryProvider.split('.').pop() || 'us'
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, true)
+
+          var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
+            console.error('Failed', error)
+            return null
+          })
+          if (!response) {
+            console.error(`Author ${author.name} not found`)
+            this.$toast.error(this.$getString('ToastAuthorNotFound', [author.name]))
+          } else if (response.updated) {
+            if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
+            else console.log(`Author ${response.author.name} was updated (no image found)`)
+          } else {
+            console.log(`No updates were made for Author ${response.author.name}`)
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, false)
         }
-
+      } catch (error) {
-        this.$eventBus.$emit(`searching-author-${author.id}`, true)
+        console.error('Failed to match all authors', error)
-
+        this.$toast.error(this.$strings.ToastMatchAllAuthorsFailed)
-        var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
-          console.error('Failed', error)
-          return null
-        })
-        if (!response) {
-          console.error(`Author ${author.name} not found`)
-          this.$toast.error(this.$getString('ToastAuthorNotFound', [author.name]))
-        } else if (response.updated) {
-          if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
-          else console.log(`Author ${response.author.name} was updated (no image found)`)
-        } else {
-          console.log(`No updates were made for Author ${response.author.name}`)
-        }
-
-        this.$eventBus.$emit(`searching-author-${author.id}`, false)
       }
       this.processingAuthors = false
     },

client/components/app/ConfigSideNav.vue

@@ -19,7 +19,7 @@
 
         <p class="text-xs text-gray-300 italic">{{ Source }}</p>
       </div>
-      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ $config.version }}</a>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ versionData.latestVersion }}</a>
     </div>
   </div>
 </template>

client/components/app/LazyBookshelf.vue

@@ -91,6 +91,7 @@ export default {
       if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
       if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
       if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylists
+      if (this.page === 'authors') return this.$strings.MessageNoAuthors
       if (this.hasFilter) {
         if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
         else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
@@ -111,6 +112,12 @@ export default {
     seriesFilterBy() {
       return this.$store.getters['user/getUserSetting']('seriesFilterBy')
     },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy')
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
     orderBy() {
       return this.$store.getters['user/getUserSetting']('orderBy')
     },
@@ -217,6 +224,8 @@ export default {
         this.$store.commit('globals/setEditCollection', entity)
       } else if (this.entityName === 'playlists') {
         this.$store.commit('globals/setEditPlaylist', entity)
+      } else if (this.entityName === 'authors') {
+        this.$store.commit('globals/showEditAuthorModal', entity)
       }
     },
     clearSelectedEntities() {
@@ -457,6 +466,9 @@ export default {
         if (this.collapseBookSeries) {
           searchParams.set('collapseseries', 1)
         }
+      } else if (this.page === 'authors') {
+        searchParams.set('sort', this.authorSortBy)
+        searchParams.set('desc', this.authorSortDesc ? 1 : 0)
       } else {
         if (this.filterBy && this.filterBy !== 'all') {
           searchParams.set('filter', this.filterBy)
@@ -601,6 +613,34 @@ export default {
         this.executeRebuild()
       }
     },
+    authorAdded(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorAdded ${author.id}`, author)
+      this.resetEntities()
+    },
+    authorUpdated(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorUpdated ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = author
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(author)
+        }
+      }
+    },
+    authorRemoved(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorRemoved ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== author.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+
     shareOpen(mediaItemShare) {
       if (this.entityName === 'items' || this.entityName === 'series-books') {
         var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
@@ -727,6 +767,9 @@ export default {
         this.$root.socket.on('playlist_added', this.playlistAdded)
         this.$root.socket.on('playlist_updated', this.playlistUpdated)
         this.$root.socket.on('playlist_removed', this.playlistRemoved)
+        this.$root.socket.on('author_added', this.authorAdded)
+        this.$root.socket.on('author_updated', this.authorUpdated)
+        this.$root.socket.on('author_removed', this.authorRemoved)
         this.$root.socket.on('share_open', this.shareOpen)
         this.$root.socket.on('share_closed', this.shareClosed)
       } else {
@@ -756,6 +799,9 @@ export default {
         this.$root.socket.off('playlist_added', this.playlistAdded)
         this.$root.socket.off('playlist_updated', this.playlistUpdated)
         this.$root.socket.off('playlist_removed', this.playlistRemoved)
+        this.$root.socket.off('author_added', this.authorAdded)
+        this.$root.socket.off('author_updated', this.authorUpdated)
+        this.$root.socket.off('author_removed', this.authorRemoved)
         this.$root.socket.off('share_open', this.shareOpen)
         this.$root.socket.off('share_closed', this.shareClosed)
       } else {

client/components/app/MediaPlayerContainer.vue

@@ -1,10 +1,9 @@
 <template>
   <div v-if="streamLibraryItem" id="mediaPlayerContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
-    <div id="videoDock" />
     <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
       <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </div>
-    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
+    <div class="flex items-start mb-6 lg:mb-0" :class="isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div class="min-w-0 w-full">
         <div class="flex items-center">
           <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
@@ -12,10 +11,9 @@
           </nuxt-link>
           <widgets-explicit-indicator v-if="isExplicit" />
         </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
+        <div class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
           <span class="material-symbols text-sm">person</span>
           <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
-          <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
           <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
             <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
           </div>
@@ -140,9 +138,6 @@ export default {
     isPodcast() {
       return this.streamLibraryItem?.mediaType === 'podcast'
     },
-    isMusic() {
-      return this.streamLibraryItem?.mediaType === 'music'
-    },
     isExplicit() {
       return !!this.mediaMetadata.explicit
     },
@@ -172,11 +167,7 @@ export default {
     },
     podcastAuthor() {
       if (!this.isPodcast) return null
-      return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.author || this.$strings.LabelUnknown
-    },
-    musicArtists() {
-      if (!this.isMusic) return null
-      return this.mediaMetadata.artists.join(', ')
     },
     hasNextItemInQueue() {
       return this.currentPlayerQueueIndex < this.playerQueueItems.length - 1
@@ -260,7 +251,7 @@ export default {
     sleepTimerEnd() {
       this.clearSleepTimer()
       this.playerHandler.pause()
-      this.$toast.info('Sleep Timer Done.. zZzzZz')
+      this.$toast.info(this.$strings.ToastSleepTimerDone)
     },
     cancelSleepTimer() {
       this.showSleepTimerModal = false
@@ -534,7 +525,7 @@ export default {
     },
     showFailedProgressSyncs() {
       if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
-      this.syncFailedToast = this.$toast('Progress is not being synced. Restart playback', { timeout: false, type: 'error' })
+      this.syncFailedToast = this.$toast(this.$strings.ToastProgressIsNotBeingSynced, { timeout: false, type: 'error' })
     },
     sessionClosedEvent(sessionId) {
       if (this.playerHandler.currentSessionId === sessionId) {

client/components/app/SideRail.vue

@@ -58,7 +58,7 @@
         <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <svg class="w-6 h-6" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -95,14 +95,6 @@
         <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-xl">album</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
-
-        <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <span class="material-symbols text-2xl">&#xf090;</span>
 
@@ -172,9 +164,6 @@ export default {
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
-    isMusicLibrary() {
-      return this.currentLibraryMediaType === 'music'
-    },
     isPodcastDownloadQueuePage() {
       return this.$route.name === 'library-library-podcast-download-queue'
     },
@@ -184,9 +173,6 @@ export default {
     isPodcastLatestPage() {
       return this.$route.name === 'library-library-podcast-latest'
     },
-    isMusicAlbumsPage() {
-      return this.paramId === 'albums'
-    },
     homePage() {
       return this.$route.name === 'library-library'
     },
@@ -194,7 +180,7 @@ export default {
       return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
     },
     isAuthorsPage() {
-      return this.$route.name === 'library-library-authors'
+      return this.libraryBookshelfPage && this.paramId === 'authors'
     },
     isNarratorsPage() {
       return this.$route.name === 'library-library-narrators'

client/components/cards/AuthorCard.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+  <div class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
-    <nuxt-link :to="`/author/${author.id}`">
+    <nuxt-link :to="`/author/${author?.id}`">
       <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
         <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
           <!-- Image or placeholder -->
@@ -40,7 +40,7 @@
 <script>
 export default {
   props: {
-    author: {
+    authorMount: {
       type: Object,
       default: () => {}
     },
@@ -57,7 +57,8 @@ export default {
   data() {
     return {
       searching: false,
-      isHovering: false
+      isHovering: false,
+      author: null
     }
   },
   computed: {
@@ -68,34 +69,37 @@ export default {
       return this.height * this.sizeMultiplier
     },
     userToken() {
-      return this.$store.getters['user/getToken']
+      return this.store.getters['user/getToken']
     },
     _author() {
       return this.author || {}
     },
     authorId() {
-      return this._author.id
+      return this._author?.id || ''
     },
     name() {
-      return this._author.name || ''
+      return this._author?.name || ''
     },
     asin() {
-      return this._author.asin || ''
+      return this._author?.asin || ''
     },
     numBooks() {
-      return this._author.numBooks || 0
+      return this._author?.numBooks || 0
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
     },
     userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+      return this.store.getters['user/getUserCanUpdate']
     },
     currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
+      return this.store.state.libraries.currentLibraryId
     },
     libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+      return this.store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
     },
     sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+      return this.store.getters['user/getSizeMultiplier']
     }
   },
   methods: {
@@ -121,24 +125,54 @@ export default {
         return null
       })
       if (!response) {
-        this.$toast.error(`Author ${this.name} not found`)
+        this.$toast.error(this.$getString('ToastAuthorNotFound', [this.name]))
       } else if (response.updated) {
-        if (response.author.imagePath) this.$toast.success(`Author ${response.author.name} was updated`)
+        if (response.author.imagePath) {
-        else this.$toast.success(`Author ${response.author.name} was updated (no image found)`)
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
+        } else {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+        }
       } else {
-        this.$toast.info(`No updates were made for Author ${response.author.name}`)
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
       }
       this.searching = false
     },
     setSearching(isSearching) {
       this.searching = isSearching
-    }
+    },
+    setEntity(author) {
+      this.removeListeners()
+      this.author = author
+      this.addListeners()
+    },
+    addListeners() {
+      if (this.author) {
+        this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    removeListeners() {
+      if (this.author) {
+        this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    },
+    setSelectionMode(val) {}
   },
   mounted() {
-    this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+    if (this.authorMount) this.setEntity(this.authorMount)
   },
   beforeDestroy() {
-    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+    this.removeListeners()
   }
 }
 </script>

client/components/cards/ItemTaskRunningCard.vue

@@ -8,6 +8,7 @@
       <p class="truncate text-sm">{{ title }}</p>
 
       <p class="truncate text-xs text-gray-300">{{ description }}</p>
+      <p v-if="specialMessage" class="truncate text-xs text-gray-300">{{ specialMessage }}</p>
 
       <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
       <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
@@ -26,7 +27,16 @@ export default {
   },
   data() {
     return {
-      cancelingScan: false
+      cancelingScan: false,
+      specialMessage: ''
+    }
+  },
+  watch: {
+    task: {
+      immediate: true,
+      handler() {
+        this.initTask()
+      }
     }
   },
   computed: {
@@ -34,14 +44,17 @@ export default {
       return this.$store.getters['user/getIsAdminOrUp']
     },
     title() {
+      if (this.task.titleKey && this.$strings[this.task.titleKey]) {
+        return this.$getString(this.task.titleKey, this.task.titleSubs)
+      }
       return this.task.title || 'No Title'
     },
     description() {
+      if (this.task.descriptionKey && this.$strings[this.task.descriptionKey]) {
+        return this.$getString(this.task.descriptionKey, this.task.descriptionSubs)
+      }
       return this.task.description || ''
     },
-    details() {
-      return this.task.details || 'Unknown'
-    },
     isFinished() {
       return !!this.task.isFinished
     },
@@ -52,6 +65,9 @@ export default {
       return this.isFinished && !this.isFailed
     },
     failedMessage() {
+      if (this.task.errorKey && this.$strings[this.task.errorKey]) {
+        return this.$getString(this.task.errorKey, this.task.errorSubs)
+      }
       return this.task.error || ''
     },
     action() {
@@ -87,6 +103,21 @@ export default {
     }
   },
   methods: {
+    initTask() {
+      // special message for library scan tasks
+      if (this.task?.data?.scanResults) {
+        const scanResults = this.task.data.scanResults
+        const strs = []
+        if (scanResults.added) strs.push(this.$getString('MessageTaskScanItemsAdded', [scanResults.added]))
+        if (scanResults.updated) strs.push(this.$getString('MessageTaskScanItemsUpdated', [scanResults.updated]))
+        if (scanResults.missing) strs.push(this.$getString('MessageTaskScanItemsMissing', [scanResults.missing]))
+        const changesDetected = strs.length > 0 ? strs.join(', ') : this.$strings.MessageTaskScanNoChangesNeeded
+        const timeElapsed = scanResults.elapsed ? ` (${this.$elapsedPretty(scanResults.elapsed / 1000, false, true)})` : ''
+        this.specialMessage = `${changesDetected}${timeElapsed}`
+      } else {
+        this.specialMessage = ''
+      }
+    },
     cancelScan() {
       const libraryId = this.task?.data?.libraryId
       if (!libraryId) {

client/components/cards/LazyBookCard.vue

@@ -226,9 +226,6 @@ export default {
     isPodcast() {
       return this.mediaType === 'podcast' || this.store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
     },
-    isMusic() {
-      return this.mediaType === 'music'
-    },
     isExplicit() {
       return this.mediaMetadata.explicit || false
     },
@@ -328,7 +325,7 @@ export default {
     },
     displaySubtitle() {
       if (!this.libraryItem) return '\u00A0'
-      if (this.collapsedSeries) return this.collapsedSeries.numBooks === 1 ? '1 book' : `${this.collapsedSeries.numBooks} books`
+      if (this.collapsedSeries) return `${this.collapsedSeries.numBooks} ${this.$strings.LabelBooks}`
       if (this.mediaMetadata.subtitle) return this.mediaMetadata.subtitle
       if (this.mediaMetadata.seriesName) return this.mediaMetadata.seriesName
       return ''
@@ -336,7 +333,6 @@ export default {
     displayLineTwo() {
       if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
-      if (this.isMusic) return this.artist
       if (this.collapsedSeries) return ''
       if (this.isAuthorBookshelfView) {
         return this.mediaMetadata.publishedYear || ''
@@ -364,7 +360,6 @@ export default {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.recentEpisode.id)
     },
     userProgress() {
-      if (this.isMusic) return null
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
@@ -420,7 +415,7 @@ export default {
       return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
     },
     showPlayButton() {
-      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
+      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode)
     },
     showSmallEBookIcon() {
       return !this.isSelectionMode && this.ebookFormat
@@ -464,8 +459,6 @@ export default {
       return this.store.getters['user/getIsAdminOrUp']
     },
     moreMenuItems() {
-      if (this.isMusic) return []
-
       if (this.recentEpisode) {
         const items = [
           {
@@ -823,7 +816,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to remove series from home', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdateUser)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false
@@ -841,7 +834,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to hide item from home', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdateUser)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false

client/components/cards/NotificationCard.vue

@@ -130,7 +130,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update notification', error)
-          this.$toast.error(this.$strings.ToastNotificationUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.enabling = false

client/components/content/LibraryItemDetails.vue

@@ -27,38 +27,6 @@
         <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=publishers.${$encode(publisher)}`" class="hover:underline">{{ publisher }}</nuxt-link>
       </div>
     </div>
-    <div v-if="musicAlbum" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
-      </div>
-      <div>
-        {{ musicAlbum }}
-      </div>
-    </div>
-    <div v-if="musicAlbumArtist" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
-      </div>
-      <div>
-        {{ musicAlbumArtist }}
-      </div>
-    </div>
-    <div v-if="musicTrackPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
-      </div>
-      <div>
-        {{ musicTrackPretty }}
-      </div>
-    </div>
-    <div v-if="musicDiscPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-      </div>
-      <div>
-        {{ musicDiscPretty }}
-      </div>
-    </div>
     <div v-if="podcastType" class="flex py-0.5">
       <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
         <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPodcastType }}</span>
@@ -97,7 +65,7 @@
         <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=languages.${$encode(language)}`" class="hover:underline">{{ language }}</nuxt-link>
       </div>
     </div>
-    <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
+    <div v-if="tracks.length || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
       <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
         <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
       </div>
@@ -134,10 +102,6 @@ export default {
     isPodcast() {
       return this.libraryItem.mediaType === 'podcast'
     },
-    audioFile() {
-      // Music track
-      return this.media.audioFile
-    },
     media() {
       return this.libraryItem.media || {}
     },
@@ -168,25 +132,6 @@ export default {
     publisher() {
       return this.mediaMetadata.publisher || ''
     },
-    musicArtists() {
-      return this.mediaMetadata.artists || []
-    },
-    musicAlbum() {
-      return this.mediaMetadata.album || ''
-    },
-    musicAlbumArtist() {
-      return this.mediaMetadata.albumArtist || ''
-    },
-    musicTrackPretty() {
-      if (!this.mediaMetadata.trackNumber) return null
-      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
-      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
-    },
-    musicDiscPretty() {
-      if (!this.mediaMetadata.discNumber) return null
-      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
-      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
-    },
     narrators() {
       return this.mediaMetadata.narrators || []
     },

client/components/controls/GlobalSearch.vue

@@ -9,7 +9,7 @@
         <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
       </div>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu" @mousedown.stop.prevent>
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
           <p>{{ $strings.MessageThinking }}</p>
@@ -157,7 +157,7 @@ export default {
       clearTimeout(this.focusTimeout)
       this.focusTimeout = setTimeout(() => {
         this.showMenu = false
-      }, 200)
+      }, 100)
     },
     async runSearch(value) {
       this.lastSearch = value

client/components/controls/LibraryFilterSelect.vue

@@ -98,9 +98,6 @@ export default {
     isPodcast() {
       return this.libraryMediaType === 'podcast'
     },
-    isMusic() {
-      return this.libraryMediaType === 'music'
-    },
     seriesItems() {
       return [
         {
@@ -192,6 +189,12 @@ export default {
           value: 'publishers',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublishedDecade,
+          textPlural: this.$strings.LabelPublishedDecades,
+          value: 'publishedDecades',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
           textPlural: this.$strings.LabelLanguages,
@@ -274,35 +277,9 @@ export default {
         }
       ]
     },
-    musicItems() {
-      return [
-        {
-          text: this.$strings.LabelAll,
-          value: 'all'
-        },
-        {
-          text: this.$strings.LabelGenre,
-          textPlural: this.$strings.LabelGenres,
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelTag,
-          textPlural: this.$strings.LabelTags,
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: this.$strings.ButtonIssues,
-          value: 'issues',
-          sublist: false
-        }
-      ]
-    },
     selectItems() {
       if (this.isSeries) return this.seriesItems
       if (this.isPodcast) return this.podcastItems
-      if (this.isMusic) return this.musicItems
       return this.bookItems
     },
     selectedItemSublist() {
@@ -367,6 +344,9 @@ export default {
     publishers() {
       return this.filterData.publishers || []
     },
+    publishedDecades() {
+      return this.filterData.publishedDecades || []
+    },
     progress() {
       return [
         {
@@ -433,21 +413,17 @@ export default {
           id: 'isbn',
           name: 'ISBN'
         },
-        {
-          id: 'subtitle',
-          name: this.$strings.LabelSubtitle
-        },
         {
           id: 'authors',
           name: this.$strings.LabelAuthor
         },
         {
-          id: 'publishedYear',
+          id: 'chapters',
-          name: this.$strings.LabelPublishYear
+          name: this.$strings.LabelChapters
         },
         {
-          id: 'series',
+          id: 'cover',
-          name: this.$strings.LabelSeries
+          name: this.$strings.LabelCover
         },
         {
           id: 'description',
@@ -458,24 +434,32 @@ export default {
           name: this.$strings.LabelGenres
         },
         {
-          id: 'tags',
+          id: 'language',
-          name: this.$strings.LabelTags
+          name: this.$strings.LabelLanguage
         },
         {
           id: 'narrators',
           name: this.$strings.LabelNarrator
         },
+        {
+          id: 'publishedYear',
+          name: this.$strings.LabelPublishYear
+        },
         {
           id: 'publisher',
           name: this.$strings.LabelPublisher
         },
         {
-          id: 'language',
+          id: 'series',
-          name: this.$strings.LabelLanguage
+          name: this.$strings.LabelSeries
         },
         {
-          id: 'cover',
+          id: 'subtitle',
-          name: this.$strings.LabelCover
+          name: this.$strings.LabelSubtitle
+        },
+        {
+          id: 'tags',
+          name: this.$strings.LabelTags
         }
       ]
     },

client/components/controls/LibrarySortSelect.vue

@@ -56,9 +56,6 @@ export default {
     isPodcast() {
       return this.libraryMediaType === 'podcast'
     },
-    isMusic() {
-      return this.libraryMediaType === 'music'
-    },
     podcastItems() {
       return [
         {
@@ -148,40 +145,10 @@ export default {
         }
       ]
     },
-    musicItems() {
-      return [
-        {
-          text: this.$strings.LabelTitle,
-          value: 'media.metadata.title'
-        },
-        {
-          text: this.$strings.LabelAddedAt,
-          value: 'addedAt'
-        },
-        {
-          text: this.$strings.LabelSize,
-          value: 'size'
-        },
-        {
-          text: this.$strings.LabelDuration,
-          value: 'media.duration'
-        },
-        {
-          text: this.$strings.LabelFileBirthtime,
-          value: 'birthtimeMs'
-        },
-        {
-          text: this.$strings.LabelFileModified,
-          value: 'mtimeMs'
-        }
-      ]
-    },
     selectItems() {
       let items = null
       if (this.isPodcast) {
         items = this.podcastItems
-      } else if (this.isMusic) {
-        items = this.musicItems
       } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
         items = this.seriesItems
       } else {

client/components/controls/PlaybackSpeedControl.vue

@@ -1,9 +1,9 @@
 <template>
   <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
     <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
+      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-20 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
+    <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
       <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
@@ -11,12 +11,12 @@
         <template v-for="rate in rates">
           <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">x</span></p>
+              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
             </div>
           </div>
         </template>
       </div>
-      <div class="w-full py-1 px-4">
+      <div class="w-full py-1 px-1">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
           <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">x</span></p>
@@ -41,7 +41,7 @@ export default {
       currentPlaybackRate: 0,
       MIN_SPEED: 0.5,
       MAX_SPEED: 10,
-      menuLeft: -92,
+      menuLeft: -96,
       arrowLeft: 0
     }
   },
@@ -89,9 +89,9 @@ export default {
       if (boundingBox.left + 110 > window.innerWidth - 10) {
         this.menuLeft = window.innerWidth - 230 - boundingBox.left
 
-        this.arrowLeft = Math.abs(this.menuLeft) - 92
+        this.arrowLeft = Math.abs(this.menuLeft) - 96
       } else {
-        this.menuLeft = -92
+        this.menuLeft = -96
         this.arrowLeft = 0
       }
     },

client/components/controls/VolumeControl.vue

@@ -4,10 +4,10 @@
       <span class="material-symbols text-2xl sm:text-3xl">{{ volumeIcon }}</span>
     </button>
     <transition name="menux">
-      <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
+      <div v-show="isOpen" class="volumeMenu h-28 absolute bottom-2 w-6 py-2 bg-bg shadow-sm rounded-lg" style="top: -116px">
-        <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
+        <div ref="volumeTrack" class="w-1 h-full bg-gray-500 mx-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
-          <div class="bg-gray-100 h-full absolute left-0 top-0 pointer-events-none rounded-full" :style="{ width: volume * trackWidth + 'px' }" />
+          <div class="bg-gray-100 w-full absolute left-0 bottom-0 pointer-events-none rounded-full" :style="{ height: volume * trackHeight + 'px' }" />
-          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ left: cursorLeft + 'px', top: '-3px' }" />
+          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ bottom: cursorBottom + 'px', left: '-3px' }" />
         </div>
       </div>
     </transition>
@@ -24,10 +24,10 @@ export default {
       isOpen: false,
       isDragging: false,
       isHovering: false,
-      posX: 0,
+      posY: 0,
       lastValue: 0.5,
       isMute: false,
-      trackWidth: 112 - 20,
+      trackHeight: 112 - 20,
       openTimeout: null
     }
   },
@@ -45,9 +45,9 @@ export default {
         this.$emit('input', val)
       }
     },
-    cursorLeft() {
+    cursorBottom() {
-      var left = this.trackWidth * this.volume
+      var bottom = this.trackHeight * this.volume
-      return left - 3
+      return bottom - 3
     },
     volumeIcon() {
       if (this.volume <= 0) return 'volume_mute'
@@ -89,17 +89,10 @@ export default {
       }, 600)
     },
     mousemove(e) {
-      var diff = this.posX - e.x
+      var diff = this.posY - e.y
-      this.posX = e.x
+      this.posY = e.y
-      var volShift = 0
+      var volShift = diff / this.trackHeight
-      if (diff < 0) {
+      var newVol = this.volume + volShift
-        // Volume up
-        volShift = diff / this.trackWidth
-      } else {
-        // volume down
-        volShift = diff / this.trackWidth
-      }
-      var newVol = this.volume - volShift
       newVol = Math.min(Math.max(0, newVol), 1)
       this.volume = newVol
       e.preventDefault()
@@ -113,8 +106,8 @@ export default {
     },
     mousedownTrack(e) {
       this.isDragging = true
-      this.posX = e.x
+      this.posY = e.y
-      var vol = e.offsetX / this.trackWidth
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
       document.body.addEventListener('mousemove', this.mousemove)
@@ -137,7 +130,7 @@ export default {
       this.clickVolumeIcon()
     },
     clickVolumeTrack(e) {
-      var vol = e.offsetX / this.trackWidth
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
     }
@@ -147,7 +140,7 @@ export default {
       this.isMute = true
     }
     const storageVolume = localStorage.getItem('volume')
-    if (storageVolume) {
+    if (storageVolume && !isNaN(storageVolume)) {
       this.volume = parseFloat(storageVolume)
     }
   },

client/components/covers/AuthorImage.vue

@@ -56,24 +56,15 @@ export default {
     },
     imgSrc() {
       if (!this.imagePath) return null
-      if (process.env.NODE_ENV !== 'production') {
+      return `${this.$config.routerBasePath}/api/authors/${this.authorId}/image?ts=${this.updatedAt}`
-        // Testing
-        return `http://localhost:3333${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
-      }
-      return `/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
     }
   },
   methods: {
     imageLoaded() {
-      var aspectRatio = 1.25
-      if (this.$refs.wrapper) {
-        aspectRatio = this.$refs.wrapper.clientHeight / this.$refs.wrapper.clientWidth
-      }
       if (this.$refs.img) {
         var { naturalWidth, naturalHeight } = this.$refs.img
         var imgAr = naturalHeight / naturalWidth
-        var arDiff = Math.abs(imgAr - aspectRatio)
+        if (imgAr < 0.5 || imgAr > 2) {
-        if (arDiff > 0.15) {
           this.showCoverBg = true
         } else {
           this.showCoverBg = false

client/components/modals/AccountModal.vue

@@ -69,6 +69,15 @@
               </div>
             </div>
 
+            <div class="flex items-center my-2 max-w-md">
+              <div class="w-1/2">
+                <p id="ereader-permissions-toggle">{{ $strings.LabelPermissionsCreateEreader }}</p>
+              </div>
+              <div class="w-1/2">
+                <ui-toggle-switch labeledBy="ereader-permissions-toggle" v-model="newUser.permissions.createEreader" />
+              </div>
+            </div>
+
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
                 <p id="explicit-content-permissions-toggle">{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
@@ -296,7 +305,7 @@ export default {
         .then((data) => {
           this.processing = false
           if (data.error) {
-            this.$toast.error(`${this.$strings.ToastAccountUpdateFailed}: ${data.error}`)
+            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
 
@@ -313,7 +322,7 @@ export default {
           this.processing = false
           console.error('Failed to update account', error)
           var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdateAccount)
+          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
         })
     },
     submitCreateAccount() {
@@ -351,10 +360,11 @@ export default {
         update: type === 'admin',
         delete: type === 'admin',
         upload: type === 'admin',
-        accessExplicitContent: true,
+        accessExplicitContent: type === 'admin',
         accessAllLibraries: true,
         accessAllTags: true,
-        selectedTagsNotAccessible: false
+        selectedTagsNotAccessible: false,
+        createEreader: type === 'admin'
       }
     },
     init() {
@@ -386,8 +396,9 @@ export default {
             upload: false,
             accessAllLibraries: true,
             accessAllTags: true,
-            accessExplicitContent: true,
+            accessExplicitContent: false,
-            selectedTagsNotAccessible: false
+            selectedTagsNotAccessible: false,
+            createEreader: false
           },
           librariesAccessible: [],
           itemTagsSelected: []

client/components/modals/BatchQuickMatchModel.vue

@@ -116,10 +116,10 @@ export default {
           libraryItemIds: this.selectedBookIds
         })
         .then(() => {
-          this.$toast.info('Batch quick match of ' + this.selectedBookIds.length + ' books started!')
+          this.$toast.info(this.$getString('ToastBatchQuickMatchStarted', [this.selectedBookIds.length]))
         })
         .catch((error) => {
-          this.$toast.error('Batch quick match failed')
+          this.$toast.error(this.$strings.ToastBatchQuickMatchFailed)
           console.error('Failed to batch quick match', error)
         })
         .finally(() => {

client/components/modals/BookmarksModal.vue

@@ -110,7 +110,7 @@ export default {
           this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
         })
         .catch((error) => {
-          this.$toast.error(this.$strings.ToastBookmarkUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           console.error(error)
         })
       this.show = false

client/components/modals/ShareModal.vue

@@ -112,11 +112,11 @@ export default {
       return this.$store.state.user.user
     },
     demoShareUrl() {
-      return `${window.origin}/share/${this.newShareSlug}`
+      return `${window.origin}${this.$config.routerBasePath}/share/${this.newShareSlug}`
     },
     currentShareUrl() {
       if (!this.currentShare) return ''
-      return `${window.origin}/share/${this.currentShare.slug}`
+      return `${window.origin}${this.$config.routerBasePath}/share/${this.currentShare.slug}`
     },
     currentShareTimeRemaining() {
       if (!this.currentShare) return 'Error'

client/components/modals/authors/EditModal.vue

@@ -148,7 +148,7 @@ export default {
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
         console.error('Failed', error)
         const errorMsg = error.response ? error.response.data : null
-        this.$toast.error(errorMsg || this.$strings.ToastAuthorUpdateFailed)
+        this.$toast.error(errorMsg || this.$strings.ToastFailedToUpdate)
         return null
       })
       if (result) {

client/components/modals/collections/EditModal.vue

@@ -135,7 +135,7 @@ export default {
         .catch((error) => {
           console.error('Failed to update collection', error)
           this.processing = false
-          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     }
   },

client/components/modals/emails/EReaderDeviceModal.vue

@@ -178,7 +178,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update device', error)
-          this.$toast.error(this.$strings.ToastDeviceUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false

client/components/modals/emails/UserEReaderDeviceModal.vue

@@ -0,0 +1,188 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="ereader-device-edit" :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="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full px-3 py-5 md:p-12">
+          <div class="flex items-center -mx-1 mb-4">
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
+            </div>
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
+            </div>
+          </div>
+
+          <div class="flex items-center pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    existingDevices: {
+      type: Array,
+      default: () => []
+    },
+    ereaderDevice: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newDevice: {
+        name: '',
+        email: '',
+        availabilityOption: 'adminAndUp',
+        users: []
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    title() {
+      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ereaderNameInput.blur()
+      this.$refs.ereaderEmailInput.blur()
+
+      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
+        this.$toast.error(this.$strings.ToastNameEmailRequired)
+        return
+      }
+
+      this.newDevice.name = this.newDevice.name.trim()
+      this.newDevice.email = this.newDevice.email.trim()
+
+      // Only catches duplicate names for the current user
+      // Duplicates with other users caught on server side
+      if (!this.ereaderDevice) {
+        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          return
+        }
+
+        this.submitCreate()
+      } else {
+        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          return
+        }
+
+        this.submitUpdate()
+      }
+    },
+    submitUpdate() {
+      this.processing = true
+
+      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
+
+      const payload = {
+        ereaderDevices: [
+          ...existingDevicesWithoutThisOne,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post(`/api/me/ereader-devices`, payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices)
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to update device', error)
+          if (error.response?.data?.toLowerCase().includes('duplicate')) {
+            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          } else {
+            this.$toast.error(this.$strings.ToastDeviceAddFailed)
+          }
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    submitCreate() {
+      this.processing = true
+
+      const payload = {
+        ereaderDevices: [
+          ...this.existingDevices,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post('/api/me/ereader-devices', payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices || [])
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to add device', error)
+          if (error.response?.data?.toLowerCase().includes('duplicate')) {
+            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          } else {
+            this.$toast.error(this.$strings.ToastDeviceAddFailed)
+          }
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      if (this.ereaderDevice) {
+        this.newDevice.name = this.ereaderDevice.name
+        this.newDevice.email = this.ereaderDevice.email
+        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'specificUsers'
+        this.newDevice.users = this.ereaderDevice.users || [this.user.id]
+      } else {
+        this.newDevice.name = ''
+        this.newDevice.email = ''
+        this.newDevice.availabilityOption = 'specificUsers'
+        this.newDevice.users = [this.user.id]
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

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

@@ -6,7 +6,7 @@
         <ui-text-input-with-label ref="maxEpisodesInput" v-model="maxEpisodesToDownload" :disabled="checkingNewEpisodes" type="number" :label="$strings.LabelLimit" class="w-16 mr-2" input-class="h-10">
           <div class="flex -mb-0.5">
             <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': checkingNewEpisodes }">{{ $strings.LabelLimit }}</p>
-            <ui-tooltip direction="top" text="Max # of episodes to download. Use 0 for unlimited.">
+            <ui-tooltip direction="top" :text="$strings.LabelMaxEpisodesToDownload">
               <span class="material-symbols text-base">info</span>
             </ui-tooltip>
           </div>
@@ -99,7 +99,7 @@ export default {
 
       if (this.maxEpisodesToDownload < 0) {
         this.maxEpisodesToDownload = 3
-        this.$toast.error('Invalid max episodes to download')
+        this.$toast.error(this.$strings.ToastInvalidMaxEpisodesToDownload)
         return
       }
 
@@ -120,9 +120,9 @@ export default {
         .then((response) => {
           if (response.episodes && response.episodes.length) {
             console.log('New episodes', response.episodes.length)
-            this.$toast.success(`${response.episodes.length} new episodes found!`)
+            this.$toast.success(this.$getString('ToastNewEpisodesFound', [response.episodes.length]))
           } else {
-            this.$toast.info('No new episodes found')
+            this.$toast.info(this.$strings.ToastNoNewEpisodesFound)
           }
           this.checkingNewEpisodes = false
         })

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

@@ -60,7 +60,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
             <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('title', mediaMetadata.title)">{{ mediaMetadata.title || '' }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('title', mediaMetadata.title)">{{ mediaMetadata.title || '' }}</a>
             </p>
           </div>
         </div>
@@ -69,7 +69,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
             <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('subtitle', mediaMetadata.subtitle)">{{ mediaMetadata.subtitle }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('subtitle', mediaMetadata.subtitle)">{{ mediaMetadata.subtitle }}</a>
             </p>
           </div>
         </div>
@@ -78,7 +78,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
             <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', mediaMetadata.authorName)">{{ mediaMetadata.authorName }}</a>
+              {{ $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="flex-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 text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" 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="flex-grow ml-4">
             <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
             <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</a>
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</a>
             </p>
           </div>
         </div>
@@ -105,7 +105,7 @@
           <div class="flex-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 text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" 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="flex-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 text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" 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>
@@ -124,7 +124,7 @@
           <div class="flex-grow ml-4">
             <widgets-series-input-widget v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" />
             <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('series', mediaMetadata.series)">{{ mediaMetadata.seriesName }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('series', mediaMetadata.series)">{{ mediaMetadata.seriesName }}</a>
             </p>
           </div>
         </div>
@@ -133,7 +133,7 @@
           <div class="flex-grow ml-4">
             <ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
             <p v-if="mediaMetadata.genres?.length" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('genres', mediaMetadata.genres)">{{ mediaMetadata.genres.join(', ') }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('genres', mediaMetadata.genres)">{{ mediaMetadata.genres.join(', ') }}</a>
             </p>
           </div>
         </div>
@@ -142,7 +142,7 @@
           <div class="flex-grow ml-4">
             <ui-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
             <p v-if="media.tags?.length" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('tags', media.tags)">{{ media.tags.join(', ') }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('tags', media.tags)">{{ media.tags.join(', ') }}</a>
             </p>
           </div>
         </div>
@@ -151,7 +151,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" :label="$strings.LabelLanguage" />
             <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('language', mediaMetadata.language)">{{ mediaMetadata.language }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('language', mediaMetadata.language)">{{ mediaMetadata.language }}</a>
             </p>
           </div>
         </div>
@@ -160,7 +160,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
             <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('isbn', mediaMetadata.isbn)">{{ mediaMetadata.isbn }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('isbn', mediaMetadata.isbn)">{{ mediaMetadata.isbn }}</a>
             </p>
           </div>
         </div>
@@ -169,7 +169,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
             <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('asin', mediaMetadata.asin)">{{ mediaMetadata.asin }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('asin', mediaMetadata.asin)">{{ mediaMetadata.asin }}</a>
             </p>
           </div>
         </div>
@@ -179,7 +179,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
             <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesId', mediaMetadata.itunesId)">{{ mediaMetadata.itunesId }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesId', mediaMetadata.itunesId)">{{ mediaMetadata.itunesId }}</a>
             </p>
           </div>
         </div>
@@ -188,7 +188,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
             <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('feedUrl', mediaMetadata.feedUrl)">{{ mediaMetadata.feedUrl }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('feedUrl', mediaMetadata.feedUrl)">{{ mediaMetadata.feedUrl }}</a>
             </p>
           </div>
         </div>
@@ -197,7 +197,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
             <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesPageUrl', mediaMetadata.itunesPageUrl)">{{ mediaMetadata.itunesPageUrl }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesPageUrl', mediaMetadata.itunesPageUrl)">{{ mediaMetadata.itunesPageUrl }}</a>
             </p>
           </div>
         </div>
@@ -206,7 +206,7 @@
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" :label="$strings.LabelReleaseDate" />
             <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">
-              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('releaseDate', mediaMetadata.releaseDate)">{{ mediaMetadata.releaseDate }}</a>
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('releaseDate', mediaMetadata.releaseDate)">{{ mediaMetadata.releaseDate }}</a>
             </p>
           </div>
         </div>
@@ -623,7 +623,7 @@ export default {
           this.clearSelectedMatch()
           this.$emit('selectTab', 'details')
         } else {
-          this.$toast.error(this.$strings.ToastItemDetailsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         }
       } else {
         this.clearSelectedMatch()

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

@@ -2,28 +2,28 @@
   <div class="w-full h-full relative">
     <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-6 md:py-6">
       <template v-if="!feedUrl">
-        <widgets-alert type="warning" class="text-base mb-4">No RSS feed URL is set for this podcast</widgets-alert>
+        <widgets-alert type="warning" class="text-base mb-4">{{ $strings.ToastPodcastNoRssFeed }}</widgets-alert>
       </template>
       <template v-if="feedUrl || autoDownloadEpisodes">
         <div class="flex items-center justify-between mb-4">
-          <p class="text-base md:text-xl font-semibold">Schedule Automatic Episode Downloads</p>
+          <p class="text-base md:text-xl font-semibold">{{ $strings.HeaderScheduleEpisodeDownloads }}</p>
-          <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" :label="$strings.LabelEnable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
         </div>
 
         <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
           <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxEpisodesToKeep" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updatedMaxEpisodesToKeep" />
-          <ui-tooltip text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes. <br>This will only delete 1 episode per new download.">
+          <ui-tooltip :text="$strings.LabelMaxEpisodesToKeepHelp">
             <p class="pl-4 text-base">
-              Max episodes to keep
+              {{ $strings.LabelMaxEpisodesToKeep }}
               <span class="material-symbols icon-text">info</span>
             </p>
           </ui-tooltip>
         </div>
         <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
           <ui-text-input ref="maxEpisodesToDownloadInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
-          <ui-tooltip text="Value of 0 sets no max limit. When checking for new episodes this is the max number of episodes that will be downloaded.">
+          <ui-tooltip :text="$strings.LabelUseZeroForUnlimited">
             <p class="pl-4 text-base">
-              Max new episodes to download per check
+              {{ $strings.LabelMaxEpisodesToDownloadPerCheck }}
               <span class="material-symbols icon-text">info</span>
             </p>
           </ui-tooltip>
@@ -36,7 +36,7 @@
     <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
       <div class="flex items-center px-2 md:px-4">
         <div class="flex-grow" />
-        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? 'Save' : 'No update necessary' }}</ui-btn>
+        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdatesWereNecessary }}</ui-btn>
       </div>
     </div>
   </div>

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

@@ -33,18 +33,18 @@
             <span class="material-symbols text-lg ml-2">launch</span>
           </ui-btn>
 
-          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
+          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">{{ $strings.ButtonQuickEmbed }}</ui-btn>
         </div>
       </div>
 
       <!-- queued alert -->
       <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
-        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+        <p class="text-lg">{{ $getString('MessageQuickEmbedQueue', [queuedEmbedLIds.length]) }}</p>
       </widgets-alert>
 
       <!-- processing alert -->
       <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
-        <p class="text-lg">Currently embedding metadata</p>
+        <p class="text-lg">{{ $strings.MessageQuickEmbedInProgress }}</p>
       </widgets-alert>
     </div>
 
@@ -113,7 +113,7 @@ export default {
   methods: {
     quickEmbed() {
       const payload = {
-        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        message: this.$strings.MessageConfirmQuickEmbed,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/modals/libraries/EditModal.vue

@@ -111,7 +111,6 @@ export default {
     },
     updateLibrary(library) {
       this.mapLibraryToCopy(library)
-      console.log('Updated library', this.libraryCopy)
     },
     getNewLibraryData() {
       return {
@@ -128,7 +127,9 @@ export default {
           autoScanCronExpression: null,
           hideSingleBookSeries: false,
           onlyShowLaterBooksInContinueSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
+          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata'],
+          markAsFinishedPercentComplete: null,
+          markAsFinishedTimeRemaining: 10
         }
       }
     },
@@ -160,7 +161,7 @@ export default {
         return false
       }
       if (!this.libraryCopy.folders.length) {
-        this.$toast.error('Library must have at least 1 path')
+        this.$toast.error(this.$strings.ToastMustHaveAtLeastOnePath)
         return false
       }
 
@@ -222,7 +223,7 @@ export default {
           if (error.response && error.response.data) {
             this.$toast.error(error.response.data)
           } else {
-            this.$toast.error(this.$strings.ToastLibraryUpdateFailed)
+            this.$toast.error(this.$strings.ToastFailedToUpdate)
           }
           this.processing = false
         })
@@ -236,7 +237,6 @@ export default {
           this.show = false
           this.$toast.success(this.$getString('ToastLibraryCreateSuccess', [res.name]))
           if (!this.$store.state.libraries.currentLibraryId) {
-            console.log('Setting initially library id', res.id)
             // First library added
             this.$store.dispatch('libraries/fetch', res.id)
           }

client/components/modals/libraries/LibrarySettings.vue

@@ -1,78 +1,94 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-3">
+    <div class="flex flex-wrap">
-      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
+      <div class="flex items-center p-2 w-full md:w-1/2">
-      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
+        <ui-toggle-switch v-model="useSquareBookCovers" size="sm" @input="formUpdated" />
-        <p class="pl-4 text-base">
+        <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
-          {{ $strings.LabelSettingsSquareBookCovers }}
+          <p class="pl-4 text-sm">
-          <span class="material-symbols icon-text text-sm">info</span>
+            {{ $strings.LabelSettingsSquareBookCovers }}
-        </p>
-      </ui-tooltip>
-    </div>
-    <div class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" @input="formUpdated" />
-        <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
-      </div>
-      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
-    </div>
-    <div v-if="isBookLibrary" class="flex items-center py-3">
-      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsAudiobooksOnly }}
-          <span class="material-symbols icon-text text-sm">info</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsHideSingleBookSeries }}
             <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
+      <div class="p-2 w-full md:w-1/2">
-    <div v-if="isBookLibrary" class="py-3">
+        <div class="flex items-center">
-      <div class="flex items-center">
+          <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" size="sm" @input="formUpdated" />
-        <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" @input="formUpdated" />
+          <ui-toggle-switch v-else disabled size="sm" :value="false" />
-        <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
-          <p class="pl-4 text-base">
+        </div>
-            {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+        <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
+      </div>
+      <div v-if="isBookLibrary" class="flex items-center p-2 w-full md:w-1/2">
+        <ui-toggle-switch v-model="audiobooksOnly" size="sm" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
+          <p class="pl-4 text-sm">
+            {{ $strings.LabelSettingsAudiobooksOnly }}
             <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-    <div v-if="isBookLibrary" class="py-3">
+        <div class="flex items-center">
-      <div class="flex items-center">
+          <ui-toggle-switch v-model="skipMatchingMediaWithAsin" size="sm" @input="formUpdated" />
-        <ui-toggle-switch v-model="epubsAllowScriptedContent" @input="formUpdated" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
-        <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+        </div>
-          <p class="pl-4 text-base">
+      </div>
-            {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-            <span class="material-symbols icon-text text-sm">info</span>
+        <div class="flex items-center">
-          </p>
+          <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" size="sm" @input="formUpdated" />
-        </ui-tooltip>
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="hideSingleBookSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsHideSingleBookSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="epubsAllowScriptedContent" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isPodcastLibrary" class="p-2 w-full md:w-1/2">
+        <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
+      </div>
+      <div class="p-2 w-full flex items-center space-x-2 flex-wrap">
+        <div>
+          <ui-dropdown v-model="markAsFinishedWhen" :items="maskAsFinishedWhenItems" :label="$strings.LabelSettingsLibraryMarkAsFinishedWhen" small class="w-72 min-w-72 text-sm" menu-max-height="200px" @input="markAsFinishedWhenChanged" />
+        </div>
+        <div class="w-16">
+          <div>
+            <label class="px-1 text-sm font-semibold"></label>
+            <div class="relative">
+              <ui-text-input v-model="markAsFinishedValue" type="number" label="" no-spinner custom-input-class="pr-5" @input="markAsFinishedChanged" />
+              <div class="absolute top-0 bottom-0 right-4 flex items-center">{{ markAsFinishedWhen === 'timeRemaining' ? '' : '%' }}</div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div v-if="isPodcastLibrary" class="py-3">
-      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
     </div>
   </div>
 </template>
@@ -97,7 +113,9 @@ export default {
       epubsAllowScriptedContent: false,
       hideSingleBookSeries: false,
       onlyShowLaterBooksInContinueSeries: false,
-      podcastSearchRegion: 'us'
+      podcastSearchRegion: 'us',
+      markAsFinishedWhen: 'timeRemaining',
+      markAsFinishedValue: 10
     }
   },
   computed: {
@@ -119,10 +137,34 @@ export default {
     providers() {
       if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
+    },
+    maskAsFinishedWhenItems() {
+      return [
+        {
+          text: this.$strings.LabelSettingsLibraryMarkAsFinishedTimeRemaining,
+          value: 'timeRemaining'
+        },
+        {
+          text: this.$strings.LabelSettingsLibraryMarkAsFinishedPercentComplete,
+          value: 'percentComplete'
+        }
+      ]
     }
   },
   methods: {
+    markAsFinishedWhenChanged(val) {
+      if (val === 'percentComplete' && this.markAsFinishedValue > 100) {
+        this.markAsFinishedValue = 100
+      }
+      this.formUpdated()
+    },
+    markAsFinishedChanged(val) {
+      this.formUpdated()
+    },
     getLibraryData() {
+      let markAsFinishedTimeRemaining = this.markAsFinishedWhen === 'timeRemaining' ? Number(this.markAsFinishedValue) : null
+      let markAsFinishedPercentComplete = this.markAsFinishedWhen === 'percentComplete' ? Number(this.markAsFinishedValue) : null
+
       return {
         settings: {
           coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
@@ -133,7 +175,9 @@ export default {
           epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
           hideSingleBookSeries: !!this.hideSingleBookSeries,
           onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
-          podcastSearchRegion: this.podcastSearchRegion
+          podcastSearchRegion: this.podcastSearchRegion,
+          markAsFinishedTimeRemaining: markAsFinishedTimeRemaining,
+          markAsFinishedPercentComplete: markAsFinishedPercentComplete
         }
       }
     },
@@ -150,6 +194,11 @@ export default {
       this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
       this.onlyShowLaterBooksInContinueSeries = !!this.librarySettings.onlyShowLaterBooksInContinueSeries
       this.podcastSearchRegion = this.librarySettings.podcastSearchRegion || 'us'
+      this.markAsFinishedWhen = this.librarySettings.markAsFinishedTimeRemaining ? 'timeRemaining' : 'percentComplete'
+      if (!this.librarySettings.markAsFinishedTimeRemaining && !this.librarySettings.markAsFinishedPercentComplete) {
+        this.markAsFinishedWhen = 'timeRemaining'
+      }
+      this.markAsFinishedValue = this.librarySettings.markAsFinishedTimeRemaining || this.librarySettings.markAsFinishedPercentComplete || 10
     }
   },
   mounted() {

client/components/modals/libraries/LibraryTools.vue

@@ -3,13 +3,13 @@
     <div class="w-full border border-black-200 p-4 my-8">
       <div class="flex flex-wrap items-center">
         <div>
-          <p class="text-lg">Remove metadata files in library item folders</p>
+          <p class="text-lg">{{ $strings.LabelRemoveMetadataFile }}</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $getString('LabelRemoveMetadataFileHelp', [mediaType]) }}</p>
         </div>
         <div class="flex-grow" />
         <div>
-          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
+          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">{{ $strings.LabelRemoveAllMetadataJson }}</ui-btn>
-          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
+          <ui-btn @click.stop="removeAllMetadataClick('abs')">{{ $strings.LabelRemoveAllMetadataAbs }}</ui-btn>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@ export default {
   methods: {
     removeAllMetadataClick(ext) {
       const payload = {
-        message: `Are you sure you want to remove all metadata.${ext} files in your library item folders?`,
+        message: this.$getString('MessageConfirmRemoveMetadataFiles', [ext]),
         persistent: true,
         callback: (confirmed) => {
           if (confirmed) {
@@ -60,16 +60,16 @@ export default {
         .$post(`/api/libraries/${this.libraryId}/remove-metadata?ext=${ext}`)
         .then((data) => {
           if (!data.found) {
-            this.$toast.info(`No metadata.${ext} files were found in library`)
+            this.$toast.info(this.$getString('ToastMetadataFilesRemovedNoneFound', [ext]))
           } else if (!data.removed) {
-            this.$toast.success(`No metadata.${ext} files removed`)
+            this.$toast.success(this.$getString('ToastMetadataFilesRemovedNoneRemoved', [ext]))
           } else {
-            this.$toast.success(`Successfully removed ${data.removed} metadata.${ext} files`)
+            this.$toast.success(this.$getString('ToastMetadataFilesRemovedSuccess', [data.removed, ext]))
           }
         })
         .catch((error) => {
           console.error('Failed to remove metadata files', error)
-          this.$toast.error('Failed to remove metadata files')
+          this.$toast.error(this.$getString('ToastMetadataFilesRemovedError', [ext]))
         })
         .finally(() => {
           this.$emit('update:processing', false)

client/components/modals/notification/NotificationEditModal.vue

@@ -77,7 +77,13 @@ export default {
       return this.notificationData.events || []
     },
     eventOptions() {
-      return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
+      return this.notificationEvents.map((e) => {
+        return {
+          value: e.name,
+          text: e.name,
+          subtext: this.$strings[e.descriptionKey] || e.description
+        }
+      })
     },
     selectedEventData() {
       return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
@@ -132,7 +138,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update notification', error)
-          this.$toast.error(this.$strings.ToastNotificationUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false

client/components/modals/playlists/AddCreateModal.vue

@@ -135,7 +135,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to remove items from playlist', error)
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           this.processing = false
         })
     },
@@ -153,7 +153,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to add items to playlist', error)
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           this.processing = false
         })
     },

client/components/modals/playlists/EditModal.vue

@@ -115,7 +115,7 @@ export default {
         .catch((error) => {
           console.error('Failed to update playlist', error)
           this.processing = false
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     }
   },

client/components/modals/podcast/NewModal.vue

@@ -156,7 +156,12 @@ export default {
       return this.selectedFolder.fullPath
     },
     podcastTypes() {
-      return this.$store.state.globals.podcastTypes || []
+      return this.$store.state.globals.podcastTypes.map((e) => {
+        return {
+          text: this.$strings[e.descriptionKey] || e.text,
+          value: e.value
+        }
+      })
     }
   },
   methods: {

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

@@ -33,11 +33,11 @@
     </div>
     <div v-if="enclosureUrl" class="pb-4 pt-6">
       <ui-text-input-with-label :value="enclosureUrl" readonly class="text-xs">
-        <label class="px-1 text-xs text-gray-200 font-semibold">Episode URL from RSS feed</label>
+        <label class="px-1 text-xs text-gray-200 font-semibold">{{ $strings.LabelEpisodeUrlFromRssFeed }}</label>
       </ui-text-input-with-label>
     </div>
     <div v-else class="py-4">
-      <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>
+      <p class="text-xs text-gray-300 font-semibold">{{ $strings.LabelEpisodeNotLinkedToRssFeed }}</p>
     </div>
   </div>
 </template>
@@ -97,7 +97,12 @@ export default {
       return this.enclosure.url
     },
     episodeTypes() {
-      return this.$store.state.globals.episodeTypes || []
+      return this.$store.state.globals.episodeTypes.map((e) => {
+        return {
+          text: this.$strings[e.descriptionKey] || e.text,
+          value: e.value
+        }
+      })
     }
   },
   methods: {
@@ -152,14 +157,14 @@ export default {
       const updateResult = await this.$axios.$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatedDetails).catch((error) => {
         console.error('Failed update episode', error)
         this.isProcessing = false
-        this.$toast.error(error?.response?.data || 'Failed to update episode')
+        this.$toast.error(error?.response?.data || this.$strings.ToastFailedToUpdate)
         return false
       })
 
       this.isProcessing = false
       if (updateResult) {
         if (updateResult) {
-          this.$toast.success('Podcast episode updated')
+          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
           return true
         } else {
           this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -139,7 +139,7 @@ export default {
         slug: this.newFeedSlug,
         metadataDetails: this.metadataDetails
       }
-      if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`
+      if (this.$isDev) payload.serverAddress = process.env.serverUrl
 
       console.log('Payload', payload)
       this.$axios

client/components/player/PlayerPlaybackControls.vue

@@ -1,38 +1,37 @@
 <template>
-  <div class="flex items-center pt-4 pb-2 lg:pt-0 lg:pb-2">
+  <div class="flex justify-center pt-4 pb-2 lg:pt-0 lg:pb-2">
-    <div class="flex-grow" />
+    <div class="flex items-center justify-center flex-grow">
-    <template v-if="!loading">
+      <template v-if="!loading">
-      <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
+        <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
-        <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+          <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
-          <span class="material-symbols text-2xl sm:text-3xl">first_page</span>
+            <span class="material-symbols text-2xl sm:text-3xl">first_page</span>
+          </button>
+        </ui-tooltip>
+        <ui-tooltip direction="top" :text="jumpBackwardText">
+          <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>
+        <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+          <span class="material-symbols fill text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
         </button>
-      </ui-tooltip>
+        <ui-tooltip direction="top" :text="jumpForwardText">
-      <ui-tooltip direction="top" :text="jumpBackwardText">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-        <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+            <span class="material-symbols text-2xl sm:text-3xl">forward_media</span>
-          <span class="material-symbols text-2xl sm:text-3xl">replay</span>
+          </button>
-        </button>
+        </ui-tooltip>
-      </ui-tooltip>
+        <ui-tooltip direction="top" :text="hasNextLabel" class="ml-4 lg:ml-8">
-      <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+          <button :aria-label="hasNextLabel" :disabled="!hasNext" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="next">
-        <span class="material-symbols fill text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
+            <span class="material-symbols text-2xl sm:text-3xl">last_page</span>
-      </button>
+          </button>
-      <ui-tooltip direction="top" :text="jumpForwardText">
+        </ui-tooltip>
-        <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+      </template>
-          <span class="material-symbols text-2xl sm:text-3xl">forward_media</span>
+      <template v-else>
-        </button>
+        <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-      </ui-tooltip>
+          <span class="material-symbols text-2xl">autorenew</span>
-      <ui-tooltip direction="top" :text="hasNextLabel" class="ml-4 lg:ml-8">
+        </div>
-        <button :aria-label="hasNextLabel" :disabled="!hasNext" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="next">
+      </template>
-          <span class="material-symbols text-2xl sm:text-3xl">last_page</span>
+    </div>
-        </button>
-      </ui-tooltip>
-      <controls-playback-speed-control v-model="playbackRateInput" @input="playbackRateUpdated" @change="playbackRateChanged" />
-    </template>
-    <template v-else>
-      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-        <span class="material-symbols text-2xl">autorenew</span>
-      </div>
-    </template>
-    <div class="flex-grow" />
   </div>
 </template>
 
@@ -41,7 +40,6 @@ export default {
   props: {
     loading: Boolean,
     seekLoading: Boolean,
-    playbackRate: Number,
     paused: Boolean,
     hasNextChapter: Boolean,
     hasNextItemInQueue: Boolean
@@ -50,14 +48,6 @@ export default {
     return {}
   },
   computed: {
-    playbackRateInput: {
-      get() {
-        return this.playbackRate
-      },
-      set(val) {
-        this.$emit('update:playbackRate', val)
-      }
-    },
     jumpForwardText() {
       return this.getJumpText('jumpForwardAmount', this.$strings.ButtonJumpForward)
     },
@@ -89,15 +79,6 @@ export default {
     jumpForward() {
       this.$emit('jumpForward')
     },
-    playbackRateUpdated(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-    },
-    playbackRateChanged(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
-    },
     getJumpText(setting, prefix) {
       const amount = this.$store.getters['user/getUserSetting'](setting)
       if (!amount) return prefix

client/components/player/PlayerUi.vue

@@ -2,9 +2,9 @@
   <div class="w-full -mt-6">
     <div class="w-full relative mb-1">
       <div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
-        <!-- <span class="material-symbols text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
+        <controls-playback-speed-control v-model="playbackRate" @input="setPlaybackRate" @change="playbackRateChanged" class="mx-2 block" />
 
-        <ui-tooltip direction="top" :text="$strings.LabelVolume">
+        <ui-tooltip direction="left" :text="$strings.LabelVolume">
           <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
         </ui-tooltip>
 
@@ -13,7 +13,7 @@
             <span v-if="!sleepTimerSet" class="material-symbols text-2xl">snooze</span>
             <div v-else class="flex items-center">
               <span class="material-symbols text-lg text-warning">snooze</span>
-              <p class="text-sm sm:text-lg text-warning font-mono font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
+              <p class="text-sm sm:text-lg text-warning font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
             </div>
           </button>
         </ui-tooltip>
@@ -48,15 +48,19 @@
 
     <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" :current-chapter="currentChapter" :playback-rate="playbackRate" @seek="seek" />
 
-    <div class="flex">
+    <div class="relative flex items-center justify-between">
-      <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
+      <div class="flex-grow flex items-center">
-      <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
+        <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
-      <div class="flex-grow" />
+        <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
-      <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
+      </div>
-        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
+      <div class="absolute left-1/2 transform -translate-x-1/2">
-      </p>
+        <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
-      <div class="flex-grow" />
+          {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
-      <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+        </p>
+      </div>
+      <div class="flex-grow flex items-center justify-end">
+        <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+      </div>
     </div>
 
     <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :playback-rate="playbackRate" :chapters="chapters" @select="selectChapter" />
@@ -178,22 +182,6 @@ export default {
   methods: {
     toggleFullscreen(isFullscreen) {
       this.$store.commit('setPlayerIsFullscreen', isFullscreen)
-
-      var videoPlayerEl = document.getElementById('video-player')
-      if (videoPlayerEl) {
-        if (isFullscreen) {
-          videoPlayerEl.style.width = '100vw'
-          videoPlayerEl.style.height = '100vh'
-          videoPlayerEl.style.top = '0px'
-          videoPlayerEl.style.left = '0px'
-        } else {
-          videoPlayerEl.style.width = '384px'
-          videoPlayerEl.style.height = '216px'
-          videoPlayerEl.style.top = 'unset'
-          videoPlayerEl.style.bottom = '80px'
-          videoPlayerEl.style.left = '16px'
-        }
-      }
     },
     setDuration(duration) {
       this.duration = duration
@@ -240,6 +228,12 @@ export default {
       this.playbackRate = Number((this.playbackRate - 0.1).toFixed(1))
       this.setPlaybackRate(this.playbackRate)
     },
+    playbackRateChanged(playbackRate) {
+      this.setPlaybackRate(playbackRate)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+    },
     setPlaybackRate(playbackRate) {
       this.$emit('setPlaybackRate', playbackRate)
     },

client/components/stats/DailyListeningChart.vue

@@ -35,22 +35,22 @@
     <div class="flex justify-between pt-12">
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsWeekListening }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ totalMinutesListeningThisWeek }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(totalMinutesListeningThisWeek) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsDailyAverage }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ averageMinutesPerDay }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(averageMinutesPerDay) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsBestDay }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ mostListenedDay }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(mostListenedDay) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
         <p class="text-sm text-center">{{ $strings.LabelStatsDays }}</p>
-        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ daysInARow }}</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ $formatNumber(daysInARow) }}</p>
         <p class="text-sm text-center">{{ $strings.LabelStatsInARow }}</p>
       </div>
     </div>

client/components/tables/CollectionBooksTable.vue

@@ -78,7 +78,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update collection', error)
-          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     },
     editBook(book) {

client/components/tables/PlaylistItemsTable.vue

@@ -92,7 +92,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update playlist', error)
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     },
     init() {

client/components/tables/playlist/ItemTableRow.vue

@@ -223,7 +223,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to remove item from playlist', error)
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processingRemove = false

client/components/tables/podcast/LazyEpisodeRow.vue

@@ -12,10 +12,10 @@
         </div>
         <div class="h-8 flex items-center">
           <div class="w-full inline-flex justify-between max-w-xl">
-            <p v-if="episode?.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+            <p v-if="episode?.season" class="text-sm text-gray-300">{{ $getString('LabelSeasonNumber', [episode.season]) }}</p>
-            <p v-if="episode?.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+            <p v-if="episode?.episode" class="text-sm text-gray-300">{{ $getString('LabelEpisodeNumber', [episode.episode]) }}</p>
-            <p v-if="episode?.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
+            <p v-if="episode?.chapters?.length" class="text-sm text-gray-300">{{ $getString('LabelChapterCount', [episode.chapters.length]) }}</p>
-            <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
+            <p v-if="publishedAt" class="text-sm text-gray-300">{{ $getString('LabelPublishedDate', [$formatDate(publishedAt, dateFormat)]) }}</p>
           </div>
         </div>
 
@@ -132,13 +132,13 @@ export default {
       return this.store.state.streamIsPlaying && this.isStreaming
     },
     timeRemaining() {
-      if (this.streamIsPlaying) return 'Playing'
+      if (this.streamIsPlaying) return this.$strings.ButtonPlaying
       if (!this.itemProgress) return this.$elapsedPretty(this.episode?.duration || 0)
-      if (this.userIsFinished) return 'Finished'
+      if (this.userIsFinished) return this.$strings.LabelFinished
 
       const duration = this.itemProgress.duration || this.episode?.duration || 0
       const remaining = Math.floor(duration - this.itemProgress.currentTime)
-      return `${this.$elapsedPretty(remaining)} left`
+      return this.$getString('LabelTimeLeft', [this.$elapsedPretty(remaining)])
     }
   },
   methods: {
@@ -182,7 +182,7 @@ export default {
     toggleFinished(confirmed = false) {
       if (!this.userIsFinished && this.itemProgressPercent > 0 && !confirmed) {
         const payload = {
-          message: `Are you sure you want to mark "${this.episodeTitle}" as finished?`,
+          message: this.$getString('MessageConfirmMarkItemFinished', [this.episodeTitle]),
           callback: (confirmed) => {
             if (confirmed) {
               this.toggleFinished(true)

client/components/tables/podcast/LazyEpisodesTable.vue

@@ -25,7 +25,6 @@
         </template>
       </div>
     </div>
-    <!-- <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p> -->
     <div v-if="episodes.length" class="w-full py-3 mx-auto flex">
       <form @submit.prevent="submit" class="flex flex-grow">
         <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
@@ -93,17 +92,18 @@ export default {
   },
   computed: {
     contextMenuItems() {
-      if (!this.userIsAdminOrUp) return []
+      const menuItems = []
-      return [
+      if (this.userIsAdminOrUp) {
-        {
+        menuItems.push({
-          text: 'Quick match all episodes',
+          text: this.$strings.MessageQuickMatchAllEpisodes,
           action: 'quick-match-episodes'
-        },
+        })
-        {
+      }
-          text: this.allEpisodesFinished ? this.$strings.MessageMarkAllEpisodesNotFinished : this.$strings.MessageMarkAllEpisodesFinished,
+      menuItems.push({
-          action: 'batch-mark-as-finished'
+        text: this.allEpisodesFinished ? this.$strings.MessageMarkAllEpisodesNotFinished : this.$strings.MessageMarkAllEpisodesFinished,
-        }
+        action: 'batch-mark-as-finished'
-      ]
+      })
+      return menuItems
     },
     sortItems() {
       return [
@@ -261,21 +261,21 @@ export default {
       this.processing = true
 
       const payload = {
-        message: 'Quick matching episodes will overwrite details if a match is found. Only unmatched episodes will be updated. Are you sure?',
+        message: this.$strings.MessageConfirmQuickMatchEpisodes,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
               .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
               .then((data) => {
                 if (data.numEpisodesUpdated) {
-                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
+                  this.$toast.success(this.$getString('ToastEpisodeUpdateSuccess', [data.numEpisodesUpdated]))
                 } else {
                   this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
                 }
               })
               .catch((error) => {
                 console.error('Failed to request match episodes', error)
-                this.$toast.error('Failed to match episodes')
+                this.$toast.error(this.$strings.ToastFailedToMatch)
               })
           }
           this.processing = false
@@ -514,6 +514,10 @@ export default {
       }
     },
     filterSortChanged() {
+      // Save filterKey and sortKey to local storage
+      localStorage.setItem('podcastEpisodesFilter', this.filterKey)
+      localStorage.setItem('podcastEpisodesSortBy', this.sortKey + (this.sortDesc ? '-desc' : ''))
+
       this.init()
     },
     refresh() {
@@ -536,6 +540,11 @@ export default {
     }
   },
   mounted() {
+    this.filterKey = localStorage.getItem('podcastEpisodesFilter') || 'incomplete'
+    const sortBy = localStorage.getItem('podcastEpisodesSortBy') || 'publishedAt-desc'
+    this.sortKey = sortBy.split('-')[0]
+    this.sortDesc = sortBy.split('-')[1] === 'desc'
+
     this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
     this.initListeners()
     this.init()

client/components/ui/TextInput.vue

@@ -57,7 +57,8 @@ export default {
     inputName: String,
     showCopy: Boolean,
     step: [String, Number],
-    min: [String, Number]
+    min: [String, Number],
+    customInputClass: String
   },
   data() {
     return {
@@ -82,6 +83,7 @@ export default {
       _list.push(`py-${this.paddingY}`)
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
+      if (this.customInputClass) _list.push(this.customInputClass)
       return _list.join(' ')
     },
     actualType() {

client/components/ui/ToggleSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
+    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer justify-start" :style="{ width: buttonWidth + 'px' }" :aria-checked="toggleValue" :class="className" @click="clickToggle">
-      <span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
+      <span class="rounded-full border border-black-50 shadow transform transition-transform duration-100" :style="{ width: cursorHeightWidth + 'px', height: cursorHeightWidth + 'px' }" :class="switchClassName"></span>
     </button>
   </div>
 </template>
@@ -19,7 +19,11 @@ export default {
       default: 'primary'
     },
     disabled: Boolean,
-    labeledBy: String
+    labeledBy: String,
+    size: {
+      type: String,
+      default: 'md'
+    }
   },
   computed: {
     toggleValue: {
@@ -37,6 +41,13 @@ export default {
     switchClassName() {
       var bgColor = this.disabled ? 'bg-gray-300' : 'bg-white'
       return this.toggleValue ? 'translate-x-5 ' + bgColor : bgColor
+    },
+    cursorHeightWidth() {
+      if (this.size === 'sm') return 16
+      return 20
+    },
+    buttonWidth() {
+      return this.cursorHeightWidth * 2
     }
   },
   methods: {

client/components/widgets/AlreadyInLibraryIndicator.vue

@@ -1,14 +1,11 @@
 <template>
-  <ui-tooltip v-if="alreadyInLibrary" :text="$strings.LabelAlreadyInYourLibrary" direction="top">
+  <ui-tooltip :text="$strings.LabelAlreadyInYourLibrary" direction="top" class="inline-flex">
-    <span class="material-symbols ml-1 text-success" style="font-size: 0.8rem">check_circle</span>
+    <span class="material-symbols ml-1 text-sm text-success">check_circle</span>
   </ui-tooltip>
 </template>
 
 <script>
 export default {
-  props: {
-    alreadyInLibrary: Boolean
-  },
   data() {
     return {}
   },

client/components/widgets/BookDetailsEdit.vue

@@ -3,67 +3,67 @@
     <form class="w-full h-full px-2 md:px-4 py-6" @submit.prevent="submitForm">
       <div class="flex flex-wrap -mx-1">
         <div class="w-full md:w-1/2 px-1">
-          <ui-text-input-with-label ref="titleInput" v-model="details.title" :label="$strings.LabelTitle" />
+          <ui-text-input-with-label ref="titleInput" v-model="details.title" :label="$strings.LabelTitle" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1 mt-2 md:mt-0">
-          <ui-text-input-with-label ref="subtitleInput" v-model="details.subtitle" :label="$strings.LabelSubtitle" />
+          <ui-text-input-with-label ref="subtitleInput" v-model="details.subtitle" :label="$strings.LabelSubtitle" @input="handleInputChange" />
         </div>
       </div>
 
       <div class="flex flex-wrap mt-2 -mx-1">
         <div class="w-full md:w-3/4 px-1">
           <!-- Authors filter only contains authors in this library, uses filter data -->
-          <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" filter-key="authors" />
+          <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" filter-key="authors" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1 mt-2 md:mt-0">
-          <ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" :label="$strings.LabelPublishYear" />
+          <ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" :label="$strings.LabelPublishYear" @input="handleInputChange" />
         </div>
       </div>
 
       <div class="flex mt-2 -mx-1">
         <div class="flex-grow px-1">
-          <widgets-series-input-widget v-model="details.series" />
+          <widgets-series-input-widget v-model="details.series" @input="handleInputChange" />
         </div>
       </div>
 
-      <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" :label="$strings.LabelDescription" class="mt-2" />
+      <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" :label="$strings.LabelDescription" class="mt-2" @input="handleInputChange" />
 
       <div class="flex flex-wrap mt-2 -mx-1">
         <div class="w-full md:w-1/2 px-1">
-          <ui-multi-select ref="genresSelect" v-model="details.genres" :label="$strings.LabelGenres" :items="genres" />
+          <ui-multi-select ref="genresSelect" v-model="details.genres" :label="$strings.LabelGenres" :items="genres" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1 mt-2 md:mt-0">
-          <ui-multi-select ref="tagsSelect" v-model="newTags" :label="$strings.LabelTags" :items="tags" />
+          <ui-multi-select ref="tagsSelect" v-model="newTags" :label="$strings.LabelTags" :items="tags" @input="handleInputChange" />
         </div>
       </div>
 
       <div class="flex flex-wrap mt-2 -mx-1">
         <div class="w-full md:w-1/2 px-1">
-          <ui-multi-select ref="narratorsSelect" v-model="details.narrators" :label="$strings.LabelNarrators" :items="narrators" />
+          <ui-multi-select ref="narratorsSelect" v-model="details.narrators" :label="$strings.LabelNarrators" :items="narrators" @input="handleInputChange" />
         </div>
         <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
-          <ui-text-input-with-label ref="isbnInput" v-model="details.isbn" label="ISBN" />
+          <ui-text-input-with-label ref="isbnInput" v-model="details.isbn" label="ISBN" @input="handleInputChange" />
         </div>
         <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
-          <ui-text-input-with-label ref="asinInput" v-model="details.asin" label="ASIN" />
+          <ui-text-input-with-label ref="asinInput" v-model="details.asin" label="ASIN" @input="handleInputChange" />
         </div>
       </div>
 
       <div class="flex flex-wrap mt-2 -mx-1">
         <div class="w-full md:w-1/4 px-1">
-          <ui-text-input-with-label ref="publisherInput" v-model="details.publisher" :label="$strings.LabelPublisher" />
+          <ui-text-input-with-label ref="publisherInput" v-model="details.publisher" :label="$strings.LabelPublisher" @input="handleInputChange" />
         </div>
         <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
-          <ui-text-input-with-label ref="languageInput" v-model="details.language" :label="$strings.LabelLanguage" />
+          <ui-text-input-with-label ref="languageInput" v-model="details.language" :label="$strings.LabelLanguage" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1 pt-6 mt-2 md:mt-0">
           <div class="flex justify-center">
-            <ui-checkbox v-model="details.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <ui-checkbox v-model="details.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" @input="handleInputChange" />
           </div>
         </div>
         <div class="flex-grow px-1 pt-6 mt-2 md:mt-0">
           <div class="flex justify-center">
-            <ui-checkbox v-model="details.abridged" :label="$strings.LabelAbridged" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <ui-checkbox v-model="details.abridged" :label="$strings.LabelAbridged" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" @input="handleInputChange" />
           </div>
         </div>
       </div>
@@ -132,6 +132,12 @@ export default {
     }
   },
   methods: {
+    handleInputChange() {
+      this.$emit('change', {
+        libraryItemId: this.libraryItem.id,
+        hasChanges: this.checkForChanges().hasChanges
+      })
+    },
     getDetails() {
       this.forceBlur()
       return this.checkForChanges()
@@ -172,6 +178,7 @@ export default {
           }
         }
       }
+      this.handleInputChange()
     },
     forceBlur() {
       if (this.$refs.titleInput) this.$refs.titleInput.blur()

client/components/widgets/ItemSlider.vue

@@ -65,7 +65,7 @@ export default {
         },
         authors: {
           component: 'cards-author-card',
-          itemPropName: 'author',
+          itemPropName: 'author-mount',
           itemIdFunc: (item) => item.id
         },
         narrators: {

client/components/widgets/PodcastDetailsEdit.vue

@@ -3,45 +3,45 @@
     <form class="w-full h-full px-4 py-6" @submit.prevent="submitForm">
       <div class="flex -mx-1">
         <div class="w-1/2 px-1">
-          <ui-text-input-with-label ref="titleInput" v-model="details.title" :label="$strings.LabelTitle" />
+          <ui-text-input-with-label ref="titleInput" v-model="details.title" :label="$strings.LabelTitle" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1">
-          <ui-text-input-with-label ref="authorInput" v-model="details.author" :label="$strings.LabelAuthor" />
+          <ui-text-input-with-label ref="authorInput" v-model="details.author" :label="$strings.LabelAuthor" @input="handleInputChange" />
         </div>
       </div>
 
-      <ui-text-input-with-label ref="feedUrlInput" v-model="details.feedUrl" :label="$strings.LabelRSSFeedURL" class="mt-2" />
+      <ui-text-input-with-label ref="feedUrlInput" v-model="details.feedUrl" :label="$strings.LabelRSSFeedURL" class="mt-2" @input="handleInputChange" />
 
-      <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" :label="$strings.LabelDescription" class="mt-2" />
+      <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" :label="$strings.LabelDescription" class="mt-2" @input="handleInputChange" />
 
       <div class="flex mt-2 -mx-1">
         <div class="w-1/2 px-1">
-          <ui-multi-select ref="genresSelect" v-model="details.genres" :label="$strings.LabelGenres" :items="genres" />
+          <ui-multi-select ref="genresSelect" v-model="details.genres" :label="$strings.LabelGenres" :items="genres" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1">
-          <ui-multi-select ref="tagsSelect" v-model="newTags" :label="$strings.LabelTags" :items="tags" />
+          <ui-multi-select ref="tagsSelect" v-model="newTags" :label="$strings.LabelTags" :items="tags" @input="handleInputChange" />
         </div>
       </div>
 
       <div class="flex mt-2 -mx-1">
         <div class="w-1/4 px-1">
-          <ui-text-input-with-label ref="releaseDateInput" v-model="details.releaseDate" :label="$strings.LabelReleaseDate" />
+          <ui-text-input-with-label ref="releaseDateInput" v-model="details.releaseDate" :label="$strings.LabelReleaseDate" @input="handleInputChange" />
         </div>
         <div class="w-1/4 px-1">
-          <ui-text-input-with-label ref="itunesIdInput" v-model="details.itunesId" label="iTunes ID" />
+          <ui-text-input-with-label ref="itunesIdInput" v-model="details.itunesId" label="iTunes ID" @input="handleInputChange" />
         </div>
         <div class="w-1/4 px-1">
-          <ui-text-input-with-label ref="languageInput" v-model="details.language" :label="$strings.LabelLanguage" />
+          <ui-text-input-with-label ref="languageInput" v-model="details.language" :label="$strings.LabelLanguage" @input="handleInputChange" />
         </div>
         <div class="flex-grow px-1 pt-6">
           <div class="flex justify-center">
-            <ui-checkbox v-model="details.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <ui-checkbox v-model="details.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" @input="handleInputChange" />
           </div>
         </div>
       </div>
       <div class="flex mt-2 -mx-1">
         <div class="w-1/4 px-1">
-          <ui-dropdown :label="$strings.LabelPodcastType" v-model="details.type" :items="podcastTypes" small class="max-w-52" />
+          <ui-dropdown :label="$strings.LabelPodcastType" v-model="details.type" :items="podcastTypes" small class="max-w-52" @input="handleInputChange" />
         </div>
       </div>
     </form>
@@ -101,10 +101,21 @@ export default {
       return this.$store.state.libraries.filterData || {}
     },
     podcastTypes() {
-      return this.$store.state.globals.podcastTypes || []
+      return this.$store.state.globals.podcastTypes.map((e) => {
+        return {
+          text: this.$strings[e.descriptionKey] || e.text,
+          value: e.value
+        }
+      })
     }
   },
   methods: {
+    handleInputChange() {
+      this.$emit('change', {
+        libraryItemId: this.libraryItem.id,
+        hasChanges: this.checkForChanges().hasChanges
+      })
+    },
     getDetails() {
       this.forceBlur()
       return this.checkForChanges()
@@ -136,6 +147,8 @@ export default {
           }
         }
       }
+
+      this.handleInputChange()
     },
     forceBlur() {
       if (this.$refs.titleInput) this.$refs.titleInput.blur()

client/components/widgets/SeriesInputWidget.vue

@@ -71,8 +71,6 @@ export default {
       this.showSeriesForm = true
     },
     submitSeriesForm() {
-      console.log('submit series form', this.value, this.selectedSeries)
-
       if (!this.selectedSeries.name) {
         this.$toast.error('Must enter a series')
         return

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

@@ -5,14 +5,14 @@ import Tooltip from '@/components/ui/Tooltip.vue'
 import LoadingSpinner from '@/components/widgets/LoadingSpinner.vue'
 
 describe('AuthorCard', () => {
-  const author = {
+  const authorMount = {
     id: 1,
     name: 'John Doe',
     numBooks: 5
   }
 
   const propsData = {
-    author,
+    authorMount,
     nameBelow: false
   }
 

client/layouts/default.vue

@@ -357,7 +357,8 @@ export default {
         teardown: false,
         transports: ['websocket'],
         upgrade: false,
-        reconnection: true
+        reconnection: true,
+        path: `${this.$config.routerBasePath}/socket.io`
       })
       this.$root.socket = this.socket
       console.log('Socket initialized')

client/mixins/bookshelfCardsHelpers.js

@@ -4,6 +4,7 @@ import LazySeriesCard from '@/components/cards/LazySeriesCard'
 import LazyCollectionCard from '@/components/cards/LazyCollectionCard'
 import LazyPlaylistCard from '@/components/cards/LazyPlaylistCard'
 import LazyAlbumCard from '@/components/cards/LazyAlbumCard'
+import AuthorCard from '@/components/cards/AuthorCard'
 
 export default {
   data() {
@@ -20,6 +21,7 @@ export default {
       if (this.entityName === 'collections') return Vue.extend(LazyCollectionCard)
       if (this.entityName === 'playlists') return Vue.extend(LazyPlaylistCard)
       if (this.entityName === 'albums') return Vue.extend(LazyAlbumCard)
+      if (this.entityName === 'authors') return Vue.extend(AuthorCard)
       return Vue.extend(LazyBookCard)
     },
     getComponentName() {
@@ -27,6 +29,7 @@ export default {
       if (this.entityName === 'collections') return 'cards-lazy-collection-card'
       if (this.entityName === 'playlists') return 'cards-lazy-playlist-card'
       if (this.entityName === 'albums') return 'cards-lazy-album-card'
+      if (this.entityName === 'authors') return 'cards-author-card'
       return 'cards-lazy-book-card'
     },
     async setCardSize() {
@@ -46,13 +49,14 @@ export default {
         props.orderBy = this.seriesSortBy
       }
       const instance = new ComponentClass({
-        propsData: props
+        propsData: props,
+        parent: this
       })
       instance.$mount()
       this.resizeObserver = new ResizeObserver((entries) => {
         for (let entry of entries) {
-          this.cardWidth = entry.contentRect.width
+          this.cardWidth = entry.borderBoxSize[0].inlineSize
-          this.cardHeight = entry.contentRect.height
+          this.cardHeight = entry.borderBoxSize[0].blockSize
           this.resizeObserver.disconnect()
           this.$refs.bookshelf.removeChild(instance.$el)
         }
@@ -72,7 +76,7 @@ export default {
       })
       const timeAfter = performance.now()
     },
-    async mountEntityCard(index) {
+    mountEntityCard(index) {
       var shelf = Math.floor(index / this.entitiesPerShelf)
       var shelfEl = document.getElementById(`shelf-${shelf}`)
       if (!shelfEl) {
@@ -114,6 +118,7 @@ export default {
       const _this = this
       const instance = new ComponentClass({
         propsData: props,
+        parent: this,
         created() {
           this.$on('edit', (entity) => {
             if (_this.editEntity) _this.editEntity(entity)

client/mixins/uploadHelpers.js

@@ -28,10 +28,8 @@ export default {
       var validOtherFiles = []
       var ignoredFiles = []
       files.forEach((file) => {
-        // var filetype = this.checkFileType(file.name)
         if (!file.filetype) ignoredFiles.push(file)
         else {
-          // file.filetype = filetype
           if (file.filetype === 'audio' || (file.filetype === 'ebook' && mediaType === 'book')) validItemFiles.push(file)
           else validOtherFiles.push(file)
         }
@@ -165,7 +163,7 @@ export default {
 
       var firstBookPath = Path.dirname(firstBookFile.filepath)
 
-      var dirs = firstBookPath.split('/').filter(d => !!d && d !== '.')
+      var dirs = firstBookPath.split('/').filter((d) => !!d && d !== '.')
       if (dirs.length) {
         audiobook.title = dirs.pop()
         if (dirs.length > 1) {
@@ -189,7 +187,7 @@ export default {
       var firstAudioFile = podcast.itemFiles[0]
       if (!firstAudioFile.filepath) return podcast // No path
       var firstPath = Path.dirname(firstAudioFile.filepath)
-      var dirs = firstPath.split('/').filter(d => !!d && d !== '.')
+      var dirs = firstPath.split('/').filter((d) => !!d && d !== '.')
       if (dirs.length) {
         podcast.title = dirs.length > 1 ? dirs[1] : dirs[0]
       } else {
@@ -212,13 +210,15 @@ export default {
       }
       var ignoredFiles = itemData.ignoredFiles
       var index = 1
-      var items = itemData.items.filter((ab) => {
+      var items = itemData.items
-        if (!ab.itemFiles.length) {
+        .filter((ab) => {
-          if (ab.otherFiles.length) ignoredFiles = ignoredFiles.concat(ab.otherFiles)
+          if (!ab.itemFiles.length) {
-          if (ab.ignoredFiles.length) ignoredFiles = ignoredFiles.concat(ab.ignoredFiles)
+            if (ab.otherFiles.length) ignoredFiles = ignoredFiles.concat(ab.otherFiles)
-        }
+            if (ab.ignoredFiles.length) ignoredFiles = ignoredFiles.concat(ab.ignoredFiles)
-        return ab.itemFiles.length
+          }
-      }).map(ab => this.cleanItem(ab, mediaType, index++))
+          return ab.itemFiles.length
+        })
+        .map((ab) => this.cleanItem(ab, mediaType, index++))
       return {
         items,
         ignoredFiles
@@ -259,7 +259,7 @@ export default {
 
       otherFiles.forEach((file) => {
         var dir = Path.dirname(file.filepath)
-        var findItem = Object.values(itemMap).find(b => dir.startsWith(b.path))
+        var findItem = Object.values(itemMap).find((b) => dir.startsWith(b.path))
         if (findItem) {
           findItem.otherFiles.push(file)
         } else {
@@ -270,18 +270,18 @@ export default {
       var items = []
       var index = 1
       // If book media type and all files are audio files then treat each one as an audiobook
-      if (itemMap[''] && !otherFiles.length && mediaType === 'book' && !itemMap[''].itemFiles.some(f => f.filetype !== 'audio')) {
+      if (itemMap[''] && !otherFiles.length && mediaType === 'book' && !itemMap[''].itemFiles.some((f) => f.filetype !== 'audio')) {
         items = itemMap[''].itemFiles.map((audioFile) => {
           return this.cleanItem({ itemFiles: [audioFile], otherFiles: [], ignoredFiles: [] }, mediaType, index++)
         })
       } else {
-        items = Object.values(itemMap).map(i => this.cleanItem(i, mediaType, index++))
+        items = Object.values(itemMap).map((i) => this.cleanItem(i, mediaType, index++))
       }
 
       return {
         items,
         ignoredFiles: ignoredFiles
       }
-    },
+    }
   }
 }

client/nuxt.config.js

@@ -1,19 +1,24 @@
 const pkg = require('./package.json')
 
+const routerBasePath = process.env.ROUTER_BASE_PATH || ''
+const serverHostUrl = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3333'
+const serverPaths = ['api/', 'public/', 'hls/', 'auth/', 'feed/', 'status', 'login', 'logout', 'init']
+const proxy = Object.fromEntries(serverPaths.map((path) => [`${routerBasePath}/${path}`, { target: process.env.NODE_ENV !== 'production' ? serverHostUrl : '/' }]))
+
 module.exports = {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
   target: 'static',
   dev: process.env.NODE_ENV !== 'production',
   env: {
-    serverUrl: process.env.NODE_ENV === 'production' ? process.env.ROUTER_BASE_PATH || '' : 'http://localhost:3333',
+    serverUrl: serverHostUrl + routerBasePath,
     chromecastReceiver: 'FD1F76C5'
   },
   telemetry: false,
 
   publicRuntimeConfig: {
     version: pkg.version,
-    routerBasePath: process.env.ROUTER_BASE_PATH || ''
+    routerBasePath
   },
 
   // Global page headers: https://go.nuxtjs.dev/config-head
@@ -22,38 +27,23 @@ module.exports = {
     htmlAttrs: {
       lang: 'en'
     },
-    meta: [
+    meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, { hid: 'robots', name: 'robots', content: 'noindex' }],
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
-      { hid: 'robots', name: 'robots', content: 'noindex' }
-    ],
     script: [],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' },
+      { rel: 'icon', type: 'image/x-icon', href: routerBasePath + '/favicon.ico' },
-      { rel: 'apple-touch-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/ios_icon.png' }
+      { rel: 'apple-touch-icon', href: routerBasePath + '/ios_icon.png' }
     ]
   },
 
   router: {
-    base: process.env.ROUTER_BASE_PATH || ''
+    base: routerBasePath
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [
+  css: ['@/assets/tailwind.css', '@/assets/app.css'],
-    '@/assets/tailwind.css',
-    '@/assets/app.css'
-  ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
+  plugins: ['@/plugins/constants.js', '@/plugins/init.client.js', '@/plugins/axios.js', '@/plugins/toast.js', '@/plugins/utils.js', '@/plugins/i18n.js'],
-    '@/plugins/constants.js',
-    '@/plugins/init.client.js',
-    '@/plugins/axios.js',
-    '@/plugins/toast.js',
-    '@/plugins/utils.js',
-    '@/plugins/i18n.js'
-  ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -65,30 +55,25 @@ module.exports = {
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
+  modules: ['nuxt-socket-io', '@nuxtjs/axios', '@nuxtjs/proxy'],
-    'nuxt-socket-io',
-    '@nuxtjs/axios',
-    '@nuxtjs/proxy'
-  ],
 
-  proxy: {
+  proxy,
-    '/api/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } }
-  },
 
   io: {
-    sockets: [{
+    sockets: [
-      name: 'dev',
+      {
-      url: 'http://localhost:3333'
+        name: 'dev',
-    },
+        url: serverHostUrl
-    {
+      },
-      name: 'prod'
+      {
-    }]
+        name: 'prod'
+      }
+    ]
   },
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
-    baseURL: process.env.ROUTER_BASE_PATH || ''
+    baseURL: routerBasePath
   },
 
   // nuxt/pwa https://pwa.nuxtjs.org
@@ -108,11 +93,11 @@ module.exports = {
       background_color: '#232323',
       icons: [
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
+          src: routerBasePath + '/icon.svg',
           sizes: 'any'
         },
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon192.png',
+          src: routerBasePath + '/icon192.png',
           type: 'image/png',
           sizes: 'any'
         }
@@ -129,10 +114,12 @@ module.exports = {
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     postcss: {
-      plugins: {
+      postcssOptions: {
-        tailwindcss: {},
+        plugins: {
-        autoprefixer: {},
+          tailwindcss: {},
-      },
+          autoprefixer: {}
+        }
+      }
     }
   },
   watchers: {
@@ -147,12 +134,12 @@ module.exports = {
   },
 
   /**
- * Temporary workaround for @nuxt-community/tailwindcss-module.
+   * Temporary workaround for @nuxt-community/tailwindcss-module.
- *
+   *
- * Reported: 2022-05-23
+   * Reported: 2022-05-23
- * See: [Issue tracker](https://github.com/nuxt-community/tailwindcss-module/issues/480)
+   * See: [Issue tracker](https://github.com/nuxt-community/tailwindcss-module/issues/480)
- */
+   */
   devServerHandlers: [],
 
-  ignore: ["**/*.test.*", "**/*.cy.*"]
+  ignore: ['**/*.test.*', '**/*.cy.*']
 }

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.13.2",
+  "version": "2.17.2",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",
@@ -27,7 +27,7 @@
     "fast-average-color": "^9.4.0",
     "hls.js": "^1.5.7",
     "libarchive.js": "^1.3.0",
-    "nuxt": "^2.17.3",
+    "nuxt": "^2.18.1",
     "nuxt-socket-io": "^1.1.18",
     "trix": "^1.3.1",
     "v-click-outside": "^3.1.2",

client/pages/account.vue

@@ -32,9 +32,48 @@
         </form>
       </div>
 
+      <div v-if="showEreaderTable">
+        <div class="w-full h-px bg-white/10 my-4" />
+
+        <app-settings-content :header-text="$strings.HeaderEreaderDevices">
+          <template #header-items>
+            <div class="flex-grow" />
+
+            <ui-btn color="primary" small @click="addNewDeviceClick">{{ $strings.ButtonAddDevice }}</ui-btn>
+          </template>
+
+          <table v-if="ereaderDevices.length" class="tracksTable mt-4">
+            <tr>
+              <th class="text-left">{{ $strings.LabelName }}</th>
+              <th class="text-left">{{ $strings.LabelEmail }}</th>
+              <th class="w-40"></th>
+            </tr>
+            <tr v-for="device in ereaderDevices" :key="device.name">
+              <td>
+                <p class="text-sm md:text-base text-gray-100">{{ device.name }}</p>
+              </td>
+              <td class="text-left">
+                <p class="text-sm md:text-base text-gray-100">{{ device.email }}</p>
+              </td>
+              <td class="w-40">
+                <div class="flex justify-end items-center h-10">
+                  <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" :disabled="deletingDeviceName === device.name || device.users?.length !== 1" class="mx-1" @click="editDeviceClick(device)" />
+                  <ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" :disabled="deletingDeviceName === device.name || device.users?.length !== 1" @click="deleteDeviceClick(device)" />
+                </div>
+              </td>
+            </tr>
+          </table>
+          <div v-else-if="!loading" class="text-center py-4">
+            <p class="text-lg text-gray-100">{{ $strings.MessageNoDevices }}</p>
+          </div>
+        </app-settings-content>
+      </div>
+
       <div class="py-4 mt-8 flex">
         <ui-btn color="primary flex items-center text-lg" @click="logout"><span class="material-symbols mr-4 icon-text">logout</span>{{ $strings.ButtonLogout }}</ui-btn>
       </div>
+
+      <modals-emails-user-e-reader-device-modal v-model="showEReaderDeviceModal" :existing-devices="revisedEreaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />
     </div>
   </div>
 </template>
@@ -43,11 +82,20 @@
 export default {
   data() {
     return {
+      loading: false,
       password: null,
       newPassword: null,
       confirmPassword: null,
       changingPassword: false,
-      selectedLanguage: ''
+      selectedLanguage: '',
+      newEReaderDevice: {
+        name: '',
+        email: ''
+      },
+      ereaderDevices: [],
+      deletingDeviceName: null,
+      selectedEReaderDevice: null,
+      showEReaderDeviceModal: false
     }
   },
   computed: {
@@ -75,6 +123,12 @@ export default {
     },
     showChangePasswordForm() {
       return !this.isGuest && this.isPasswordAuthEnabled
+    },
+    showEreaderTable() {
+      return this.usertype !== 'root' && this.usertype !== 'admin' && this.user.permissions?.createEreader
+    },
+    revisedEreaderDevices() {
+      return this.ereaderDevices.filter((device) => device.users?.length === 1)
     }
   },
   methods: {
@@ -142,10 +196,52 @@ export default {
           this.$toast.error(this.$strings.ToastUnknownError)
           this.changingPassword = false
         })
+    },
+    addNewDeviceClick() {
+      this.selectedEReaderDevice = null
+      this.showEReaderDeviceModal = true
+    },
+    editDeviceClick(device) {
+      this.selectedEReaderDevice = device
+      this.showEReaderDeviceModal = true
+    },
+    deleteDeviceClick(device) {
+      const payload = {
+        message: this.$getString('MessageConfirmDeleteDevice', [device.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteDevice(device)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteDevice(device) {
+      const payload = {
+        ereaderDevices: this.revisedEreaderDevices.filter((d) => d.name !== device.name)
+      }
+      this.deletingDeviceName = device.name
+      this.$axios
+        .$post(`/api/me/ereader-devices`, payload)
+        .then((data) => {
+          this.ereaderDevicesUpdated(data.ereaderDevices)
+        })
+        .catch((error) => {
+          console.error('Failed to delete device', error)
+          this.$toast.error(this.$strings.ToastRemoveFailed)
+        })
+        .finally(() => {
+          this.deletingDeviceName = null
+        })
+    },
+    ereaderDevicesUpdated(ereaderDevices) {
+      this.ereaderDevices = ereaderDevices
     }
   },
   mounted() {
     this.selectedLanguage = this.$languageCodes.current
+    this.ereaderDevices = this.$store.state.libraries.ereaderDevices || []
   }
 }
 </script>

client/pages/audiobook/_id/chapters.vue

@@ -415,7 +415,7 @@ export default {
       const audioEl = this.audioEl || document.createElement('audio')
       var src = audioTrack.contentUrl + `?token=${this.userToken}`
       if (this.$isDev) {
-        src = `http://localhost:3333${this.$config.routerBasePath}${src}`
+        src = `${process.env.serverUrl}${src}`
       }
 
       audioEl.src = src
@@ -486,7 +486,7 @@ export default {
         .then((data) => {
           this.saving = false
           if (data.updated) {
-            this.$toast.success('Chapters updated')
+            this.$toast.success(this.$strings.ToastChaptersUpdated)
             if (this.previousRoute) {
               this.$router.push(this.previousRoute)
             } else {
@@ -499,7 +499,7 @@ export default {
         .catch((error) => {
           this.saving = false
           console.error('Failed to update chapters', error)
-          this.$toast.error('Failed to update chapters')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     },
     applyChapterNamesOnly() {
@@ -533,7 +533,7 @@ export default {
     },
     findChapters() {
       if (!this.asinInput) {
-        this.$toast.error('Must input an ASIN')
+        this.$toast.error(this.$strings.ToastAsinRequired)
         return
       }
 
@@ -628,15 +628,27 @@ export default {
         .finally(() => {
           this.saving = false
         })
+    },
+    libraryItemUpdated(libraryItem) {
+      if (libraryItem.id === this.libraryItem.id) {
+        if (!!libraryItem.media.metadata.asin && this.mediaMetadata.asin !== libraryItem.media.metadata.asin) {
+          this.asinInput = libraryItem.media.metadata.asin
+        }
+        this.libraryItem = libraryItem
+      }
     }
   },
   mounted() {
     this.regionInput = localStorage.getItem('audibleRegion') || 'US'
     this.asinInput = this.mediaMetadata.asin || null
     this.initChapters()
+
+    this.$eventBus.$on(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
   },
   beforeDestroy() {
     this.destroyAudioEl()
+
+    this.$eventBus.$off(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
   }
 }
 </script>

client/pages/audiobook/_id/manage.vue

@@ -63,11 +63,11 @@
     <div class="w-full max-w-4xl mx-auto">
       <!-- queued alert -->
       <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mb-4">
-        <p class="text-lg">Audiobook is queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+        <p class="text-lg">{{ $getString('MessageEmbedQueue', [queuedEmbedLIds.length]) }}</p>
       </widgets-alert>
       <!-- metadata embed action buttons -->
       <div v-else-if="isEmbedTool" class="w-full flex justify-end items-center mb-4">
-        <ui-checkbox v-if="!isTaskFinished" v-model="shouldBackupAudioFiles" :disabled="processing" label="Backup audio files" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" @input="toggleBackupAudioFiles" />
+        <ui-checkbox v-if="!isTaskFinished" v-model="shouldBackupAudioFiles" :disabled="processing" :label="$strings.LabelBackupAudioFiles" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" @input="toggleBackupAudioFiles" />
 
         <div class="flex-grow" />
 
@@ -78,7 +78,7 @@
       <!-- m4b embed action buttons -->
       <div v-else class="w-full flex items-center mb-4">
         <button :disabled="processing" class="text-sm uppercase text-gray-200 flex items-center pt-px pl-1 pr-2 hover:bg-white/5 rounded-md" @click="showEncodeOptions = !showEncodeOptions">
-          <span class="material-symbols text-xl">{{ showEncodeOptions || usingCustomEncodeOptions ? 'check_box' : 'check_box_outline_blank' }}</span> <span class="pl-1">Use Advanced Options</span>
+          <span class="material-symbols text-xl">{{ showEncodeOptions || usingCustomEncodeOptions ? 'check_box' : 'check_box_outline_blank' }}</span> <span class="pl-1">{{ $strings.LabelUseAdvancedOptions }}</span>
         </button>
 
         <div class="flex-grow" />
@@ -94,11 +94,11 @@
         <transition name="slide">
           <div v-if="showEncodeOptions || usingCustomEncodeOptions" class="mb-4 pb-4 border-b border-white/10">
             <div class="flex flex-wrap -mx-2">
-              <ui-text-input-with-label ref="bitrateInput" v-model="encodingOptions.bitrate" :disabled="processing || isTaskFinished" :label="'Audio Bitrate (e.g. 128k)'" class="m-2 max-w-40" @input="bitrateChanged" />
+              <ui-text-input-with-label ref="bitrateInput" v-model="encodingOptions.bitrate" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioBitrate" class="m-2 max-w-40" @input="bitrateChanged" />
-              <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" :disabled="processing || isTaskFinished" :label="'Audio Channels (1 or 2)'" class="m-2 max-w-40" @input="channelsChanged" />
+              <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioChannels" class="m-2 max-w-40" @input="channelsChanged" />
-              <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="'Audio Codec'" class="m-2 max-w-40" @input="codecChanged" />
+              <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="$strings.LabelAudioCodec" class="m-2 max-w-40" @input="codecChanged" />
             </div>
-            <p class="text-sm text-warning">Warning: Do not update these settings unless you are familiar with ffmpeg encoding options.</p>
+            <p class="text-sm text-warning">{{ $strings.LabelEncodingWarningAdvancedSettings }}</p>
           </div>
         </transition>
       </div>
@@ -106,36 +106,36 @@
       <div class="mb-4">
         <div v-if="isEmbedTool" class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
-          <p class="text-gray-200 ml-2">Metadata will be embedded in the audio tracks inside your audiobook folder.</p>
+          <p class="text-gray-200 ml-2">{{ $strings.LabelEncodingInfoEmbedded }}</p>
         </div>
         <div v-else class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
           <p class="text-gray-200 ml-2">
-            Finished M4B will be put into your audiobook folder at <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">.../{{ libraryItemRelPath }}/</span>.
+            {{ $strings.LabelEncodingFinishedM4B }} <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">.../{{ libraryItemRelPath }}/</span>.
           </p>
         </div>
 
         <div v-if="shouldBackupAudioFiles || isM4BTool" class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
           <p class="text-gray-200 ml-2">
-            A backup of your original audio files will be stored in <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">/metadata/cache/items/{{ libraryItemId }}/</span>. Make sure to periodically purge items cache.
+            {{ $strings.LabelEncodingBackupLocation }} <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">/metadata/cache/items/{{ libraryItemId }}/</span>. {{ $strings.LabelEncodingClearItemCache }}
           </p>
         </div>
         <div v-if="isEmbedTool && audioFiles.length > 1" class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
-          <p class="text-gray-200 ml-2">Chapters are not embedded in multi-track audiobooks.</p>
+          <p class="text-gray-200 ml-2">{{ $strings.LabelEncodingChaptersNotEmbedded }}</p>
         </div>
         <div v-if="isM4BTool" class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
-          <p class="text-gray-200 ml-2">Encoding can take up to 30 minutes.</p>
+          <p class="text-gray-200 ml-2">{{ $strings.LabelEncodingTimeWarning }}</p>
         </div>
         <div v-if="isM4BTool" class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
-          <p class="text-gray-200 ml-2">If you have the watcher disabled you will need to re-scan this audiobook afterwards.</p>
+          <p class="text-gray-200 ml-2">{{ $strings.LabelEncodingWatcherDisabled }}</p>
         </div>
         <div class="flex items-start mb-2">
           <span class="material-symbols text-base text-warning pt-1">star</span>
-          <p class="text-gray-200 ml-2">Once the task is started you can navigate away from this page.</p>
+          <p class="text-gray-200 ml-2">{{ $strings.LabelEncodingStartedNavigation }}</p>
         </div>
       </div>
     </div>
@@ -269,11 +269,11 @@ export default {
     },
     availableTools() {
       if (this.isSingleM4b) {
-        return [{ value: 'embed', text: 'Embed Metadata' }]
+        return [{ value: 'embed', text: this.$strings.LabelToolsEmbedMetadata }]
       } else {
         return [
-          { value: 'embed', text: 'Embed Metadata' },
+          { value: 'embed', text: this.$strings.LabelToolsEmbedMetadata },
-          { value: 'm4b', text: 'M4B Encoder' }
+          { value: 'm4b', text: this.$strings.LabelToolsM4bEncoder }
         ]
       }
     },
@@ -370,7 +370,7 @@ export default {
     },
     embedClick() {
       const payload = {
-        message: `Are you sure you want to embed metadata in ${this.audioFiles.length} audio files?`,
+        message: this.$getString('MessageConfirmEmbedMetadataInAudioFiles', [this.audioFiles.length]),
         callback: (confirmed) => {
           if (confirmed) {
             this.updateAudioFileMetadata()

client/pages/author/_id.vue

@@ -53,7 +53,7 @@ export default {
     })
 
     if (!author) {
-      return redirect(`/library/${store.state.libraries.currentLibraryId}/authors`)
+      return redirect(`/library/${store.state.libraries.currentLibraryId}/bookshelf/authors`)
     }
 
     if (store.state.libraries.currentLibraryId !== author.libraryId || !store.state.libraries.filterData) {
@@ -109,7 +109,7 @@ export default {
     authorRemoved(author) {
       if (author.id === this.author.id) {
         console.warn('Author was removed')
-        this.$router.replace(`/library/${this.currentLibraryId}/authors`)
+        this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/authors`)
       }
     }
   },

client/pages/batch/index.vue

@@ -97,8 +97,8 @@
     <div class="flex justify-center flex-wrap">
       <template v-for="libraryItem in libraryItemCopies">
         <div :key="libraryItem.id" class="w-full max-w-3xl border border-black-300 p-6 -ml-px -mt-px">
-          <widgets-book-details-edit v-if="libraryItem.mediaType === 'book'" :ref="`itemForm-${libraryItem.id}`" :library-item="libraryItem" />
+          <widgets-book-details-edit v-if="libraryItem.mediaType === 'book'" :ref="`itemForm-${libraryItem.id}`" :library-item="libraryItem" @change="handleItemChange" />
-          <widgets-podcast-details-edit v-else :ref="`itemForm-${libraryItem.id}`" :library-item="libraryItem" />
+          <widgets-podcast-details-edit v-else :ref="`itemForm-${libraryItem.id}`" :library-item="libraryItem" @change="handleItemChange" />
         </div>
       </template>
     </div>
@@ -108,7 +108,7 @@
 
     <div :class="isScrollable ? 'fixed left-0 box-shadow-lg-up bg-primary' : ''" class="w-full h-20 px-4 flex items-center border-t border-bg z-40" :style="{ bottom: streamLibraryItem ? '165px' : '0px' }">
       <div class="flex-grow" />
-      <ui-btn color="success" :padding-x="8" class="text-lg" :loading="isProcessing" @click.prevent="saveClick">{{ $strings.ButtonSave }}</ui-btn>
+      <ui-btn color="success" :padding-x="8" class="text-lg" :loading="isProcessing" :disabled="!hasChanges" @click.prevent="saveClick">{{ $strings.ButtonSave }}</ui-btn>
     </div>
   </div>
 </template>
@@ -170,7 +170,8 @@ export default {
         abridged: false
       },
       appendableKeys: ['authors', 'genres', 'tags', 'narrators', 'series'],
-      openMapOptions: false
+      openMapOptions: false,
+      itemsWithChanges: []
     }
   },
   computed: {
@@ -221,9 +222,19 @@ export default {
     },
     hasSelectedBatchUsage() {
       return Object.values(this.selectedBatchUsage).some((b) => !!b)
+    },
+    hasChanges() {
+      return this.itemsWithChanges.length > 0
     }
   },
   methods: {
+    handleItemChange(itemChange) {
+      if (!itemChange.hasChanges) {
+        this.itemsWithChanges = this.itemsWithChanges.filter((id) => id !== itemChange.libraryItemId)
+      } else if (!this.itemsWithChanges.includes(itemChange.libraryItemId)) {
+        this.itemsWithChanges.push(itemChange.libraryItemId)
+      }
+    },
     blurBatchForm() {
       if (this.$refs.seriesSelect && this.$refs.seriesSelect.isFocused) {
         this.$refs.seriesSelect.forceBlur()
@@ -283,38 +294,10 @@ export default {
     removedSeriesItem(item) {},
     newNarratorItem(item) {},
     removedNarratorItem(item) {},
-    newTagItem(item) {
+    newTagItem(item) {},
-      // if (item && !this.newTagItems.includes(item)) {
+    removedTagItem(item) {},
-      //   this.newTagItems.push(item)
+    newGenreItem(item) {},
-      // }
+    removedGenreItem(item) {},
-    },
-    removedTagItem(item) {
-      // If newly added, remove if not used on any other items
-      // if (item && this.newTagItems.includes(item)) {
-      //   var usedByOtherAb = this.libraryItemCopies.find((ab) => {
-      //     return ab.tags && ab.tags.includes(item)
-      //   })
-      //   if (!usedByOtherAb) {
-      //     this.newTagItems = this.newTagItems.filter((t) => t !== item)
-      //   }
-      // }
-    },
-    newGenreItem(item) {
-      // if (item && !this.newGenreItems.includes(item)) {
-      //   this.newGenreItems.push(item)
-      // }
-    },
-    removedGenreItem(item) {
-      // If newly added, remove if not used on any other items
-      // if (item && this.newGenreItems.includes(item)) {
-      //   var usedByOtherAb = this.libraryItemCopies.find((ab) => {
-      //     return ab.book.genres && ab.book.genres.includes(item)
-      //   })
-      //   if (!usedByOtherAb) {
-      //     this.newGenreItems = this.newGenreItems.filter((t) => t !== item)
-      //   }
-      // }
-    },
     init() {
       // TODO: Better deep cloning of library items
       this.libraryItemCopies = this.libraryItems.map((li) => {
@@ -376,6 +359,7 @@ export default {
         .then((data) => {
           this.isProcessing = false
           if (data.updates) {
+            this.itemsWithChanges = []
             this.$toast.success(`Successfully updated ${data.updates} items`)
             this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
           } else {
@@ -387,10 +371,28 @@ export default {
           this.$toast.error('Failed to batch update')
           this.isProcessing = false
         })
+    },
+    beforeUnload(e) {
+      if (!e || !this.hasChanges) return
+      e.preventDefault()
+      e.returnValue = ''
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    if (this.hasChanges) {
+      next(false)
+      window.location = to.path
+    } else {
+      next()
     }
   },
   mounted() {
     this.init()
+
+    window.addEventListener('beforeunload', this.beforeUnload)
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeunload', this.beforeUnload)
   }
 }
 </script>

client/pages/collection/_id.vue

@@ -16,7 +16,7 @@
 
             <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="clickPlay">
               <span v-show="!streaming" class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
-              {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
+              {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlayAll }}
             </ui-btn>
 
             <!-- RSS feed -->

client/pages/config/authentication.vue

@@ -317,7 +317,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update server settings', error)
-          this.$toast.error(this.$strings.ToastServerSettingsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.savingSettings = false

client/pages/config/backups.vue

@@ -162,7 +162,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to save backup path', error)
-          const errorMsg = error.response?.data || this.$strings.ToastBackupPathUpdateFailed
+          const errorMsg = error.response?.data || this.$strings.ToastFailedToUpdate
           this.$toast.error(errorMsg)
         })
         .finally(() => {

client/pages/config/email.vue

@@ -292,7 +292,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update email settings', error)
-          this.$toast.error(this.$strings.ToastEmailSettingsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.savingSettings = false

client/pages/config/index.vue

@@ -290,7 +290,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update prefixes', error)
-          this.$toast.error(this.$strings.ToastSortingPrefixesUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.savingPrefixes = false
@@ -328,7 +328,6 @@ export default {
         .dispatch('updateServerSettings', payload)
         .then(() => {
           this.updatingServerSettings = false
-          this.$toast.success(this.$strings.ToastServerSettingsUpdateSuccess)
 
           if (payload.language) {
             // Updating language after save allows for re-rendering
@@ -338,7 +337,7 @@ export default {
         .catch((error) => {
           console.error('Failed to update server settings', error)
           this.updatingServerSettings = false
-          this.$toast.error(this.$strings.ToastServerSettingsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     },
     initServerSettings() {

client/pages/config/log.vue

@@ -10,9 +10,9 @@
       </template>
 
       <div class="flex justify-between mb-2 place-items-end">
-        <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-full sm:w-40 h-8 text-sm sm:mb-0" />
+        <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" clearable class="w-full sm:w-40 h-8 text-sm sm:mb-0" />
 
-        <ui-dropdown v-model="newServerSettings.logLevel" label="Server Log Level" :items="logLevelItems" @input="logLevelUpdated" class="w-full sm:w-44" />
+        <ui-dropdown v-model="newServerSettings.logLevel" :label="$strings.LabelServerLogLevel" :items="logLevelItems" @input="logLevelUpdated" class="w-full sm:w-44" />
       </div>
 
       <div class="relative">

client/pages/config/notifications.vue

@@ -132,7 +132,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to update notification settings', error)
-          this.$toast.error(this.$strings.ToastNotificationSettingsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.savingSettings = false

client/pages/config/sessions.vue

@@ -88,7 +88,7 @@
             <ui-dropdown v-model="itemsPerPage" :items="itemsPerPageOptions" small class="w-24 mx-2" @input="updatedItemsPerPage" />
           </div>
           <div class="inline-flex items-center">
-            <p class="text-sm mx-2">Page {{ currentPage + 1 }} of {{ numPages }}</p>
+            <p class="text-sm mx-2">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>
             <ui-icon-btn icon="arrow_back_ios_new" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
             <ui-icon-btn icon="arrow_forward_ios" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
           </div>
@@ -103,7 +103,7 @@
       <div v-if="openListeningSessions.length" class="w-full my-8 h-px bg-white/10" />
 
       <!-- open listening sessions table -->
-      <p v-if="openListeningSessions.length" class="text-lg my-4">Open Listening Sessions</p>
+      <p v-if="openListeningSessions.length" class="text-lg my-4">{{ $strings.HeaderOpenListeningSessions }}</p>
       <div v-if="openListeningSessions.length" class="block max-w-full">
         <table class="userSessionsTable">
           <tr class="bg-primary bg-opacity-40">

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

@@ -14,7 +14,7 @@
         <h1 class="text-xl pl-2">{{ username }}</h1>
       </div>
       <div v-if="userToken" class="flex text-xs mt-4">
-        <ui-text-input-with-label label="API Token" :value="userToken" readonly />
+        <ui-text-input-with-label :label="$strings.LabelApiToken" :value="userToken" readonly />
 
         <div class="px-1 mt-8 cursor-pointer" @click="copyToClipboard(userToken)">
           <span class="material-symbols pl-2 text-base">content_copy</span>

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

@@ -54,7 +54,7 @@
           </table>
           <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">Page {{ currentPage + 1 }} of {{ numPages }}</p>
+            <p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>
             <ui-icon-btn icon="arrow_forward_ios" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
           </div>
         </div>

client/pages/item/_id/index.vue

@@ -39,16 +39,11 @@
                 ><span :key="index" v-if="index < seriesList.length - 1">, </span>
               </template>
 
-              <template v-if="!isVideo">
+              <p v-if="isPodcast" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">{{ $getString('LabelByAuthor', [podcastAuthor]) }}</p>
-                <p v-if="isPodcast" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">{{ $getString('LabelByAuthor', [podcastAuthor]) }}</p>
+              <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis">
-                <p v-else-if="musicArtists.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis">
+                by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-                  <nuxt-link v-for="(artist, index) in musicArtists" :key="index" :to="`/artist/${$encode(artist)}`" class="hover:underline">{{ artist }}<span v-if="index < musicArtists.length - 1">,&nbsp;</span></nuxt-link>
+              </p>
-                </p>
+              <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
-                <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis">
-                  by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-                </p>
-                <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
-              </template>
 
               <content-library-item-details :library-item="libraryItem" />
             </div>
@@ -109,7 +104,7 @@
               <ui-icon-btn icon="&#xe3c9;" outlined class="mx-0.5" @click="editClick" />
             </ui-tooltip>
 
-            <ui-tooltip v-if="!isPodcast && !isMusic" :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
+            <ui-tooltip v-if="!isPodcast" :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
               <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" class="mx-0.5" @click="toggleFinished" />
             </ui-tooltip>
 
@@ -220,12 +215,6 @@ export default {
     isPodcast() {
       return this.libraryItem.mediaType === 'podcast'
     },
-    isVideo() {
-      return this.libraryItem.mediaType === 'video'
-    },
-    isMusic() {
-      return this.libraryItem.mediaType === 'music'
-    },
     isMissing() {
       return this.libraryItem.isMissing
     },
@@ -240,8 +229,6 @@ export default {
     },
     showPlayButton() {
       if (this.isMissing || this.isInvalid) return false
-      if (this.isMusic) return !!this.audioFile
-      if (this.isVideo) return !!this.videoFile
       if (this.isPodcast) return this.podcastEpisodes.length
       return this.tracks.length
     },
@@ -292,9 +279,6 @@ export default {
     authors() {
       return this.mediaMetadata.authors || []
     },
-    musicArtists() {
-      return this.mediaMetadata.artists || []
-    },
     series() {
       return this.mediaMetadata.series || []
     },
@@ -309,7 +293,7 @@ export default {
       })
     },
     duration() {
-      if (!this.tracks.length && !this.audioFile) return 0
+      if (!this.tracks.length) return 0
       return this.media.duration
     },
     libraryFiles() {
@@ -321,18 +305,10 @@ export default {
     ebookFile() {
       return this.media.ebookFile
     },
-    videoFile() {
-      return this.media.videoFile
-    },
-    audioFile() {
-      // Music track
-      return this.media.audioFile
-    },
     description() {
       return this.mediaMetadata.description || ''
     },
     userMediaProgress() {
-      if (this.isMusic) return null
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
     userIsFinished() {
@@ -662,6 +638,11 @@ export default {
         this.episodesDownloading = this.episodesDownloading.filter((d) => d.id !== episodeDownload.id)
       }
     },
+    episodeDownloadQueueCleared(libraryItemId) {
+      if (libraryItemId === this.libraryItemId) {
+        this.episodeDownloadsQueued = []
+      }
+    },
     rssFeedOpen(data) {
       if (data.entityId === this.libraryItemId) {
         console.log('RSS Feed Opened', data)
@@ -800,6 +781,7 @@ export default {
     this.$root.socket.on('episode_download_queued', this.episodeDownloadQueued)
     this.$root.socket.on('episode_download_started', this.episodeDownloadStarted)
     this.$root.socket.on('episode_download_finished', this.episodeDownloadFinished)
+    this.$root.socket.on('episode_download_queue_cleared', this.episodeDownloadQueueCleared)
   },
   beforeDestroy() {
     this.$eventBus.$off(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
@@ -811,6 +793,7 @@ export default {
     this.$root.socket.off('episode_download_queued', this.episodeDownloadQueued)
     this.$root.socket.off('episode_download_started', this.episodeDownloadStarted)
     this.$root.socket.off('episode_download_finished', this.episodeDownloadFinished)
+    this.$root.socket.off('episode_download_queue_cleared', this.episodeDownloadQueueCleared)
   }
 }
 </script>

client/pages/library/_library/authors/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
-    <div id="bookshelf" class="w-full h-full p-8e overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
-      <!-- Cover size widget -->
-      <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
-      <div class="flex flex-wrap justify-center">
-        <template v-for="author in authorsSorted">
-          <cards-author-card :key="author.id" :author="author" class="p-3e" @edit="editAuthor" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  async asyncData({ store, params, redirect, query, app }) {
-    var libraryId = params.library
-    var libraryData = await store.dispatch('libraries/fetch', libraryId)
-    if (!libraryData) {
-      return redirect('/oops?message=Library not found')
-    }
-
-    const library = libraryData.library
-    if (library.mediaType === 'podcast') {
-      return redirect(`/library/${libraryId}`)
-    }
-
-    return {
-      libraryId
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      authors: []
-    }
-  },
-  computed: {
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    selectedAuthor() {
-      return this.$store.state.globals.selectedAuthor
-    },
-    authorSortBy() {
-      return this.$store.getters['user/getUserSetting']('authorSortBy') || 'name'
-    },
-    authorSortDesc() {
-      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
-    },
-    authorsSorted() {
-      const sortProp = this.authorSortBy
-      const bDesc = this.authorSortDesc ? -1 : 1
-      return this.authors.sort((a, b) => {
-        if (typeof a[sortProp] === 'number' && typeof b[sortProp] === 'number') {
-          // Fallback to name sort if equal
-          if (a[sortProp] === b[sortProp]) return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }) * bDesc
-          return a[sortProp] > b[sortProp] ? bDesc : -bDesc
-        }
-        return a[sortProp]?.localeCompare(b[sortProp], undefined, { sensitivity: 'base' }) * bDesc
-      })
-    }
-  },
-  methods: {
-    async init() {
-      this.authors = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/authors`)
-        .then((response) => response.authors)
-        .catch((error) => {
-          console.error('Failed to load authors', error)
-          return []
-        })
-      this.loading = false
-    },
-    authorAdded(author) {
-      if (!this.authors.some((au) => au.id === author.id)) {
-        this.authors.push(author)
-      }
-    },
-    authorUpdated(author) {
-      this.authors = this.authors.map((au) => {
-        if (au.id === author.id) {
-          return author
-        }
-        return au
-      })
-    },
-    authorRemoved(author) {
-      this.authors = this.authors.filter((au) => au.id !== author.id)
-    },
-    editAuthor(author) {
-      this.$store.commit('globals/showEditAuthorModal', author)
-    }
-  },
-  mounted() {
-    this.init()
-    this.$root.socket.on('author_added', this.authorAdded)
-    this.$root.socket.on('author_updated', this.authorUpdated)
-    this.$root.socket.on('author_removed', this.authorRemoved)
-  },
-  beforeDestroy() {
-    this.$root.socket.off('author_added', this.authorAdded)
-    this.$root.socket.off('author_updated', this.authorUpdated)
-    this.$root.socket.off('author_removed', this.authorRemoved)
-  }
-}
-</script>

client/pages/library/_library/bookshelf/_id.vue

@@ -27,7 +27,7 @@ export default {
 
     // Redirect podcast libraries
     const library = libraryData.library
-    if (library.mediaType === 'podcast' && (params.id === 'collections' || params.id === 'series')) {
+    if (library.mediaType === 'podcast' && (params.id === 'collections' || params.id === 'series' || params.id === 'authors')) {
       return redirect(`/library/${libraryId}`)
     }
 

client/pages/library/_library/narrators.vue

@@ -120,7 +120,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to updated narrator', error)
-          this.$toast.error('Failed to update narrator')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           this.loading = false
         })
     },

client/pages/library/_library/podcast/download-queue.vue

@@ -104,9 +104,6 @@ export default {
         this.episodesDownloading = this.episodesDownloading.filter((d) => d.id !== episodeDownload.id)
       }
     },
-    episodeDownloadQueueUpdated(downloadQueueDetails) {
-      this.episodeDownloadsQueued = downloadQueueDetails.queue.filter((q) => q.libraryId == this.libraryId)
-    },
     async loadInitialDownloadQueue() {
       this.processing = true
       const queuePayload = await this.$axios.$get(`/api/libraries/${this.libraryId}/episode-downloads`).catch((error) => {
@@ -128,7 +125,6 @@ export default {
       this.$root.socket.on('episode_download_queued', this.episodeDownloadQueued)
       this.$root.socket.on('episode_download_started', this.episodeDownloadStarted)
       this.$root.socket.on('episode_download_finished', this.episodeDownloadFinished)
-      this.$root.socket.on('episode_download_queue_updated', this.episodeDownloadQueueUpdated)
     }
   },
   mounted() {
@@ -138,7 +134,6 @@ export default {
     this.$root.socket.off('episode_download_queued', this.episodeDownloadQueued)
     this.$root.socket.off('episode_download_started', this.episodeDownloadStarted)
     this.$root.socket.off('episode_download_finished', this.episodeDownloadFinished)
-    this.$root.socket.off('episode_download_queue_updated', this.episodeDownloadQueueUpdated)
   }
 }
 </script>

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

@@ -5,7 +5,7 @@
     <div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
       <div class="w-full max-w-4xl mx-auto flex">
         <form @submit.prevent="submit" class="flex flex-grow">
-          <ui-text-input v-model="searchInput" type="search" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2 text-sm md:text-base" />
+          <ui-text-input v-model="searchInput" type="search" :disabled="processing" :placeholder="$strings.MessagePodcastSearchField" class="flex-grow mr-2 text-sm md:text-base" />
           <ui-btn type="submit" :disabled="processing" class="hidden md:block">{{ $strings.ButtonSubmit }}</ui-btn>
           <ui-btn type="submit" :disabled="processing" class="block md:hidden" small>{{ $strings.ButtonSubmit }}</ui-btn>
         </form>
@@ -22,7 +22,7 @@
               <div class="flex items-center">
                 <a :href="podcast.pageUrl" class="text-base md:text-lg text-gray-200 hover:underline" target="_blank" @click.stop>{{ podcast.title }}</a>
                 <widgets-explicit-indicator v-if="podcast.explicit" />
-                <widgets-already-in-library-indicator :already-in-library="podcast.alreadyInLibrary" />
+                <widgets-already-in-library-indicator v-if="podcast.alreadyInLibrary" />
               </div>
               <p class="text-sm md:text-base text-gray-300 whitespace-nowrap truncate">{{ $getString('LabelByAuthor', [podcast.artistName]) }}</p>
               <p class="text-xs text-gray-400 leading-5">{{ podcast.genres.join(', ') }}</p>
@@ -108,7 +108,7 @@ export default {
 
       if (!txt || !txt.includes('<opml') || !txt.includes('<outline ')) {
         // Quick lazy check for valid OPML
-        this.$toast.error('Invalid OPML file <opml> tag not found OR an <outline> tag was not found')
+        this.$toast.error(this.$strings.MessageTaskOpmlParseFastFail)
         this.processing = false
         return
       }
@@ -117,7 +117,7 @@ export default {
         .$post(`/api/podcasts/opml/parse`, { opmlText: txt })
         .then((data) => {
           if (!data.feeds?.length) {
-            this.$toast.error('No feeds found in OPML file')
+            this.$toast.error(this.$strings.MessageTaskOpmlParseNoneFound)
           } else {
             this.opmlFeeds = data.feeds || []
             this.showOPMLFeedsModal = true
@@ -125,7 +125,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed', error)
-          this.$toast.error('Failed to parse OPML file')
+          this.$toast.error(this.$strings.MessageTaskOpmlParseFailed)
         })
         .finally(() => {
           this.processing = false
@@ -191,7 +191,7 @@ export default {
         return
       }
       if (!podcast.feedUrl) {
-        this.$toast.error('Invalid podcast - no feed')
+        this.$toast.error(this.$strings.MessageNoPodcastFeed)
         return
       }
       this.processing = true
@@ -211,15 +211,15 @@ export default {
     async fetchExistentPodcastsInYourLibrary() {
       this.processing = true
 
-      const podcasts = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/items?page=0&minified=1`).catch((error) => {
+      const podcastsResponse = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/podcast-titles`).catch((error) => {
         console.error('Failed to fetch podcasts', error)
         return []
       })
-      this.existentPodcasts = podcasts.results.map((p) => {
+      this.existentPodcasts = podcastsResponse.podcasts.map((p) => {
         return {
-          title: p.media.metadata.title.toLowerCase(),
+          title: p.title.toLowerCase(),
-          itunesId: p.media.metadata.itunesId,
+          itunesId: p.itunesId,
-          id: p.id
+          id: p.libraryItemId
         }
       })
       this.processing = false

client/pages/playlist/_id.vue

@@ -16,7 +16,7 @@
 
             <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="clickPlay">
               <span v-show="!streaming" class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
-              {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
+              {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlayAll }}
             </ui-btn>
 
             <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />

client/pages/share/_slug.vue

@@ -10,7 +10,7 @@
         <p v-if="mediaItemShare.playbackSession.displayAuthor" class="text-lg lg:text-xl text-slate-400 font-semibold text-center mb-1 truncate">{{ mediaItemShare.playbackSession.displayAuthor }}</p>
 
         <div class="w-full pt-16">
-          <player-ui ref="audioPlayer" :chapters="chapters" :paused="isPaused" :loading="!hasLoaded" :is-podcast="false" hide-bookmarks hide-sleep-timer @playPause="playPause" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setVolume="setVolume" @setPlaybackRate="setPlaybackRate" @seek="seek" />
+          <player-ui ref="audioPlayer" :chapters="chapters" :current-chapter="currentChapter" :paused="isPaused" :loading="!hasLoaded" :is-podcast="false" hide-bookmarks hide-sleep-timer @playPause="playPause" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setVolume="setVolume" @setPlaybackRate="setPlaybackRate" @seek="seek" />
         </div>
       </div>
     </div>
@@ -51,7 +51,8 @@ export default {
       windowHeight: 0,
       listeningTimeSinceSync: 0,
       coverRgb: null,
-      coverBgIsLight: false
+      coverBgIsLight: false,
+      currentTime: 0
     }
   },
   computed: {
@@ -60,16 +61,10 @@ export default {
     },
     coverUrl() {
       if (!this.playbackSession.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
-      if (process.env.NODE_ENV === 'development') {
+      return `${this.$config.routerBasePath}/public/share/${this.mediaItemShare.slug}/cover`
-        return `http://localhost:3333/public/share/${this.mediaItemShare.slug}/cover`
-      }
-      return `/public/share/${this.mediaItemShare.slug}/cover`
     },
     audioTracks() {
       return (this.playbackSession.audioTracks || []).map((track) => {
-        if (process.env.NODE_ENV === 'development') {
-          track.contentUrl = `${process.env.serverUrl}${track.contentUrl}`
-        }
         track.relativeContentUrl = track.contentUrl
         return track
       })
@@ -83,6 +78,9 @@ export default {
     chapters() {
       return this.playbackSession.chapters || []
     },
+    currentChapter() {
+      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
+    },
     coverAspectRatio() {
       const coverAspectRatio = this.playbackSession.coverAspectRatio
       return coverAspectRatio === this.$constants.BookCoverAspectRatio.STANDARD ? 1.6 : 1
@@ -154,6 +152,7 @@ export default {
 
       // Update UI
       this.$refs.audioPlayer.setCurrentTime(time)
+      this.currentTime = time
     },
     setDuration() {
       if (!this.localAudioPlayer) return

client/pages/upload/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <div id="page-wrapper" class="page p-0 sm:p-6 overflow-y-auto" :class="streamLibraryItem ? 'streaming' : ''">
+  <div id="page-wrapper" class="page p-1 sm:p-6 overflow-y-auto" :class="streamLibraryItem ? 'streaming' : ''">
     <div class="w-full max-w-6xl mx-auto">
       <!-- Library & folder picker -->
-      <div class="flex my-6 -mx-2">
+      <div class="flex flex-wrap my-6 md:-mx-2">
-        <div class="w-1/5 px-2">
+        <div class="w-full md:w-1/5 px-2">
           <ui-dropdown v-model="selectedLibraryId" :items="libraryItems" :label="$strings.LabelLibrary" :disabled="!!items.length" @input="libraryChanged" />
         </div>
-        <div class="w-3/5 px-2">
+        <div class="w-full md:w-3/5 px-2">
           <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="!selectedLibraryId || !!items.length" :label="$strings.LabelFolder" />
         </div>
-        <div class="w-1/5 px-2">
+        <div class="w-full md:w-1/5 px-2">
           <ui-text-input-with-label :value="selectedLibraryMediaType" readonly :label="$strings.LabelMediaType" />
         </div>
       </div>
 
-      <div v-if="!selectedLibraryIsPodcast" class="flex items-center mb-6">
+      <div v-if="!selectedLibraryIsPodcast" class="flex items-center mb-6 px-2 md:px-0">
         <label class="flex cursor-pointer pt-4">
           <ui-toggle-switch v-model="fetchMetadata.enabled" class="inline-flex" />
           <span class="pl-2 text-base">{{ $strings.LabelAutoFetchMetadata }}</span>
@@ -33,13 +33,13 @@
       </widgets-alert>
 
       <!-- Picker display -->
-      <div v-if="!items.length && !ignoredFiles.length" class="w-full mx-auto border border-white border-opacity-20 px-12 pt-12 pb-4 my-12 relative" :class="isDragging ? 'bg-primary bg-opacity-40' : 'border-dashed'">
+      <div v-if="!items.length && !ignoredFiles.length" class="w-full mx-auto border border-white border-opacity-20 px-4 md:px-12 pt-12 pb-4 my-12 relative" :class="isDragging ? 'bg-primary bg-opacity-40' : 'border-dashed'">
-        <p class="text-2xl text-center">{{ isDragging ? $strings.LabelUploaderDropFiles : $strings.LabelUploaderDragAndDrop }}</p>
+        <p class="text-2xl text-center">{{ isDragging ? $strings.LabelUploaderDropFiles : isIOS ? $strings.LabelUploaderDragAndDropFilesOnly : $strings.LabelUploaderDragAndDrop }}</p>
         <p class="text-center text-sm my-5">{{ $strings.MessageOr }}</p>
         <div class="w-full max-w-xl mx-auto">
           <div class="flex">
             <ui-btn class="w-full mx-1" @click="openFilePicker">{{ $strings.ButtonChooseFiles }}</ui-btn>
-            <ui-btn class="w-full mx-1" @click="openFolderPicker">{{ $strings.ButtonChooseAFolder }}</ui-btn>
+            <ui-btn v-if="!isIOS" class="w-full mx-1" @click="openFolderPicker">{{ $strings.ButtonChooseAFolder }} </ui-btn>
           </div>
         </div>
         <div class="pt-8 text-center">
@@ -48,7 +48,7 @@
           </p>
 
           <p class="text-sm text-white text-opacity-70">
-            {{ $strings.NoteUploaderFoldersWithMediaFiles }} <span v-if="selectedLibraryMediaType === 'book'">{{ $strings.NoteUploaderOnlyAudioFiles }}</span>
+            <span v-if="!isIOS">{{ $strings.NoteUploaderFoldersWithMediaFiles }}</span> <span v-if="selectedLibraryMediaType === 'book'">{{ $strings.NoteUploaderOnlyAudioFiles }}</span>
           </p>
         </div>
       </div>
@@ -84,8 +84,8 @@
       </div>
     </div>
 
-    <input ref="fileInput" type="file" multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
+    <input ref="fileInput" type="file" multiple :accept="isIOS ? '' : inputAccept" class="hidden" @change="inputChanged" />
-    <input ref="fileFolderInput" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
+    <input ref="fileFolderInput" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" v-if="!isIOS" />
   </div>
 </template>
 
@@ -127,6 +127,10 @@ export default {
       })
       return extensions
     },
+    isIOS() {
+      const ua = window.navigator.userAgent
+      return /iPad|iPhone|iPod/.test(ua) && !window.MSStream
+    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
@@ -384,12 +388,6 @@ export default {
         else itemsFailed++
         this.updateItemCardStatus(item.index, result ? 'success' : 'failed')
       }
-      if (itemsUploaded) {
-        this.$toast.success(`Successfully uploaded ${itemsUploaded} item${itemsUploaded > 1 ? 's' : ''}`)
-      }
-      if (itemsFailed) {
-        this.$toast.success(`Failed to upload ${itemsFailed} item${itemsFailed > 1 ? 's' : ''}`)
-      }
       this.processing = false
       this.uploadFinished = true
     }

client/players/AudioTrack.js

@@ -23,10 +23,6 @@ export default class AudioTrack {
   get relativeContentUrl() {
     if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
 
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
-    }
-
     return this.contentUrl + `?token=${this.userToken}`
   }
 }

client/players/LocalAudioPlayer.js

@@ -147,7 +147,7 @@ export default class LocalAudioPlayer extends EventEmitter {
           timeoutRetry: {
             maxNumRetry: 4,
             retryDelayMs: 0,
-            maxRetryDelayMs: 0,
+            maxRetryDelayMs: 0
           },
           errorRetry: {
             maxNumRetry: 8,
@@ -160,7 +160,7 @@ export default class LocalAudioPlayer extends EventEmitter {
               }
               return retry
             }
-          },
+          }
         }
       }
     }
@@ -194,7 +194,7 @@ export default class LocalAudioPlayer extends EventEmitter {
 
   setDirectPlay() {
     // Set initial track and track time offset
-    var trackIndex = this.audioTracks.findIndex(t => this.startTime >= t.startOffset && this.startTime < (t.startOffset + t.duration))
+    var trackIndex = this.audioTracks.findIndex((t) => this.startTime >= t.startOffset && this.startTime < t.startOffset + t.duration)
     this.currentTrackIndex = trackIndex >= 0 ? trackIndex : 0
 
     this.loadCurrentTrack()
@@ -270,7 +270,7 @@ export default class LocalAudioPlayer extends EventEmitter {
       // Seeking Direct play
       if (time < this.currentTrack.startOffset || time > this.currentTrack.startOffset + this.currentTrack.duration) {
         // Change Track
-        var trackIndex = this.audioTracks.findIndex(t => time >= t.startOffset && time < (t.startOffset + t.duration))
+        var trackIndex = this.audioTracks.findIndex((t) => time >= t.startOffset && time < t.startOffset + t.duration)
         if (trackIndex >= 0) {
           this.startTime = time
           this.currentTrackIndex = trackIndex
@@ -293,7 +293,6 @@ export default class LocalAudioPlayer extends EventEmitter {
     this.player.volume = volume
   }
 
-
   // Utils
   isValidDuration(duration) {
     if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {

client/players/LocalVideoPlayer.js

@@ -1,260 +0,0 @@
-import Hls from 'hls.js'
-import EventEmitter from 'events'
-
-export default class LocalVideoPlayer extends EventEmitter {
-  constructor(ctx) {
-    super()
-
-    this.ctx = ctx
-    this.player = null
-
-    this.libraryItem = null
-    this.videoTrack = null
-    this.isHlsTranscode = null
-    this.hlsInstance = null
-    this.usingNativeplayer = false
-    this.startTime = 0
-    this.playWhenReady = false
-    this.defaultPlaybackRate = 1
-
-    this.playableMimeTypes = []
-
-    this.initialize()
-  }
-
-  initialize() {
-    if (document.getElementById('video-player')) {
-      document.getElementById('video-player').remove()
-    }
-    var videoEl = document.createElement('video')
-    videoEl.id = 'video-player'
-    // videoEl.style.display = 'none'
-    videoEl.className = 'absolute bg-black z-50'
-    videoEl.style.height = '216px'
-    videoEl.style.width = '384px'
-    videoEl.style.bottom = '80px'
-    videoEl.style.left = '16px'
-    document.body.appendChild(videoEl)
-    this.player = videoEl
-
-    this.player.addEventListener('play', this.evtPlay.bind(this))
-    this.player.addEventListener('pause', this.evtPause.bind(this))
-    this.player.addEventListener('progress', this.evtProgress.bind(this))
-    this.player.addEventListener('ended', this.evtEnded.bind(this))
-    this.player.addEventListener('error', this.evtError.bind(this))
-    this.player.addEventListener('loadedmetadata', this.evtLoadedMetadata.bind(this))
-    this.player.addEventListener('timeupdate', this.evtTimeupdate.bind(this))
-
-    var mimeTypes = ['video/mp4']
-    var mimeTypeCanPlayMap = {}
-    mimeTypes.forEach((mt) => {
-      var canPlay = this.player.canPlayType(mt)
-      mimeTypeCanPlayMap[mt] = canPlay
-      if (canPlay) this.playableMimeTypes.push(mt)
-    })
-    console.log(`[LocalVideoPlayer] Supported mime types`, mimeTypeCanPlayMap, this.playableMimeTypes)
-  }
-
-  evtPlay() {
-    this.emit('stateChange', 'PLAYING')
-  }
-  evtPause() {
-    this.emit('stateChange', 'PAUSED')
-  }
-  evtProgress() {
-    var lastBufferTime = this.getLastBufferedTime()
-    this.emit('buffertimeUpdate', lastBufferTime)
-  }
-  evtEnded() {
-    console.log(`[LocalVideoPlayer] Ended`)
-    this.emit('finished')
-  }
-  evtError(error) {
-    console.error('Player error', error)
-    this.emit('error', error)
-  }
-  evtLoadedMetadata(data) {
-    if (!this.isHlsTranscode) {
-      this.player.currentTime = this.startTime
-    }
-
-    this.emit('stateChange', 'LOADED')
-    if (this.playWhenReady) {
-      this.playWhenReady = false
-      this.play()
-    }
-  }
-  evtTimeupdate() {
-    if (this.player.paused) {
-      this.emit('timeupdate', this.getCurrentTime())
-    }
-  }
-
-  destroy() {
-    this.destroyHlsInstance()
-    if (this.player) {
-      this.player.remove()
-    }
-  }
-
-  set(libraryItem, videoTrack, isHlsTranscode, startTime, playWhenReady = false) {
-    this.libraryItem = libraryItem
-    this.videoTrack = videoTrack
-    this.isHlsTranscode = isHlsTranscode
-    this.playWhenReady = playWhenReady
-    this.startTime = startTime
-
-    if (this.hlsInstance) {
-      this.destroyHlsInstance()
-    }
-
-    if (this.isHlsTranscode) {
-      this.setHlsStream()
-    } else {
-      this.setDirectPlay()
-    }
-  }
-
-  setHlsStream() {
-    // iOS does not support Media Elements but allows for HLS in the native video player
-    if (!Hls.isSupported()) {
-      console.warn('HLS is not supported - fallback to using video element')
-      this.usingNativeplayer = true
-      this.player.src = this.videoTrack.relativeContentUrl
-      this.player.currentTime = this.startTime
-      return
-    }
-
-    var hlsOptions = {
-      startPosition: this.startTime || -1
-      // No longer needed because token is put in a query string
-      // xhrSetup: (xhr) => {
-      //   xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-      // }
-    }
-    this.hlsInstance = new Hls(hlsOptions)
-
-    this.hlsInstance.attachMedia(this.player)
-    this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-      this.hlsInstance.loadSource(this.videoTrack.relativeContentUrl)
-
-      this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-        console.log('[HLS] Manifest Parsed')
-      })
-
-      this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
-        console.error('[HLS] Error', data.type, data.details, data)
-        if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
-          console.error('[HLS] BUFFER STALLED ERROR')
-        }
-      })
-      this.hlsInstance.on(Hls.Events.DESTROYING, () => {
-        console.log('[HLS] Destroying HLS Instance')
-      })
-    })
-  }
-
-  setDirectPlay() {
-    this.player.src = this.videoTrack.relativeContentUrl
-    console.log(`[LocalVideoPlayer] Loading track src ${this.videoTrack.relativeContentUrl}`)
-    this.player.load()
-  }
-
-  destroyHlsInstance() {
-    if (!this.hlsInstance) return
-    if (this.hlsInstance.destroy) {
-      var temp = this.hlsInstance
-      temp.destroy()
-    }
-    this.hlsInstance = null
-  }
-
-  async resetStream(startTime) {
-    this.destroyHlsInstance()
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-    this.set(this.libraryItem, this.videoTrack, this.isHlsTranscode, startTime, true)
-  }
-
-  playPause() {
-    if (!this.player) return
-    if (this.player.paused) this.play()
-    else this.pause()
-  }
-
-  play() {
-    if (this.player) this.player.play()
-  }
-
-  pause() {
-    if (this.player) this.player.pause()
-  }
-
-  getCurrentTime() {
-    return this.player ? this.player.currentTime : 0
-  }
-
-  getDuration() {
-    return this.videoTrack.duration
-  }
-
-  setPlaybackRate(playbackRate) {
-    if (!this.player) return
-    this.defaultPlaybackRate = playbackRate
-    this.player.playbackRate = playbackRate
-  }
-
-  seek(time) {
-    if (!this.player) return
-    this.player.currentTime = Math.max(0, time)
-  }
-
-  setVolume(volume) {
-    if (!this.player) return
-    this.player.volume = volume
-  }
-
-  // Utils
-  isValidDuration(duration) {
-    if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
-      return true
-    }
-    return false
-  }
-
-  getBufferedRanges() {
-    if (!this.player) return []
-    const ranges = []
-    const seekable = this.player.buffered || []
-
-    let offset = 0
-
-    for (let i = 0, length = seekable.length; i < length; i++) {
-      let start = seekable.start(i)
-      let end = seekable.end(i)
-      if (!this.isValidDuration(start)) {
-        start = 0
-      }
-      if (!this.isValidDuration(end)) {
-        end = 0
-        continue
-      }
-
-      ranges.push({
-        start: start + offset,
-        end: end + offset
-      })
-    }
-    return ranges
-  }
-
-  getLastBufferedTime() {
-    var bufferedRanges = this.getBufferedRanges()
-    if (!bufferedRanges.length) return 0
-
-    var buff = bufferedRanges.find((buff) => buff.start < this.player.currentTime && buff.end > this.player.currentTime)
-    if (buff) return buff.end
-
-    var last = bufferedRanges[bufferedRanges.length - 1]
-    return last.end
-  }
-}

client/players/PlayerHandler.js

@@ -1,8 +1,6 @@
 import LocalAudioPlayer from './LocalAudioPlayer'
-import LocalVideoPlayer from './LocalVideoPlayer'
 import CastPlayer from './CastPlayer'
 import AudioTrack from './AudioTrack'
-import VideoTrack from './VideoTrack'
 
 export default class PlayerHandler {
   constructor(ctx) {
@@ -16,8 +14,6 @@ export default class PlayerHandler {
     this.player = null
     this.playerState = 'IDLE'
     this.isHlsTranscode = false
-    this.isVideo = false
-    this.isMusic = false
     this.currentSessionId = null
     this.startTimeOverride = undefined // Used for starting playback at a specific time (i.e. clicking bookmark from library item page)
     this.startTime = 0
@@ -65,12 +61,10 @@ export default class PlayerHandler {
 
   load(libraryItem, episodeId, playWhenReady, playbackRate, startTimeOverride = undefined) {
     this.libraryItem = libraryItem
-    this.isVideo = libraryItem.mediaType === 'video'
-    this.isMusic = libraryItem.mediaType === 'music'
 
     this.episodeId = episodeId
     this.playWhenReady = playWhenReady
-    this.initialPlaybackRate = this.isMusic ? 1 : playbackRate
+    this.initialPlaybackRate = playbackRate
 
     this.startTimeOverride = startTimeOverride == null || isNaN(startTimeOverride) ? undefined : Number(startTimeOverride)
 
@@ -97,7 +91,7 @@ export default class PlayerHandler {
         this.playWhenReady = playWhenReady
         this.prepare()
       }
-    } else if (!this.isCasting && !(this.player instanceof LocalAudioPlayer) && !(this.player instanceof LocalVideoPlayer)) {
+    } else if (!this.isCasting && !(this.player instanceof LocalAudioPlayer)) {
       console.log('[PlayerHandler] Switching to local player')
 
       this.stopPlayInterval()
@@ -107,11 +101,7 @@ export default class PlayerHandler {
         this.player.destroy()
       }
 
-      if (this.isVideo) {
+      this.player = new LocalAudioPlayer(this.ctx)
-        this.player = new LocalVideoPlayer(this.ctx)
-      } else {
-        this.player = new LocalAudioPlayer(this.ctx)
-      }
 
       this.setPlayerListeners()
 
@@ -203,7 +193,7 @@ export default class PlayerHandler {
       supportedMimeTypes: this.player.playableMimeTypes,
       mediaPlayer: this.isCasting ? 'chromecast' : 'html5',
       forceTranscode,
-      forceDirectPlay: this.isCasting || this.isVideo // TODO: add transcode support for chromecast
+      forceDirectPlay: this.isCasting // TODO: add transcode support for chromecast
     }
 
     const path = this.episodeId ? `/api/items/${this.libraryItem.id}/play/${this.episodeId}` : `/api/items/${this.libraryItem.id}/play`
@@ -218,7 +208,6 @@ export default class PlayerHandler {
     if (!this.player) this.switchPlayer() // Must set player first for open sessions
 
     this.libraryItem = session.libraryItem
-    this.isVideo = session.libraryItem.mediaType === 'video'
     this.playWhenReady = false
     this.initialPlaybackRate = playbackRate
     this.startTimeOverride = undefined
@@ -237,28 +226,16 @@ export default class PlayerHandler {
 
     console.log('[PlayerHandler] Preparing Session', session)
 
-    if (session.videoTrack) {
+    var audioTracks = session.audioTracks.map((at) => new AudioTrack(at, this.userToken))
-      var videoTrack = new VideoTrack(session.videoTrack, this.userToken)
 
-      this.ctx.playerLoading = true
+    this.ctx.playerLoading = true
-      this.isHlsTranscode = true
+    this.isHlsTranscode = true
-      if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
+    if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
-        this.isHlsTranscode = false
+      this.isHlsTranscode = false
-      }
-
-      this.player.set(this.libraryItem, videoTrack, this.isHlsTranscode, this.startTime, this.playWhenReady)
-    } else {
-      var audioTracks = session.audioTracks.map((at) => new AudioTrack(at, this.userToken))
-
-      this.ctx.playerLoading = true
-      this.isHlsTranscode = true
-      if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
-        this.isHlsTranscode = false
-      }
-
-      this.player.set(this.libraryItem, audioTracks, this.isHlsTranscode, this.startTime, this.playWhenReady)
     }
 
+    this.player.set(this.libraryItem, audioTracks, this.isHlsTranscode, this.startTime, this.playWhenReady)
+
     // browser media session api
     this.ctx.setMediaSession()
   }
@@ -320,7 +297,6 @@ export default class PlayerHandler {
       if (listeningTimeToAdd > 20) {
         syncData = {
           timeListened: listeningTimeToAdd,
-          duration: this.getDuration(),
           currentTime: this.getCurrentTime()
         }
       }
@@ -333,8 +309,6 @@ export default class PlayerHandler {
   }
 
   sendProgressSync(currentTime) {
-    if (this.isMusic) return
-
     const diffSinceLastSync = Math.abs(this.lastSyncTime - currentTime)
     if (diffSinceLastSync < 1) return
 
@@ -342,7 +316,6 @@ export default class PlayerHandler {
     const listeningTimeToAdd = Math.max(0, Math.floor(this.listeningTimeSinceSync))
     const syncData = {
       timeListened: listeningTimeToAdd,
-      duration: this.getDuration(),
       currentTime
     }
 

client/players/VideoTrack.js

@@ -1,32 +0,0 @@
-export default class VideoTrack {
-  constructor(track, userToken) {
-    this.index = track.index || 0
-    this.startOffset = track.startOffset || 0 // Total time of all previous tracks
-    this.duration = track.duration || 0
-    this.title = track.title || ''
-    this.contentUrl = track.contentUrl || null
-    this.mimeType = track.mimeType
-    this.metadata = track.metadata || {}
-
-    this.userToken = userToken
-  }
-
-  get fullContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
-
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
-    }
-    return `${window.location.origin}${this.contentUrl}?token=${this.userToken}`
-  }
-
-  get relativeContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
-
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
-    }
-
-    return this.contentUrl + `?token=${this.userToken}`
-  }
-}

client/plugins/axios.js

@@ -1,5 +1,5 @@
 export default function ({ $axios, store, $config }) {
-  $axios.onRequest(config => {
+  $axios.onRequest((config) => {
     if (!config.url) {
       console.error('Axios request invalid config', config)
       return
@@ -13,12 +13,11 @@ export default function ({ $axios, store, $config }) {
     }
 
     if (process.env.NODE_ENV === 'development') {
-      config.url = `/dev${config.url}`
       console.log('Making request to ' + config.url)
     }
   })
 
-  $axios.onError(error => {
+  $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)

client/plugins/constants.js

@@ -1,6 +1,6 @@
 const SupportedFileTypes = {
   image: ['png', 'jpg', 'jpeg', 'webp'],
-  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'oga', 'mp4', 'aac', 'wma', 'aiff', 'wav', 'webm', 'webma', 'mka', 'awb', 'caf'],
+  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'oga', 'mp4', 'aac', 'wma', 'aiff', 'wav', 'webm', 'webma', 'mka', 'awb', 'caf', 'mpeg', 'mpg'],
   ebook: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
   info: ['nfo'],
   text: ['txt'],
@@ -81,9 +81,7 @@ const Hotkeys = {
   }
 }
 
-export {
+export { Constants }
-  Constants
-}
 export default ({ app }, inject) => {
   inject('constants', Constants)
   inject('keynames', KeyNames)

client/plugins/i18n.js

@@ -89,10 +89,10 @@ Vue.prototype.$strings = { ...enUsStrings }
  * Get string and substitute
  *
  * @param {string} key
- * @param {string[]} subs
+ * @param {string[]} [subs=[]]
  * @returns {string}
  */
-Vue.prototype.$getString = (key, subs) => {
+Vue.prototype.$getString = (key, subs = []) => {
   if (!Vue.prototype.$strings[key]) return ''
   if (subs?.length && Array.isArray(subs)) {
     return supplant(Vue.prototype.$strings[key], subs)