Version bump v2.8.1

Update Login Page with Logo and Input Form Styling

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=16
+ARG VARIANT=20
 FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base
 
 # Setup the node environment

.devcontainer/dev.js

@@ -5,5 +5,6 @@ module.exports.config = {
   ConfigPath: Path.resolve('config'),
   MetadataPath: Path.resolve('metadata'),
   FFmpegPath: '/usr/bin/ffmpeg',
-  FFProbePath: '/usr/bin/ffprobe'
+  FFProbePath: '/usr/bin/ffprobe',
+  SkipBinariesCheck: false
 }

.devcontainer/devcontainer.json

@@ -8,7 +8,7 @@
 		// Append -bullseye or -buster to pin to an OS version.
 		// Use -bullseye variants on local arm64/Apple Silicon.
 		"args": {
-			"VARIANT": "16"
+			"VARIANT": "20"
 		}
 	},
 	"mounts": [

.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."
@@ -44,6 +44,7 @@ body:
       options:
         - Docker
         - Debian/PPA
+        - Windows Tray App
         - Built from source
         - Other
     validations:

.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

.github/workflows/docker-build.yml

@@ -71,7 +71,7 @@ jobs:
         with:
           tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
           context: .
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/arm64
           push: true
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max

.github/workflows/integration-test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: setup nade
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: install pkg
         run: npm install -g pkg

.github/workflows/unit-tests.yml

@@ -0,0 +1,31 @@
+name: Run Unit Tests
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Branch/Tag/SHA to test'
+        required: true
+  pull_request:
+  push:
+
+jobs:
+  run-unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event_name != 'workflow_dispatch' && github.ref_name || inputs.ref}}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test

.gitignore

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

.vscode/settings.json

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

Dockerfile

@@ -1,5 +1,5 @@
 ### STAGE 0: Build client ###
-FROM node:16-alpine AS build
+FROM node:20-alpine AS build
 WORKDIR /client
 COPY /client /client
 RUN npm ci && npm cache clean --force
@@ -7,7 +7,7 @@ RUN npm run generate
 
 ### STAGE 1: Build server ###
 FROM sandreas/tone:v0.1.5 AS tone
-FROM node:16-alpine
+FROM node:20-alpine
 
 ENV NODE_ENV=production
 
@@ -18,7 +18,8 @@ RUN apk update && \
     ffmpeg \
     make \
     python3 \
-    g++
+    g++ \
+    tini
 
 COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
@@ -31,4 +32,5 @@ RUN apk del make python3 g++
 
 EXPOSE 80
 
+ENTRYPOINT ["tini", "--"]
 CMD ["node", "index.js"]

build/linuxpackager

@@ -48,11 +48,10 @@ Description: $DESCRIPTION"
 echo "$controlfile" > dist/debian/DEBIAN/control;
 
 # Package debian
-pkg -t node16-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+pkg -t node18-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
 
-fakeroot dpkg-deb --build dist/debian
+fakeroot dpkg-deb -Zxz --build dist/debian
 
 mv dist/debian.deb "dist/$OUTPUT_FILE"
-chmod +x "dist/$OUTPUT_FILE"
 
 echo "Finished! Filename: $OUTPUT_FILE"

client/assets/app.css

@@ -217,36 +217,6 @@ Bookshelf Label
   filter: blur(20px);
 }
 
-
-.episode-subtitle {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px;
-  /* fallback */
-  max-height: 32px;
-  /* fallback */
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-.episode-subtitle-long {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px;
-  /* fallback */
-  max-height: 72px;
-  /* fallback */
-  -webkit-line-clamp: 6;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-
 /* Padding for toastification toasts in the top right to not cover appbar/toolbar */
 .app-bar-and-toolbar .Vue-Toastification__container.top-right {
   padding-top: 104px;
@@ -258,4 +228,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/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/components/app/Appbar.vue

@@ -320,9 +320,11 @@ export default {
         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>
@@ -94,6 +94,9 @@ export default {
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {
@@ -338,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) {

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">
@@ -94,6 +98,9 @@
       <template v-else-if="page === 'authors'">
         <div class="flex-grow" />
         <ui-btn v-if="userCanUpdate && authors && authors.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+
+        <!-- author sort select -->
+        <controls-sort-select v-if="authors && authors.length" v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
       </template>
     </div>
   </div>
@@ -179,6 +186,30 @@ export default {
         }
       ]
     },
+    authorSortItems() {
+      return [
+        {
+          text: this.$strings.LabelAuthorFirstLast,
+          value: 'name'
+        },
+        {
+          text: this.$strings.LabelAuthorLastFirst,
+          value: 'lastFirst'
+        },
+        {
+          text: this.$strings.LabelNumberOfBooks,
+          value: 'numBooks'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelUpdatedAt,
+          value: 'updatedAt'
+        }
+      ]
+    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
@@ -293,6 +324,9 @@ export default {
       }
 
       return items
+    },
+    showPlaylists() {
+      return this.$store.state.libraries.numUserPlaylists > 0
     }
   },
   methods: {
@@ -448,6 +482,9 @@ export default {
     updateCollapseBookSeries() {
       this.saveSettings()
     },
+    updateAuthorSort() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },

client/components/app/ConfigSideNav.vue

@@ -104,6 +104,11 @@ export default {
           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: {

client/components/app/MediaPlayerContainer.vue

@@ -1,5 +1,5 @@
 <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 v-if="streamLibraryItem" id="mediaPlayerContainer" 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" />
     <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" />
@@ -29,7 +29,7 @@
       </div>
       <div class="flex-grow" />
       <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
-        <span class="material-icons sm:px-2 py-1 md:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</span>
+        <button :aria-label="$strings.LabelClosePlayer" class="material-icons sm:px-2 py-1 md:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
       </ui-tooltip>
     </div>
     <player-ui
@@ -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
@@ -380,7 +380,7 @@ export default {
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === data.stream) {
         if (!data.numSegments) return
         var chunks = data.chunks
-        console.log(`[StreamContainer] Stream Progress ${data.percent}`)
+        console.log(`[MediaPlayerContainer] Stream Progress ${data.percent}`)
         if (this.$refs.audioPlayer) {
           this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
         } else {
@@ -397,17 +397,17 @@ export default {
       this.playerHandler.prepareOpenSession(session, this.currentPlaybackRate)
     },
     streamOpen(session) {
-      console.log(`[StreamContainer] Stream session open`, session)
+      console.log(`[MediaPlayerContainer] Stream session open`, session)
     },
     streamClosed(streamId) {
       // Stream was closed from the server
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[StreamContainer] Closing stream due to request from server')
+        console.warn('[MediaPlayerContainer] Closing stream due to request from server')
         this.playerHandler.closePlayer()
       }
     },
     streamReady() {
-      console.log(`[StreamContainer] Stream Ready`)
+      console.log(`[MediaPlayerContainer] Stream Ready`)
       if (this.$refs.audioPlayer) {
         this.$refs.audioPlayer.setStreamReady()
       } else {
@@ -417,7 +417,7 @@ export default {
     streamError(streamId) {
       // Stream had critical error from the server
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[StreamContainer] Closing stream due to stream error from server')
+        console.warn('[MediaPlayerContainer] Closing stream due to stream error from server')
         this.playerHandler.closePlayer()
       }
     },
@@ -496,7 +496,7 @@ export default {
 </script>
 
 <style>
-#streamContainer {
+#mediaPlayerContainer {
   box-shadow: 0px -6px 8px #1111113f;
 }
 </style>

client/components/app/SettingsContent.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
+      <slot name="header-prefix"></slot>
       <h1 class="text-xl">{{ headerText }}</h1>
 
       <slot name="header-items"></slot>

client/components/app/SideRail.vue

@@ -82,7 +82,7 @@
       <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>

client/components/cards/AuthorCard.vue

@@ -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/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 v-if="displayTitle" :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>
@@ -164,6 +164,7 @@ export default {
       imageReady: false,
       selected: false,
       isSelectionMode: false,
+      displayTitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -642,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
@@ -848,9 +855,11 @@ export default {
         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/controls/GlobalSearch.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="sm:w-80 w-full relative">
-    <form @submit.prevent="submitSearch">
-      <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
-    </form>
-    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
-      <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
+  <div class="">
+    <div class="w-full relative sm:w-80">
+      <form @submit.prevent="submitSearch">
+        <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+      </form>
+      <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
+        <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
+        <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
+      </div>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
           <p>{{ $strings.MessageThinking }}</p>

client/components/controls/LibraryFilterSelect.vue

@@ -368,9 +368,17 @@ export default {
           id: 'ebook',
           name: this.$strings.LabelHasEbook
         },
+        {
+          id: 'no-ebook',
+          name: this.$strings.LabelMissingEbook
+        },
         {
           id: 'supplementary',
           name: this.$strings.LabelHasSupplementaryEbook
+        },
+        {
+          id: 'no-supplementary',
+          name: this.$strings.LabelMissingSupplementaryEbook
         }
       ]
     },

client/components/controls/VolumeControl.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div class="cursor-pointer text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
+    <button :aria-label="$strings.LabelVolume" class="text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
       <span class="material-icons text-2xl sm:text-3xl">{{ volumeIcon }}</span>
-    </div>
+    </button>
     <transition name="menux">
       <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
         <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
@@ -38,8 +38,8 @@ export default {
       },
       set(val) {
         try {
-          localStorage.setItem("volume", val);
-        } catch(error) {
+          localStorage.setItem('volume', val)
+        } catch (error) {
           console.error('Failed to store volume', err)
         }
         this.$emit('input', val)
@@ -146,7 +146,7 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
-    const storageVolume = localStorage.getItem("volume")
+    const storageVolume = localStorage.getItem('volume')
     if (storageVolume) {
       this.volume = parseFloat(storageVolume)
     }

client/components/modals/AccountModal.vue

@@ -111,7 +111,8 @@
           </div>
 
           <div class="flex pt-4 px-2">
-            <ui-btn v-if="isEditingRoot" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
+            <ui-btn v-if="hasOpenIDLink" small :loading="unlinkingFromOpenID" color="primary" type="button" class="mr-2" @click.stop="unlinkOpenID">Unlink OpenID</ui-btn>
+            <ui-btn v-if="isEditingRoot" small class="flex items-center" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
@@ -136,7 +137,8 @@ export default {
       newUser: {},
       isNew: true,
       tags: [],
-      loadingTags: false
+      loadingTags: false,
+      unlinkingFromOpenID: false
     }
   },
   watch: {
@@ -180,7 +182,7 @@ export default {
       return this.isNew ? this.$strings.HeaderNewAccount : this.$strings.HeaderUpdateAccount
     },
     isEditingRoot() {
-      return this.account && this.account.type === 'root'
+      return this.account?.type === 'root'
     },
     libraries() {
       return this.$store.state.libraries.libraries
@@ -198,6 +200,9 @@ export default {
     },
     tagsSelectionText() {
       return this.newUser.permissions.selectedTagsNotAccessible ? this.$strings.LabelTagsNotAccessibleToUser : this.$strings.LabelTagsAccessibleToUser
+    },
+    hasOpenIDLink() {
+      return !!this.account?.hasOpenIDLink
     }
   },
   methods: {
@@ -205,6 +210,31 @@ export default {
       // Force close when navigating - used in UsersTable
       if (this.$refs.modal) this.$refs.modal.setHide()
     },
+    unlinkOpenID() {
+      const payload = {
+        message: 'Are you sure you want to unlink this user from OpenID?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.unlinkingFromOpenID = true
+            this.$axios
+              .$patch(`/api/users/${this.account.id}/openid-unlink`)
+              .then(() => {
+                this.$toast.success('User unlinked from OpenID')
+                this.show = false
+              })
+              .catch((error) => {
+                console.error('Failed to unlink user from OpenID', error)
+                this.$toast.error('Failed to unlink user from OpenID')
+              })
+              .finally(() => {
+                this.unlinkingFromOpenID = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     accessAllTagsToggled(val) {
       if (val) {
         if (this.newUser.itemTagsSelected?.length) {

client/components/modals/AddCustomMetadataProviderModal.vue

@@ -0,0 +1,105 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="custom-metadata-provider" :width="600" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="text-3xl text-white truncate">Add custom metadata provider</p>
+      </div>
+    </template>
+    <form @submit.prevent="submitForm">
+      <div class="px-4 w-full flex items-center 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 mb-2">
+            <div class="w-3/4 p-1">
+              <ui-text-input-with-label v-model="newName" :label="$strings.LabelName" />
+            </div>
+            <div class="w-1/4 p-1">
+              <ui-text-input-with-label value="Book" readonly :label="$strings.LabelMediaType" />
+            </div>
+          </div>
+          <div class="w-full mb-2 p-1">
+            <ui-text-input-with-label v-model="newUrl" label="URL" />
+          </div>
+          <div class="w-full mb-2 p-1">
+            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="'Authorization Header Value'" type="password" />
+          </div>
+          <div class="flex px-1 pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonAdd }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  data() {
+    return {
+      processing: false,
+      newName: '',
+      newUrl: '',
+      newAuthHeaderValue: ''
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    submitForm() {
+      if (!this.newName || !this.newUrl) {
+        this.$toast.error('Must add name and url')
+        return
+      }
+
+      this.processing = true
+      this.$axios
+        .$post('/api/custom-metadata-providers', {
+          name: this.newName,
+          url: this.newUrl,
+          mediaType: 'book', // Currently only supporting book mediaType
+          authHeaderValue: this.newAuthHeaderValue
+        })
+        .then((data) => {
+          this.$emit('added', data.provider)
+          this.$toast.success('New provider added')
+          this.show = false
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Unknown error'
+          console.error('Failed to add provider', error)
+          this.$toast.error('Failed to add provider: ' + errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      this.processing = false
+      this.newName = ''
+      this.newUrl = ''
+      this.newAuthHeaderValue = ''
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/ChaptersModal.vue

@@ -34,11 +34,6 @@ export default {
   data() {
     return {}
   },
-  watch: {
-    value(newVal) {
-      this.$nextTick(this.scrollToChapter)
-    }
-  },
   computed: {
     show: {
       get() {
@@ -53,7 +48,7 @@ export default {
       return this.playbackRate
     },
     currentChapterId() {
-      return this.currentChapter ? this.currentChapter.id : null
+      return this.currentChapter?.id || null
     },
     currentChapterStart() {
       return (this.currentChapter?.start || 0) / this._playbackRate
@@ -74,6 +69,11 @@ export default {
         }
       }
     }
+  },
+  updated() {
+    if (this.value) {
+      this.$nextTick(this.scrollToChapter)
+    }
   }
 }
 </script>

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

@@ -49,8 +49,8 @@
             </div>
             <div v-if="media.coverPath">
               <p class="text-center text-gray-200">Current</p>
-              <a :href="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" target="_blank" class="bg-primary">
-                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              <a :href="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" target="_blank" class="bg-primary">
+                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
               </a>
             </div>
           </div>
@@ -328,10 +328,22 @@ export default {
         console.error('PersistProvider', error)
       }
     },
+    getDefaultBookProvider() {
+      let provider = localStorage.getItem('book-provider')
+      if (!provider) return 'google'
+      // Validate book provider
+      if (!this.$store.getters['scanners/checkBookProviderExists'](provider)) {
+        console.error('Stored book provider does not exist', provider)
+        localStorage.removeItem('book-provider')
+        return 'google'
+      }
+      return provider
+    },
     getSearchQuery() {
       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() {
@@ -433,7 +445,9 @@ export default {
       this.searchTitle = this.libraryItem.media.metadata.title
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else this.provider = localStorage.getItem('book-provider') || 'google'
+      else {
+        this.provider = this.getDefaultBookProvider()
+      }
 
       // Prefer using ASIN if set and using audible provider
       if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
@@ -532,24 +546,11 @@ export default {
       // Persist in local storage
       localStorage.setItem('selectedMatchUsage', JSON.stringify(this.selectedMatchUsage))
 
-      if (updatePayload.metadata.cover) {
-        const coverPayload = {
-          url: updatePayload.metadata.cover
-        }
-        const success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
-          console.error('Failed to update', error)
-          return false
-        })
-        if (success) {
-          this.$toast.success(this.$strings.ToastItemCoverUpdateSuccess)
-        } else {
-          this.$toast.error(this.$strings.ToastItemCoverUpdateFailed)
-        }
-        console.log('Updated cover')
-        delete updatePayload.metadata.cover
-      }
-
       if (Object.keys(updatePayload).length) {
+        if (updatePayload.metadata.cover) {
+          updatePayload.url = updatePayload.metadata.cover
+          delete updatePayload.metadata.cover
+        }
         const mediaUpdatePayload = updatePayload
         const updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, mediaUpdatePayload).catch((error) => {
           console.error('Failed to update', error)

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

@@ -20,7 +20,7 @@
           </ui-tooltip>
         </div>
         <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
-          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
+          <ui-text-input ref="maxEpisodesToDownloadInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
           <ui-tooltip text="Value of 0 sets no max limit. When checking for new episodes this is the max number of episodes that will be downloaded.">
             <p class="pl-4 text-base">
               Max new episodes to download per check
@@ -129,9 +129,12 @@ export default {
           return
         }
       }
-      if (this.$refs.maxEpisodesInput && this.$refs.maxEpisodesInput.isFocused) {
+
+      if (this.$refs.maxEpisodesInput?.isFocused) {
         this.$refs.maxEpisodesInput.blur()
-        return
+      }
+      if (this.$refs.maxEpisodesToDownloadInput?.isFocused) {
+        this.$refs.maxEpisodesToDownloadInput.blur()
       }
 
       const updatePayload = {
@@ -140,9 +143,11 @@ export default {
       if (this.enableAutoDownloadEpisodes) {
         updatePayload.autoDownloadSchedule = this.cronExpression
       }
+      this.newMaxEpisodesToKeep = Number(this.newMaxEpisodesToKeep)
       if (this.newMaxEpisodesToKeep !== this.maxEpisodesToKeep) {
         updatePayload.maxEpisodesToKeep = this.newMaxEpisodesToKeep
       }
+      this.newMaxNewEpisodesToDownload = Number(this.newMaxNewEpisodesToDownload)
       if (this.newMaxNewEpisodesToDownload !== this.maxNewEpisodesToDownload) {
         updatePayload.maxNewEpisodesToDownload = this.newMaxNewEpisodesToDownload
       }

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

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

client/components/modals/libraries/EditModal.vue

@@ -127,7 +127,8 @@ export default {
           skipMatchingMediaWithIsbn: false,
           autoScanCronExpression: null,
           hideSingleBookSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'txtFiles', 'opfFile', 'absMetadata']
+          onlyShowLaterBooksInContinueSeries: false,
+          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
         }
       }
     },

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

@@ -19,9 +19,11 @@
         <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 ? index + 1 : '' }}
+            {{ 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="flex-grow px-4 py-3">{{ source.name }}</div>
           <div class="px-2 opacity-100">
             <ui-toggle-switch v-model="source.include" :off-color="'error'" @input="includeToggled(source)" />
           </div>
@@ -61,7 +63,12 @@ export default {
         },
         audioMetatags: {
           id: 'audioMetatags',
-          name: 'Audio file meta tags',
+          name: 'Audio file meta tags OR ebook metadata',
+          include: true
+        },
+        nfoFile: {
+          id: 'nfoFile',
+          name: 'NFO file',
           include: true
         },
         txtFiles: {
@@ -92,20 +99,34 @@ export default {
     },
     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: this.metadataSourceMapped.map((source) => (source.include ? source.id : null)).filter((s) => s)
+          metadataPrecedence: metadataSourceIds
         }
       }
     },
@@ -120,15 +141,16 @@ export default {
     },
     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.push(unusedSourceData)
+          this.metadataSourceMapped.unshift(unusedSourceData)
         }
       }
+
+      this.metadataSourceMapped.reverse()
     }
   },
   mounted() {

client/components/modals/libraries/LibrarySettings.vue

@@ -49,6 +49,20 @@
         </ui-tooltip>
       </div>
     </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+          <p class="pl-4 text-base">
+            {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+            <span class="material-icons icon-text text-sm">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+    </div>
+    <div v-if="isPodcastLibrary" class="py-3">
+      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-52" @input="formUpdated" />
+    </div>
   </div>
 </template>
 
@@ -69,7 +83,9 @@ export default {
       skipMatchingMediaWithAsin: false,
       skipMatchingMediaWithIsbn: false,
       audiobooksOnly: false,
-      hideSingleBookSeries: false
+      hideSingleBookSeries: false,
+      onlyShowLaterBooksInContinueSeries: false,
+      podcastSearchRegion: 'us'
     }
   },
   computed: {
@@ -85,6 +101,9 @@ export default {
     isBookLibrary() {
       return this.mediaType === 'book'
     },
+    isPodcastLibrary() {
+      return this.mediaType === 'podcast'
+    },
     providers() {
       if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
@@ -99,7 +118,9 @@ export default {
           skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
           skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn,
           audiobooksOnly: !!this.audiobooksOnly,
-          hideSingleBookSeries: !!this.hideSingleBookSeries
+          hideSingleBookSeries: !!this.hideSingleBookSeries,
+          onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
+          podcastSearchRegion: this.podcastSearchRegion
         }
       }
     },
@@ -113,6 +134,8 @@ export default {
       this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
       this.audiobooksOnly = !!this.librarySettings.audiobooksOnly
       this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
+      this.onlyShowLaterBooksInContinueSeries = !!this.librarySettings.onlyShowLaterBooksInContinueSeries
+      this.podcastSearchRegion = this.librarySettings.podcastSearchRegion || 'us'
     }
   },
   mounted() {

client/components/modals/podcast/EpisodeFeed.vue

@@ -33,7 +33,7 @@
               <div class="break-words">{{ episode.title }}</div>
               <widgets-podcast-type-indicator :type="episode.episodeType" />
             </div>
-            <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+            <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>
         </div>
@@ -68,7 +68,9 @@ export default {
       selectAll: false,
       search: null,
       searchTimeout: null,
-      searchText: null
+      searchText: null,
+      downloadedEpisodeGuidMap: {},
+      downloadedEpisodeUrlMap: {}
     }
   },
   watch: {
@@ -122,11 +124,13 @@ export default {
   },
   methods: {
     getIsEpisodeDownloaded(episode) {
-      return this.itemEpisodes.some((downloadedEpisode) => {
-        if (episode.guid && downloadedEpisode.guid === episode.guid) return true
-        if (!downloadedEpisode.enclosure?.url) return false
-        return this.getCleanEpisodeUrl(downloadedEpisode.enclosure.url) === episode.cleanUrl
-      })
+      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.
@@ -219,6 +223,14 @@ export default {
         })
     },
     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) => {

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

@@ -19,7 +19,7 @@
       <div class="w-full p-1">
         <ui-textarea-with-label v-model="newEpisode.subtitle" :label="$strings.LabelSubtitle" :rows="3" />
       </div>
-      <div class="w-full p-1 default-style">
+      <div class="w-full p-1">
         <ui-rich-text-editor :label="$strings.LabelDescription" v-model="newEpisode.description" />
       </div>
     </div>

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

@@ -18,7 +18,7 @@
       <div v-for="(episode, index) in episodesFound" :key="index" class="w-full py-4 border-b border-white border-opacity-5 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer px-2" @click.stop="selectEpisode(episode)">
         <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
         <p class="break-words mb-1">{{ episode.title }}</p>
-        <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+        <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
         <p class="text-xs text-gray-400">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
       </div>
     </template>

client/components/player/PlayerPlaybackControls.vue

@@ -2,21 +2,21 @@
   <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
     <div class="flex-grow" />
     <template v-if="!loading">
-      <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-4 md:mr-8" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+      <button :aria-label="$strings.ButtonPreviousChapter" class="flex items-center justify-center text-gray-300 mr-4 md:mr-8" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
         <span class="material-icons text-2xl sm:text-3xl">first_page</span>
-      </div>
-      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+      </button>
+      <button :aria-label="$strings.ButtonJumpBackward" class="flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
         <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
-      </div>
-      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 md:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+      </button>
+      <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 md:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
         <span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-      </div>
-      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+      </button>
+      <button :aria-label="$strings.ButtonJumpForward" class="flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
         <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
-      </div>
-      <div class="flex items-center justify-center ml-4 md:ml-8" :class="hasNextChapter ? 'text-gray-300 cursor-pointer' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
+      </button>
+      <button :aria-label="$strings.ButtonNextChapter" class="flex items-center justify-center ml-4 md:ml-8" :disabled="!hasNextChapter" :class="hasNextChapter ? 'text-gray-300' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
         <span class="material-icons text-2xl sm:text-3xl">last_page</span>
-      </div>
+      </button>
       <controls-playback-speed-control v-model="playbackRateInput" @input="playbackRateUpdated" @change="playbackRateChanged" />
     </template>
     <template v-else>

client/components/player/PlayerTrackBar.vue

@@ -57,7 +57,6 @@ export default {
   },
   watch: {
     duration: {
-      immediate: true,
       handler() {
         this.setChapterTicks()
       }
@@ -205,10 +204,14 @@ export default {
     },
     windowResize() {
       this.setTrackWidth()
+      this.setChapterTicks()
+      this.updatePlayedTrackWidth()
+      this.updateBufferTrack()
     }
   },
   mounted() {
     this.setTrackWidth()
+    this.setChapterTicks()
     window.addEventListener('resize', this.windowResize)
   },
   beforeDestroy() {

client/components/player/PlayerUi.vue

@@ -9,37 +9,37 @@
         </ui-tooltip>
 
         <ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
-          <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
+          <button :aria-label="$strings.LabelSleepTimer" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
             <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
             <div v-else class="flex items-center">
               <span class="material-icons text-lg text-warning">snooze</span>
               <p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
             </div>
-          </div>
+          </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
-          <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
+          <button :aria-label="$strings.LabelViewBookmarks" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
             <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
-          </div>
+          </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewChapters">
-          <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
+          <button :aria-label="$strings.LabelViewChapters" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
             <span class="material-icons text-2xl">format_list_bulleted</span>
-          </div>
+          </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="playerQueueItems.length" direction="top" :text="$strings.LabelViewQueue">
-          <button class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
+          <button :aria-label="$strings.LabelViewQueue" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
             <span class="material-icons text-2.5xl sm:text-3xl">playlist_play</span>
           </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
-          <div class="cursor-pointer text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
+          <button :aria-label="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack" class="text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
             <span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
-          </div>
+          </button>
         </ui-tooltip>
       </div>
 

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: {
@@ -136,6 +147,12 @@ export default {
           return p
         }) || []
       )
+    },
+    canScaleUp() {
+      return this.scale < MAX_SCALE
+    },
+    canScaleDown() {
+      return this.scale > MIN_SCALE
     }
   },
   methods: {
@@ -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

@@ -316,6 +316,7 @@ export default {
       reader.rendition = reader.book.renderTo('viewer', {
         width: this.readerWidth,
         height: this.readerHeight * 0.8,
+        allowScriptedContent: true,
         spread: 'auto',
         snap: true,
         manager: 'continuous',

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,146 @@
+<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">{{ $getString('HeaderYearReview', [yearInReviewYear]) }}</p>
+      <div class="hidden md:block flex-grow" />
+      <ui-btn class="w-full md:w-auto" @click.stop="clickShowYearInReview">{{ showYearInReview ? $strings.LabelYearReviewHide :
+        $strings.LabelYearReviewShow }}</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">{{ $strings.ButtonPrevious }}</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">{{
+          $strings.ButtonShare }}
+        </ui-btn>
+
+        <div class="flex-grow" />
+        <p class="hidden sm:block text-lg font-semibold">{{ $getString('LabelPersonalYearReview', [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">{{ $strings.ButtonRefresh }}</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">{{ $strings.ButtonNext }}</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">{{ $strings.ButtonShare }}</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">{{ $strings.ButtonPrevious }}</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">{{ $strings.ButtonShare }}
+          </ui-btn>
+
+          <div class="flex-grow" />
+          <p class="hidden sm:block text-lg font-semibold">{{ $getString('LabelServerYearReview', [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">{{ $strings.ButtonRefresh }}</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">{{ $strings.ButtonNext }}</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

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center mt-4">
+  <div class="text-center mt-4 relative">
     <div class="flex py-4">
       <ui-file-input ref="fileInput" class="mr-2" accept=".audiobookshelf" @change="backupUploaded">{{ $strings.ButtonUploadBackup }}</ui-file-input>
       <div class="flex-grow" />
@@ -54,6 +54,10 @@
         </div>
       </div>
     </prompt-dialog>
+
+    <div v-if="isApplyingBackup" class="absolute inset-0 w-full h-full flex items-center justify-center bg-black/20 rounded-md">
+      <ui-loading-indicator />
+    </div>
   </div>
 </template>
 
@@ -64,6 +68,7 @@ export default {
       showConfirmApply: false,
       selectedBackup: null,
       isBackingUp: false,
+      isApplyingBackup: false,
       processing: false,
       backups: []
     }
@@ -85,19 +90,21 @@ export default {
     },
     confirm() {
       this.showConfirmApply = false
+      this.isApplyingBackup = true
 
       this.$axios
         .$get(`/api/backups/${this.selectedBackup.id}/apply`)
         .then(() => {
-          this.isBackingUp = false
           location.replace('/config/backups?backup=1')
         })
         .catch((error) => {
-          this.isBackingUp = false
           console.error('Failed to apply backup', error)
           const errorMsg = error.response.data || this.$strings.ToastBackupRestoreFailed
           this.$toast.error(errorMsg)
         })
+        .finally(() => {
+          this.isApplyingBackup = false
+        })
     },
     deleteBackupClick(backup) {
       if (confirm(this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]))) {
@@ -180,7 +187,6 @@ export default {
     this.loadBackups()
     if (this.$route.query.backup) {
       this.$toast.success('Backup applied successfully')
-      this.$router.replace('/config')
     }
   }
 }

client/components/tables/CustomMetadataProviderTable.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="min-h-40">
+    <table v-if="providers.length" id="providers">
+      <tr>
+        <th>{{ $strings.LabelName }}</th>
+        <th>URL</th>
+        <th>Authorization Header Value</th>
+        <th class="w-12"></th>
+      </tr>
+      <tr v-for="provider in providers" :key="provider.id">
+        <td class="text-sm">{{ provider.name }}</td>
+        <td class="text-sm">{{ provider.url }}</td>
+        <td class="text-sm">
+          <span v-if="provider.authHeaderValue" class="custom-provider-api-key">{{ provider.authHeaderValue }}</span>
+        </td>
+        <td class="py-0">
+          <div class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="removeProvider(provider)">
+            <button type="button" :aria-label="$strings.ButtonDelete" class="material-icons text-base">delete</button>
+          </div>
+        </td>
+      </tr>
+    </table>
+    <div v-else-if="!processing" class="text-center py-8">
+      <p class="text-lg">No custom metadata providers</p>
+    </div>
+
+    <div v-if="processing" class="absolute inset-0 h-full flex items-center justify-center bg-black/40 rounded-md">
+      <ui-loading-indicator />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    providers: {
+      type: Array,
+      default: () => []
+    },
+    processing: Boolean
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    removeProvider(provider) {
+      const payload = {
+        message: `Are you sure you want remove custom metadata provider "${provider.name}"?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$emit('update:processing', true)
+
+            this.$axios
+              .$delete(`/api/custom-metadata-providers/${provider.id}`)
+              .then(() => {
+                this.$toast.success('Provider removed')
+                this.$emit('removed', provider.id)
+              })
+              .catch((error) => {
+                console.error('Failed to remove provider', error)
+                this.$toast.error('Failed to remove provider')
+              })
+              .finally(() => {
+                this.$emit('update:processing', false)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    }
+  }
+}
+</script>
+
+<style>
+#providers {
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid #474747;
+  width: 100%;
+}
+
+#providers td,
+#providers th {
+  /* border: 1px solid #2e2e2e; */
+  padding: 8px 8px;
+  text-align: left;
+}
+
+#providers td.py-0 {
+  padding: 0px 8px;
+}
+
+#providers tr:nth-child(even) {
+  background-color: #373838;
+}
+
+#providers tr:nth-child(odd) {
+  background-color: #2f2f2f;
+}
+
+#providers tr:hover {
+  background-color: #444;
+}
+
+#providers th {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #272727;
+}
+
+.custom-provider-api-key {
+  padding: 1px;
+  background-color: #272727;
+  border-radius: 4px;
+  color: transparent;
+  transition: color, background-color 0.5s ease;
+}
+
+.custom-provider-api-key:hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

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>
@@ -75,6 +75,10 @@ export default {
     }
   },
   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>
@@ -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>
@@ -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/collection/BookTableRow.vue

@@ -30,7 +30,7 @@
               ><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>

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 overflow-hidden">
+          <p class="text-sm text-gray-200 line-clamp-2" 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,37 +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
         })
         .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

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full py-6">
+  <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>
@@ -18,28 +18,41 @@
           <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
         </template>
         <template v-else>
-          <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 md:ml-4" />
-          <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+          <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>
+    <!-- <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>
+    <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: {
@@ -60,13 +73,21 @@ export default {
       processing: false,
       search: null,
       searchTimeout: null,
-      searchText: null
+      searchText: null,
+      isSearching: false,
+      totalEpisodes: 0,
+      episodesPerPage: null,
+      episodeIndexesMounted: [],
+      episodeComponentRefs: {},
+      windowHeight: 0,
+      episodesTableOffsetTop: 0,
+      episodeRowHeight: 176
     }
   },
   watch: {
     libraryItem: {
       handler() {
-        this.init()
+        this.refresh()
       }
     }
   },
@@ -194,13 +215,19 @@ export default {
     submit() {},
     inputUpdate() {
       clearTimeout(this.searchTimeout)
+      this.isSearching = true
+      let searchStart = this.searchText
       this.searchTimeout = setTimeout(() => {
-        if (!this.search || !this.search.trim()) {
+        this.isSearching = false
+        if (!this.search?.trim()) {
           this.searchText = ''
-          return
+        } else {
+          this.searchText = this.search.toLowerCase().trim()
         }
-        this.searchText = this.search.toLowerCase().trim()
-      }, 500)
+        if (searchStart !== this.searchText) {
+          this.init()
+        }
+      }, 750)
     },
     contextMenuAction({ action }) {
       if (action === 'quick-match-episodes') {
@@ -304,24 +331,30 @@ export default {
       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 = []
+      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 = []
@@ -367,12 +400,147 @@ export default {
       this.$store.commit('globals/setSelectedEpisode', episode)
       this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
     },
-    init() {
+    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>

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 scoped>
-.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>
@@ -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,6 +1,6 @@
 <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'">

client/components/ui/MultiSelect.vue

@@ -11,13 +11,13 @@
             </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" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" class="h-full bg-primary focus:outline-none px-1 w-6" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
       <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 itemsToShow">
-          <li :key="item" 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>
+          <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" 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 }}</span>
             </div>
@@ -50,7 +50,11 @@ export default {
     label: String,
     disabled: Boolean,
     readonly: Boolean,
-    showEdit: Boolean
+    showEdit: Boolean,
+    menuDisabled: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -58,7 +62,9 @@ export default {
       currentSearch: null,
       typingTimeout: null,
       isFocused: false,
-      menu: null
+      menu: null,
+      filteredItems: null,
+      selectedMenuItemIndex: null
     }
   },
   watch: {
@@ -77,7 +83,7 @@ export default {
       }
     },
     showMenu() {
-      return this.isFocused
+      return this.isFocused && !this.menuDisabled
     },
     wrapperClass() {
       var classes = []
@@ -87,24 +93,63 @@ export default {
       return classes.join(' ')
     },
     itemsToShow() {
-      if (!this.currentSearch || !this.textInput) {
+      if (!this.currentSearch || !this.textInput || !this.filteredItems) {
         return this.items
       }
 
-      return this.items.filter((i) => {
-        var iValue = String(i).toLowerCase()
-        return iValue.includes(this.currentSearch.toLowerCase())
-      })
+      return this.filteredItems
     }
   },
   methods: {
     editItem(item) {
       this.$emit('edit', item)
     },
-    keydownInput() {
+    search() {
+      if (!this.textInput) {
+        this.filteredItems = null
+        return
+      }
+      this.currentSearch = this.textInput
+
+      const results = this.items.filter((i) => {
+        var iValue = String(i).toLowerCase()
+        return iValue.includes(this.currentSearch.toLowerCase())
+      })
+
+      this.filteredItems = results || []
+    },
+    keydownInput(event) {
+      let items = this.itemsToShow
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (!items.length) return
+        if (event.key === 'ArrowDown') {
+          if (this.selectedMenuItemIndex === null) {
+            this.selectedMenuItemIndex = 0
+          } else {
+            this.selectedMenuItemIndex = Math.min(this.selectedMenuItemIndex + 1, items.length - 1)
+          }
+        } else if (event.key === 'ArrowUp') {
+          if (this.selectedMenuItemIndex === null) {
+            this.selectedMenuItemIndex = items.length - 1
+          } else {
+            this.selectedMenuItemIndex = Math.max(this.selectedMenuItemIndex - 1, 0)
+          }
+        }
+        this.recalcScroll()
+        return
+      } else if (event.key === 'Enter') {
+        if (this.selectedMenuItemIndex !== null) {
+          this.clickedOption(event, items[this.selectedMenuItemIndex])
+        } else {
+          this.submitForm()
+        }
+        return
+      }
+      this.selectedMenuItemIndex = null
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
-        this.currentSearch = this.textInput
+        this.search()
       }, 100)
       this.setInputWidth()
     },
@@ -116,6 +161,24 @@ export default {
         this.recalcMenuPos()
       }, 50)
     },
+    recalcScroll() {
+      if (!this.menu) return
+      var menuItems = this.menu.querySelectorAll('li')
+      if (!menuItems.length) return
+      var selectedItem = menuItems[this.selectedMenuItemIndex]
+      if (!selectedItem) return
+      var menuHeight = this.menu.offsetHeight
+      var itemHeight = selectedItem.offsetHeight
+      var itemTop = selectedItem.offsetTop
+      var itemBottom = itemTop + itemHeight
+      if (itemBottom > this.menu.scrollTop + menuHeight) {
+        let menuPaddingBottom = parseFloat(window.getComputedStyle(this.menu).paddingBottom)
+        this.menu.scrollTop = itemBottom - menuHeight + menuPaddingBottom
+      } else if (itemTop < this.menu.scrollTop) {
+        let menuPaddingTop = parseFloat(window.getComputedStyle(this.menu).paddingTop)
+        this.menu.scrollTop = itemTop - menuPaddingTop
+      }
+    },
     recalcMenuPos() {
       if (!this.menu || !this.$refs.inputWrapper) return
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
@@ -204,7 +267,10 @@ export default {
         e.stopPropagation()
         e.preventDefault()
       }
-      if (this.$refs.input) this.$refs.input.focus()
+      if (this.$refs.input) {
+        this.$refs.input.style.width = '24px'
+        this.$refs.input.focus()
+      }
 
       var newSelected = null
       if (this.selected.includes(itemValue)) {
@@ -215,6 +281,7 @@ export default {
       }
       this.textInput = null
       this.currentSearch = null
+      this.selectedMenuItemIndex = null
       this.$emit('input', newSelected)
       this.$nextTick(() => {
         this.recalcMenuPos()
@@ -241,6 +308,7 @@ export default {
       this.$emit('newItem', item)
       this.textInput = null
       this.currentSearch = null
+      this.selectedMenuItemIndex = null
       this.$nextTick(() => {
         this.blur()
       })
@@ -257,6 +325,7 @@ export default {
       } else {
         this.insertNewItem(this.textInput)
       }
+      if (this.$refs.input) this.$refs.input.style.width = '24px'
     },
     scroll() {
       this.recalcMenuPos()

client/components/ui/MultiSelectQueryInput.vue

@@ -14,13 +14,13 @@
           <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" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" class="h-full bg-primary focus:outline-none px-1 w-6" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
       <ul ref="menu" v-show="showMenu" class="absolute z-60 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 itemsToShow">
-          <li :key="item.id" 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>
+          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" 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.name }}</span>
             </div>
@@ -63,7 +63,8 @@ export default {
       typingTimeout: null,
       isFocused: false,
       menu: null,
-      items: []
+      items: [],
+      selectedMenuItemIndex: null
     }
   },
   watch: {
@@ -122,7 +123,35 @@ export default {
 
       this.items = results || []
     },
-    keydownInput() {
+    keydownInput(event) {
+      let items = this.itemsToShow
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        if (!items.length) return
+        if (event.key === 'ArrowDown') {
+          if (this.selectedMenuItemIndex === null) {
+            this.selectedMenuItemIndex = 0
+          } else {
+            this.selectedMenuItemIndex = Math.min(this.selectedMenuItemIndex + 1, items.length - 1)
+          }
+        } else if (event.key === 'ArrowUp') {
+          if (this.selectedMenuItemIndex === null) {
+            this.selectedMenuItemIndex = items.length - 1
+          } else {
+            this.selectedMenuItemIndex = Math.max(this.selectedMenuItemIndex - 1, 0)
+          }
+        }
+        this.recalcScroll()
+        return
+      } else if (event.key === 'Enter') {
+        if (this.selectedMenuItemIndex !== null) {
+          this.clickedOption(event, items[this.selectedMenuItemIndex])
+        } else {
+          this.submitForm()
+        }
+        return
+      }
+      this.selectedMenuItemIndex = null
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
         this.search()
@@ -137,6 +166,24 @@ export default {
         this.recalcMenuPos()
       }, 50)
     },
+    recalcScroll() {
+      if (!this.menu) return
+      var menuItems = this.menu.querySelectorAll('li')
+      if (!menuItems.length) return
+      var selectedItem = menuItems[this.selectedMenuItemIndex]
+      if (!selectedItem) return
+      var menuHeight = this.menu.offsetHeight
+      var itemHeight = selectedItem.offsetHeight
+      var itemTop = selectedItem.offsetTop
+      var itemBottom = itemTop + itemHeight
+      if (itemBottom > this.menu.scrollTop + menuHeight) {
+        let menuPaddingBottom = parseFloat(window.getComputedStyle(this.menu).paddingBottom)
+        this.menu.scrollTop = itemBottom - menuHeight + menuPaddingBottom
+      } else if (itemTop < this.menu.scrollTop) {
+        let menuPaddingTop = parseFloat(window.getComputedStyle(this.menu).paddingTop)
+        this.menu.scrollTop = itemTop - menuPaddingTop
+      }
+    },
     recalcMenuPos() {
       if (!this.menu || !this.$refs.inputWrapper) return
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
@@ -228,7 +275,10 @@ export default {
         e.stopPropagation()
         e.preventDefault()
       }
-      if (this.$refs.input) this.$refs.input.focus()
+      if (this.$refs.input) {
+        this.$refs.input.style.width = '24px'
+        this.$refs.input.focus()
+      }
 
       let newSelected = null
       if (this.getIsSelected(item.id)) {
@@ -244,6 +294,7 @@ export default {
       }
       this.textInput = null
       this.currentSearch = null
+      this.selectedMenuItemIndex = null
 
       this.$emit('input', newSelected)
       this.$nextTick(() => {
@@ -271,6 +322,7 @@ export default {
       this.$emit('newItem', item)
       this.textInput = null
       this.currentSearch = null
+      this.selectedMenuItemIndex = null
       this.$nextTick(() => {
         this.blur()
       })
@@ -291,6 +343,7 @@ export default {
           name: this.textInput
         })
       }
+      if (this.$refs.input) this.$refs.input.style.width = '24px'
     },
     scroll() {
       this.recalcMenuPos()

client/components/ui/RichTextEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="default-style">
     <p v-if="label" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
       {{ label }}
     </p>
@@ -29,31 +29,31 @@ export default {
     config() {
       return {
         toolbar: {
-          getDefaultHTML: () => `    <div class="trix-button-row">
+          getDefaultHTML: () => `<div class="trix-button-row">
       <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{lang.bold}" tabindex="-1">#{lang.bold}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{lang.italic}" tabindex="-1">#{lang.italic}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="#{lang.strike}" tabindex="-1">#{lang.strike}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{lang.link}" tabindex="-1">#{lang.link}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${this.$strings.LabelFontBold}" tabindex="-1">${this.$strings.LabelFontBold}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${this.$strings.LabelFontItalic}" tabindex="-1">${this.$strings.LabelFontItalic}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${this.$strings.LabelFontStrikethrough}" tabindex="-1">${this.$strings.LabelFontStrikethrough}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="${this.$strings.LabelTextEditorLink}" tabindex="-1">${this.$strings.LabelTextEditorLink}</button>
       </span>
       <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{lang.bullets}" tabindex="-1">#{lang.bullets}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{lang.numbers}" tabindex="-1">#{lang.numbers}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${this.$strings.LabelTextEditorBulletedList}" tabindex="-1">${this.$strings.LabelTextEditorBulletedList}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${this.$strings.LabelTextEditorNumberedList}" tabindex="-1">${this.$strings.LabelTextEditorNumberedList}</button>
       </span>
 
       <span class="trix-button-group-spacer"></span>
       <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="#{lang.undo}" tabindex="-1">#{lang.undo}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="#{lang.redo}" tabindex="-1">#{lang.redo}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${this.$strings.LabelUndo}" tabindex="-1">${this.$strings.LabelUndo}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${this.$strings.LabelRedo}" tabindex="-1">${this.$strings.LabelRedo}</button>
       </span>
     </div>
     <div class="trix-dialogs" data-trix-dialogs>
       <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
         <div class="trix-dialog__link-fields">
-          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="#{lang.urlPlaceholder}" aria-label="#{lang.url}" required data-trix-input>
+          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="" aria-label="URL" required data-trix-input>
           <div class="trix-button-group">
-            <input type="button" class="trix-button trix-button--dialog" value="#{lang.link}" data-trix-method="setAttribute">
-            <input type="button" class="trix-button trix-button--dialog" value="#{lang.unlink}" data-trix-method="removeAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="${this.$strings.LabelTextEditorLink}" data-trix-method="setAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="${this.$strings.LabelTextEditorUnlink}" data-trix-method="removeAttribute">
           </div>
         </div>
       </div>

client/components/ui/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="relative">
-    <input :id="inputId" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
+    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
@@ -33,6 +33,7 @@ export default {
     textCenter: Boolean,
     clearable: Boolean,
     inputId: String,
+    inputName: String,
     step: [String, Number],
     min: [String, Number]
   },
@@ -117,4 +118,4 @@ input:read-only {
 input::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
-</style>
+</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/layouts/default.vue

@@ -7,7 +7,7 @@
       <Nuxt :key="currentLang" />
     </div>
 
-    <app-stream-container ref="streamContainer" />
+    <app-media-player-container ref="mediaPlayerContainer" />
 
     <modals-item-edit-modal />
     <modals-collections-add-create-modal />
@@ -129,23 +129,23 @@ export default {
       this.$eventBus.$emit('socket_init')
     },
     streamOpen(stream) {
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamOpen(stream)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamOpen(stream)
     },
     streamClosed(streamId) {
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamClosed(streamId)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamClosed(streamId)
     },
     streamProgress(data) {
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamProgress(data)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamProgress(data)
     },
     streamReady() {
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamReady()
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamReady()
     },
     streamReset(payload) {
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamReset(payload)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamReset(payload)
     },
     streamError({ id, errorMessage }) {
       this.$toast.error(`Stream Failed: ${errorMessage}`)
-      if (this.$refs.streamContainer) this.$refs.streamContainer.streamError(id)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.streamError(id)
     },
     libraryAdded(library) {
       this.$store.commit('libraries/addUpdate', library)
@@ -247,7 +247,7 @@ export default {
         this.multiSessionCurrentSessionId = null
         this.$toast.dismiss('multiple-sessions')
       }
-      if (this.$refs.streamContainer) this.$refs.streamContainer.sessionClosedEvent(sessionId)
+      if (this.$refs.mediaPlayerContainer) this.$refs.mediaPlayerContainer.sessionClosedEvent(sessionId)
     },
     userMediaProgressUpdate(payload) {
       this.$store.commit('user/updateMediaProgress', payload)
@@ -328,6 +328,14 @@ export default {
 
       this.$store.commit('libraries/setEReaderDevices', data.ereaderDevices)
     },
+    customMetadataProviderAdded(provider) {
+      if (!provider?.id) return
+      this.$store.commit('scanners/addCustomMetadataProvider', provider)
+    },
+    customMetadataProviderRemoved(provider) {
+      if (!provider?.id) return
+      this.$store.commit('scanners/removeCustomMetadataProvider', provider)
+    },
     initializeSocket() {
       this.socket = this.$nuxtSocket({
         name: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
@@ -406,6 +414,10 @@ export default {
       this.socket.on('batch_quickmatch_complete', this.batchQuickMatchComplete)
 
       this.socket.on('admin_message', this.adminMessageEvt)
+
+      // Custom metadata provider Listeners
+      this.socket.on('custom_metadata_provider_added', this.customMetadataProviderAdded)
+      this.socket.on('custom_metadata_provider_removed', this.customMetadataProviderRemoved)
     },
     showUpdateToast(versionData) {
       var ignoreVersion = localStorage.getItem('ignoreVersion')

client/nuxt.config.js

@@ -25,11 +25,13 @@ module.exports = {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' }
+      { hid: 'description', name: 'description', content: '' },
+      { hid: 'robots', name: 'robots', content: 'noindex' }
     ],
     script: [],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' },
+      { rel: 'apple-touch-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/ios_icon.png' }
     ]
   },
 
@@ -39,6 +41,7 @@ module.exports = {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
+    '@/assets/tailwind.css',
     '@/assets/app.css'
   ],
 
@@ -58,9 +61,7 @@ module.exports = {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/tailwindcss
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/pwa',
-    '@nuxt/postcss8'
+    '@nuxtjs/pwa'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -96,7 +97,7 @@ module.exports = {
     meta: {
       appleStatusBarStyle: 'black',
       name: 'Audiobookshelf',
-      theme_color: '#373838',
+      theme_color: '#232323',
       mobileAppIOS: true,
       nativeUI: true
     },
@@ -104,16 +105,16 @@ module.exports = {
       name: 'Audiobookshelf',
       short_name: 'Audiobookshelf',
       display: 'standalone',
-      background_color: '#373838',
+      background_color: '#232323',
       icons: [
         {
           src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
-          sizes: "any"
+          sizes: 'any'
         },
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon64.png',
-          type: "image/png",
-          sizes: "64x64"
+          src: (process.env.ROUTER_BASE_PATH || '') + '/icon192.png',
+          type: 'image/png',
+          sizes: 'any'
         }
       ]
     },

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.5.0",
+  "version": "2.8.1",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",
@@ -21,9 +21,9 @@
     "cron-parser": "^4.7.1",
     "date-fns": "^2.25.0",
     "epubjs": "^0.3.88",
-    "hls.js": "^1.0.7",
+    "hls.js": "^1.5.7",
     "libarchive.js": "^1.3.0",
-    "nuxt": "^2.15.8",
+    "nuxt": "^2.17.3",
     "nuxt-socket-io": "^1.1.18",
     "trix": "^1.3.1",
     "v-click-outside": "^3.1.2",
@@ -31,11 +31,9 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@nuxt/postcss8": "^1.1.3",
     "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/tailwindcss": "^4.2.1",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.3.6",
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.4.1"
   }
 }

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: {
@@ -75,19 +82,33 @@ export default {
       this.$setLanguageCode(lang)
     },
     logout() {
-      var rootSocket = this.$root.socket || {}
-      const logoutPayload = {
-        socketId: rootSocket.id
+      // Disconnect from socket
+      if (this.$root.socket) {
+        console.log('Disconnecting from socket', this.$root.socket.id)
+        this.$root.socket.removeAllListeners()
+        this.$root.socket.disconnect()
       }
-      this.$axios.$post('/logout', logoutPayload).catch((error) => {
-        console.error(error)
-      })
+
       if (localStorage.getItem('token')) {
         localStorage.removeItem('token')
       }
       this.$store.commit('libraries/setUserPlaylists', [])
       this.$store.commit('libraries/setCollections', [])
-      this.$router.push('/login')
+
+      this.$axios
+        .$post('/logout')
+        .then((logoutPayload) => {
+          const redirect_url = logoutPayload.redirect_url
+
+          if (redirect_url) {
+            window.location.href = redirect_url
+          } else {
+            this.$router.push('/login')
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
     },
     resetForm() {
       this.password = null

client/pages/audiobook/_id/chapters.vue

@@ -142,7 +142,7 @@
       </template>
       <div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative">
         <div v-if="!chapterData" class="flex p-20">
-          <ui-text-input-with-label v-model="asinInput" label="ASIN" />
+          <ui-text-input-with-label v-model.trim="asinInput" label="ASIN" />
           <ui-dropdown v-model="regionInput" :label="$strings.LabelRegion" small :items="audibleRegions" class="w-32 mx-1" />
           <ui-btn small color="primary" class="mt-5" @click="findChapters">{{ $strings.ButtonSearch }}</ui-btn>
         </div>

client/pages/author/_id.vue

@@ -17,7 +17,10 @@
           </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 whitespace-pre-wrap">{{ author.description }}</p>
+          <p ref="description" id="author-description" class="text-white max-w-3xl text-base whitespace-pre-wrap" :class="{ 'show-full': showFullDescription }">{{ author.description }}</p>
+          <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
+            {{ showFullDescription ? 'Read less' : 'Read more' }} <span class="material-icons text-xl pl-1">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
+          </button>
         </div>
       </div>
 
@@ -62,7 +65,10 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      isDescriptionClamped: false,
+      showFullDescription: false
+    }
   },
   computed: {
     streamLibraryItem() {
@@ -82,6 +88,10 @@ export default {
     }
   },
   methods: {
+    checkDescriptionClamped() {
+      if (!this.$refs.description) return
+      this.isDescriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
+    },
     editAuthor() {
       this.$store.commit('globals/showEditAuthorModal', this.author)
     },
@@ -93,6 +103,7 @@ export default {
           series: this.authorSeries,
           libraryItems: this.libraryItems
         }
+        this.$nextTick(this.checkDescriptionClamped)
       }
     },
     authorRemoved(author) {
@@ -104,6 +115,7 @@ export default {
   },
   mounted() {
     if (!this.author) this.$router.replace('/')
+    this.checkDescriptionClamped()
 
     this.$root.socket.on('author_updated', this.authorUpdated)
     this.$root.socket.on('author_removed', this.authorRemoved)
@@ -113,4 +125,19 @@ export default {
     this.$root.socket.off('author_removed', this.authorRemoved)
   }
 }
-</script>
+</script>
+
+<style scoped>
+#author-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  max-height: 6.25rem;
+  transition: all 0.3s ease-in-out;
+}
+#author-description.show-full {
+  -webkit-line-clamp: unset;
+  max-height: 999rem;
+}
+</style>

client/pages/batch/index.vue

@@ -20,44 +20,44 @@
       <div class="overflow-hidden">
         <transition name="slide">
           <div v-if="openMapOptions" class="flex flex-wrap">
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.subtitle" />
-              <ui-text-input-with-label ref="subtitleInput" v-model="batchDetails.subtitle" :disabled="!selectedBatchUsage.subtitle" :label="$strings.LabelSubtitle" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="subtitleInput" v-model="batchDetails.subtitle" :disabled="!selectedBatchUsage.subtitle" :label="$strings.LabelSubtitle" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.authors" />
               <!-- 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" />
+              <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" filter-key="authors" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.publishedYear" />
-              <ui-text-input-with-label ref="publishedYearInput" v-model="batchDetails.publishedYear" :disabled="!selectedBatchUsage.publishedYear" :label="$strings.LabelPublishYear" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="publishedYearInput" v-model="batchDetails.publishedYear" :disabled="!selectedBatchUsage.publishedYear" :label="$strings.LabelPublishYear" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.series" />
-              <ui-multi-select ref="seriesSelect" v-model="batchDetails.series" :disabled="!selectedBatchUsage.series" :label="$strings.LabelSeries" :items="existingSeriesNames" @newItem="newSeriesItem" @removedItem="removedSeriesItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="seriesSelect" v-model="batchDetails.series" :disabled="!selectedBatchUsage.series" :label="$strings.LabelSeries" :items="existingSeriesNames" @newItem="newSeriesItem" @removedItem="removedSeriesItem" class="mb-5 ml-4" />
             </div>
-            <div class="flex items-center px-4 w-1/2">
+            <div class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.genres" />
-              <ui-multi-select ref="genresSelect" v-model="batchDetails.genres" :disabled="!selectedBatchUsage.genres" :label="$strings.LabelGenres" :items="genreItems" @newItem="newGenreItem" @removedItem="removedGenreItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="genresSelect" v-model="batchDetails.genres" :disabled="!selectedBatchUsage.genres" :label="$strings.LabelGenres" :items="genreItems" @newItem="newGenreItem" @removedItem="removedGenreItem" class="mb-5 ml-4" />
             </div>
-            <div class="flex items-center px-4 w-1/2">
+            <div class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.tags" />
-              <ui-multi-select ref="tagsSelect" v-model="batchDetails.tags" :label="$strings.LabelTags" :disabled="!selectedBatchUsage.tags" :items="tagItems" @newItem="newTagItem" @removedItem="removedTagItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="tagsSelect" v-model="batchDetails.tags" :label="$strings.LabelTags" :disabled="!selectedBatchUsage.tags" :items="tagItems" @newItem="newTagItem" @removedItem="removedTagItem" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.narrators" />
-              <ui-multi-select ref="narratorsSelect" v-model="batchDetails.narrators" :disabled="!selectedBatchUsage.narrators" :label="$strings.LabelNarrators" :items="narratorItems" @newItem="newNarratorItem" @removedItem="removedNarratorItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="narratorsSelect" v-model="batchDetails.narrators" :disabled="!selectedBatchUsage.narrators" :label="$strings.LabelNarrators" :items="narratorItems" @newItem="newNarratorItem" @removedItem="removedNarratorItem" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.publisher" />
-              <ui-text-input-with-label ref="publisherInput" v-model="batchDetails.publisher" :disabled="!selectedBatchUsage.publisher" :label="$strings.LabelPublisher" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="publisherInput" v-model="batchDetails.publisher" :disabled="!selectedBatchUsage.publisher" :label="$strings.LabelPublisher" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.language" />
-              <ui-text-input-with-label ref="languageInput" v-model="batchDetails.language" :disabled="!selectedBatchUsage.language" :label="$strings.LabelLanguage" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="languageInput" v-model="batchDetails.language" :disabled="!selectedBatchUsage.language" :label="$strings.LabelLanguage" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.explicit" />
               <div class="ml-4">
                 <ui-checkbox
@@ -71,6 +71,20 @@
                 />
               </div>
             </div>
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
+              <ui-checkbox v-model="selectedBatchUsage.abridged" />
+              <div class="ml-4">
+                <ui-checkbox
+                  v-model="batchDetails.abridged"
+                  :label="$strings.LabelAbridged"
+                  :disabled="!selectedBatchUsage.abridged"
+                  :checkbox-bg="!selectedBatchUsage.abridged ? 'bg' : 'primary'"
+                  :check-color="!selectedBatchUsage.abridged ? 'gray-600' : 'green-500'"
+                  border-color="gray-600"
+                  :label-class="!selectedBatchUsage.abridged ? 'pl-2 text-base text-gray-400 font-semibold' : 'pl-2 text-base font-semibold'"
+                />
+              </div>
+            </div>
 
             <div class="w-full flex items-center justify-end p-4">
               <ui-btn color="success" :disabled="!hasSelectedBatchUsage" :padding-x="8" small class="text-base" :loading="isProcessing" @click="mapBatchDetails">{{ $strings.ButtonApply }}</ui-btn>
@@ -139,7 +153,8 @@ export default {
         narrators: [],
         publisher: null,
         language: null,
-        explicit: false
+        explicit: false,
+        abridged: false
       },
       selectedBatchUsage: {
         subtitle: false,
@@ -151,7 +166,8 @@ export default {
         narrators: false,
         publisher: false,
         language: false,
-        explicit: false
+        explicit: false,
+        abridged: false
       },
       appendableKeys: ['authors', 'genres', 'tags', 'narrators', 'series'],
       openMapOptions: false

client/pages/config.vue

@@ -57,6 +57,7 @@ export default {
         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,288 @@
+<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="showCustomLoginMessage" checkbox-bg="bg" />
+          <p class="text-lg pl-4">Custom Message on Login</p>
+        </div>
+        <transition name="slide">
+          <div v-if="showCustomLoginMessage" class="w-full pt-4">
+            <ui-rich-text-editor v-model="newAuthSettings.authLoginCustomMessage" />
+          </div>
+        </transition>
+      </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="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,
+      showCustomLoginMessage: 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\\.-]+(/[\\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
+      }
+
+      if (!this.showCustomLoginMessage || !this.newAuthSettings.authLoginCustomMessage?.trim()) {
+        this.newAuthSettings.authLoginCustomMessage = null
+      }
+
+      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')
+      this.showCustomLoginMessage = !!this.authSettings.authLoginCustomMessage
+    }
+  },
+  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/index.vue

@@ -178,9 +178,9 @@
       </a>
       <p class="pl-4 pr-2 text-sm text-yellow-400">
         {{ $strings.MessageJoinUsOn }}
-        <a class="underline" href="https://discord.gg/pJsjuNCKRq" target="_blank">discord</a>
+        <a class="underline" href="https://discord.gg/HQgCbd6E75" target="_blank">discord</a>
       </p>
-      <a href="https://discord.gg/pJsjuNCKRq" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
+      <a href="https://discord.gg/HQgCbd6E75" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
         <svg width="31" height="24" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
           <g clip-path="url(#clip0)">
             <path

client/pages/config/item-metadata-utils/custom-metadata-providers.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="relative">
+    <app-settings-content :header-text="$strings.HeaderCustomMetadataProviders">
+      <template #header-prefix>
+        <nuxt-link to="/config/item-metadata-utils" class="w-8 h-8 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center mr-2">
+          <span class="material-icons text-2xl">arrow_back</span>
+        </nuxt-link>
+      </template>
+      <template #header-items>
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/custom-metadata-providers" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="setShowAddModal">{{ $strings.ButtonAdd }}</ui-btn>
+      </template>
+
+      <tables-custom-metadata-provider-table :providers="providers" :processing.sync="processing" class="pt-2" @removed="providerRemoved" />
+      <modals-add-custom-metadata-provider-modal ref="addModal" v-model="showAddModal" @added="providerAdded" />
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+    return {}
+  },
+  data() {
+    return {
+      showAddModal: false,
+      processing: false,
+      providers: []
+    }
+  },
+  methods: {
+    providerRemoved(providerId) {
+      this.providers = this.providers.filter((p) => p.id !== providerId)
+    },
+    providerAdded(provider) {
+      this.providers.push(provider)
+    },
+    setShowAddModal() {
+      this.showAddModal = true
+    },
+    loadProviders() {
+      this.processing = true
+      this.$axios
+        .$get('/api/custom-metadata-providers')
+        .then((res) => {
+          this.providers = res.providers
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Failed to load custom metadata providers')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    }
+  },
+  mounted() {
+    this.loadProviders()
+  }
+}
+</script>
+
+<style></style>

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

@@ -13,6 +13,12 @@
           <span class="material-icons">arrow_forward</span>
         </div>
       </nuxt-link>
+      <nuxt-link to="/config/item-metadata-utils/custom-metadata-providers" class="block w-full rounded bg-primary/40 hover:bg-primary/60 text-gray-300 hover:text-white p-4 my-2">
+        <div class="flex justify-between">
+          <p>{{ $strings.HeaderCustomMetadataProviders }}</p>
+          <span class="material-icons">arrow_forward</span>
+        </div>
+      </nuxt-link>
     </app-settings-content>
   </div>
 </template>

client/pages/config/log.vue

@@ -8,7 +8,7 @@
       </div>
 
       <div class="relative">
-        <div ref="container" class="relative w-full h-full bg-primary border-bg overflow-x-hidden overflow-y-auto text-red shadow-inner rounded-md" style="max-height: 800px; min-height: 550px">
+        <div ref="container" id="log-container" class="relative w-full h-full bg-primary border-bg overflow-x-hidden overflow-y-auto text-red shadow-inner rounded-md" style="min-height: 550px">
           <template v-for="(log, index) in logs">
             <div :key="index" class="flex flex-nowrap px-2 py-1 items-start text-sm bg-opacity-10" :class="`bg-${logColors[log.level]}`">
               <p class="text-gray-400 w-36 font-mono text-xs">{{ log.timestamp }}</p>
@@ -136,7 +136,15 @@ export default {
         this.loadedLogs = this.loadedLogs.slice(-5000)
       }
     },
-    init(attempts = 0) {
+    async loadLoggerData() {
+      const loggerData = await this.$axios.$get('/api/logger-data').catch((error) => {
+        console.error('Failed to load logger data', error)
+        this.$toast.error('Failed to load logger data')
+      })
+
+      this.loadedLogs = loggerData?.currentDailyLogs || []
+    },
+    async init(attempts = 0) {
       if (!this.$root.socket) {
         if (attempts > 10) {
           return console.error('Failed to setup socket listeners')
@@ -147,14 +155,11 @@ export default {
         return
       }
 
+      await this.loadLoggerData()
+
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
-      this.$root.socket.on('daily_logs', this.dailyLogsLoaded)
       this.$root.socket.on('log', this.logEvtReceived)
       this.$root.socket.emit('set_log_listener', this.newServerSettings.logLevel)
-      this.$root.socket.emit('fetch_daily_logs')
-    },
-    dailyLogsLoaded(lines) {
-      this.loadedLogs = lines
     }
   },
   updated() {
@@ -166,13 +171,15 @@ export default {
   beforeDestroy() {
     if (!this.$root.socket) return
     this.$root.socket.emit('remove_log_listener')
-    this.$root.socket.off('daily_logs', this.dailyLogsLoaded)
     this.$root.socket.off('log', this.logEvtReceived)
   }
 }
 </script>
 
 <style scoped>
+#log-container {
+  height: calc(100vh - 285px);
+}
 .logmessage {
   width: calc(100% - 208px);
 }

client/pages/config/sessions.vue

@@ -5,37 +5,72 @@
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>
 
-      <div v-if="listeningSessions.length" class="block max-w-full">
+      <div v-if="listeningSessions.length" class="block max-w-full relative">
         <table class="userSessionsTable">
           <tr class="bg-primary bg-opacity-40">
-            <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
-            <th class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
-            <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
-            <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-            <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
-            <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
-            <th class="flex-grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
+            <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
+              <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
+            </th>
+            <th v-if="numSelected" class="flex-grow text-left" :colspan="7">
+              <div class="flex items-center">
+                <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
+                <div class="flex-grow" />
+                <ui-btn small color="error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="flex-grow sm:flex-grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
+            <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+            <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-icons text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-icons text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="flex-grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
           </tr>
 
-          <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-            <td class="py-1 max-w-48">
+          <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
+            <td class="hidden md:table-cell py-1 max-w-6 relative">
+              <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
+              <!-- overlay of the checkbox so that the entire box is clickable -->
+              <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
+            </td>
+            <td class="py-1 flex-grow sm:flex-grow-0 sm:w-48 sm:max-w-48">
               <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
               <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
             </td>
-            <td class="hidden md:table-cell">
+            <td class="hidden md:table-cell w-20 min-w-20">
               <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
               <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
             </td>
-            <td class="hidden md:table-cell">
+            <td class="hidden md:table-cell w-26 min-w-26">
               <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
             </td>
-            <td class="hidden sm:table-cell">
+            <td class="hidden sm:table-cell w-32 min-w-32">
               <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
-            <td class="text-center">
+            <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
               <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
             </td>
-            <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
+            <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
               <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
             </td>
             <td class="text-center hidden sm:table-cell">
@@ -45,10 +80,22 @@
             </td>
           </tr>
         </table>
-        <div class="flex items-center justify-end my-2">
-          <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
-          <p class="text-sm mx-1">Page {{ currentPage + 1 }} of {{ numPages }}</p>
-          <ui-icon-btn icon="arrow_forward_ios" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+        <!-- table bottom options -->
+        <div class="flex items-center my-2">
+          <div class="flex-grow" />
+          <div class="hidden sm:inline-flex items-center">
+            <p class="text-sm whitespace-nowrap">{{ $strings.LabelRowsPerPage }}</p>
+            <ui-dropdown v-model="itemsPerPage" :items="itemsPerPageOptions" small class="w-24 mx-2" @input="updatedItemsPerPage" />
+          </div>
+          <div class="inline-flex items-center">
+            <p class="text-sm mx-2">Page {{ currentPage + 1 }} of {{ numPages }}</p>
+            <ui-icon-btn icon="arrow_back_ios_new" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
+            <ui-icon-btn icon="arrow_forward_ios" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+          </div>
+        </div>
+
+        <div v-if="deletingSessions || loading" class="absolute inset-0 w-full h-full flex items-center justify-center">
+          <ui-loading-indicator />
         </div>
       </div>
       <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoListeningSessions }}</p>
@@ -128,6 +175,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showSessionModal: false,
       selectedSession: null,
       listeningSessions: [],
@@ -138,7 +186,11 @@ export default {
       itemsPerPage: 10,
       userFilter: null,
       selectedUser: '',
-      processingGoToTimestamp: false
+      sortBy: 'updatedAt',
+      sortDesc: true,
+      processingGoToTimestamp: false,
+      deletingSessions: false,
+      itemsPerPageOptions: [10, 25, 50, 100]
     }
   },
   computed: {
@@ -162,9 +214,85 @@ export default {
     },
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
+    },
+    numSelected() {
+      return this.listeningSessions.filter((s) => s.selected).length
+    },
+    isAllSelected: {
+      get() {
+        return this.numSelected === this.listeningSessions.length
+      },
+      set(val) {
+        this.setSelectionForAll(val)
+      }
     }
   },
   methods: {
+    isSortSelected(column) {
+      return this.sortBy === column
+    },
+    sortColumn(column) {
+      if (this.sortBy === column) {
+        this.sortDesc = !this.sortDesc
+      } else {
+        this.sortBy = column
+      }
+      this.loadSessions(this.currentPage)
+    },
+    removeSelectedSessions() {
+      if (!this.numSelected) return
+      this.deletingSessions = true
+
+      let isAllSessions = this.isAllSelected
+      const payload = {
+        sessions: this.listeningSessions.filter((s) => s.selected).map((s) => s.id)
+      }
+      this.$axios
+        .$post(`/api/sessions/batch/delete`, payload)
+        .then(() => {
+          this.$toast.success('Sessions removed')
+          if (isAllSessions) {
+            // If all sessions were removed from the current page then go to the previous page
+            if (this.currentPage > 0) {
+              this.currentPage--
+            }
+            this.loadSessions(this.currentPage)
+          } else {
+            // Filter out the deleted sessions
+            this.listeningSessions = this.listeningSessions.filter((ls) => !payload.sessions.includes(ls.id))
+          }
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Failed to remove sessions'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.deletingSessions = false
+        })
+    },
+    removeSessionsClick() {
+      if (!this.numSelected) return
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveListeningSessions', [this.numSelected]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeSelectedSessions()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    setSelectionForAll(val) {
+      this.listeningSessions = this.listeningSessions.map((s) => {
+        s.selected = val
+        return s
+      })
+    },
+    updatedItemsPerPage() {
+      this.currentPage = 0
+      this.loadSessions(this.currentPage)
+    },
     closedSession() {
       this.loadOpenSessions()
     },
@@ -252,6 +380,13 @@ export default {
     nextPage() {
       this.loadSessions(this.currentPage + 1)
     },
+    clickSessionRow(session) {
+      if (this.numSelected > 0) {
+        session.selected = !session.selected
+      } else {
+        this.showSession(session)
+      }
+    },
     showSession(session) {
       this.selectedSession = session
       this.showSessionModal = true
@@ -274,11 +409,21 @@ export default {
       return 'Unknown'
     },
     async loadSessions(page) {
-      const userFilterQuery = this.selectedUser ? `&user=${this.selectedUser}` : ''
-      const data = await this.$axios.$get(`/api/sessions?page=${page}&itemsPerPage=${this.itemsPerPage}${userFilterQuery}`).catch((err) => {
+      this.loading = true
+      const urlSearchParams = new URLSearchParams()
+      urlSearchParams.set('page', page)
+      urlSearchParams.set('itemsPerPage', this.itemsPerPage)
+      urlSearchParams.set('sort', this.sortBy)
+      urlSearchParams.set('desc', this.sortDesc ? '1' : '0')
+      if (this.selectedUser) {
+        urlSearchParams.set('user', this.selectedUser)
+      }
+
+      const data = await this.$axios.$get(`/api/sessions?${urlSearchParams.toString()}`).catch((err) => {
         console.error('Failed to load listening sessions', err)
         return null
       })
+      this.loading = false
       if (!data) {
         this.$toast.error('Failed to load listening sessions')
         return
@@ -287,8 +432,13 @@ export default {
       this.numPages = data.numPages
       this.total = data.total
       this.currentPage = data.page
-      this.listeningSessions = data.sessions
-      this.userFilter = data.userFilter
+      this.listeningSessions = data.sessions.map((ls) => {
+        return {
+          ...ls,
+          selected: false
+        }
+      })
+      this.userFilter = data.userId
     },
     async loadOpenSessions() {
       const data = await this.$axios.$get('/api/sessions/open').catch((err) => {
@@ -326,15 +476,18 @@ export default {
 .userSessionsTable tr:first-child {
   background-color: #272727;
 }
-.userSessionsTable tr:not(:first-child) {
+.userSessionsTable tr:not(:first-child):not(.selected) {
   background-color: #373838;
 }
-.userSessionsTable tr:not(:first-child):nth-child(odd) {
+.userSessionsTable tr:not(:first-child):nth-child(odd):not(.selected):not(:hover) {
   background-color: #2f2f2f;
 }
 .userSessionsTable tr:hover:not(:first-child) {
   background-color: #474747;
 }
+.userSessionsTable tr.selected {
+  background-color: #474747;
+}
 .userSessionsTable td {
   padding: 4px 8px;
 }

client/pages/config/stats.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <app-settings-content :header-text="$strings.HeaderYourStats">
+    <!-- Year in review banner shown at the top in December and January -->
+    <stats-year-in-review-banner v-if="showYearInReviewBanner" />
+
+    <app-settings-content :header-text="$strings.HeaderYourStats" class="!mb-4">
       <div class="flex justify-center">
         <div class="flex p-2">
           <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
@@ -63,6 +66,9 @@
       </div>
       <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
     </app-settings-content>
+
+    <!-- Year in review banner shown at the bottom Feb - Nov -->
+    <stats-year-in-review-banner v-if="!showYearInReviewBanner" />
   </div>
 </template>
 
@@ -71,7 +77,8 @@ export default {
   data() {
     return {
       listeningStats: null,
-      windowWidth: 0
+      windowWidth: 0,
+      showYearInReviewBanner: false
     }
   },
   watch: {
@@ -119,6 +126,12 @@ export default {
         console.error('Failed to load listening sesions', err)
         return []
       })
+
+      let month = new Date().getMonth()
+      // January and December show year in review banner
+      if (month === 11 || month === 0) {
+        this.showYearInReviewBanner = true
+      }
     }
   },
   mounted() {

client/pages/item/_id/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="w-full h-full overflow-y-auto px-2 py-6 lg:p-8">
+    <div id="item-page-wrapper" class="w-full h-full overflow-y-auto px-2 py-6 lg:p-8">
       <div class="flex flex-col lg:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center lg:block lg:w-52" style="min-width: 208px">
           <div class="relative group" style="height: fit-content">
@@ -125,7 +125,10 @@
           </div>
 
           <div class="my-4 w-full">
-            <p class="text-base text-gray-100 whitespace-pre-line">{{ description }}</p>
+            <p ref="description" id="item-description" class="text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }">{{ description }}</p>
+            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
+              {{ showFullDescription ? 'Read less' : 'Read more' }} <span class="material-icons text-xl pl-1">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
+            </button>
           </div>
 
           <div v-if="invalidAudioFiles.length" class="bg-error border-red-800 shadow-md p-4">
@@ -136,7 +139,7 @@
 
           <widgets-audiobook-data v-if="tracks.length" :library-item-id="libraryItemId" :is-file="isFile" :media="media" />
 
-          <tables-podcast-episodes-table v-if="isPodcast" :library-item="libraryItem" />
+          <tables-podcast-lazy-episodes-table v-if="isPodcast" :library-item="libraryItem" />
 
           <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" class="mt-6" />
 
@@ -182,7 +185,9 @@ export default {
       podcastFeedEpisodes: [],
       episodesDownloading: [],
       episodeDownloadsQueued: [],
-      showBookmarksModal: false
+      showBookmarksModal: false,
+      isDescriptionClamped: false,
+      showFullDescription: false
     }
   },
   computed: {
@@ -596,10 +601,15 @@ export default {
       this.$store.commit('setBookshelfBookIds', [])
       this.$store.commit('showEditModal', this.libraryItem)
     },
+    checkDescriptionClamped() {
+      if (!this.$refs.description) return
+      this.isDescriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
+    },
     libraryItemUpdated(libraryItem) {
       if (libraryItem.id === this.libraryItemId) {
         console.log('Item was updated', libraryItem)
         this.libraryItem = libraryItem
+        this.$nextTick(this.checkDescriptionClamped)
       }
     },
     clearProgressClick() {
@@ -686,9 +696,11 @@ export default {
         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.$axios
               .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
               .then(() => {
@@ -754,6 +766,8 @@ export default {
     }
   },
   mounted() {
+    this.checkDescriptionClamped()
+
     this.episodeDownloadsQueued = this.libraryItem.episodeDownloadsQueued || []
     this.episodesDownloading = this.libraryItem.episodesDownloading || []
 
@@ -780,3 +794,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+#item-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  max-height: 6.25rem;
+  transition: all 0.3s ease-in-out;
+}
+#item-description.show-full {
+  -webkit-line-clamp: unset;
+  max-height: 999rem;
+}
+</style>

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

@@ -3,7 +3,7 @@
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
     <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
       <div class="flex flex-wrap justify-center">
-        <template v-for="author in authors">
+        <template v-for="author in authorsSorted">
           <cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
         </template>
       </div>
@@ -44,6 +44,22 @@ export default {
     },
     selectedAuthor() {
       return this.$store.state.globals.selectedAuthor
+    },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy') || 'name'
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
+    authorsSorted() {
+      const sortProp = this.authorSortBy
+      const bDesc = this.authorSortDesc ? -1 : 1
+      return this.authors.sort((a, b) => {
+        if (typeof a[sortProp] === 'number' && typeof b[sortProp] === 'number') {
+          return a[sortProp] > b[sortProp] ? bDesc : -bDesc
+        }
+        return a[sortProp].localeCompare(b[sortProp], undefined, { sensitivity: 'base' }) * bDesc
+      })
     }
   },
   methods: {

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

@@ -8,11 +8,11 @@
         <p v-if="!recentEpisodes.length && !processing" class="text-center text-xl">{{ $strings.MessageNoEpisodes }}</p>
         <template v-for="(episode, index) in episodesMapped">
           <div :key="episode.id" class="flex py-5 cursor-pointer relative" @click.stop="clickEpisode(episode)">
-            <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId)" :width="96" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="hidden md:block" />
+            <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId, episode.updatedAt)" :width="96" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="hidden md:block" />
             <div class="flex-grow pl-4 max-w-2xl">
               <!-- mobile -->
               <div class="flex md:hidden mb-2">
-                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId)" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
+                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId, episode.updatedAt)" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
                 <div class="flex-grow px-2">
                   <div class="flex items-center">
                     <div class="flex" @click.stop>
@@ -45,7 +45,7 @@
                 <widgets-podcast-type-indicator :type="episode.episodeType" />
               </div>
 
-              <p class="text-sm text-gray-200 mb-4 episode-subtitle-long" v-html="episode.subtitle || episode.description" />
+              <p class="text-sm text-gray-200 mb-4 line-clamp-4" v-html="episode.subtitle || episode.description" />
 
               <div class="flex items-center">
                 <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">
@@ -54,9 +54,16 @@
                   <p class="pl-2 pr-1 text-sm font-semibold">{{ getButtonText(episode) }}</p>
                 </button>
 
-                <button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" @click.stop="queueBtnClick(episode)">
-                  <span class="material-icons-outlined text-2xl">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
-                </button>
+                <ui-tooltip v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" :text="playerQueueEpisodeIdMap[episode.id] ? $strings.MessageRemoveFromPlayerQueue : $strings.MessageAddToPlayerQueue" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" direction="top">
+                  <ui-icon-btn :icon="playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_play'" borderless @click="queueBtnClick(episode)" />
+                  <!-- <button class="h-8 w-8 flex justify-center items-center mx-2" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" @click.stop="queueBtnClick(episode)">
+                    <span class="material-icons-outlined text-2xl">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
+                  </button> -->
+                </ui-tooltip>
+
+                <ui-tooltip :text="$strings.LabelYourPlaylists" direction="top">
+                  <ui-icon-btn icon="playlist_add" borderless @click="clickAddToPlaylist(episode)" />
+                </ui-tooltip>
               </div>
             </div>
 
@@ -136,6 +143,15 @@ export default {
     }
   },
   methods: {
+    clickAddToPlaylist(episode) {
+      // Makeshift libraryItem
+      const libraryItem = {
+        id: episode.libraryItemId,
+        media: episode.podcast
+      }
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsModal', true)
+    },
     async clickEpisode(episode) {
       if (this.openingItem) return
       this.openingItem = true
@@ -155,7 +171,9 @@ export default {
       if (this.episodeIdStreaming === episode.id) return this.streamIsPlaying ? 'Streaming' : 'Play'
       if (!episode.progress) return this.$elapsedPretty(episode.duration)
       if (episode.progress.isFinished) return 'Finished'
-      var remaining = Math.floor(episode.progress.duration - episode.progress.currentTime)
+
+      const duration = episode.progress.duration || episode.duration
+      const remaining = Math.floor(duration - episode.progress.currentTime)
       return `${this.$elapsedPretty(remaining)} left`
     },
     playClick(episodeToPlay) {

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

@@ -45,6 +45,11 @@
 <script>
 export default {
   async asyncData({ params, query, store, app, redirect }) {
+    // Podcast search/add page is restricted to admins
+    if (!store.getters['user/getIsAdminOrUp']) {
+      return redirect(`/library/${params.library}`)
+    }
+
     var libraryId = params.library
     var libraryData = await store.dispatch('libraries/fetch', libraryId)
     if (!libraryData) {
@@ -81,6 +86,9 @@ export default {
     },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
+    },
+    librarySettings() {
+      return this.$store.getters['libraries/getCurrentLibrarySettings']
     }
   },
   methods: {
@@ -146,7 +154,12 @@ export default {
     async submitSearch(term) {
       this.processing = true
       this.termSearched = ''
-      let results = await this.$axios.$get(`/api/search/podcast?term=${encodeURIComponent(term)}`).catch((error) => {
+
+      const searchParams = new URLSearchParams({
+        term,
+        country: this.librarySettings?.podcastSearchRegion || 'us'
+      })
+      let results = await this.$axios.$get(`/api/search/podcast?${searchParams.toString()}`).catch((error) => {
         console.error('Search request failed', error)
         return []
       })

client/pages/login.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="w-full h-screen bg-bg">
-    <div class="w-full flex h-full items-center justify-center">
+  <div id="page-wrapper" class="w-full h-screen overflow-y-auto">
+    <div class="absolute z-0 top-0 left-0 px-6 py-3">
+      <div class="flex items-center">
+        <img src="~static/icon.svg" alt="Audiobookshelf Logo" class="w-10 min-w-10 h-10" />
+        <h1 class="text-xl ml-4 hidden lg:block hover:underline">audiobookshelf</h1>
+      </div>
+    </div>
+
+    <div class="relative z-10 w-full flex h-full items-center justify-center">
       <div v-if="criticalError" class="w-full max-w-md rounded border border-error border-opacity-25 bg-error bg-opacity-10 p-4">
         <p class="text-center text-lg font-semibold">{{ $strings.MessageServerCouldNotBeReached }}</p>
       </div>
@@ -10,9 +17,9 @@
 
         <form @submit.prevent="submitServerSetup">
           <p class="text-lg font-semibold mb-2 pl-1 text-center">Create Root User</p>
-          <ui-text-input-with-label v-model="newRoot.username" label="Username" :disabled="processing" class="w-full mb-3 text-sm" />
-          <ui-text-input-with-label v-model="newRoot.password" label="Password" type="password" :disabled="processing" class="w-full mb-3 text-sm" />
-          <ui-text-input-with-label v-model="confirmPassword" label="Confirm Password" type="password" :disabled="processing" class="w-full mb-3 text-sm" />
+          <ui-text-input-with-label v-model.trim="newRoot.username" label="Username" :disabled="processing" class="w-full mb-3 text-sm" />
+          <ui-text-input-with-label v-model.trim="newRoot.password" label="Password" type="password" :disabled="processing" class="w-full mb-3 text-sm" />
+          <ui-text-input-with-label v-model.trim="confirmPassword" label="Confirm Password" type="password" :disabled="processing" class="w-full mb-3 text-sm" />
 
           <p class="text-lg font-semibold mt-6 mb-2 pl-1 text-center">Directory Paths</p>
           <ui-text-input-with-label v-model="ConfigPath" label="Config Path" disabled class="w-full mb-3 text-sm" />
@@ -23,20 +30,35 @@
           </div>
         </form>
       </div>
-      <div v-else-if="isInit" class="w-full max-w-md px-8 pb-8 pt-4 -mt-40">
-        <p class="text-3xl text-white text-center mb-4">{{ $strings.HeaderLogin }}</p>
-        <div class="w-full h-px bg-white bg-opacity-10 my-4" />
-        <p v-if="error" class="text-error text-center py-2">{{ error }}</p>
-        <form @submit.prevent="submitForm">
-          <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelUsername }}</label>
-          <ui-text-input v-model="username" :disabled="processing" class="mb-3 w-full" />
+      <div v-else-if="isInit" class="w-full max-w-md px-8 pb-8 pt-4 lg:-mt-40">
+        <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4">
+          <p class="text-2xl font-semibold text-center text-white mb-4">{{ $strings.HeaderLogin }}</p>
 
-          <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelPassword }}</label>
-          <ui-text-input v-model="password" type="password" :disabled="processing" class="w-full mb-3" />
-          <div class="w-full flex justify-end py-3">
-            <ui-btn type="submit" :disabled="processing" color="primary" class="leading-none">{{ processing ? 'Checking...' : $strings.ButtonSubmit }}</ui-btn>
+          <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+          <p v-if="loginCustomMessage" class="py-2 default-style mb-2" v-html="loginCustomMessage"></p>
+
+          <p v-if="error" class="text-error text-center py-2">{{ error }}</p>
+
+          <form v-show="login_local" @submit.prevent="submitForm">
+            <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelUsername }}</label>
+            <ui-text-input v-model.trim="username" :disabled="processing" class="mb-3 w-full" inputName="username" />
+
+            <label class="text-xs text-gray-300 uppercase">{{ $strings.LabelPassword }}</label>
+            <ui-text-input v-model.trim="password" type="password" :disabled="processing" class="w-full mb-3" inputName="password" />
+            <div class="w-full flex justify-end py-3">
+              <ui-btn type="submit" :disabled="processing" color="primary" class="leading-none">{{ processing ? 'Checking...' : $strings.ButtonSubmit }}</ui-btn>
+            </div>
+          </form>
+
+          <div v-if="login_local && login_openid" class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+          <div class="w-full flex py-3">
+            <a v-if="login_openid" :href="openidAuthUri" class="w-full abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center bg-primary text-white px-8 py-2 leading-none">
+              {{ openIDButtonText }}
+            </a>
           </div>
-        </form>
+        </div>
       </div>
     </div>
   </div>
@@ -60,7 +82,10 @@ export default {
       },
       confirmPassword: '',
       ConfigPath: '',
-      MetadataPath: ''
+      MetadataPath: '',
+      login_local: true,
+      login_openid: false,
+      authFormData: null
     }
   },
   watch: {
@@ -93,6 +118,15 @@ export default {
   computed: {
     user() {
       return this.$store.state.user.user
+    },
+    openidAuthUri() {
+      return `${process.env.serverUrl}/auth/openid?callback=${location.href.split('?').shift()}`
+    },
+    openIDButtonText() {
+      return this.authFormData?.authOpenIDButtonText || 'Login with OpenId'
+    },
+    loginCustomMessage() {
+      return this.authFormData?.authLoginCustomMessage || null
     }
   },
   methods: {
@@ -162,6 +196,7 @@ export default {
         else this.error = 'Unknown Error'
         return false
       })
+
       if (authRes?.error) {
         this.error = authRes.error
       } else if (authRes) {
@@ -196,29 +231,63 @@ export default {
       this.processing = true
       this.$axios
         .$get('/status')
-        .then((res) => {
-          this.processing = false
-          this.isInit = res.isInit
-          this.showInitScreen = !res.isInit
-          this.$setServerLanguageCode(res.language)
+        .then((data) => {
+          this.isInit = data.isInit
+          this.showInitScreen = !data.isInit
+          this.$setServerLanguageCode(data.language)
           if (this.showInitScreen) {
-            this.ConfigPath = res.ConfigPath || ''
-            this.MetadataPath = res.MetadataPath || ''
+            this.ConfigPath = data.ConfigPath || ''
+            this.MetadataPath = data.MetadataPath || ''
+          } else {
+            this.authFormData = data.authFormData
+            this.updateLoginVisibility(data.authMethods || [])
           }
         })
         .catch((error) => {
           console.error('Status check failed', error)
-          this.processing = false
           this.criticalError = 'Status check failed'
         })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    updateLoginVisibility(authMethods) {
+      if (this.$route.query?.error) {
+        this.error = this.$route.query.error
+
+        // Remove error query string
+        const newurl = new URL(location.href)
+        newurl.searchParams.delete('error')
+        window.history.replaceState({ path: newurl.href }, '', newurl.href)
+      }
+
+      if (authMethods.includes('local') || !authMethods.length) {
+        this.login_local = true
+      } else {
+        this.login_local = false
+      }
+
+      if (authMethods.includes('openid')) {
+        // Auto redirect unless query string ?autoLaunch=0
+        if (this.authFormData?.authOpenIDAutoLaunch && this.$route.query?.autoLaunch !== '0') {
+          window.location.href = this.openidAuthUri
+        }
+
+        this.login_openid = true
+      } else {
+        this.login_openid = false
+      }
     }
   },
   async mounted() {
-    if (localStorage.getItem('token')) {
-      var userfound = await this.checkAuth()
-      if (userfound) return // if valid user no need to check status
+    if (this.$route.query?.setToken) {
+      localStorage.setItem('token', this.$route.query.setToken)
     }
+    if (localStorage.getItem('token')) {
+      if (await this.checkAuth()) return // if valid user no need to check status
+    }
+
     this.checkStatus()
   }
 }
-</script>
+</script>

client/pages/upload/index.vue

@@ -14,6 +14,20 @@
         </div>
       </div>
 
+      <div v-if="!selectedLibraryIsPodcast" class="flex items-center mb-6">
+        <label class="flex cursor-pointer pt-4">
+          <ui-toggle-switch v-model="fetchMetadata.enabled" class="inline-flex" />
+          <span class="pl-2 text-base">{{ $strings.LabelAutoFetchMetadata }}</span>
+        </label>
+        <ui-tooltip :text="$strings.LabelAutoFetchMetadataHelp" class="inline-flex pt-4">
+          <span class="pl-1 material-icons icon-text text-sm cursor-pointer">info_outlined</span>
+        </ui-tooltip>
+
+        <div class="flex-grow ml-4">
+          <ui-dropdown v-model="fetchMetadata.provider" :items="providers" :label="$strings.LabelProvider" />
+        </div>
+      </div>
+
       <widgets-alert v-if="error" type="error">
         <p class="text-lg">{{ error }}</p>
       </widgets-alert>
@@ -61,9 +75,7 @@
       </widgets-alert>
 
       <!-- Item Upload cards -->
-      <template v-for="item in items">
-        <cards-item-upload-card :ref="`itemCard-${item.index}`" :key="item.index" :media-type="selectedLibraryMediaType" :item="item" :processing="processing" @remove="removeItem(item)" />
-      </template>
+      <cards-item-upload-card v-for="item in items" :key="item.index" :ref="`itemCard-${item.index}`" :media-type="selectedLibraryMediaType" :item="item" :provider="fetchMetadata.provider" :processing="processing" @remove="removeItem(item)" />
 
       <!-- Upload/Reset btns -->
       <div v-show="items.length" class="flex justify-end pb-8 pt-4">
@@ -92,13 +104,18 @@ export default {
       selectedLibraryId: null,
       selectedFolderId: null,
       processing: false,
-      uploadFinished: false
+      uploadFinished: false,
+      fetchMetadata: {
+        enabled: false,
+        provider: null
+      }
     }
   },
   watch: {
     selectedLibrary(newVal) {
       if (newVal && !this.selectedFolderId) {
         this.setDefaultFolder()
+        this.setMetadataProvider()
       }
     }
   },
@@ -133,6 +150,13 @@ export default {
     selectedLibraryIsPodcast() {
       return this.selectedLibraryMediaType === 'podcast'
     },
+    providers() {
+      if (this.selectedLibraryIsPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    canFetchMetadata() {
+      return !this.selectedLibraryIsPodcast && this.fetchMetadata.enabled
+    },
     selectedFolder() {
       if (!this.selectedLibrary) return null
       return this.selectedLibrary.folders.find((fold) => fold.id === this.selectedFolderId)
@@ -160,12 +184,16 @@ export default {
         }
       }
       this.setDefaultFolder()
+      this.setMetadataProvider()
     },
     setDefaultFolder() {
       if (!this.selectedFolderId && this.selectedLibrary && this.selectedLibrary.folders.length) {
         this.selectedFolderId = this.selectedLibrary.folders[0].id
       }
     },
+    setMetadataProvider() {
+      this.fetchMetadata.provider ||= this.$store.getters['libraries/getLibraryProvider'](this.selectedLibraryId)
+    },
     removeItem(item) {
       this.items = this.items.filter((b) => b.index !== item.index)
       if (!this.items.length) {
@@ -213,27 +241,49 @@ export default {
       var items = e.dataTransfer.items || []
 
       var itemResults = await this.uploadHelpers.getItemsFromDrop(items, this.selectedLibraryMediaType)
-      this.setResults(itemResults)
+      this.onItemsSelected(itemResults)
     },
     inputChanged(e) {
       if (!e.target || !e.target.files) return
       var _files = Array.from(e.target.files)
       if (_files && _files.length) {
         var itemResults = this.uploadHelpers.getItemsFromPicker(_files, this.selectedLibraryMediaType)
-        this.setResults(itemResults)
+        this.onItemsSelected(itemResults)
       }
     },
-    setResults(itemResults) {
+    onItemsSelected(itemResults) {
+      if (this.itemSelectionSuccessful(itemResults)) {
+        // setTimeout ensures the new item ref is attached before this method is called
+        setTimeout(this.attemptMetadataFetch, 0)
+      }
+    },
+    itemSelectionSuccessful(itemResults) {
+      console.log('Upload results', itemResults)
+
       if (itemResults.error) {
         this.error = itemResults.error
         this.items = []
         this.ignoredFiles = []
-      } else {
-        this.error = ''
-        this.items = itemResults.items
-        this.ignoredFiles = itemResults.ignoredFiles
+        return false
       }
-      console.log('Upload results', itemResults)
+
+      this.error = ''
+      this.items = itemResults.items
+      this.ignoredFiles = itemResults.ignoredFiles
+      return true
+    },
+    attemptMetadataFetch() {
+      if (!this.canFetchMetadata) {
+        return false
+      }
+
+      this.items.forEach((item) => {
+        let itemRef = this.$refs[`itemCard-${item.index}`]
+
+        if (itemRef?.length) {
+          itemRef[0].fetchMetadata(this.fetchMetadata.provider)
+        }
+      })
     },
     updateItemCardStatus(index, status) {
       var ref = this.$refs[`itemCard-${index}`]
@@ -248,8 +298,8 @@ export default {
       var form = new FormData()
       form.set('title', item.title)
       if (!this.selectedLibraryIsPodcast) {
-        form.set('author', item.author)
-        form.set('series', item.series)
+        form.set('author', item.author || '')
+        form.set('series', item.series || '')
       }
       form.set('library', this.selectedLibraryId)
       form.set('folder', this.selectedFolderId)
@@ -346,6 +396,8 @@ export default {
   },
   mounted() {
     this.selectedLibraryId = this.$store.state.libraries.currentLibraryId
+    this.setMetadataProvider()
+
     this.setDefaultFolder()
     window.addEventListener('dragenter', this.dragenter)
     window.addEventListener('dragleave', this.dragleave)
@@ -359,4 +411,4 @@ export default {
     window.removeEventListener('drop', this.drop)
   }
 }
-</script>
+</script>

client/players/LocalAudioPlayer.js

@@ -139,11 +139,30 @@ export default class LocalAudioPlayer extends EventEmitter {
     }
 
     var hlsOptions = {
-      startPosition: this.startTime || -1
-      // No longer needed because token is put in a query string
-      // xhrSetup: (xhr) => {
-      //   xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-      // }
+      startPosition: this.startTime || -1,
+      fragLoadPolicy: {
+        default: {
+          maxTimeToFirstByteMs: 10000,
+          maxLoadTimeMs: 120000,
+          timeoutRetry: {
+            maxNumRetry: 4,
+            retryDelayMs: 0,
+            maxRetryDelayMs: 0,
+          },
+          errorRetry: {
+            maxNumRetry: 8,
+            retryDelayMs: 1000,
+            maxRetryDelayMs: 8000,
+            shouldRetry: (retryConfig, retryCount, isTimeout, httpStatus, retry) => {
+              if (httpStatus?.code === 404 && retryConfig?.maxNumRetry > retryCount) {
+                console.log(`[HLS] Server 404 for fragment retry ${retryCount} of ${retryConfig.maxNumRetry}`)
+                return true
+              }
+              return retry
+            }
+          },
+        }
+      }
     }
     this.hlsInstance = new Hls(hlsOptions)
 
@@ -156,9 +175,15 @@ export default class LocalAudioPlayer extends EventEmitter {
       })
 
       this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
-        console.error('[HLS] Error', data.type, data.details, data)
         if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
           console.error('[HLS] BUFFER STALLED ERROR')
+        } else if (data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR) {
+          // Only show error if the fragment is not being retried
+          if (data.errorAction?.action !== 5) {
+            console.error('[HLS] FRAG LOAD ERROR', data)
+          }
+        } else {
+          console.error('[HLS] Error', data.type, data.details, data)
         }
       })
       this.hlsInstance.on(Hls.Events.DESTROYING, () => {

client/plugins/i18n.js

@@ -5,19 +5,26 @@ import { supplant } from './utils'
 const defaultCode = 'en-us'
 
 const languageCodeMap = {
+  'cs': { label: 'Čeština', dateFnsLocale: 'cs' },
   'da': { label: 'Dansk', dateFnsLocale: 'da' },
   'de': { label: 'Deutsch', dateFnsLocale: 'de' },
   'en-us': { label: 'English', dateFnsLocale: 'enUS' },
   'es': { label: 'Español', dateFnsLocale: 'es' },
+  'et': { label: 'Eesti', dateFnsLocale: 'et' },
   'fr': { label: 'Français', dateFnsLocale: 'fr' },
   'hr': { label: 'Hrvatski', dateFnsLocale: 'hr' },
   'it': { label: 'Italiano', dateFnsLocale: 'it' },
   'lt': { label: 'Lietuvių', dateFnsLocale: 'lt' },
+  'hu': { label: 'Magyar', dateFnsLocale: 'hu' },
   'nl': { label: 'Nederlands', dateFnsLocale: 'nl' },
   'no': { label: 'Norsk', dateFnsLocale: 'no' },
   'pl': { label: 'Polski', dateFnsLocale: 'pl' },
+  'pt-br': { label: 'Português (Brasil)', dateFnsLocale: 'ptBR' },
   'ru': { label: 'Русский', dateFnsLocale: 'ru' },
+  'sv': { label: 'Svenska', dateFnsLocale: 'sv' },
+  'vi-vn': { label: 'Tiếng Việt', dateFnsLocale: 'vi' },
   'zh-cn': { label: '简体中文 (Simplified Chinese)', dateFnsLocale: 'zhCN' },
+  'zh-tw': { label: '正體中文 (Traditional Chinese)', dateFnsLocale: 'zhTW' },
 }
 Vue.prototype.$languageCodeOptions = Object.keys(languageCodeMap).map(code => {
   return {
@@ -26,6 +33,18 @@ Vue.prototype.$languageCodeOptions = Object.keys(languageCodeMap).map(code => {
   }
 })
 
+// iTunes search API uses ISO 3166 country codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
+const podcastSearchRegionMap = {
+  'us': { label: 'United States' },
+  'cn': { label: '中国' }
+}
+Vue.prototype.$podcastSearchRegionOptions = Object.keys(podcastSearchRegionMap).map(code => {
+  return {
+    text: podcastSearchRegionMap[code].label,
+    value: code
+  }
+})
+
 Vue.prototype.$languageCodes = {
   default: defaultCode,
   current: defaultCode,
@@ -81,7 +100,7 @@ async function loadi18n(code) {
 
   Vue.prototype.$setDateFnsLocale(languageCodeMap[code].dateFnsLocale)
 
-  this.$eventBus.$emit('change-lang', code)
+  this?.$eventBus?.$emit('change-lang', code)
   return true
 }
 

client/plugins/init.client.js

@@ -77,6 +77,7 @@ Vue.prototype.$sanitizeFilename = (filename, colonReplacement = ' - ') => {
     .replace(lineBreaks, replacement)
     .replace(windowsReservedRe, replacement)
     .replace(windowsTrailingRe, replacement)
+    .replace(/\s+/g, ' ') // Replace consecutive spaces with a single space
 
   // Check if basename is too many bytes
   const ext = Path.extname(sanitized) // separate out file extension
@@ -155,14 +156,14 @@ Vue.prototype.$copyToClipboard = (str, ctx) => {
 }
 
 function xmlToJson(xml) {
-  const json = {};
+  const json = {}
   for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
-    const key = res[1] || res[3];
-    const value = res[2] && xmlToJson(res[2]);
-    json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;
+    const key = res[1] || res[3]
+    const value = res[2] && xmlToJson(res[2])
+    json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null
 
   }
-  return json;
+  return json
 }
 Vue.prototype.$xmlToJson = xmlToJson
 

client/static/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: * 
+Disallow: / 

client/store/globals.js

@@ -99,7 +99,7 @@ export const getters = {
       return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
     }
 
-    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
+    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
   },
   getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, timestamp = null, raw = false) => {
     const placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`

client/store/index.js

@@ -66,7 +66,7 @@ export const getters = {
 
 export const actions = {
   updateServerSettings({ commit }, payload) {
-    var updatePayload = {
+    const updatePayload = {
       ...payload
     }
     return this.$axios.$patch('/api/settings', updatePayload).then((result) => {

client/store/libraries.js

@@ -80,13 +80,11 @@ export const actions = {
         return state.folders
       }
     }
-    console.log('Loading folders')
     commit('setFoldersLastUpdate')
 
     return this.$axios
       .$get('/api/filesystem')
       .then((res) => {
-        console.log('Settings folders', res)
         commit('setFolders', res.directories)
         return res.directories
       })
@@ -115,19 +113,23 @@ export const actions = {
         const library = data.library
         const filterData = data.filterdata
         const issues = data.issues || 0
+        const customMetadataProviders = data.customMetadataProviders || []
         const numUserPlaylists = data.numUserPlaylists
 
         dispatch('user/checkUpdateLibrarySortFilter', library.mediaType, { root: true })
 
+        if (libraryChanging) {
+          commit('setCollections', [])
+          commit('setUserPlaylists', [])
+        }
+
         commit('addUpdate', library)
         commit('setLibraryIssues', issues)
         commit('setLibraryFilterData', filterData)
         commit('setNumUserPlaylists', numUserPlaylists)
+        commit('scanners/setCustomMetadataProviders', customMetadataProviders, { root: true })
+
         commit('setCurrentLibrary', libraryId)
-        if (libraryChanging) {
-          commit('setCollections', [])
-          commit('setUserPlaylists', [])
-        }
         return data
       })
       .catch((error) => {

client/store/scanners.js

@@ -71,8 +71,56 @@ export const state = () => ({
   ]
 })
 
-export const getters = {}
+export const getters = {
+  checkBookProviderExists: state => (providerValue) => {
+    return state.providers.some(p => p.value === providerValue)
+  },
+  checkPodcastProviderExists: state => (providerValue) => {
+    return state.podcastProviders.some(p => p.value === providerValue)
+  }
+}
 
 export const actions = {}
 
-export const mutations = {}
+export const mutations = {
+  addCustomMetadataProvider(state, provider) {
+    if (provider.mediaType === 'book') {
+      if (state.providers.some(p => p.value === provider.slug)) return
+      state.providers.push({
+        text: provider.name,
+        value: provider.slug
+      })
+    } else {
+      if (state.podcastProviders.some(p => p.value === provider.slug)) return
+      state.podcastProviders.push({
+        text: provider.name,
+        value: provider.slug
+      })
+    }
+  },
+  removeCustomMetadataProvider(state, provider) {
+    if (provider.mediaType === 'book') {
+      state.providers = state.providers.filter(p => p.value !== provider.slug)
+    } else {
+      state.podcastProviders = state.podcastProviders.filter(p => p.value !== provider.slug)
+    }
+  },
+  setCustomMetadataProviders(state, providers) {
+    if (!providers?.length) return
+
+    const mediaType = providers[0].mediaType
+    if (mediaType === 'book') {
+      // clear previous values, and add new values to the end
+      state.providers = state.providers.filter((p) => !p.value.startsWith('custom-'))
+      state.providers = [
+        ...state.providers,
+        ...providers.map((p) => ({
+          text: p.name,
+          value: p.slug
+        }))
+      ]
+    } else {
+      // Podcast providers not supported yet
+    }
+  }
+}