Merge master

.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: true
 }

.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": [

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true

.github/ISSUE_TEMPLATE/bug.yaml

@@ -1,40 +1,50 @@
 name: 🐞 Bug Report
-description: File a bug/issue
+description: File a bug/issue and help us improve Audiobookshelf
-title: "[Bug]: "
+title: '[Bug]: '
-labels: ["bug", "triage"]
+labels: ['bug', 'triage']
 body:
   - type: markdown
     attributes:
-      value: "### Please first search for your issue and check the [docs](https://audiobookshelf.org/docs)."
+      value: 'Thank you for filing a bug report! 🐛'
   - type: markdown
     attributes:
-      value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
+      value: 'Please first search for your issue and check the [docs](https://audiobookshelf.org/docs).'
   - type: markdown
     attributes:
-      value: "### Join the [discord server](https://discord.gg/pJsjuNCKRq) for questions or if you are not sure about a bug."
+      value: 'Report issues with the mobile app [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose).'
   - 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."
+      value: 'Join the [discord server](https://discord.gg/HQgCbd6E75) for questions or if you are not sure about a bug.'
   - type: textarea
     id: what-happened
     attributes:
-      label: Describe the issue
+      label: What happened?
-      description: What happened & what did you expect to happen
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: textarea
+    id: what-was-expected
+    attributes:
+      label: What did you expect to happen?
+      placeholder: Tell us what you expected to see! Be as descriptive as you can and include screenshots if applicable.
     validations:
       required: true
   - type: textarea
     id: steps-to-reproduce
     attributes:
       label: Steps to reproduce the issue
-      value: "1. "
+      value: '1. '
     validations:
       required: true
+  - type: markdown
+    attributes:
+      value: '## Install Environment'
   - type: input
     id: version
     attributes:
       label: Audiobookshelf version
       description: Do not put 'Latest version', please put the actual version here
-      placeholder: "e.g. v1.6.60"
+      placeholder: 'e.g. v1.6.60'
     validations:
       required: true
   - type: dropdown
@@ -44,7 +54,45 @@ body:
       options:
         - Docker
         - Debian/PPA
+        - Windows Tray App
         - Built from source
-        - Other
+        - Other (list in "Additional Notes" box)
     validations:
       required: true
+  - type: dropdown
+    id: server-os
+    attributes:
+      label: What OS is your Audiobookshelf server hosted from?
+      options:
+        - Windows
+        - macOS
+        - Linux
+        - Other (list in "Additional Notes" box)
+    validations:
+      required: true
+  - type: dropdown
+    id: desktop-browsers
+    attributes:
+      label: If the issue is being seen in the UI, what browsers are you seeing the problem on?
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Firefox for Android
+        - Chrome for Android
+        - Safari on iOS
+        - Other (list in "Additional Notes" box)
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: Please include any relevant logs here. This field is automatically formatted into code, so you do not need to include any backticks.
+      placeholder: Paste logs here
+      render: shell
+  - type: textarea
+    id: additional-notes
+    attributes:
+      label: Additional Notes
+      description: Anything else you want to add?
+      placeholder: 'e.g. I have tried X, Y, and Z.'

.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/ISSUE_TEMPLATE/feature.yml

@@ -1,17 +1,63 @@
 name: 🚀 Feature Request
 description: Request a feature/enhancement
-title: "[Enhancement]: "
+title: '[Enhancement]: '
-labels: ["enhancement"]
+labels: ['enhancement']
 body:
   - type: markdown
     attributes:
-      value: "### Please first search in both issues & discussions for your enhancement."
+      value: '#### *Mobile app features should be [requested here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)*.'
   - type: markdown
     attributes:
-      value: "### Mobile app features should be requested [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
+      value: '## Web/Server Feature Request Description'
+  - type: markdown
+    attributes:
+      value: 'Please first search in both issues & discussions for your enhancement.'
+  - type: dropdown
+    id: enhancment-type
+    attributes:
+      label: Type of Enhancement
+      options:
+        - Server Backend
+        - Web Interface/Frontend
+        - Documentation
   - type: textarea
     id: describe
     attributes:
-      label: Describe the feature/enhancement
+      label: Describe the Feature/Enhancement
+      description: Please help us understand what you want.
+      placeholder: What is your vision?
     validations:
       required: true
+  - type: textarea
+    id: the-why
+    attributes:
+      label: Why would this be helpful?
+      description: Please help us understand why this would enhance your experience.
+      placeholder: Explain the "why" or "use case".
+    validations:
+      required: true
+  - type: textarea
+    id: image
+    attributes:
+      label: Future Implementation (Screenshot)
+      description: Please help us visualize by including a doodle or screenshot.
+      placeholder: How could this look?
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: '## Web/Server Current Implementation'
+  - type: input
+    id: version
+    attributes:
+      label: Audiobookshelf Server Version
+      description: Do not put 'Latest version', please put your current version number here
+      placeholder: 'e.g. v1.6.60'
+    validations:
+      required: true
+  - type: textarea
+    id: current-image
+    attributes:
+      label: Current Implementation (Screenshot)
+      description: What page were you looking at when you thought of this enhancement?
+      placeholder: If an image is not applicable, please explain why.

.github/workflows/codeql.yml

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

.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/i18n-integration.yml

@@ -0,0 +1,30 @@
+name: Verify all i18n files are alphabetized
+
+on:
+  pull_request:
+    paths:
+      - client/strings/** # Should only check if any strings changed
+  push:
+    paths:
+      - client/strings/** # Should only check if any strings changed
+
+jobs:
+  update_translations:
+    runs-on: ubuntu-latest
+    steps:
+      # Check out the repository
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Set up node to run the javascript
+      - name: Set up node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      # The only argument is the `directory`, which is where the i18n files are
+      # stored.
+      - name: Run Update JSON Files action
+        uses: audiobookshelf/audiobookshelf-i18n-updater@v1.2.0
+        with:
+          directory: "client/strings/" # Adjust the directory path as needed

.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/notify-abs-windows.yml

@@ -0,0 +1,17 @@
+name: Dispatch an abs-windows event
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  abs-windows-dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send a remote repository dispatch event
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.ABS_WINDOWS_PAT }}
+          repository: mikiher/audiobookshelf-windows
+          event-type: build-windows

.github/workflows/unit-tests.yml

@@ -0,0 +1,37 @@
+name: Run Unit Tests
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Branch/Tag/SHA to test'
+        required: true
+  pull_request:
+  push:
+
+jobs:
+  run-unit-tests:
+    name: Run Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout (push/pull request)
+        uses: actions/checkout@v4
+        if: github.event_name != 'workflow_dispatch'
+
+      - name: Checkout (workflow_dispatch)
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref }}
+        if: github.event_name == 'workflow_dispatch'
+
+      - 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,12 +7,16 @@
 /podcasts/
 /media/
 /metadata/
-test/
 /client/.nuxt/
 /client/dist/
 /dist/
 /deploy/
+/coverage/
+/.nyc_output/
+/ffmpeg*
+/ffprobe*
 
 sw.*
 .DS_STORE
 .idea/*
+tailwind.compiled.css

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 400,
+  "proseWrap": "never",
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "singleQuote": false,
+        "wrapAttributes": false,
+        "sortAttributes": false
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode",
+    "octref.vetur"
+  ]
+}

.vscode/settings.json

@@ -16,5 +16,12 @@
   },
   "editor.formatOnSave": true,
   "editor.detectIndentation": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "javascript.format.semicolons": "remove",
+  "[javascript][json][jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "octref.vetur"
+  }
 }

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

@@ -30,8 +30,7 @@
 }
 
 .bookshelf-row {
-  /* Sidebar width + scrollbar width */
+  width: calc(100vw - (100vw - 100%));
-  width: calc(100vw - 88px);
 }
 
 @media (max-width: 768px) {
@@ -217,36 +216,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;
@@ -259,3 +228,23 @@ 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/fonts.css

@@ -24,6 +24,7 @@
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
+  vertical-align: top;
 }
 
 .material-icons:not([class*="text-"]) {

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,17 +1,17 @@
 <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>
+      <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
       <div v-if="userIsAdminOrUp" class="flex">
-        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
-        <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
+        <ui-btn color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
       </div>
     </div>
     <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
-      <p class="text-center text-xl py-4">No results for query</p>
+      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
     </div>
     <!-- Alternate plain view -->
     <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
@@ -58,7 +58,8 @@ export default {
       scannerParseSubtitle: false,
       wrapperClientWidth: 0,
       shelves: [],
-      lastItemIndexSelected: -1
+      lastItemIndexSelected: -1,
+      tempIsScanning: false
     }
   },
   computed: {
@@ -94,6 +95,12 @@ export default {
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    isScanningLibrary() {
+      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
     }
   },
   methods: {
@@ -270,14 +277,15 @@ export default {
       this.shelves = shelves
     },
     scan() {
+      this.tempIsScanning = true
       this.$store
         .dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
-        .then(() => {
-          this.$toast.success('Library scan started')
-        })
         .catch((error) => {
           console.error('Failed to start scan', error)
-          this.$toast.error('Failed to start scan')
+          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+        })
+        .finally(() => {
+          this.tempIsScanning = false
         })
     },
     userUpdated(user) {
@@ -338,9 +346,15 @@ export default {
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
 
-      const isThisLibrary = !libraryItems.some((li) => li.libraryId !== this.currentLibraryId)
+      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
-      if (!this.search && isThisLibrary) {
+      if (!recentlyAddedShelf) return
-        this.fetchCategories()
+
+      // 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/BookShelfRow.vue

@@ -4,7 +4,7 @@
       <div class="w-full h-full pt-6">
         <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="`${entity.id}-${index}`" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
           </template>
         </div>
         <div v-if="shelf.type === 'episode'" class="flex items-center">

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

@@ -10,7 +10,7 @@
       <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
       <div v-if="userIsAdminOrUp" class="flex">
         <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
-        <ui-btn color="success" class="w-52" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
       </div>
     </div>
     <div v-else-if="!totalShelves && initialized" class="w-full py-16">
@@ -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>
 
@@ -62,7 +62,8 @@ export default {
       currScrollTop: 0,
       resizeTimeout: null,
       mountWindowWidth: 0,
-      lastItemIndexSelected: -1
+      lastItemIndexSelected: -1,
+      tempIsScanning: false
     }
   },
   watch: {
@@ -205,6 +206,12 @@ export default {
     sizeMultiplier() {
       const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
       return this.entityWidth / baseSize
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    isScanningLibrary() {
+      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
     }
   },
   methods: {
@@ -724,14 +731,15 @@ export default {
       }
     },
     scan() {
+      this.tempIsScanning = true
       this.$store
         .dispatch('libraries/requestLibraryScan', { libraryId: this.currentLibraryId })
-        .then(() => {
-          this.$toast.success('Library scan started')
-        })
         .catch((error) => {
           console.error('Failed to start scan', error)
-          this.$toast.error('Failed to start scan')
+          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+        })
+        .finally(() => {
+          this.tempIsScanning = false
         })
     }
   },

client/components/app/MediaPlayerContainer.vue

@@ -1,14 +1,17 @@
 <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 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
     <div id="videoDock" />
-    <div class="absolute left-2 top-2 md:left-4 cursor-pointer">
+    <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
       <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </div>
-    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
+    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div class="min-w-0">
+        <div class="flex items-center">
           <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
             {{ title }}
           </nuxt-link>
+          <widgets-explicit-indicator v-if="isExplicit" />
+        </div>
         <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
           <span class="material-icons text-sm">person</span>
           <div class="flex items-center">
@@ -18,7 +21,6 @@
               <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
             </div>
             <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
-            <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator>
           </div>
         </div>
 
@@ -29,7 +31,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 lg:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
       </ui-tooltip>
     </div>
     <player-ui
@@ -82,13 +84,11 @@ export default {
       sleepTimer: null,
       displayTitle: null,
       currentPlaybackRate: 1,
-      syncFailedToast: null
+      syncFailedToast: null,
+      coverAspectRatio: 1
     }
   },
   computed: {
-    coverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
     isSquareCover() {
       return this.coverAspectRatio === 1
     },
@@ -138,7 +138,7 @@ export default {
       return this.streamLibraryItem?.mediaType === 'music'
     },
     isExplicit() {
-      return this.mediaMetadata.explicit || false
+      return !!this.mediaMetadata.explicit
     },
     mediaMetadata() {
       return this.media.metadata || {}
@@ -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()
       }
     },
@@ -457,6 +457,9 @@ export default {
         episodeId,
         queueItems: payload.queueItems || []
       })
+      // Set cover aspect ratio for this item's library since the library may change
+      this.coverAspectRatio = this.$store.getters['libraries/getBookCoverAspectRatio']
+
       this.$nextTick(() => {
         if (this.$refs.audioPlayer) this.$refs.audioPlayer.checkUpdateChapterTrack()
       })
@@ -496,7 +499,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="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-2 sm: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

@@ -1,34 +1,34 @@
 <template>
-  <nuxt-link :to="`/author/${author.id}`">
+  <nuxt-link :to="`/author/${author?.id}`">
-    <div @mouseover="mouseover" @mouseleave="mouseleave">
+    <div cy-id="card" :style="{ width: width + 'px'}" @mouseover="mouseover" @mouseleave="mouseleave">
-      <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+      <div cy-id="imageArea" :style="{ height: height + 'px' }" class=" bg-primary box-shadow-book rounded-md relative overflow-hidden">
         <!-- Image or placeholder -->
         <covers-author-image :author="author"/>
 
         <!-- 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">
+        <div cy-id="textInline" 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 -->
-        <div v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+        <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
           <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
             <span class="material-icons text-lg">search</span>
           </ui-tooltip>
         </div>
-        <div v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+        <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
           <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
             <span class="material-icons text-lg">edit</span>
           </ui-tooltip>
         </div>
 
         <!-- Loading spinner -->
-        <div v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+        <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
           <widgets-loading-spinner size="" />
         </div>
       </div>
-      <div v-show="nameBelow" class="w-full py-1 px-2">
+      <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1 px-2">
           <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
       </div>
     </div>

client/components/cards/BookMatchCard.vue

@@ -13,9 +13,9 @@
           <div class="flex-grow" />
           <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
         </div>
-        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
+        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">{{ $getString('LabelByAuthor', [book.author]) }}</p>
-        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
+        <p v-if="book.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
-        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
+        <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
         <div v-if="book.series?.length" class="flex py-1 -mx-1">
           <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
             <p class="leading-3 text-xs text-gray-400">
@@ -29,9 +29,9 @@
       </div>
       <div v-else class="px-4 flex-grow">
         <h1>
-          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" /></div>
+          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator v-if="book.explicit" /></div>
         </h1>
-        <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
+        <p class="text-base text-gray-300 whitespace-nowrap truncate">{{ $getString('LabelByAuthor', [book.author]) }}</p>
         <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
         <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
       </div>
@@ -75,11 +75,11 @@ export default {
       let differenceInMinutes = currentBookDurationMinutes - this.book.duration
       if (differenceInMinutes < 0) {
         differenceInMinutes = Math.abs(differenceInMinutes)
-        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} shorter)`
+        return this.$getString('LabelDurationComparisonLonger', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
       } else if (differenceInMinutes > 0) {
-        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} longer)`
+        return this.$getString('LabelDurationComparisonShorter', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
       }
-      return '(exact match)'
+      return this.$strings.LabelDurationComparisonExactMatch
     }
   },
   methods: {

client/components/cards/ItemSearchCard.vue

@@ -7,7 +7,7 @@
 
       <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300" v-html="matchHtml" />
 
-      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
+      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
       <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
 
       <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
@@ -69,7 +69,7 @@ export default {
       if (this.matchKey === 'episode') return `<p class="truncate">${this.$strings.LabelEpisode}: ${html}</p>`
       if (this.matchKey === 'tags') return `<p class="truncate">${this.$strings.LabelTags}: ${html}</p>`
       if (this.matchKey === 'subtitle') return `<p class="truncate">${html}</p>`
-      if (this.matchKey === 'authors') return `by ${html}`
+      if (this.matchKey === 'authors') this.$getString('LabelByAuthor', [html])
       if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
       if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
       if (this.matchKey === 'series') return `<p class="truncate">${this.$strings.LabelSeries}: ${html}</p>`

client/components/cards/ItemUploadCard.vue

@@ -15,24 +15,37 @@
 
       <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>
+            <p class="px-1 text-sm font-semibold">
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+              {{ $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" />
           </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>
+            <label class="px-1 text-sm font-semibold">
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+              {{ $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>
@@ -42,14 +55,14 @@
       <tables-uploaded-files-table v-if="item.ignoredFiles.length" :title="$strings.HeaderIgnoredFiles" :files="item.ignoredFiles" />
     </template>
     <widgets-alert v-if="uploadSuccess" type="success">
-      <p class="text-base">{{ $strings.MessageUploaderItemSuccess }}</p>
+      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemSuccess }}</p>
     </widgets-alert>
     <widgets-alert v-if="uploadFailed" type="error">
-      <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
+      <p class="text-base">"{{ itemData.title }}" {{ $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">
+    <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="$strings.MessageUploading" />
+      <ui-loading-indicator :text="nonInteractionLabel" />
     </div>
   </div>
 </template>
@@ -64,7 +77,8 @@ export default {
       default: () => {}
     },
     mediaType: String,
-    processing: Boolean
+    processing: Boolean,
+    provider: String
   },
   data() {
     return {
@@ -76,7 +90,8 @@ export default {
       error: '',
       isUploading: false,
       uploadFailed: false,
-      uploadSuccess: false
+      uploadSuccess: false,
+      isFetchingMetadata: false
     }
   },
   computed: {
@@ -87,12 +102,19 @@ export default {
       if (!this.itemData.title) return ''
       if (this.isPodcast) return this.itemData.title
 
-      if (this.itemData.series && this.itemData.author) {
+      const outputPathParts = [this.itemData.author, this.itemData.series, this.itemData.title]
-        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
+      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map((part) => this.$sanitizeFilename(part))
-      } else if (this.itemData.author) {
+
-        return Path.join(this.itemData.author, this.itemData.title)
+      return Path.join(...cleanedOutputPathParts)
-      } else {
+    },
-        return this.itemData.title
+    isNonInteractable() {
+      return this.isUploading || this.isFetchingMetadata
+    },
+    nonInteractionLabel() {
+      if (this.isUploading) {
+        return this.$strings.MessageUploading
+      } else if (this.isFetchingMetadata) {
+        return this.$strings.LabelFetchingMetadata
       }
     }
   },
@@ -105,9 +127,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 = ''

client/components/cards/LazyBookCard.vue

@@ -1,128 +1,124 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <!-- When cover image does not fill -->
-    <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+    <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
       <div class="absolute cover-bg" ref="coverBg" />
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+    <div cy-id="detailBottom" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        <div class="flex items-center">
+        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
-          <span class="truncate">{{ displayTitle }}</span>
+          <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
-          <widgets-explicit-indicator :explicit="isExplicit" />
+          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
+        </ui-tooltip>
       </div>
-      </div>
+      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
 
-    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
+    <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
     </div>
-    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
+    <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
     </div>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-      <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
+      <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
         <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
       </div>
 
       <!-- Cover Image -->
-      <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+      <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
 
       <!-- Placeholder Cover Title & Author -->
-      <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
         <div>
-          <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+          <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
-            {{ titleCleaned }}
-          </p>
         </div>
       </div>
-      <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
+      <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+        <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
       </div>
     </div>
 
-    <!-- No progress shown for collapsed series in library and podcasts (unless showing podcast episode) -->
+    <!-- No progress shown for podcasts (unless showing podcast episode) -->
-    <div v-if="!booksInSeries && (!isPodcast || episodeProgress)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+    <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
-    <!-- Finished progress bar for collapsed series -->
-    <div v-else-if="booksInSeries && seriesIsFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
     <!-- Overlay is not shown if collapsing series in library -->
-    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
+    <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
-      <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
+      <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
         </div>
       </div>
 
-      <div v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
+      <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
         </div>
       </div>
 
-      <div v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
+      <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
         <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
       </div>
 
       <!-- Radio button -->
-      <div v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+      <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
         <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
       </div>
 
       <!-- More Menu Icon -->
-      <div ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
+      <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
         <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
       </div>
 
-      <div v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }">
+      <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }">
         <span class="text-white/80" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ ebookFormat }}</span>
       </div>
     </div>
 
     <!-- Processing/loading spinner overlay -->
-    <div v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+    <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
       <widgets-loading-spinner size="la-lg" />
     </div>
 
     <!-- Series name overlay -->
-    <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
+    <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
       <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ seriesName }}</p>
     </div>
 
     <!-- Error widget -->
-    <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
+    <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
       <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
         <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
       </div>
     </ui-tooltip>
 
-    <div v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
+    <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
       <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
     </div>
 
     <!-- Series sequence -->
-    <div v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
         Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
       </p>
     </div>
 
     <!-- Podcast Num Episodes -->
-    <div v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+    <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
     </div>
 
     <!-- Podcast Num Episodes -->
-    <div v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+    <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
     </div>
   </div>
@@ -164,6 +160,7 @@ export default {
       imageReady: false,
       selected: false,
       isSelectionMode: false,
+      displayTitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -342,11 +339,22 @@ export default {
       if (!this.userProgress || this.userProgress.progress) return false
       return this.userProgress.ebookProgress > 0
     },
+    seriesProgressPercent() {
+      if (!this.libraryItemIdsInSeries.length) return 0
+      let progressPercent = 0
+      const useEBookProgress = this.useEBookProgress
+      this.libraryItemIdsInSeries.forEach((lid) => {
+        const progress = this.store.getters['user/getUserMediaProgress'](lid)
+        if (progress) progressPercent += progress.isFinished ? 1 : useEBookProgress ? progress.ebookProgress || 0 : progress.progress || 0
+      })
+      return progressPercent / this.libraryItemIdsInSeries.length
+    },
     userProgressPercent() {
-      if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
+      let progressPercent = this.itemIsFinished ? 1 : this.booksInSeries ? this.seriesProgressPercent : this.useEBookProgress ? this.userProgress?.ebookProgress || 0 : this.userProgress?.progress || 0
-      return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
+      return Math.max(Math.min(1, progressPercent), 0)
     },
     itemIsFinished() {
+      if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false
     },
     seriesIsFinished() {
@@ -357,7 +365,7 @@ export default {
     },
     showError() {
       if (this.recentEpisode) return false // Dont show podcast error on episode card
-      return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
+      return this.isMissing || this.isInvalid
     },
     libraryItemIdStreaming() {
       return this.store.getters['getLibraryItemIdStreaming']
@@ -387,29 +395,13 @@ export default {
     isInvalid() {
       return this._libraryItem.isInvalid
     },
-    numMissingParts() {
-      if (this.isPodcast) return 0
-      return this.media.numMissingParts
-    },
-    numInvalidAudioFiles() {
-      if (this.isPodcast) return 0
-      return this.media.numInvalidAudioFiles
-    },
     errorText() {
       if (this.isMissing) return 'Item directory is missing!'
       else if (this.isInvalid) {
         if (this.isPodcast) return 'Podcast has no episodes'
         return 'Item has no audio tracks & ebook'
       }
-      let txt = ''
+      return 'Unknown Error'
-      if (this.numMissingParts) {
-        txt += `${this.numMissingParts} missing parts.`
-      }
-      if (this.numInvalidAudioFiles) {
-        if (txt) txt += ' '
-        txt += `${this.numInvalidAudioFiles} invalid audio files.`
-      }
-      return txt || 'Unknown Error'
     },
     overlayWrapperClasslist() {
       const classes = []
@@ -642,6 +634,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 +846,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/cards/LazySeriesCard.vue

@@ -1,28 +1,28 @@
 <template>
-  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
     <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
       <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
+    <div cy-id="seriesLengthMarker" class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
 
-    <div v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+    <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
 
-    <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+    <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
       <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
     </div>
 
-    <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
+    <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
 
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
       </div>
     </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+    <div cy-id="detailBottomText" v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
+      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -119,9 +119,13 @@ export default {
       return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0)
     },
     seriesPercentInProgress() {
-      let totalFinishedAndInProgress = this.seriesBooksFinished.length
+      if (!this.books.length) return 0
-      if (this.hasSeriesBookInProgress) totalFinishedAndInProgress += 1
+      let progressPercent = 0
-      return Math.min(1, Math.max(0, totalFinishedAndInProgress / this.books.length))
+      this.seriesBookProgress.forEach((progress) => {
+        progressPercent += progress.isFinished ? 1 : progress.progress || 0
+      })
+      progressPercent /= this.books.length
+      return Math.min(1, Math.max(0, progressPercent))
     },
     isSeriesFinished() {
       return this.books.length === this.seriesBooksFinished.length

client/components/cards/NarratorCard.vue

@@ -1,14 +1,14 @@
 <template>
-  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
+  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-    <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+    <div cy-id="card" :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
       <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
         <span class="material-icons-outlined text-[10rem]">record_voice_over</span>
       </div>
 
       <!-- Narrator name & num books overlay -->
       <div 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 cy-id="name" class="text-center font-semibold truncate text-gray-200" :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 cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
       </div>
     </div>
   </nuxt-link>
@@ -21,8 +21,14 @@ export default {
       type: Object,
       default: () => {}
     },
-    width: Number,
+    width:  {
-    height: Number,
+      type: Number,
+      default: 150
+    },
+    height: { 
+      type: Number,
+      default: 100
+    },
     sizeMultiplier: {
       type: Number,
       default: 1

client/components/content/LibraryItemDetails.vue

@@ -89,6 +89,14 @@
         </template>
       </div>
     </div>
+    <div v-if="language" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelLanguage }}</span>
+      </div>
+      <div>
+        <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=languages.${$encode(language)}`" class="hover:underline">{{ language }}</nuxt-link>
+      </div>
+    </div>
     <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
       <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
         <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
@@ -182,6 +190,9 @@ export default {
     narrators() {
       return this.mediaMetadata.narrators || []
     },
+    language() {
+      return this.mediaMetadata.language || null
+    },
     durationPretty() {
       if (this.isPodcast) return this.$elapsedPrettyExtended(this.totalPodcastDuration)
 

client/components/controls/GlobalSearch.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="sm:w-80 w-full relative">
+  <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>
@@ -7,7 +8,8 @@
         <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 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>
+    <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

@@ -37,12 +37,12 @@
             <span class="material-icons text-2xl">arrow_left</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">Back</span>
+            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
           </div>
         </li>
         <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
           <div class="flex items-center justify-center">
-            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+            <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
           </div>
         </li>
         <template v-for="item in sublistItems">
@@ -106,31 +106,37 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
           value: 'authors',
           sublist: true
         },
         {
           text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
           value: 'narrators',
           sublist: true
         },
         {
           text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
           value: 'publishers',
           sublist: true
         },
         {
           text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
           value: 'languages',
           sublist: true
         },
@@ -149,36 +155,43 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.LabelSeries,
+          textPlural: this.$strings.LabelSeries,
           value: 'series',
           sublist: true
         },
         {
           text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
           value: 'authors',
           sublist: true
         },
         {
           text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
           value: 'narrators',
           sublist: true
         },
         {
           text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
           value: 'publishers',
           sublist: true
         },
         {
           text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
           value: 'languages',
           sublist: true
         },
@@ -227,14 +240,22 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
+        {
+          text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
+          value: 'languages',
+          sublist: true
+        },
         {
           text: this.$strings.ButtonIssues,
           value: 'issues',
@@ -250,11 +271,13 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
@@ -274,6 +297,13 @@ export default {
     selectedItemSublist() {
       return this.selected?.includes('.') ? this.selected.split('.')[0] : null
     },
+    selectedSublistText() {
+      if (!this.sublist) {
+        return ''
+      }
+      const sublistItem = this.selectItems.find((i) => i.value === this.sublist)
+      return sublistItem?.textPlural || sublistItem?.text || ''
+    },
     selectedText() {
       if (!this.selected) return ''
       const parts = this.selected.split('.')
@@ -368,9 +398,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,7 +38,7 @@ export default {
       },
       set(val) {
         try {
-          localStorage.setItem("volume", val);
+          localStorage.setItem('volume', val)
         } catch (error) {
           console.error('Failed to store volume', err)
         }
@@ -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/covers/BookCover.vue

@@ -101,9 +101,14 @@ export default {
     },
     fullCoverUrl() {
       if (!this.libraryItem) return null
-      var store = this.$store || this.$nuxt.$store
+      const store = this.$store || this.$nuxt.$store
       return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
     },
+    rawCoverUrl() {
+      if (!this.libraryItem) return null
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl, true)
+    },
     cover() {
       return this.media.coverPath || this.placeholderUrl
     },
@@ -126,9 +131,6 @@ export default {
     authorBottom() {
       return 0.75 * this.sizeMultiplier
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
     }
@@ -136,7 +138,7 @@ export default {
   methods: {
     clickCover() {
       if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
+        this.$store.commit('globals/setRawCoverPreviewModal', this.rawCoverUrl)
       }
     },
     setCoverBg() {

client/components/covers/PreviewCover.vue

@@ -65,7 +65,7 @@ export default {
       return 0.8 * this.sizeMultiplier
     },
     resolution() {
-      return `${this.naturalWidth}x${this.naturalHeight}px`
+      return `${this.naturalWidth}×${this.naturalHeight}px`
     },
     placeholderUrl() {
       const config = this.$config || this.$nuxt.$config

client/components/modals/AccountModal.vue

@@ -10,21 +10,21 @@
         <div class="w-full p-8">
           <div class="flex py-2">
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model="newUser.username" :label="$strings.LabelUsername" />
+              <ui-text-input-with-label v-model.trim="newUser.username" :label="$strings.LabelUsername" />
             </div>
             <div class="w-1/2 px-2">
               <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
-              <ui-text-input-with-label v-else v-model="newUser.email" :label="$strings.LabelEmail" />
+              <ui-text-input-with-label v-else v-model.trim="newUser.email" :label="$strings.LabelEmail" />
             </div>
           </div>
           <div v-show="!isEditingRoot" class="flex py-2">
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model="newUser.email" :label="$strings.LabelEmail" />
+              <ui-text-input-with-label v-model.trim="newUser.email" :label="$strings.LabelEmail" />
             </div>
             <div class="px-2 w-52">
               <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
             </div>
-            <!-- <div class="flex-grow" /> -->
+
             <div class="flex items-center pt-4 px-2">
               <p class="px-3 font-semibold" id="user-enabled-toggle" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
               <ui-toggle-switch labeledBy="user-enabled-toggle" v-model="newUser.isActive" :disabled="isEditingRoot" />
@@ -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/ListeningSessionModal.vue

@@ -8,7 +8,7 @@
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
       <div class="flex items-center">
         <p class="text-base text-gray-200">{{ _session.displayTitle }}</p>
-        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">by {{ _session.displayAuthor }}</p>
+        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">{{ $getString('LabelByAuthor', [_session.displayAuthor]) }}</p>
       </div>
 
       <div class="w-full h-px bg-white bg-opacity-10 my-4" />
@@ -88,10 +88,11 @@
           <p class="mb-1">{{ _session.mediaPlayer }}</p>
 
           <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelDevice }}</p>
+          <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</p>
           <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
           <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
           <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
-          <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</p>
+          <p v-if="deviceDisplayName" class="mb-1">{{ deviceDisplayName }}</p>
           <p v-if="deviceInfo.sdkVersion" class="mb-1">SDK {{ $strings.LabelVersion }}: {{ deviceInfo.sdkVersion }}</p>
           <p v-if="deviceInfo.deviceType" class="mb-1">{{ $strings.LabelType }}: {{ deviceInfo.deviceType }}</p>
         </div>
@@ -141,10 +142,14 @@ export default {
       if (!this.deviceInfo.osName) return null
       return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
     },
-    clientDisplayName() {
+    deviceDisplayName() {
       if (!this.deviceInfo.manufacturer || !this.deviceInfo.model) return null
       return `${this.deviceInfo.manufacturer} ${this.deviceInfo.model}`
     },
+    clientDisplayName() {
+      if (!this.deviceInfo.clientName) return null
+      return `${this.deviceInfo.clientName} ${this.deviceInfo.clientVersion || ''}`
+    },
     playMethodName() {
       const playMethod = this._session.playMethod
       if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'

client/components/modals/RawCoverPreviewModal.vue

@@ -20,11 +20,8 @@ export default {
         this.$store.commit('globals/setShowRawCoverPreviewModal', val)
       }
     },
-    selectedLibraryItemId() {
-      return this.$store.state.globals.selectedLibraryItemId
-    },
     rawCoverUrl() {
-      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.selectedLibraryItemId, null, true)
+      return this.$store.state.globals.selectedRawCoverUrl
     }
   },
   methods: {},

client/components/modals/authors/EditModal.vue

@@ -9,7 +9,7 @@
       <div class="flex">
         <div class="w-40 p-2">
           <div class="w-full h-45 relative">
-            <covers-author-image :author="author" />
+            <covers-author-image :author="authorCopy" />
             <div v-if="userCanDelete && !processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
               <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
             </div>
@@ -30,9 +30,6 @@
                 <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
               </div>
             </div>
-            <!-- <div class="p-2">
-              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" :label="$strings.LabelPhotoPathURL" />
-            </div> -->
             <div class="p-2">
               <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" :label="$strings.LabelDescription" :rows="8" />
             </div>
@@ -106,9 +103,9 @@ export default {
   methods: {
     init() {
       this.imageUrl = ''
-      this.authorCopy.name = this.author.name
+      this.authorCopy = {
-      this.authorCopy.asin = this.author.asin
+        ...this.author
-      this.authorCopy.description = this.author.description
+      }
     },
     removeClick() {
       const payload = {
@@ -171,7 +168,9 @@ export default {
         .$delete(`/api/authors/${this.authorId}/image`)
         .then((data) => {
           this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
-          this.$store.commit('globals/showEditAuthorModal', data.author)
+
+          this.authorCopy.updatedAt = data.author.updatedAt
+          this.authorCopy.imagePath = data.author.imagePath
         })
         .catch((error) => {
           console.error('Failed', error)
@@ -196,7 +195,9 @@ export default {
         .then((data) => {
           this.imageUrl = ''
           this.$toast.success('Author image updated')
-          this.$store.commit('globals/showEditAuthorModal', data.author)
+
+          this.authorCopy.updatedAt = data.author.updatedAt
+          this.authorCopy.imagePath = data.author.imagePath
         })
         .catch((error) => {
           console.error('Failed', error)
@@ -231,8 +232,11 @@ export default {
       } else if (response.updated) {
         if (response.author.imagePath) {
           this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
-          this.$store.commit('globals/showEditAuthorModal', response.author)
         } else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+
+        this.authorCopy = {
+          ...response.author
+        }
       } else {
         this.$toast.info('No updates were made for Author')
       }

client/components/modals/collections/AddCreateModal.vue

@@ -122,7 +122,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to get collections', error)
-          this.$toast.error('Failed to load collections')
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
         })
         .finally(() => {
           this.processing = false

client/components/modals/emails/EReaderDeviceModal.vue

@@ -46,7 +46,12 @@ export default {
     ereaderDevice: {
       type: Object,
       default: () => null
-    }
+    },
+    users: {
+      type: Array,
+      default: () => []
+    },
+    loadUsers: Function
   },
   data() {
     return {
@@ -56,8 +61,7 @@ export default {
         email: '',
         availabilityOption: 'adminAndUp',
         users: []
-      },
+      }
-      users: []
     }
   },
   watch: {
@@ -108,25 +112,13 @@ export default {
   methods: {
     availabilityOptionChanged(option) {
       if (option === 'specificUsers' && !this.users.length) {
-        this.loadUsers()
+        this.callLoadUsers()
       }
     },
-    async loadUsers() {
+    async callLoadUsers() {
       this.processing = true
-      this.users = await this.$axios
+      await this.loadUsers()
-        .$get('/api/users')
-        .then((res) => {
-          return res.users.sort((a, b) => {
-            return a.createdAt - b.createdAt
-          })
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          return []
-        })
-        .finally(() => {
       this.processing = false
-        })
     },
     submitForm() {
       this.$refs.ereaderNameInput.blur()
@@ -226,10 +218,6 @@ export default {
         this.newDevice.email = this.ereaderDevice.email
         this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
         this.newDevice.users = this.ereaderDevice.users || []
-
-        if (this.newDevice.availabilityOption === 'specificUsers' && !this.users.length) {
-          this.loadUsers()
-        }
       } else {
         this.newDevice.name = ''
         this.newDevice.email = ''

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

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
     <div class="w-full mb-4">
-      <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" keep-open />
+      <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" keep-open @close="closeModal" />
       <div v-if="!chapters.length" class="py-4 text-center">
         <p class="mb-8 text-xl">{{ $strings.MessageNoChapters }}</p>
-        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">{{ $strings.ButtonAddChapters }}</ui-btn>
+        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`" @click="clickAddChapters">{{ $strings.ButtonAddChapters }}</ui-btn>
       </div>
     </div>
   </div>
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
+      return this.libraryItem?.media || {}
     },
     chapters() {
       return this.media.chapters || []
@@ -32,6 +32,15 @@ export default {
       return this.$store.getters['user/getUserCanUpdate']
     }
   },
-  methods: {}
+  methods: {
+    closeModal() {
+      this.$emit('close')
+    },
+    clickAddChapters() {
+      if (this.$route.name === 'audiobook-id-chapters' && this.$route.params?.id === this.libraryItem?.id) {
+        this.closeModal()
+      }
+    }
+  }
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
-    <div class="flex flex-wrap mb-4">
+    <div class="flex flex-col sm:flex-row mb-4">
-      <div class="relative">
+      <div class="relative self-center">
         <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
         <!-- book cover overlay -->
@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
+      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
         <div class="flex items-center">
           <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
             <ui-file-input ref="fileInput" @change="fileUploadSelected">
@@ -49,20 +49,20 @@
       </div>
     </div>
     <form @submit.prevent="submitSearchForm">
-      <div class="flex items-center justify-start -mx-1 h-20">
+      <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
-        <div class="w-48 px-1">
+        <div class="w-48 flex-grow p-1">
           <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
-        <div class="w-72 px-1">
+        <div class="w-72 flex-grow p-1">
           <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
         </div>
-        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 px-1">
+        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 flex-grow p-1">
           <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
+        <ui-btn class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
-    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
+    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center sm:max-h-80 sm:overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
       <template v-for="cover in coversFound">
         <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">

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

@@ -29,7 +29,7 @@
           <td class="text-center w-20 min-w-20">
             <p>{{ episode.episode }}</p>
           </td>
-          <td>
+          <td dir="auto">
             {{ episode.title }}
           </td>
           <td class="font-mono text-center">

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

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

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

@@ -32,7 +32,7 @@
         </div>
         <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</p>
       </div>
-      <ui-checkbox v-model="selectAll" checkbox-bg="bg" @input="selectAllToggled" />
+      <ui-checkbox v-model="selectAll" :label="$strings.LabelSelectAll" checkbox-bg="bg" @input="selectAllToggled" />
       <form @submit.prevent="submitMatchUpdate">
         <div v-if="selectedMatchOrig.cover" class="flex flex-wrap md:flex-nowrap items-center justify-center">
           <div class="flex flex-grow items-center py-2">
@@ -42,15 +42,15 @@
 
           <div class="flex py-2">
             <div>
-              <p class="text-center text-gray-200">New</p>
+              <p class="text-center text-gray-200">{{ $strings.LabelNew }}</p>
               <a :href="selectedMatch.cover" target="_blank" class="bg-primary">
                 <covers-preview-cover :src="selectedMatch.cover" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
               </a>
             </div>
-            <div v-if="media.coverPath">
+            <div v-if="media.coverPath" class="ml-0.5">
-              <p class="text-center text-gray-200">Current</p>
+              <p class="text-center text-gray-200">{{ $strings.LabelCurrent }}</p>
-              <a :href="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" target="_blank" class="bg-primary">
+              <a :href="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, 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" />
+                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
               </a>
             </div>
           </div>
@@ -79,7 +79,7 @@
         <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
+            <ui-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
             <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
           </div>
         </div>
@@ -122,7 +122,7 @@
         <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
+            <ui-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
             <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p>
           </div>
         </div>
@@ -180,14 +180,14 @@
           <ui-checkbox v-model="selectedMatchUsage.explicit" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.explicit != null }">
             <ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" :disabled="!selectedMatchUsage.explicit" :checkbox-bg="!selectedMatchUsage.explicit ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? 'Explicit (checked)' : 'Not Explicit (unchecked)' }}</p>
+            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? $strings.LabelExplicitChecked : $strings.LabelExplicitUnchecked }}</p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.abridged != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.abridged == null }">
           <ui-checkbox v-model="selectedMatchUsage.abridged" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.abridged != null }">
             <ui-checkbox v-model="selectedMatch.abridged" :label="$strings.LabelAbridged" :disabled="!selectedMatchUsage.abridged" :checkbox-bg="!selectedMatchUsage.abridged ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-            <p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? 'Abridged (checked)' : 'Unabridged (unchecked)' }}</p>
+            <p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? $strings.LabelAbridgedChecked : $strings.LabelAbridgedUnchecked }}</p>
           </div>
         </div>
 
@@ -280,6 +280,9 @@ export default {
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
+    filterData() {
+      return this.$store.state.libraries.filterData
+    },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
@@ -305,11 +308,16 @@ export default {
     isPodcast() {
       return this.mediaType == 'podcast'
     },
+    narrators() {
+      return this.filterData.narrators || []
+    },
     genres() {
-      const filterData = this.$store.state.libraries.filterData || {}
+      const currentGenres = this.filterData.genres || []
-      const currentGenres = filterData.genres || []
       const selectedMatchGenres = this.selectedMatch.genres || []
       return [...new Set([...currentGenres, ...selectedMatchGenres])]
+    },
+    tags() {
+      return this.filterData.tags || []
     }
   },
   methods: {
@@ -328,10 +336,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 +453,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) {
@@ -465,6 +487,12 @@ export default {
           // match.genres = match.genres.join(',')
           match.genres = match.genres.split(',').map((g) => g.trim())
         }
+        if (match.tags && !Array.isArray(match.tags)) {
+          match.tags = match.tags.split(',').map((g) => g.trim())
+        }
+        if (match.narrator && !Array.isArray(match.narrator)) {
+          match.narrator = match.narrator.split(',').map((g) => g.trim())
+        }
       }
 
       console.log('Select Match', match)
@@ -494,7 +522,10 @@ export default {
           } else if (key === 'author' && !this.isPodcast) {
             var authors = this.selectedMatch[key]
             if (!Array.isArray(authors)) {
-              authors = authors.split(',').map((au) => au.trim())
+              authors = authors
+                .split(',')
+                .map((au) => au.trim())
+                .filter((au) => !!au)
             }
             var authorPayload = []
             authors.forEach((authorName) =>
@@ -505,11 +536,11 @@ export default {
             )
             updatePayload.metadata.authors = authorPayload
           } else if (key === 'narrator') {
-            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.metadata.narrators = this.selectedMatch[key]
           } else if (key === 'genres') {
             updatePayload.metadata.genres = [...this.selectedMatch[key]]
           } else if (key === 'tags') {
-            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.tags = this.selectedMatch[key]
           } else if (key === 'itunesId') {
             updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
           } else {
@@ -532,24 +563,11 @@ export default {
       // Persist in local storage
       localStorage.setItem('selectedMatchUsage', JSON.stringify(this.selectedMatchUsage))
 
+      if (Object.keys(updatePayload).length) {
         if (updatePayload.metadata.cover) {
-        const coverPayload = {
+          updatePayload.url = updatePayload.metadata.cover
-          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) {
         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">
+    <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>
+      <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 v-else-if="loadingFolders" class="py-12 text-center">
+    </div>
+    <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,
+      initialLoad: false,
-      allFolders: [],
+      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() {
+    async goBack() {
-      var splitPaths = this.selectedPath.split('\\').slice(1)
+      let selPath = this.selectedPath.replace(/^\//, '')
-      var prev = splitPaths.slice(0, -1).join('\\')
+      var splitPaths = selPath.split('/')
 
-      var currDirs = this.allFolders
+      let previousPath = ''
-      for (let i = 0; i < splitPaths.length; i++) {
+      let lookupPath = ''
-        var _dir = currDirs.find((dir) => dir.dirname === splitPaths[i])
+
-        if (_dir && _dir.path.slice(1) === prev) {
+      if (splitPaths.length > 2) {
-          this.directories = currDirs
+        lookupPath = splitPaths.slice(0, -2).join('/')
-          this.selectDir(_dir)
-          return
-        } else if (_dir) {
-          currDirs = _dir.dirs
       }
+      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.initialLoad = true
-      this.allFolders = await this.$store.dispatch('libraries/loadFolders')
+      this.rootDirs = await this.fetchDirs('', 0)
-      this.loadingFolders = false
+      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,31 @@
         </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="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="epubsAllowScriptedContent" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+          <p class="pl-4 text-base">
+            {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+            <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-72" menu-max-height="200px" @input="formUpdated" />
+    </div>
   </div>
 </template>
 
@@ -69,7 +94,10 @@ export default {
       skipMatchingMediaWithAsin: false,
       skipMatchingMediaWithIsbn: false,
       audiobooksOnly: false,
-      hideSingleBookSeries: false
+      epubsAllowScriptedContent: false,
+      hideSingleBookSeries: false,
+      onlyShowLaterBooksInContinueSeries: false,
+      podcastSearchRegion: 'us'
     }
   },
   computed: {
@@ -85,6 +113,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 +130,10 @@ export default {
           skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
           skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn,
           audiobooksOnly: !!this.audiobooksOnly,
-          hideSingleBookSeries: !!this.hideSingleBookSeries
+          epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
+          hideSingleBookSeries: !!this.hideSingleBookSeries,
+          onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
+          podcastSearchRegion: this.podcastSearchRegion
         }
       }
     },
@@ -112,7 +146,10 @@ export default {
       this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
       this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
       this.audiobooksOnly = !!this.librarySettings.audiobooksOnly
+      this.epubsAllowScriptedContent = !!this.librarySettings.epubsAllowScriptedContent
       this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
+      this.onlyShowLaterBooksInContinueSeries = !!this.librarySettings.onlyShowLaterBooksInContinueSeries
+      this.podcastSearchRegion = this.librarySettings.podcastSearchRegion || 'us'
     }
   },
   mounted() {

client/components/modals/playlists/AddCreateModal.vue

@@ -115,7 +115,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to get playlists', error)
-          this.$toast.error('Failed to load user playlists')
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
         })
         .finally(() => {
           this.processing = false

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 && !!this.downloadedEpisodeGuidMap[episode.guid]) {
-        if (episode.guid && downloadedEpisode.guid === episode.guid) return true
+        return true
-        if (!downloadedEpisode.enclosure?.url) return false
+      }
-        return this.getCleanEpisodeUrl(downloadedEpisode.enclosure.url) === episode.cleanUrl
+      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/ViewEpisode.vue

@@ -15,8 +15,8 @@
           <p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
         </div>
       </div>
-      <p class="text-lg font-semibold mb-6">{{ title }}</p>
+      <p dir="auto" class="text-lg font-semibold mb-6">{{ title }}</p>
-      <div v-if="description" class="default-style" v-html="description" />
+      <div v-if="description" dir="auto" class="default-style" v-html="description" />
       <p v-else class="mb-2">{{ $strings.MessageNoDescription }}</p>
     </div>
   </modals-modal>

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

@@ -1,22 +1,30 @@
 <template>
-  <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
+  <div class="flex items-center pt-4 pb-2 lg:pt-0 lg: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">
+      <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
+        <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
           <span class="material-icons text-2xl sm:text-3xl">first_page</span>
-      </div>
+        </button>
-      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+      </ui-tooltip>
+      <ui-tooltip direction="top" :text="$strings.ButtonJumpBackward">
+        <button :aria-label="$strings.ButtonJumpBackward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
           <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
-      </div>
+        </button>
-      <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">
+      </ui-tooltip>
+      <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
         <span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-      </div>
+      </button>
-      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+      <ui-tooltip direction="top" :text="$strings.ButtonJumpForward">
+        <button :aria-label="$strings.ButtonJumpForward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
           <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
-      </div>
+        </button>
-      <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">
+      </ui-tooltip>
+      <ui-tooltip direction="top" :text="$strings.ButtonNextChapter" class="ml-4 lg:ml-8">
+        <button :aria-label="$strings.ButtonNextChapter" :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>
+      </ui-tooltip>
       <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

@@ -1,45 +1,45 @@
 <template>
   <div class="w-full -mt-6">
     <div class="w-full relative mb-1">
-      <div class="absolute -top-10 md:top-0 right-0 lg:right-2 flex items-center h-full">
+      <div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
         <!-- <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
 
         <ui-tooltip direction="top" :text="$strings.LabelVolume">
-          <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
+          <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
         </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>
 
@@ -53,7 +53,7 @@
       <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
       <div class="flex-grow" />
       <p class="text-xs sm:text-sm text-gray-300 pt-0.5">
-        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ currentChapterIndex + 1 }} of {{ chapters.length }})</span>
+        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
       </p>
       <div class="flex-grow" />
       <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>

client/components/prompt/Confirm.vue

@@ -3,7 +3,7 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-lg mb-6 mt-2 px-1" v-html="message" />
+        <p id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />
 
         <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
 
@@ -132,3 +132,13 @@ export default {
   }
 }
 </script>
+
+<style>
+#confirm-prompt-message code {
+  font-size: 1rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>

client/components/readers/ComicReader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
     <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-8 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400" :style="{ width: pageMenuWidth + 'px' }">
-      <div v-for="(file, index) in cleanedPageNames" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index + 1)">
+      <div v-for="(file, index) in cleanedPageNames" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index + 1 ? 'bg-black-200' : ''" @click="setPage(index + 1)">
         <p class="text-sm truncate">{{ file }}</p>
       </div>
     </div>
@@ -14,34 +14,40 @@
       </div>
     </div>
 
-    <a v-if="pages && numPages" :href="mainImg" :download="pages[page - 1]" class="absolute top-0 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" :class="comicMetadata ? 'left-32' : 'left-20'">
+    <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">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">
       <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 class="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 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">
+      <div ref="imageContainer" class="w-full h-full relative overflow-auto">
-        <img v-if="mainImg" :src="mainImg" class="object-contain h-full m-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: {
@@ -317,7 +334,7 @@ export default {
       }
     },
     parseFilenames(filenames) {
-      const acceptableImages = ['.jpeg', '.jpg', '.png']
+      const acceptableImages = ['.jpeg', '.jpg', '.png', '.webp']
       var imageFiles = filenames.filter((f) => {
         return acceptableImages.includes((Path.extname(f) || '').toLowerCase())
       })
@@ -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() {},
+  mounted() {
-  beforeDestroy() {}
+    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

@@ -63,6 +63,9 @@ export default {
     libraryItemId() {
       return this.libraryItem?.id
     },
+    allowScriptedContent() {
+      return this.$store.getters['libraries/getLibraryEpubsAllowScriptedContent']
+    },
     hasPrev() {
       return !this.rendition?.location?.atStart
     },
@@ -316,6 +319,7 @@ export default {
       reader.rendition = reader.book.renderTo('viewer', {
         width: this.readerWidth,
         height: this.readerHeight * 0.8,
+        allowScriptedContent: this.allowScriptedContent,
         spread: 'auto',
         snap: true,
         manager: 'continuous',

client/components/stats/PreviewIcons.vue

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

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(this.$strings.ToastFailedToLoadData)
+        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(this.$strings.ToastFailedToLoadData)
+        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(this.$strings.ToastFailedToLoadData)
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/tables/AudioTracksTableRow.vue

@@ -94,11 +94,11 @@ export default {
             this.$axios
               .$delete(`/api/items/${this.libraryItemId}/file/${this.track.audioFile.ino}`)
               .then(() => {
-                this.$toast.success('File deleted')
+                this.$toast.success(this.$strings.ToastDeleteFileSuccess)
               })
               .catch((error) => {
                 console.error('Failed to delete file', error)
-                this.$toast.error('Failed to delete file')
+                this.$toast.error(this.$strings.ToastDeleteFileFailed)
               })
           }
         },

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)]))) {
@@ -169,7 +176,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to load backups', error)
-          this.$toast.error('Failed to load backups')
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
         })
         .finally(() => {
           this.processing = false
@@ -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/ChaptersTable.vue

@@ -4,7 +4,7 @@
       <p class="pr-4">{{ $strings.HeaderChapters }}</p>
       <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ chapters.length }}</span>
       <div class="flex-grow" />
-      <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2">{{ $strings.ButtonEditChapters }}</ui-btn>
+      <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2" @click="clickEditChapters">{{ $strings.ButtonEditChapters }}</ui-btn>
       <div v-if="!keepOpen" class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
         <span class="material-icons text-4xl">expand_more</span>
       </div>
@@ -21,7 +21,7 @@
           <td class="text-left">
             <p class="px-4">{{ chapter.id }}</p>
           </td>
-          <td>
+          <td dir="auto">
             {{ chapter.title }}
           </td>
           <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
@@ -107,6 +107,12 @@ export default {
         }
         this.$store.commit('globals/setConfirmPrompt', payload)
       }
+    },
+    clickEditChapters() {
+      // Used for Chapters tab in modal
+      if (this.$route.name === 'audiobook-id-chapters' && this.$route.params?.id === this.libraryItem?.id) {
+        this.$emit('close')
+      }
     }
   },
   mounted() {}

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">{{ $strings.LabelNoCustomMetadataProviders }}</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/EbookFilesTableRow.vue

@@ -115,11 +115,11 @@ export default {
             this.$axios
               .$delete(`/api/items/${this.libraryItemId}/file/${this.file.ino}`)
               .then(() => {
-                this.$toast.success('File deleted')
+                this.$toast.success(this.$strings.ToastDeleteFileSuccess)
               })
               .catch((error) => {
                 console.error('Failed to delete file', error)
-                this.$toast.error('Failed to delete file')
+                this.$toast.error(this.$strings.ToastDeleteFileFailed)
               })
               .finally(() => {
                 this.processing = false

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

@@ -89,11 +89,11 @@ export default {
             this.$axios
               .$delete(`/api/items/${this.libraryItemId}/file/${this.file.ino}`)
               .then(() => {
-                this.$toast.success('File deleted')
+                this.$toast.success(this.$strings.ToastDeleteFileSuccess)
               })
               .catch((error) => {
                 console.error('Failed to delete file', error)
-                this.$toast.error('Failed to delete file')
+                this.$toast.error(this.$strings.ToastDeleteFileFailed)
               })
           }
         },

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

@@ -10,7 +10,7 @@
           <th class="w-32 hidden sm:table-cell">{{ $strings.LabelCreatedAt }}</th>
           <th class="w-32"></th>
         </tr>
-        <tr v-for="user in users" :key="user.id" class="cursor-pointer" :class="user.isActive ? '' : 'bg-error bg-opacity-20'" @click="$router.push(`/config/users/${user.id}`)">
+        <tr v-for="user in users" :key="user.id" class="cursor-pointer" :class="user.isActive ? '' : '!bg-error/10'" @click="$router.push(`/config/users/${user.id}`)">
           <td>
             <div class="flex items-center">
               <widgets-online-indicator :value="!!usersOnline[user.id]" />

client/components/tables/playlist/ItemTableRow.vue

@@ -38,7 +38,7 @@
         <div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
           <ui-icon-btn icon="edit" borderless @click="clickEdit" />
         </div>
-        <div v-if="userCanDelete" class="mx-1">
+        <div class="mx-1" :class="isHovering ? '' : 'ml-6'">
           <ui-icon-btn icon="close" borderless @click="removeClick" />
         </div>
       </div>
@@ -75,8 +75,7 @@ export default {
   },
   computed: {
     translateDistance() {
-      if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
+      if (!this.userCanUpdate) return '-translate-x-12'
-      else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
       return '-translate-x-24'
     },
     libraryItem() {

client/components/tables/podcast/DownloadQueueTable.vue

@@ -20,7 +20,7 @@
               <td class="px-4">
                 <div class="flex items-center">
                   <nuxt-link :to="`/item/${downloadQueued.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ downloadQueued.podcastTitle }}</nuxt-link>
-                  <widgets-explicit-indicator :explicit="downloadQueued.podcastExplicit" />
+                  <widgets-explicit-indicator v-if="downloadQueued.podcastExplicit" />
                 </div>
               </td>
               <td>
@@ -30,7 +30,7 @@
                   <widgets-podcast-type-indicator :type="downloadQueued.episodeType" />
                 </div>
               </td>
-              <td class="px-4">
+              <td dir="auto" class="px-4">
                 {{ downloadQueued.episodeDisplayTitle }}
               </td>
               <td class="text-xs">

client/components/tables/podcast/LazyEpisodeRow.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
+  <div :id="`lazy-episode-${index}`" class="w-full h-full cursor-pointer" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
+    <div class="flex" @click="clickedEpisode">
-      <div class="flex-grow px-2">
+      <div class="flex-grow">
-        <div class="flex items-center">
+        <div dir="auto" class="flex items-center">
-          <span class="text-sm font-semibold">{{ title }}</span>
+          <span class="text-sm font-semibold">{{ episodeTitle }}</span>
-          <widgets-podcast-type-indicator :type="episode.episodeType" />
+          <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="h-10 flex items-center mt-1.5 mb-0.5 overflow-hidden">
-        <div class="flex justify-between pt-2 max-w-xl">
+          <p class="text-sm text-gray-200 line-clamp-2" v-html="episodeSubtitle"></p>
-          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+        </div>
-          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+        <div class="h-8 flex items-center">
-          <p v-if="episode.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
+          <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">
           <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="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
@@ -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: () => {}
+      default: () => null
-    },
+    }
-    selectionMode: Boolean
   },
   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() {
+    episodeId() {
-      return this.episode.audioFile
+      return this.episode?.id || ''
     },
-    title() {
+    episodeTitle() {
-      return this.episode.title || ''
+      return this.episode?.title || ''
     },
-    subtitle() {
+    episodeSubtitle() {
-      return this.episode.subtitle || this.description
+      return this.episode?.subtitle || ''
     },
-    description() {
+    episodeType() {
-      return this.episode.description || ''
+      return this.episode?.episodeType || ''
     },
-    duration() {
+    publishedAt() {
-      return this.$secondsToTimestamp(this.episode.duration)
+      return this.episode?.publishedAt
     },
-    libraryItemIdStreaming() {
+    dateFormat() {
-      return this.$store.getters['getLibraryItemIdStreaming']
+      return this.store.state.serverSettings.dateFormat
-    },
-    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
     },
     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() {
+    setSelectionMode(isSelectionMode) {
-      this.$emit('addToPlaylist', this.episode)
+      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
+      this.axios
-        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
+        .$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() {
+    destroy() {
-      if (this.isQueued) {
+      // destroy the vue listeners, etc
-        // Remove from queue
+      this.$destroy()
-        this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
+
-      } else {
+      // remove the element from the DOM
-        // Add to queue
+      if (this.$el && this.$el.parentNode) {
-        this.$emit('addToQueue', this.episode)
+        this.$el.parentNode.removeChild(this.$el)
-      }
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
       }
     }
+  },
+  mounted() {}
 }
 </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-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" />
+          <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">
+    <div class="relative min-h-[176px]">
-      <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 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()
-      }, 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" @click.native="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">
@@ -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>
@@ -13,7 +13,7 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox" :style="{ maxHeight: menuMaxHeight }">
         <template v-for="item in itemsToShow">
           <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
             <div class="flex items-center">
@@ -41,7 +41,11 @@ export default {
       default: () => []
     },
     disabled: Boolean,
-    small: Boolean
+    small: Boolean,
+    menuMaxHeight: {
+      type: String,
+      default: '224px'
+    }
   },
   data() {
     return {
@@ -64,7 +68,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/FileInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <input ref="fileInput" type="file" :accept="accept" class="hidden" @change="inputChanged" />
-    <ui-btn @click="clickUpload" color="primary" class="hidden md:block" type="text"><slot /></ui-btn>
+    <ui-btn @click="clickUpload" color="primary" class="hidden md:block w-full" type="text"><slot /></ui-btn>
     <ui-icon-btn @click="clickUpload" icon="upload" class="block md:hidden" />
   </div>
 </template>

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

@@ -83,15 +83,21 @@ export default {
     },
     async updateLibrary(library) {
       var currLibraryId = this.currentLibraryId
+      if (currLibraryId === library.id) {
+        return
+      }
 
       this.disabled = true
       await this.$store.dispatch('libraries/fetch', library.id)
 
       if (this.$route.name.startsWith('config')) {
         // No need to refresh
-      } else if (this.$route.name.startsWith('library')) {
+      } else if (this.$route.name.startsWith('library') && this.$route.name !== 'library-library-series-id') {
-        var newRoute = this.$route.path.replace(currLibraryId, library.id)
+        const newRoute = this.$route.path.replace(currLibraryId, library.id)
         this.$router.push(newRoute)
+      } else if (this.$route.name === 'library-library-series-id' && library.mediaType === 'book') {
+        // For series item page redirect to root series page
+        this.$router.push(`/library/${library.id}/bookshelf/series`)
       } else {
         this.$router.push(`/library/${library.id}`)
       }