Version bump v2.7.2

Change `Logger.dev` calls to `Logger.debug`

.github/ISSUE_TEMPLATE/bug.yaml

@@ -11,7 +11,7 @@ body:
       value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
   - type: markdown
     attributes:
-      value: "### Join the [discord server](https://discord.gg/pJsjuNCKRq) for questions or if you are not sure about a bug."
+      value: "### Join the [discord server](https://discord.gg/HQgCbd6E75) for questions or if you are not sure about a bug."
   - type: markdown
     attributes:
       value: "## Be as descriptive as you can. Include screenshots, error logs, browser, file types, everything you can think of that might be relevant."

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Discord
-    url: https://discord.gg/pJsjuNCKRq
+    url: https://discord.gg/HQgCbd6E75
     about: Ask questions, get help troubleshooting, and join the Abs community here.
   - name: Matrix
     url: https://matrix.to/#/#audiobookshelf:matrix.org

.gitignore

@@ -7,11 +7,15 @@
 /podcasts/
 /media/
 /metadata/
-test/
 /client/.nuxt/
 /client/dist/
 /dist/
 /deploy/
+/coverage/
+/.nyc_output/
+/ffmpeg*
+/ffprobe*
 
 sw.*
 .DS_STORE
+.idea/*

.vscode/settings.json

@@ -16,5 +16,6 @@
   },
   "editor.formatOnSave": true,
   "editor.detectIndentation": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "javascript.format.semicolons": "remove"
 }

Dockerfile

@@ -10,11 +10,16 @@ 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++ \
+    tini
 
 COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
@@ -23,10 +28,9 @@ 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
+
+ENTRYPOINT ["tini", "--"]
 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/assets/app.css

@@ -258,4 +258,24 @@ Bookshelf Label
 
 .no-bars .Vue-Toastification__container.top-right {
   padding-top: 8px;
+}
+
+.abs-btn::before {
+  content: '';
+  position: absolute;
+  border-radius: 6px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+
+.abs-btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.abs-btn:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
 }

client/components/app/Appbar.vue

@@ -186,7 +186,7 @@ export default {
   methods: {
     requestBatchQuickEmbed() {
       const payload = {
-        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        message: this.$strings.MessageConfirmQuickEmbed,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
@@ -219,7 +219,7 @@ export default {
     },
     async batchRescan() {
       const payload = {
-        message: `Are you sure you want to re-scan ${this.selectedMediaItems.length} items?`,
+        message: this.$getString('MessageConfirmReScanLibraryItems', [this.selectedMediaItems.length]),
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
@@ -303,26 +303,28 @@ 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)
         })
     },
     batchDeleteClick() {
       const payload = {
-        message: `This will delete ${this.numMediaItemsSelected} library items from the database and your file system. Are you sure?`,
-        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
+        message: this.$getString('MessageConfirmDeleteLibraryItems', [this.numMediaItemsSelected]),
+        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
         yesButtonText: this.$strings.ButtonDelete,
         yesButtonColor: 'error',
-        checkboxDefaultValue: true,
+        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
+            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
+
             this.$store.commit('setProcessingBatch', true)
 
             this.$axios

client/components/app/BookShelfCategorized.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
     <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
 
     <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
       <p class="text-center text-2xl mb-4 py-4">{{ libraryName }} Library is empty!</p>
@@ -68,6 +68,9 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
@@ -91,6 +94,9 @@ export default {
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {
@@ -168,7 +174,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
         })
@@ -335,9 +341,15 @@ export default {
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
 
-      const isThisLibrary = !libraryItems.some((li) => li.libraryId !== this.currentLibraryId)
-      if (!this.search && isThisLibrary) {
-        this.fetchCategories()
+      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
+      if (!recentlyAddedShelf) return
+
+      // Add new library item to the recently added shelf
+      for (const libraryItem of libraryItems) {
+        if (libraryItem.libraryId === this.currentLibraryId && !recentlyAddedShelf.entities.some((ent) => ent.id === libraryItem.id)) {
+          // Add to front of array
+          recentlyAddedShelf.entities.unshift(libraryItem)
+        }
       }
     },
     libraryItemsUpdated(items) {
@@ -346,8 +358,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

@@ -22,6 +22,10 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
         </svg>
       </nuxt-link>
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="flex-grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
+        <span v-else class="material-icons-outlined text-lg">queue_music</span>
+      </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
         <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
@@ -36,7 +40,7 @@
         </svg>
       </nuxt-link>
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p class="text-sm">{{ $strings.ButtonSearch }}</p>
+        <p class="text-sm">{{ $strings.ButtonAdd }}</p>
       </nuxt-link>
     </div>
     <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
@@ -293,6 +297,9 @@ export default {
       }
 
       return items
+    },
+    showPlaylists() {
+      return this.$store.state.libraries.numUserPlaylists > 0
     }
   },
   methods: {

client/components/app/ConfigSideNav.vue

@@ -14,10 +14,10 @@
     </div>
 
     <div class="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
-      <div class="flex justify-between">
-        <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>
+      <div class="flex items-center justify-between">
+        <button type="button" class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</button>
 
-        <p class="font-mono text-xs text-gray-300 italic">{{ Source }}</p>
+        <p class="text-xs text-gray-300 italic">{{ Source }}</p>
       </div>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </div>
@@ -99,6 +99,16 @@ 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'
+        },
+        {
+          id: 'config-authentication',
+          title: this.$strings.HeaderAuthentication,
+          path: '/config/authentication'
         }
       ]
 

client/components/app/LazyBookshelf.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
   </div>
 </template>
 
@@ -205,6 +205,9 @@ export default {
     sizeMultiplier() {
       const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
       return this.entityWidth / baseSize
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {
@@ -313,12 +316,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
       })
 
@@ -623,6 +626,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/app/SettingsContent.vue

@@ -3,9 +3,7 @@
     <div class="flex items-center mb-2">
       <h1 class="text-xl">{{ headerText }}</h1>
 
-      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
-        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
-      </div>
+      <slot name="header-items"></slot>
     </div>
 
     <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
@@ -19,14 +17,9 @@ export default {
   props: {
     headerText: String,
     description: String,
-    note: String,
-    showAddButton: Boolean
+    note: String
   },
-  methods: {
-    clicked() {
-      this.$emit('clicked')
-    }
-  }
+  methods: {}
 }
 </script>
 

client/components/app/SideRail.vue

@@ -3,117 +3,119 @@
     <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
     <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
 
-    <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-      </svg>
+    <div id="siderail-buttons-container" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
-      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons text-2xl">format_list_bulleted</span>
+      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons text-2xl">format_list_bulleted</span>
 
-      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
-      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-      </svg>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
-      <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-      </svg>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+        </svg>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
-      <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons-outlined text-2xl">collections_bookmark</span>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons-outlined text-2xl">collections_bookmark</span>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
-      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons text-2.5xl">queue_music</span>
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons text-2.5xl">queue_music</span>
 
-      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+        <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
 
-      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg class="w-6 h-6" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
-        />
-      </svg>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <svg class="w-6 h-6" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          />
+        </svg>
 
-      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
 
-      <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons text-2xl">record_voice_over</span>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons text-2xl">record_voice_over</span>
 
-      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
 
-      <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="abs-icons icon-podcast text-xl"></span>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="abs-icons icon-podcast text-xl"></span>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAdd }}</p>
 
-      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons-outlined text-xl">album</span>
+      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons-outlined text-xl">album</span>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
 
-      <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons text-2xl">file_download</span>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-icons text-2xl">file_download</span>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
 
-      <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
+        <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
 
-    <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
-      <span class="material-icons text-2xl">warning</span>
+      <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
+        <span class="material-icons text-2xl">warning</span>
 
-      <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
+        <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
-      <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
-        <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
-      </div>
-    </nuxt-link>
+        <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+        <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
+          <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
+        </div>
+      </nuxt-link>
+    </div>
 
-    <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
+    <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
       <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
@@ -235,3 +237,12 @@ export default {
   mounted() {}
 }
 </script>
+
+<style>
+#siderail-buttons-container {
+  max-height: calc(100vh - 64px - 48px);
+}
+#siderail-buttons-container.player-open {
+  max-height: calc(100vh - 64px - 48px - 160px);
+}
+</style>

client/components/app/StreamContainer.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
-    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
-      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </nuxt-link>
+    <div class="absolute left-2 top-2 md:left-4 cursor-pointer">
+      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+    </div>
     <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div class="min-w-0">
         <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
@@ -15,7 +15,7 @@
             <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
             <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
             <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}?library=${libraryId}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
             </div>
             <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
             <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator>
@@ -349,7 +349,7 @@ export default {
       }
 
       if ('mediaSession' in navigator) {
-        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png')
+        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png', true)
         const artwork = [
           {
             src: coverImageSrc

client/components/cards/AuthorCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link :to="`/author/${author.id}?library=${currentLibraryId}`">
+  <nuxt-link :to="`/author/${author.id}`">
     <div @mouseover="mouseover" @mouseleave="mouseleave">
       <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
         <!-- Image or placeholder -->
@@ -8,7 +8,7 @@
         <!-- Author name & num books overlay -->
         <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
           <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
         </div>
 
         <!-- Search icon btn -->

client/components/cards/BookMatchCard.vue

@@ -15,8 +15,8 @@
         </div>
         <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
         <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
-        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
-        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
+        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
+        <div v-if="book.series?.length" class="flex py-1 -mx-1">
           <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
             <p class="leading-3 text-xs text-gray-400">
               {{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
@@ -29,9 +29,7 @@
       </div>
       <div v-else class="px-4 flex-grow">
         <h1>
-          <div class="flex items-center">
-            {{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" />
-          </div>
+          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" /></div>
         </h1>
         <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
         <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
@@ -56,7 +54,8 @@ export default {
       default: () => {}
     },
     isPodcast: Boolean,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    currentBookDuration: Number
   },
   data() {
     return {
@@ -65,12 +64,27 @@ export default {
   },
   computed: {
     bookCovers() {
-      return this.book.covers ? this.book.covers || [] : []
+      return this.book.covers || []
+    },
+    bookDuration() {
+      return (this.book.duration || 0) * 60
+    },
+    bookDurationComparison() {
+      if (!this.book.duration || !this.currentBookDuration) return ''
+      const currentBookDurationMinutes = Math.floor(this.currentBookDuration / 60)
+      let differenceInMinutes = currentBookDurationMinutes - this.book.duration
+      if (differenceInMinutes < 0) {
+        differenceInMinutes = Math.abs(differenceInMinutes)
+        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} shorter)`
+      } else if (differenceInMinutes > 0) {
+        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} longer)`
+      }
+      return '(exact match)'
     }
   },
   methods: {
     selectMatch() {
-      var book = { ...this.book }
+      const book = { ...this.book }
       book.cover = this.selectedCover
       this.$emit('select', book)
     },

client/components/cards/ItemTaskRunningCard.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="flex items-center px-1 overflow-hidden">
     <div class="w-8 flex items-center justify-center">
-      <!-- <div class="text-lg"> -->
       <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
       <widgets-loading-spinner v-else />
-      <!-- </div> -->
     </div>
     <div class="flex-grow px-2 taskRunningCardContent">
       <p class="truncate text-sm">{{ title }}</p>
@@ -12,7 +10,9 @@
       <p class="truncate text-xs text-gray-300">{{ description }}</p>
 
       <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
+      <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
     </div>
+    <ui-btn v-if="userIsAdminOrUp && !isFinished && isLibraryScan && !cancelingScan" color="primary" :padding-y="1" :padding-x="1" class="text-xs w-16 max-w-16 truncate mr-1" @click.stop="cancelScan">{{ this.$strings.ButtonCancel }}</ui-btn>
   </div>
 </template>
 
@@ -25,9 +25,14 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      cancelingScan: false
+    }
   },
   computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     title() {
       return this.task.title || 'No Title'
     },
@@ -76,9 +81,22 @@ export default {
       }
 
       return ''
+    },
+    isLibraryScan() {
+      return this.action === 'library-scan' || this.action === 'library-match-all'
+    }
+  },
+  methods: {
+    cancelScan() {
+      const libraryId = this.task?.data?.libraryId
+      if (!libraryId) {
+        console.error('No library id in library-scan task', this.task)
+        return
+      }
+      this.cancelingScan = true
+      this.$root.socket.emit('cancel_scan', libraryId)
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

client/components/cards/ItemUploadCard.vue

@@ -15,24 +15,33 @@
 
       <div class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+          <ui-text-input-with-label v-model.trim="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
         </div>
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
+          <div v-if="!isPodcast" class="flex items-end">
+            <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
+            <ui-tooltip :text="$strings.LabelUploaderItemFetchMetadataHelp">
+              <div
+                class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer"
+                @click="fetchMetadata">
+                <span class="text-base text-white text-opacity-80 font-mono material-icons">sync</span>
+              </div>
+            </ui-tooltip>
+          </div>
           <div v-else class="w-full">
             <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
           </div>
         </div>
       </div>
       <div v-if="!isPodcast" class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
+          <ui-text-input-with-label v-model.trim="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" inputClass="h-10" />
         </div>
         <div class="w-1/2 px-2">
           <div class="w-full">
-            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+            <label class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></label>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs h-10" />
           </div>
         </div>
       </div>
@@ -48,8 +57,8 @@
       <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
     </widgets-alert>
 
-    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
-      <ui-loading-indicator :text="$strings.MessageUploading" />
+    <div v-if="isNonInteractable" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
+      <ui-loading-indicator :text="nonInteractionLabel" />
     </div>
   </div>
 </template>
@@ -61,10 +70,11 @@ export default {
   props: {
     item: {
       type: Object,
-      default: () => {}
+      default: () => { }
     },
     mediaType: String,
-    processing: Boolean
+    processing: Boolean,
+    provider: String
   },
   data() {
     return {
@@ -76,7 +86,8 @@ export default {
       error: '',
       isUploading: false,
       uploadFailed: false,
-      uploadSuccess: false
+      uploadSuccess: false,
+      isFetchingMetadata: false
     }
   },
   computed: {
@@ -87,12 +98,19 @@ export default {
       if (!this.itemData.title) return ''
       if (this.isPodcast) return this.itemData.title
 
-      if (this.itemData.series && this.itemData.author) {
-        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
-      } else if (this.itemData.author) {
-        return Path.join(this.itemData.author, this.itemData.title)
-      } else {
-        return this.itemData.title
+      const outputPathParts = [this.itemData.author, this.itemData.series, this.itemData.title]
+      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map(part => this.$sanitizeFilename(part))
+
+      return Path.join(...cleanedOutputPathParts)
+    },
+    isNonInteractable() {
+      return this.isUploading || this.isFetchingMetadata
+    },
+    nonInteractionLabel() {
+      if (this.isUploading) {
+        return this.$strings.MessageUploading
+      } else if (this.isFetchingMetadata) {
+        return this.$strings.LabelFetchingMetadata
       }
     }
   },
@@ -105,9 +123,42 @@ export default {
     titleUpdated() {
       this.error = ''
     },
+    async fetchMetadata() {
+      if (!this.itemData.title.trim().length) {
+        return
+      }
+
+      this.isFetchingMetadata = true
+      this.error = ''
+
+      try {
+        const searchQueryString = new URLSearchParams({
+          title: this.itemData.title,
+          author: this.itemData.author,
+          provider: this.provider
+        })
+        const [bestCandidate, ..._rest] = await this.$axios.$get(`/api/search/books?${searchQueryString}`)
+
+        if (bestCandidate) {
+          this.itemData = {
+            ...this.itemData,
+            title: bestCandidate.title,
+            author: bestCandidate.author,
+            series: (bestCandidate.series || [])[0]?.series
+          }
+        } else {
+          this.error = this.$strings.ErrorUploadFetchMetadataNoResults
+        }
+      } catch (e) {
+        console.error('Failed', e)
+        this.error = this.$strings.ErrorUploadFetchMetadataAPI
+      } finally {
+        this.isFetchingMetadata = false
+      }
+    },
     getData() {
       if (!this.itemData.title) {
-        this.error = 'Must have a title'
+        this.error = this.$strings.ErrorUploadLacksTitle
         return null
       }
       this.error = ''
@@ -128,4 +179,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/LazyBookCard.vue

@@ -8,10 +8,10 @@
     <!-- Alternative bookshelf title/author/sort -->
     <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        <div class="flex items-center">
-          <span class="truncate">{{ displayTitle }}</span>
+        <ui-tooltip :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+          <p ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator :explicit="isExplicit" />
-        </div>
+        </ui-tooltip>
       </div>
       <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
@@ -68,7 +68,8 @@
         <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
       </div>
 
-      <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+      <!-- Radio button -->
+      <div v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
         <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
       </div>
 
@@ -89,7 +90,7 @@
 
     <!-- Series name overlay -->
     <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
-      <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
+      <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ seriesName }}</p>
     </div>
 
     <!-- Error widget -->
@@ -116,9 +117,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>
 
@@ -158,6 +164,7 @@ export default {
       imageReady: false,
       selected: false,
       isSelectionMode: false,
+      displayTitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -213,8 +220,11 @@ export default {
       // Only included when filtering by series or collapse series or Continue Series shelf on home page
       return this.mediaMetadata.series
     },
+    seriesName() {
+      return this.series?.name || null
+    },
     seriesSequence() {
-      return this.series ? this.series.sequence : null
+      return this.series?.sequence || null
     },
     libraryId() {
       return this._libraryItem.libraryId
@@ -227,9 +237,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
     },
@@ -311,6 +323,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() {
@@ -630,6 +643,12 @@ export default {
       }
 
       this.libraryItem = libraryItem
+
+      this.$nextTick(() => {
+        if (this.$refs.displayTitle) {
+          this.displayTitleTruncated = this.$refs.displayTitle.scrollWidth > this.$refs.displayTitle.clientWidth
+        }
+      })
     },
     clickCard(e) {
       if (this.processing) return
@@ -680,7 +699,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)
@@ -757,6 +775,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
@@ -831,13 +851,15 @@ export default {
     },
     deleteLibraryItem() {
       const payload = {
-        message: 'This will delete the library item from the database and your file system. Are you sure?',
-        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
+        message: this.$strings.MessageConfirmDeleteLibraryItem,
+        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
         yesButtonText: this.$strings.ButtonDelete,
         yesButtonColor: 'error',
-        checkboxDefaultValue: true,
+        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
+            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
+
             this.processing = true
             const axios = this.$axios || this.$nuxt.$axios
             axios

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/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

@@ -124,6 +124,11 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublisher,
+          value: 'publishers',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
           value: 'languages',
@@ -167,6 +172,11 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublisher,
+          value: 'publishers',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
           value: 'languages',
@@ -271,12 +281,16 @@ export default {
       let filterValue = null
       if (parts.length > 1) {
         const decoded = this.$decode(parts[1])
-        if (decoded.startsWith('aut_')) {
+        if (parts[0] === 'authors') {
           const author = this.authors.find((au) => au.id == decoded)
           if (author) filterValue = author.name
-        } else if (decoded.startsWith('ser_')) {
-          const 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
         }
@@ -309,6 +323,9 @@ export default {
     languages() {
       return this.filterData.languages || []
     },
+    publishers() {
+      return this.filterData.publishers || []
+    },
     progress() {
       return [
         {
@@ -331,6 +348,10 @@ export default {
     },
     tracks() {
       return [
+        {
+          id: 'none',
+          name: this.$strings.LabelTracksNone
+        },
         {
           id: 'single',
           name: this.$strings.LabelTracksSingleTrack

client/components/covers/BookCover.vue

@@ -5,7 +5,8 @@
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
 
-      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" @click="clickCover" />
+
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
@@ -43,6 +44,7 @@ export default {
       type: Number,
       default: 120
     },
+    expandOnClick: Boolean,
     bookCoverAspectRatio: Number
   },
   data() {
@@ -132,6 +134,11 @@ export default {
     }
   },
   methods: {
+    clickCover() {
+      if (this.expandOnClick && this.libraryItem) {
+        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
+      }
+    },
     setCoverBg() {
       if (this.$refs.coverBg) {
         this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`

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">
@@ -14,13 +14,17 @@
             </div>
             <div class="w-1/2 px-2">
               <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
+              <ui-text-input-with-label v-else v-model="newUser.email" :label="$strings.LabelEmail" />
             </div>
           </div>
           <div v-show="!isEditingRoot" class="flex py-2">
-            <div class="px-2 w-52">
-              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
+            <div class="w-1/2 px-2">
+              <ui-text-input-with-label v-model="newUser.email" :label="$strings.LabelEmail" />
             </div>
-            <div class="flex-grow" />
+            <div class="px-2 w-52">
+              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
+            </div>
+            <!-- <div class="flex-grow" /> -->
             <div class="flex items-center pt-4 px-2">
               <p class="px-3 font-semibold" id="user-enabled-toggle" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
               <ui-toggle-switch labeledBy="user-enabled-toggle" v-model="newUser.isActive" :disabled="isEditingRoot" />
@@ -103,7 +107,6 @@
                   <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
                 </div>
               </div>
-              
             </div>
           </div>
 
@@ -258,7 +261,6 @@ export default {
       if (account.type === 'root' && !account.isActive) return
 
       this.processing = true
-      console.log('Calling update', account)
       this.$axios
         .$patch(`/api/users/${this.account.id}`, account)
         .then((data) => {
@@ -327,9 +329,11 @@ export default {
     init() {
       this.fetchAllTags()
       this.isNew = !this.account
+
       if (this.account) {
         this.newUser = {
           username: this.account.username,
+          email: this.account.email,
           password: this.account.password,
           type: this.account.type,
           isActive: this.account.isActive,
@@ -338,9 +342,9 @@ export default {
           itemTagsSelected: [...(this.account.itemTagsSelected || [])]
         }
       } else {
-        this.fetchAllTags()
         this.newUser = {
           username: null,
+          email: null,
           password: null,
           type: 'user',
           isActive: true,
@@ -353,7 +357,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/RawCoverPreviewModal.vue

@@ -0,0 +1,33 @@
+<template>
+  <modals-modal v-model="show" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
+    <div class="w-full h-full" @click="show = false">
+      <img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showRawCoverPreviewModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowRawCoverPreviewModal', val)
+      }
+    },
+    selectedLibraryItemId() {
+      return this.$store.state.globals.selectedLibraryItemId
+    },
+    rawCoverUrl() {
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.selectedLibraryItemId, null, true)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/modals/authors/EditModal.vue

@@ -5,18 +5,23 @@
         <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
-    <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">
-      <form v-if="author" @submit.prevent="submitForm">
-        <div class="flex">
-          <div class="w-40 p-2">
-            <div class="w-full h-45 relative">
-              <covers-author-image :author="author" />
-              <div v-show="!processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
-                <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
-              </div>
+    <div v-if="author" 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">
+      <div class="flex">
+        <div class="w-40 p-2">
+          <div class="w-full h-45 relative">
+            <covers-author-image :author="author" />
+            <div v-if="userCanDelete && !processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
+              <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
             </div>
           </div>
-          <div class="flex-grow">
+        </div>
+        <div class="flex-grow">
+          <form @submit.prevent="submitUploadCover" class="flex flex-grow mb-2 p-2">
+            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
+            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
+          </form>
+
+          <form v-if="author" @submit.prevent="submitForm">
             <div class="flex">
               <div class="w-3/4 p-2">
                 <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" :label="$strings.LabelName" />
@@ -25,21 +30,23 @@
                 <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
               </div>
             </div>
-            <div class="p-2">
+            <!-- <div class="p-2">
               <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" :label="$strings.LabelPhotoPathURL" />
-            </div>
+            </div> -->
             <div class="p-2">
               <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" :label="$strings.LabelDescription" :rows="8" />
             </div>
 
             <div class="flex pt-2 px-2">
-              <ui-btn type="button" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
+              <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
               <div class="flex-grow" />
+              <ui-btn type="button" class="mx-2" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
+
               <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
             </div>
-          </div>
+          </form>
         </div>
-      </form>
+      </div>
     </div>
   </modals-modal>
 </template>
@@ -51,9 +58,9 @@ export default {
       authorCopy: {
         name: '',
         asin: '',
-        description: '',
-        imagePath: ''
+        description: ''
       },
+      imageUrl: '',
       processing: false
     }
   },
@@ -91,17 +98,45 @@ export default {
     },
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {
     init() {
+      this.imageUrl = ''
       this.authorCopy.name = this.author.name
       this.authorCopy.asin = this.author.asin
       this.authorCopy.description = this.author.description
-      this.authorCopy.imagePath = this.author.imagePath
+    },
+    removeClick() {
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveAuthor', [this.author.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.processing = true
+            this.$axios
+              .$delete(`/api/authors/${this.authorId}`)
+              .then(() => {
+                this.$toast.success('Author removed')
+                this.show = false
+              })
+              .catch((error) => {
+                console.error('Failed to remove author', error)
+                this.$toast.error('Failed to remove author')
+              })
+              .finally(() => {
+                this.processing = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     },
     async submitForm() {
-      var keysToCheck = ['name', 'asin', 'description', 'imagePath']
+      var keysToCheck = ['name', 'asin', 'description']
       var updatePayload = {}
       keysToCheck.forEach((key) => {
         if (this.authorCopy[key] !== this.author[key]) {
@@ -130,21 +165,46 @@ export default {
       }
       this.processing = false
     },
-    async removeCover() {
-      var updatePayload = {
-        imagePath: null
-      }
+    removeCover() {
       this.processing = true
-      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
-        console.error('Failed', error)
-        this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
-        return null
-      })
-      if (result && result.updated) {
-        this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
-        this.$store.commit('globals/showEditAuthorModal', result.author)
+      this.$axios
+        .$delete(`/api/authors/${this.authorId}/image`)
+        .then((data) => {
+          this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
+          this.$store.commit('globals/showEditAuthorModal', data.author)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    submitUploadCover() {
+      if (!this.imageUrl?.startsWith('http:') && !this.imageUrl?.startsWith('https:')) {
+        this.$toast.error('Invalid image url')
+        return
       }
-      this.processing = false
+
+      this.processing = true
+      const updatePayload = {
+        url: this.imageUrl
+      }
+      this.$axios
+        .$post(`/api/authors/${this.authorId}/image`, updatePayload)
+        .then((data) => {
+          this.imageUrl = ''
+          this.$toast.success('Author image updated')
+          this.$store.commit('globals/showEditAuthorModal', data.author)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error(error.response.data || 'Failed to remove author image')
+        })
+        .finally(() => {
+          this.processing = false
+        })
     },
     async searchAuthor() {
       if (!this.authorCopy.name && !this.authorCopy.asin) {

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/emails/EReaderDeviceModal.vue

@@ -8,7 +8,7 @@
     <form @submit.prevent="submitForm">
       <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
         <div class="w-full px-3 py-5 md:p-12">
-          <div class="flex items-center -mx-1 mb-2">
+          <div class="flex items-center -mx-1 mb-4">
             <div class="w-full md:w-1/2 px-1">
               <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
             </div>
@@ -16,6 +16,14 @@
               <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
             </div>
           </div>
+          <div class="flex items-center -mx-1 mb-4">
+            <div class="w-full md:w-1/2 px-1">
+              <ui-dropdown v-model="newDevice.availabilityOption" :label="$strings.LabelDeviceIsAvailableTo" :items="userAvailabilityOptions" @input="availabilityOptionChanged" />
+            </div>
+            <div class="w-full md:w-1/2 px-1">
+              <ui-multi-select-dropdown v-if="newDevice.availabilityOption === 'specificUsers'" v-model="newDevice.users" :label="$strings.HeaderUsers" :items="userOptions" />
+            </div>
+          </div>
 
           <div class="flex items-center pt-4">
             <div class="flex-grow" />
@@ -45,8 +53,11 @@ export default {
       processing: false,
       newDevice: {
         name: '',
-        email: ''
-      }
+        email: '',
+        availabilityOption: 'adminAndUp',
+        users: []
+      },
+      users: []
     }
   },
   watch: {
@@ -68,10 +79,55 @@ export default {
       }
     },
     title() {
-      return this.ereaderDevice ? 'Create Device' : 'Update Device'
+      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
+    },
+    userAvailabilityOptions() {
+      return [
+        {
+          text: this.$strings.LabelAdminUsersOnly,
+          value: 'adminOrUp'
+        },
+        {
+          text: this.$strings.LabelAllUsersExcludingGuests,
+          value: 'userOrUp'
+        },
+        {
+          text: this.$strings.LabelAllUsersIncludingGuests,
+          value: 'guestOrUp'
+        },
+        {
+          text: this.$strings.LabelSelectUsers,
+          value: 'specificUsers'
+        }
+      ]
+    },
+    userOptions() {
+      return this.users.map((u) => ({ text: u.username, value: u.id }))
     }
   },
   methods: {
+    availabilityOptionChanged(option) {
+      if (option === 'specificUsers' && !this.users.length) {
+        this.loadUsers()
+      }
+    },
+    async loadUsers() {
+      this.processing = true
+      this.users = await this.$axios
+        .$get('/api/users')
+        .then((res) => {
+          return res.users.sort((a, b) => {
+            return a.createdAt - b.createdAt
+          })
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          return []
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
     submitForm() {
       this.$refs.ereaderNameInput.blur()
       this.$refs.ereaderEmailInput.blur()
@@ -81,19 +137,27 @@ export default {
         return
       }
 
+      if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
+        this.$toast.error('Must select at least one user')
+        return
+      }
+      if (this.newDevice.availabilityOption !== 'specificUsers') {
+        this.newDevice.users = []
+      }
+
       this.newDevice.name = this.newDevice.name.trim()
       this.newDevice.email = this.newDevice.email.trim()
 
       if (!this.ereaderDevice) {
         if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('EReader device with that name already exists')
+          this.$toast.error('Ereader device with that name already exists')
           return
         }
 
         this.submitCreate()
       } else {
         if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('EReader device with that name already exists')
+          this.$toast.error('Ereader device with that name already exists')
           return
         }
 
@@ -160,9 +224,17 @@ export default {
       if (this.ereaderDevice) {
         this.newDevice.name = this.ereaderDevice.name
         this.newDevice.email = this.ereaderDevice.email
+        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
+        this.newDevice.users = this.ereaderDevice.users || []
+
+        if (this.newDevice.availabilityOption === 'specificUsers' && !this.users.length) {
+          this.loadUsers()
+        }
       } else {
         this.newDevice.name = ''
         this.newDevice.email = ''
+        this.newDevice.availabilityOption = 'adminOrUp'
+        this.newDevice.users = []
       }
     }
   },

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

@@ -1,13 +1,13 @@
 <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">
           <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
-          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
+          <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
             <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
               <span class="material-icons text-2xl">delete</span>
             </ui-tooltip>
@@ -16,15 +16,16 @@
       </div>
       <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
         <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
             <ui-file-input ref="fileInput" @change="fileUploadSelected">
               <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
               <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
             </ui-file-input>
           </div>
+
           <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
-            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
+            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
+            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
           </form>
         </div>
 
@@ -64,7 +65,7 @@
     <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
       <template v-for="cover in coversFound">
-        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
         </div>
       </template>
@@ -139,16 +140,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,11 +161,14 @@ export default {
       return this.media.metadata || {}
     },
     libraryFiles() {
-      return this.libraryItem ? this.libraryItem.libraryFiles || [] : []
+      return this.libraryItem?.libraryFiles || []
     },
     userCanUpload() {
       return this.$store.getters['user/getUserCanUpload']
     },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
     userToken() {
       return this.$store.getters['user/getToken']
     },
@@ -219,72 +226,53 @@ export default {
         this.coversFound = []
         this.hasSearched = false
       }
-      this.imageUrl = this.media.coverPath || ''
+      this.imageUrl = ''
       this.searchTitle = this.mediaMetadata.title || ''
       this.searchAuthor = this.mediaMetadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
       else this.provider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
     },
     removeCover() {
-      if (!this.media.coverPath) {
-        this.imageUrl = ''
+      if (!this.coverPath) {
         return
       }
-      this.updateCover('')
+      this.isProcessing = true
+      this.$axios
+        .$delete(`/api/items/${this.libraryItemId}/cover`)
+        .then(() => {})
+        .catch((error) => {
+          console.error('Failed to remove cover', error)
+          if (error.response?.data) {
+            this.$toast.error(error.response.data)
+          }
+        })
+        .finally(() => {
+          this.isProcessing = false
+        })
     },
     submitForm() {
       this.updateCover(this.imageUrl)
     },
     async updateCover(cover) {
-      if (cover === this.coverPath) {
-        console.warn('Cover has not changed..', cover)
+      if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
+        this.$toast.error('Invalid URL')
         return
       }
 
       this.isProcessing = true
-      var success = false
-
-      if (!cover) {
-        // Remove cover
-        success = await this.$axios
-          .$delete(`/api/items/${this.libraryItemId}/cover`)
-          .then(() => true)
-          .catch((error) => {
-            console.error('Failed to remove cover', error)
-            if (error.response && error.response.data) {
-              this.$toast.error(error.response.data)
-            }
-            return false
-          })
-      } else if (cover.startsWith('http:') || cover.startsWith('https:')) {
-        // Download cover from url and use
-        success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, { url: cover }).catch((error) => {
-          console.error('Failed to download cover from url', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          }
-          return false
+      this.$axios
+        .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
+        .then(() => {
+          this.imageUrl = ''
+          this.$toast.success('Update Successful')
         })
-      } else {
-        // Update local cover url
-        const updatePayload = {
-          cover
-        }
-        success = await this.$axios.$patch(`/api/items/${this.libraryItemId}/cover`, updatePayload).catch((error) => {
-          console.error('Failed to update', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          }
-          return false
+        .catch((error) => {
+          console.error('Failed to update cover', error)
+          this.$toast.error(error.response?.data || 'Failed to update cover')
+        })
+        .finally(() => {
+          this.isProcessing = false
         })
-      }
-      if (success) {
-        this.$toast.success('Update Successful')
-        // this.$emit('close')
-      } else {
-        this.imageUrl = this.media.coverPath || ''
-      }
-      this.isProcessing = false
     },
     getSearchQuery() {
       var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
@@ -317,7 +305,19 @@ export default {
       this.hasSearched = true
     },
     setCover(coverFile) {
-      this.updateCover(coverFile.metadata.path)
+      this.isProcessing = true
+      this.$axios
+        .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
+        .then(() => {
+          this.$toast.success('Update Successful')
+        })
+        .catch((error) => {
+          console.error('Failed to set local cover', error)
+          this.$toast.error(error.response?.data || 'Failed to set cover')
+        })
+        .finally(() => {
+          this.isProcessing = false
+        })
     }
   }
 }

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

@@ -11,8 +11,8 @@
           <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
         </ui-tooltip>
 
-        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
-          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        <ui-tooltip :disabled="isLibraryScanning" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="isLibraryScanning" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
         </ui-tooltip>
 
         <div class="flex-grow" />
@@ -80,9 +80,9 @@ export default {
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.libraryId) || 'google'
     },
-    libraryScan() {
+    isLibraryScanning() {
       if (!this.libraryId) return null
-      return this.$store.getters['scanners/getLibraryScan'](this.libraryId)
+      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.libraryId)
     }
   },
   methods: {

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/Files.vue

@@ -14,8 +14,7 @@ export default {
   },
   data() {
     return {
-      tracks: [],
-      showFullPath: false
+      tracks: []
     }
   },
   watch: {

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

@@ -22,7 +22,7 @@
     </div>
     <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
-        <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+        <cards-book-match-card :key="index" :book="res" :current-book-duration="currentBookDuration" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
       </template>
     </div>
     <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
@@ -290,13 +290,17 @@ export default {
       return this.$strings.LabelSearchTitle
     },
     media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
+      return this.libraryItem?.media || {}
     },
     mediaMetadata() {
       return this.media.metadata || {}
     },
+    currentBookDuration() {
+      if (this.isPodcast) return 0
+      return this.media.duration || 0
+    },
     mediaType() {
-      return this.libraryItem ? this.libraryItem.mediaType : null
+      return this.libraryItem?.mediaType || null
     },
     isPodcast() {
       return this.mediaType == 'podcast'
@@ -305,7 +309,7 @@ export default {
       const filterData = this.$store.state.libraries.filterData || {}
       const currentGenres = filterData.genres || []
       const selectedMatchGenres = this.selectedMatch.genres || []
-      return [...new Set([...currentGenres ,...selectedMatchGenres])]
+      return [...new Set([...currentGenres, ...selectedMatchGenres])]
     }
   },
   methods: {
@@ -325,9 +329,10 @@ export default {
       }
     },
     getSearchQuery() {
-      if (this.isPodcast) return `term=${this.searchTitle}`
-      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
+      if (this.isPodcast) return `term=${encodeURIComponent(this.searchTitle)}`
+      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${encodeURIComponent(this.searchTitle)}`
+      if (this.searchAuthor) searchQuery += `&author=${encodeURIComponent(this.searchAuthor)}`
+      if (this.libraryItemId) searchQuery += `&id=${this.libraryItemId}`
       return searchQuery
     },
     submitSearch() {
@@ -580,6 +585,7 @@ export default {
 .matchListWrapper {
   height: calc(100% - 124px);
 }
+
 @media (min-width: 768px) {
   .matchListWrapper {
     height: calc(100% - 80px);

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

@@ -2,8 +2,11 @@
   <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
     <p class="text-xl font-semibold mb-2">{{ $strings.HeaderAudiobookTools }}</p>
 
+    <!-- alert for windows install -->
+    <widgets-alert v-if="isWindowsInstall" type="warning" class="my-8 text-base">Not supported for the Windows install yet</widgets-alert>
+
     <!-- Merge to m4b -->
-    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
+    <div v-if="showM4bDownload && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
       <div class="flex flex-wrap items-center">
         <div>
           <p class="text-lg">{{ $strings.LabelToolsMakeM4b }}</p>
@@ -19,22 +22,8 @@
       </div>
     </div>
 
-    <!-- Split to mp3 -->
-    <!-- <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>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsSplitM4bDescription }}</p>
-        </div>
-        <div class="flex-grow" />
-        <div>
-          <ui-btn :disabled="true">{{ $strings.MessageNotYetImplemented }}</ui-btn>
-        </div>
-      </div>
-    </div> -->
-
     <!-- Embed Metadata -->
-    <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
+    <div v-if="mediaTracks.length && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
       <div class="flex items-center">
         <div>
           <p class="text-lg">{{ $strings.LabelToolsEmbedMetadata }}</p>
@@ -122,6 +111,12 @@ export default {
     },
     isEncodeTaskRunning() {
       return this.encodeTask && !this.encodeTask?.isFinished
+    },
+    isWindowsInstall() {
+      return this.Source == 'windows'
+    },
+    Source() {
+      return this.$store.state.Source
     }
   },
   methods: {

client/components/modals/libraries/EditLibrary.vue

@@ -20,7 +20,7 @@
         <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
         <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text ref="folderInput" v-model="folder.fullPath" readonly type="text" class="w-full" />
+          <ui-editable-text ref="folderInput" v-model="folder.fullPath" :readonly="!!folder.id" type="text" class="w-full" @blur="existingFolderInputBlurred(folder)" />
           <span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
         </div>
         <div class="flex py-1 px-2 items-center w-full">
@@ -31,7 +31,7 @@
         <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
       </div>
     </div>
-    <modals-libraries-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />
+    <modals-libraries-lazy-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />
   </div>
 </template>
 
@@ -67,10 +67,6 @@ export default {
           value: 'podcast',
           text: this.$strings.LabelPodcasts
         }
-        // {
-        //   value: 'music',
-        //   text: 'Music'
-        // }
       ]
     },
     folderPaths() {
@@ -110,6 +106,11 @@ export default {
     formUpdated() {
       this.$emit('update', this.getLibraryData())
     },
+    existingFolderInputBlurred(folder) {
+      if (!folder.fullPath) {
+        this.removeFolder(folder)
+      }
+    },
     newFolderInputBlurred() {
       if (this.newFolderPath) {
         this.folders.push({ fullPath: this.newFolderPath })
@@ -149,6 +150,7 @@ export default {
       this.folders = this.library ? this.library.folders.map((p) => ({ ...p })) : []
       this.icon = this.library ? this.library.icon : 'default'
       this.mediaType = this.library ? this.library.mediaType : 'book'
+
       this.showDirectoryPicker = false
     }
   },

client/components/modals/libraries/EditModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
+  <modals-modal v-model="show" name="edit-library" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
@@ -12,9 +12,9 @@
     </div>
 
     <div class="px-2 md:px-4 w-full text-sm pt-2 md:pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
+      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :library-id="libraryId" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
 
-      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
+      <div v-show="selectedTab !== 'tools'" class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
         <div class="flex justify-end">
           <ui-btn @click="submit">{{ buttonText }}</ui-btn>
         </div>
@@ -54,6 +54,12 @@ export default {
     buttonText() {
       return this.library ? this.$strings.ButtonSave : this.$strings.ButtonCreate
     },
+    mediaType() {
+      return this.libraryCopy?.mediaType
+    },
+    libraryId() {
+      return this.library?.id
+    },
     tabs() {
       return [
         {
@@ -66,12 +72,26 @@ export default {
           title: this.$strings.HeaderSettings,
           component: 'modals-libraries-library-settings'
         },
+        {
+          id: 'scanner',
+          title: this.$strings.HeaderSettingsScanner,
+          component: 'modals-libraries-library-scanner-settings'
+        },
         {
           id: 'schedule',
           title: this.$strings.HeaderSchedule,
           component: 'modals-libraries-schedule-scan'
+        },
+        {
+          id: 'tools',
+          title: this.$strings.HeaderTools,
+          component: 'modals-libraries-library-tools'
         }
-      ]
+      ].filter((tab) => {
+        // Do not show tools tab for new libraries
+        if (tab.id === 'tools' && !this.library) return false
+        return tab.id !== 'scanner' || this.mediaType === 'book'
+      })
     },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
@@ -105,7 +125,9 @@ export default {
           disableWatcher: false,
           skipMatchingMediaWithAsin: false,
           skipMatchingMediaWithIsbn: false,
-          autoScanCronExpression: null
+          autoScanCronExpression: null,
+          hideSingleBookSeries: false,
+          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
         }
       }
     },
@@ -120,7 +142,7 @@ export default {
       for (const key in this.libraryCopy) {
         if (library[key] !== undefined) {
           if (key === 'folders') {
-            this.libraryCopy.folders = library.folders.map((f) => ({ ...f }))
+            this.libraryCopy.folders = library.folders.map((f) => ({ ...f })).filter((f) => !!f.fullPath?.trim())
           } else if (key === 'settings') {
             for (const settingKey in library.settings) {
               this.libraryCopy.settings[settingKey] = library.settings[settingKey]

client/components/modals/libraries/LazyFolderChooser.vue

@@ -4,35 +4,37 @@
       <span class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
       <p class="px-4 text-xl">{{ $strings.HeaderChooseAFolder }}</p>
     </div>
-    <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
-      <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
+    <div v-if="rootDirs.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
+      <p class="font-mono truncate">{{ selectedPath || '/' }}</p>
     </div>
-    <div v-if="allFolders.length" class="flex bg-primary bg-opacity-50 p-4 folder-container">
+    <div v-if="rootDirs.length" class="relative flex bg-primary bg-opacity-50 p-4 folder-container">
       <div class="w-1/2 border-r border-bg h-full overflow-y-auto">
-        <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center" @click="goBack">
+        <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center hover:bg-white/10" @click="goBack">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2">..</p>
         </div>
-        <div v-for="dir in _directories" :key="dir.path" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200" :class="dir.className" @click="selectDir(dir)">
+        <div v-for="dir in _directories" :key="dir.path" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" :class="dir.className" @click="selectDir(dir)">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
-          <span v-if="dir.dirs && dir.dirs.length && dir.path === selectedPath" class="material-icons" style="font-size: 1.1rem">arrow_right</span>
+          <span v-if="dir.path === selectedPath" class="material-icons" style="font-size: 1.1rem">arrow_right</span>
         </div>
       </div>
       <div class="w-1/2 h-full overflow-y-auto">
-        <div v-for="dir in _subdirs" :key="dir.path" :class="dir.className" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200" @click="selectSubDir(dir)">
+        <div v-for="dir in _subdirs" :key="dir.path" :class="dir.className" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" @click="selectSubDir(dir)">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
         </div>
       </div>
+      <div v-if="loadingDirs" class="absolute inset-0 w-full h-full flex items-center justify-center bg-black/10">
+        <ui-loading-indicator />
+      </div>
     </div>
-    <div v-else-if="loadingFolders" class="py-12 text-center">
+    <div v-else-if="initialLoad" class="py-12 text-center">
       <p>{{ $strings.MessageLoadingFolders }}</p>
     </div>
     <div v-else class="py-12 text-center max-w-sm mx-auto">
       <p class="text-lg mb-2">{{ $strings.MessageNoFoldersAvailable }}</p>
       <p class="text-gray-300 mb-2">{{ $strings.NoteFolderPicker }}</p>
-      <p v-if="isDebian" class="text-red-400">{{ $strings.NoteFolderPickerDebian }}</p>
     </div>
 
     <div class="w-full py-2">
@@ -51,11 +53,12 @@ export default {
   },
   data() {
     return {
-      loadingFolders: false,
-      allFolders: [],
+      initialLoad: false,
+      loadingDirs: false,
+      isPosix: true,
+      rootDirs: [],
       directories: [],
       selectedPath: '',
-      selectedFullPath: '',
       subdirs: [],
       level: 0,
       currentDir: null,
@@ -89,68 +92,91 @@ export default {
           ...d
         }
       })
-    },
-    isDebian() {
-      return this.Source == 'debian'
-    },
-    Source() {
-      return this.$store.state.Source
     }
   },
   methods: {
-    goBack() {
-      var splitPaths = this.selectedPath.split('\\').slice(1)
-      var prev = splitPaths.slice(0, -1).join('\\')
+    async goBack() {
+      let selPath = this.selectedPath.replace(/^\//, '')
+      var splitPaths = selPath.split('/')
 
-      var currDirs = this.allFolders
-      for (let i = 0; i < splitPaths.length; i++) {
-        var _dir = currDirs.find((dir) => dir.dirname === splitPaths[i])
-        if (_dir && _dir.path.slice(1) === prev) {
-          this.directories = currDirs
-          this.selectDir(_dir)
-          return
-        } else if (_dir) {
-          currDirs = _dir.dirs
-        }
+      let previousPath = ''
+      let lookupPath = ''
+
+      if (splitPaths.length > 2) {
+        lookupPath = splitPaths.slice(0, -2).join('/')
       }
+      previousPath = splitPaths.slice(0, -1).join('/')
+
+      if (!this.isPosix) {
+        // For windows drives add a trailing slash. e.g. C:/
+        if (!this.isPosix && lookupPath.endsWith(':')) {
+          lookupPath += '/'
+        }
+        if (!this.isPosix && previousPath.endsWith(':')) {
+          previousPath += '/'
+        }
+      } else {
+        // Add leading slash
+        if (previousPath) previousPath = '/' + previousPath
+        if (lookupPath) lookupPath = '/' + lookupPath
+      }
+
+      this.level--
+      this.subdirs = this.directories
+      this.selectedPath = previousPath
+      this.directories = await this.fetchDirs(lookupPath, this.level)
     },
-    selectDir(dir) {
+    async selectDir(dir) {
       if (dir.isUsed) return
       this.selectedPath = dir.path
-      this.selectedFullPath = dir.fullPath
       this.level = dir.level
-      this.subdirs = dir.dirs
+      this.subdirs = await this.fetchDirs(dir.path, dir.level + 1)
     },
-    selectSubDir(dir) {
+    async selectSubDir(dir) {
       if (dir.isUsed) return
       this.selectedPath = dir.path
-      this.selectedFullPath = dir.fullPath
       this.level = dir.level
       this.directories = this.subdirs
-      this.subdirs = dir.dirs
+      this.subdirs = await this.fetchDirs(dir.path, dir.level + 1)
     },
     selectFolder() {
       if (!this.selectedPath) {
         console.error('No Selected path')
         return
       }
-      if (this.paths.find((p) => p.startsWith(this.selectedFullPath))) {
+      if (this.paths.find((p) => p.startsWith(this.selectedPath))) {
         this.$toast.error(`Oops, you cannot add a parent directory of a folder already added`)
         return
       }
-      this.$emit('select', this.selectedFullPath)
+      this.$emit('select', this.selectedPath)
       this.selectedPath = ''
-      this.selectedFullPath = ''
+    },
+    fetchDirs(path, level) {
+      this.loadingDirs = true
+      return this.$axios
+        .$get(`/api/filesystem?path=${path}&level=${level}`)
+        .then((data) => {
+          console.log('Fetched directories', data.directories)
+          this.isPosix = !!data.posix
+          return data.directories
+        })
+        .catch((error) => {
+          console.error('Failed to get filesystem paths', error)
+          this.$toast.error('Failed to get filesystem paths')
+          return []
+        })
+        .finally(() => {
+          this.loadingDirs = false
+        })
     },
     async init() {
-      this.loadingFolders = true
-      this.allFolders = await this.$store.dispatch('libraries/loadFolders')
-      this.loadingFolders = false
+      this.initialLoad = true
+      this.rootDirs = await this.fetchDirs('', 0)
+      this.initialLoad = false
 
-      this.directories = this.allFolders
+      this.directories = this.rootDirs
       this.subdirs = []
       this.selectedPath = ''
-      this.selectedFullPath = ''
     }
   },
   mounted() {

client/components/modals/libraries/LibraryScannerSettings.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
+    <div class="flex items-center justify-between mb-2">
+      <h2 class="text-base md:text-lg text-gray-200">{{ $strings.HeaderMetadataOrderOfPrecedence }}</h2>
+      <ui-btn small @click="resetToDefault">{{ $strings.ButtonResetToDefault }}</ui-btn>
+    </div>
+
+    <div class="flex items-center justify-between md:justify-start mb-4">
+      <p class="text-sm text-gray-300 pr-2">{{ $strings.LabelMetadataOrderOfPrecedenceDescription }}</p>
+      <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex">
+        <a href="https://www.audiobookshelf.org/guides/book-scanner" target="_blank" class="inline-flex">
+          <span class="material-icons text-xl w-5">help_outline</span>
+        </a>
+      </ui-tooltip>
+    </div>
+
+    <draggable v-model="metadataSourceMapped" v-bind="dragOptions" class="list-group" draggable=".item" handle=".drag-handle" tag="ul" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+        <li v-for="(source, index) in metadataSourceMapped" :key="source.id" :class="source.include ? 'item' : 'opacity-50'" class="w-full px-2 flex items-center relative border border-white/10">
+          <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 mr-2 md:mr-4">reorder</span>
+          <div class="text-center py-1 w-8 min-w-8">
+            {{ source.include ? getSourceIndex(source.id) : '' }}
+          </div>
+          <div class="flex-grow inline-flex justify-between px-4 py-3">
+            {{ source.name }} <span v-if="source.include && (index === firstActiveSourceIndex || index === lastActiveSourceIndex)" class="px-2 italic font-semibold text-xs text-gray-400">{{ index === firstActiveSourceIndex ? $strings.LabelHighestPriority : $strings.LabelLowestPriority }}</span>
+          </div>
+          <div class="px-2 opacity-100">
+            <ui-toggle-switch v-model="source.include" :off-color="'error'" @input="includeToggled(source)" />
+          </div>
+        </li>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  components: {
+    draggable
+  },
+  props: {
+    library: {
+      type: Object,
+      default: () => null
+    },
+    processing: Boolean
+  },
+  data() {
+    return {
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      },
+      metadataSourceData: {
+        folderStructure: {
+          id: 'folderStructure',
+          name: 'Folder structure',
+          include: true
+        },
+        audioMetatags: {
+          id: 'audioMetatags',
+          name: 'Audio file meta tags OR ebook metadata',
+          include: true
+        },
+        nfoFile: {
+          id: 'nfoFile',
+          name: 'NFO file',
+          include: true
+        },
+        txtFiles: {
+          id: 'txtFiles',
+          name: 'desc.txt & reader.txt files',
+          include: true
+        },
+        opfFile: {
+          id: 'opfFile',
+          name: 'OPF file',
+          include: true
+        },
+        absMetadata: {
+          id: 'absMetadata',
+          name: 'Audiobookshelf metadata file',
+          include: true
+        }
+      },
+      metadataSourceMapped: []
+    }
+  },
+  computed: {
+    librarySettings() {
+      return this.library.settings || {}
+    },
+    mediaType() {
+      return this.library.mediaType
+    },
+    isBookLibrary() {
+      return this.mediaType === 'book'
+    },
+    firstActiveSourceIndex() {
+      return this.metadataSourceMapped.findIndex((source) => source.include)
+    },
+    lastActiveSourceIndex() {
+      return this.metadataSourceMapped.findLastIndex((source) => source.include)
+    }
+  },
+  methods: {
+    getSourceIndex(source) {
+      const activeSources = (this.librarySettings.metadataPrecedence || []).map((s) => s).reverse()
+      return activeSources.findIndex((s) => s === source) + 1
+    },
+    resetToDefault() {
+      this.metadataSourceMapped = []
+      for (const key in this.metadataSourceData) {
+        this.metadataSourceMapped.push({ ...this.metadataSourceData[key] })
+      }
+      this.metadataSourceMapped.reverse()
+
+      this.$emit('update', this.getLibraryData())
+    },
+    getLibraryData() {
+      const metadataSourceIds = this.metadataSourceMapped.map((source) => (source.include ? source.id : null)).filter((s) => s)
+      metadataSourceIds.reverse()
+      return {
+        settings: {
+          metadataPrecedence: metadataSourceIds
+        }
+      }
+    },
+    includeToggled(source) {
+      this.updated()
+    },
+    draggableUpdate() {
+      this.updated()
+    },
+    updated() {
+      this.$emit('update', this.getLibraryData())
+    },
+    init() {
+      const metadataPrecedence = this.librarySettings.metadataPrecedence || []
+      this.metadataSourceMapped = metadataPrecedence.map((source) => this.metadataSourceData[source]).filter((s) => s)
+
+      for (const sourceKey in this.metadataSourceData) {
+        if (!metadataPrecedence.includes(sourceKey)) {
+          const unusedSourceData = { ...this.metadataSourceData[sourceKey], include: false }
+          this.metadataSourceMapped.unshift(unusedSourceData)
+        }
+      }
+
+      this.metadataSourceMapped.reverse()
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/modals/libraries/LibrarySettings.vue

@@ -11,9 +11,9 @@
     </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>
@@ -38,6 +38,17 @@
         <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>
 
@@ -54,10 +65,11 @@ export default {
     return {
       provider: null,
       useSquareBookCovers: false,
-      disableWatcher: false,
+      enableWatcher: false,
       skipMatchingMediaWithAsin: false,
       skipMatchingMediaWithIsbn: false,
-      audiobooksOnly: false
+      audiobooksOnly: false,
+      hideSingleBookSeries: false
     }
   },
   computed: {
@@ -83,10 +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,
-          audiobooksOnly: !!this.audiobooksOnly
+          audiobooksOnly: !!this.audiobooksOnly,
+          hideSingleBookSeries: !!this.hideSingleBookSeries
         }
       }
     },
@@ -95,10 +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/libraries/LibraryTools.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="w-full h-full px-1 md:px-2 py-1 mb-4">
+    <div class="w-full border border-black-200 p-4 my-8">
+      <div class="flex flex-wrap items-center">
+        <div>
+          <p class="text-lg">Remove metadata files in library item folders</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
+          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    library: {
+      type: Object,
+      default: () => null
+    },
+    libraryId: String,
+    processing: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    librarySettings() {
+      return this.library.settings || {}
+    },
+    mediaType() {
+      return this.library.mediaType
+    },
+    isBookLibrary() {
+      return this.mediaType === 'book'
+    }
+  },
+  methods: {
+    removeAllMetadataClick(ext) {
+      const payload = {
+        message: `Are you sure you want to remove all metadata.${ext} files in your library item folders?`,
+        persistent: true,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeAllMetadataInLibrary(ext)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    removeAllMetadataInLibrary(ext) {
+      this.$emit('update:processing', true)
+      this.$axios
+        .$post(`/api/libraries/${this.libraryId}/remove-metadata?ext=${ext}`)
+        .then((data) => {
+          if (!data.found) {
+            this.$toast.info(`No metadata.${ext} files were found in library`)
+          } else if (!data.removed) {
+            this.$toast.success(`No metadata.${ext} files removed`)
+          } else {
+            this.$toast.success(`Successfully removed ${data.removed} metadata.${ext} files`)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to remove metadata files', error)
+          this.$toast.error('Failed to remove metadata files')
+        })
+        .finally(() => {
+          this.$emit('update:processing', false)
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/podcast/EpisodeFeed.vue

@@ -16,11 +16,11 @@
           v-for="(episode, index) in episodesList"
           :key="index"
           class="relative"
-          :class="itemEpisodeMap[episode.cleanUrl] ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          :class="getIsEpisodeDownloaded(episode) ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
           @click="toggleSelectEpisode(episode)"
         >
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="itemEpisodeMap[episode.cleanUrl]" class="material-icons text-success text-xl">download_done</span>
+            <span v-if="getIsEpisodeDownloaded(episode)" class="material-icons text-success text-xl">download_done</span>
             <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
@@ -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>
@@ -68,7 +68,9 @@ export default {
       selectAll: false,
       search: null,
       searchTimeout: null,
-      searchText: null
+      searchText: null,
+      downloadedEpisodeGuidMap: {},
+      downloadedEpisodeUrlMap: {}
     }
   },
   watch: {
@@ -93,53 +95,91 @@ export default {
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
     allDownloaded() {
-      return !this.episodesCleaned.some((episode) => !this.itemEpisodeMap[episode.cleanUrl])
+      return !this.episodesCleaned.some((episode) => !this.getIsEpisodeDownloaded(episode))
     },
     episodesSelected() {
       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 = {}
-      this.itemEpisodes.forEach((item) => {
-        if (item.enclosure) map[item.enclosure.url.split('?')[0]] = true
-      })
-      return map
+      return this.libraryItem?.media.episodes || []
     },
     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.getIsEpisodeDownloaded(ep)).length
+      return this.$getString('LabelSelectEpisodesShowing', [episodesNotDownloaded])
     }
   },
   methods: {
+    getIsEpisodeDownloaded(episode) {
+      if (episode.guid && !!this.downloadedEpisodeGuidMap[episode.guid]) {
+        return true
+      }
+      if (this.downloadedEpisodeUrlMap[episode.cleanUrl]) {
+        return true
+      }
+      return false
+    },
+    /**
+     * UPDATE: As of v2.4.5 guid is used for matching existing downloaded episodes if it is found on the RSS feed.
+     * Fallback to checking the clean url
+     * @see https://github.com/advplyr/audiobookshelf/issues/2207
+     *
+     * 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) {
-        if (this.itemEpisodeMap[episode.cleanUrl]) this.selectedEpisodes[episode.cleanUrl] = false
+      for (const episode of this.episodesList) {
+        if (this.getIsEpisodeDownloaded(episode)) this.selectedEpisodes[episode.cleanUrl] = false
         else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
       }
     },
     checkSetIsSelectedAll() {
-      for (const episode of this.episodesCleaned) {
-        if (!this.itemEpisodeMap[episode.cleanUrl] && !this.selectedEpisodes[episode.cleanUrl]) {
+      for (const episode of this.episodesList) {
+        if (!this.getIsEpisodeDownloaded(episode) && !this.selectedEpisodes[episode.cleanUrl]) {
           this.selectAll = false
           return
         }
@@ -147,19 +187,19 @@ export default {
       this.selectAll = true
     },
     toggleSelectEpisode(episode) {
-      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
+      if (this.getIsEpisodeDownloaded(episode)) 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,22 +214,29 @@ 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
         })
     },
     init() {
+      this.downloadedEpisodeGuidMap = {}
+      this.downloadedEpisodeUrlMap = {}
+
+      this.itemEpisodes.forEach((episode) => {
+        if (episode.guid) this.downloadedEpisodeGuidMap[episode.guid] = episode.id
+        if (episode.enclosure?.url) this.downloadedEpisodeUrlMap[this.getCleanEpisodeUrl(episode.enclosure.url)] = episode.id
+      })
+
       this.episodesCleaned = this.episodes
         .filter((ep) => ep.enclosure?.url)
         .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" :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)">
+      <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 + 1 ? 'bg-black-200' : ''" @click="setPage(index + 1)">
         <p class="text-sm truncate">{{ file }}</p>
       </div>
     </div>
@@ -14,34 +14,40 @@
       </div>
     </div>
 
-    <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 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">
+    <div v-if="numPages" class="absolute top-0 left-4 sm: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 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">
+    <div v-if="comicMetadata" class="absolute top-0 left-16 sm: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>
+    <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-28 sm:left-32' : 'left-16 sm:left-20'">
+      <span class="material-icons text-xl">download</span>
+    </a>
+
+    <div v-if="numPages" class="absolute top-0 right-14 sm: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 v-if="mainImg" class="absolute top-0 right-36 sm:right-40 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">
+      <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>
 
-    <div class="overflow-hidden w-full h-full relative">
-      <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="w-full h-full relative">
+      <div v-show="canGoPrev" ref="prevButton" 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 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
+      <div v-show="canGoNext" ref="nextButton" 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>
       </div>
-      <div class="h-full flex justify-center">
-        <img v-if="mainImg" :src="mainImg" class="object-contain h-full m-auto" />
+      <div ref="imageContainer" class="w-full h-full relative overflow-auto">
+        <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
+          <img v-if="mainImg" :style="{ minWidth: scale + '%', width: scale + '%' }" :src="mainImg" class="object-contain m-auto" />
+        </div>
       </div>
-
       <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
         <ui-loading-indicator />
       </div>
@@ -54,6 +60,10 @@ import Path from 'path'
 import { Archive } from 'libarchive.js/main.js'
 import { CompressedFile } from 'libarchive.js/src/compressed-file'
 
+// This is % with respect to the screen width
+const MAX_SCALE = 400
+const MIN_SCALE = 10
+
 Archive.init({
   workerUrl: '/libarchive/worker-bundle.js'
 })
@@ -81,7 +91,8 @@ export default {
       showInfoMenu: false,
       loadTimeout: null,
       loadedFirstPage: false,
-      comicMetadata: null
+      comicMetadata: null,
+      scale: 80
     }
   },
   watch: {
@@ -109,10 +120,10 @@ export default {
       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
@@ -136,6 +147,12 @@ export default {
           return p
         }) || []
       )
+    },
+    canScaleUp() {
+      return this.scale < MAX_SCALE
+    },
+    canScaleDown() {
+      return this.scale > MIN_SCALE
     }
   },
   methods: {
@@ -303,8 +320,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
@@ -331,10 +348,37 @@ export default {
       orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))
 
       this.pages = orderedImages
+    },
+    zoomIn() {
+      this.scale += 10
+    },
+    zoomOut() {
+      this.scale -= 10
+    },
+    scroll(event) {
+      const imageContainer = this.$refs.imageContainer
+
+      imageContainer.scrollBy({
+        top: event.deltaY,
+        left: event.deltaX,
+        behavior: 'auto'
+      })
     }
   },
-  mounted() {},
-  beforeDestroy() {}
+  mounted() {
+    const prevButton = this.$refs.prevButton
+    const nextButton = this.$refs.nextButton
+
+    prevButton.addEventListener('wheel', this.scroll, { passive: false })
+    nextButton.addEventListener('wheel', this.scroll, { passive: false })
+  },
+  beforeDestroy() {
+    const prevButton = this.$refs.prevButton
+    const nextButton = this.$refs.nextButton
+
+    prevButton.removeEventListener('wheel', this.scroll, { passive: false })
+    nextButton.removeEventListener('wheel', this.scroll, { passive: false })
+  }
 }
 </script>
 

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>
@@ -39,7 +39,15 @@ export default {
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null
+      rendition: null,
+      chapters: [],
+      ereaderSettings: {
+        theme: 'dark',
+        font: 'serif',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      }
     }
   },
   watch: {
@@ -61,10 +69,6 @@ export default {
     hasNext() {
       return !this.rendition?.location?.atEnd
     },
-    /** @returns {Array<ePub.NavItem>} */
-    chapters() {
-      return this.book ? this.book.navigation.toc : []
-    },
     userMediaProgress() {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
@@ -92,18 +96,87 @@ export default {
         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.themes.font(settings.font)
+      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)
     },
+    /** @returns {object} Returns the chapter that the `position` in the book is in */
+    findChapterFromPosition(chapters, position) {
+      let foundChapter
+      for (let i = 0; i < chapters.length; i++) {
+        if (position >= chapters[i].start && (!chapters[i + 1] || position < chapters[i + 1].start)) {
+          foundChapter = chapters[i]
+          if (chapters[i].subitems && chapters[i].subitems.length > 0) {
+            return this.findChapterFromPosition(chapters[i].subitems, position, foundChapter)
+          }
+          break
+        }
+      }
+      return foundChapter
+    },
+    /** @returns {Array} Returns an array of chapters that only includes chapters with query results */
+    async searchBook(query) {
+      const chapters = structuredClone(await this.chapters)
+      const searchResults = await Promise.all(this.book.spine.spineItems.map((item) => item.load(this.book.load.bind(this.book)).then(item.find.bind(item, query)).finally(item.unload.bind(item))))
+      const mergedResults = [].concat(...searchResults)
+
+      mergedResults.forEach((chapter) => {
+        chapter.start = this.book.locations.percentageFromCfi(chapter.cfi)
+        const foundChapter = this.findChapterFromPosition(chapters, chapter.start)
+        if (foundChapter) foundChapter.searchResults.push(chapter)
+      })
+
+      let filteredResults = chapters.filter(function f(o) {
+        if (o.searchResults.length) return true
+        if (o.subitems.length) {
+          return (o.subitems = o.subitems.filter(f)).length
+        }
+      })
+      return filteredResults
+    },
     keyUp(e) {
       const rtl = this.book.package.metadata.direction === 'rtl'
       if ((e.keyCode || e.which) == 37) {
@@ -242,35 +315,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.savedEbookLocation || reader.book.locations.start)
 
-      // load style
-      reader.rendition.themes.default({ '*': { color: '#fff!important', 'background-color': 'rgb(35 35 35)!important' }, a: { color: '#fff!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
@@ -282,12 +350,87 @@ export default {
             this.checkSaveLocations(reader.book.locations.save())
           })
         }
+        this.getChapters()
       })
     },
+    getChapters() {
+      // Load the list of chapters in the book. See https://github.com/futurepress/epub.js/issues/759
+      const toc = this.book?.navigation?.toc || []
+
+      const tocTree = []
+
+      const resolveURL = (url, relativeTo) => {
+        // see https://github.com/futurepress/epub.js/issues/1084
+        // HACK-ish: abuse the URL API a little to resolve the path
+        // the base needs to be a valid URL, or it will throw a TypeError,
+        // so we just set a random base URI and remove it later
+        const base = 'https://example.invalid/'
+        return new URL(url, base + relativeTo).href.replace(base, '')
+      }
+
+      const basePath = this.book.packaging.navPath || this.book.packaging.ncxPath
+
+      const createTree = async (toc, parent) => {
+        const promises = toc.map(async (tocItem, i) => {
+          const href = resolveURL(tocItem.href, basePath)
+          const id = href.split('#')[1]
+          const item = this.book.spine.get(href)
+          await item.load(this.book.load.bind(this.book))
+          const el = id ? item.document.getElementById(id) : item.document.body
+
+          const cfi = item.cfiFromElement(el)
+
+          parent[i] = {
+            title: tocItem.label.trim(),
+            subitems: [],
+            href,
+            cfi,
+            start: this.book.locations.percentageFromCfi(cfi),
+            end: null, // set by flattenChapters()
+            id: null, // set by flattenChapters()
+            searchResults: []
+          }
+
+          if (tocItem.subitems) {
+            await createTree(tocItem.subitems, parent[i].subitems)
+          }
+        })
+        await Promise.all(promises)
+      }
+      return createTree(toc, tocTree).then(() => {
+        this.chapters = tocTree
+      })
+    },
+    flattenChapters(chapters) {
+      // Convert the nested epub chapters into something that looks like audiobook chapters for player-ui
+      const unwrap = (chapters) => {
+        return chapters.reduce((acc, chapter) => {
+          return chapter.subitems ? [...acc, chapter, ...unwrap(chapter.subitems)] : [...acc, chapter]
+        }, [])
+      }
+      let flattenedChapters = unwrap(chapters)
+
+      flattenedChapters = flattenedChapters.sort((a, b) => a.start - b.start)
+      for (let i = 0; i < flattenedChapters.length; i++) {
+        flattenedChapters[i].id = i
+        if (i < flattenedChapters.length - 1) {
+          flattenedChapters[i].end = flattenedChapters[i + 1].start
+        } else {
+          flattenedChapters[i].end = 1
+        }
+      }
+      return flattenedChapters
+    },
     resize() {
       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/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>

client/components/readers/Reader.vue

@@ -1,36 +1,63 @@
 <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" :keep-progress="keepProgress" :file-id="ebookFileId" />
+    <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 class="p-4 h-full">
-        <p class="text-lg font-semibold mb-2">Table of Contents</p>
-        <div class="tocContent">
+    <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
+    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
+      <div class="flex flex-col p-4 h-full">
+        <div class="flex items-center mb-2">
+          <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
+            <span class="material-icons text-2xl">arrow_back</span>
+          </button>
+
+          <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
+        </div>
+        <form @submit.prevent="searchBook" @click.stop.prevent>
+          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" class="h-8 w-full text-sm flex mb-2" />
+        </form>
+
+        <div class="overflow-y-auto">
+          <div v-if="isSearching && !this.searchResults.length" class="w-full h-40 justify-center">
+            <p class="text-center text-xl py-4">{{ $strings.MessageNoResults }}</p>
+          </div>
+
           <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>
+            <li v-for="chapter in isSearching ? this.searchResults : chapters" :key="chapter.id" class="py-1">
+              <a :href="chapter.href" class="opacity-80 hover:opacity-100" @click.prevent="goToChapter(chapter.href)">{{ chapter.title }}</a>
+              <div v-for="searchResults in chapter.searchResults" :key="searchResults.cfi" class="text-sm py-1 pl-4">
+                <a :href="searchResults.cfi" class="opacity-50 hover:opacity-100" @click.prevent="goToChapter(searchResults.cfi)">{{ searchResults.excerpt }}</a>
+              </div>
+
               <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="goToChapter(subchapter.href)">{{ subchapter.title }}</a>
+                  <div v-for="subChapterSearchResults in subchapter.searchResults" :key="subChapterSearchResults.cfi" class="text-sm py-1 pl-4">
+                    <a :href="subChapterSearchResults.cfi" class="opacity-50 hover:opacity-100" @click.prevent="goToChapter(subChapterSearchResults.cfi)">{{ subChapterSearchResults.excerpt }}</a>
+                  </div>
                 </li>
               </ul>
             </li>
@@ -38,6 +65,47 @@
         </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.theme" @input="settingsUpdated" />
+        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontFamily }}:</p>
+          </div>
+          <ui-toggle-btns v-model="ereaderSettings.font" :items="themeItems.font" @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 +113,25 @@
 export default {
   data() {
     return {
+      touchstartX: 0,
+      touchstartY: 0,
+      touchendX: 0,
+      touchendY: 0,
+      touchstartTime: 0,
+      touchIdentifier: null,
       chapters: [],
-      tocOpen: false
+      isSearching: false,
+      searchResults: [],
+      searchQuery: '',
+      tocOpen: false,
+      showSettings: false,
+      ereaderSettings: {
+        theme: 'dark',
+        font: 'serif',
+        fontScale: 100,
+        lineSpacing: 115,
+        spread: 'auto'
+      }
     }
   },
   watch: {
@@ -65,6 +150,46 @@ 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 {
+        theme: [
+          {
+            text: this.$strings.LabelThemeDark,
+            value: 'dark'
+          },
+          {
+            text: this.$strings.LabelThemeLight,
+            value: 'light'
+          }
+        ],
+        font: [
+          {
+            text: 'Sans',
+            value: 'sans-serif'
+          },
+          {
+            text: 'Serif',
+            value: 'serif'
+          }
+        ]
+      }
+    },
     componentName() {
       if (this.ebookType === 'epub') return 'readers-epub-reader'
       else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
@@ -75,11 +200,8 @@ export default {
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
-    hasToC() {
-      return this.isEpub
-    },
     hasSettings() {
-      return false
+      return this.isEpub
     },
     abTitle() {
       return this.mediaMetadata.title
@@ -144,14 +266,32 @@ export default {
     },
     ebookFileId() {
       return this.$store.state.ereaderFileId
+    },
+    isDarkTheme() {
+      return this.ereaderSettings.theme === 'dark'
     }
   },
   methods: {
+    goToChapter(uri) {
+      this.toggleToC()
+      this.$refs.readerComponent.goToChapter(uri)
+    },
+    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
 
@@ -163,23 +303,95 @@ export default {
         this.close()
       }
     },
+    async searchBook() {
+      if (this.searchQuery.length > 1) {
+        this.searchResults = await this.$refs.readerComponent.searchBook(this.searchQuery)
+        this.isSearching = true
+      } else {
+        this.isSearching = false
+        this.searchResults = []
+      }
+    },
     next() {
       if (this.$refs.readerComponent?.next) this.$refs.readerComponent.next()
     },
     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()
     },
     close() {
       this.unregisterListeners()
+      this.isSearching = false
+      this.searchQuery = ''
       this.show = false
     }
   },
@@ -193,10 +405,6 @@ export default {
 </script>
 
 <style>
-.tocContent {
-  height: calc(100% - 36px);
-  overflow-y: auto;
-}
 #reader {
   height: 100%;
 }

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/stats/YearInReview.vue

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    variant: {
+      type: Number,
+      default: 0
+    },
+    year: Number,
+    processing: Boolean
+  },
+  data() {
+    return {
+      canvas: null,
+      dataUrl: null,
+      yearStats: null
+    }
+  },
+  watch: {
+    variant() {
+      this.init()
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 800
+      canvas.height = 800
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
+        ctx.fillStyle = grd1
+        ctx.strokeStyle = '#C0C0C088'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
+        ctx.fillText(text, x, y)
+      }
+
+      const addIcon = (icon, color, fontSize, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.fillText(icon, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      const bookCovers = this.yearStats.finishedBooksWithCovers
+      bookCovers.push(...this.yearStats.booksWithCovers)
+
+      let finishedBookCoverImgs = {}
+
+      if (bookCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-130, -120)
+        for (let x = 0; x < 5; x++) {
+          for (let y = 0; y < 5; y++) {
+            const coverIndex = index % bookCovers.length
+            let libraryItemId = bookCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
+                resolve()
+                if (this.yearStats.finishedBooksWithCovers.includes(libraryItemId) && !finishedBookCoverImgs[libraryItemId]) {
+                  finishedBookCoverImgs[libraryItemId] = {
+                    img,
+                    sx,
+                    sy,
+                    sw
+                  }
+                }
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+        ctx.restore()
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
+
+      // Top text
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
+
+      // Top left box
+      createRoundedRect(50, 100, 340, 160)
+      addText(this.yearStats.numBooksFinished, '64px', 'bold', 'white', '0px', 160, 165)
+      addText('books finished', '28px', 'normal', tanColor, '0px', 160, 210)
+      const readIconPath = new Path2D()
+      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 2, d: 2, e: 100, f: 160 })
+      ctx.fillStyle = '#ffffff'
+      ctx.fill(readIconPath)
+
+      // Box top right
+      createRoundedRect(410, 100, 340, 160)
+      addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165)
+      addText('spent listening', '28px', 'normal', tanColor, '0px', 500, 205)
+      addIcon('watch_later', 'white', '52px', 440, 180)
+
+      // Box bottom left
+      createRoundedRect(50, 280, 340, 160)
+      addText(this.yearStats.totalListeningSessions, '64px', 'bold', 'white', '0px', 160, 345)
+      addText('sessions', '28px', 'normal', tanColor, '1px', 160, 390)
+      addIcon('headphones', 'white', '52px', 95, 360)
+
+      // Box bottom right
+      createRoundedRect(410, 280, 340, 160)
+      addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345)
+      addText('books listened to', '28px', 'normal', tanColor, '0px', 500, 390)
+      addIcon('local_library', 'white', '52px', 440, 360)
+
+      if (!this.variant) {
+        // Text stats
+        const topNarrator = this.yearStats.mostListenedNarrator
+        if (topNarrator) {
+          addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520)
+          addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330)
+          addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599)
+        }
+
+        const topGenre = this.yearStats.topGenres[0]
+        if (topGenre) {
+          addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520)
+          addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330)
+          addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599)
+        }
+
+        const topAuthor = this.yearStats.topAuthors[0]
+        if (topAuthor) {
+          addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670)
+          addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330)
+          addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749)
+        }
+
+        if (this.yearStats.mostListenedMonth?.time) {
+          const jsdate = new Date(this.year, this.yearStats.mostListenedMonth.month, 1)
+          const monthName = this.$formatJsDate(jsdate, 'LLLL')
+          addText('TOP MONTH', '24px', 'normal', tanColor, '1px', 430, 670)
+          addText(monthName, '36px', 'bolder', 'white', '0px', 430, 714, 330)
+          addText(this.$elapsedPrettyExtended(this.yearStats.mostListenedMonth.time, true, false), '24px', 'lighter', 'white', '1px', 430, 749)
+        }
+      } else if (this.variant === 1) {
+        // Bottom images
+        finishedBookCoverImgs = Object.values(finishedBookCoverImgs)
+        if (finishedBookCoverImgs.length > 0) {
+          ctx.textAlign = 'center'
+          addText('Some books finished this year...', '28px', 'normal', tanColor, '0px', canvas.width / 2, 530)
+
+          for (let i = 0; i < Math.min(5, finishedBookCoverImgs.length); i++) {
+            let imgToAdd = finishedBookCoverImgs[i]
+            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 570, 140, 140)
+          }
+        }
+      } else if (this.variant === 2) {
+        // Text stats
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 524)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 584 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topGenres.length) {
+          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 524)
+          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
+            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 584 + i * 60, 330)
+          }
+        }
+      }
+
+      this.canvas = canvas
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    refresh() {
+      this.init()
+    },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreview.png', { type: blob.type })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/stats/YearInReviewBanner.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-1 sm:p-4 mb-4">
+    <!-- hack to get icon fonts loaded on init -->
+    <div class="h-0 w-0 overflow-hidden opacity-0">
+      <span class="material-icons-outlined">close</span>
+      <span class="abs-icons icon-audiobookshelf" />
+    </div>
+
+    <div class="flex items-center">
+      <p class="hidden md:block text-xl font-semibold">{{ yearInReviewYear }} Year in Review</p>
+      <div class="hidden md:block flex-grow" />
+      <ui-btn class="w-full md:w-auto" @click.stop="clickShowYearInReview">{{ showYearInReview ? 'Hide Year in Review' : 'See Year in Review' }}</ui-btn>
+    </div>
+
+    <!-- your year in review -->
+    <div v-if="showYearInReview">
+      <div class="w-full h-px bg-slate-200/10 my-4" />
+
+      <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
+        <!-- previous button -->
+        <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
+          <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+          <span class="hidden sm:inline-block pr-2">Previous</span>
+        </ui-btn>
+        <!-- share button -->
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview"> Share </ui-btn>
+
+        <div class="flex-grow" />
+        <p class="hidden sm:block text-lg font-semibold">Your Year in Review ({{ yearInReviewVariant + 1 }})</p>
+        <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewVariant + 1 }}</p>
+        <div class="flex-grow" />
+
+        <!-- refresh button -->
+        <ui-btn small :disabled="processingYearInReview" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReview">
+          <span class="hidden sm:inline-block">Refresh</span>
+          <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+        </ui-btn>
+        <!-- next button -->
+        <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
+          <span class="hidden sm:inline-block pl-2">Next</span>
+          <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+        </ui-btn>
+      </div>
+      <stats-year-in-review ref="yearInReview" :variant="yearInReviewVariant" :year="yearInReviewYear" :processing.sync="processingYearInReview" />
+
+      <!-- your year in review short -->
+      <div class="w-full max-w-[800px] mx-auto my-4">
+        <!-- share button -->
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex sm:hidden items-center font-semibold mb-1" @click="shareYearInReviewShort"> Share </ui-btn>
+        <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
+      </div>
+
+      <!-- your server in review -->
+      <div v-if="isAdminOrUp" class="w-full max-w-[800px] mx-auto mb-2 mt-4 border-t pt-4 border-white/10">
+        <div class="flex items-center justify-center mb-2">
+          <!-- previous button -->
+          <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
+            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="hidden sm:inline-block pr-2">Previous</span>
+          </ui-btn>
+          <!-- share button -->
+          <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer"> Share </ui-btn>
+
+          <div class="flex-grow" />
+          <p class="hidden sm:block text-lg font-semibold">Server Year in Review ({{ yearInReviewServerVariant + 1 }})</p>
+          <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewServerVariant + 1 }}</p>
+          <div class="flex-grow" />
+
+          <!-- refresh button -->
+          <ui-btn small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReviewServer">
+            <span class="hidden sm:inline-block">Refresh</span>
+            <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+          </ui-btn>
+          <!-- next button -->
+          <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
+            <span class="hidden sm:inline-block pl-2">Next</span>
+            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+          </ui-btn>
+        </div>
+      </div>
+      <stats-year-in-review-server v-if="isAdminOrUp" ref="yearInReviewServer" :year="yearInReviewYear" :variant="yearInReviewServerVariant" :processing.sync="processingYearInReviewServer" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showYearInReview: false,
+      yearInReviewYear: 0,
+      yearInReviewVariant: 0,
+      yearInReviewServerVariant: 0,
+      processingYearInReview: false,
+      processingYearInReviewShort: false,
+      processingYearInReviewServer: false,
+      showShareButton: false
+    }
+  },
+  computed: {
+    isAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    }
+  },
+  methods: {
+    shareYearInReviewServer() {
+      this.$refs.yearInReviewServer.share()
+    },
+    shareYearInReview() {
+      this.$refs.yearInReview.share()
+    },
+    shareYearInReviewShort() {
+      this.$refs.yearInReviewShort.share()
+    },
+    refreshYearInReviewServer() {
+      this.$refs.yearInReviewServer.refresh()
+    },
+    refreshYearInReview() {
+      this.$refs.yearInReview.refresh()
+      this.$refs.yearInReviewShort.refresh()
+    },
+    clickShowYearInReview() {
+      this.showYearInReview = !this.showYearInReview
+    }
+  },
+  beforeMount() {
+    this.yearInReviewYear = new Date().getFullYear()
+    // When not December show previous year
+    if (new Date().getMonth() < 11) {
+      this.yearInReviewYear--
+    }
+  },
+  mounted() {
+    if (typeof navigator.share !== 'undefined' && navigator.share) {
+      this.showShareButton = true
+    } else {
+      console.warn('Navigator.share not supported')
+    }
+  }
+}
+</script>

client/components/stats/YearInReviewServer.vue

@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    variant: {
+      type: Number,
+      default: 0
+    },
+    processing: Boolean,
+    year: Number
+  },
+  data() {
+    return {
+      canvas: null,
+      dataUrl: null,
+      yearStats: null
+    }
+  },
+  watch: {
+    variant() {
+      this.init()
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 800
+      canvas.height = 800
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
+        ctx.fillStyle = grd1
+        ctx.strokeStyle = '#C0C0C088'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
+        ctx.fillText(text, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      let imgsToAdd = {}
+
+      if (this.yearStats.booksAddedWithCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-130, -120)
+        for (let x = 0; x < 5; x++) {
+          for (let y = 0; y < 5; y++) {
+            const coverIndex = index % this.yearStats.booksAddedWithCovers.length
+            let libraryItemId = this.yearStats.booksAddedWithCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
+                if (!imgsToAdd[libraryItemId]) {
+                  imgsToAdd[libraryItemId] = {
+                    img,
+                    sx,
+                    sy,
+                    sw
+                  }
+                }
+                resolve()
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+        ctx.restore()
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
+
+      // Top text
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
+
+      // Top left box
+      createRoundedRect(40, 100, 230, 100)
+      ctx.textAlign = 'center'
+      addText(this.yearStats.numBooksAdded, '48px', 'bold', 'white', '0px', 155, 140)
+      addText('books added', '18px', 'normal', tanColor, '0px', 155, 170)
+
+      // Box top right
+      createRoundedRect(285, 100, 230, 100)
+      addText(this.yearStats.numAuthorsAdded, '48px', 'bold', 'white', '0px', 400, 140)
+      addText('authors added', '18px', 'normal', tanColor, '0px', 400, 170)
+
+      // Box bottom left
+      createRoundedRect(530, 100, 230, 100)
+      addText(this.yearStats.numListeningSessions, '48px', 'bold', 'white', '0px', 645, 140)
+      addText('sessions', '18px', 'normal', tanColor, '1px', 645, 170)
+
+      // Text stats
+      if (this.yearStats.totalBooksAddedSize) {
+        addText('Your book collection grew to...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 260)
+        addText(this.$bytesPretty(this.yearStats.totalBooksSize), '36px', 'bolder', 'white', '0px', canvas.width / 2, 300)
+        addText('+' + this.$bytesPretty(this.yearStats.totalBooksAddedSize), '20px', 'lighter', 'white', '0px', canvas.width / 2, 330)
+      }
+
+      if (this.yearStats.totalBooksAddedDuration) {
+        addText('With a total duration of...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 400)
+        addText(this.$elapsedPrettyExtended(this.yearStats.totalBooksDuration, true, false), '36px', 'bolder', 'white', '0px', canvas.width / 2, 440)
+        addText('+' + this.$elapsedPrettyExtended(this.yearStats.totalBooksAddedDuration, true, false), '20px', 'lighter', 'white', '0px', canvas.width / 2, 470)
+      }
+
+      if (!this.variant) {
+        // Bottom images
+        imgsToAdd = Object.values(imgsToAdd)
+        if (imgsToAdd.length > 0) {
+          addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540)
+
+          for (let i = 0; i < Math.min(5, imgsToAdd.length); i++) {
+            let imgToAdd = imgsToAdd[i]
+            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 580, 140, 140)
+          }
+        }
+      } else if (this.variant === 1) {
+        // Text stats
+        ctx.textAlign = 'left'
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topNarrators.length) {
+          addText('TOP NARRATORS', '24px', 'normal', tanColor, '1px', 430, 549)
+          for (let i = 0; i < this.yearStats.topNarrators.length; i++) {
+            addText(this.yearStats.topNarrators[i].name, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
+          }
+        }
+      } else if (this.variant === 2) {
+        // Text stats
+        ctx.textAlign = 'left'
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topGenres.length) {
+          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 549)
+          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
+            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
+          }
+        }
+      }
+
+      this.canvas = canvas
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
+    refresh() {
+      this.init()
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      this.yearStats = await this.$axios.$get(`/api/stats/year/${this.year}`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/stats/YearInReviewShort.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <div v-if="processing" class="max-w-[600px] h-32 sm:h-[200px] flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    year: Number
+  },
+  data() {
+    return {
+      canvas: null,
+      dataUrl: null,
+      yearStats: null
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 600
+      canvas.height = 200
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
+        ctx.fillStyle = grd1
+        ctx.strokeStyle = '#C0C0C088'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
+        ctx.fillText(text, x, y)
+      }
+
+      const addIcon = (icon, color, fontSize, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.fillText(icon, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      const bookCovers = this.yearStats.finishedBooksWithCovers
+      bookCovers.push(...this.yearStats.booksWithCovers)
+
+      if (bookCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-10, -90)
+        for (let x = 0; x < 4; x++) {
+          for (let y = 0; y < 3; y++) {
+            const coverIndex = index % bookCovers.length
+            let libraryItemId = bookCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 155 * x, 155 * y, 155, 155)
+                resolve()
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+        ctx.restore()
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
+
+      // Top text
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
+
+      // Top left box
+      createRoundedRect(15, 75, 280, 110)
+      addText(this.yearStats.numBooksFinished, '48px', 'bold', 'white', '0px', 105, 120)
+      addText('books finished', '20px', 'normal', tanColor, '0px', 105, 155)
+      const readIconPath = new Path2D()
+      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.5, d: 1.5, e: 55, f: 115 })
+      ctx.fillStyle = '#ffffff'
+      ctx.fill(readIconPath)
+
+      createRoundedRect(305, 75, 280, 110)
+      addText(this.yearStats.numBooksListened, '48px', 'bold', 'white', '0px', 400, 120)
+      addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155)
+      addIcon('local_library', 'white', '42px', 345, 130)
+
+      this.canvas = canvas
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreviewshort.png', { type: blob.type })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
+    refresh() {
+      this.init()
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

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) {
@@ -160,6 +164,7 @@ export default {
       this.$axios
         .$get('/api/backups')
         .then((data) => {
+          this.$emit('loaded', data.backupLocation)
           this.setBackups(data.backups || [])
         })
         .catch((error) => {

client/components/tables/EbookFilesTable.vue

@@ -6,7 +6,7 @@
         <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>
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $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>
@@ -20,7 +20,7 @@
             <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="userCanDelete || userCanDownload || userIsAdmin" class="text-center w-16"></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" />
@@ -58,23 +58,27 @@ export default {
     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')
-    },
-    ebookFileIno() {
-      return this.libraryItem.media.ebookFile?.ino
-    },
-    audioFiles() {
-      if (this.libraryItem.mediaType === 'podcast') {
-        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile) || []
-      }
-      return this.libraryItem.media?.audioFiles || []
     }
   },
   methods: {
+    toggleFullPath() {
+      this.showFullPath = !this.showFullPath
+      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
+    },
     readEbook(fileIno) {
       this.$store.commit('showEReader', { libraryItem: this.libraryItem, keepProgress: false, fileId: fileIno })
     },
@@ -82,6 +86,10 @@ export default {
       this.showFiles = !this.showFiles
     }
   },
-  mounted() {}
+  mounted() {
+    if (this.userIsAdmin) {
+      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
+    }
+  }
 }
 </script>

client/components/tables/LibraryFilesTable.vue

@@ -6,13 +6,13 @@
         <span class="text-sm font-mono">{{ files.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>
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $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">
+      <div class="w-full" v-if="showFiles">
         <table class="text-sm tracksTable">
           <tr>
             <th class="text-left px-4">{{ $strings.LabelPath }}</th>
@@ -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>
 
@@ -70,7 +70,7 @@ export default {
     },
     audioFiles() {
       if (this.libraryItem.mediaType === 'podcast') {
-        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile) || []
+        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile).filter((af) => af) || []
       }
       return this.libraryItem.media?.audioFiles || []
     },
@@ -84,6 +84,10 @@ export default {
     }
   },
   methods: {
+    toggleFullPath() {
+      this.showFullPath = !this.showFullPath
+      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
+    },
     clickBar() {
       this.showFiles = !this.showFiles
     },
@@ -93,6 +97,9 @@ export default {
     }
   },
   mounted() {
+    if (this.userIsAdmin) {
+      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
+    }
     this.showFiles = this.expanded
   }
 }

client/components/tables/TracksTable.vue

@@ -6,7 +6,7 @@
         <span class="text-sm font-mono">{{ tracks.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>
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
       <nuxt-link v-if="userCanUpdate && !isFile" :to="`/audiobook/${libraryItemId}/edit`" class="mr-2 md:mr-4" @mousedown.prevent>
         <ui-btn small color="primary">{{ $strings.ButtonManageTracks }}</ui-btn>
       </nuxt-link>
@@ -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>
 
@@ -74,6 +74,10 @@ export default {
     }
   },
   methods: {
+    toggleFullPath() {
+      this.showFullPath = !this.showFullPath
+      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
+    },
     clickBar() {
       this.showTracks = !this.showTracks
     },
@@ -82,6 +86,10 @@ export default {
       this.showAudioFileDataModal = true
     }
   },
-  mounted() {}
+  mounted() {
+    if (this.userIsAdmin) {
+      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
+    }
+  }
 }
 </script>

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">
@@ -48,8 +52,6 @@
         </tr>
       </table>
     </div>
-
-    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
@@ -58,8 +60,6 @@ export default {
   data() {
     return {
       users: [],
-      selectedAccount: null,
-      showAccountModal: false,
       isDeletingUser: false
     }
   },
@@ -83,6 +83,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]))) {
@@ -104,17 +110,12 @@ export default {
           })
       }
     },
-    clickAddUser() {
-      this.selectedAccount = null
-      this.showAccountModal = true
-    },
     editUser(user) {
-      this.selectedAccount = user
-      this.showAccountModal = true
+      this.$emit('edit', user)
     },
     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

client/components/tables/collection/BookTableRow.vue

@@ -26,11 +26,11 @@
           </div>
           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
             <template v-for="(author, index) in bookAuthors">
-              <nuxt-link :key="author.id" :to="`/author/${author.id}?library=${book.libraryId}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
+              <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
             </template>
           </div>
-          <p class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
+          <p v-if="media.duration" class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
         </div>
       </div>
     </div>
@@ -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>
@@ -46,13 +42,10 @@ export default {
       return this.$store.getters['libraries/getCurrentLibrary']
     },
     currentLibraryId() {
-      return this.currentLibrary ? this.currentLibrary.id : null
+      return this.currentLibrary?.id || null
     },
     libraries() {
       return this.$store.getters['libraries/getSortedLibraries']()
-    },
-    libraryScans() {
-      return this.$store.state.scanners.libraryScans
     }
   },
   methods: {

client/components/tables/library/LibraryItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>
@@ -9,11 +9,14 @@
 
     <div class="flex-grow" />
 
+    <!-- Scan button only shown on desktop -->
+    <ui-btn v-if="!isScanning && !isDeleting" color="bg" class="hidden md:block mx-2 text-xs" :padding-y="1" :padding-x="3" @click.stop="scanBtnClick">{{ this.$strings.ButtonScan }}</ui-btn>
+
     <!-- Desktop context menu icon -->
-    <ui-context-menu-dropdown v-if="!libraryScan && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
+    <ui-context-menu-dropdown v-if="!isScanning && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
 
     <!-- Mobile context menu icon -->
-    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
+    <span v-if="!isScanning && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
 
     <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
       <svg viewBox="0 0 24 24" class="w-6 h-6">
@@ -48,8 +51,8 @@ export default {
     isHovering() {
       return this.mouseover && !this.dragging
     },
-    libraryScan() {
-      return this.$store.getters['scanners/getLibraryScan'](this.library.id)
+    isScanning() {
+      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.library.id)
     },
     mediaType() {
       return this.library.mediaType
@@ -71,11 +74,6 @@ export default {
           text: this.$strings.ButtonScan,
           action: 'scan',
           value: 'scan'
-        },
-        {
-          text: this.$strings.ButtonForceReScan,
-          action: 'force-scan',
-          value: 'force-scan'
         }
       ]
       if (this.isBookLibrary) {
@@ -94,14 +92,17 @@ export default {
     }
   },
   methods: {
+    scanBtnClick() {
+      this.scan()
+    },
     contextMenuAction({ action }) {
       this.showMobileMenu = false
       if (action === 'edit') {
         this.editClick()
       } else if (action === 'scan') {
         this.scan()
-      } else if (action === 'force-scan') {
-        this.forceScan()
+      } else if (action === 'force-rescan') {
+        this.scan(true)
       } else if (action === 'match-books') {
         this.matchAll()
       } else if (action === 'delete') {
@@ -126,37 +127,17 @@ export default {
     editClick() {
       this.$emit('edit', this.library)
     },
-    scan() {
+    scan(force = false) {
       this.$store
-        .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id })
+        .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force })
         .then(() => {
-          this.$toast.success(this.$strings.ToastLibraryScanStarted)
+          // this.$toast.success(this.$strings.ToastLibraryScanStarted)
         })
         .catch((error) => {
           console.error('Failed to start scan', error)
           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

@@ -21,7 +21,7 @@
           </div>
           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
             <template v-for="(author, index) in bookAuthors">
-              <nuxt-link :key="author.id" :to="`/author/${author.id}?library=${libraryItem.libraryId}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
+              <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
             </template>
             <nuxt-link v-if="episode" :to="`/item/${libraryItem.id}`" class="truncate hover:underline">{{ mediaMetadata.title }}</nuxt-link>
@@ -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/EpisodesTable.vue

@@ -1,358 +0,0 @@
-<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-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>
-    <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
-    <div v-if="episodes.length" class="w-full py-3 mx-auto flex">
-      <form @submit.prevent="submit" class="flex flex-grow">
-        <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
-      </form>
-    </div>
-    <template v-for="episode in episodesList">
-      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" @addToQueue="addEpisodeToQueue" @addToPlaylist="addToPlaylist" />
-    </template>
-
-    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      episodesCopy: [],
-      filterKey: 'incomplete',
-      sortKey: 'publishedAt',
-      sortDesc: true,
-      selectedEpisode: null,
-      showPodcastRemoveModal: false,
-      selectedEpisodes: [],
-      episodesToRemove: [],
-      processing: false,
-      quickMatchingEpisodes: false,
-      search: null,
-      searchTimeout: null,
-      searchText: null
-    }
-  },
-  watch: {
-    libraryItem: {
-      handler() {
-        this.init()
-      }
-    }
-  },
-  computed: {
-    contextMenuItems() {
-      if (!this.userIsAdminOrUp) return []
-      return [
-        {
-          text: 'Quick match all episodes',
-          action: 'quick-match-episodes'
-        }
-      ]
-    },
-    sortItems() {
-      return [
-        {
-          text: this.$strings.LabelPubDate,
-          value: 'publishedAt'
-        },
-        {
-          text: this.$strings.LabelTitle,
-          value: 'title'
-        },
-        {
-          text: this.$strings.LabelSeason,
-          value: 'season'
-        },
-        {
-          text: this.$strings.LabelEpisode,
-          value: 'episode'
-        }
-      ]
-    },
-    filterItems() {
-      return [
-        {
-          value: 'all',
-          text: this.$strings.LabelShowAll
-        },
-        {
-          value: 'incomplete',
-          text: this.$strings.LabelIncomplete
-        },
-        {
-          value: 'complete',
-          text: this.$strings.LabelComplete
-        },
-        {
-          value: 'in_progress',
-          text: this.$strings.LabelInProgress
-        }
-      ]
-    },
-    isSelectionMode() {
-      return this.selectedEpisodes.length > 0
-    },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    episodes() {
-      return this.media.episodes || []
-    },
-    episodesSorted() {
-      return this.episodesCopy
-        .filter((ep) => {
-          if (this.filterKey === 'all') return true
-          const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
-          if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
-          if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
-          return episodeProgress && !episodeProgress.isFinished
-        })
-        .sort((a, b) => {
-          let aValue = a[this.sortKey]
-          let bValue = b[this.sortKey]
-
-          // Sort episodes with no pub date as the oldest
-          if (this.sortKey === 'publishedAt') {
-            if (!aValue) aValue = Number.MAX_VALUE
-            if (!bValue) bValue = Number.MAX_VALUE
-          }
-
-          if (this.sortDesc) {
-            return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
-          }
-          return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
-        })
-    },
-    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))
-      })
-    },
-    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
-      })
-    },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
-    },
-    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
-    }
-  },
-  methods: {
-    inputUpdate() {
-      clearTimeout(this.searchTimeout)
-      this.searchTimeout = setTimeout(() => {
-        if (!this.search || !this.search.trim()) {
-          this.searchText = ''
-          return
-        }
-        this.searchText = this.search.toLowerCase().trim()
-      }, 500)
-    },
-    contextMenuAction({ action }) {
-      if (action === 'quick-match-episodes') {
-        if (this.quickMatchingEpisodes) return
-
-        this.quickMatchAllEpisodes()
-      }
-    },
-    quickMatchAllEpisodes() {
-      if (!this.mediaMetadata.feedUrl) {
-        this.$toast.error(this.$strings.MessagePodcastHasNoRSSFeedForMatching)
-        return
-      }
-      this.quickMatchingEpisodes = true
-
-      const payload = {
-        message: 'Quick matching episodes will overwrite details if a match is found. Only unmatched episodes will be updated. Are you sure?',
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
-              .then((data) => {
-                if (data.numEpisodesUpdated) {
-                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
-                } else {
-                  this.$toast.info('No changes were made')
-                }
-              })
-              .catch((error) => {
-                console.error('Failed to request match episodes', error)
-                this.$toast.error('Failed to match episodes')
-              })
-          }
-          this.quickMatchingEpisodes = false
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    addToPlaylist(episode) {
-      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
-      this.$store.commit('globals/setShowPlaylistsModal', true)
-    },
-    addEpisodeToQueue(episode) {
-      const queueItem = {
-        libraryItemId: this.libraryItem.id,
-        libraryId: this.libraryItem.libraryId,
-        episodeId: episode.id,
-        title: episode.title,
-        subtitle: this.mediaMetadata.title,
-        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
-        duration: episode.audioFile.duration || null,
-        coverPath: this.media.coverPath || null
-      }
-      this.$store.commit('addItemToQueue', queueItem)
-    },
-    toggleBatchFinished() {
-      this.processing = true
-      var newIsFinished = !this.selectedIsFinished
-      var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
-        return {
-          libraryItemId: this.libraryItem.id,
-          episodeId: episode.id,
-          isFinished: newIsFinished
-        }
-      })
-
-      this.$axios
-        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
-          this.processing = false
-          this.clearSelected()
-        })
-        .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
-          console.error('Failed to batch update read/not read', error)
-          this.processing = false
-        })
-    },
-    removeEpisodeModalToggled(val) {
-      if (!val) this.episodesToRemove = []
-    },
-    clearSelected() {
-      const episodeRows = this.$refs.episodeRow
-      if (episodeRows && episodeRows.length) {
-        for (const epRow of episodeRows) {
-          if (epRow) epRow.isSelected = false
-        }
-      }
-      this.selectedEpisodes = []
-    },
-    removeSelectedEpisodes() {
-      this.episodesToRemove = this.selectedEpisodes
-      this.showPodcastRemoveModal = true
-    },
-    episodeSelected({ isSelected, episode }) {
-      if (isSelected) {
-        this.selectedEpisodes.push(episode)
-      } else {
-        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
-      }
-    },
-    playEpisode(episode) {
-      const queueItems = []
-
-      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
-      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
-      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
-        const episode = episodesInListeningOrder[i]
-        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
-        if (!podcastProgress || !podcastProgress.isFinished) {
-          queueItems.push({
-            libraryItemId: this.libraryItem.id,
-            libraryId: this.libraryItem.libraryId,
-            episodeId: episode.id,
-            title: episode.title,
-            subtitle: this.mediaMetadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
-            duration: episode.audioFile.duration || null,
-            coverPath: this.media.coverPath || null
-          })
-        }
-      }
-
-      this.$eventBus.$emit('play-item', {
-        libraryItemId: this.libraryItem.id,
-        episodeId: episode.id,
-        queueItems
-      })
-    },
-    removeEpisode(episode) {
-      this.episodesToRemove = [episode]
-      this.showPodcastRemoveModal = true
-    },
-    editEpisode(episode) {
-      const episodeIds = this.episodesSorted.map((e) => e.id)
-      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
-      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    viewEpisode(episode) {
-      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
-    },
-    init() {
-      this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
-
-<style>
-.episode-item {
-  transition: all 0.4s ease;
-}
-
-.episode-enter-from,
-.episode-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.episode-leave-active {
-  position: absolute;
-}
-</style>

client/components/tables/podcast/LazyEpisodeRow.vue

@@ -1,18 +1,22 @@
 <template>
-  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
-      <div class="flex-grow px-2">
+  <div :id="`lazy-episode-${index}`" class="w-full h-full cursor-pointer" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div class="flex" @click="clickedEpisode">
+      <div class="flex-grow">
         <div class="flex items-center">
-          <span class="text-sm font-semibold">{{ title }}</span>
-          <widgets-podcast-type-indicator :type="episode.episodeType" />
+          <span class="text-sm font-semibold">{{ episodeTitle }}</span>
+          <widgets-podcast-type-indicator :type="episodeType" />
         </div>
 
-        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle"></p>
-        <div class="flex justify-between pt-2 max-w-xl">
-          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
-          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="episode.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
-          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
+        <div class="h-10 flex items-center mt-1.5 mb-0.5">
+          <p class="text-sm text-gray-200 episode-subtitle" v-html="episodeSubtitle"></p>
+        </div>
+        <div class="h-8 flex items-center">
+          <div class="w-full inline-flex justify-between max-w-xl">
+            <p v-if="episode?.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+            <p v-if="episode?.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+            <p v-if="episode?.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
+            <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
+          </div>
         </div>
 
         <div class="flex items-center pt-2">
@@ -37,10 +41,11 @@
           <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
         </div>
       </div>
-      <div v-if="isHovering || isSelected || selectionMode" class="hidden md:block w-12 min-w-12" />
+      <div v-if="isHovering || isSelected || isSelectionMode" class="hidden md:block w-12 min-w-12" />
     </div>
-    <div v-if="isSelected || selectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
-    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !selectionMode ? 'translate-x-24' : 'translate-x-0'">
+
+    <div v-if="isSelected || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
+    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !isSelectionMode ? 'translate-x-24' : 'translate-x-0'">
       <div class="flex h-full items-center">
         <div class="mx-1">
           <ui-checkbox v-model="isSelected" @input="selectedUpdated" checkbox-bg="bg" />
@@ -55,84 +60,91 @@
 <script>
 export default {
   props: {
+    index: Number,
     libraryItemId: String,
     episode: {
       type: Object,
-      default: () => {}
-    },
-    selectionMode: Boolean
+      default: () => null
+    }
   },
   data() {
     return {
       isProcessingReadUpdate: false,
       processingRemove: false,
       isHovering: false,
-      isSelected: false
+      isSelected: false,
+      isSelectionMode: false
     }
   },
   computed: {
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    axios() {
+      return this.$axios || this.$nuxt.$axios
+    },
     userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+      return this.store.getters['user/getUserCanUpdate']
     },
     userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
+      return this.store.getters['user/getUserCanDelete']
     },
-    audioFile() {
-      return this.episode.audioFile
+    episodeId() {
+      return this.episode?.id || ''
     },
-    title() {
-      return this.episode.title || ''
+    episodeTitle() {
+      return this.episode?.title || ''
     },
-    subtitle() {
-      return this.episode.subtitle || this.description
+    episodeSubtitle() {
+      return this.episode?.subtitle || ''
     },
-    description() {
-      return this.episode.description || ''
+    episodeType() {
+      return this.episode?.episodeType || ''
     },
-    duration() {
-      return this.$secondsToTimestamp(this.episode.duration)
+    publishedAt() {
+      return this.episode?.publishedAt
     },
-    libraryItemIdStreaming() {
-      return this.$store.getters['getLibraryItemIdStreaming']
-    },
-    isStreamingFromDifferentLibrary() {
-      return this.$store.getters['getIsStreamingFromDifferentLibrary']
-    },
-    isStreaming() {
-      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
-    },
-    isQueued() {
-      return this.$store.getters['getIsMediaQueued'](this.libraryItemId, this.episode.id)
-    },
-    streamIsPlaying() {
-      return this.$store.state.streamIsPlaying && this.isStreaming
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
     },
     itemProgress() {
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
+      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episodeId)
     },
     itemProgressPercent() {
-      return this.itemProgress ? this.itemProgress.progress : 0
+      return this.itemProgress?.progress || 0
     },
     userIsFinished() {
-      return this.itemProgress ? !!this.itemProgress.isFinished : false
+      return !!this.itemProgress?.isFinished
+    },
+    libraryItemIdStreaming() {
+      return this.store.getters['getLibraryItemIdStreaming']
+    },
+    isStreamingFromDifferentLibrary() {
+      return this.store.getters['getIsStreamingFromDifferentLibrary']
+    },
+    isStreaming() {
+      return this.store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
+    },
+    isQueued() {
+      return this.store.getters['getIsMediaQueued'](this.libraryItemId, this.episodeId)
+    },
+    streamIsPlaying() {
+      return this.store.state.streamIsPlaying && this.isStreaming
     },
     timeRemaining() {
       if (this.streamIsPlaying) return 'Playing'
-      if (!this.itemProgress) return this.$elapsedPretty(this.episode.duration)
+      if (!this.itemProgress) return this.$elapsedPretty(this.episode?.duration || 0)
       if (this.userIsFinished) return 'Finished'
-      var remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
+
+      const duration = this.itemProgress.duration || this.episode?.duration || 0
+      const remaining = Math.floor(duration - this.itemProgress.currentTime)
       return `${this.$elapsedPretty(remaining)} left`
-    },
-    publishedAt() {
-      return this.episode.publishedAt
-    },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
     }
   },
   methods: {
-    clickAddToPlaylist() {
-      this.$emit('addToPlaylist', this.episode)
+    setSelectionMode(isSelectionMode) {
+      this.isSelectionMode = isSelectionMode
+      if (!this.isSelectionMode) this.isSelected = false
     },
     clickedEpisode() {
       this.$emit('view', this.episode)
@@ -150,16 +162,23 @@ export default {
     mouseleave() {
       this.isHovering = false
     },
-    clickEdit() {
-      this.$emit('edit', this.episode)
-    },
     playClick() {
       if (this.streamIsPlaying) {
-        this.$eventBus.$emit('pause-item')
+        const eventBus = this.$eventBus || this.$nuxt.$eventBus
+        eventBus.$emit('pause-item')
       } else {
         this.$emit('play', this.episode)
       }
     },
+    queueBtnClick() {
+      if (this.isQueued) {
+        // Remove from queue
+        this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episodeId })
+      } else {
+        // Add to queue
+        this.$emit('addToQueue', this.episode)
+      }
+    },
     toggleFinished(confirmed = false) {
       if (!this.userIsFinished && this.itemProgressPercent > 0 && !confirmed) {
         const payload = {
@@ -171,38 +190,47 @@ export default {
           },
           type: 'yesNo'
         }
-        this.$store.commit('globals/setConfirmPrompt', payload)
+        this.store.commit('globals/setConfirmPrompt', payload)
         return
       }
 
-      var updatePayload = {
+      const updatePayload = {
         isFinished: !this.userIsFinished
       }
       this.isProcessingReadUpdate = true
-      this.$axios
-        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
+      this.axios
+        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episodeId}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
           this.isProcessingReadUpdate = false
-          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
+          const toast = this.$toast || this.$nuxt.$toast
+          toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
         })
     },
+    clickAddToPlaylist() {
+      this.$emit('addToPlaylist', this.episode)
+    },
+    clickEdit() {
+      this.$emit('edit', this.episode)
+    },
     removeClick() {
       this.$emit('remove', this.episode)
     },
-    queueBtnClick() {
-      if (this.isQueued) {
-        // Remove from queue
-        this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
-      } else {
-        // Add to queue
-        this.$emit('addToQueue', this.episode)
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
       }
     }
-  }
+  },
+  mounted() {}
 }
-</script>
+</script>

client/components/tables/podcast/LazyEpisodesTable.vue

@@ -0,0 +1,562 @@
+<template>
+  <div id="lazy-episodes-table" class="w-full py-6">
+    <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" />
+      <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" @change="filterSortChanged" />
+          <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="filterSortChanged" />
+          <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">
+      <form @submit.prevent="submit" class="flex flex-grow">
+        <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
+      </form>
+    </div>
+    <div class="relative min-h-[176px]">
+      <template v-for="episode in totalEpisodes">
+        <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
+          <!-- episode is mounted here -->
+        </div>
+      </template>
+      <div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }">
+        <ui-loading-indicator />
+      </div>
+      <div v-else-if="!totalEpisodes" class="h-44 flex items-center justify-center">
+        <p class="text-lg">{{ $strings.MessageNoEpisodes }}</p>
+      </div>
+    </div>
+
+    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import LazyEpisodeRow from './LazyEpisodeRow.vue'
+
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      episodesCopy: [],
+      filterKey: 'incomplete',
+      sortKey: 'publishedAt',
+      sortDesc: true,
+      selectedEpisode: null,
+      showPodcastRemoveModal: false,
+      selectedEpisodes: [],
+      episodesToRemove: [],
+      processing: false,
+      search: null,
+      searchTimeout: null,
+      searchText: null,
+      isSearching: false,
+      totalEpisodes: 0,
+      episodesPerPage: null,
+      episodeIndexesMounted: [],
+      episodeComponentRefs: {},
+      windowHeight: 0,
+      episodesTableOffsetTop: 0,
+      episodeRowHeight: 176
+    }
+  },
+  watch: {
+    libraryItem: {
+      handler() {
+        this.refresh()
+      }
+    }
+  },
+  computed: {
+    contextMenuItems() {
+      if (!this.userIsAdminOrUp) return []
+      return [
+        {
+          text: 'Quick match all episodes',
+          action: 'quick-match-episodes'
+        },
+        {
+          text: this.allEpisodesFinished ? this.$strings.MessageMarkAllEpisodesNotFinished : this.$strings.MessageMarkAllEpisodesFinished,
+          action: 'batch-mark-as-finished'
+        }
+      ]
+    },
+    sortItems() {
+      return [
+        {
+          text: this.$strings.LabelPubDate,
+          value: 'publishedAt'
+        },
+        {
+          text: this.$strings.LabelTitle,
+          value: 'title'
+        },
+        {
+          text: this.$strings.LabelSeason,
+          value: 'season'
+        },
+        {
+          text: this.$strings.LabelEpisode,
+          value: 'episode'
+        }
+      ]
+    },
+    filterItems() {
+      return [
+        {
+          value: 'all',
+          text: this.$strings.LabelShowAll
+        },
+        {
+          value: 'incomplete',
+          text: this.$strings.LabelIncomplete
+        },
+        {
+          value: 'complete',
+          text: this.$strings.LabelComplete
+        },
+        {
+          value: 'in_progress',
+          text: this.$strings.LabelInProgress
+        }
+      ]
+    },
+    isSelectionMode() {
+      return this.selectedEpisodes.length > 0
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    episodes() {
+      return this.media.episodes || []
+    },
+    episodesSorted() {
+      return this.episodesCopy
+        .filter((ep) => {
+          if (this.filterKey === 'all') return true
+          const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
+          if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
+          if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
+          return episodeProgress && !episodeProgress.isFinished
+        })
+        .sort((a, b) => {
+          let aValue = a[this.sortKey]
+          let bValue = b[this.sortKey]
+
+          // Sort episodes with no pub date as the oldest
+          if (this.sortKey === 'publishedAt') {
+            if (!aValue) aValue = Number.MAX_VALUE
+            if (!bValue) bValue = Number.MAX_VALUE
+          }
+
+          if (this.sortDesc) {
+            return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
+          }
+          return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
+        })
+    },
+    episodesList() {
+      return this.episodesSorted.filter((episode) => {
+        if (!this.searchText) return true
+        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.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() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
+    }
+  },
+  methods: {
+    submit() {},
+    inputUpdate() {
+      clearTimeout(this.searchTimeout)
+      this.isSearching = true
+      let searchStart = this.searchText
+      this.searchTimeout = setTimeout(() => {
+        this.isSearching = false
+        if (!this.search?.trim()) {
+          this.searchText = ''
+        } else {
+          this.searchText = this.search.toLowerCase().trim()
+        }
+        if (searchStart !== this.searchText) {
+          this.init()
+        }
+      }, 750)
+    },
+    contextMenuAction({ action }) {
+      if (action === 'quick-match-episodes') {
+        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.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?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
+              .then((data) => {
+                if (data.numEpisodesUpdated) {
+                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
+                } else {
+                  this.$toast.info('No changes were made')
+                }
+              })
+              .catch((error) => {
+                console.error('Failed to request match episodes', error)
+                this.$toast.error('Failed to match episodes')
+              })
+          }
+          this.processing = false
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    addToPlaylist(episode) {
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsModal', true)
+    },
+    addEpisodeToQueue(episode) {
+      const queueItem = {
+        libraryItemId: this.libraryItem.id,
+        libraryId: this.libraryItem.libraryId,
+        episodeId: episode.id,
+        title: episode.title,
+        subtitle: this.mediaMetadata.title,
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+        duration: episode.audioFile.duration || null,
+        coverPath: this.media.coverPath || null
+      }
+      this.$store.commit('addItemToQueue', queueItem)
+    },
+    toggleBatchFinished() {
+      this.batchUpdateEpisodesFinished(this.selectedEpisodes, !this.selectedIsFinished)
+    },
+    batchUpdateEpisodesFinished(episodes, newIsFinished) {
+      this.processing = true
+
+      const updateProgressPayloads = episodes.map((episode) => {
+        return {
+          libraryItemId: this.libraryItem.id,
+          episodeId: episode.id,
+          isFinished: newIsFinished
+        }
+      })
+      return this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.processing = false
+          this.clearSelected()
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          console.error('Failed to batch update read/not read', error)
+          this.processing = false
+        })
+    },
+    removeEpisodeModalToggled(val) {
+      if (!val) this.episodesToRemove = []
+    },
+    clearSelected() {
+      this.selectedEpisodes = []
+      this.setSelectionModeForEpisodes()
+    },
+    removeSelectedEpisodes() {
+      this.episodesToRemove = this.selectedEpisodes
+      this.showPodcastRemoveModal = true
+    },
+    episodeSelected({ isSelected, episode }) {
+      let isSelectionModeBefore = this.isSelectionMode
+      if (isSelected) {
+        this.selectedEpisodes.push(episode)
+      } else {
+        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
+      }
+      if (this.isSelectionMode !== isSelectionModeBefore) {
+        this.setSelectionModeForEpisodes()
+      }
+    },
+    setSelectionModeForEpisodes() {
+      for (const key in this.episodeComponentRefs) {
+        if (this.episodeComponentRefs[key]?.setSelectionMode) {
+          this.episodeComponentRefs[key].setSelectionMode(this.isSelectionMode)
+        }
+      }
+    },
+    playEpisode(episode) {
+      const queueItems = []
+
+      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
+      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
+        const episode = episodesInListeningOrder[i]
+        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        if (!podcastProgress || !podcastProgress.isFinished) {
+          queueItems.push({
+            libraryItemId: this.libraryItem.id,
+            libraryId: this.libraryItem.libraryId,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: this.mediaMetadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+            duration: episode.audioFile.duration || null,
+            coverPath: this.media.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItem.id,
+        episodeId: episode.id,
+        queueItems
+      })
+    },
+    removeEpisode(episode) {
+      this.episodesToRemove = [episode]
+      this.showPodcastRemoveModal = true
+    },
+    editEpisode(episode) {
+      const episodeIds = this.episodesSorted.map((e) => e.id)
+      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
+      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    viewEpisode(episode) {
+      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
+    },
+    destroyEpisodeComponents() {
+      for (const key in this.episodeComponentRefs) {
+        if (this.episodeComponentRefs[key]?.destroy) {
+          this.episodeComponentRefs[key].destroy()
+        }
+      }
+      this.episodeComponentRefs = {}
+      this.episodeIndexesMounted = []
+    },
+    mountEpisode(index) {
+      const episodeEl = document.getElementById(`episode-${index}`)
+      if (!episodeEl) {
+        console.warn('Episode row el not found at ' + index)
+        return
+      }
+
+      this.episodeIndexesMounted.push(index)
+
+      if (this.episodeComponentRefs[index]) {
+        const episodeComponent = this.episodeComponentRefs[index]
+        episodeEl.appendChild(episodeComponent.$el)
+        if (this.isSelectionMode) {
+          episodeComponent.setSelectionMode(true)
+          if (this.selectedEpisodes.some((i) => i.id === episodeComponent.episodeId)) {
+            episodeComponent.isSelected = true
+          } else {
+            episodeComponent.isSelected = false
+          }
+        } else {
+          episodeComponent.setSelectionMode(false)
+        }
+      } else {
+        const _this = this
+        const ComponentClass = Vue.extend(LazyEpisodeRow)
+        const instance = new ComponentClass({
+          propsData: {
+            index,
+            libraryItemId: this.libraryItem.id,
+            episode: this.episodesList[index]
+          },
+          created() {
+            this.$on('selected', (payload) => {
+              _this.episodeSelected(payload)
+            })
+            this.$on('view', (payload) => {
+              _this.viewEpisode(payload)
+            })
+            this.$on('play', (payload) => {
+              _this.playEpisode(payload)
+            })
+            this.$on('addToQueue', (payload) => {
+              _this.addEpisodeToQueue(payload)
+            })
+            this.$on('remove', (payload) => {
+              _this.removeEpisode(payload)
+            })
+            this.$on('edit', (payload) => {
+              _this.editEpisode(payload)
+            })
+            this.$on('addToPlaylist', (payload) => {
+              _this.addToPlaylist(payload)
+            })
+          }
+        })
+        this.episodeComponentRefs[index] = instance
+        instance.$mount()
+        episodeEl.appendChild(instance.$el)
+
+        if (this.isSelectionMode) {
+          instance.setSelectionMode(true)
+          if (this.selectedEpisodes.some((i) => i.id === this.episodesList[index].id)) {
+            instance.isSelected = true
+          }
+        }
+      }
+    },
+    mountEpisodes(startIndex, endIndex) {
+      for (let i = startIndex; i < endIndex; i++) {
+        if (!this.episodeIndexesMounted.includes(i)) {
+          this.mountEpisode(i)
+        }
+      }
+    },
+    scroll(evt) {
+      if (!evt?.target?.scrollTop) return
+      const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
+      let firstEpisodeIndex = Math.floor(scrollTop / this.episodeRowHeight)
+      let lastEpisodeIndex = Math.ceil((scrollTop + this.windowHeight) / this.episodeRowHeight)
+      lastEpisodeIndex = Math.min(this.totalEpisodes - 1, lastEpisodeIndex)
+
+      this.episodeIndexesMounted = this.episodeIndexesMounted.filter((_index) => {
+        if (_index < firstEpisodeIndex || _index >= lastEpisodeIndex) {
+          const el = document.getElementById(`lazy-episode-${_index}`)
+          if (el) el.remove()
+          return false
+        }
+        return true
+      })
+      this.mountEpisodes(firstEpisodeIndex, lastEpisodeIndex + 1)
+    },
+    initListeners() {
+      const itemPageWrapper = document.getElementById('item-page-wrapper')
+      if (itemPageWrapper) {
+        itemPageWrapper.addEventListener('scroll', this.scroll)
+      }
+    },
+    removeListeners() {
+      const itemPageWrapper = document.getElementById('item-page-wrapper')
+      if (itemPageWrapper) {
+        itemPageWrapper.removeEventListener('scroll', this.scroll)
+      }
+    },
+    filterSortChanged() {
+      this.init()
+    },
+    refresh() {
+      this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
+      this.init()
+    },
+    init() {
+      this.destroyEpisodeComponents()
+      this.totalEpisodes = this.episodesList.length
+
+      const lazyEpisodesTableEl = document.getElementById('lazy-episodes-table')
+      this.episodesTableOffsetTop = (lazyEpisodesTableEl?.offsetTop || 0) + 64
+
+      this.windowHeight = window.innerHeight
+      this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
+
+      this.$nextTick(() => {
+        this.mountEpisodes(0, Math.min(this.episodesPerPage, this.totalEpisodes))
+      })
+    }
+  },
+  mounted() {
+    this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
+    this.initListeners()
+    this.init()
+  },
+  beforeDestroy() {
+    this.removeListeners()
+  }
+}
+</script>
+
+<style>
+.episode-item {
+  transition: all 0.4s ease;
+}
+
+.episode-enter-from,
+.episode-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.episode-leave-active {
+  position: absolute;
+}
+</style>

client/components/ui/Btn.vue

@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
+  <nuxt-link v-if="to" :to="to" class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@@ -7,7 +7,7 @@
       </svg>
     </div>
   </nuxt-link>
-  <button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
+  <button v-else class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@@ -72,23 +72,3 @@ export default {
   mounted() {}
 }
 </script>
-
-<style>
-.btn::before {
-  content: '';
-  position: absolute;
-  border-radius: 6px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: all 0.1s ease-in-out;
-}
-.btn:hover:not(:disabled)::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-button:disabled::before {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>

client/components/ui/Checkbox.vue

@@ -2,7 +2,8 @@
   <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
     <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
       <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
-      <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+      <span v-if="partial" class="material-icons text-base leading-none text-gray-400">remove</span>
+      <svg v-else-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
     <div v-if="label" class="select-none" :class="[labelClassname, disabled ? 'text-gray-400' : 'text-gray-100']">{{ label }}</div>
   </label>
@@ -31,7 +32,8 @@ export default {
       type: String,
       default: ''
     },
-    disabled: Boolean
+    disabled: Boolean,
+    partial: Boolean
   },
   data() {
     return {}

client/components/ui/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutsideObj">
-    <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
@@ -13,7 +13,7 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="item in itemsToShow">
           <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
             <div class="flex items-center">
@@ -64,7 +64,7 @@ export default {
     },
     itemsToShow() {
       return this.items.map((i) => {
-        if (typeof i === 'string') {
+        if (typeof i === 'string' || typeof i === 'number') {
           return {
             text: i,
             value: i

client/components/ui/InputDropdown.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full">
-    <label class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
+    <label v-if="label" class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">
-          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
@@ -48,8 +48,6 @@ export default {
   data() {
     return {
       isFocused: false,
-      // currentSearch: null,
-      typingTimeout: null,
       textInput: null
     }
   },
@@ -83,12 +81,6 @@ export default {
     }
   },
   methods: {
-    keydownInput() {
-      clearTimeout(this.typingTimeout)
-      this.typingTimeout = setTimeout(() => {
-        // this.currentSearch = this.textInput
-      }, 100)
-    },
     setFocus() {
       if (this.$refs.input && this.editable) this.$refs.input.focus()
     },
@@ -133,11 +125,9 @@ export default {
       if (val && !this.items.includes(val)) {
         this.$emit('newItem', val)
       }
-      // this.currentSearch = null
     },
     clickedOption(e, item) {
       this.textInput = null
-      // this.currentSearch = null
       this.input = item
       if (this.$refs.input) this.$refs.input.blur()
     }

client/components/ui/MultiSelect.vue

@@ -11,7 +11,7 @@
             </div>
             {{ item }}
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -50,7 +50,11 @@ export default {
     label: String,
     disabled: Boolean,
     readonly: Boolean,
-    showEdit: Boolean
+    showEdit: Boolean,
+    menuDisabled: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -77,7 +81,7 @@ export default {
       }
     },
     showMenu() {
-      return this.isFocused
+      return this.isFocused && !this.menuDisabled
     },
     wrapperClass() {
       var classes = []
@@ -145,6 +149,31 @@ export default {
       this.menu.style.left = boundingBox.x + 'px'
       this.menu.style.width = boundingBox.width + 'px'
     },
+    inputPaste(evt) {
+      setTimeout(() => {
+        const pastedText = evt.target?.value || ''
+        console.log('Pasted text=', pastedText)
+        const pastedItems = [
+          ...new Set(
+            pastedText
+              .split(';')
+              .map((i) => i.trim())
+              .filter((i) => i)
+          )
+        ]
+
+        // Filter out items already selected
+        const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i.toLowerCase() === i.toLowerCase()))
+        if (pastedItems.length && !itemsToAdd.length) {
+          this.textInput = null
+          this.currentSearch = null
+        } else {
+          for (const itemToAdd of itemsToAdd) {
+            this.insertNewItem(itemToAdd)
+          }
+        }
+      }, 10)
+    },
     inputFocus() {
       if (!this.menu) {
         this.unmountMountMenu()

client/components/ui/MultiSelectDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full" v-click-outside="closeMenu">
+  <div class="w-full" v-click-outside="clickOutsideObj">
     <p class="px-1 text-sm font-semibold">{{ label }}</p>
     <div ref="wrapper" class="relative">
       <div ref="inputWrapper" style="min-height: 40px" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded-md px-2 py-1 cursor-pointer" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
@@ -11,23 +11,24 @@
         </div>
       </div>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 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">
-        <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" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
-            <div class="flex items-center">
-              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+      <transition name="menu">
+        <ul ref="menu" v-show="showMenu" class="absolute z-60 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 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">
+          <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" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+              <p class="font-normal ml-3 block truncate">{{ item.text }}</p>
+
+              <div v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 my-auto w-5 h-5 mr-3 overflow-hidden">
+                <span class="material-icons text-xl">checkmark</span>
+              </div>
+            </li>
+          </template>
+          <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
+            <div class="flex items-center justify-center">
+              <span class="font-normal">{{ $strings.MessageNoItems }}</span>
             </div>
-            <span v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-xl">checkmark</span>
-            </span>
           </li>
-        </template>
-        <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
-          <div class="flex items-center justify-center">
-            <span class="font-normal">{{ $strings.MessageNoItems }}</span>
-          </div>
-        </li>
-      </ul>
+        </ul>
+      </transition>
     </div>
   </div>
 </template>
@@ -48,7 +49,12 @@ export default {
   data() {
     return {
       showMenu: false,
-      menu: null
+      menu: null,
+      clickOutsideObj: {
+        handler: this.closeMenu,
+        events: ['mousedown'],
+        isActive: true
+      }
     }
   },
   computed: {

client/components/ui/MultiSelectQueryInput.vue

@@ -14,7 +14,7 @@
           <div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
             <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -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,16 @@ export default {
     getIsSelected(itemValue) {
       return !!this.selected.find((i) => i.id === itemValue)
     },
-    async search() {
-      if (this.searching) return
+    search() {
+      if (!this.textInput) return
       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)
@@ -168,6 +166,34 @@ export default {
       this.menu.style.left = boundingBox.x + 'px'
       this.menu.style.width = boundingBox.width + 'px'
     },
+    inputPaste(evt) {
+      setTimeout(() => {
+        const pastedText = evt.target?.value || ''
+        console.log('Pasted text=', pastedText)
+        const pastedItems = [
+          ...new Set(
+            pastedText
+              .split(';')
+              .map((i) => i.trim())
+              .filter((i) => i)
+          )
+        ]
+
+        // Filter out items already selected
+        const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i[this.textKey].toLowerCase() === i.toLowerCase()))
+        if (pastedItems.length && !itemsToAdd.length) {
+          this.textInput = null
+          this.currentSearch = null
+        } else {
+          for (const [index, itemToAdd] of itemsToAdd.entries()) {
+            this.insertNewItem({
+              id: `new-${Date.now()}-${index}`,
+              name: itemToAdd
+            })
+          }
+        }
+      }, 10)
+    },
     inputFocus() {
       if (!this.menu) {
         this.unmountMountMenu()

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/TextInput.vue

@@ -68,6 +68,7 @@ export default {
   methods: {
     clear() {
       this.inputValue = ''
+      this.$emit('clear')
     },
     focused() {
       this.isFocused = true

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/Tooltip.vue

@@ -15,6 +15,13 @@ export default {
       type: String,
       default: 'right'
     },
+    /**
+     * Delay showing the tooltip after X milliseconds of hovering
+     */
+    delayOnShow: {
+      type: Number,
+      default: 0
+    },
     disabled: Boolean
   },
   data() {
@@ -22,7 +29,8 @@ export default {
       tooltip: null,
       tooltipId: null,
       isShowing: false,
-      hideTimeout: null
+      hideTimeout: null,
+      delayOnShowTimeout: null
     }
   },
   watch: {
@@ -59,29 +67,44 @@ export default {
       this.tooltip = tooltip
     },
     setTooltipPosition(tooltip) {
-      var boxChow = this.$refs.box.getBoundingClientRect()
+      const boxRect = this.$refs.box.getBoundingClientRect()
+
+      const shouldMount = !tooltip.isConnected
 
-      var shouldMount = !tooltip.isConnected
       // Calculate size of tooltip
       if (shouldMount) document.body.appendChild(tooltip)
-      var { width, height } = tooltip.getBoundingClientRect()
+      const tooltipRect = tooltip.getBoundingClientRect()
       if (shouldMount) tooltip.remove()
 
-      var top = 0
-      var left = 0
+      // Subtracting scrollbar size
+      const windowHeight = window.innerHeight - 8
+      const windowWidth = window.innerWidth - 8
+
+      let top = 0
+      let left = 0
       if (this.direction === 'right') {
-        top = boxChow.top - height / 2 + boxChow.height / 2
-        left = boxChow.left + boxChow.width + 4
+        top = Math.max(0, boxRect.top - tooltipRect.height / 2 + boxRect.height / 2)
+        left = Math.max(0, boxRect.left + boxRect.width + 4)
       } else if (this.direction === 'bottom') {
-        top = boxChow.top + boxChow.height + 4
-        left = boxChow.left - width / 2 + boxChow.width / 2
+        top = Math.max(0, boxRect.top + boxRect.height + 4)
+        left = Math.max(0, boxRect.left - tooltipRect.width / 2 + boxRect.width / 2)
       } else if (this.direction === 'top') {
-        top = boxChow.top - height - 4
-        left = boxChow.left - width / 2 + boxChow.width / 2
+        top = Math.max(0, boxRect.top - tooltipRect.height - 4)
+        left = Math.max(0, boxRect.left - tooltipRect.width / 2 + boxRect.width / 2)
       } else if (this.direction === 'left') {
-        top = boxChow.top - height / 2 + boxChow.height / 2
-        left = boxChow.left - width - 4
+        top = Math.max(0, boxRect.top - tooltipRect.height / 2 + boxRect.height / 2)
+        left = Math.max(0, boxRect.left - tooltipRect.width - 4)
       }
+
+      // Shift left if tooltip would overflow the window on the right
+      if (left + tooltipRect.width > windowWidth) {
+        left -= left + tooltipRect.width - windowWidth
+      }
+      // Shift up if tooltip would overflow the window on the bottom
+      if (top + tooltipRect.height > windowHeight) {
+        top -= top + tooltipRect.height - windowHeight
+      }
+
       tooltip.style.top = top + 'px'
       tooltip.style.left = left + 'px'
     },
@@ -107,15 +130,33 @@ export default {
       this.isShowing = false
     },
     cancelHide() {
-      if (this.hideTimeout) clearTimeout(this.hideTimeout)
+      clearTimeout(this.hideTimeout)
     },
     mouseover() {
-      if (!this.isShowing) this.showTooltip()
+      if (this.isShowing || this.disabled) return
+
+      if (this.delayOnShow) {
+        if (this.delayOnShowTimeout) {
+          // Delay already running
+          return
+        }
+
+        this.delayOnShowTimeout = setTimeout(() => {
+          this.showTooltip()
+          this.delayOnShowTimeout = null
+        }, this.delayOnShow)
+      } else {
+        this.showTooltip()
+      }
     },
     mouseleave() {
-      if (this.isShowing) {
-        this.hideTimeout = setTimeout(this.hideTooltip, 100)
+      if (!this.isShowing) {
+        clearTimeout(this.delayOnShowTimeout)
+        this.delayOnShowTimeout = null
+        return
       }
+
+      this.hideTimeout = setTimeout(this.hideTooltip, 100)
     }
   },
   beforeDestroy() {

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/CloseButton.vue

@@ -1,33 +0,0 @@
-<template>
-  <button class="bg-error text-white px-2 py-1 shadow-md" @click="$emit('click', $event)">Cancel</button>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.Vue-Toastification__close-button.cancel-scan-btn {
-  background-color: rgb(255, 82, 82);
-  color: white;
-  font-size: 0.9rem;
-  opacity: 1;
-  padding: 0px 10px;
-  border-radius: 6px;
-  font-weight: normal;
-  font-family: 'Open Sans';
-  margin-left: 10px;
-  opacity: 0.3;
-}
-.Vue-Toastification__close-button.cancel-scan-btn:hover {
-  background-color: rgb(235, 65, 65);
-  opacity: 1;
-}
-</style>

client/components/widgets/NotificationWidget.vue

@@ -9,6 +9,8 @@
           <span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span>
         </ui-tooltip>
       </div>
+      <div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success pointer-events-none absolute -top-1 -right-0.5" />
+      <div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success/50 pointer-events-none absolute animate-ping -top-1 -right-0.5" />
     </button>
     <transition name="menu">
       <div class="sm:w-80 w-full relative">
@@ -46,7 +48,8 @@ export default {
         isActive: true
       },
       showMenu: false,
-      disabled: false
+      disabled: false,
+      tasksSeen: []
     }
   },
   computed: {
@@ -60,12 +63,20 @@ export default {
       // return just the tasks that are running or failed (or show success) in the last 1 minute
       const tasks = this.tasks.filter((t) => !t.isFinished || ((t.isFailed || t.showSuccess) && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
       return tasks.sort((a, b) => b.startedAt - a.startedAt)
+    },
+    showUnseenSuccessIndicator() {
+      return this.tasksToShow.some((t) => t.isFinished && !t.isFailed && !this.tasksSeen.includes(t.id))
     }
   },
   methods: {
     clickShowMenu() {
       if (this.disabled) return
       this.showMenu = !this.showMenu
+      if (this.showMenu) {
+        this.tasksToShow.forEach((t) => {
+          if (!this.tasksSeen.includes(t.id)) this.tasksSeen.push(t.id)
+        })
+      }
     },
     clickedOutside() {
       this.showMenu = false
@@ -83,9 +94,20 @@ export default {
         default:
           return ''
       }
+    },
+    taskFinished(task) {
+      // add task as seen if menu is open when it finished
+      if (this.showMenu && !this.tasksSeen.includes(task.id)) {
+        this.tasksSeen.push(task.id)
+      }
     }
   },
-  mounted() {}
+  mounted() {
+    this.$root.socket?.on('task_finished', this.taskFinished)
+  },
+  beforeDestroy() {
+    this.$root.socket?.off('task_finished', this.taskFinished)
+  }
 }
 </script>
 

client/layouts/default.vue

@@ -19,14 +19,13 @@
     <modals-authors-edit-modal />
     <modals-batch-quick-match-model />
     <modals-rssfeed-open-close-modal />
+    <modals-raw-cover-preview-modal />
     <prompt-confirm />
     <readers-reader />
   </div>
 </template>
 
 <script>
-import CloseButton from '@/components/widgets/CloseButton'
-
 export default {
   middleware: 'authenticated',
   data() {
@@ -123,22 +122,6 @@ export default {
     init(payload) {
       console.log('Init Payload', payload)
 
-      // Start scans currently running
-      if (payload.librariesScanning) {
-        payload.librariesScanning.forEach((libraryScan) => {
-          this.scanStart(libraryScan)
-        })
-      }
-
-      // Remove any current scans that are no longer running
-      var currentScans = [...this.$store.state.scanners.libraryScans]
-      currentScans.forEach((ls) => {
-        if (!payload.librariesScanning || !payload.librariesScanning.find((_ls) => _ls.id === ls.id)) {
-          this.$toast.dismiss(ls.toastId)
-          this.$store.commit('scanners/remove', ls)
-        }
-      })
-
       if (payload.usersOnline) {
         this.$store.commit('users/setUsersOnline', payload.usersOnline)
       }
@@ -228,50 +211,6 @@ export default {
         this.libraryItemAdded(ab)
       })
     },
-    scanComplete(data) {
-      console.log('Scan complete received', data)
-
-      var message = `${data.type === 'match' ? 'Match' : 'Scan'} "${data.name}" complete!`
-      if (data.results) {
-        var scanResultMsgs = []
-        var results = data.results
-        if (results.added) scanResultMsgs.push(`${results.added} added`)
-        if (results.updated) scanResultMsgs.push(`${results.updated} updated`)
-        if (results.removed) scanResultMsgs.push(`${results.removed} removed`)
-        if (results.missing) scanResultMsgs.push(`${results.missing} missing`)
-        if (!scanResultMsgs.length) message += '\nEverything was up to date'
-        else message += '\n' + scanResultMsgs.join('\n')
-      } else {
-        message = `${data.type === 'match' ? 'Match' : 'Scan'} "${data.name}" was canceled`
-      }
-
-      var existingScan = this.$store.getters['scanners/getLibraryScan'](data.id)
-      if (existingScan && !isNaN(existingScan.toastId)) {
-        this.$toast.update(existingScan.toastId, { content: message, options: { timeout: 5000, type: 'success', closeButton: false, onClose: () => null } }, true)
-      } else {
-        this.$toast.success(message, { timeout: 5000 })
-      }
-
-      this.$store.commit('scanners/remove', data)
-    },
-    onScanToastCancel(id) {
-      this.$root.socket.emit('cancel_scan', id)
-    },
-    scanStart(data) {
-      data.toastId = this.$toast(`${data.type === 'match' ? 'Matching' : 'Scanning'} "${data.name}"...`, { timeout: false, type: 'info', draggable: false, closeOnClick: false, closeButton: CloseButton, closeButtonClassName: 'cancel-scan-btn', showCloseButtonOnHover: false, onClose: () => this.onScanToastCancel(data.id) })
-      this.$store.commit('scanners/addUpdate', data)
-    },
-    scanProgress(data) {
-      var existingScan = this.$store.getters['scanners/getLibraryScan'](data.id)
-      if (existingScan && !isNaN(existingScan.toastId)) {
-        data.toastId = existingScan.toastId
-        this.$toast.update(existingScan.toastId, { content: `Scanning "${existingScan.name}"... ${data.progress.progress || 0}%`, options: { timeout: false } }, true)
-      } else {
-        data.toastId = this.$toast(`Scanning "${data.name}"...`, { timeout: false, type: 'info', draggable: false, closeOnClick: false, closeButton: CloseButton, closeButtonClassName: 'cancel-scan-btn', showCloseButtonOnHover: false, onClose: () => this.onScanToastCancel(data.id) })
-      }
-
-      this.$store.commit('scanners/addUpdate', data)
-    },
     taskStarted(task) {
       console.log('Task started', task)
       this.$store.commit('tasks/addUpdateTask', task)
@@ -343,6 +282,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,16 +385,14 @@ 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)
       this.socket.on('playlist_removed', this.playlistRemoved)
 
-      // Scan Listeners
-      this.socket.on('scan_start', this.scanStart)
-      this.socket.on('scan_complete', this.scanComplete)
-      this.socket.on('scan_progress', this.scanProgress)
-
       // Task Listeners
       this.socket.on('task_started', this.taskStarted)
       this.socket.on('task_finished', this.taskFinished)

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.23",
+  "version": "2.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf-client",
-      "version": "2.2.23",
+      "version": "2.7.2",
       "license": "ISC",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",

client/package.json

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

client/pages/account.vue

@@ -19,8 +19,8 @@
 
         <div class="w-full h-px bg-white/10 my-4" />
 
-        <p v-if="!isGuest" class="mb-4 text-lg">{{ $strings.HeaderChangePassword }}</p>
-        <form v-if="!isGuest" @submit.prevent="submitChangePassword">
+        <p v-if="showChangePasswordForm" class="mb-4 text-lg">{{ $strings.HeaderChangePassword }}</p>
+        <form v-if="showChangePasswordForm" @submit.prevent="submitChangePassword">
           <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" :label="$strings.LabelPassword" class="my-2" />
           <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" :label="$strings.LabelNewPassword" class="my-2" />
           <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" :label="$strings.LabelConfirmPassword" class="my-2" />
@@ -68,6 +68,13 @@ export default {
     },
     isGuest() {
       return this.usertype === 'guest'
+    },
+    isPasswordAuthEnabled() {
+      const activeAuthMethods = this.$store.getters['getServerSetting']('authActiveAuthMethods') || []
+      return activeAuthMethods.includes('local')
+    },
+    showChangePasswordForm() {
+      return !this.isGuest && this.isPasswordAuthEnabled
     }
   },
   methods: {

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/author/_id.vue

@@ -3,7 +3,7 @@
     <div class="max-w-6xl mx-auto">
       <div class="flex flex-wrap sm:flex-nowrap justify-center mb-6">
         <div class="w-48 min-w-48">
-          <div class="w-full h-52">
+          <div class="w-full h-60">
             <covers-author-image :author="author" rounded="0" />
           </div>
         </div>
@@ -17,7 +17,7 @@
           </div>
 
           <p v-if="author.description" class="text-white text-opacity-60 uppercase text-xs mb-2">{{ $strings.LabelDescription }}</p>
-          <p class="text-white max-w-3xl text-sm leading-5">{{ author.description }}</p>
+          <p class="text-white max-w-3xl text-sm leading-5 whitespace-pre-wrap">{{ author.description }}</p>
         </div>
       </div>
 
@@ -44,7 +44,7 @@
 <script>
 export default {
   async asyncData({ store, app, params, redirect, query }) {
-    const author = await app.$axios.$get(`/api/authors/${params.id}?library=${query.library || store.state.libraries.currentLibraryId}&include=items,series`).catch((error) => {
+    const author = await app.$axios.$get(`/api/authors/${params.id}?include=items,series`).catch((error) => {
       console.error('Failed to get author', error)
       return null
     })

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,7 +55,9 @@ 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
+        else if (pageName === 'authentication') return this.$strings.HeaderAuthentication
       }
       return this.$strings.HeaderSettings
     }

client/pages/config/authentication.vue

@@ -0,0 +1,270 @@
+<template>
+  <div id="authentication-settings">
+    <app-settings-content :header-text="$strings.HeaderAuthentication">
+      <div class="w-full border border-white/10 rounded-xl p-4 my-4 bg-primary/25">
+        <div class="flex items-center">
+          <ui-checkbox v-model="enableLocalAuth" checkbox-bg="bg" />
+          <p class="text-lg pl-4">{{ $strings.HeaderPasswordAuthentication }}</p>
+        </div>
+      </div>
+      <div class="w-full border border-white/10 rounded-xl p-4 my-4 bg-primary/25">
+        <div class="flex items-center">
+          <ui-checkbox v-model="enableOpenIDAuth" checkbox-bg="bg" />
+          <p class="text-lg pl-4">{{ $strings.HeaderOpenIDConnectAuthentication }}</p>
+          <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+            <a href="https://www.audiobookshelf.org/guides/oidc_authentication" target="_blank" class="inline-flex">
+              <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+            </a>
+          </ui-tooltip>
+        </div>
+
+        <transition name="slide">
+          <div v-if="enableOpenIDAuth" class="flex flex-wrap pt-4">
+            <div class="w-full flex items-center mb-2">
+              <div class="flex-grow">
+                <ui-text-input-with-label ref="issuerUrl" v-model="newAuthSettings.authOpenIDIssuerURL" :disabled="savingSettings" :label="'Issuer URL'" />
+              </div>
+              <div class="w-36 mx-1 mt-[1.375rem]">
+                <ui-btn class="h-[2.375rem] text-sm inline-flex items-center justify-center w-full" type="button" :padding-y="0" :padding-x="4" @click.stop="autoPopulateOIDCClick">
+                  <span class="material-icons text-base">auto_fix_high</span>
+                  <span class="whitespace-nowrap break-keep pl-1">Auto-populate</span></ui-btn
+                >
+              </div>
+            </div>
+
+            <ui-text-input-with-label ref="authorizationUrl" v-model="newAuthSettings.authOpenIDAuthorizationURL" :disabled="savingSettings" :label="'Authorize URL'" class="mb-2" />
+
+            <ui-text-input-with-label ref="tokenUrl" v-model="newAuthSettings.authOpenIDTokenURL" :disabled="savingSettings" :label="'Token URL'" class="mb-2" />
+
+            <ui-text-input-with-label ref="userInfoUrl" v-model="newAuthSettings.authOpenIDUserInfoURL" :disabled="savingSettings" :label="'Userinfo URL'" class="mb-2" />
+
+            <ui-text-input-with-label ref="jwksUrl" v-model="newAuthSettings.authOpenIDJwksURL" :disabled="savingSettings" :label="'JWKS URL'" class="mb-2" />
+
+            <ui-text-input-with-label ref="logoutUrl" v-model="newAuthSettings.authOpenIDLogoutURL" :disabled="savingSettings" :label="'Logout URL'" class="mb-2" />
+
+            <ui-text-input-with-label ref="openidClientId" v-model="newAuthSettings.authOpenIDClientID" :disabled="savingSettings" :label="'Client ID'" class="mb-2" />
+
+            <ui-text-input-with-label ref="openidClientSecret" v-model="newAuthSettings.authOpenIDClientSecret" :disabled="savingSettings" :label="'Client Secret'" class="mb-2" />
+
+            <ui-multi-select ref="redirectUris" v-model="newAuthSettings.authOpenIDMobileRedirectURIs" :items="newAuthSettings.authOpenIDMobileRedirectURIs" :label="$strings.LabelMobileRedirectURIs" class="mb-2" :menuDisabled="true" :disabled="savingSettings" />
+            <p class="pl-4 text-sm text-gray-300 mb-2" v-html="$strings.LabelMobileRedirectURIsDescription" />
+
+            <ui-text-input-with-label ref="buttonTextInput" v-model="newAuthSettings.authOpenIDButtonText" :disabled="savingSettings" :label="$strings.LabelButtonText" class="mb-2" />
+
+            <div class="flex items-center pt-1 mb-2">
+              <div class="w-44">
+                <ui-dropdown v-model="newAuthSettings.authOpenIDMatchExistingBy" small :items="matchingExistingOptions" :label="$strings.LabelMatchExistingUsersBy" :disabled="savingSettings" />
+              </div>
+              <p class="pl-4 text-sm text-gray-300 mt-5">{{ $strings.LabelMatchExistingUsersByDescription }}</p>
+            </div>
+
+            <div class="flex items-center py-4 px-1">
+              <ui-toggle-switch labeledBy="auto-redirect-toggle" v-model="newAuthSettings.authOpenIDAutoLaunch" :disabled="savingSettings" />
+              <p id="auto-redirect-toggle" class="pl-4 whitespace-nowrap">{{ $strings.LabelAutoLaunch }}</p>
+              <p class="pl-4 text-sm text-gray-300" v-html="$strings.LabelAutoLaunchDescription" />
+            </div>
+
+            <div class="flex items-center py-4 px-1">
+              <ui-toggle-switch labeledBy="auto-register-toggle" v-model="newAuthSettings.authOpenIDAutoRegister" :disabled="savingSettings" />
+              <p id="auto-register-toggle" class="pl-4 whitespace-nowrap">{{ $strings.LabelAutoRegister }}</p>
+              <p class="pl-4 text-sm text-gray-300">{{ $strings.LabelAutoRegisterDescription }}</p>
+            </div>
+          </div>
+        </transition>
+      </div>
+      <div class="w-full flex items-center justify-end p-4">
+        <ui-btn color="success" :padding-x="8" small class="text-base" :loading="savingSettings" @click="saveSettings">{{ $strings.ButtonSave }}</ui-btn>
+      </div>
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, redirect, app }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+
+    const authSettings = await app.$axios.$get('/api/auth-settings').catch((error) => {
+      console.error('Failed', error)
+      return null
+    })
+    if (!authSettings) {
+      redirect('/config')
+      return
+    }
+    return {
+      authSettings
+    }
+  },
+  data() {
+    return {
+      enableLocalAuth: false,
+      enableOpenIDAuth: false,
+      savingSettings: false,
+      newAuthSettings: {}
+    }
+  },
+  computed: {
+    authMethods() {
+      return this.authSettings.authActiveAuthMethods || []
+    },
+    matchingExistingOptions() {
+      return [
+        {
+          text: 'Do not match',
+          value: null
+        },
+        {
+          text: 'Match by email',
+          value: 'email'
+        },
+        {
+          text: 'Match by username',
+          value: 'username'
+        }
+      ]
+    }
+  },
+  methods: {
+    autoPopulateOIDCClick() {
+      if (!this.newAuthSettings.authOpenIDIssuerURL) {
+        this.$toast.error('Issuer URL required')
+        return
+      }
+      // Remove trailing slash
+      let issuerUrl = this.newAuthSettings.authOpenIDIssuerURL
+      if (issuerUrl.endsWith('/')) issuerUrl = issuerUrl.slice(0, -1)
+
+      // If the full config path is on the issuer url then remove it
+      if (issuerUrl.endsWith('/.well-known/openid-configuration')) {
+        issuerUrl = issuerUrl.replace('/.well-known/openid-configuration', '')
+        this.newAuthSettings.authOpenIDIssuerURL = this.newAuthSettings.authOpenIDIssuerURL.replace('/.well-known/openid-configuration', '')
+      }
+
+      this.$axios
+        .$get(`/auth/openid/config?issuer=${issuerUrl}`)
+        .then((data) => {
+          if (data.issuer) this.newAuthSettings.authOpenIDIssuerURL = data.issuer
+          if (data.authorization_endpoint) this.newAuthSettings.authOpenIDAuthorizationURL = data.authorization_endpoint
+          if (data.token_endpoint) this.newAuthSettings.authOpenIDTokenURL = data.token_endpoint
+          if (data.userinfo_endpoint) this.newAuthSettings.authOpenIDUserInfoURL = data.userinfo_endpoint
+          if (data.end_session_endpoint) this.newAuthSettings.authOpenIDLogoutURL = data.end_session_endpoint
+          if (data.jwks_uri) this.newAuthSettings.authOpenIDJwksURL = data.jwks_uri
+        })
+        .catch((error) => {
+          console.error('Failed to receive data', error)
+          const errorMsg = error.response?.data || 'Unknown error'
+          this.$toast.error(errorMsg)
+        })
+    },
+    validateOpenID() {
+      let isValid = true
+      if (!this.newAuthSettings.authOpenIDIssuerURL) {
+        this.$toast.error('Issuer URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDAuthorizationURL) {
+        this.$toast.error('Authorize URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDTokenURL) {
+        this.$toast.error('Token URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDUserInfoURL) {
+        this.$toast.error('Userinfo URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDJwksURL) {
+        this.$toast.error('JWKS URL required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDClientID) {
+        this.$toast.error('Client ID required')
+        isValid = false
+      }
+      if (!this.newAuthSettings.authOpenIDClientSecret) {
+        this.$toast.error('Client Secret required')
+        isValid = false
+      }
+
+      function isValidRedirectURI(uri) {
+        // Check for somestring://someother/string
+        const pattern = new RegExp('^\\w+://[\\w\\.-]+$', 'i')
+        return pattern.test(uri)
+      }
+
+      const uris = this.newAuthSettings.authOpenIDMobileRedirectURIs
+      if (uris.includes('*') && uris.length > 1) {
+        this.$toast.error('Mobile Redirect URIs: Asterisk (*) must be the only entry if used')
+        isValid = false
+      } else {
+        uris.forEach((uri) => {
+          if (uri !== '*' && !isValidRedirectURI(uri)) {
+            this.$toast.error(`Mobile Redirect URIs: Invalid URI ${uri}`)
+            isValid = false
+          }
+        })
+      }
+      return isValid
+    },
+    async saveSettings() {
+      if (!this.enableLocalAuth && !this.enableOpenIDAuth) {
+        this.$toast.error('Must have at least one authentication method enabled')
+        return
+      }
+
+      if (this.enableOpenIDAuth && !this.validateOpenID()) {
+        return
+      }
+
+      this.newAuthSettings.authActiveAuthMethods = []
+      if (this.enableLocalAuth) this.newAuthSettings.authActiveAuthMethods.push('local')
+      if (this.enableOpenIDAuth) this.newAuthSettings.authActiveAuthMethods.push('openid')
+
+      this.savingSettings = true
+      this.$axios
+        .$patch('/api/auth-settings', this.newAuthSettings)
+        .then((data) => {
+          this.$store.commit('setServerSettings', data.serverSettings)
+          if (data.updated) {
+            this.$toast.success('Server settings updated')
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+          this.$toast.error('Failed to update server settings')
+        })
+        .finally(() => {
+          this.savingSettings = false
+        })
+    },
+    init() {
+      this.newAuthSettings = {
+        ...this.authSettings
+      }
+      this.enableLocalAuth = this.authMethods.includes('local')
+      this.enableOpenIDAuth = this.authMethods.includes('openid')
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+#authentication-settings code {
+  font-size: 0.8rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+</style>

client/pages/config/backups.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
     <app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
+      <div v-if="backupLocation" class="flex items-center mb-4">
+        <span class="material-icons-outlined text-2xl text-black-50 mr-2">folder</span>
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelBackupLocation }}:</span>
+        <div class="text-gray-100 pl-4">{{ backupLocation }}</div>
+      </div>
+
       <div class="flex items-center py-2">
         <ui-toggle-switch v-model="enableBackups" small :disabled="updatingServerSettings" @input="updateBackupsSettings" />
         <ui-tooltip :text="$strings.LabelBackupsEnableAutomaticBackupsHelp">
@@ -11,14 +17,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-40">
+            <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-40">
+            <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span>
+          </div>
           <div class="text-gray-100">{{ nextBackupDate }}</div>
         </div>
       </div>
@@ -39,7 +49,7 @@
         </ui-tooltip>
       </div>
 
-      <tables-backups-table />
+      <tables-backups-table @loaded="backupsLoaded" />
 
       <modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
     </app-settings-content>
@@ -48,6 +58,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       updatingServerSettings: false,
@@ -56,7 +71,8 @@ export default {
       maxBackupSize: 1,
       cronExpression: '',
       newServerSettings: {},
-      showCronBuilder: false
+      showCronBuilder: false,
+      backupLocation: ''
     }
   },
   watch: {
@@ -89,6 +105,9 @@ export default {
     }
   },
   methods: {
+    backupsLoaded(backupLocation) {
+      this.backupLocation = backupLocation
+    },
     updateBackupsSettings() {
       if (isNaN(this.maxBackupSize) || this.maxBackupSize <= 0) {
         this.$toast.error('Invalid maximum backup size')
@@ -98,7 +117,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 +127,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,8 +51,14 @@
       </div>
     </app-settings-content>
 
-    <app-settings-content :header-text="$strings.HeaderEReaderDevices" showAddButton :description="''" @clicked="addNewDeviceClick">
-      <table v-if="existingEReaderDevices.length" class="tracksTable my-4">
+    <app-settings-content :header-text="$strings.HeaderEreaderDevices" :description="''">
+      <template #header-items>
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="addNewDeviceClick">{{ $strings.ButtonAddDevice }}</ui-btn>
+      </template>
+
+      <table v-if="existingEReaderDevices.length" class="tracksTable mt-4">
         <tr>
           <th class="text-left">{{ $strings.LabelName }}</th>
           <th class="text-left">{{ $strings.LabelEmail }}</th>
@@ -80,6 +90,11 @@
 
 <script>
 export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
   data() {
     return {
       loading: false,
@@ -93,6 +108,7 @@ export default {
         secure: true,
         user: null,
         pass: null,
+        testAddress: null,
         fromAddress: null
       },
       newEReaderDevice: {
@@ -117,6 +133,11 @@ export default {
     }
   },
   methods: {
+    resetChanges() {
+      this.newSettings = {
+        ...this.settings
+      }
+    },
     editDeviceClick(device) {
       this.selectedEReaderDevice = device
       this.showEReaderDeviceModal = true
@@ -139,7 +160,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 +217,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