Version bump 2.4.3

Scan for empty book series more efficiently

.gitignore

@@ -15,3 +15,4 @@ test/
 
 sw.*
 .DS_STORE
+.idea/*

Dockerfile

@@ -10,11 +10,15 @@ FROM sandreas/tone:v0.1.5 AS tone
 FROM node:16-alpine
 
 ENV NODE_ENV=production
+
 RUN apk update && \
     apk add --no-cache --update \
     curl \
     tzdata \
-    ffmpeg
+    ffmpeg \
+    make \
+    python3 \
+    g++
 
 COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
@@ -23,10 +27,8 @@ COPY server server
 
 RUN npm ci --only=production
 
+RUN apk del make python3 g++
+
 EXPOSE 80
-HEALTHCHECK \
-    --interval=30s \
-    --timeout=3s \
-    --start-period=10s \
-    CMD curl -f http://127.0.0.1/healthcheck || exit 1
+
 CMD ["node", "index.js"]

build/debian/DEBIAN/preinst

@@ -60,13 +60,13 @@ install_ffmpeg() {
   fi
 
   $WGET
-  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
+  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1 --no-same-owner
   rm ffmpeg-git-amd64-static.tar.xz
 
   # Temp downloading tone library to the ffmpeg dir
   echo "Getting tone.."
   $WGET_TONE
-  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1
+  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1 --no-same-owner
   rm tone-0.1.5-linux-x64.tar.gz
 
   echo "Good to go on Ffmpeg (& tone)... hopefully"

client/components/app/Appbar.vue

@@ -7,7 +7,7 @@
         </nuxt-link>
 
         <nuxt-link to="/">
-          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
+          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
         </nuxt-link>
 
         <ui-libraries-dropdown class="mr-2" />
@@ -149,9 +149,6 @@ export default {
     processingBatch() {
       return this.$store.state.processingBatch
     },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
     isChromecastEnabled() {
       return this.$store.getters['getServerSetting']('chromecastEnabled')
     },
@@ -306,13 +303,13 @@ export default {
       this.$axios
         .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
         .then(() => {
-          this.$toast.success('Batch update success!')
+          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
           this.$store.commit('setProcessingBatch', false)
           this.$store.commit('globals/resetSelectedMediaItems', [])
           this.$eventBus.$emit('bookshelf_clear_selection')
         })
         .catch((error) => {
-          this.$toast.error('Batch update failed')
+          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
           console.error('Failed to batch update read/not read', error)
           this.$store.commit('setProcessingBatch', false)
         })

client/components/app/BookShelfCategorized.vue

@@ -65,12 +65,12 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
@@ -171,7 +171,7 @@ export default {
     },
     async fetchCategories() {
       const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed`)
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete`)
         .then((data) => {
           return data
         })
@@ -349,8 +349,6 @@ export default {
       })
     },
     episodeAdded(episodeWithLibraryItem) {
-      console.log('Podcast episode added', episodeWithLibraryItem)
-
       const isThisLibrary = episodeWithLibraryItem.libraryItem?.libraryId === this.currentLibraryId
       if (!this.search && isThisLibrary) {
         this.fetchCategories()

client/components/app/BookShelfToolbar.vue

@@ -82,7 +82,7 @@
         <!-- 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-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" menu-width="110px" class="ml-2" @action="contextMenuAction" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">

client/components/app/ConfigSideNav.vue

@@ -99,6 +99,11 @@ export default {
           id: 'config-item-metadata-utils',
           title: this.$strings.HeaderItemMetadataUtils,
           path: '/config/item-metadata-utils'
+        },
+        {
+          id: 'config-rss-feeds',
+          title: this.$strings.HeaderRSSFeeds,
+          path: '/config/rss-feeds'
         }
       ]
 

client/components/app/LazyBookshelf.vue

@@ -78,9 +78,6 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
     libraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -316,12 +313,12 @@ export default {
         this.currentSFQueryString = this.buildSearchParams()
       }
 
-      const entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
+      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
       const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete`
 
       const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
-        console.error('failed to fetch books', error)
+        console.error('failed to fetch items', error)
         return null
       })
 
@@ -626,6 +623,11 @@ export default {
       return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
     },
     async init(bookshelf) {
+      if (this.entityName === 'series') {
+        this.booksPerFetch = 50
+      } else {
+        this.booksPerFetch = 100
+      }
       this.checkUpdateSearchParams()
       this.initSizeData(bookshelf)
 

client/components/cards/LazyBookCard.vue

@@ -116,9 +116,14 @@
     </div>
 
     <!-- Podcast Num Episodes -->
-    <div v-else-if="numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+    <div v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
     </div>
+
+    <!-- Podcast Num Episodes -->
+    <div v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
+    </div>
   </div>
 </template>
 
@@ -174,12 +179,6 @@ export default {
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
-    showExperimentalFeatures() {
-      return this.store.state.showExperimentalFeatures
-    },
-    enableEReader() {
-      return this.store.getters['getServerSetting']('enableEReader')
-    },
     _libraryItem() {
       return this.libraryItem || {}
     },
@@ -220,7 +219,7 @@ export default {
       return this.mediaMetadata.series
     },
     seriesSequence() {
-      return this.series ? this.series.sequence : null
+      return this.series?.sequence || null
     },
     libraryId() {
       return this._libraryItem.libraryId
@@ -233,9 +232,11 @@ export default {
       return this.media.numTracks || 0 // toJSONMinified
     },
     numEpisodes() {
-      if (!this.isPodcast) return 0
       return this.media.numEpisodes || 0
     },
+    numEpisodesIncomplete() {
+      return this._libraryItem.numEpisodesIncomplete || 0
+    },
     processingBatch() {
       return this.store.state.processingBatch
     },
@@ -317,6 +318,7 @@ export default {
       if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
       if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
       if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
+      if (this.orderBy === 'media.metadata.publishedYear' && this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
       return null
     },
     episodeProgress() {
@@ -367,13 +369,13 @@ export default {
       return this.store.getters['getIsStreamingFromDifferentLibrary']
     },
     showReadButton() {
-      return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat && (this.showExperimentalFeatures || this.enableEReader)
+      return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
     },
     showPlayButton() {
       return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
     },
     showSmallEBookIcon() {
-      return !this.isSelectionMode && this.ebookFormat && (this.showExperimentalFeatures || this.enableEReader)
+      return !this.isSelectionMode && this.ebookFormat
     },
     isMissing() {
       return this._libraryItem.isMissing
@@ -686,7 +688,6 @@ export default {
         .$patch(apiEndpoint, updatePayload)
         .then(() => {
           this.processing = false
-          toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
@@ -763,6 +764,8 @@ export default {
       this.store.commit('globals/setConfirmPrompt', payload)
     },
     removeSeriesFromContinueListening() {
+      if (!this.series) return
+
       const axios = this.$axios || this.$nuxt.$axios
       this.processing = true
       axios
@@ -888,7 +891,7 @@ export default {
       var wrapperBox = this.$refs.moreIcon.getBoundingClientRect()
       var el = instance.$el
 
-      var elHeight = this.moreMenuItems.length * 28 + 2
+      var elHeight = this.moreMenuItems.length * 28 + 10
       var elWidth = 130
 
       var bottomOfIcon = wrapperBox.top + wrapperBox.height
@@ -921,7 +924,7 @@ export default {
         return null
       })
       if (!libraryItem) return
-      this.store.commit('showEReader', libraryItem)
+      this.store.commit('showEReader', { libraryItem, keepProgress: true })
     },
     selectBtnClick(evt) {
       if (this.processingBatch) return

client/components/cards/NarratorCard.vue

@@ -36,7 +36,7 @@ export default {
       return this.narrator?.name || ''
     },
     numBooks() {
-      return this.narrator?.books?.length || 0
+      return this.narrator?.numBooks || this.narrator?.books?.length || 0
     },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']

client/components/content/LibraryItemDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="narrators?.length" class="flex py-0.5 mt-4">
-      <div class="w-32">
+      <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.LabelNarrators }}</span>
       </div>
       <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
@@ -12,7 +12,7 @@
       </div>
     </div>
     <div v-if="publishedYear" class="flex py-0.5">
-      <div class="w-32">
+      <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.LabelPublishYear }}</span>
       </div>
       <div>
@@ -20,15 +20,15 @@
       </div>
     </div>
     <div v-if="publisher" class="flex py-0.5">
-      <div class="w-32">
+      <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.LabelPublisher }}</span>
       </div>
       <div>
-        {{ publisher }}
+        <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-32">
+      <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>
@@ -36,7 +36,7 @@
       </div>
     </div>
     <div v-if="musicAlbumArtist" class="flex py-0.5">
-      <div class="w-32">
+      <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>
@@ -44,7 +44,7 @@
       </div>
     </div>
     <div v-if="musicTrackPretty" class="flex py-0.5">
-      <div class="w-32">
+      <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>
@@ -52,7 +52,7 @@
       </div>
     </div>
     <div v-if="musicDiscPretty" class="flex py-0.5">
-      <div class="w-32">
+      <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>
@@ -60,7 +60,7 @@
       </div>
     </div>
     <div v-if="podcastType" class="flex py-0.5">
-      <div class="w-32">
+      <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>
       </div>
       <div class="capitalize">
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div class="flex py-0.5" v-if="genres.length">
-      <div class="w-32">
+      <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.LabelGenres }}</span>
       </div>
       <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
@@ -79,7 +79,7 @@
       </div>
     </div>
     <div class="flex py-0.5" v-if="tags.length">
-      <div class="w-32">
+      <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.LabelTags }}</span>
       </div>
       <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
@@ -90,7 +90,7 @@
       </div>
     </div>
     <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
-      <div class="w-32">
+      <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>
       <div>
@@ -98,7 +98,7 @@
       </div>
     </div>
     <div class="flex py-0.5">
-      <div class="w-32">
+      <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.LabelSize }}</span>
       </div>
       <div>

client/components/controls/FilterSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs">{{ selectedText }}</span>
       </span>
@@ -14,12 +14,17 @@
       </div>
     </button>
 
-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-sm ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
-          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
+              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+            </div>
+
+            <!-- selected checkmark icon -->
+            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
+              <span class="material-icons text-base text-yellow-400">check</span>
             </div>
           </li>
         </template>

client/components/controls/GlobalSearch.vue

@@ -103,7 +103,7 @@ export default {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length + this.narratorResults.length
     }
   },
   methods: {

client/components/controls/LibraryFilterSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
       </span>
@@ -9,7 +9,7 @@
           <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
         </svg>
       </span>
-      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
         <span class="material-icons" style="font-size: 1.1rem">close</span>
       </div>
     </button>
@@ -17,23 +17,27 @@
     <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm libraryFilterMenu">
       <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in selectItems">
-          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
               <span class="font-normal ml-3 block truncate text-sm">{{ item.text }}</span>
             </div>
             <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
               <span class="material-icons text-2xl">arrow_right</span>
             </div>
+            <!-- selected checkmark icon -->
+            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
+              <span class="material-icons text-base text-yellow-400">check</span>
+            </div>
           </li>
         </template>
       </ul>
       <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="option" @click="sublist = null">
           <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
             <span class="material-icons text-2xl">arrow_left</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="font-normal ml-3 block truncate">Back</span>
+            <span class="font-normal block truncate">Back</span>
           </div>
         </li>
         <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
@@ -41,16 +45,15 @@
             <span class="font-normal block truncate py-2">No {{ sublist }}</span>
           </div>
         </li>
-        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('no-series'))">
-          <div class="flex items-center">
-            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">{{ $strings.MessageNoSeries }}</span>
-          </div>
-        </li>
         <template v-for="item in sublistItems">
-          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
+          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedSublistOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
             </div>
+            <!-- selected checkmark icon -->
+            <div v-if="`${sublist}.${item.value}` === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
+              <span class="material-icons text-base text-yellow-400">check</span>
+            </div>
           </li>
         </template>
       </ul>
@@ -72,9 +75,8 @@ export default {
   },
   watch: {
     showMenu(newVal) {
-      if (!newVal) {
-        if (this.sublist && !this.selectedItemSublist) this.sublist = null
-        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      if (newVal) {
+        this.sublist = this.selectedItemSublist
       }
     }
   },
@@ -122,6 +124,11 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublisher,
+          value: 'publishers',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
           value: 'languages',
@@ -165,6 +172,11 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublisher,
+          value: 'publishers',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
           value: 'languages',
@@ -186,9 +198,9 @@ export default {
           sublist: true
         },
         {
-          text: this.$strings.LabelEbook,
-          value: 'ebook',
-          sublist: false
+          text: this.$strings.LabelEbooks,
+          value: 'ebooks',
+          sublist: true
         },
         {
           text: this.$strings.LabelAbridged,
@@ -260,21 +272,25 @@ export default {
       return this.bookItems
     },
     selectedItemSublist() {
-      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
     },
     selectedText() {
       if (!this.selected) return ''
-      var parts = this.selected.split('.')
-      var filterName = this.selectItems.find((i) => i.value === parts[0])
-      var filterValue = null
+      const parts = this.selected.split('.')
+      const filterName = this.selectItems.find((i) => i.value === parts[0])
+      let filterValue = null
       if (parts.length > 1) {
-        var decoded = this.$decode(parts[1])
-        if (decoded.startsWith('aut_')) {
-          var author = this.authors.find((au) => au.id == decoded)
+        const decoded = this.$decode(parts[1])
+        if (parts[0] === 'authors') {
+          const author = this.authors.find((au) => au.id == decoded)
           if (author) filterValue = author.name
-        } else if (decoded.startsWith('ser_')) {
-          var series = this.series.find((se) => se.id == decoded)
-          if (series) filterValue = series.name
+        } else if (parts[0] === 'series') {
+          if (decoded === 'no-series') {
+            filterValue = this.$strings.MessageNoSeries
+          } else {
+            const series = this.series.find((se) => se.id == decoded)
+            if (series) filterValue = series.name
+          }
         } else {
           filterValue = decoded
         }
@@ -307,6 +323,9 @@ export default {
     languages() {
       return this.filterData.languages || []
     },
+    publishers() {
+      return this.filterData.publishers || []
+    },
     progress() {
       return [
         {
@@ -329,6 +348,10 @@ export default {
     },
     tracks() {
       return [
+        {
+          id: 'none',
+          name: this.$strings.LabelTracksNone
+        },
         {
           id: 'single',
           name: this.$strings.LabelTracksSingleTrack
@@ -339,6 +362,18 @@ export default {
         }
       ]
     },
+    ebooks() {
+      return [
+        {
+          id: 'ebook',
+          name: this.$strings.LabelHasEbook
+        },
+        {
+          id: 'supplementary',
+          name: this.$strings.LabelHasSupplementaryEbook
+        }
+      ]
+    },
     missing() {
       return [
         {
@@ -396,7 +431,7 @@ export default {
       ]
     },
     sublistItems() {
-      return (this[this.sublist] || []).map((item) => {
+      const sublistItems = (this[this.sublist] || []).map((item) => {
         if (typeof item === 'string') {
           return {
             text: item,
@@ -409,6 +444,13 @@ export default {
           }
         }
       })
+      if (this.sublist === 'series') {
+        sublistItems.unshift({
+          text: this.$strings.MessageNoSeries,
+          value: this.$encode('no-series')
+        })
+      }
+      return sublistItems
     },
     filterData() {
       return this.$store.state.libraries.filterData || {}
@@ -433,7 +475,7 @@ export default {
         return
       }
 
-      var val = option.value
+      const val = option.value
       if (this.selected === val) {
         this.showMenu = false
         return

client/components/controls/LibrarySortSelect.vue

@@ -7,11 +7,11 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in selectItems">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
           <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
+            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
             <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>

client/components/controls/SortSelect.vue

@@ -1,17 +1,17 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
         <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in items">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
           <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
+            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
             <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>

client/components/covers/PreviewCover.vue

@@ -13,8 +13,8 @@
 
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
-        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
+        <img v-if="width > 100" src="/Logo.png" class="mb-2" :style="{ height: 40 * sizeMultiplier + 'px' }" />
+        <p class="text-center text-error" :style="{ fontSize: invalidCoverFontSize + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
@@ -58,6 +58,9 @@ export default {
     sizeMultiplier() {
       return this.width / 120
     },
+    invalidCoverFontSize() {
+      return Math.max(this.sizeMultiplier * 0.8, 0.5)
+    },
     placeholderCoverPadding() {
       return 0.8 * this.sizeMultiplier
     },

client/components/modals/AccountModal.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden"  style="min-height: 400px; max-height: 80vh">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
         <div class="w-full p-8">
           <div class="flex py-2">
             <div class="w-1/2 px-2">
@@ -103,7 +103,6 @@
                   <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
                 </div>
               </div>
-              
             </div>
           </div>
 
@@ -353,7 +352,8 @@ export default {
             accessAllTags: true,
             selectedTagsNotAccessible: false
           },
-          librariesAccessible: []
+          librariesAccessible: [],
+          itemTagsSelected: []
         }
       }
     }

client/components/modals/AudioFileDataModal.vue

@@ -1,84 +1,99 @@
 <template>
   <modals-modal v-model="show" name="audiofile-data-modal" :width="700" :height="'unset'">
     <div v-if="audioFile" ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
-      <p class="text-base text-gray-200">{{ metadata.filename }}</p>
-
-      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
-
-      <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
-
-      <div class="flex flex-col sm:flex-row text-sm">
-        <div class="w-full sm:w-1/2">
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelSize }}
-            </p>
-            <p>{{ $bytesPretty(metadata.size) }}</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelDuration }}
-            </p>
-            <p>{{ $secondsToTimestamp(audioFile.duration) }}</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">{{ $strings.LabelFormat }}</p>
-            <p>{{ audioFile.format }}</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelChapters }}
-            </p>
-            <p>{{ audioFile.chapters?.length || 0 }}</p>
-          </div>
-          <div v-if="audioFile.embeddedCoverArt" class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelEmbeddedCover }}
-            </p>
-            <p>{{ audioFile.embeddedCoverArt || '' }}</p>
-          </div>
-        </div>
-        <div class="w-full sm:w-1/2">
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelCodec }}
-            </p>
-            <p>{{ audioFile.codec }}</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelChannels }}
-            </p>
-            <p>{{ audioFile.channels }} ({{ audioFile.channelLayout }})</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelBitrate }}
-            </p>
-            <p>{{ $bytesPretty(audioFile.bitRate || 0, 0) }}</p>
-          </div>
-          <div class="flex mb-1">
-            <p class="w-32 text-black-50">{{ $strings.LabelTimeBase }}</p>
-            <p>{{ audioFile.timeBase }}</p>
-          </div>
-          <div v-if="audioFile.language" class="flex mb-1">
-            <p class="w-32 text-black-50">
-              {{ $strings.LabelLanguage }}
-            </p>
-            <p>{{ audioFile.language || '' }}</p>
-          </div>
-        </div>
+      <div class="flex items-center justify-between">
+        <p class="text-base text-gray-200 truncate">{{ metadata.filename }}</p>
+        <ui-btn v-if="ffprobeData" small class="ml-2" @click="ffprobeData = null">{{ $strings.ButtonReset }}</ui-btn>
+        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">Probe Audio File</ui-btn>
       </div>
 
       <div class="w-full h-px bg-white bg-opacity-10 my-4" />
 
-      <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>
+      <template v-if="!ffprobeData">
+        <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
 
-      <div v-for="(value, key) in metaTags" :key="key" class="flex mb-1 text-sm">
-        <p class="w-32 min-w-32 text-black-50 mb-1">
-          {{ key.replace('tag', '') }}
-        </p>
-        <p>{{ value }}</p>
+        <div class="flex flex-col sm:flex-row text-sm">
+          <div class="w-full sm:w-1/2">
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelSize }}
+              </p>
+              <p>{{ $bytesPretty(metadata.size) }}</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelDuration }}
+              </p>
+              <p>{{ $secondsToTimestamp(audioFile.duration) }}</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">{{ $strings.LabelFormat }}</p>
+              <p>{{ audioFile.format }}</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelChapters }}
+              </p>
+              <p>{{ audioFile.chapters?.length || 0 }}</p>
+            </div>
+            <div v-if="audioFile.embeddedCoverArt" class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelEmbeddedCover }}
+              </p>
+              <p>{{ audioFile.embeddedCoverArt || '' }}</p>
+            </div>
+          </div>
+          <div class="w-full sm:w-1/2">
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelCodec }}
+              </p>
+              <p>{{ audioFile.codec }}</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelChannels }}
+              </p>
+              <p>{{ audioFile.channels }} ({{ audioFile.channelLayout }})</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelBitrate }}
+              </p>
+              <p>{{ $bytesPretty(audioFile.bitRate || 0, 0) }}</p>
+            </div>
+            <div class="flex mb-1">
+              <p class="w-32 text-black-50">{{ $strings.LabelTimeBase }}</p>
+              <p>{{ audioFile.timeBase }}</p>
+            </div>
+            <div v-if="audioFile.language" class="flex mb-1">
+              <p class="w-32 text-black-50">
+                {{ $strings.LabelLanguage }}
+              </p>
+              <p>{{ audioFile.language || '' }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+        <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>
+
+        <div v-for="(value, key) in metaTags" :key="key" class="flex mb-1 text-sm">
+          <p class="w-32 min-w-32 text-black-50 mb-1">
+            {{ key.replace('tag', '') }}
+          </p>
+          <p>{{ value }}</p>
+        </div>
+      </template>
+      <div v-else class="w-full">
+        <div class="relative">
+          <ui-textarea-with-label :value="prettyFfprobeData" readonly :rows="30" class="text-xs" />
+
+          <button class="absolute top-4 right-4" :class="copiedToClipboard ? 'text-success' : 'text-white/50 hover:text-white/80'" @click.stop="copyFfprobeData">
+            <span class="material-icons">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
+          </button>
+        </div>
       </div>
     </div>
   </modals-modal>
@@ -91,10 +106,24 @@ export default {
     audioFile: {
       type: Object,
       default: () => {}
-    }
+    },
+    libraryItemId: String
   },
   data() {
-    return {}
+    return {
+      probingFile: false,
+      ffprobeData: null,
+      copiedToClipboard: false
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.ffprobeData = null
+        this.copiedToClipboard = false
+        this.probingFile = false
+      }
+    }
   },
   computed: {
     show: {
@@ -110,9 +139,36 @@ export default {
     },
     metaTags() {
       return this.audioFile?.metaTags || {}
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    prettyFfprobeData() {
+      if (!this.ffprobeData) return ''
+      return JSON.stringify(this.ffprobeData, null, 2)
+    }
+  },
+  methods: {
+    getFFProbeData() {
+      this.probingFile = true
+      this.$axios
+        .$get(`/api/items/${this.libraryItemId}/ffprobe/${this.audioFile.ino}`)
+        .then((data) => {
+          console.log('Got ffprobe data', data)
+          this.ffprobeData = data
+        })
+        .catch((error) => {
+          console.error('Failed to get ffprobe data', error)
+          this.$toast.error('FFProbe failed')
+        })
+        .finally(() => {
+          this.probingFile = false
+        })
+    },
+    async copyFfprobeData() {
+      this.copiedToClipboard = await this.$copyToClipboard(this.prettyFfprobeData)
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

client/components/modals/Dialog.vue

@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     clickedOption(action) {
-      this.$emit('action', action)
+      this.$emit('action', { action })
     }
   },
   mounted() {}

client/components/modals/ListeningSessionModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
+        <p class="text-lg md:text-2xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
@@ -50,19 +50,19 @@
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelItem }}</p>
           <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibrary }} Id</div>
-            <div class="px-1">
+            <div class="px-1 text-xs">
               {{ _session.libraryId }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibraryItem }} Id</div>
-            <div class="px-1">
+            <div class="px-1 text-xs">
               {{ _session.libraryItemId }}
             </div>
           </div>
           <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelEpisode }} Id</div>
-            <div class="px-1">
+            <div class="px-1 text-xs">
               {{ _session.episodeId }}
             </div>
           </div>
@@ -81,7 +81,7 @@
         </div>
         <div class="w-full md:w-1/3">
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p class="mb-1">{{ _session.userId }}</p>
+          <p class="mb-1 text-xs">{{ _session.userId }}</p>
 
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>

client/components/modals/Modal.vue

@@ -2,11 +2,11 @@
   <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
-    <div class="absolute top-3 right-3 landscape:top-2 landscape:right-2 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 h-8 w-8 landscape:h-8 landscape:w-8 md:portrait:h-12 md:portrait:w-12 lg:w-12 lg:h-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
+    <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
       <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
-    </div>
+    </button>
     <slot name="outer" />
-    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />

client/components/modals/collections/EditModal.vue

@@ -8,10 +8,9 @@
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
       <template v-if="!showImageUploader">
         <form @submit.prevent="submitForm">
-          <div class="flex">
-            <div>
+          <div class="flex flex-wrap">
+            <div class="w-full flex justify-center mb-2 md:w-auto md:mb-0 md:block">
               <covers-collection-cover :book-items="books" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              <!-- <ui-btn type="button" @click="showImageUploader = true">Upload</ui-btn> -->
             </div>
             <div class="flex-grow px-4">
               <ui-text-input-with-label v-model="newCollectionName" :label="$strings.LabelName" class="mb-2" />
@@ -41,7 +40,6 @@
           <ui-btn color="success">Upload</ui-btn>
         </div>
       </template>
-      <!-- <modals-upload-image-modal v-model="showUploadImageModal" entity="collection" :entity-id="collection.id" /> -->
     </div>
   </modals-modal>
 </template>

client/components/modals/item/EditModal.vue

@@ -127,9 +127,6 @@ export default {
         }
       ]
     },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -154,7 +151,6 @@ export default {
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
-        if (tab.experimental && !this.showExperimentalFeatures) return false
         if (tab.mediaType && this.mediaType !== tab.mediaType) return false
         if (tab.admin && !this.userIsAdminOrUp) return false
 

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

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
-    <div class="flex flex-wrap">
+    <div class="flex flex-wrap mb-4">
       <div class="relative">
-        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
         <!-- book cover overlay -->
         <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
@@ -139,16 +139,19 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
+      return this.libraryItem?.id || null
+    },
+    libraryItemUpdatedAt() {
+      return this.libraryItem?.updatedAt || null
     },
     mediaType() {
-      return this.libraryItem ? this.libraryItem.mediaType : null
+      return this.libraryItem?.mediaType || null
     },
     isPodcast() {
       return this.mediaType == 'podcast'
     },
     media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
+      return this.libraryItem?.media || {}
     },
     coverPath() {
       return this.media.coverPath
@@ -157,7 +160,7 @@ export default {
       return this.media.metadata || {}
     },
     libraryFiles() {
-      return this.libraryItem ? this.libraryItem.libraryFiles || [] : []
+      return this.libraryItem?.libraryFiles || []
     },
     userCanUpload() {
       return this.$store.getters['user/getUserCanUpload']
@@ -280,9 +283,8 @@ export default {
       }
       if (success) {
         this.$toast.success('Update Successful')
-        // this.$emit('close')
-      } else {
-        this.imageUrl = this.media.coverPath || ''
+      } else if (this.media.coverPath) {
+        this.imageUrl = this.media.coverPath
       }
       this.isProcessing = false
     },

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

@@ -20,18 +20,14 @@
       <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">{{ $strings.MessageNoEpisodes }}</div>
       <table v-else class="text-sm tracksTable">
         <tr>
-          <th class="text-left">Sort #</th>
-          <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
-          <th class="text-left">{{ $strings.EpisodeTitle }}</th>
-          <th class="text-center w-28">{{ $strings.EpisodeDuration }}</th>
-          <th class="text-center w-28">{{ $strings.EpisodeSize }}</th>
+          <th class="text-center w-20 min-w-20">{{ $strings.LabelEpisode }}</th>
+          <th class="text-left">{{ $strings.LabelEpisodeTitle }}</th>
+          <th class="text-center w-28">{{ $strings.LabelEpisodeDuration }}</th>
+          <th class="text-center w-28">{{ $strings.LabelEpisodeSize }}</th>
         </tr>
         <tr v-for="episode in episodes" :key="episode.id">
-          <td class="text-left">
-            <p class="px-4">{{ episode.index }}</p>
-          </td>
-          <td class="text-left">
-            <p class="px-4">{{ episode.episode }}</p>
+          <td class="text-center w-20 min-w-20">
+            <p>{{ episode.episode }}</p>
           </td>
           <td>
             {{ episode.title }}

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

@@ -20,7 +20,7 @@
     </div>
 
     <!-- Split to mp3 -->
-    <div v-if="showMp3Split && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
+    <!-- <div v-if="showMp3Split" class="w-full border border-black-200 p-4 my-8">
       <div class="flex items-center">
         <div>
           <p class="text-lg">{{ $strings.LabelToolsSplitM4b }}</p>
@@ -31,7 +31,7 @@
           <ui-btn :disabled="true">{{ $strings.MessageNotYetImplemented }}</ui-btn>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- Embed Metadata -->
     <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
@@ -79,9 +79,6 @@ export default {
     return {}
   },
   computed: {
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
     libraryItemId() {
       return this.libraryItem?.id || null
     },

client/components/modals/libraries/LibrarySettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-2">
+    <div class="flex items-center py-3">
       <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
       <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
         <p class="pl-4 text-base">
@@ -11,24 +11,44 @@
     </div>
     <div class="py-3">
       <div class="flex items-center">
-        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
+        <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.LabelSettingsDisableWatcherForLibrary }}</p>
+        <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="mediaType == 'book'" class="py-3">
+    <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-icons icon-text text-sm">info_outlined</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="mediaType == 'book'" class="py-3">
+    <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-icons icon-text text-sm">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,9 +65,11 @@ export default {
     return {
       provider: null,
       useSquareBookCovers: false,
-      disableWatcher: false,
+      enableWatcher: false,
       skipMatchingMediaWithAsin: false,
-      skipMatchingMediaWithIsbn: false
+      skipMatchingMediaWithIsbn: false,
+      audiobooksOnly: false,
+      hideSingleBookSeries: false
     }
   },
   computed: {
@@ -60,6 +82,9 @@ export default {
     mediaType() {
       return this.library.mediaType
     },
+    isBookLibrary() {
+      return this.mediaType === 'book'
+    },
     providers() {
       if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
@@ -70,9 +95,11 @@ export default {
       return {
         settings: {
           coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
-          disableWatcher: !!this.disableWatcher,
+          disableWatcher: !this.enableWatcher,
           skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
-          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
+          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn,
+          audiobooksOnly: !!this.audiobooksOnly,
+          hideSingleBookSeries: !!this.hideSingleBookSeries
         }
       }
     },
@@ -81,9 +108,11 @@ export default {
     },
     init() {
       this.useSquareBookCovers = this.librarySettings.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-      this.disableWatcher = !!this.librarySettings.disableWatcher
+      this.enableWatcher = !this.librarySettings.disableWatcher
       this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
       this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
+      this.audiobooksOnly = !!this.librarySettings.audiobooksOnly
+      this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
     }
   },
   mounted() {

client/components/modals/podcast/EpisodeFeed.vue

@@ -39,7 +39,7 @@
         </div>
       </div>
       <div class="flex justify-end pt-4">
-        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" label="Select all episodes" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
+        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" :label="selectAllLabel" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
         <ui-btn v-if="!allDownloaded" :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
         <p v-else class="text-success text-base px-2 py-4">All episodes are downloaded</p>
       </div>
@@ -99,46 +99,82 @@ export default {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
     },
     buttonText() {
-      if (!this.episodesSelected.length) return 'No Episodes Selected'
-      return `Download ${this.episodesSelected.length} Episode${this.episodesSelected.length > 1 ? 's' : ''}`
+      if (!this.episodesSelected.length) return this.$strings.LabelNoEpisodesSelected
+      if (this.episodesSelected.length === 1) return `${this.$strings.LabelDownload} ${this.$strings.LabelEpisode.toLowerCase()}`
+      return this.$getString('LabelDownloadNEpisodes', [this.episodesSelected.length])
     },
     itemEpisodes() {
       if (!this.libraryItem) return []
       return this.libraryItem.media.episodes || []
     },
     itemEpisodeMap() {
-      var map = {}
+      const map = {}
       this.itemEpisodes.forEach((item) => {
-        if (item.enclosure) map[item.enclosure.url.split('?')[0]] = true
+        if (item.enclosure) {
+          const cleanUrl = this.getCleanEpisodeUrl(item.enclosure.url)
+          map[cleanUrl] = true
+        }
       })
       return map
     },
     episodesList() {
       return this.episodesCleaned.filter((episode) => {
         if (!this.searchText) return true
-        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
+        return episode.title?.toLowerCase().includes(this.searchText) || episode.subtitle?.toLowerCase().includes(this.searchText)
       })
+    },
+    selectAllLabel() {
+      if (this.episodesList.length === this.episodesCleaned.length) {
+        return this.$strings.LabelSelectAllEpisodes
+      }
+      const episodesNotDownloaded = this.episodesList.filter((ep) => !this.itemEpisodeMap[ep.cleanUrl]).length
+      return this.$getString('LabelSelectEpisodesShowing', [episodesNotDownloaded])
     }
   },
   methods: {
+    /**
+     * RSS feed episode url is used for matching with existing downloaded episodes.
+     * Some RSS feeds include timestamps in the episode url (e.g. patreon) that can change on requests.
+     * These need to be removed in order to detect the same episode each time the feed is pulled.
+     *
+     * An RSS feed may include an `id` in the query string. In these cases we want to leave the `id`.
+     * @see https://github.com/advplyr/audiobookshelf/issues/1896
+     *
+     * @param {string} url - rss feed episode url
+     * @returns {string} rss feed episode url without dynamic query strings
+     */
+    getCleanEpisodeUrl(url) {
+      let queryString = url.split('?')[1]
+      if (!queryString) return url
+
+      const searchParams = new URLSearchParams(queryString)
+      for (const p of Array.from(searchParams.keys())) {
+        if (p !== 'id') searchParams.delete(p)
+      }
+
+      if (!searchParams.toString()) return url
+      return `${url}?${searchParams.toString()}`
+    },
     inputUpdate() {
       clearTimeout(this.searchTimeout)
       this.searchTimeout = setTimeout(() => {
-        if (!this.search || !this.search.trim()) {
+        if (!this.search?.trim()) {
           this.searchText = ''
+          this.checkSetIsSelectedAll()
           return
         }
         this.searchText = this.search.toLowerCase().trim()
+        this.checkSetIsSelectedAll()
       }, 500)
     },
     toggleSelectAll(val) {
-      for (const episode of this.episodesCleaned) {
+      for (const episode of this.episodesList) {
         if (this.itemEpisodeMap[episode.cleanUrl]) this.selectedEpisodes[episode.cleanUrl] = false
         else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
       }
     },
     checkSetIsSelectedAll() {
-      for (const episode of this.episodesCleaned) {
+      for (const episode of this.episodesList) {
         if (!this.itemEpisodeMap[episode.cleanUrl] && !this.selectedEpisodes[episode.cleanUrl]) {
           this.selectAll = false
           return
@@ -147,19 +183,19 @@ export default {
       this.selectAll = true
     },
     toggleSelectEpisode(episode) {
-      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
+      if (this.itemEpisodeMap[episode.cleanUrl]) return
       this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
       this.checkSetIsSelectedAll()
     },
     submit() {
-      var episodesToDownload = []
+      let episodesToDownload = []
       if (this.episodesSelected.length) {
         episodesToDownload = this.episodesSelected.map((cleanUrl) => this.episodesCleaned.find((ep) => ep.cleanUrl == cleanUrl))
       }
 
-      var payloadSize = JSON.stringify(episodesToDownload).length
-      var sizeInMb = payloadSize / 1024 / 1024
-      var sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      const payloadSize = JSON.stringify(episodesToDownload).length
+      const sizeInMb = payloadSize / 1024 / 1024
+      const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
       console.log('Request size', sizeInMb)
       if (sizeInMb > 4.99) {
         return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
@@ -174,10 +210,9 @@ export default {
           this.show = false
         })
         .catch((error) => {
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to download episodes'
           console.error('Failed to download episodes', error)
           this.processing = false
-          this.$toast.error(errorMsg)
+          this.$toast.error(error.response?.data || 'Failed to download episodes')
 
           this.selectedEpisodes = {}
           this.selectAll = false
@@ -189,7 +224,7 @@ export default {
         .map((_ep) => {
           return {
             ..._ep,
-            cleanUrl: _ep.enclosure.url.split('?')[0]
+            cleanUrl: this.getCleanEpisodeUrl(_ep.enclosure.url)
           }
         })
       this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -132,6 +132,8 @@ export default {
         return
       }
 
+      this.processing = true
+
       const payload = {
         serverAddress: window.origin,
         slug: this.newFeedSlug,
@@ -151,6 +153,9 @@ export default {
           const errorMsg = error.response ? error.response.data : null
           this.$toast.error(errorMsg || 'Failed to open RSS Feed')
         })
+        .finally(() => {
+          this.processing = false
+        })
     },
     copyToClipboard(str) {
       this.$copyToClipboard(str, this)

client/components/modals/rssfeed/ViewFeedModal.vue

@@ -0,0 +1,124 @@
+<template>
+  <modals-modal v-model="show" name="rss-feed-view-modal" :processing="processing" :width="700" :height="'unset'">
+    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div v-if="feed" class="w-full">
+        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedGeneral }}</p>
+
+        <div class="w-full relative">
+          <ui-text-input v-model="feed.feedUrl" readonly />
+          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feed.feedUrl)">content_copy</span>
+        </div>
+
+        <div v-if="feed.meta" class="mt-5">
+          <div class="flex py-0.5">
+            <div class="w-48">
+              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedPreventIndexing }}</span>
+            </div>
+            <div>{{ feed.meta.preventIndexing ? 'Yes' : 'No' }}</div>
+          </div>
+          <div v-if="feed.meta.ownerName" class="flex py-0.5">
+            <div class="w-48">
+              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerName }}</span>
+            </div>
+            <div>{{ feed.meta.ownerName }}</div>
+          </div>
+          <div v-if="feed.meta.ownerEmail" class="flex py-0.5">
+            <div class="w-48">
+              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerEmail }}</span>
+            </div>
+            <div>{{ feed.meta.ownerEmail }}</div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="episodesTable mt-2">
+          <div class="bg-primary bg-opacity-40 h-12 header">
+            {{ $strings.LabelEpisodeTitle }}
+          </div>
+          <div class="scroller">
+            <div v-for="episode in feed.episodes" :key="episode.id" class="h-8 text-xs truncate">
+              {{ episode.title }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    feed: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    _feed() {
+      return this.feed || {}
+    }
+  },
+  methods: {
+    copyToClipboard(str) {
+      this.$copyToClipboard(str, this)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.episodesTable {
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #474747;
+  display: flex;
+  flex-direction: column;
+}
+
+.episodesTable div.header {
+  background-color: #272727;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 4px 8px;
+}
+
+.episodesTable .scroller {
+  display: flex;
+  flex-direction: column;
+  max-height: 250px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.episodesTable .scroller div {
+  background-color: #373838;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 32px;
+  flex: 0 0 32px;
+}
+
+.episodesTable .scroller div:nth-child(even) {
+  background-color: #2f2f2f;
+}
+</style>
+

client/components/readers/ComicReader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
-    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-8 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52">
-      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
+    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-8 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400" :style="{ width: pageMenuWidth + 'px' }">
+      <div v-for="(file, index) in cleanedPageNames" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index + 1)">
         <p class="text-sm truncate">{{ file }}</p>
       </div>
     </div>
@@ -14,23 +14,26 @@
       </div>
     </div>
 
-    <div v-if="comicMetadata" class="absolute top-0 left-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
+    <a v-if="pages && numPages" :href="mainImg" :download="pages[page - 1]" class="absolute top-0 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" :class="comicMetadata ? 'left-32' : 'left-20'">
+      <span class="material-icons text-xl">download</span>
+    </a>
+    <div v-if="comicMetadata" class="absolute top-0 left-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowInfoMenu">
       <span class="material-icons text-xl">more</span>
     </div>
-    <div class="absolute top-0 left-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
+    <div v-if="numPages" class="absolute top-0 left-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowPageMenu">
       <span class="material-icons text-xl">menu</span>
     </div>
-    <div class="absolute top-0 right-16 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
-      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
+    <div v-if="numPages" class="absolute top-0 right-16 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
+      <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
 
     <div class="overflow-hidden w-full h-full relative">
-      <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
+      <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
         <div class="flex items-center justify-center h-full w-1/2">
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
         </div>
       </div>
-      <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
+      <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
         <div class="flex items-center justify-center h-full w-1/2 ml-auto">
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
         </div>
@@ -61,7 +64,9 @@ export default {
       type: Object,
       default: () => {}
     },
-    playerOpen: Boolean
+    playerOpen: Boolean,
+    keepProgress: Boolean,
+    fileId: String
   },
   data() {
     return {
@@ -71,6 +76,7 @@ export default {
       mainImg: null,
       page: 0,
       numPages: 0,
+      pageMenuWidth: 256,
       showPageMenu: false,
       showInfoMenu: false,
       loadTimeout: null,
@@ -94,19 +100,72 @@ export default {
       return this.libraryItem?.id
     },
     ebookUrl() {
+      if (this.fileId) {
+        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+      }
       return `/api/items/${this.libraryItemId}/ebook`
     },
     comicMetadataKeys() {
       return this.comicMetadata ? Object.keys(this.comicMetadata) : []
     },
     canGoNext() {
-      return this.page < this.numPages - 1
+      return this.page < this.numPages
     },
     canGoPrev() {
-      return this.page > 0
+      return this.page > 1
+    },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    savedPage() {
+      if (!this.keepProgress) return 0
+
+      // Validate ebookLocation is a number
+      if (!this.userMediaProgress?.ebookLocation || isNaN(this.userMediaProgress.ebookLocation)) return 0
+      return Number(this.userMediaProgress.ebookLocation)
+    },
+    cleanedPageNames() {
+      return (
+        this.pages?.map((p) => {
+          if (p.length > 50) {
+            let firstHalf = p.slice(0, 22)
+            let lastHalf = p.slice(p.length - 23)
+            return `${firstHalf} ... ${lastHalf}`
+          }
+          return p
+        }) || []
+      )
     }
   },
   methods: {
+    clickShowPageMenu() {
+      this.showInfoMenu = false
+      this.showPageMenu = !this.showPageMenu
+    },
+    clickShowInfoMenu() {
+      this.showPageMenu = false
+      this.showInfoMenu = !this.showInfoMenu
+    },
+    updateProgress() {
+      if (!this.keepProgress) return
+
+      if (!this.numPages) {
+        console.error('Num pages not loaded')
+        return
+      }
+      if (this.savedPage === this.page) {
+        return
+      }
+
+      const payload = {
+        ebookLocation: this.page,
+        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
+      }
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+        console.error('ComicReader.updateProgress failed:', error)
+      })
+    },
     clickOutside() {
       if (this.showPageMenu) this.showPageMenu = false
       if (this.showInfoMenu) this.showInfoMenu = false
@@ -119,12 +178,15 @@ export default {
       if (!this.canGoPrev) return
       this.setPage(this.page - 1)
     },
-    setPage(index) {
-      if (index < 0 || index > this.numPages - 1) {
+    setPage(page) {
+      if (page <= 0 || page > this.numPages) {
         return
       }
-      var filename = this.pages[index]
-      this.page = index
+      this.showPageMenu = false
+      this.showInfoMenu = false
+      const filename = this.pages[page - 1]
+      this.page = page
+      this.updateProgress()
       return this.extractFile(filename)
     },
     setLoadTimeout() {
@@ -174,9 +236,28 @@ export default {
 
       this.numPages = this.pages.length
 
+      // Calculate page menu size
+      const largestFilename = this.cleanedPageNames
+        .map((p) => p)
+        .sort((a, b) => a.length - b.length)
+        .pop()
+      const pEl = document.createElement('p')
+      pEl.innerText = largestFilename
+      pEl.style.fontSize = '0.875rem'
+      pEl.style.opacity = 0
+      pEl.style.position = 'absolute'
+      document.body.appendChild(pEl)
+      const textWidth = pEl.getBoundingClientRect()?.width
+      if (textWidth) {
+        this.pageMenuWidth = textWidth + (16 + 5 + 2 + 5)
+      }
+      pEl.remove()
+
       if (this.pages.length) {
         this.loading = false
-        await this.setPage(0)
+
+        const startPage = this.savedPage > 0 && this.savedPage <= this.numPages ? this.savedPage : 1
+        await this.setPage(startPage)
         this.loadedFirstPage = true
       } else {
         this.$toast.error('Unable to extract pages')
@@ -222,8 +303,8 @@ export default {
     },
     parseImageFilename(filename) {
       var basename = Path.basename(filename, Path.extname(filename))
-      var numbersinpath = basename.match(/\d{1,5}/g)
-      if (!numbersinpath || !numbersinpath.length) {
+      var numbersinpath = basename.match(/\d+/g)
+      if (!numbersinpath?.length) {
         return {
           index: -1,
           filename

client/components/readers/EpubReader.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="epub-reader" class="h-full w-full">
     <div class="h-full flex items-center justify-center">
-      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center overflow-x-hidden justify-center">
-        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
-      </div>
+      <button type="button" aria-label="Previous page" class="w-24 max-w-24 h-full hidden sm:flex items-center overflow-x-hidden justify-center opacity-50 hover:opacity-100">
+        <span v-if="hasPrev" class="material-icons text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+      </button>
       <div id="frame" class="w-full" style="height: 80%">
         <div id="viewer"></div>
       </div>
-      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center justify-center overflow-x-hidden">
-        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
-      </div>
+      <button type="button" aria-label="Next page" class="w-24 max-w-24 h-full hidden sm:flex items-center justify-center overflow-x-hidden opacity-50 hover:opacity-100">
+        <span v-if="hasNext" class="material-icons text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+      </button>
     </div>
   </div>
 </template>
@@ -28,7 +28,9 @@ export default {
       type: Object,
       default: () => {}
     },
-    playerOpen: Boolean
+    playerOpen: Boolean,
+    keepProgress: Boolean,
+    fileId: String
   },
   data() {
     return {
@@ -37,7 +39,13 @@ export default {
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null
+      rendition: null,
+      ereaderSettings: {
+        theme: 'dark',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      }
     }
   },
   watch: {
@@ -61,12 +69,19 @@ export default {
     },
     /** @returns {Array<ePub.NavItem>} */
     chapters() {
-      return this.book ? this.book.navigation.toc : []
+      return this.book?.navigation?.toc || []
     },
     userMediaProgress() {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
+    savedEbookLocation() {
+      if (!this.keepProgress) return null
+      if (!this.userMediaProgress?.ebookLocation) return null
+      // Validate ebookLocation is an epubcfi
+      if (!String(this.userMediaProgress.ebookLocation).startsWith('epubcfi')) return null
+      return this.userMediaProgress.ebookLocation
+    },
     localStorageLocationsKey() {
       return `ebookLocations-${this.libraryItemId}`
     },
@@ -78,18 +93,55 @@ export default {
       if (this.windowHeight < 400 || !this.playerOpen) return this.windowHeight
       return this.windowHeight - 164
     },
-    epubUrl() {
+    ebookUrl() {
+      if (this.fileId) {
+        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+      }
       return `/api/items/${this.libraryItemId}/ebook`
+    },
+    themeRules() {
+      const isDark = this.ereaderSettings.theme === 'dark'
+      const fontColor = isDark ? '#fff' : '#000'
+      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+
+      const lineSpacing = this.ereaderSettings.lineSpacing / 100
+
+      const fontScale = this.ereaderSettings.fontScale / 100
+
+      return {
+        '*': {
+          color: `${fontColor}!important`,
+          'background-color': `${backgroundColor}!important`,
+          'line-height': lineSpacing * fontScale + 'rem!important'
+        },
+        a: {
+          color: `${fontColor}!important`
+        }
+      }
     }
   },
   methods: {
+    updateSettings(settings) {
+      this.ereaderSettings = settings
+
+      if (!this.rendition) return
+
+      this.applyTheme()
+
+      const fontScale = settings.fontScale || 100
+      this.rendition.themes.fontSize(`${fontScale}%`)
+      this.rendition.spread(settings.spread || 'auto')
+    },
     prev() {
+      if (!this.rendition?.manager) return
       return this.rendition?.prev()
     },
     next() {
+      if (!this.rendition?.manager) return
       return this.rendition?.next()
     },
     goToChapter(href) {
+      if (!this.rendition?.manager) return
       return this.rendition?.display(href)
     },
     keyUp(e) {
@@ -106,6 +158,7 @@ export default {
      * @param {string} payload.ebookProgress - eBook Progress Percentage
      */
     updateProgress(payload) {
+      if (!this.keepProgress) return
       this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
         console.error('EpubReader.updateProgress failed:', error)
       })
@@ -197,7 +250,7 @@ export default {
     },
     /** @param {string} location - CFI of the new location */
     relocated(location) {
-      if (this.userMediaProgress?.ebookLocation === location.start.cfi) {
+      if (this.savedEbookLocation === location.start.cfi) {
         return
       }
 
@@ -217,7 +270,7 @@ export default {
       const reader = this
 
       /** @type {ePub.Book} */
-      reader.book = new ePub(reader.epubUrl, {
+      reader.book = new ePub(reader.ebookUrl, {
         width: this.readerWidth,
         height: this.readerHeight - 50,
         openAs: 'epub',
@@ -229,35 +282,30 @@ export default {
       /** @type {ePub.Rendition} */
       reader.rendition = reader.book.renderTo('viewer', {
         width: this.readerWidth,
-        height: this.readerHeight * 0.8
+        height: this.readerHeight * 0.8,
+        spread: 'auto',
+        snap: true,
+        manager: 'continuous',
+        flow: 'paginated'
       })
 
       // load saved progress
-      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
+      reader.rendition.display(this.savedEbookLocation || reader.book.locations.start)
 
-      // load style
-      reader.rendition.themes.default({ '*': { color: '#fff!important', 'background-color': 'rgb(35 35 35)!important' } })
+      reader.rendition.on('rendered', () => {
+        this.applyTheme()
+      })
 
       reader.book.ready.then(() => {
         // set up event listeners
         reader.rendition.on('relocated', reader.relocated)
         reader.rendition.on('keydown', reader.keyUp)
 
-        let touchStart = 0
-        let touchEnd = 0
         reader.rendition.on('touchstart', (event) => {
-          touchStart = event.changedTouches[0].screenX
+          this.$emit('touchstart', event)
         })
-
         reader.rendition.on('touchend', (event) => {
-          touchEnd = event.changedTouches[0].screenX
-          const touchDistanceX = Math.abs(touchEnd - touchStart)
-          if (touchStart < touchEnd && touchDistanceX > 120) {
-            this.next()
-          }
-          if (touchStart > touchEnd && touchDistanceX > 120) {
-            this.prev()
-          }
+          this.$emit('touchend', event)
         })
 
         // load ebook cfi locations
@@ -275,6 +323,12 @@ export default {
       this.windowWidth = window.innerWidth
       this.windowHeight = window.innerHeight
       this.rendition?.resize(this.readerWidth, this.readerHeight * 0.8)
+    },
+    applyTheme() {
+      if (!this.rendition) return
+      this.rendition.getContents().forEach((c) => {
+        c.addStylesheetRules(this.themeRules)
+      })
     }
   },
   mounted() {

client/components/readers/MobiReader.vue

@@ -19,7 +19,8 @@ export default {
       type: Object,
       default: () => {}
     },
-    playerOpen: Boolean
+    playerOpen: Boolean,
+    fileId: String
   },
   data() {
     return {}
@@ -32,6 +33,9 @@ export default {
       return this.libraryItem?.id
     },
     ebookUrl() {
+      if (this.fileId) {
+        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+      }
       return `/api/items/${this.libraryItemId}/ebook`
     }
   },

client/components/readers/PdfReader.vue

@@ -11,10 +11,10 @@
       </div>
     </div>
 
-    <div class="absolute top-0 right-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 flex items-center text-center">
+    <div class="absolute top-0 right-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
-    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 flex items-center text-center">
+    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
       <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
       <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
     </div>
@@ -45,7 +45,9 @@ export default {
       type: Object,
       default: () => {}
     },
-    playerOpen: Boolean
+    playerOpen: Boolean,
+    keepProgress: Boolean,
+    fileId: String
   },
   data() {
     return {
@@ -95,11 +97,21 @@ export default {
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
     savedPage() {
-      return Number(this.userMediaProgress?.ebookLocation || 0)
+      if (!this.keepProgress) return 0
+
+      // Validate ebookLocation is a number
+      if (!this.userMediaProgress?.ebookLocation || isNaN(this.userMediaProgress.ebookLocation)) return 0
+      return Number(this.userMediaProgress.ebookLocation)
+    },
+    ebookUrl() {
+      if (this.fileId) {
+        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+      }
+      return `/api/items/${this.libraryItemId}/ebook`
     },
     pdfDocInitParams() {
       return {
-        url: `/api/items/${this.libraryItemId}/ebook`,
+        url: this.ebookUrl,
         httpHeaders: {
           Authorization: `Bearer ${this.userToken}`
         }
@@ -114,6 +126,7 @@ export default {
       this.scale -= 0.1
     },
     updateProgress() {
+      if (!this.keepProgress) return
       if (!this.numPages) {
         console.error('Num pages not loaded')
         return
@@ -128,7 +141,7 @@ export default {
       })
     },
     loadedEvt() {
-      if (this.savedPage && this.savedPage > 0 && this.savedPage <= this.numPages) {
+      if (this.savedPage > 0 && this.savedPage <= this.numPages) {
         this.page = this.savedPage
       }
     },

client/components/readers/Reader.vue

@@ -1,36 +1,48 @@
 <template>
-  <div v-if="show" id="reader" class="absolute top-0 left-0 w-full z-60 bg-primary text-white" :class="{ 'reader-player-open': !!streamLibraryItem }">
-    <div class="absolute top-4 left-4 z-20">
-      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
+  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
+    <div class="absolute top-4 left-4 z-20 flex items-center">
+      <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
+        <span class="material-icons text-2xl">menu</span>
+      </button>
+      <button v-if="hasSettings" @click="openSettings" type="button" aria-label="Ereader settings" class="mx-4 inline-flex opacity-80 hover:opacity-100">
+        <span class="material-icons text-1.5xl">settings</span>
+      </button>
     </div>
 
     <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
-      <h1 class="text-lg sm:text-xl md:text-2xl mb-1" style="line-height: 1.15; font-weight: 100">
+      <h1 :data-type="ebookType" class="text-lg sm:text-xl md:text-2xl mb-1 data-[type=comic]:hidden" style="line-height: 1.15; font-weight: 100">
         <span style="font-weight: 600">{{ abTitle }}</span>
-        <span v-if="abAuthor" style="display: inline"> – </span>
-        <span v-if="abAuthor">{{ abAuthor }}</span>
+        <span v-if="abAuthor" class="hidden md:inline"> – </span>
+        <span v-if="abAuthor" class="hidden md:inline">{{ abAuthor }}</span>
       </h1>
     </div>
 
     <div class="absolute top-4 right-4 z-20">
-      <span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
-      <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
+      <button @click="close" type="button" aria-label="Close ereader" class="inline-flex opacity-80 hover:opacity-100">
+        <span class="material-icons text-2xl">close</span>
+      </button>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :library-item="selectedLibraryItem" :player-open="!!streamLibraryItem" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :library-item="selectedLibraryItem" :player-open="!!streamLibraryItem" :keep-progress="keepProgress" :file-id="ebookFileId" @touchstart="touchstart" @touchend="touchend" @hook:mounted="readerMounted" />
 
     <!-- TOC side nav -->
     <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="hasToC" class="w-96 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent="toggleToC">
+    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent="toggleToC">
       <div class="p-4 h-full">
-        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="flex items-center mb-2">
+          <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
+            <span class="material-icons text-2xl">arrow_back</span>
+          </button>
+
+          <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
+        </div>
         <div class="tocContent">
           <ul>
             <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
-              <a :href="chapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+              <a :href="chapter.href" class="opacity-80 hover:opacity-100" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
               <ul v-if="chapter.subitems.length">
                 <li v-for="subchapter in chapter.subitems" :key="subchapter.id" class="py-1 pl-4">
-                  <a :href="subchapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(subchapter.href)">{{ subchapter.label }}</a>
+                  <a :href="subchapter.href" class="opacity-80 hover:opacity-100" @click.prevent="$refs.readerComponent.goToChapter(subchapter.href)">{{ subchapter.label }}</a>
                 </li>
               </ul>
             </li>
@@ -38,6 +50,41 @@
         </div>
       </div>
     </div>
+
+    <!-- ereader settings modal -->
+    <modals-modal v-model="showSettings" name="ereader-settings-modal" :width="500" :height="'unset'" :processing="false">
+      <template #outer>
+        <div class="absolute top-0 left-0 p-5 w-3/4 overflow-hidden">
+          <p class="text-xl md:text-3xl text-white truncate">{{ $strings.HeaderEreaderSettings }}</p>
+        </div>
+      </template>
+      <div class="px-2 py-4 md:p-8 w-full text-base rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-x-hidden overflow-y-auto" style="max-height: 80vh">
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelTheme }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontScale }}:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.fontScale" :min="5" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelLineSpacing }}:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelLayout }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
+        </div>
+      </div>
+    </modals-modal>
   </div>
 </template>
 
@@ -45,8 +92,21 @@
 export default {
   data() {
     return {
+      touchstartX: 0,
+      touchstartY: 0,
+      touchendX: 0,
+      touchendY: 0,
+      touchstartTime: 0,
+      touchIdentifier: null,
       chapters: [],
-      tocOpen: false
+      tocOpen: false,
+      showSettings: false,
+      ereaderSettings: {
+        theme: 'dark',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      }
     }
   },
   watch: {
@@ -65,6 +125,34 @@ export default {
         this.$store.commit('setShowEReader', val)
       }
     },
+    ereaderTheme() {
+      if (this.isEpub) return this.ereaderSettings.theme
+      return 'dark'
+    },
+    spreadItems() {
+      return [
+        {
+          text: this.$strings.LabelLayoutSinglePage,
+          value: 'none'
+        },
+        {
+          text: this.$strings.LabelLayoutSplitPage,
+          value: 'auto'
+        }
+      ]
+    },
+    themeItems() {
+      return [
+        {
+          text: this.$strings.LabelThemeDark,
+          value: 'dark'
+        },
+        {
+          text: this.$strings.LabelThemeLight,
+          value: 'light'
+        }
+      ]
+    },
     componentName() {
       if (this.ebookType === 'epub') return 'readers-epub-reader'
       else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
@@ -75,11 +163,8 @@ export default {
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
-    hasToC() {
-      return this.isEpub
-    },
     hasSettings() {
-      return false
+      return this.isEpub
     },
     abTitle() {
       return this.mediaMetadata.title
@@ -103,10 +188,18 @@ export default {
       return this.selectedLibraryItem.folderId
     },
     ebookFile() {
+      // ebook file id is passed when reading a supplementary ebook
+      if (this.ebookFileId) {
+        return this.selectedLibraryItem.libraryFiles.find((lf) => lf.ino === this.ebookFileId)
+      }
       return this.media.ebookFile
     },
     ebookFormat() {
       if (!this.ebookFile) return null
+      // Use file extension for supplementary ebook
+      if (!this.ebookFile.ebookFormat) {
+        return this.ebookFile.metadata.ext.toLowerCase().slice(1)
+      }
       return this.ebookFile.ebookFormat
     },
     ebookType() {
@@ -130,14 +223,34 @@ export default {
     },
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    keepProgress() {
+      return this.$store.state.ereaderKeepProgress
+    },
+    ebookFileId() {
+      return this.$store.state.ereaderFileId
+    },
+    isDarkTheme() {
+      return this.ereaderSettings.theme === 'dark'
     }
   },
   methods: {
+    readerMounted() {
+      if (this.isEpub) {
+        this.loadEreaderSettings()
+      }
+    },
+    settingsUpdated() {
+      this.$refs.readerComponent?.updateSettings?.(this.ereaderSettings)
+      localStorage.setItem('ereaderSettings', JSON.stringify(this.ereaderSettings))
+    },
     toggleToC() {
       this.tocOpen = !this.tocOpen
       this.chapters = this.$refs.readerComponent.chapters
     },
-    openSettings() {},
+    openSettings() {
+      this.showSettings = true
+    },
     hotkey(action) {
       if (!this.$refs.readerComponent) return
 
@@ -155,11 +268,72 @@ export default {
     prev() {
       if (this.$refs.readerComponent?.prev) this.$refs.readerComponent.prev()
     },
+    handleGesture() {
+      // Touch must be less than 1s. Must be > 60px drag and X distance > Y distance
+      const touchTimeMs = Date.now() - this.touchstartTime
+      if (touchTimeMs >= 1000) {
+        console.log('Touch too long', touchTimeMs)
+        return
+      }
+
+      const touchDistanceX = Math.abs(this.touchendX - this.touchstartX)
+      const touchDistanceY = Math.abs(this.touchendY - this.touchstartY)
+      const touchDistance = Math.sqrt(Math.pow(this.touchstartX - this.touchendX, 2) + Math.pow(this.touchstartY - this.touchendY, 2))
+      if (touchDistance < 60) {
+        return
+      }
+
+      if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) {
+        return
+      }
+
+      if (this.touchendX < this.touchstartX) {
+        this.next()
+      }
+      if (this.touchendX > this.touchstartX) {
+        this.prev()
+      }
+    },
+    touchstart(e) {
+      // Ignore rapid touch
+      if (this.touchstartTime && Date.now() - this.touchstartTime < 250) {
+        return
+      }
+
+      this.touchstartX = e.touches[0].screenX
+      this.touchstartY = e.touches[0].screenY
+      this.touchstartTime = Date.now()
+      this.touchIdentifier = e.touches[0].identifier
+    },
+    touchend(e) {
+      if (this.touchIdentifier !== e.changedTouches[0].identifier) {
+        return
+      }
+
+      this.touchendX = e.changedTouches[0].screenX
+      this.touchendY = e.changedTouches[0].screenY
+      this.handleGesture()
+    },
     registerListeners() {
       this.$eventBus.$on('reader-hotkey', this.hotkey)
+      document.body.addEventListener('touchstart', this.touchstart)
+      document.body.addEventListener('touchend', this.touchend)
     },
     unregisterListeners() {
       this.$eventBus.$off('reader-hotkey', this.hotkey)
+      document.body.removeEventListener('touchstart', this.touchstart)
+      document.body.removeEventListener('touchend', this.touchend)
+    },
+    loadEreaderSettings() {
+      try {
+        const settings = localStorage.getItem('ereaderSettings')
+        if (settings) {
+          this.ereaderSettings = JSON.parse(settings)
+          this.settingsUpdated()
+        }
+      } catch (error) {
+        console.error('Failed to load ereader settings', error)
+      }
     },
     init() {
       this.registerListeners()

client/components/stats/Heatmap.vue

@@ -235,7 +235,6 @@ export default {
           style: `transform:translate(${x}px,${y}px);background-color:${bgColor};outline:1px solid ${outlineColor};outline-offset:-1px;`
         })
       }
-      console.log('Data', this.data)
 
       this.monthLabels = []
       var lastMonth = null

client/components/stats/PreviewIcons.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div class="flex px-4">
+    <div v-if="isBookLibrary" class="flex px-4">
       <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
       </svg>
@@ -58,26 +58,32 @@ export default {
     return {}
   },
   computed: {
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
     user() {
       return this.$store.state.user.user
     },
     totalItems() {
-      return this.libraryStats ? this.libraryStats.totalItems : 0
+      return this.libraryStats?.totalItems || 0
     },
     totalAuthors() {
-      return this.libraryStats ? this.libraryStats.totalAuthors : 0
+      return this.libraryStats?.totalAuthors || 0
     },
     numAudioTracks() {
-      return this.libraryStats ? this.libraryStats.numAudioTracks : 0
+      return this.libraryStats?.numAudioTracks || 0
     },
     totalDuration() {
-      return this.libraryStats ? this.libraryStats.totalDuration : 0
+      return this.libraryStats?.totalDuration || 0
     },
     totalHours() {
       return Math.round(this.totalDuration / (60 * 60))
     },
     totalSizePretty() {
-      var totalSize = this.libraryStats ? this.libraryStats.totalSize : 0
+      var totalSize = this.libraryStats?.totalSize || 0
       return this.$bytesPretty(totalSize, 1)
     },
     totalSizeNum() {

client/components/tables/AudioTracksTableRow.vue

@@ -17,7 +17,7 @@
       {{ $secondsToTimestamp(track.duration) }}
     </td>
     <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
     </td>
   </tr>
 </template>
@@ -88,7 +88,7 @@ export default {
     },
     deleteLibraryFile() {
       const payload = {
-        message: 'This will delete the file from your file system. Are you sure?',
+        message: this.$strings.MessageConfirmDeleteFile,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/tables/BackupsTable.vue

@@ -21,14 +21,14 @@
           <td class="hidden sm:table-cell font-mono md:text-sm text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
           <td>
             <div class="w-full flex flex-row items-center justify-center">
-              <ui-btn v-if="backup.serverVersion" small color="primary" @click="applyBackup(backup)">{{ $strings.ButtonRestore }}</ui-btn>
-
-              <a v-if="backup.serverVersion" :href="`/metadata/${$encodeUriPath(backup.path)}?token=${userToken}`" class="mx-1 pt-1 hover:text-opacity-100 text-opacity-70 text-white" download><span class="material-icons text-xl">download</span></a>
+              <ui-btn v-if="backup.serverVersion && backup.key" small color="primary" @click="applyBackup(backup)">{{ $strings.ButtonRestore }}</ui-btn>
               <ui-tooltip v-else text="This backup was created with an old version of audiobookshelf no longer supported" direction="bottom" class="mx-2 flex items-center">
                 <span class="material-icons-outlined text-2xl text-error">error_outline</span>
               </ui-tooltip>
 
-              <span class="material-icons text-xl hover:text-error hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="deleteBackupClick(backup)">delete</span>
+              <button aria-label="Download Backup" class="inline-flex material-icons text-xl mx-1 mt-1 text-white/70 hover:text-white/100" @click.stop="downloadBackup(backup)">download</button>
+
+              <button aria-label="Delete Backup" class="inline-flex material-icons text-xl mx-1 text-white/70 hover:text-error" @click="deleteBackupClick(backup)">delete</button>
             </div>
           </td>
         </tr>
@@ -80,6 +80,9 @@ export default {
     }
   },
   methods: {
+    downloadBackup(backup) {
+      this.$downloadFile(`${process.env.serverUrl}/api/backups/${backup.id}/download?token=${this.userToken}`)
+    },
     confirm() {
       this.showConfirmApply = false
 
@@ -91,8 +94,9 @@ export default {
         })
         .catch((error) => {
           this.isBackingUp = false
-          console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastBackupRestoreFailed)
+          console.error('Failed to apply backup', error)
+          const errorMsg = error.response.data || this.$strings.ToastBackupRestoreFailed
+          this.$toast.error(errorMsg)
         })
     },
     deleteBackupClick(backup) {

client/components/tables/EbookFilesTable.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="w-full my-2">
+    <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
+      <p class="pr-2 md:pr-4">{{ $strings.HeaderEbookFiles }}</p>
+      <div class="h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-sm font-mono">{{ ebookFiles.length }}</span>
+      </div>
+      <div class="flex-grow" />
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
+      <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
+        <span class="material-icons text-4xl">expand_more</span>
+      </div>
+    </div>
+    <transition name="slide">
+      <div class="w-full" v-show="showFiles">
+        <table class="text-sm tracksTable">
+          <tr>
+            <th class="text-left px-4">{{ $strings.LabelPath }}</th>
+            <th class="text-left w-24 min-w-24">{{ $strings.LabelSize }}</th>
+            <th class="text-left px-4 w-24">
+              {{ $strings.LabelRead }} <ui-tooltip :text="$strings.LabelReadEbookWithoutProgress" direction="top" class="inline-block"><span class="material-icons-outlined text-sm align-middle">info</span></ui-tooltip>
+            </th>
+            <th v-if="showMoreColumn" class="text-center w-16"></th>
+          </tr>
+          <template v-for="file in ebookFiles">
+            <tables-ebook-files-table-row :key="file.path" :libraryItemId="libraryItemId" :showFullPath="showFullPath" :file="file" @read="readEbook" />
+          </template>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      showFiles: false,
+      showFullPath: false
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userIsAdmin() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    libraryIsAudiobooksOnly() {
+      return this.$store.getters['libraries/getLibraryIsAudiobooksOnly']
+    },
+    showMoreColumn() {
+      return this.userCanDelete || this.userCanDownload || (this.userCanUpdate && !this.libraryIsAudiobooksOnly)
+    },
+    ebookFiles() {
+      return (this.libraryItem.libraryFiles || []).filter((lf) => lf.fileType === 'ebook')
+    }
+  },
+  methods: {
+    readEbook(fileIno) {
+      this.$store.commit('showEReader', { libraryItem: this.libraryItem, keepProgress: false, fileId: fileIno })
+    },
+    clickBar() {
+      this.showFiles = !this.showFiles
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/tables/EbookFilesTableRow.vue

@@ -0,0 +1,139 @@
+<template>
+  <tr>
+    <td class="px-4">
+      {{ showFullPath ? file.metadata.path : file.metadata.relPath }} <ui-tooltip :text="$strings.LabelPrimaryEbook" class="inline-block"><span v-if="isPrimary" class="material-icons-outlined text-success align-text-bottom">check_circle</span></ui-tooltip>
+    </td>
+    <td>
+      {{ $bytesPretty(file.metadata.size) }}
+    </td>
+    <td class="text-xs">
+      <ui-icon-btn icon="auto_stories" outlined borderless icon-font-size="1.125rem" :size="8" @click="readEbook" />
+    </td>
+    <td v-if="contextMenuItems.length" class="text-center">
+      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="130" :processing="processing" @action="contextMenuAction" />
+    </td>
+  </tr>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItemId: String,
+    showFullPath: Boolean,
+    file: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userIsAdmin() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    downloadUrl() {
+      return `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${this.file.ino}/download?token=${this.userToken}`
+    },
+    isPrimary() {
+      return !this.file.isSupplementary
+    },
+    libraryIsAudiobooksOnly() {
+      return this.$store.getters['libraries/getLibraryIsAudiobooksOnly']
+    },
+    contextMenuItems() {
+      const items = []
+      if (this.userCanUpdate && !this.libraryIsAudiobooksOnly) {
+        items.push({
+          text: this.isPrimary ? this.$strings.LabelSetEbookAsSupplementary : this.$strings.LabelSetEbookAsPrimary,
+          action: 'updateStatus'
+        })
+      }
+      if (this.userCanDownload) {
+        items.push({
+          text: this.$strings.LabelDownload,
+          action: 'download'
+        })
+      }
+      if (this.userCanDelete) {
+        items.push({
+          text: this.$strings.ButtonDelete,
+          action: 'delete'
+        })
+      }
+      return items
+    }
+  },
+  methods: {
+    readEbook() {
+      this.$emit('read', this.file.ino)
+    },
+    contextMenuAction({ action }) {
+      if (action === 'delete') {
+        this.deleteLibraryFile()
+      } else if (action === 'download') {
+        this.downloadLibraryFile()
+      } else if (action === 'updateStatus') {
+        this.updateEbookStatus()
+      }
+    },
+    updateEbookStatus() {
+      this.processing = true
+      this.$axios
+        .$patch(`/api/items/${this.libraryItemId}/ebook/${this.file.ino}/status`)
+        .then(() => {
+          this.$toast.success('Ebook updated')
+        })
+        .catch((error) => {
+          console.error('Failed to update ebook', error)
+          this.$toast.error('Failed to update ebook')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    deleteLibraryFile() {
+      const payload = {
+        message: this.$strings.MessageConfirmDeleteFile,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.processing = true
+            this.$axios
+              .$delete(`/api/items/${this.libraryItemId}/file/${this.file.ino}`)
+              .then(() => {
+                this.$toast.success('File deleted')
+              })
+              .catch((error) => {
+                console.error('Failed to delete file', error)
+                this.$toast.error('Failed to delete file')
+              })
+              .finally(() => {
+                this.processing = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    downloadLibraryFile() {
+      this.$downloadFile(this.downloadUrl, this.file.metadata.filename)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/tables/LibraryFilesTable.vue

@@ -27,7 +27,7 @@
       </div>
     </transition>
 
-    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :audio-file="selectedAudioFile" />
+    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :library-item-id="libraryItemId" :audio-file="selectedAudioFile" />
   </div>
 </template>
 
@@ -38,7 +38,6 @@ export default {
       type: Object,
       default: () => {}
     },
-    isMissing: Boolean,
     expanded: Boolean, // start expanded
     inModal: Boolean
   },

client/components/tables/LibraryFilesTableRow.vue

@@ -12,7 +12,7 @@
       </div>
     </td>
     <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
     </td>
   </tr>
 </template>
@@ -83,7 +83,7 @@ export default {
     },
     deleteLibraryFile() {
       const payload = {
-        message: 'This will delete the file from your file system. Are you sure?',
+        message: this.$strings.MessageConfirmDeleteFile,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/tables/PlaylistItemsTable.vue

@@ -70,7 +70,10 @@ export default {
   methods: {
     editItem(playlistItem) {
       if (playlistItem.episode) {
-        this.$store.commit('globals/setSelectedEpisode', playlist.episode)
+        const episodeIds = this.items.map((pi) => pi.episodeId)
+        this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
+        this.$store.commit('setSelectedLibraryItem', playlistItem.libraryItem)
+        this.$store.commit('globals/setSelectedEpisode', playlistItem.episode)
         this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
       } else {
         const itemIds = this.items.map((i) => i.libraryItemId)

client/components/tables/TracksTable.vue

@@ -33,7 +33,7 @@
       </div>
     </transition>
 
-    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :audio-file="selectedAudioFile" />
+    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :library-item-id="libraryItemId" :audio-file="selectedAudioFile" />
   </div>
 </template>
 

client/components/tables/UsersTable.vue

@@ -19,9 +19,13 @@
           </td>
           <td class="text-sm">{{ user.type }}</td>
           <td class="hidden lg:table-cell">
-            <div v-if="usersOnline[user.id]">
-              <p v-if="usersOnline[user.id].session && usersOnline[user.id].session.libraryItem" class="truncate text-xs">Listening: {{ usersOnline[user.id].session.libraryItem.media.metadata.title || '' }}</p>
-              <p v-else-if="usersOnline[user.id].mostRecent && usersOnline[user.id].mostRecent.media" class="truncate text-xs">Last: {{ usersOnline[user.id].mostRecent.media.metadata.title }}</p>
+            <div v-if="usersOnline[user.id]?.session?.displayTitle">
+              <p class="truncate text-xs">Listening: {{ usersOnline[user.id].session.displayTitle || '' }}</p>
+              <p class="truncate text-xs text-gray-300">{{ getDeviceInfoString(usersOnline[user.id].session.deviceInfo) }}</p>
+            </div>
+            <div v-else-if="user.latestSession?.displayTitle">
+              <p class="truncate text-xs">Last: {{ user.latestSession.displayTitle || '' }}</p>
+              <p class="truncate text-xs text-gray-300">{{ getDeviceInfoString(user.latestSession.deviceInfo) }}</p>
             </div>
           </td>
           <td class="text-xs font-mono hidden sm:table-cell">
@@ -83,6 +87,12 @@ export default {
     }
   },
   methods: {
+    getDeviceInfoString(deviceInfo) {
+      if (!deviceInfo) return ''
+      if (deviceInfo.manufacturer && deviceInfo.model) return `${deviceInfo.manufacturer} ${deviceInfo.model}`
+
+      return `${deviceInfo.osName || 'Unknown'} ${deviceInfo.osVersion || ''} ${deviceInfo.browserName || ''}`
+    },
     deleteUserClick(user) {
       if (this.isDeletingUser) return
       if (confirm(this.$getString('MessageRemoveUserWarning', [user.username]))) {
@@ -114,11 +124,12 @@ export default {
     },
     loadUsers() {
       this.$axios
-        .$get('/api/users')
+        .$get('/api/users?include=latestSession')
         .then((res) => {
           this.users = res.users.sort((a, b) => {
             return a.createdAt - b.createdAt
           })
+          console.log('Loaded users', this.users)
         })
         .catch((error) => {
           console.error('Failed', error)

client/components/tables/collection/BookTableRow.vue

@@ -188,7 +188,6 @@ export default {
         .$patch(`/api/me/progress/${this.book.id}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)

client/components/tables/library/LibrariesTable.vue

@@ -11,10 +11,6 @@
       <ui-btn @click="clickAddLibrary">{{ $strings.ButtonAddYourFirstLibrary }}</ui-btn>
     </div>
 
-    <p v-if="libraries.length" class="text-xs mt-4 text-gray-200">
-      *<strong>{{ $strings.ButtonForceReScan }}</strong> {{ $strings.MessageForceReScanDescription }}
-    </p>
-
     <p v-if="libraries.length && libraries.some((li) => li.mediaType === 'book')" class="text-xs mt-4 text-gray-200">
       **<strong>{{ $strings.ButtonMatchBooks }}</strong> {{ $strings.MessageMatchBooksDescription }}
     </p>

client/components/tables/library/LibraryItem.vue

@@ -71,11 +71,6 @@ export default {
           text: this.$strings.ButtonScan,
           action: 'scan',
           value: 'scan'
-        },
-        {
-          text: this.$strings.ButtonForceReScan,
-          action: 'force-scan',
-          value: 'force-scan'
         }
       ]
       if (this.isBookLibrary) {
@@ -137,26 +132,6 @@ export default {
           this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
         })
     },
-    forceScan() {
-      const payload = {
-        message: this.$strings.MessageConfirmForceReScan,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$store
-              .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
-              .then(() => {
-                this.$toast.success(this.$strings.ToastLibraryScanStarted)
-              })
-              .catch((error) => {
-                console.error('Failed to start scan', error)
-                this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
     deleteClick() {
       const payload = {
         message: this.$getString('MessageConfirmDeleteLibrary', [this.library.name]),

client/components/tables/playlist/ItemTableRow.vue

@@ -198,7 +198,6 @@ export default {
         .$patch(routepath, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)

client/components/tables/podcast/EpisodeTableRow.vue

@@ -183,7 +183,6 @@ export default {
         .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)

client/components/tables/podcast/EpisodesTable.vue

@@ -1,22 +1,29 @@
 <template>
   <div class="w-full py-6">
-    <p class="text-lg mb-2 font-semibold md:hidden">{{ $strings.HeaderEpisodes }}</p>
-    <div class="flex items-center mb-4">
-      <p class="text-lg mb-0 font-semibold hidden md:block">{{ $strings.HeaderEpisodes }}</p>
+    <div class="flex flex-wrap flex-col md:flex-row md:items-center mb-4">
+      <div class="flex items-center flex-nowrap whitespace-nowrap mb-2 md:mb-0">
+        <p class="text-lg mb-0 font-semibold">{{ $strings.HeaderEpisodes }}</p>
+        <div class="inline-flex bg-white/5 px-1 mx-2 rounded-md text-sm text-gray-100">
+          <p v-if="episodesList.length === episodes.length">{{ episodes.length }}</p>
+          <p v-else>{{ episodesList.length }} / {{ episodes.length }}</p>
+        </div>
+      </div>
       <div class="flex-grow hidden md:block" />
-      <template v-if="isSelectionMode">
-        <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
-          <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
-        </ui-tooltip>
-        <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">{{ $getString('MessageRemoveEpisodes', [selectedEpisodes.length]) }}</ui-btn>
-        <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
-      </template>
-      <template v-else>
-        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 sm:ml-4" />
-        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" />
-        <div class="flex-grow md:hidden" />
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
-      </template>
+      <div class="flex items-center">
+        <template v-if="isSelectionMode">
+          <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+            <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
+          </ui-tooltip>
+          <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">{{ $getString('MessageRemoveEpisodes', [selectedEpisodes.length]) }}</ui-btn>
+          <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
+        </template>
+        <template v-else>
+          <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 md:ml-4" />
+          <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+          <div class="flex-grow md:hidden" />
+          <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
+        </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">
@@ -51,7 +58,6 @@ export default {
       selectedEpisodes: [],
       episodesToRemove: [],
       processing: false,
-      quickMatchingEpisodes: false,
       search: null,
       searchTimeout: null,
       searchText: null
@@ -71,6 +77,10 @@ export default {
         {
           text: 'Quick match all episodes',
           action: 'quick-match-episodes'
+        },
+        {
+          text: this.allEpisodesFinished ? this.$strings.MessageMarkAllEpisodesNotFinished : this.$strings.MessageMarkAllEpisodesFinished,
+          action: 'batch-mark-as-finished'
         }
       ]
     },
@@ -157,14 +167,20 @@ export default {
     episodesList() {
       return this.episodesSorted.filter((episode) => {
         if (!this.searchText) return true
-        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
+        return episode.title?.toLowerCase().includes(this.searchText) || episode.subtitle?.toLowerCase().includes(this.searchText)
       })
     },
     selectedIsFinished() {
       // Find an item that is not finished, if none then all items finished
-      return !this.selectedEpisodes.find((episode) => {
-        var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
-        return !itemProgress || !itemProgress.isFinished
+      return !this.selectedEpisodes.some((episode) => {
+        const itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        return !itemProgress?.isFinished
+      })
+    },
+    allEpisodesFinished() {
+      return !this.episodesSorted.some((episode) => {
+        const itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        return !itemProgress?.isFinished
       })
     },
     dateFormat() {
@@ -187,17 +203,34 @@ export default {
     },
     contextMenuAction({ action }) {
       if (action === 'quick-match-episodes') {
-        if (this.quickMatchingEpisodes) return
+        if (this.processing) return
 
         this.quickMatchAllEpisodes()
+      } else if (action === 'batch-mark-as-finished') {
+        if (this.processing) return
+
+        this.markAllEpisodesFinished()
       }
     },
+    markAllEpisodesFinished() {
+      const newIsFinished = !this.allEpisodesFinished
+      const payload = {
+        message: newIsFinished ? this.$strings.MessageConfirmMarkAllEpisodesFinished : this.$strings.MessageConfirmMarkAllEpisodesNotFinished,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.batchUpdateEpisodesFinished(this.episodesSorted, newIsFinished)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     quickMatchAllEpisodes() {
       if (!this.mediaMetadata.feedUrl) {
         this.$toast.error(this.$strings.MessagePodcastHasNoRSSFeedForMatching)
         return
       }
-      this.quickMatchingEpisodes = true
+      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?',
@@ -217,7 +250,7 @@ export default {
                 this.$toast.error('Failed to match episodes')
               })
           }
-          this.quickMatchingEpisodes = false
+          this.processing = false
         },
         type: 'yesNo'
       }
@@ -241,17 +274,19 @@ export default {
       this.$store.commit('addItemToQueue', queueItem)
     },
     toggleBatchFinished() {
+      this.batchUpdateEpisodesFinished(this.selectedEpisodes, !this.selectedIsFinished)
+    },
+    batchUpdateEpisodesFinished(episodes, newIsFinished) {
       this.processing = true
-      var newIsFinished = !this.selectedIsFinished
-      var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
+
+      const updateProgressPayloads = episodes.map((episode) => {
         return {
           libraryItemId: this.libraryItem.id,
           episodeId: episode.id,
           isFinished: newIsFinished
         }
       })
-
-      this.$axios
+      return this.$axios
         .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
         .then(() => {
           this.$toast.success(this.$strings.ToastBatchUpdateSuccess)

client/components/ui/Btn.vue

@@ -73,7 +73,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .btn::before {
   content: '';
   position: absolute;

client/components/ui/ContextMenuDropdown.vue

@@ -1,26 +1,37 @@
 <template>
   <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
-    <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu">
-      <button type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+    <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu" :processing="processing">
+      <button v-if="!processing" type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
         <span class="material-icons" :class="iconClass">more_vert</span>
       </button>
+      <div v-else class="h-full w-full flex items-center justify-center">
+        <widgets-loading-spinner />
+      </div>
     </slot>
 
     <transition name="menu">
-      <div v-show="showMenu" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth }">
+      <div v-show="showMenu" ref="menuWrapper" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth + 'px' }">
         <template v-for="(item, index) in items">
           <template v-if="item.subitems">
-            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
+            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
               <p>{{ item.text }}</p>
             </div>
-            <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50 -ml-px" :style="{ left: menuWidth, top: index * 29 + 'px' }">
-              <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.action, subitem.data)">
+            <div
+              v-if="mouseoverItemIndex === index"
+              :key="`subitems-${index}`"
+              @mouseover="mouseoverSubItemMenu(index)"
+              @mouseleave="mouseleaveSubItemMenu(index)"
+              class="absolute bg-bg border rounded-b-md border-black-200 shadow-lg z-50 -ml-px py-1"
+              :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'"
+              :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }"
+            >
+              <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.action, subitem.data)">
                 <p>{{ subitem.text }}</p>
               </div>
             </div>
           </template>
-          <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
-            <p>{{ item.text }}</p>
+          <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
+            <p class="text-left">{{ item.text }}</p>
           </div>
         </template>
       </div>
@@ -41,9 +52,10 @@ export default {
       default: ''
     },
     menuWidth: {
-      type: String,
-      default: '192px'
-    }
+      type: Number,
+      default: 192
+    },
+    processing: Boolean
   },
   data() {
     return {
@@ -52,12 +64,18 @@ export default {
         events: ['mousedown'],
         isActive: true
       },
+      submenuWidth: 144,
       showMenu: false,
       mouseoverItemIndex: null,
-      isOverSubItemMenu: false
+      isOverSubItemMenu: false,
+      openSubMenuLeft: false
+    }
+  },
+  computed: {
+    submenuLeftPos() {
+      return this.openSubMenuLeft ? -(this.submenuWidth - 1) : this.menuWidth - 0.5
     }
   },
-  computed: {},
   methods: {
     mouseoverSubItemMenu(index) {
       this.isOverSubItemMenu = true
@@ -80,6 +98,12 @@ export default {
     clickShowMenu() {
       if (this.disabled) return
       this.showMenu = !this.showMenu
+      this.$nextTick(() => {
+        const boundingRect = this.$refs.menuWrapper?.getBoundingClientRect()
+        if (boundingRect) {
+          this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
+        }
+      })
     },
     clickedOutside() {
       this.showMenu = false

client/components/ui/LibrariesDropdown.vue

@@ -1,6 +1,14 @@
 <template>
   <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
-    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name" @click.stop.prevent="clickShowMenu">
+    <button
+      type="button"
+      :disabled="disabled"
+      class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200"
+      aria-haspopup="listbox"
+      :aria-expanded="showMenu"
+      :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name"
+      @click.stop.prevent="clickShowMenu"
+    >
       <div class="flex items-center justify-center sm:justify-start">
         <ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
         <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
@@ -8,7 +16,7 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full min-w-48 bg-primary border border-black-200 shadow-lg rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm librariesDropdownMenu" tabindex="-1" role="listbox">
         <template v-for="library in librariesFiltered">
           <li :key="library.id" class="text-gray-400 hover:text-white relative py-2 cursor-pointer hover:bg-black-400" role="option" tabindex="0" @keydown.enter="selectLibrary(library)" @click="selectLibrary(library)">
             <div class="flex items-center px-2">
@@ -93,4 +101,10 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>
+
+<style scoped>
+.librariesDropdownMenu {
+  max-height: calc(100vh - 75px);
+}
+</style>

client/components/ui/MultiSelectQueryInput.vue

@@ -46,7 +46,7 @@ export default {
       type: Array,
       default: () => []
     },
-    endpoint: String,
+    filterKey: String,
     label: String,
     disabled: Boolean,
     readonly: Boolean,
@@ -60,7 +60,6 @@ export default {
     return {
       textInput: null,
       currentSearch: null,
-      searching: false,
       typingTimeout: null,
       isFocused: false,
       menu: null,
@@ -97,6 +96,9 @@ export default {
     },
     itemsToShow() {
       return this.items
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
     }
   },
   methods: {
@@ -109,20 +111,15 @@ export default {
     getIsSelected(itemValue) {
       return !!this.selected.find((i) => i.id === itemValue)
     },
-    async search() {
-      if (this.searching) return
+    search() {
       this.currentSearch = this.textInput
-      this.searching = true
-      const results = await this.$axios
-        .$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`)
-        .then((res) => res.results || res)
-        .catch((error) => {
-          console.error('Failed to get search results', error)
-          return []
-        })
+      const dataToSearch = this.filterData[this.filterKey] || []
+
+      const results = dataToSearch.filter((au) => {
+        return au.name.toLowerCase().includes(this.currentSearch.toLowerCase().trim())
+      })
 
       this.items = results || []
-      this.searching = false
     },
     keydownInput() {
       clearTimeout(this.typingTimeout)

client/components/ui/RangeInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="inline-flex">
+    <input v-model="input" type="range" :min="min" :max="max" :step="step" />
+
+    <p class="text-sm ml-2">{{ input }}%</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    min: Number,
+    max: Number,
+    step: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    input: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+input[type='range']:focus {
+  outline: none;
+}
+
+/* chromium */
+input[type='range']::-webkit-slider-runnable-track {
+  background-color: rgb(0 0 0 / 0.25);
+  border-radius: 9999px;
+  height: 0.75rem;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-top: -0.25rem;
+  border-radius: 9999px;
+  background-color: rgb(255 255 255 / 0.7);
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type='range']:focus::-webkit-slider-thumb {
+  border: 1px solid #6b6b6b;
+  outline: 3px solid #6b6b6b;
+  outline-offset: 0.125rem;
+}
+
+/* firefox */
+input[type='range']::-moz-range-track {
+  background-color: rgb(0 0 0 / 0.25);
+  border-radius: 9999px;
+  height: 0.75rem;
+}
+input[type='range']::-moz-range-thumb {
+  border: none;
+  border-radius: 9999px;
+  margin-top: -0.25rem;
+  background-color: rgb(255 255 255 / 0.7);
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type='range']:focus::-moz-range-thumb {
+  border: 1px solid #6b6b6b;
+  outline: 3px solid #6b6b6b;
+  outline-offset: 0.125rem;
+}
+</style>

client/components/ui/TextareaWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
-    <ui-textarea-input ref="input" v-model="inputValue" :disabled="disabled" :rows="rows" class="w-full" />
+    <ui-textarea-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :rows="rows" class="w-full" />
   </div>
 </template>
 
@@ -11,6 +11,7 @@ export default {
     value: [String, Number],
     label: String,
     disabled: Boolean,
+    readonly: Boolean,
     rows: {
       type: Number,
       default: 2

client/components/ui/ToggleBtns.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="inline-flex toggle-btn-wrapper shadow-md">
+    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
+      {{ item.text }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    /**
+     * [{ "text", "", "value": "" }]
+     */
+    items: {
+      type: Array,
+      default: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    clickBtn(value) {
+      this.$emit('input', value)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.toggle-btn-wrapper .toggle-btn:first-child {
+  border-top-left-radius: 0.375rem /* 6px */;
+  border-bottom-left-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:last-child {
+  border-top-right-radius: 0.375rem /* 6px */;
+  border-bottom-right-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:first-child::before {
+  border-top-left-radius: 0.375rem /* 6px */;
+  border-bottom-left-radius: 0.375rem /* 6px */;
+}
+.toggle-btn-wrapper .toggle-btn:last-child::before {
+  border-top-right-radius: 0.375rem /* 6px */;
+  border-bottom-right-radius: 0.375rem /* 6px */;
+}
+
+.toggle-btn-wrapper .toggle-btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+.toggle-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+.toggle-btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.toggle-btn:hover:not(:disabled) {
+  color: white;
+}
+
+.toggle-btn {
+  color: rgba(255, 255, 255, 0.75);
+}
+.toggle-btn.selected {
+  color: white;
+}
+.toggle-btn.selected::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+button.toggle-btn:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>

client/components/ui/VueTrix.vue

@@ -213,7 +213,9 @@ export default {
       // Reload HTML content
       this.$refs.trix.editor.loadHTML(newContent)
       // Move cursor to end of new content updated
-      this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())
+      if (this.autofocus) {
+        this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())
+      }
     },
     getContentEndPosition() {
       return this.$refs.trix.editor.getDocument().toString().length - 1

client/components/widgets/BookDetailsEdit.vue

@@ -12,8 +12,8 @@
 
       <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, use query input to query all authors -->
-          <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" endpoint="authors/search" />
+          <!-- 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" />
         </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" />

client/components/widgets/MoreMenu.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" style="top: 0; left: 0">
+  <div ref="wrapper" class="absolute bg-bg rounded-md py-1 border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" :style="{ width: menuWidth + 'px' }" style="top: 0; left: 0">
     <template v-for="(item, index) in items">
       <template v-if="item.subitems">
-        <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
+        <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
           <p>{{ item.text }}</p>
         </div>
-        <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" :style="{ left: 143 + 'px', top: index * 28 + 'px' }">
-          <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.func, subitem.data)">
+        <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute bg-bg rounded-b-md border border-black-200 py-1 shadow-lg z-50" :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'" :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }">
+          <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.func, subitem.data)">
             <p>{{ subitem.text }}</p>
           </div>
         </div>
       </template>
-      <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop="clickAction(item.func)">
+      <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop="clickAction(item.func)">
         <p>{{ item.text }}</p>
       </div>
     </template>
@@ -33,11 +33,18 @@ export default {
         events: ['mousedown'],
         isActive: true
       },
+      submenuWidth: 144,
+      menuWidth: 144,
       mouseoverItemIndex: null,
-      isOverSubItemMenu: false
+      isOverSubItemMenu: false,
+      openSubMenuLeft: false
+    }
+  },
+  computed: {
+    submenuLeftPos() {
+      return this.openSubMenuLeft ? -this.submenuWidth : this.menuWidth - 1.5
     }
   },
-  computed: {},
   methods: {
     mouseoverSubItemMenu(index) {
       this.isOverSubItemMenu = true
@@ -77,7 +84,14 @@ export default {
       this.$el.parentNode.removeChild(this.$el)
     }
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      const boundingRect = this.$refs.wrapper?.getBoundingClientRect()
+      if (boundingRect) {
+        this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
+      }
+    })
+  },
   beforeDestroy() {}
 }
 </script>

client/layouts/default.vue

@@ -343,6 +343,10 @@ export default {
       }
       this.$store.commit('libraries/removeCollection', collection)
     },
+    seriesRemoved({ id, libraryId }) {
+      if (this.currentLibraryId !== libraryId) return
+      this.$store.commit('libraries/removeSeriesFromFilterData', id)
+    },
     playlistAdded(playlist) {
       if (playlist.userId !== this.user.id || this.currentLibraryId !== playlist.libraryId) return
       this.$store.commit('libraries/addUpdateUserPlaylist', playlist)
@@ -442,6 +446,9 @@ export default {
       this.socket.on('collection_updated', this.collectionUpdated)
       this.socket.on('collection_removed', this.collectionRemoved)
 
+      // Series Listeners
+      this.socket.on('series_removed', this.seriesRemoved)
+
       // User Playlist Listeners
       this.socket.on('playlist_added', this.playlistAdded)
       this.socket.on('playlist_updated', this.playlistUpdated)
@@ -491,9 +498,9 @@ export default {
       }
     },
     checkActiveElementIsInput() {
-      var activeElement = document.activeElement
-      var inputs = ['input', 'select', 'button', 'textarea']
-      return activeElement && inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1
+      const activeElement = document.activeElement
+      const inputs = ['input', 'select', 'button', 'textarea', 'trix-editor']
+      return activeElement && inputs.some((i) => i === activeElement.tagName.toLowerCase())
     },
     getHotkeyName(e) {
       var keyCode = e.keyCode || e.which
@@ -560,12 +567,6 @@ export default {
         .catch((err) => console.error(err))
     },
     initLocalStorage() {
-      // If experimental features set in local storage
-      var experimentalFeaturesSaved = localStorage.getItem('experimental')
-      if (experimentalFeaturesSaved === '1') {
-        this.$store.commit('setExperimentalFeatures', true)
-      }
-
       // Queue auto play
       var playerQueueAutoPlay = localStorage.getItem('playerQueueAutoPlay')
       this.$store.commit('setPlayerQueueAutoPlay', playerQueueAutoPlay !== '0')

client/nuxt.config.js

@@ -71,8 +71,8 @@ module.exports = {
   ],
 
   proxy: {
-    '/s/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/api/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' }
+    '/api/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
+    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } }
   },
 
   io: {

client/package-lock.json

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

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.2.22",
+  "version": "2.4.3",
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",
   "scripts": {

client/pages/audiobook/_id/chapters.vue

@@ -112,17 +112,17 @@
         <div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
           <div class="flex-grow">{{ $strings.LabelFilename }}</div>
           <div class="w-20">{{ $strings.LabelDuration }}</div>
-          <div class="w-20 text-center">{{ $strings.HeaderChapters }}</div>
+          <div class="w-20 hidden md:block text-center">{{ $strings.HeaderChapters }}</div>
         </div>
         <template v-for="track in audioTracks">
           <div :key="track.ino" class="flex items-center py-2" :class="currentTrackIndex === track.index && isPlayingChapter ? 'bg-success bg-opacity-10' : ''">
-            <div class="flex-grow">
+            <div class="flex-grow max-w-[calc(100%-80px)] pr-2">
               <p class="text-xs truncate max-w-sm">{{ track.metadata.filename }}</p>
             </div>
             <div class="w-20" style="min-width: 80px">
               <p class="text-xs font-mono text-gray-200">{{ $secondsToTimestamp(Math.round(track.duration), false, true) }}</p>
             </div>
-            <div class="w-20 flex justify-center" style="min-width: 80px">
+            <div class="w-20 hidden md:flex justify-center" style="min-width: 80px">
               <span v-if="(track.chapters || []).length" class="material-icons text-success text-sm">check</span>
             </div>
           </div>

client/pages/audiobook/_id/manage.vue

@@ -94,7 +94,7 @@
         <transition name="slide">
           <div v-if="showEncodeOptions" 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. 64k)'" class="m-2 max-w-40" />
+              <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" />
               <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" />
               <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="'Audio Codec'" class="m-2 max-w-40" />
             </div>
@@ -214,7 +214,7 @@ export default {
       showEncodeOptions: false,
       shouldBackupAudioFiles: true,
       encodingOptions: {
-        bitrate: '64k',
+        bitrate: '128k',
         channels: '2',
         codec: 'aac'
       }

client/pages/batch/index.vue

@@ -26,8 +26,8 @@
             </div>
             <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.authors" />
-              <!-- Authors filter only contains authors in this library, use query input to query all authors -->
-              <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" endpoint="authors/search" class="mb-4 ml-4" />
+              <!-- Authors filter only contains authors in this library, uses filter data -->
+              <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" filter-key="authors" class="mb-4 ml-4" />
             </div>
             <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.publishedYear" />

client/pages/config.vue

@@ -55,6 +55,7 @@ export default {
         else if (pageName === 'library-stats') return this.$strings.HeaderLibraryStats
         else if (pageName === 'users') return this.$strings.HeaderUsers
         else if (pageName === 'item-metadata-utils') return this.$strings.HeaderItemMetadataUtils
+        else if (pageName === 'rss-feeds') return this.$strings.HeaderRSSFeeds
         else if (pageName === 'email') return this.$strings.HeaderEmail
       }
       return this.$strings.HeaderSettings

client/pages/config/backups.vue

@@ -11,14 +11,18 @@
       <div v-if="enableBackups" class="mb-6">
         <div class="flex items-center pl-6 mb-2">
           <span class="material-icons-outlined text-2xl text-black-50 mr-2">schedule</span>
-          <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span></div>
+          <div class="w-48">
+            <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span>
+          </div>
           <div class="text-gray-100">{{ scheduleDescription }}</div>
           <span class="material-icons text-lg text-black-50 hover:text-yellow-500 cursor-pointer ml-2" @click="showCronBuilder = !showCronBuilder">edit</span>
         </div>
 
         <div v-if="nextBackupDate" class="flex items-center pl-6 py-0.5 px-2">
           <span class="material-icons-outlined text-2xl text-black-50 mr-2">event</span>
-          <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span></div>
+          <div class="w-48">
+            <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span>
+          </div>
           <div class="text-gray-100">{{ nextBackupDate }}</div>
         </div>
       </div>
@@ -48,6 +52,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       updatingServerSettings: false,
@@ -98,7 +107,7 @@ export default {
         this.$toast.error('Invalid number of backups to keep')
         return
       }
-      var updatePayload = {
+      const updatePayload = {
         backupSchedule: this.enableBackups ? this.cronExpression : false,
         backupsToKeep: Number(this.backupsToKeep),
         maxBackupSize: Number(this.maxBackupSize)
@@ -108,15 +117,15 @@ export default {
     updateServerSettings(payload) {
       this.updatingServerSettings = true
       this.$store
-          .dispatch('updateServerSettings', payload)
-          .then((success) => {
-            console.log('Updated Server Settings', success)
-            this.updatingServerSettings = false
-          })
-          .catch((error) => {
-            console.error('Failed to update server settings', error)
-            this.updatingServerSettings = false
-          })
+        .dispatch('updateServerSettings', payload)
+        .then((success) => {
+          console.log('Updated Server Settings', success)
+          this.updatingServerSettings = false
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+          this.updatingServerSettings = false
+        })
     },
     initServerSettings() {
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}

client/pages/config/email.vue

@@ -34,10 +34,14 @@
           <div class="w-full md:w-1/2 px-1">
             <ui-text-input-with-label ref="fromInput" v-model="newSettings.fromAddress" :disabled="savingSettings" :label="$strings.LabelEmailSettingsFromAddress" />
           </div>
+          <div class="w-full md:w-1/2 px-1">
+            <ui-text-input-with-label ref="testInput" v-model="newSettings.testAddress" :disabled="savingSettings" :label="$strings.LabelEmailSettingsTestAddress" />
+          </div>
         </div>
 
         <div class="flex items-center justify-between pt-4">
-          <ui-btn :loading="sendingTest" :disabled="savingSettings || !newSettings.host" type="button" @click="sendTestClick">{{ $strings.ButtonTest }}</ui-btn>
+          <ui-btn v-if="hasUpdates" :disabled="savingSettings" type="button" @click="resetChanges">{{ $strings.ButtonReset }}</ui-btn>
+          <ui-btn v-else :loading="sendingTest" :disabled="savingSettings || !newSettings.host" type="button" @click="sendTestClick">{{ $strings.ButtonTest }}</ui-btn>
           <ui-btn :loading="savingSettings" :disabled="!hasUpdates" type="submit">{{ $strings.ButtonSave }}</ui-btn>
         </div>
       </form>
@@ -47,7 +51,7 @@
       </div>
     </app-settings-content>
 
-    <app-settings-content :header-text="$strings.HeaderEReaderDevices" showAddButton :description="''" @clicked="addNewDeviceClick">
+    <app-settings-content :header-text="$strings.HeaderEreaderDevices" showAddButton :description="''" @clicked="addNewDeviceClick">
       <table v-if="existingEReaderDevices.length" class="tracksTable my-4">
         <tr>
           <th class="text-left">{{ $strings.LabelName }}</th>
@@ -80,6 +84,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       loading: false,
@@ -93,6 +102,7 @@ export default {
         secure: true,
         user: null,
         pass: null,
+        testAddress: null,
         fromAddress: null
       },
       newEReaderDevice: {
@@ -117,6 +127,11 @@ export default {
     }
   },
   methods: {
+    resetChanges() {
+      this.newSettings = {
+        ...this.settings
+      }
+    },
     editDeviceClick(device) {
       this.selectedEReaderDevice = device
       this.showEReaderDeviceModal = true
@@ -139,7 +154,7 @@ export default {
       }
       this.deletingDeviceName = device.name
       this.$axios
-        .$patch(`/emails/ereader-devices`, payload)
+        .$post(`/api/emails/ereader-devices`, payload)
         .then((data) => {
           this.ereaderDevicesUpdated(data.ereaderDevices)
           this.$toast.success('Device deleted')
@@ -196,6 +211,7 @@ export default {
         secure: this.newSettings.secure,
         user: this.newSettings.user,
         pass: this.newSettings.pass,
+        testAddress: this.newSettings.testAddress,
         fromAddress: this.newSettings.fromAddress
       }
       this.savingSettings = true

client/pages/config/index.vue

@@ -36,7 +36,10 @@
             </ui-tooltip>
           </div>
           <div v-if="newServerSettings.sortingIgnorePrefix" class="w-72 ml-14 mb-2">
-            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" :label="$strings.LabelPrefixesToIgnore" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
+            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" :label="$strings.LabelPrefixesToIgnore" @input="sortingPrefixesUpdated" :disabled="savingPrefixes" />
+            <div class="flex justify-end py-1">
+              <ui-btn v-if="hasPrefixesChanged" color="success" :loading="savingPrefixes" small @click="updateSortingPrefixes">Save</ui-btn>
+            </div>
           </div>
 
           <div class="flex items-center py-2 mb-2">
@@ -157,16 +160,17 @@
           </div>
 
           <div class="flex items-center py-2">
-            <ui-toggle-switch labeledBy="settings-disable-watcher" v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" />
-            <ui-tooltip :text="$strings.LabelSettingsDisableWatcherHelp">
+            <ui-toggle-switch labeledBy="settings-disable-watcher" v-model="scannerEnableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', !val)" />
+            <ui-tooltip :text="$strings.LabelSettingsEnableWatcherHelp">
               <p class="pl-4">
-                <span id="settings-disable-watcher">{{ $strings.LabelSettingsDisableWatcher }}</span>
+                <span id="settings-disable-watcher">{{ $strings.LabelSettingsEnableWatcher }}</span>
                 <span class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
 
-          <div class="pt-4">
+          <!-- old experimental features -->
+          <!-- <div class="pt-4">
             <h2 class="font-semibold">{{ $strings.HeaderSettingsExperimental }}</h2>
           </div>
 
@@ -180,26 +184,6 @@
                 </a>
               </p>
             </ui-tooltip>
-          </div>
-
-          <div class="flex items-center py-2">
-            <ui-toggle-switch labeledBy="settings-enable-e-reader" v-model="newServerSettings.enableEReader" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('enableEReader', val)" />
-            <ui-tooltip :text="$strings.LabelSettingsEnableEReaderHelp">
-              <p class="pl-4">
-                <span id="settings-enable-e-reader">{{ $strings.LabelSettingsEnableEReader }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
-              </p>
-            </ui-tooltip>
-          </div>
-
-          <!-- <div class="flex items-center py-2">
-            <ui-toggle-switch v-model="newServerSettings.scannerUseTone" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerUseTone', val)" />
-            <ui-tooltip text="Tone library for metadata">
-              <p class="pl-4">
-                Use Tone library for metadata
-                <span class="material-icons icon-text">info_outlined</span>
-              </p>
-            </ui-tooltip>
           </div> -->
         </div>
       </div>
@@ -211,7 +195,6 @@
       <div class="flex-grow" />
       <ui-btn color="bg" small :padding-x="4" class="mr-2 text-xs md:text-sm" :loading="isPurgingCache" @click.stop="purgeCache">{{ $strings.ButtonPurgeAllCache }}</ui-btn>
       <ui-btn color="bg" small :padding-x="4" class="mr-2 text-xs md:text-sm" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
-      <ui-btn color="bg" small :padding-x="4" class="mr-2 text-xs md:text-sm" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
 
     <div class="flex items-center py-4">
@@ -268,15 +251,23 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       isResettingLibraryItems: false,
       updatingServerSettings: false,
       homepageUseBookshelfView: false,
       useBookshelfView: false,
+      scannerEnableWatcher: false,
       isPurgingCache: false,
+      hasPrefixesChanged: false,
       newServerSettings: {},
       showConfirmPurgeCache: false,
+      savingPrefixes: false,
       metadataFileFormats: [
         {
           text: '.json',
@@ -303,14 +294,6 @@ export default {
     providers() {
       return this.$store.state.scanners.providers
     },
-    showExperimentalFeatures: {
-      get() {
-        return this.$store.state.showExperimentalFeatures
-      },
-      set(val) {
-        this.$store.commit('setExperimentalFeatures', val)
-      }
-    },
     dateFormats() {
       return this.$store.state.globals.dateFormats
     },
@@ -327,15 +310,36 @@ export default {
     }
   },
   methods: {
-    updateSortingPrefixes(val) {
-      if (!val || !val.length) {
+    sortingPrefixesUpdated(val) {
+      const prefixes = [...new Set(val?.map((prefix) => prefix.trim().toLowerCase()) || [])]
+      this.newServerSettings.sortingPrefixes = prefixes
+      const serverPrefixes = this.serverSettings.sortingPrefixes || []
+      this.hasPrefixesChanged = prefixes.some((p) => !serverPrefixes.includes(p)) || serverPrefixes.some((p) => !prefixes.includes(p))
+    },
+    updateSortingPrefixes() {
+      const prefixes = [...new Set(this.newServerSettings.sortingPrefixes.map((prefix) => prefix.trim().toLowerCase()) || [])]
+      if (!prefixes.length) {
         this.$toast.error('Must have at least 1 prefix')
         return
       }
-      var prefixes = val.map((prefix) => prefix.trim().toLowerCase())
-      this.updateServerSettings({
-        sortingPrefixes: prefixes
-      })
+
+      this.savingPrefixes = true
+      this.$axios
+        .$patch(`/api/sorting-prefixes`, { sortingPrefixes: prefixes })
+        .then((data) => {
+          this.$toast.success(`Sorting prefixes updated. ${data.rowsUpdated} rows`)
+          if (data.serverSettings) {
+            this.$store.commit('setServerSettings', data.serverSettings)
+          }
+          this.hasPrefixesChanged = false
+        })
+        .catch((error) => {
+          console.error('Failed to update prefixes', error)
+          this.$toast.error('Failed to update sorting prefixes')
+        })
+        .finally(() => {
+          this.savingPrefixes = false
+        })
     },
     updateScannerCoverProvider(val) {
       this.updateServerSettings({
@@ -360,6 +364,9 @@ export default {
       this.updateSettingsKey('metadataFileFormat', val)
     },
     updateSettingsKey(key, val) {
+      if (key === 'scannerDisableWatcher') {
+        this.newServerSettings.scannerDisableWatcher = val
+      }
       this.updateServerSettings({
         [key]: val
       })
@@ -386,27 +393,11 @@ export default {
     initServerSettings() {
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
       this.newServerSettings.sortingPrefixes = [...(this.newServerSettings.sortingPrefixes || [])]
+      this.scannerEnableWatcher = !this.newServerSettings.scannerDisableWatcher
 
       this.homepageUseBookshelfView = this.newServerSettings.homeBookshelfView != this.$constants.BookshelfView.DETAIL
       this.useBookshelfView = this.newServerSettings.bookshelfView != this.$constants.BookshelfView.DETAIL
     },
-    resetLibraryItems() {
-      if (confirm(this.$strings.MessageRemoveAllItemsWarning)) {
-        this.isResettingLibraryItems = true
-        this.$axios
-          .$delete('/api/items/all')
-          .then(() => {
-            this.isResettingLibraryItems = false
-            this.$toast.success('Successfully reset items')
-            location.reload()
-          })
-          .catch((error) => {
-            console.error('failed to reset items', error)
-            this.isResettingLibraryItems = false
-            this.$toast.error('Failed to reset items - manually remove the /config/libraryItems folder')
-          })
-      }
-    },
     purgeCache() {
       this.showConfirmPurgeCache = true
     },

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

@@ -38,6 +38,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       loading: false,

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

@@ -19,6 +19,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {}
   },

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

@@ -38,6 +38,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       loading: false,

client/pages/config/libraries.vue

@@ -9,6 +9,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       showLibraryModal: false,

client/pages/config/library-stats.vue

@@ -22,7 +22,7 @@
             </div>
           </template>
         </div>
-        <div class="w-80 my-6 mx-auto">
+        <div v-if="isBookLibrary" class="w-80 my-6 mx-auto">
           <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsTop10Authors }}</h1>
           <p v-if="!top10Authors.length">{{ $strings.MessageNoAuthors }}</p>
           <template v-for="(author, index) in top10Authors">
@@ -87,6 +87,11 @@
 <script>
 export default {
   asyncData({ redirect, store }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
     if (!store.state.libraries.currentLibraryId) {
       return redirect('/config')
     }
@@ -109,43 +114,49 @@ export default {
       return this.$store.state.user.user
     },
     totalItems() {
-      return this.libraryStats ? this.libraryStats.totalItems : 0
+      return this.libraryStats?.totalItems || 0
     },
     genresWithCount() {
-      return this.libraryStats ? this.libraryStats.genresWithCount : []
+      return this.libraryStats?.genresWithCount || []
     },
     top5Genres() {
-      return this.genresWithCount.slice(0, 5)
+      return this.genresWithCount?.slice(0, 5) || []
     },
     top10LongestItems() {
-      return this.libraryStats ? this.libraryStats.longestItems || [] : []
+      return this.libraryStats?.longestItems || []
     },
     longestItemDuration() {
       if (!this.top10LongestItems.length) return 0
       return this.top10LongestItems[0].duration
     },
     top10LargestItems() {
-      return this.libraryStats ? this.libraryStats.largestItems || [] : []
+      return this.libraryStats?.largestItems || []
     },
     largestItemSize() {
       if (!this.top10LargestItems.length) return 0
       return this.top10LargestItems[0].size
     },
     authorsWithCount() {
-      return this.libraryStats ? this.libraryStats.authorsWithCount : []
+      return this.libraryStats?.authorsWithCount || []
     },
     mostUsedAuthorCount() {
       if (!this.authorsWithCount.length) return 0
       return this.authorsWithCount[0].count
     },
     top10Authors() {
-      return this.authorsWithCount.slice(0, 10)
+      return this.authorsWithCount?.slice(0, 10) || []
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
     currentLibraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
     }
   },
   methods: {

client/pages/config/log.vue

@@ -28,6 +28,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       search: null,

client/pages/config/notifications.vue

@@ -46,6 +46,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       loading: false,

client/pages/config/rss-feeds.vue

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <app-settings-content :header-text="$strings.HeaderRSSFeeds">
+      <div v-if="feeds.length" class="block max-w-full">
+        <table class="rssFeedsTable text-xs">
+          <tr class="bg-primary bg-opacity-40 h-12">
+            <th class="w-16 min-w-16"></th>
+            <th class="w-48 max-w-64 min-w-24 text-left truncate">{{ $strings.LabelTitle }}</th>
+            <th class="w-48 min-w-24 text-left hidden xl:table-cell">{{ $strings.LabelSlug }}</th>
+            <th class="w-24 min-w-16 text-left hidden md:table-cell">{{ $strings.LabelType }}</th>
+            <th class="w-16 min-w-16 text-center">{{ $strings.HeaderEpisodes }}</th>
+            <th class="w-16 min-w-16 text-center hidden lg:table-cell">{{ $strings.LabelRSSFeedPreventIndexing }}</th>
+            <th class="w-48 min-w-24 flex-grow hidden md:table-cell">{{ $strings.LabelLastUpdate }}</th>
+            <th class="w-16 text-left"></th>
+          </tr>
+
+          <tr v-for="feed in feeds" :key="feed.id" class="cursor-pointer h-12" @click="showFeed(feed)">
+            <!--  -->
+            <td>
+              <img :src="coverUrl(feed)" class="h-full w-full" />
+            </td>
+            <!--  -->
+            <td class="w-48 max-w-64 min-w-24 text-left truncate">
+              <p class="truncate">{{ feed.meta.title }}</p>
+            </td>
+            <!--  -->
+            <td class="hidden xl:table-cell">
+              <p class="truncate">{{ feed.slug }}</p>
+            </td>
+            <!--  -->
+            <td class="hidden md:table-cell">
+              <p class="">{{ getEntityType(feed.entityType) }}</p>
+            </td>
+            <!--  -->
+            <td class="text-center">
+              <p class="">{{ feed.episodes.length }}</p>
+            </td>
+            <!--  -->
+            <td class="text-center leading-none hidden lg:table-cell">
+              <p v-if="feed.meta.preventIndexing" class="">
+                <span class="material-icons text-2xl">check</span>
+              </p>
+            </td>
+            <!--  -->
+            <td class="text-center hidden md:table-cell">
+              <ui-tooltip v-if="feed.updatedAt" direction="top" :text="$formatDatetime(feed.updatedAt, dateFormat, timeFormat)">
+                <p class="text-gray-200">{{ $dateDistanceFromNow(feed.updatedAt) }}</p>
+              </ui-tooltip>
+            </td>
+            <!--  -->
+            <td class="text-center">
+              <ui-icon-btn icon="delete" class="mx-0.5" :size="7" bg-color="error" outlined @click.stop="deleteFeedClick(feed)" />
+            </td>
+          </tr>
+        </table>
+      </div>
+    </app-settings-content>
+    <modals-rssfeed-view-feed-modal v-model="showFeedModal" :feed="selectedFeed" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showFeedModal: false,
+      selectedFeed: null,
+      feeds: []
+    }
+  },
+  computed: {
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
+    }
+  },
+  methods: {
+    showFeed(feed) {
+      this.selectedFeed = feed
+      this.showFeedModal = true
+    },
+    deleteFeedClick(feed) {
+      const payload = {
+        message: this.$strings.MessageConfirmCloseFeed,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteFeed(feed)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteFeed(feed) {
+      this.processing = true
+      this.$axios
+        .$post(`/api/feeds/${feed.id}/close`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastRSSFeedCloseSuccess)
+          this.show = false
+          this.loadFeeds()
+        })
+        .catch((error) => {
+          console.error('Failed to close RSS feed', error)
+          this.$toast.error(this.$strings.ToastRSSFeedCloseFailed)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    getEntityType(entityType) {
+      if (entityType === 'libraryItem') return this.$strings.LabelItem
+      else if (entityType === 'series') return this.$strings.LabelSeries
+      else if (entityType === 'collection') return this.$strings.LabelCollection
+      return this.$strings.LabelUnknown
+    },
+    coverUrl(feed) {
+      if (!feed.coverPath) return `${this.$config.routerBasePath}/Logo.png`
+      return `${feed.feedUrl}/cover`
+    },
+    async loadFeeds() {
+      const data = await this.$axios.$get(`/api/feeds`).catch((err) => {
+        console.error('Failed to load RSS feeds', err)
+        return null
+      })
+      if (!data) {
+        this.$toast.error('Failed to load RSS feeds')
+        return
+      }
+      this.feeds = data.feeds
+    },
+    init() {
+      this.loadFeeds()
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+.rssFeedsTable {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #474747;
+}
+
+.rssFeedsTable tr:first-child {
+  background-color: #272727;
+}
+
+.rssFeedsTable tr:not(:first-child) {
+  background-color: #373838;
+}
+
+.rssFeedsTable tr:not(:first-child):nth-child(odd) {
+  background-color: #2f2f2f;
+}
+
+.rssFeedsTable tr:hover:not(:first-child) {
+  background-color: #474747;
+}
+
+.rssFeedsTable td {
+  padding: 4px 8px;
+}
+
+.rssFeedsTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>

client/pages/config/sessions.vue

@@ -104,7 +104,12 @@
 
 <script>
 export default {
-  async asyncData({ params, redirect, app }) {
+  async asyncData({ store, redirect, app }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
     const users = await app.$axios
       .$get('/api/users')
       .then((res) => {

client/pages/config/stats.vue

@@ -41,7 +41,7 @@
           <div class="flex mb-4 items-center">
             <h1 class="text-2xl">{{ $strings.HeaderStatsRecentSessions }}</h1>
             <div class="flex-grow" />
-            <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
+            <ui-btn v-if="isAdminOrUp" :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">{{ $strings.ButtonViewAll }}</ui-btn>
           </div>
           <p v-if="!mostRecentListeningSessions.length">{{ $strings.MessageNoListeningSessions }}</p>
           <template v-for="(item, index) in mostRecentListeningSessions">
@@ -82,6 +82,9 @@ export default {
     }
   },
   computed: {
+    isAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     user() {
       return this.$store.state.user.user
     },
@@ -116,7 +119,6 @@ export default {
         console.error('Failed to load listening sesions', err)
         return []
       })
-      console.log('Loaded user listening data', this.listeningStats)
     }
   },
   mounted() {

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

@@ -47,13 +47,7 @@
       <div class="py-2">
         <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">{{ $strings.HeaderSavedMediaProgress }}</h1>
 
-        <div v-if="mediaProgressWithoutMedia.length" class="flex items-center py-2 mb-2">
-          <p class="text-error">User has media progress for {{ mediaProgressWithoutMedia.length }} items that no longer exist.</p>
-          <div class="flex-grow" />
-          <ui-btn small :loading="purgingMediaProgress" @click.stop="purgeMediaProgress">{{ $strings.ButtonPurgeMediaProgress }}</ui-btn>
-        </div>
-
-        <table v-if="mediaProgressWithMedia.length" class="userAudiobooksTable">
+        <table v-if="mediaProgress.length" class="userAudiobooksTable">
           <tr class="bg-primary bg-opacity-40">
             <th class="w-16 text-left">{{ $strings.LabelItem }}</th>
             <th class="text-left"></th>
@@ -61,19 +55,14 @@
             <th class="w-40 hidden sm:table-cell">{{ $strings.LabelStartedAt }}</th>
             <th class="w-40 hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
           </tr>
-          <tr v-for="item in mediaProgressWithMedia" :key="item.id" :class="!item.isFinished ? '' : 'isFinished'">
+          <tr v-for="item in mediaProgress" :key="item.id" :class="!item.isFinished ? '' : 'isFinished'">
             <td>
-              <covers-book-cover :width="50" :library-item="item" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              <covers-preview-cover v-if="item.coverPath" :width="50" :src="$store.getters['globals/getLibraryItemCoverSrcById'](item.libraryItemId, item.mediaUpdatedAt)" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
+              <div v-else class="bg-primary flex items-center justify-center text-center text-xs text-gray-400 p-1" :style="{ width: '50px', height: 50 * bookCoverAspectRatio + 'px' }">No Cover</div>
             </td>
             <td>
-              <template v-if="item.media && item.media.metadata && item.episode">
-                <p>{{ item.episode.title || 'Unknown' }}</p>
-                <p class="text-white text-opacity-50 text-sm font-sans">{{ item.media.metadata.title }}</p>
-              </template>
-              <template v-else-if="item.media && item.media.metadata">
-                <p>{{ item.media.metadata.title || 'Unknown' }}</p>
-                <p v-if="item.media.metadata.authorName" class="text-white text-opacity-50 text-sm font-sans">by {{ item.media.metadata.authorName }}</p>
-              </template>
+              <p>{{ item.displayTitle || 'Unknown' }}</p>
+              <p v-if="item.displaySubtitle" class="text-white text-opacity-50 text-sm font-sans">{{ item.displaySubtitle }}</p>
             </td>
             <td class="text-center">
               <p class="text-sm">{{ Math.floor(item.progress * 100) }}%</p>
@@ -111,8 +100,7 @@ export default {
   data() {
     return {
       listeningSessions: {},
-      listeningStats: {},
-      purgingMediaProgress: false
+      listeningStats: {}
     }
   },
   computed: {
@@ -131,12 +119,6 @@ export default {
     mediaProgress() {
       return this.user.mediaProgress.sort((a, b) => b.lastUpdate - a.lastUpdate)
     },
-    mediaProgressWithMedia() {
-      return this.mediaProgress.filter((mp) => mp.media)
-    },
-    mediaProgressWithoutMedia() {
-      return this.mediaProgress.filter((mp) => !mp.media)
-    },
     totalListeningTime() {
       return this.listeningStats.totalTime || 0
     },
@@ -176,24 +158,6 @@ export default {
         return []
       })
       console.log('Loaded user listening data', this.listeningSessions, this.listeningStats)
-    },
-    purgeMediaProgress() {
-      this.purgingMediaProgress = true
-
-      this.$axios
-        .$post(`/api/users/${this.user.id}/purge-media-progress`)
-        .then((updatedUser) => {
-          console.log('Updated user', updatedUser)
-          this.$toast.success('Media progress purged')
-          this.user = updatedUser
-        })
-        .catch((error) => {
-          console.error('Failed to purge media progress', error)
-          this.$toast.error('Failed to purge media progress')
-        })
-        .finally(() => {
-          this.purgingMediaProgress = false
-        })
     }
   },
   mounted() {

client/pages/config/users/index.vue

@@ -9,6 +9,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       selectedAccount: null,

client/pages/item/_id/index.vue

@@ -52,13 +52,6 @@
             <div class="hidden md:block flex-grow" />
           </div>
 
-          <!-- Alerts -->
-          <div v-show="showExperimentalReadAlert" class="bg-error p-4 rounded-xl flex items-center">
-            <span class="material-icons text-2xl">warning_amber</span>
-            <p v-if="userIsAdminOrUp" class="ml-4">Book has no audio tracks but has an ebook. The experimental e-reader can be enabled in config.</p>
-            <p v-else class="ml-4">Book has no audio tracks but has an ebook. The experimental e-reader must be enabled by a server admin.</p>
-          </div>
-
           <!-- Podcast episode downloads queue -->
           <div v-if="episodeDownloadsQueued.length" class="px-4 py-2 mt-4 bg-info bg-opacity-40 text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0">
             <div class="flex items-center">
@@ -122,7 +115,7 @@
               <ui-icon-btn icon="search" class="mx-0.5" :loading="fetchingRSSFeed" outlined @click="findEpisodesClick" />
             </ui-tooltip>
 
-            <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" menu-width="148px" @action="contextMenuAction">
+            <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="148" @action="contextMenuAction">
               <template #default="{ showMenu, clickShowMenu, disabled }">
                 <button type="button" :disabled="disabled" class="mx-0.5 icon-btn bg-primary border border-gray-600 w-9 h-9 rounded-md flex items-center justify-center relative" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
                   <span class="material-icons">more_horiz</span>
@@ -147,7 +140,9 @@
 
           <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" class="mt-6" />
 
-          <tables-library-files-table v-if="libraryFiles.length" :is-missing="isMissing" :library-item="libraryItem" class="mt-6" />
+          <tables-ebook-files-table v-if="ebookFiles.length" :library-item="libraryItem" class="mt-6" />
+
+          <tables-library-files-table v-if="libraryFiles.length" :library-item="libraryItem" class="mt-6" />
         </div>
       </div>
     </div>
@@ -165,7 +160,7 @@ export default {
     }
 
     // Include episode downloads for podcasts
-    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=authors,downloads,rssfeed`).catch((error) => {
+    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -200,12 +195,6 @@ export default {
     dateFormat() {
       return this.$store.state.serverSettings.dateFormat
     },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
-    enableEReader() {
-      return this.$store.getters['getServerSetting']('enableEReader')
-    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
@@ -257,7 +246,7 @@ export default {
       return this.tracks.length
     },
     showReadButton() {
-      return this.ebookFile && (this.showExperimentalFeatures || this.enableEReader)
+      return this.ebookFile
     },
     libraryId() {
       return this.libraryItem.libraryId
@@ -320,6 +309,9 @@ export default {
     libraryFiles() {
       return this.libraryItem.libraryFiles || []
     },
+    ebookFiles() {
+      return this.libraryFiles.filter((lf) => lf.fileType === 'ebook')
+    },
     ebookFile() {
       return this.media.ebookFile
     },
@@ -330,9 +322,6 @@ export default {
       // Music track
       return this.media.audioFile
     },
-    showExperimentalReadAlert() {
-      return !this.tracks.length && this.ebookFile && !this.showExperimentalFeatures && !this.enableEReader
-    },
     description() {
       return this.mediaMetadata.description || ''
     },
@@ -519,7 +508,7 @@ export default {
       this.$store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'cover' })
     },
     openEbook() {
-      this.$store.commit('showEReader', this.libraryItem)
+      this.$store.commit('showEReader', { libraryItem: this.libraryItem, keepProgress: true })
     },
     toggleFinished(confirmed = false) {
       if (!this.userIsFinished && this.progressPercent > 0 && !confirmed) {
@@ -544,7 +533,6 @@ export default {
         .$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
@@ -773,6 +761,7 @@ export default {
     if (this.libraryId) {
       this.$store.commit('libraries/setCurrentLibrary', this.libraryId)
     }
+    this.$eventBus.$on(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
     this.$root.socket.on('item_updated', this.libraryItemUpdated)
     this.$root.socket.on('rss_feed_open', this.rssFeedOpen)
     this.$root.socket.on('rss_feed_closed', this.rssFeedClosed)
@@ -781,6 +770,7 @@ export default {
     this.$root.socket.on('episode_download_finished', this.episodeDownloadFinished)
   },
   beforeDestroy() {
+    this.$eventBus.$off(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
     this.$root.socket.off('item_updated', this.libraryItemUpdated)
     this.$root.socket.off('rss_feed_open', this.rssFeedOpen)
     this.$root.socket.off('rss_feed_closed', this.rssFeedClosed)

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

@@ -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 :explicit="podcast.explicit" />
-                <widgets-already-in-library-indicator :already-in-library="podcast.alreadyInLibrary"/>
+                <widgets-already-in-library-indicator :already-in-library="podcast.alreadyInLibrary" />
               </div>
               <p class="text-sm md:text-base text-gray-300 whitespace-nowrap truncate">by {{ podcast.artistName }}</p>
               <p class="text-xs text-gray-400 leading-5">{{ podcast.genres.join(', ') }}</p>
@@ -146,11 +146,15 @@ export default {
     async submitSearch(term) {
       this.processing = true
       this.termSearched = ''
-      var results = await this.$axios.$get(`/api/search/podcast?term=${encodeURIComponent(term)}`).catch((error) => {
+      let results = await this.$axios.$get(`/api/search/podcast?term=${encodeURIComponent(term)}`).catch((error) => {
         console.error('Search request failed', error)
         return []
       })
       console.log('Got results', results)
+
+      // Filter out podcasts without an RSS feed
+      results = results.filter((r) => r.feedUrl)
+
       for (let result of results) {
         let podcast = this.existentPodcasts.find((p) => p.itunesId === result.id || p.title === result.title.toLowerCase())
         if (podcast) {
@@ -164,7 +168,7 @@ export default {
     },
     async selectPodcast(podcast) {
       console.log('Selected podcast', podcast)
-      if(podcast.existentId){
+      if (podcast.existentId) {
         this.$router.push(`/item/${podcast.existentId}`)
         return
       }
@@ -173,7 +177,7 @@ export default {
         return
       }
       this.processing = true
-      var payload = await this.$axios.$post(`/api/podcasts/feed`, {rssFeed: podcast.feedUrl}).catch((error) => {
+      const payload = await this.$axios.$post(`/api/podcasts/feed`, { rssFeed: podcast.feedUrl }).catch((error) => {
         console.error('Failed to get feed', error)
         this.$toast.error('Failed to get podcast feed')
         return null

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

@@ -19,7 +19,7 @@ export default {
       return redirect(`/library/${libraryId}`)
     }
 
-    const series = await app.$axios.$get(`/api/series/${params.id}?include=progress,rssfeed`).catch((error) => {
+    const series = await app.$axios.$get(`/api/libraries/${library.id}/series/${params.id}?include=progress,rssfeed`).catch((error) => {
       console.error('Failed', error)
       return false
     })

client/pages/login.vue

@@ -74,9 +74,17 @@ export default {
           } else {
             this.$router.replace('/oops?message=No libraries available')
           }
-        } else if (this.$route.query.redirect) {
-          this.$router.replace(this.$route.query.redirect)
         } else {
+          if (this.$route.query.redirect) {
+            const isAdminUser = this.$store.getters['user/getIsAdminOrUp']
+            const redirect = this.$route.query.redirect
+            // If not admin user then do not redirect to config pages other than your stats
+            if (isAdminUser || !redirect.startsWith('/config/') || redirect === '/config/stats') {
+              this.$router.replace(redirect)
+              return
+            }
+          }
+
           this.$router.replace(`/library/${this.$store.state.libraries.currentLibraryId}`)
         }
       }
@@ -144,17 +152,17 @@ export default {
       this.error = null
       this.processing = true
 
-      var payload = {
+      const payload = {
         username: this.username,
         password: this.password || ''
       }
-      var authRes = await this.$axios.$post('/login', payload).catch((error) => {
+      const authRes = await this.$axios.$post('/login', payload).catch((error) => {
         console.error('Failed', error.response)
         if (error.response) this.error = error.response.data
         else this.error = 'Unknown Error'
         return false
       })
-      if (authRes && authRes.error) {
+      if (authRes?.error) {
         this.error = authRes.error
       } else if (authRes) {
         this.setUser(authRes)
@@ -162,7 +170,7 @@ export default {
       this.processing = false
     },
     checkAuth() {
-      var token = localStorage.getItem('token')
+      const token = localStorage.getItem('token')
       if (!token) return false
 
       this.processing = true

client/players/PlayerHandler.js

@@ -191,6 +191,7 @@ export default class PlayerHandler {
 
     const payload = {
       deviceInfo: {
+        clientName: 'Abs Web',
         deviceId: this.getDeviceId()
       },
       supportedMimeTypes: this.player.playableMimeTypes,
@@ -281,6 +282,10 @@ export default class PlayerHandler {
     }
   }
 
+  /**
+   * First sync happens after 20 seconds
+   * subsequent syncs happen every 10 seconds
+   */
   startPlayInterval() {
     clearInterval(this.playInterval)
     let lastTick = Date.now()
@@ -293,7 +298,7 @@ export default class PlayerHandler {
       const exactTimeElapsed = ((Date.now() - lastTick) / 1000)
       lastTick = Date.now()
       this.listeningTimeSinceSync += exactTimeElapsed
-      const TimeToWaitBeforeSync = this.lastSyncTime > 0 ? 5 : 20
+      const TimeToWaitBeforeSync = this.lastSyncTime > 0 ? 10 : 20
       if (this.listeningTimeSinceSync >= TimeToWaitBeforeSync) {
         this.sendProgressSync(currentTime)
       }
@@ -315,7 +320,7 @@ export default class PlayerHandler {
     }
     this.listeningTimeSinceSync = 0
     this.lastSyncTime = 0
-    return this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/close`, syncData, { timeout: 1000 }).catch((error) => {
+    return this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/close`, syncData, { timeout: 6000 }).catch((error) => {
       console.error('Failed to close session', error)
     })
   }
@@ -335,12 +340,13 @@ export default class PlayerHandler {
     }
 
     this.listeningTimeSinceSync = 0
-    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 3000 }).then(() => {
+    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 9000 }).then(() => {
       this.failedProgressSyncs = 0
     }).catch((error) => {
       console.error('Failed to update session progress', error)
+      // After 4 failed sync attempts show an alert toast
       this.failedProgressSyncs++
-      if (this.failedProgressSyncs >= 2) {
+      if (this.failedProgressSyncs >= 4) {
         this.ctx.showFailedProgressSyncs()
         this.failedProgressSyncs = 0
       }

client/plugins/axios.js

@@ -11,6 +11,11 @@ export default function ({ $axios, store, $config }) {
     if (bearerToken) {
       config.headers.common['Authorization'] = `Bearer ${bearerToken}`
     }
+
+    if (process.env.NODE_ENV === 'development') {
+      config.url = `/dev${config.url}`
+      console.log('Making request to ' + config.url)
+    }
   })
 
   $axios.onError(error => {

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'],
+  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'oga', 'mp4', 'aac', 'wma', 'aiff', 'wav', 'webm', 'webma', 'mka', 'awb', 'caf'],
   ebook: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
   info: ['nfo'],
   text: ['txt'],

client/plugins/i18n.js

@@ -11,6 +11,7 @@ const languageCodeMap = {
   'fr': { label: 'Français', dateFnsLocale: 'fr' },
   'hr': { label: 'Hrvatski', dateFnsLocale: 'hr' },
   'it': { label: 'Italiano', dateFnsLocale: 'it' },
+  'lt': { label: 'Lietuvių', dateFnsLocale: 'lt' },
   'nl': { label: 'Nederlands', dateFnsLocale: 'nl' },
   'pl': { label: 'Polski', dateFnsLocale: 'pl' },
   'ru': { label: 'Русский', dateFnsLocale: 'ru' },
@@ -34,7 +35,7 @@ Vue.prototype.$strings = { ...enUsStrings }
 
 Vue.prototype.$getString = (key, subs) => {
   if (!Vue.prototype.$strings[key]) return ''
-  if (subs && Array.isArray(subs) && subs.length) {
+  if (subs?.length && Array.isArray(subs)) {
     return supplant(Vue.prototype.$strings[key], subs)
   }
   return Vue.prototype.$strings[key]

client/plugins/init.client.js

@@ -24,20 +24,20 @@ Vue.prototype.$formatJsDate = (jsdate, fnsFormat = 'MM/dd/yyyy HH:mm') => {
   return format(jsdate, fnsFormat)
 }
 Vue.prototype.$formatTime = (unixms, fnsFormat = 'HH:mm') => {
-    if (!unixms) return ''
-    return format(unixms, fnsFormat)
+  if (!unixms) return ''
+  return format(unixms, fnsFormat)
 }
 Vue.prototype.$formatJsTime = (jsdate, fnsFormat = 'HH:mm') => {
-    if (!jsdate || !isDate(jsdate)) return ''
-    return format(jsdate, fnsFormat)
+  if (!jsdate || !isDate(jsdate)) return ''
+  return format(jsdate, fnsFormat)
 }
 Vue.prototype.$formatDatetime = (unixms, fnsDateFormart = 'MM/dd/yyyy', fnsTimeFormat = 'HH:mm') => {
-    if (!unixms) return ''
-    return format(unixms, `${fnsDateFormart} ${fnsTimeFormat}`)
+  if (!unixms) return ''
+  return format(unixms, `${fnsDateFormart} ${fnsTimeFormat}`)
 }
 Vue.prototype.$formatJsDatetime = (jsdate, fnsDateFormart = 'MM/dd/yyyy', fnsTimeFormat = 'HH:mm') => {
-    if (!jsdate || !isDate(jsdate)) return ''
-    return format(jsdate, `${fnsDateFormart} ${fnsTimeFormat}`)
+  if (!jsdate || !isDate(jsdate)) return ''
+  return format(jsdate, `${fnsDateFormart} ${fnsTimeFormat}`)
 }
 Vue.prototype.$addDaysToToday = (daysToAdd) => {
   var date = addDays(new Date(), daysToAdd)
@@ -132,8 +132,10 @@ Vue.prototype.$copyToClipboard = (str, ctx) => {
     if (navigator.clipboard) {
       navigator.clipboard.writeText(str).then(() => {
         if (ctx) ctx.$toast.success('Copied to clipboard')
+        resolve(true)
       }, (err) => {
         console.error('Clipboard copy failed', str, err)
+        resolve(false)
       })
     } else {
       const el = document.createElement('textarea')
@@ -147,6 +149,7 @@ Vue.prototype.$copyToClipboard = (str, ctx) => {
       document.body.removeChild(el)
 
       if (ctx) ctx.$toast.success('Copied to clipboard')
+      resolve(true)
     }
   })
 }

client/store/globals.js

@@ -83,8 +83,8 @@ export const getters = {
   getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null) => {
     if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
     if (!libraryItem) return placeholder
-    var media = libraryItem.media
-    if (!media || !media.coverPath || media.coverPath === placeholder) return placeholder
+    const media = libraryItem.media
+    if (!media?.coverPath || media.coverPath === placeholder) return placeholder
 
     // Absolute URL covers (should no longer be used)
     if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath
@@ -99,14 +99,14 @@ export const getters = {
 
     return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
   },
-  getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, placeholder = null, raw = false) => {
-    if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
+  getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, timestamp = null, raw = false) => {
+    const placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
     if (!libraryItemId) return placeholder
-    var userToken = rootGetters['user/getToken']
+    const userToken = rootGetters['user/getToken']
     if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}`
+      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
     }
-    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}`
+    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
   },
   getIsBatchSelectingMediaItems: (state) => {
     return state.selectedMediaItems.length

client/store/index.js

@@ -17,11 +17,12 @@ export const state = () => ({
   editPodcastModalTab: 'details',
   showEditModal: false,
   showEReader: false,
+  ereaderKeepProgress: false,
+  ereaderFileId: null,
   selectedLibraryItem: null,
   developerMode: false,
   processingBatch: false,
   previousPath: '/',
-  showExperimentalFeatures: false,
   bookshelfBookIds: [],
   episodeTableEpisodeIds: [],
   openModal: null,
@@ -210,8 +211,10 @@ export const mutations = {
   setEditPodcastModalTab(state, tab) {
     state.editPodcastModalTab = tab
   },
-  showEReader(state, libraryItem) {
+  showEReader(state, { libraryItem, keepProgress, fileId }) {
     state.selectedLibraryItem = libraryItem
+    state.ereaderKeepProgress = keepProgress
+    state.ereaderFileId = fileId
 
     state.showEReader = true
   },
@@ -227,10 +230,6 @@ export const mutations = {
   setProcessingBatch(state, val) {
     state.processingBatch = val
   },
-  setExperimentalFeatures(state, val) {
-    state.showExperimentalFeatures = val
-    localStorage.setItem('experimental', val ? 1 : 0)
-  },
   setOpenModal(state, val) {
     state.openModal = val
   },

client/store/libraries.js

@@ -57,6 +57,9 @@ export const getters = {
     if (!getters.getCurrentLibrarySettings || isNaN(getters.getCurrentLibrarySettings.coverAspectRatio)) return 1
     return getters.getCurrentLibrarySettings.coverAspectRatio === Constants.BookCoverAspectRatio.STANDARD ? 1.6 : 1
   },
+  getLibraryIsAudiobooksOnly: (state, getters) => {
+    return !!getters.getCurrentLibrarySettings?.audiobooksOnly
+  },
   getCollection: state => id => {
     return state.collections.find(c => c.id === id)
   },
@@ -231,25 +234,31 @@ export const mutations = {
   setNumUserPlaylists(state, numUserPlaylists) {
     state.numUserPlaylists = numUserPlaylists
   },
+  removeSeriesFromFilterData(state, seriesId) {
+    if (!seriesId || !state.filterData) return
+    state.filterData.series = state.filterData.series.filter(se => se.id !== seriesId)
+  },
   updateFilterDataWithItem(state, libraryItem) {
     if (!libraryItem || !state.filterData) return
     if (state.currentLibraryId !== libraryItem.libraryId) return
     /*
-    var data = {
+    structure of filterData:
+    {
       authors: [],
       genres: [],
       tags: [],
       series: [],
       narrators: [],
-      languages: []
+      languages: [],
+      publishers: []
     }
     */
-    var mediaMetadata = libraryItem.media.metadata
+    const mediaMetadata = libraryItem.media.metadata
 
     // Add/update book authors
-    if (mediaMetadata.authors && mediaMetadata.authors.length) {
+    if (mediaMetadata.authors?.length) {
       mediaMetadata.authors.forEach((author) => {
-        var indexOf = state.filterData.authors.findIndex(au => au.id === author.id)
+        const indexOf = state.filterData.authors.findIndex(au => au.id === author.id)
         if (indexOf >= 0) {
           state.filterData.authors.splice(indexOf, 1, author)
         } else {
@@ -260,9 +269,9 @@ export const mutations = {
     }
 
     // Add/update series
-    if (mediaMetadata.series && mediaMetadata.series.length) {
+    if (mediaMetadata.series?.length) {
       mediaMetadata.series.forEach((series) => {
-        var indexOf = state.filterData.series.findIndex(se => se.id === series.id)
+        const indexOf = state.filterData.series.findIndex(se => se.id === series.id)
         if (indexOf >= 0) {
           state.filterData.series.splice(indexOf, 1, { id: series.id, name: series.name })
         } else {
@@ -273,7 +282,7 @@ export const mutations = {
     }
 
     // Add genres
-    if (mediaMetadata.genres && mediaMetadata.genres.length) {
+    if (mediaMetadata.genres?.length) {
       mediaMetadata.genres.forEach((genre) => {
         if (!state.filterData.genres.includes(genre)) {
           state.filterData.genres.push(genre)
@@ -283,7 +292,7 @@ export const mutations = {
     }
 
     // Add tags
-    if (libraryItem.media.tags && libraryItem.media.tags.length) {
+    if (libraryItem.media.tags?.length) {
       libraryItem.media.tags.forEach((tag) => {
         if (!state.filterData.tags.includes(tag)) {
           state.filterData.tags.push(tag)
@@ -293,7 +302,7 @@ export const mutations = {
     }
 
     // Add narrators
-    if (mediaMetadata.narrators && mediaMetadata.narrators.length) {
+    if (mediaMetadata.narrators?.length) {
       mediaMetadata.narrators.forEach((narrator) => {
         if (!state.filterData.narrators.includes(narrator)) {
           state.filterData.narrators.push(narrator)
@@ -302,12 +311,16 @@ export const mutations = {
       })
     }
 
+    // Add publishers
+    if (mediaMetadata.publisher && !state.filterData.publishers.includes(mediaMetadata.publisher)) {
+      state.filterData.publishers.push(mediaMetadata.publisher)
+      state.filterData.publishers.sort((a, b) => a.localeCompare(b))
+    }
+
     // Add language
-    if (mediaMetadata.language) {
-      if (!state.filterData.languages.includes(mediaMetadata.language)) {
-        state.filterData.languages.push(mediaMetadata.language)
-        state.filterData.languages.sort((a, b) => a.localeCompare(b))
-      }
+    if (mediaMetadata.language && !state.filterData.languages.includes(mediaMetadata.language)) {
+      state.filterData.languages.push(mediaMetadata.language)
+      state.filterData.languages.sort((a, b) => a.localeCompare(b))
     }
   },
   setCollections(state, collections) {

client/store/user.js

@@ -33,22 +33,22 @@ export const getters = {
     return state.user.bookmarks.filter(bm => bm.libraryItemId === libraryItemId)
   },
   getUserSetting: (state) => (key) => {
-    return state.settings ? state.settings[key] : null
+    return state.settings?.[key] || null
   },
   getUserCanUpdate: (state) => {
-    return state.user && state.user.permissions ? !!state.user.permissions.update : false
+    return !!state.user?.permissions?.update
   },
   getUserCanDelete: (state) => {
-    return state.user && state.user.permissions ? !!state.user.permissions.delete : false
+    return !!state.user?.permissions?.delete
   },
   getUserCanDownload: (state) => {
-    return state.user && state.user.permissions ? !!state.user.permissions.download : false
+    return !!state.user?.permissions?.download
   },
   getUserCanUpload: (state) => {
-    return state.user && state.user.permissions ? !!state.user.permissions.upload : false
+    return !!state.user?.permissions?.upload
   },
   getUserCanAccessAllLibraries: (state) => {
-    return state.user && state.user.permissions ? !!state.user.permissions.accessAllLibraries : false
+    return !!state.user?.permissions?.accessAllLibraries
   },
   getLibrariesAccessible: (state, getters) => {
     if (!state.user) return []
@@ -80,7 +80,7 @@ export const actions = {
       if (state.settings.orderBy == 'media.metadata.publishedYear') {
         settingsUpdate.orderBy = 'media.metadata.title'
       }
-      const invalidFilters = ['series', 'authors', 'narrators', 'languages', 'progress', 'issues']
+      const invalidFilters = ['series', 'authors', 'narrators', 'publishers', 'languages', 'progress', 'issues', 'ebooks', 'abridged']
       const filterByFirstPart = (state.settings.filterBy || '').split('.').shift()
       if (invalidFilters.includes(filterByFirstPart)) {
         settingsUpdate.filterBy = 'all'

client/strings/de.json

@@ -3,7 +3,7 @@
   "ButtonAddChapters": "Kapitel hinzufügen",
   "ButtonAddPodcasts": "Podcasts hinzufügen",
   "ButtonAddYourFirstLibrary": "Erstelle deine erste Bibliothek",
-  "ButtonApply": "Anwenden",
+  "ButtonApply": "Übernehmen",
   "ButtonApplyChapters": "Kapitel anwenden",
   "ButtonAuthors": "Autoren",
   "ButtonBrowseForFolder": "Ordnersuche",
@@ -37,7 +37,7 @@
   "ButtonMapChapterTitles": "Kapitelüberschriften zuordnen",
   "ButtonMatchAllAuthors": "Online Metadaten-Abgleich (alle Autoren)",
   "ButtonMatchBooks": "Online Metadaten-Abgleich (alle Medien)",
-  "ButtonNevermind": "Vergiss es",
+  "ButtonNevermind": "Abbrechen",
   "ButtonOk": "Ok",
   "ButtonOpenFeed": "Feed öffnen",
   "ButtonOpenManager": "Manager öffnen",
@@ -98,10 +98,12 @@
   "HeaderCurrentDownloads": "Aktuelle Downloads",
   "HeaderDetails": "Details",
   "HeaderDownloadQueue": "Download Warteschlange",
+  "HeaderEbookFiles": "E-Book Dateien",
   "HeaderEmail": "Email",
-  "HeaderEmailSettings": "Email Settings",
+  "HeaderEmailSettings": "Email Einstellungen",
   "HeaderEpisodes": "Episoden",
-  "HeaderEReaderDevices": "E-Reader Devices",
+  "HeaderEreaderDevices": "Ereader Geräte",
+  "HeaderEreaderSettings": "Ereader Einstellungen",
   "HeaderFiles": "Dateien",
   "HeaderFindChapters": "Kapitel suchen",
   "HeaderIgnoredFiles": "Ignorierte Dateien",
@@ -136,6 +138,7 @@
   "HeaderRemoveEpisodes": "Lösche {0} Episoden",
   "HeaderRSSFeedGeneral": "RSS Details",
   "HeaderRSSFeedIsOpen": "RSS-Feed ist geöffnet",
+  "HeaderRSSFeeds": "RSS Feeds",
   "HeaderSavedMediaProgress": "Gespeicherte Hörfortschritte",
   "HeaderSchedule": "Zeitplan",
   "HeaderScheduleLibraryScans": "Automatische Bibliotheksscans",
@@ -153,6 +156,7 @@
   "HeaderStatsRecentSessions": "Neueste Ereignisse",
   "HeaderStatsTop10Authors": "Top 10 Autoren",
   "HeaderStatsTop5Genres": "Top 5 Kategorien",
+  "HeaderTableOfContents": "Inhaltsverzeichnis",
   "HeaderTools": "Werkzeuge",
   "HeaderUpdateAccount": "Konto aktualisieren",
   "HeaderUpdateAuthor": "Autor aktualisieren",
@@ -192,17 +196,18 @@
   "LabelBooks": "Bücher",
   "LabelChangePassword": "Passwort ändern",
   "LabelChannels": "Kanäle",
-  "LabelChapters": "Chapters",
+  "LabelChapters": "Kapitel",
   "LabelChaptersFound": "gefundene Kapitel",
   "LabelChapterTitle": "Kapitelüberschrift",
   "LabelClosePlayer": "Player schließen",
   "LabelCodec": "Codec",
   "LabelCollapseSeries": "Serien zusammenfassen",
+  "LabelCollection": "Sammlung",
   "LabelCollections": "Sammlungen",
   "LabelComplete": "Vollständig",
   "LabelConfirmPassword": "Passwort bestätigen",
   "LabelContinueListening": "Weiterhören",
-  "LabelContinueReading": "Continue Reading",
+  "LabelContinueReading": "Lesen fortsetzen",
   "LabelContinueSeries": "Serien fortsetzen",
   "LabelCover": "Titelbild",
   "LabelCoverImageURL": "URL des Titelbildes",
@@ -219,15 +224,19 @@
   "LabelDirectory": "Verzeichnis",
   "LabelDiscFromFilename": "CD aus dem Dateinamen",
   "LabelDiscFromMetadata": "CD aus den Metadaten",
+  "LabelDiscover": "Entdecken",
   "LabelDownload": "Herunterladen",
+  "LabelDownloadNEpisodes": "Download {0} episodes",
   "LabelDuration": "Laufzeit",
   "LabelDurationFound": "Gefundene Laufzeit:",
-  "LabelEbook": "Ebook",
+  "LabelEbook": "E-Book",
+  "LabelEbooks": "E-Books",
   "LabelEdit": "Bearbeiten",
   "LabelEmail": "Email",
-  "LabelEmailSettingsFromAddress": "From Address",
-  "LabelEmailSettingsSecure": "Secure",
-  "LabelEmailSettingsSecureHelp": "If true the connection will use TLS when connecting to server. If false then TLS is used if server supports the STARTTLS extension. In most cases set this value to true if you are connecting to port 465. For port 587 or 25 keep it false. (from nodemailer.com/smtp/#authentication)",
+  "LabelEmailSettingsFromAddress": "Von Address",
+  "LabelEmailSettingsSecure": "Sicherheit",
+  "LabelEmailSettingsSecureHelp": "Wenn \"true\", verwendet die Verbindung TLS, wenn sie eine Verbindung zum Server herstellt. Bei \"false\" wird TLS verwendet, wenn der Server die STARTTLS-Erweiterung unterstützt. In den meisten Fällen setzen Sie diesen Wert auf \"true\", wenn Sie eine Verbindung zu Port 465 herstellen. Für Port 587 oder 25 behalten Sie den Wert \"false\" bei. (von nodemailer.com/smtp/#authentication)",
+  "LabelEmailSettingsTestAddress": "Test Addresse",
   "LabelEmbeddedCover": "Eingebettetes Cover",
   "LabelEnable": "Aktivieren",
   "LabelEnd": "Ende",
@@ -238,7 +247,7 @@
   "LabelExplicit": "Explizit (Altersbeschränkung)",
   "LabelFeedURL": "Feed URL",
   "LabelFile": "Datei",
-  "LabelFileBirthtime": "Datei Geburtsdatum",
+  "LabelFileBirthtime": "Datei erstellt",
   "LabelFileModified": "Datei geändert",
   "LabelFilename": "Dateiname",
   "LabelFilterByUser": "Nach Benutzern filtern",
@@ -246,10 +255,13 @@
   "LabelFinished": "beendet",
   "LabelFolder": "Ordner",
   "LabelFolders": "Verzeichnisse",
+  "LabelFontScale": "Schriftgröße",
   "LabelFormat": "Format",
   "LabelGenre": "Kategorie",
   "LabelGenres": "Kategorien",
   "LabelHardDeleteFile": "Datei dauerhaft löschen",
+  "LabelHasEbook": "mit E-Book",
+  "LabelHasSupplementaryEbook": "mit zusätlichem E-Book",
   "LabelHost": "Host",
   "LabelHour": "Stunde",
   "LabelIcon": "Symbol",
@@ -266,7 +278,7 @@
   "LabelIntervalEveryDay": "Jeden Tag",
   "LabelIntervalEveryHour": "Jede Stunde",
   "LabelInvalidParts": "Ungültige Teile",
-  "LabelInvert": "Invert",
+  "LabelInvert": "Umkehren",
   "LabelItem": "Medium",
   "LabelLanguage": "Sprache",
   "LabelLanguageDefaultServer": "Standard-Server-Sprache",
@@ -275,12 +287,16 @@
   "LabelLastSeen": "Zuletzt angesehen",
   "LabelLastTime": "Letztes Mal",
   "LabelLastUpdate": "Letzte Aktualisierung",
+  "LabelLayout": "Layout",
+  "LabelLayoutSinglePage": "Eine Seite",
+  "LabelLayoutSplitPage": "Geteilte Seite",
   "LabelLess": "Weniger",
   "LabelLibrariesAccessibleToUser": "Für Benutzer zugängliche Bibliotheken",
   "LabelLibrary": "Bibliothek",
   "LabelLibraryItem": "Bibliothekseintrag",
   "LabelLibraryName": "Bibliotheksname",
   "LabelLimit": "Begrenzung",
+  "LabelLineSpacing": "Zeilenabstand",
   "LabelListenAgain": "Erneut anhören",
   "LabelLogLevelDebug": "Fehlersuche",
   "LabelLogLevelInfo": "Informationen",
@@ -295,7 +311,7 @@
   "LabelMissing": "Fehlend",
   "LabelMissingParts": "Fehlende Teile",
   "LabelMore": "Mehr",
-  "LabelMoreInfo": "More Info",
+  "LabelMoreInfo": "Mehr Info",
   "LabelName": "Name",
   "LabelNarrator": "Erzähler",
   "LabelNarrators": "Erzähler",
@@ -305,6 +321,7 @@
   "LabelNewPassword": "Neues Passwort",
   "LabelNextBackupDate": "Nächstes Sicherungsdatum",
   "LabelNextScheduledRun": "Nächster planmäßiger Durchlauf",
+  "LabelNoEpisodesSelected": "Keine Episoden ausgewählt",
   "LabelNotes": "Hinweise",
   "LabelNotFinished": "nicht beendet",
   "LabelNotificationAppriseURL": "Apprise URL(s)",
@@ -339,12 +356,15 @@
   "LabelPort": "Port",
   "LabelPrefixesToIgnore": "Zu ignorierende(s) Vorwort(e) (Groß- und Kleinschreibung wird nicht berücksichtigt)",
   "LabelPreventIndexing": "Verhindere, dass dein Feed von iTunes- und Google-Podcast-Verzeichnissen indiziert wird",
+  "LabelPrimaryEbook": "Haupt-E-Book",
   "LabelProgress": "Fortschritt",
   "LabelProvider": "Anbieter",
   "LabelPubDate": "Veröffentlichungsdatum",
   "LabelPublisher": "Herausgeber",
   "LabelPublishYear": "Jahr",
-  "LabelReadAgain": "Read Again",
+  "LabelRead": "Lesen",
+  "LabelReadAgain": "Nocheinmal Lesen",
+  "LabelReadEbookWithoutProgress": "E-Book lesen und Fortschritt verwerfen",
   "LabelRecentlyAdded": "Kürzlich hinzugefügt",
   "LabelRecentSeries": "Aktuelle Serien",
   "LabelRecommended": "Empfohlen",
@@ -361,23 +381,32 @@
   "LabelSearchTitle": "Titel",
   "LabelSearchTitleOrASIN": "Titel oder ASIN",
   "LabelSeason": "Staffel",
-  "LabelSendEbookToDevice": "Send Ebook to...",
+  "LabelSelectAllEpisodes": "Alle Episoden auswählen",
+  "LabelSelectEpisodesShowing": "{0} ausgewählte Episoden werden angezeigt",
+  "LabelSendEbookToDevice": "E-Book senden an...",
   "LabelSequence": "Reihenfolge",
   "LabelSeries": "Serien",
   "LabelSeriesName": "Serienname",
   "LabelSeriesProgress": "Serienfortschritt",
+  "LabelSetEbookAsPrimary": "Setzen als Hauptbuch",
+  "LabelSetEbookAsSupplementary": "Setzen als Ergänzung",
+  "LabelSettingsAudiobooksOnly": "nur Hörbücher",
+  "LabelSettingsAudiobooksOnlyHelp": "Wenn Sie diese Einstellung aktivieren, werden E-Book-Dateien ignoriert, es sei denn, sie befinden sich in einem Hörbuchordner. In diesem Fall werden sie als zusätzliche E-Books festgelegt",
   "LabelSettingsBookshelfViewHelp": "Skeumorphes Design mit Holzeinlegeböden",
   "LabelSettingsChromecastSupport": "Chromecastunterstützung",
   "LabelSettingsDateFormat": "Datumsformat",
   "LabelSettingsDisableWatcher": "Überwachung deaktivieren",
   "LabelSettingsDisableWatcherForLibrary": "Ordnerüberwachung für die Bibliothek deaktivieren",
   "LabelSettingsDisableWatcherHelp": "Deaktiviert das automatische Hinzufügen/Aktualisieren von Elementen, wenn Dateiänderungen erkannt werden. *Erfordert einen Server-Neustart",
-  "LabelSettingsEnableEReader": "E-Reader für alle Benutzer aktivieren",
-  "LabelSettingsEnableEReaderHelp": "Der E-Reader befindet sich noch in der Entwicklung, aber mit dieser Einstellung können Sie ihn für alle Benutzer aktivieren (oder aktivieren Sie die Option \"Experimentelle Funktionen\", dann Sie ihn nur selbst verwenden)",
+  "LabelSettingsEnableWatcher": "Enable Watcher",
+  "LabelSettingsEnableWatcherForLibrary": "Enable folder watcher for library",
+  "LabelSettingsEnableWatcherHelp": "Enables the automatic adding/updating of items when file changes are detected. *Requires server restart",
   "LabelSettingsExperimentalFeatures": "Experimentelle Funktionen",
   "LabelSettingsExperimentalFeaturesHelp": "Funktionen welche sich in der Entwicklung befinden, benötigen Ihr Feedback und Ihre Hilfe beim Testen. Klicken Sie hier, um die Github-Diskussion zu öffnen.",
   "LabelSettingsFindCovers": "Suche Titelbilder",
   "LabelSettingsFindCoversHelp": "Wenn Ihr Medium kein eingebettetes Titelbild oder kein Titelbild im Ordner hat, versucht der Scanner, ein Titelbild online zu finden.<br>Hinweis: Dies verlängert die Scandauer",
+  "LabelSettingsHideSingleBookSeries": "Ausblenden einzelzne Bücher",
+  "LabelSettingsHideSingleBookSeriesHelp": "Serien, die ein einzelnes Buch enthalten, werden in den Regalen der Serienseite und der Startseite ausgeblendet.",
   "LabelSettingsHomePageBookshelfView": "Startseite verwendet die Bücherregalansicht",
   "LabelSettingsLibraryBookshelfView": "Bibliothek verwendet die Bücherregalansicht",
   "LabelSettingsOverdriveMediaMarkers": "Verwende Overdrive Media Marker für Kapitel",
@@ -404,6 +433,7 @@
   "LabelShowAll": "Alles anzeigen",
   "LabelSize": "Größe",
   "LabelSleepTimer": "Einschlaf-Timer",
+  "LabelSlug": "URL Teil",
   "LabelStart": "Start",
   "LabelStarted": "Gestartet",
   "LabelStartedAt": "Gestartet am",
@@ -430,6 +460,9 @@
   "LabelTagsAccessibleToUser": "Für Benutzer zugängliche Schlagwörter",
   "LabelTagsNotAccessibleToUser": "Für Benutzer nicht zugängliche Schlagwörter",
   "LabelTasks": "Laufende Aufgaben",
+  "LabelTheme": "Theme",
+  "LabelThemeDark": "Dark",
+  "LabelThemeLight": "Light",
   "LabelTimeBase": "Basiszeit",
   "LabelTimeListened": "Gehörte Zeit",
   "LabelTimeListenedToday": "Heute gehörte Zeit",
@@ -448,6 +481,7 @@
   "LabelTrackFromMetadata": "Titel aus Metadaten",
   "LabelTracks": "Dateien",
   "LabelTracksMultiTrack": "Mehrfachdatei",
+  "LabelTracksNone": "Keine Dateien",
   "LabelTracksSingleTrack": "Einzeldatei",
   "LabelType": "Typ",
   "LabelUnabridged": "Ungekürzt",
@@ -468,7 +502,7 @@
   "LabelViewBookmarks": "Lesezeichen anzeigen",
   "LabelViewChapters": "Kapitel anzeigen",
   "LabelViewQueue": "Spieler-Warteschlange anzeigen",
-  "LabelVolume": "Volume",
+  "LabelVolume": "Volumen",
   "LabelWeekdaysToRun": "Wochentage für die Ausführung",
   "LabelYourAudiobookDuration": "Laufzeit Ihres Mediums",
   "LabelYourBookmarks": "Lesezeichen",
@@ -488,10 +522,14 @@
   "MessageChapterErrorStartLtPrev": "Ungültige Kapitelstartzeit: Kapitelanfang < Kapitelanfang vorheriges Kapitel (Kapitelanfang liegt zeitlich vor dem Beginn des vorherigen Kapitels -> Lösung: Kapitelanfang >= Startzeit des vorherigen Kapitels)",
   "MessageChapterStartIsAfter": "Ungültige Kapitelstartzeit: Kapitelanfang > Mediumende (Kapitelanfang liegt nach dem Ende des Mediums)",
   "MessageCheckingCron": "Überprüfe Cron...",
+  "MessageConfirmCloseFeed": "Sind Sie sicher, dass Sie diesen Feed schließen wollen?",
   "MessageConfirmDeleteBackup": "Sind Sie sicher, dass Sie die Sicherung für {0} löschen wollen?",
+  "MessageConfirmDeleteFile": "Es wird die Datei vom System löschen. Sind Sie sicher?",
   "MessageConfirmDeleteLibrary": "Sind Sie sicher, dass Sie die Bibliothek \"{0}\" dauerhaft löschen wollen?",
   "MessageConfirmDeleteSession": "Sind Sie sicher, dass Sie diese Sitzung löschen möchten?",
   "MessageConfirmForceReScan": "Sind Sie sicher, dass Sie einen erneuten Scanvorgang erzwingen wollen?",
+  "MessageConfirmMarkAllEpisodesFinished": "Sind Sie sicher, dass Sie alle Episoden als abgeschlossen markieren möchten?",
+  "MessageConfirmMarkAllEpisodesNotFinished": "Sind Sie sicher, dass Sie alle Episoden als nicht abgeschlossen markieren möchten?",
   "MessageConfirmMarkSeriesFinished": "Sind Sie sicher, dass Sie alle Medien dieser Reihe als abgeschlossen markieren wollen?",
   "MessageConfirmMarkSeriesNotFinished": "Sind Sie sicher, dass Sie alle Medien dieser Reihe als nicht abgeschlossen markieren wollen?",
   "MessageConfirmRemoveAllChapters": "Sind Sie sicher, dass Sie alle Kapitel entfernen möchten?",
@@ -506,7 +544,7 @@
   "MessageConfirmRenameTag": "Sind Sie sicher, dass Sie den Tag \"{0}\" in \"{1}\" für alle Hörbücher/Podcasts umbenennen wollen?",
   "MessageConfirmRenameTagMergeNote": "Hinweis: Tag existiert bereits -> Tags werden zusammengelegt.",
   "MessageConfirmRenameTagWarning": "Warnung! Ein ähnlicher Tag mit einem anderen Wortlaut existiert bereits: \"{0}\".",
-  "MessageConfirmSendEbookToDevice": "Are you sure you want to send {0} ebook \"{1}\" to device \"{2}\"?",
+  "MessageConfirmSendEbookToDevice": "Sind Sie sicher, dass sie {0} ebook \"{1}\" auf das Gerät \"{2}\" senden wollen?",
   "MessageDownloadingEpisode": "Episode herunterladen",
   "MessageDragFilesIntoTrackOrder": "Verschieben Sie die Dateien in die richtige Reihenfolge",
   "MessageEmbedFinished": "Einbettung abgeschlossen!",
@@ -525,9 +563,11 @@
   "MessageM4BFailed": "M4B fehlgeschlagen!",
   "MessageM4BFinished": "M4B beendet!",
   "MessageMapChapterTitles": "Zuordnen von Kapiteltiteln zu Ihren vorhandenen Medienkapiteln ohne Anpassung der Zeitangaben",
+  "MessageMarkAllEpisodesFinished": "Alle Episoden als beendet markieren",
+  "MessageMarkAllEpisodesNotFinished": "Alle Episoden als ungehört markieren",
   "MessageMarkAsFinished": "Als beendet markieren",
   "MessageMarkAsNotFinished": "Als nicht abgeschlossen markieren",
-  "MessageMatchBooksDescription": "versucht, Bücher in der Bibliothek mit einem Buch des ausgewählten Suchanbieters abzugleichen und leere Details und das Titelbild auszufüllen. Details werden nicht überschrieben.",
+  "MessageMatchBooksDescription": "Es wird versucht die Bücher in der Bibliothek mit einem Buch des ausgewählten Suchanbieters abzugleichen um leere Details und das Titelbild auszufüllen. Vorhandene Details werden nicht überschrieben.",
   "MessageNoAudioTracks": "Keine Audiodateien",
   "MessageNoAuthors": "Keine Autoren",
   "MessageNoBackups": "Keine Sicherungen",
@@ -563,9 +603,8 @@
   "MessagePauseChapter": "Kapitelwiedergabe pausieren",
   "MessagePlayChapter": "Kapitelanfang anhören",
   "MessagePlaylistCreateFromCollection": "Erstelle eine Wiedergabeliste aus der Sammlung",
-  "MessagePodcastHasNoRSSFeedForMatching": "Podcast hat keine RSS-Feed-Url welche für den Online-Abgleich verwendet werden kann",
+  "MessagePodcastHasNoRSSFeedForMatching": "Der Podcast hat keine RSS-Feed-Url welche für den Online-Abgleich verwendet werden kann",
   "MessageQuickMatchDescription": "Füllt leere Details und Titelbilder mit dem ersten Treffer aus '{0}'. Überschreibt keine Details, es sei denn, die Server-Einstellung \"Passende Metadaten bevorzugen\" ist aktiviert.",
-  "MessageRemoveAllItemsWarning": "WARNUNG! Bei dieser Aktion werden alle Bibliotheksobjekte aus der Datenbank entfernt, einschließlich aller Aktualisierungen oder Online-Abgleichs, die Sie vorgenommen haben. Ihre eigentlichen Dateien bleiben davon unberührt. Sind Sie sicher?",
   "MessageRemoveChapter": "Kapitel löschen",
   "MessageRemoveEpisodes": "Entferne {0} Episode(n)",
   "MessageRemoveFromPlayerQueue": "Aus der Abspielwarteliste löschen",
@@ -661,8 +700,8 @@
   "ToastRemoveItemFromCollectionSuccess": "Medium aus der Sammlung gelöscht",
   "ToastRSSFeedCloseFailed": "RSS-Feed konnte nicht geschlossen werden",
   "ToastRSSFeedCloseSuccess": "RSS-Feed geschlossen",
-  "ToastSendEbookToDeviceFailed": "Failed to send ebook to device",
-  "ToastSendEbookToDeviceSuccess": "Ebook sent to device \"{0}\"",
+  "ToastSendEbookToDeviceFailed": "E-Book konnte nicht auf Gerät übertragen werden",
+  "ToastSendEbookToDeviceSuccess": "E-Book an Gerät senden \"{0}\"",
   "ToastSeriesUpdateFailed": "Aktualisierung der Serien fehlgeschlagen",
   "ToastSeriesUpdateSuccess": "Serien aktualisiert",
   "ToastSessionDeleteFailed": "Sitzung konnte nicht gelöscht werden",
@@ -672,4 +711,4 @@
   "ToastSocketFailedToConnect": "Verbindung zum WebSocket fehlgeschlagen",
   "ToastUserDeleteFailed": "Benutzer konnte nicht gelöscht werden",
   "ToastUserDeleteSuccess": "Benutzer gelöscht"
-}
+}