CI: update docker image for nuxt server target

.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=20
+ARG VARIANT=16
 FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base
 
 # Setup the node environment
@@ -10,3 +10,6 @@ RUN apt-get update && \
   DEBIAN_FRONTEND=noninteractive apt-get -y install --no-install-recommends \
     curl tzdata ffmpeg && \
   rm -rf /var/lib/apt/lists/*
+
+# Move tone executable to appropriate directory
+COPY --from=sandreas/tone:v0.1.5 /usr/local/bin/tone /usr/local/bin/

.devcontainer/dev.js

@@ -5,6 +5,5 @@ 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": "20"
+			"VARIANT": "16"
 		}
 	},
 	"mounts": [

.dockerignore

@@ -3,6 +3,9 @@ node_modules
 npm-debug.log
 .git
 .gitignore
+.devcontainer/
+.github/
+.vscode/
 /config
 /audiobooks
 /audiobooks2
@@ -13,4 +16,5 @@ test/
 /client/.nuxt/
 /client/dist/
 /dist/
+/build/
 /deploy/

.editorconfig

@@ -1,8 +0,0 @@
-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,50 +1,40 @@
 name: 🐞 Bug Report
-description: File a bug/issue and help us improve Audiobookshelf
+description: File a bug/issue
-title: '[Bug]: '
+title: "[Bug]: "
-labels: ['bug', 'triage']
+labels: ["bug", "triage"]
 body:
   - type: markdown
     attributes:
-      value: 'Thank you for filing a bug report! 🐛'
+      value: "### Please first search for your issue and check the [docs](https://audiobookshelf.org/docs)."
   - type: markdown
     attributes:
-      value: 'Please first search for your issue and check the [docs](https://audiobookshelf.org/docs).'
+      value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
   - type: markdown
     attributes:
-      value: 'Report issues with the mobile app [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose).'
+      value: "### Join the [discord server](https://discord.gg/pJsjuNCKRq) for questions or if you are not sure about a bug."
   - type: markdown
     attributes:
-      value: 'Join the [discord server](https://discord.gg/HQgCbd6E75) for questions or if you are not sure about a bug.'
+      value: "## Be as descriptive as you can. Include screenshots, error logs, browser, file types, everything you can think of that might be relevant."
   - type: textarea
     id: what-happened
     attributes:
-      label: What happened?
+      label: Describe the issue
-      placeholder: Tell us what you see!
+      description: What happened & what did you expect to happen
-    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
@@ -54,45 +44,7 @@ body:
       options:
         - Docker
         - Debian/PPA
-        - Windows Tray App
         - Built from source
-        - Other (list in "Additional Notes" box)
+        - Other
     validations:
-      required: true
+     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/HQgCbd6E75
+    url: https://discord.gg/pJsjuNCKRq
     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,63 +1,17 @@
 name: 🚀 Feature Request
 description: Request a feature/enhancement
-title: '[Enhancement]: '
+title: "[Enhancement]: "
-labels: ['enhancement']
+labels: ["enhancement"]
 body:
   - type: markdown
     attributes:
-      value: '#### *Mobile app features should be [requested here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)*.'
+      value: "### Please first search in both issues & discussions for your enhancement."
   - type: markdown
     attributes:
-      value: '## Web/Server Feature Request Description'
+      value: "### Mobile app features should be requested [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
-  - 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

@@ -1,65 +0,0 @@
-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
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
           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

@@ -1,30 +0,0 @@
-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.3.0
-        with:
-          directory: 'client/strings/' # Adjust the directory path as needed

.github/workflows/integration-test.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
   push:
     branches-ignore:
-      - 'dependabot/**' # Don't run dependabot branches, as they are already covered by pull requests
+      - 'dependabot/**'  # Don't run dependabot branches, as they are already covered by pull requests
 
 jobs:
   build:
@@ -16,10 +16,10 @@ jobs:
       - name: setup nade
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 16
 
-      - name: install pkg (using yao-pkg fork for targetting node20)
+      - name: install pkg
-        run: npm install -g @yao-pkg/pkg
+        run: npm install -g pkg
 
       - name: get client dependencies
         working-directory: client
@@ -33,7 +33,7 @@ jobs:
         run: npm ci --only=production
 
       - name: build binary
-        run: pkg -t node20-linux-x64 -o audiobookshelf .
+        run: pkg -t node18-linux-x64 -o audiobookshelf .
 
       - name: run audiobookshelf
         run: |

.github/workflows/lint-openapi.yml

@@ -1,30 +0,0 @@
-name: API linting
-
-# Run on pull requests or pushes when there is a change to the OpenAPI file
-on:
-  push:
-    paths:
-      - docs/
-  pull_request:
-    paths:
-      - docs/
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      # Check out the repository
-      - name: Checkout
-        uses: actions/checkout@v4
-      # Set up node to run the javascript
-      - name: Set up node
-        uses: actions/setup-node@v4
-      # Install Redocly CLI
-      - name: Install Redocly CLI
-        run: npm install -g @redocly/cli@latest
-      # Perform linting for exploded spec
-      - name: Run linting for exploded spec
-        run: redocly lint docs/root.yaml --format=github-actions
-      # Perform linting for bundled spec
-      - name: Run linting for bundled spec
-        run: redocly lint docs/openapi.json --format=github-actions

.github/workflows/notify-abs-windows.yml

@@ -1,17 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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,16 +7,11 @@
 /podcasts/
 /media/
 /metadata/
+test/
 /client/.nuxt/
 /client/dist/
 /dist/
 /deploy/
-/coverage/
-/.nyc_output/
-/ffmpeg*
-/ffprobe*
 
 sw.*
 .DS_STORE
-.idea/*
-tailwind.compiled.css

.prettierrc

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -16,12 +16,5 @@
   },
   "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,34 +1,43 @@
 ### STAGE 0: Build client ###
-FROM node:20-alpine AS build
+FROM node:16-alpine AS build
 WORKDIR /client
-COPY /client /client
+
+COPY /client/package*.json /client/
 RUN npm ci && npm cache clean --force
-RUN npm run generate
+
+COPY /client /client
+RUN npm run build
 
 ### STAGE 1: Build server ###
-FROM node:20-alpine
+FROM sandreas/tone:v0.1.5 AS tone
+FROM node:16-alpine
+
+WORKDIR /app
 
 ENV NODE_ENV=production
-
 RUN apk update && \
     apk add --no-cache --update \
     curl \
     tzdata \
-    ffmpeg \
+    ffmpeg
-    make \
-    python3 \
-    g++ \
-    tini
 
-COPY --from=build /client/dist /client/dist
+COPY --from=tone /usr/local/bin/tone /usr/local/bin/
-COPY index.js package* /
+COPY package* ./
+COPY --from=build /client/package*.json client/
+
+RUN npm ci --omit=dev
+RUN cd client && npm ci --omit=dev && cd ..
+
+COPY index.js package* ./
 COPY server server
-
+COPY --from=build /client/nuxt.config.js* client/
-RUN npm ci --only=production
+COPY --from=build /client/.nuxt client/.nuxt
-
+COPY --from=build /client/modules client/modules
-RUN apk del make python3 g++
 
 EXPOSE 80
-
+HEALTHCHECK \
-ENTRYPOINT ["tini", "--"]
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/healthcheck || exit 1
 CMD ["node", "index.js"]

build/debian/DEBIAN/preinst

@@ -50,6 +50,7 @@ install_ffmpeg() {
   echo "Starting FFMPEG Install"
 
   WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz --output-document=ffmpeg-git-amd64-static.tar.xz"
+  WGET_TONE="wget https://github.com/sandreas/tone/releases/download/v0.1.5/tone-0.1.5-linux-x64.tar.gz --output-document=tone-0.1.5-linux-x64.tar.gz"
 
   if ! cd "$FFMPEG_INSTALL_DIR"; then
     echo "Creating ffmpeg install dir at $FFMPEG_INSTALL_DIR"
@@ -59,10 +60,16 @@ install_ffmpeg() {
   fi
 
   $WGET
-  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1 --no-same-owner
+  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
   rm ffmpeg-git-amd64-static.tar.xz
 
-  echo "Good to go on Ffmpeg... hopefully"
+  # Temp downloading tone library to the ffmpeg dir
+  echo "Getting tone.."
+  $WGET_TONE
+  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1
+  rm tone-0.1.5-linux-x64.tar.gz
+
+  echo "Good to go on Ffmpeg (& tone)... hopefully"
 }
 
 setup_config() {
@@ -70,6 +77,12 @@ setup_config() {
     echo "Existing config found."
     cat $CONFIG_PATH
 
+    # TONE_PATH variable added in 2.1.6, if it doesnt exist then add it
+    if ! grep -q "TONE_PATH" "$CONFIG_PATH"; then
+      echo "Adding TONE_PATH to existing config"
+      echo "TONE_PATH=$FFMPEG_INSTALL_DIR/tone" >> "$CONFIG_PATH"
+    fi
+
   else
 
     if [ ! -d "$DEFAULT_DATA_DIR" ]; then
@@ -85,6 +98,7 @@ setup_config() {
 CONFIG_PATH=$DEFAULT_DATA_DIR/config
 FFMPEG_PATH=$FFMPEG_INSTALL_DIR/ffmpeg
 FFPROBE_PATH=$FFMPEG_INSTALL_DIR/ffprobe
+TONE_PATH=$FFMPEG_INSTALL_DIR/tone
 PORT=$DEFAULT_PORT
 HOST=$DEFAULT_HOST"
 

build/linuxpackager

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

client/assets/app.css

@@ -5,7 +5,7 @@
 @import './absicons.css';
 
 :root {
-  --bookshelf-texture-img: url(/textures/wood_default.jpg);
+  --bookshelf-texture-img: url(~static//textures/wood_default.jpg);
   --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
 }
 
@@ -30,7 +30,8 @@
 }
 
 .bookshelf-row {
-  width: calc(100vw - (100vw - 100%));
+  /* Sidebar width + scrollbar width */
+  width: calc(100vw - 88px);
 }
 
 @media (max-width: 768px) {
@@ -111,7 +112,7 @@ input[type=number] {
   background-color: #373838;
 }
 
-.tracksTable tr:hover:not(:has(th)) {
+.tracksTable tr:hover {
   background-color: #474747;
 }
 
@@ -216,6 +217,22 @@ 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;
+}
+
+
 /* 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;
@@ -227,24 +244,4 @@ 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,7 +24,6 @@
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
-  vertical-align: top;
 }
 
 .material-icons:not([class*="text-"]) {

client/assets/tailwind.css

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

client/components/app/Appbar.vue

@@ -7,7 +7,7 @@
         </nuxt-link>
 
         <nuxt-link to="/">
-          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
+          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
         </nuxt-link>
 
         <ui-libraries-dropdown class="mr-2" />
@@ -15,6 +15,8 @@
         <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
         <div class="flex-grow" />
 
+        <widgets-notification-widget class="hidden md:block" />
+
         <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
           <span class="material-icons-outlined text-2xl text-warning text-opacity-50"> cast </span>
         </ui-tooltip>
@@ -22,8 +24,6 @@
           <google-cast-launcher></google-cast-launcher>
         </div>
 
-        <widgets-notification-widget class="hidden md:block" />
-
         <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
             <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
@@ -149,6 +149,9 @@ export default {
     processingBatch() {
       return this.$store.state.processingBatch
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     isChromecastEnabled() {
       return this.$store.getters['getServerSetting']('chromecastEnabled')
     },
@@ -175,18 +178,13 @@ export default {
         })
       }
 
-      options.push({
-        text: 'Re-Scan',
-        action: 'rescan'
-      })
-
       return options
     }
   },
   methods: {
     requestBatchQuickEmbed() {
       const payload = {
-        message: this.$strings.MessageConfirmQuickEmbed,
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
@@ -208,39 +206,13 @@ export default {
       }
       this.$store.commit('globals/setConfirmPrompt', payload)
     },
-    contextMenuAction({ action }) {
+    contextMenuAction(action) {
       if (action === 'quick-embed') {
         this.requestBatchQuickEmbed()
       } else if (action === 'quick-match') {
         this.batchAutoMatchClick()
-      } else if (action === 'rescan') {
-        this.batchRescan()
       }
     },
-    async batchRescan() {
-      const payload = {
-        message: this.$getString('MessageConfirmReScanLibraryItems', [this.selectedMediaItems.length]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/items/batch/scan`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                console.log('Batch Re-Scan started')
-                this.cancelSelectionMode()
-              })
-              .catch((error) => {
-                console.error('Batch Re-Scan failed', error)
-                const errorMsg = error.response.data || 'Failed to batch re-scan'
-                this.$toast.error(errorMsg)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
     async playSelectedItems() {
       this.$store.commit('setProcessingBatch', true)
 
@@ -303,28 +275,26 @@ export default {
       this.$axios
         .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
         .then(() => {
-          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.$toast.success('Batch update success!')
           this.$store.commit('setProcessingBatch', false)
           this.$store.commit('globals/resetSelectedMediaItems', [])
           this.$eventBus.$emit('bookshelf_clear_selection')
         })
         .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          this.$toast.error('Batch update failed')
           console.error('Failed to batch update read/not read', error)
           this.$store.commit('setProcessingBatch', false)
         })
     },
     batchDeleteClick() {
       const payload = {
-        message: this.$getString('MessageConfirmDeleteLibraryItems', [this.numMediaItemsSelected]),
+        message: `This will delete ${this.numMediaItemsSelected} library items from the database and your file system. Are you sure?`,
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
         yesButtonText: this.$strings.ButtonDelete,
         yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
+        checkboxDefaultValue: true,
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
             this.$store.commit('setProcessingBatch', true)
 
             this.$axios

client/components/app/BookShelfCategorized.vue

@@ -1,30 +1,42 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
+  <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 right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
 
     <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">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+      <p class="text-center text-2xl mb-4 py-4">{{ libraryName }} Library is empty!</p>
       <div v-if="userIsAdminOrUp" class="flex">
-        <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
-        <ui-btn color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Library</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">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
+      <p class="text-center text-xl py-4">No results for query</p>
     </div>
     <!-- Alternate plain view -->
-    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
-      <template v-for="(shelf, index) in supportedShelves">
+      <template v-for="(shelf, index) in shelves">
-        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
+        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
+        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-episode-slider>
+        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-series-slider>
+        <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-authors-slider>
+        <widgets-narrators-slider v-else-if="shelf.type === 'narrators'" :key="index + '.'" :items="shelf.entities" :height="100 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-narrators-slider>
       </template>
     </div>
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
-      <template v-for="(shelf, index) in supportedShelves">
+      <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" @selectEntity="(payload) => selectEntity(payload, index)" />
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening'" @selectEntity="(payload) => selectEntity(payload, index)" />
       </template>
     </div>
   </div>
@@ -46,23 +58,19 @@ export default {
       scannerParseSubtitle: false,
       wrapperClientWidth: 0,
       shelves: [],
-      lastItemIndexSelected: -1,
+      lastItemIndexSelected: -1
-      tempIsScanning: false
     }
   },
   computed: {
-    supportedShelves() {
-      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
-    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
@@ -81,16 +89,11 @@ export default {
       return this.coverAspectRatio == 1
     },
     sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.bookCoverWidth / baseSize
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    isScanningLibrary() {
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
     }
   },
   methods: {
@@ -168,7 +171,7 @@ export default {
     },
     async fetchCategories() {
       const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share`)
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed`)
         .then((data) => {
           return data
         })
@@ -267,15 +270,14 @@ 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(this.$strings.ToastLibraryScanFailedToStart)
+          this.$toast.error('Failed to start scan')
-        })
-        .finally(() => {
-          this.tempIsScanning = false
         })
     },
     userUpdated(user) {
@@ -284,8 +286,7 @@ export default {
       }
       if (user.mediaProgress.length) {
         const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-listening')
+        this.removeItemsFromContinueListening(mediaProgressToHide)
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-reading')
       }
     },
     libraryItemAdded(libraryItem) {
@@ -335,16 +336,9 @@ export default {
     },
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
-
+      // TODO: Check if audiobook would be on this shelf
-      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
+      if (!this.search) {
-      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) {
@@ -352,12 +346,6 @@ export default {
         this.libraryItemUpdated(li)
       })
     },
-    episodeAdded(episodeWithLibraryItem) {
-      const isThisLibrary = episodeWithLibraryItem.libraryItem?.libraryId === this.currentLibraryId
-      if (!this.search && isThisLibrary) {
-        this.fetchCategories()
-      }
-    },
     removeAllSeriesFromContinueSeries(seriesIds) {
       this.shelves.forEach((shelf) => {
         if (shelf.type == 'book' && shelf.id == 'continue-series') {
@@ -369,8 +357,8 @@ export default {
         }
       })
     },
-    removeItemsFromContinueListeningReading(mediaProgressItems, categoryId) {
+    removeItemsFromContinueListening(mediaProgressItems) {
-      const continueListeningShelf = this.shelves.find((s) => s.id === categoryId)
+      const continueListeningShelf = this.shelves.find((s) => s.id === 'continue-listening')
       if (continueListeningShelf) {
         if (continueListeningShelf.type === 'book') {
           continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
@@ -385,6 +373,17 @@ export default {
           })
         }
       }
+      // this.shelves.forEach((shelf) => {
+      //   if (shelf.id == 'continue-listening') {
+      //     if (shelf.type == 'book') {
+      //       // Filter out books from continue listening shelf
+      //       shelf.entities = shelf.entities.filter((ent) => {
+      //         if (mediaProgressItems.some(mp => mp.libraryItemId === ent.id)) return false
+      //         return true
+      //       })
+      //     }
+      //   }
+      // })
     },
     authorUpdated(author) {
       this.shelves.forEach((shelf) => {
@@ -408,36 +407,6 @@ export default {
         }
       })
     },
-    shareOpen(mediaItemShare) {
-      this.shelves.forEach((shelf) => {
-        if (shelf.type == 'book') {
-          shelf.entities = shelf.entities.map((ent) => {
-            if (ent.media.id === mediaItemShare.mediaItemId) {
-              return {
-                ...ent,
-                mediaItemShare
-              }
-            }
-            return ent
-          })
-        }
-      })
-    },
-    shareClosed(mediaItemShare) {
-      this.shelves.forEach((shelf) => {
-        if (shelf.type == 'book') {
-          shelf.entities = shelf.entities.map((ent) => {
-            if (ent.media.id === mediaItemShare.mediaItemId) {
-              return {
-                ...ent,
-                mediaItemShare: null
-              }
-            }
-            return ent
-          })
-        }
-      })
-    },
     initListeners() {
       if (this.$root.socket) {
         this.$root.socket.on('user_updated', this.userUpdated)
@@ -448,9 +417,6 @@ export default {
         this.$root.socket.on('item_removed', this.libraryItemRemoved)
         this.$root.socket.on('items_updated', this.libraryItemsUpdated)
         this.$root.socket.on('items_added', this.libraryItemsAdded)
-        this.$root.socket.on('episode_added', this.episodeAdded)
-        this.$root.socket.on('share_open', this.shareOpen)
-        this.$root.socket.on('share_closed', this.shareClosed)
       } else {
         console.error('Error socket not initialized')
       }
@@ -465,9 +431,6 @@ export default {
         this.$root.socket.off('item_removed', this.libraryItemRemoved)
         this.$root.socket.off('items_updated', this.libraryItemsUpdated)
         this.$root.socket.off('items_added', this.libraryItemsAdded)
-        this.$root.socket.off('episode_added', this.episodeAdded)
-        this.$root.socket.off('share_open', this.shareOpen)
-        this.$root.socket.off('share_closed', this.shareClosed)
       } else {
         console.error('Error socket not initialized')
       }

client/components/app/BookShelfRow.vue

@@ -1,53 +1,67 @@
 <template>
   <div class="relative">
-    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll no-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft + 'em' }" @scroll="scrolled">
+    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
-      <div class="w-full h-full pt-6e">
+      <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" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <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" />
           </template>
         </div>
         <div v-if="shelf.type === 'episode'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
+            <cards-lazy-book-card
+              :key="entity.recentEpisode.id"
+              :ref="`shelf-episode-${entity.recentEpisode.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"
+              @editPodcast="editItem"
+              @edit="editEpisode"
+            />
           </template>
         </div>
         <div v-if="shelf.type === 'series'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'tags'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
+            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
+            <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
           </template>
         </div>
         <div v-if="shelf.type === 'narrators'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2e" />
+            <cards-narrator-card :key="entity.name" :width="150" :height="100" :narrator="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" />
           </template>
         </div>
       </div>
     </div>
-    <div class="relative">
-      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
-        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
-          <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </div>
-      </div>
 
-      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
+    <div class="absolute text-center categoryPlacard transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
+        <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
+      </div>
     </div>
-    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
+
-      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
+    <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
+
+    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
+      <span class="material-icons text-6xl text-white">chevron_left</span>
     </div>
-    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
+    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
-      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
+      <span class="material-icons text-6xl text-white">chevron_right</span>
     </div>
   </div>
 </template>
@@ -60,6 +74,9 @@ export default {
       type: Object,
       default: () => {}
     },
+    sizeMultiplier: Number,
+    bookCoverWidth: Number,
+    bookCoverAspectRatio: Number,
     continueListeningShelf: Boolean
   },
   data() {
@@ -72,8 +89,12 @@ export default {
     }
   },
   computed: {
-    sizeMultiplier() {
+    bookCoverHeight() {
-      return this.$store.getters['user/getSizeMultiplier']
+      return this.bookCoverWidth * this.bookCoverAspectRatio
+    },
+    shelfHeight() {
+      if (this.shelf.type === 'narrators') return 148
+      return this.bookCoverHeight + 48
     },
     paddingLeft() {
       if (window.innerWidth < 768) return 1
@@ -197,13 +218,13 @@ export default {
 }
 
 .book-shelf-arrow-right {
-  height: calc(100% - 1.5em);
+  height: calc(100% - 24px);
   background: rgb(48, 48, 48);
   background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
 .book-shelf-arrow-left {
-  height: calc(100% - 1.5em);
+  height: calc(100% - 24px);
   background: rgb(48, 48, 48);
   background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
-</style>
+</style>

client/components/app/BookShelfToolbar.vue

@@ -22,10 +22,6 @@
           <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>
@@ -40,7 +36,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.ButtonAdd }}</p>
+        <p class="text-sm">{{ $strings.ButtonSearch }}</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">
@@ -85,8 +81,6 @@
 
         <!-- issues page remove all button -->
         <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
-
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">
@@ -98,9 +92,6 @@
       <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>
@@ -186,30 +177,6 @@ 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']
     },
@@ -219,9 +186,6 @@ export default {
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -312,33 +276,10 @@ export default {
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    contextMenuItems() {
-      const items = []
-
-      if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
-        items.push({
-          text: 'Export OPML',
-          action: 'export-opml'
-        })
-      }
-
-      return items
-    },
-    showPlaylists() {
-      return this.$store.state.libraries.numUserPlaylists > 0
     }
   },
   methods: {
-    contextMenuAction({ action }) {
+    seriesContextMenuAction(action) {
-      if (action === 'export-opml') {
-        this.exportOPML()
-      }
-    },
-    exportOPML() {
-      this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
-    },
-    seriesContextMenuAction({ action }) {
       if (action === 'open-rss-feed') {
         this.showOpenSeriesRSSFeed()
       } else if (action === 're-add-to-continue-listening') {
@@ -482,9 +423,6 @@ export default {
     updateCollapseBookSeries() {
       this.saveSettings()
     },
-    updateAuthorSort() {
-      this.saveSettings()
-    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },

client/components/app/ConfigSideNav.vue

@@ -14,10 +14,10 @@
     </div>
 
     <div class="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
-      <div class="flex items-center justify-between">
+      <div class="flex justify-between">
-        <button type="button" class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</button>
+        <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>
 
-        <p class="text-xs text-gray-300 italic">{{ Source }}</p>
+        <p class="font-mono text-xs text-gray-300 italic">{{ Source }}</p>
       </div>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </div>
@@ -90,25 +90,10 @@ export default {
           title: this.$strings.HeaderNotifications,
           path: '/config/notifications'
         },
-        {
-          id: 'config-email',
-          title: this.$strings.HeaderEmail,
-          path: '/config/email'
-        },
         {
           id: 'config-item-metadata-utils',
           title: this.$strings.HeaderItemMetadataUtils,
           path: '/config/item-metadata-utils'
-        },
-        {
-          id: 'config-rss-feeds',
-          title: this.$strings.HeaderRSSFeeds,
-          path: '/config/rss-feeds'
-        },
-        {
-          id: 'config-authentication',
-          title: this.$strings.HeaderAuthentication,
-          path: '/config/authentication'
         }
       ]
 

client/components/app/LazyBookshelf.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
+  <div id="bookshelf" class="w-full overflow-y-auto">
     <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
       </div>
     </template>
 
@@ -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" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn color="success" class="w-52" @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 right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
   </div>
 </template>
 
@@ -49,9 +49,10 @@ export default {
       entityIndexesMounted: [],
       entityComponentRefs: {},
       currentBookWidth: 0,
+      pageLoadQueue: [],
       isFetchingEntities: false,
       scrollTimeout: null,
-      booksPerFetch: 0,
+      booksPerFetch: 100,
       totalShelves: 0,
       bookshelfMarginLeft: 0,
       isSelectionMode: false,
@@ -61,11 +62,7 @@ export default {
       currScrollTop: 0,
       resizeTimeout: null,
       mountWindowWidth: 0,
-      lastItemIndexSelected: -1,
+      lastItemIndexSelected: -1
-      tempIsScanning: false,
-      cardWidth: 0,
-      cardHeight: 0,
-      resizeObserver: null
     }
   },
   watch: {
@@ -81,6 +78,9 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     libraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -162,46 +162,52 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
     bookWidth() {
-      return this.cardWidth
+      const coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
+      return coverSize
     },
     bookHeight() {
-      return this.cardHeight
+      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
+      return this.bookWidth * 1.6
     },
     shelfPadding() {
-      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
+      if (this.bookshelfWidth < 640) return 32
-      return 64 * this.sizeMultiplier
+      return 64
     },
     totalPadding() {
       return this.shelfPadding * 2
     },
     entityWidth() {
-      return this.cardWidth
+      if (this.entityName === 'series' || this.entityName === 'collections') {
+        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
+        return this.bookWidth * 2
+      }
+      return this.bookWidth
     },
     entityHeight() {
-      return this.cardHeight
+      return this.bookHeight
     },
-    shelfPaddingHeight() {
+    shelfDividerHeightIndex() {
-      return 16
+      return 6
     },
     shelfHeight() {
-      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
+      if (this.isAlternativeBookshelfView) {
-      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
+        const isItemEntity = this.entityName === 'series-books' || this.entityName === 'items'
+        const extraTitleSpace = isItemEntity ? 80 : this.entityName === 'albums' ? 60 : 40
+        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
+      }
+      return this.entityHeight + 40
     },
     totalEntityCardWidth() {
       // Includes margin
-      return this.entityWidth + 24 * this.sizeMultiplier
+      return this.entityWidth + 24
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
     },
     sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+      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: {
@@ -310,12 +316,12 @@ export default {
         this.currentSFQueryString = this.buildSearchParams()
       }
 
-      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
+      const entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
       const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete,share`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed`
 
       const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
-        console.error('failed to fetch items', error)
+        console.error('failed to fetch books', error)
         return null
       })
 
@@ -426,14 +432,10 @@ export default {
     rebuild() {
       this.initSizeData()
 
-      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
       this.entityIndexesMounted = []
       for (let i = 0; i < lastBookIndex; i++) {
         this.entityIndexesMounted.push(i)
-        if (!this.entities[i]) {
-          const page = Math.floor(i / this.booksPerFetch)
-          this.loadPage(page)
-        }
       }
       var bookshelfEl = document.getElementById('bookshelf')
       if (bookshelfEl) {
@@ -495,8 +497,7 @@ export default {
         this.resetEntities()
       }
     },
-    async settingsUpdated(settings) {
+    settingsUpdated(settings) {
-      await this.cardsHelpers.setCardSize()
       const wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
         this.resetEntities()
@@ -601,44 +602,6 @@ export default {
         this.executeRebuild()
       }
     },
-    shareOpen(mediaItemShare) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
-        if (indexOf >= 0) {
-          if (this.entityComponentRefs[indexOf]) {
-            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
-            libraryItem.mediaItemShare = mediaItemShare
-            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
-          }
-        }
-      }
-    },
-    shareClosed(mediaItemShare) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
-        if (indexOf >= 0) {
-          if (this.entityComponentRefs[indexOf]) {
-            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
-            libraryItem.mediaItemShare = null
-            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
-          }
-        }
-      }
-    },
-    updatePagesLoaded() {
-      let numPages = Math.ceil(this.totalEntities / this.booksPerFetch)
-      for (let page = 0; page < numPages; page++) {
-        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
-        this.pagesLoaded[page] = true
-        for (let i = 0; i < numEntities; i++) {
-          const index = page * this.booksPerFetch + i
-          if (!this.entities[index]) {
-            this.pagesLoaded[page] = false
-            break
-          }
-        }
-      }
-    },
     initSizeData(_bookshelf) {
       var bookshelf = _bookshelf || document.getElementById('bookshelf')
       if (!bookshelf) {
@@ -655,13 +618,6 @@ export default {
       this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
       this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
       this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
-      const booksPerFetch = this.entitiesPerShelf * this.shelvesPerPage
-      if (booksPerFetch !== this.booksPerFetch) {
-        this.booksPerFetch = booksPerFetch
-        if (this.totalEntities) {
-          this.updatePagesLoaded()
-        }
-      }
 
       this.currentBookWidth = this.bookWidth
       if (this.totalEntities) {
@@ -670,8 +626,8 @@ export default {
       return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
     },
     async init(bookshelf) {
-      this.initSizeData(bookshelf)
       this.checkUpdateSearchParams()
+      this.initSizeData(bookshelf)
 
       this.pagesLoaded[0] = true
       await this.fetchEntites(0)
@@ -727,8 +683,6 @@ export default {
         this.$root.socket.on('playlist_added', this.playlistAdded)
         this.$root.socket.on('playlist_updated', this.playlistUpdated)
         this.$root.socket.on('playlist_removed', this.playlistRemoved)
-        this.$root.socket.on('share_open', this.shareOpen)
-        this.$root.socket.on('share_closed', this.shareClosed)
       } else {
         console.error('Bookshelf - Socket not initialized')
       }
@@ -756,8 +710,6 @@ export default {
         this.$root.socket.off('playlist_added', this.playlistAdded)
         this.$root.socket.off('playlist_updated', this.playlistUpdated)
         this.$root.socket.off('playlist_removed', this.playlistRemoved)
-        this.$root.socket.off('share_open', this.shareOpen)
-        this.$root.socket.off('share_closed', this.shareClosed)
       } else {
         console.error('Bookshelf - Socket not initialized')
       }
@@ -770,20 +722,18 @@ 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(this.$strings.ToastLibraryScanFailedToStart)
+          this.$toast.error('Failed to start scan')
-        })
-        .finally(() => {
-          this.tempIsScanning = false
         })
     }
   },
-  async mounted() {
+  mounted() {
-    await this.cardsHelpers.setCardSize()
     this.initListeners()
 
     this.routeFullPath = window.location.pathname + (window.location.search || '')
@@ -818,6 +768,6 @@ export default {
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: var(--bookshelf-divider-bg);
-  box-shadow: 0.125em 0.875em 0.5em #111111aa;
+  box-shadow: 2px 14px 8px #111111aa;
 }
-</style>
+</style>

client/components/app/SettingsContent.vue

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

client/components/app/SideRail.vue

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

client/components/app/StreamContainer.vue

@@ -1,25 +1,25 @@
 <template>
-  <div v-if="streamLibraryItem" id="mediaPlayerContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
+  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
-    <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
-      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </div>
+    </nuxt-link>
-    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0 w-full">
+      <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">
-          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
+          {{ title }}
-            {{ title }}
+        </nuxt-link>
-          </nuxt-link>
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
-          <widgets-explicit-indicator v-if="isExplicit" />
-        </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
           <span class="material-icons text-sm">person</span>
-          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+          <div class="flex items-center">
-          <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
-          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
+            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
-            <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 v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
+              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" 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 v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
         </div>
 
         <div class="text-gray-400 flex items-center">
@@ -29,7 +29,7 @@
       </div>
       <div class="flex-grow" />
       <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
-        <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>
+        <span class="material-icons sm:px-2 py-1 md:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</span>
       </ui-tooltip>
     </div>
     <player-ui
@@ -82,11 +82,13 @@ 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
     },
@@ -136,7 +138,7 @@ export default {
       return this.streamLibraryItem?.mediaType === 'music'
     },
     isExplicit() {
-      return !!this.mediaMetadata.explicit
+      return this.mediaMetadata.explicit || false
     },
     mediaMetadata() {
       return this.media.metadata || {}
@@ -266,10 +268,6 @@ export default {
     seek(time) {
       this.playerHandler.seek(time)
     },
-    playbackTimeUpdate(time) {
-      // When updating progress from another session
-      this.playerHandler.seek(time, false)
-    },
     setCurrentTime(time) {
       this.currentTime = time
       if (this.$refs.audioPlayer) {
@@ -347,7 +345,7 @@ export default {
       }
 
       if ('mediaSession' in navigator) {
-        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png', true)
+        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png')
         const artwork = [
           {
             src: coverImageSrc
@@ -368,8 +366,9 @@ export default {
         navigator.mediaSession.setActionHandler('seekbackward', this.mediaSessionSeekBackward)
         navigator.mediaSession.setActionHandler('seekforward', this.mediaSessionSeekForward)
         navigator.mediaSession.setActionHandler('seekto', this.mediaSessionSeekTo)
-        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionSeekBackward)
+        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionPreviousTrack)
-        navigator.mediaSession.setActionHandler('nexttrack', this.mediaSessionSeekForward)
+        const hasNextChapter = this.$refs.audioPlayer && this.$refs.audioPlayer.hasNextChapter
+        navigator.mediaSession.setActionHandler('nexttrack', hasNextChapter ? this.mediaSessionNextTrack : null)
       } else {
         console.warn('Media session not available')
       }
@@ -378,7 +377,7 @@ export default {
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === data.stream) {
         if (!data.numSegments) return
         var chunks = data.chunks
-        console.log(`[MediaPlayerContainer] Stream Progress ${data.percent}`)
+        console.log(`[StreamContainer] Stream Progress ${data.percent}`)
         if (this.$refs.audioPlayer) {
           this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
         } else {
@@ -395,17 +394,17 @@ export default {
       this.playerHandler.prepareOpenSession(session, this.currentPlaybackRate)
     },
     streamOpen(session) {
-      console.log(`[MediaPlayerContainer] Stream session open`, session)
+      console.log(`[StreamContainer] Stream session open`, session)
     },
     streamClosed(streamId) {
       // Stream was closed from the server
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[MediaPlayerContainer] Closing stream due to request from server')
+        console.warn('[StreamContainer] Closing stream due to request from server')
         this.playerHandler.closePlayer()
       }
     },
     streamReady() {
-      console.log(`[MediaPlayerContainer] Stream Ready`)
+      console.log(`[StreamContainer] Stream Ready`)
       if (this.$refs.audioPlayer) {
         this.$refs.audioPlayer.setStreamReady()
       } else {
@@ -415,7 +414,7 @@ export default {
     streamError(streamId) {
       // Stream had critical error from the server
       if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[MediaPlayerContainer] Closing stream due to stream error from server')
+        console.warn('[StreamContainer] Closing stream due to stream error from server')
         this.playerHandler.closePlayer()
       }
     },
@@ -455,9 +454,6 @@ 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()
       })
@@ -482,14 +478,12 @@ export default {
   mounted() {
     this.$eventBus.$on('cast-session-active', this.castSessionActive)
     this.$eventBus.$on('playback-seek', this.seek)
-    this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
     this.$eventBus.$on('play-item', this.playLibraryItem)
     this.$eventBus.$on('pause-item', this.pauseItem)
   },
   beforeDestroy() {
     this.$eventBus.$off('cast-session-active', this.castSessionActive)
     this.$eventBus.$off('playback-seek', this.seek)
-    this.$eventBus.$off('playback-time-update', this.playbackTimeUpdate)
     this.$eventBus.$off('play-item', this.playLibraryItem)
     this.$eventBus.$off('pause-item', this.pauseItem)
   }
@@ -497,7 +491,7 @@ export default {
 </script>
 
 <style>
-#mediaPlayerContainer {
+#streamContainer {
   box-shadow: 0px -6px 8px #1111113f;
 }
 </style>

client/components/cards/AuthorCard.vue

@@ -1,40 +1,38 @@
 <template>
-  <div :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+  <nuxt-link :to="`/author/${author.id}`">
-    <nuxt-link :to="`/author/${author.id}`">
+    <div @mouseover="mouseover" @mouseleave="mouseleave">
-      <div cy-id="card" @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: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <!-- Image or placeholder -->
-          <!-- Image or placeholder -->
+        <covers-author-image :author="author" />
-          <covers-author-image :author="author" />
 
-          <!-- Author name & num books overlay -->
+        <!-- Author name & num books overlay -->
-          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+        <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
+          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
-          </div>
-
-          <!-- Search icon btn -->
-          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e 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" :style="{ fontSize: 1.125 + 'em' }">search</span>
-            </ui-tooltip>
-          </div>
-          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e 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" :style="{ fontSize: 1.125 + 'em' }">edit</span>
-            </ui-tooltip>
-          </div>
-
-          <!-- Loading spinner -->
-          <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 cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
+
-          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+        <!-- 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">
+          <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)">
+          <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">
+          <widgets-loading-spinner size="" />
         </div>
       </div>
-    </nuxt-link>
+      <div v-show="nameBelow" class="w-full py-1 px-2">
-  </div>
+        <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+      </div>
+    </div>
+  </nuxt-link>
 </template>
 
 <script>
@@ -45,14 +43,12 @@ export default {
       default: () => {}
     },
     width: Number,
-    height: {
+    height: Number,
+    sizeMultiplier: {
       type: Number,
-      default: 192
+      default: 1
     },
-    nameBelow: {
+    nameBelow: Boolean
-      type: Boolean,
-      default: false
-    }
   },
   data() {
     return {
@@ -61,12 +57,6 @@ export default {
     }
   },
   computed: {
-    cardWidth() {
-      return this.width || this.cardHeight * 0.8
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
-    },
     userToken() {
       return this.$store.getters['user/getToken']
     },
@@ -93,9 +83,6 @@ export default {
     },
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {
@@ -141,4 +128,4 @@ export default {
     this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
   }
 }
-</script>
+</script>

client/components/cards/BookMatchCard.vue

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

client/components/cards/GroupCard.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="relative">
-    <div class="rounded-sm h-full relative" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
+    <div class="rounded-sm h-full relative" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" class="cursor-pointer">
         <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'">
-          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="cardWidth" :height="cardHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
           <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 z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
             <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
-          <div class="absolute z-10 top-1.5e right-1.5e rounded-md leading-3e p-1e font-semibold text-white flex items-center justify-center" :style="{ fontSize: 0.8 + 'em' }" style="background-color: #cd9d49dd">{{ bookItems.length }}</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">{{ bookItems.length }}</div>
         </div>
       </nuxt-link>
     </div>
@@ -24,10 +24,8 @@ export default {
       default: () => null
     },
     width: Number,
-    height: {
+    height: Number,
-      type: Number,
+    bookCoverAspectRatio: Number
-      default: 192
-    }
   },
   data() {
     return {
@@ -35,15 +33,6 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.cardHeight * 2
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -57,7 +46,8 @@ export default {
       return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
     },
     sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
     },
     bookItems() {
       return this._group.books || []
@@ -88,4 +78,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/ItemSearchCard.vue

@@ -5,9 +5,9 @@
       <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
       <p v-else class="truncate text-sm" v-html="matchHtml" />
 
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300" v-html="matchHtml" />
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
 
-      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
+      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ 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" />
@@ -61,6 +61,7 @@ export default {
     },
     matchHtml() {
       if (!this.matchText || !this.search) return ''
+      if (this.matchKey === 'subtitle') return ''
 
       // This used to highlight the part of the search found
       //        but with removing commas periods etc this is no longer plausible
@@ -68,8 +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>`
@@ -90,4 +90,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
+</style>

client/components/cards/ItemTaskRunningCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex items-center px-1 overflow-hidden">
+  <div class="flex items-center h-full px-1 overflow-hidden">
-    <div class="w-8 flex items-center justify-center">
+    <div class="h-5 w-5 min-w-5 text-lg mr-1.5 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
+      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{actionIcon}}</span>
       <widgets-loading-spinner v-else />
     </div>
     <div class="flex-grow px-2 taskRunningCardContent">
@@ -10,9 +10,7 @@
       <p class="truncate text-xs text-gray-300">{{ description }}</p>
 
       <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
-      <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
     </div>
-    <ui-btn v-if="userIsAdminOrUp && !isFinished && isLibraryScan && !cancelingScan" color="primary" :padding-y="1" :padding-x="1" class="text-xs w-16 max-w-16 truncate mr-1" @click.stop="cancelScan">{{ this.$strings.ButtonCancel }}</ui-btn>
   </div>
 </template>
 
@@ -25,14 +23,9 @@ export default {
     }
   },
   data() {
-    return {
+    return {}
-      cancelingScan: false
-    }
   },
   computed: {
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
     title() {
       return this.task.title || 'No Title'
     },
@@ -43,13 +36,10 @@ export default {
       return this.task.details || 'Unknown'
     },
     isFinished() {
-      return !!this.task.isFinished
+      return this.task.isFinished || false
     },
     isFailed() {
-      return !!this.task.isFailed
+      return this.task.isFailed || false
-    },
-    isSuccess() {
-      return this.isFinished && !this.isFailed
     },
     failedMessage() {
       return this.task.error || ''
@@ -58,11 +48,6 @@ export default {
       return this.task.action || ''
     },
     actionIcon() {
-      if (this.isFailed) {
-        return 'error'
-      } else if (this.isSuccess) {
-        return 'done'
-      }
       switch (this.action) {
         case 'download-podcast-episode':
           return 'cloud_download'
@@ -81,21 +66,9 @@ export default {
       }
 
       return ''
-    },
-    isLibraryScan() {
-      return this.action === 'library-scan' || this.action === 'library-match-all'
     }
   },
   methods: {
-    cancelScan() {
-      const libraryId = this.task?.data?.libraryId
-      if (!libraryId) {
-        console.error('No library id in library-scan task', this.task)
-        return
-      }
-      this.cancelingScan = true
-      this.$root.socket.emit('cancel_scan', libraryId)
-    }
   },
   mounted() {}
 }
@@ -103,8 +76,8 @@ export default {
 
 <style>
 .taskRunningCardContent {
-  width: calc(100% - 84px);
+  width: calc(100% - 80px);
-  height: 60px;
+  height: 75px;
   display: flex;
   flex-direction: column;
   justify-content: center;

client/components/cards/ItemUploadCard.vue

@@ -15,37 +15,24 @@
 
       <div class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model.trim="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
         </div>
         <div class="w-1/2 px-2">
-          <div v-if="!isPodcast" class="flex items-end">
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
-            <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">
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-              {{ $strings.LabelDirectory }}
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
-              <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.trim="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" inputClass="h-10" />
+          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
         </div>
         <div class="w-1/2 px-2">
           <div class="w-full">
-            <label class="px-1 text-sm font-semibold">
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-              {{ $strings.LabelDirectory }}
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
-              <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>
@@ -55,14 +42,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">"{{ itemData.title }}" {{ $strings.MessageUploaderItemSuccess }}</p>
+      <p class="text-base">{{ $strings.MessageUploaderItemSuccess }}</p>
     </widgets-alert>
     <widgets-alert v-if="uploadFailed" type="error">
-      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemFailed }}</p>
+      <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
     </widgets-alert>
 
-    <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">
+    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
-      <ui-loading-indicator :text="nonInteractionLabel" />
+      <ui-loading-indicator :text="$strings.MessageUploading" />
     </div>
   </div>
 </template>
@@ -77,8 +64,7 @@ export default {
       default: () => {}
     },
     mediaType: String,
-    processing: Boolean,
+    processing: Boolean
-    provider: String
   },
   data() {
     return {
@@ -90,8 +76,7 @@ export default {
       error: '',
       isUploading: false,
       uploadFailed: false,
-      uploadSuccess: false,
+      uploadSuccess: false
-      isFetchingMetadata: false
     }
   },
   computed: {
@@ -102,19 +87,12 @@ export default {
       if (!this.itemData.title) return ''
       if (this.isPodcast) return this.itemData.title
 
-      const outputPathParts = [this.itemData.author, this.itemData.series, this.itemData.title]
+      if (this.itemData.series && this.itemData.author) {
-      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map((part) => this.$sanitizeFilename(part))
+        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
-
+      } else if (this.itemData.author) {
-      return Path.join(...cleanedOutputPathParts)
+        return Path.join(this.itemData.author, this.itemData.title)
-    },
+      } else {
-    isNonInteractable() {
+        return this.itemData.title
-      return this.isUploading || this.isFetchingMetadata
-    },
-    nonInteractionLabel() {
-      if (this.isUploading) {
-        return this.$strings.MessageUploading
-      } else if (this.isFetchingMetadata) {
-        return this.$strings.LabelFetchingMetadata
       }
     }
   },
@@ -127,49 +105,15 @@ 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 = this.$strings.ErrorUploadLacksTitle
+        this.error = 'Must have a title'
         return null
       }
       this.error = ''
       var files = this.item.itemFiles.concat(this.item.otherFiles)
       return {
         index: this.item.index,
-        directory: this.directory,
         ...this.itemData,
         files
       }
@@ -183,4 +127,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/LazyAlbumCard.vue

@@ -1,23 +1,19 @@
 <template>
-  <div ref="card" :id="`album-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`album-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="relative" :style="{ height: coverHeight + 'px' }">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <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">
-      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-preview-cover ref="cover" :src="coverSrc" :width="width" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-        <covers-preview-cover ref="cover" :src="coverSrc" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      </div>
     </div>
 
-    <div class="relative w-full">
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
-          <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
-        </div>
-      </div>
-      <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8e h-8e py-1e rounded-md text-center">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
-        <p class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ artist || '&nbsp;' }}</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">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ artist || '&nbsp;' }}</p>
+    </div>
   </div>
 </template>
 
@@ -26,10 +22,8 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
+    height: Number,
-      type: Number,
+    bookCoverAspectRatio: Number,
-      default: 192
-    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -48,29 +42,6 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.coverHeight
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    /*
-    cardHeight() {
-      return this.coverHeight + this.bottomTextHeight
-    },
-    bottomTextHeight() {
-      if (!this.isAlternativeBookshelfView) return 0
-      const lineHeight = 1.5
-      const remSize = 16
-      const baseHeight = this.sizeMultiplier * lineHeight * remSize
-      const titleHeight = this.labelFontSize * baseHeight
-      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
-      return titleHeight + paddingHeight
-    },
-    */
     coverSrc() {
       const config = this.$config || this.$nuxt.$config
       if (!this.album || !this.album.libraryItemId) return `${config.routerBasePath}/book_placeholder.jpg`
@@ -78,10 +49,11 @@ export default {
     },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
     },
     sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      const baseSize = this.bookCoverAspectRatio === 1 ? 192 : 120
+      return this.width / baseSize
     },
     title() {
       return this.album ? this.album.title : ''
@@ -139,4 +111,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/LazyBookCard.vue

@@ -1,139 +1,119 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @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="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
+    <!-- When cover image does not fill -->
-      <!-- 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 class="absolute cover-bg" ref="coverBg" />
-      </div>
-
-      <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 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
-        <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
-      </div>
-      <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 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
-        <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
-      </div>
-
-      <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-        <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: 0.5 + 'em' }">
-          <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
-        </div>
-
-        <!-- Cover Image -->
-        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative 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 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 + 'em' }">
-          <div>
-            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
-          </div>
-        </div>
-        <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
-          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</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 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
-          <p :style="{ fontSize: 0.8 + 'em' }">#{{ 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 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #cd9d49dd">
-          <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
-        </div>
-
-        <!-- No progress shown for podcasts (unless showing podcast episode) -->
-        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
-
-        <!-- Overlay is not shown if collapsing series in library -->
-        <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 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 + 'em' }">play_circle_filled</span>
-            </div>
-          </div>
-
-          <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 + 'em' }">auto_stories</span>
-            </div>
-          </div>
-
-          <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 + 'em' }" @click.stop.prevent="editClick">
-            <span class="material-icons" :style="{ fontSize: 1 + 'em' }">edit</span>
-          </div>
-
-          <!-- Radio button -->
-          <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 + 'em', left: 0.375 + 'em' }" @click.stop.prevent="selectBtnClick">
-            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-          </div>
-
-          <!-- More Menu Icon -->
-          <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 + 'em', right: 0.375 + 'em' }" @click.stop.prevent="clickShowMore">
-            <span class="material-icons" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
-          </div>
-
-          <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 + 'em', left: 0.375 + 'em' }">
-            <span class="text-white/80" :style="{ fontSize: 0.8 + 'em' }">{{ ebookFormat }}</span>
-          </div>
-        </div>
-
-        <!-- Processing/loading spinner overlay -->
-        <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 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: 1 + 'em' }">
-          <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 + 'em' }">{{ seriesName }}</p>
-        </div>
-
-        <!-- Error widget -->
-        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
-          <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" 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-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
-          </div>
-        </ui-tooltip>
-
-        <!-- rss feed icon -->
-        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
-          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
-        </div>
-        <!-- media item shared icon -->
-        <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
-          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">public</span>
-        </div>
-
-        <!-- Series sequence -->
-        <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 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
-          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequence }}</p>
-        </div>
-
-        <!-- Podcast Episode # -->
-        <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 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
-          <p :style="{ fontSize: 0.8 + 'em' }">
-            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
-          </p>
-        </div>
-
-        <!-- Podcast Num Episodes -->
-        <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 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
-          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
-        </div>
-
-        <!-- Podcast Num Episodes -->
-        <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 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
-          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodesIncomplete }}</p>
-        </div>
-      </div>
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
+    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
-      <div :style="{ fontSize: 0.9 + 'em' }">
+      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <div class="flex items-center">
-          <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
+          <span class="truncate">{{ displayTitle }}</span>
-          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
+          <widgets-explicit-indicator :explicit="isExplicit" />
-        </ui-tooltip>
+        </div>
       </div>
-      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ 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 + 'em' }">{{ 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">
+      <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">
+      <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' }">
+        <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 }" />
+
+      <!-- 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>
+          <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+            {{ 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' }">
+        <p 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) -->
+    <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>
+    <!-- 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 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 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">
+        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
+      </div>
+
+      <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+        <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">
+        <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</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">
+      <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' }">
+      <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
+    </div>
+
+    <!-- Error widget -->
+    <ui-tooltip 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' }">
+      <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` }">
+      <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` }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
+        Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+      </p>
+    </div>
+
+    <!-- Podcast Num Episodes -->
+    <div v-else-if="numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
     </div>
   </div>
 </template>
@@ -145,11 +125,15 @@ import MoreMenu from '@/components/widgets/MoreMenu'
 export default {
   props: {
     index: Number,
-    width: Number,
+    width: {
+      type: Number,
+      default: 120
+    },
     height: {
       type: Number,
       default: 192
     },
+    bookCoverAspectRatio: Number,
     bookshelfView: Number,
     bookMount: {
       // Book can be passed as prop or set with setEntity()
@@ -170,7 +154,6 @@ export default {
       imageReady: false,
       selected: false,
       isSelectionMode: false,
-      displayTitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -184,42 +167,15 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    coverWidth() {
-      return this.width || this.coverHeight / this.bookCoverAspectRatio
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    cardWidth() {
-      // This method returns immediately without waiting for the DOM to update
-      return this.coverWidth
-    },
-    /*
-    cardHeight() {
-      // This method returns immediately without waiting for the DOM to update
-      return this.coverHeight + this.detailsHeight
-    },
-    detailsHeight() {
-      if (!this.isAlternativeBookshelfView) return 0
-      const lineHeight = 1.5
-      const remSize = 16
-      const baseHeight = this.sizeMultiplier * lineHeight * remSize
-      const titleHeight = 0.9 * baseHeight
-      const line2Height = 0.8 * baseHeight
-      const line3Height = this.displaySortLine ? 0.8 * baseHeight : 0
-      const marginHeight = 8 * 2 * this.sizeMultiplier // py-2
-      return titleHeight + line2Height + line3Height + marginHeight
-    },
-    */
-    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
-    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
+    showExperimentalFeatures() {
+      return this.store.state.showExperimentalFeatures
+    },
+    enableEReader() {
+      return this.store.getters['getServerSetting']('enableEReader')
+    },
     _libraryItem() {
       return this.libraryItem || {}
     },
@@ -259,16 +215,13 @@ export default {
       // Only included when filtering by series or collapse series or Continue Series shelf on home page
       return this.mediaMetadata.series
     },
-    seriesName() {
-      return this.series?.name || null
-    },
     seriesSequence() {
-      return this.series?.sequence || null
+      return this.series ? this.series.sequence : null
     },
     libraryId() {
       return this._libraryItem.libraryId
     },
-    ebookFormat() {
+    hasEbook() {
       return this.media.ebookFormat
     },
     numTracks() {
@@ -276,11 +229,9 @@ export default {
       return this.media.numTracks || 0 // toJSONMinified
     },
     numEpisodes() {
+      if (!this.isPodcast) return 0
       return this.media.numEpisodes || 0
     },
-    numEpisodesIncomplete() {
-      return this._libraryItem.numEpisodesIncomplete || 0
-    },
     processingBatch() {
       return this.store.state.processingBatch
     },
@@ -301,14 +252,14 @@ export default {
     },
     booksInSeries() {
       // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries?.numBooks || 0
+      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
     },
     seriesSequenceList() {
-      return this.collapsedSeries?.seriesSequenceList || null
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
     },
     libraryItemIdsInSeries() {
       // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries?.libraryItemIds || []
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
     },
     hasCover() {
       return !!this.media.coverPath
@@ -316,6 +267,10 @@ export default {
     squareAspectRatio() {
       return this.bookCoverAspectRatio === 1
     },
+    sizeMultiplier() {
+      const baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
+    },
     title() {
       return this.mediaMetadata.title || ''
     },
@@ -337,7 +292,7 @@ export default {
       if (this.recentEpisode) return this.recentEpisode.title
       const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
       if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
-      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix || '\u00A0' : this.title || '\u00A0'
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
     },
     displayLineTwo() {
       if (this.recentEpisode) return this.title
@@ -358,10 +313,6 @@ export default {
       if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
       if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
       if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
-      if (this.orderBy === 'media.metadata.publishedYear') {
-        if (this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
-        return '\u00A0'
-      }
       return null
     },
     episodeProgress() {
@@ -374,29 +325,15 @@ export default {
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
-    isEBookOnly() {
-      return !this.numTracks && this.ebookFormat
-    },
     useEBookProgress() {
       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() {
-      let progressPercent = this.itemIsFinished ? 1 : this.booksInSeries ? this.seriesProgressPercent : this.useEBookProgress ? this.userProgress?.ebookProgress || 0 : this.userProgress?.progress || 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
-      return Math.max(Math.min(1, progressPercent), 0)
+      return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
     },
     itemIsFinished() {
-      if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false
     },
     seriesIsFinished() {
@@ -407,7 +344,7 @@ export default {
     },
     showError() {
       if (this.recentEpisode) return false // Dont show podcast error on episode card
-      return this.isMissing || this.isInvalid
+      return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
     },
     libraryItemIdStreaming() {
       return this.store.getters['getLibraryItemIdStreaming']
@@ -423,13 +360,13 @@ export default {
       return this.store.getters['getIsStreamingFromDifferentLibrary']
     },
     showReadButton() {
-      return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
+      return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
     },
     showPlayButton() {
       return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
     },
     showSmallEBookIcon() {
-      return !this.isSelectionMode && this.ebookFormat
+      return !this.isSelectionMode && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
     },
     isMissing() {
       return this._libraryItem.isMissing
@@ -437,13 +374,29 @@ 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'
       }
-      return 'Unknown Error'
+      let txt = ''
+      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 = []
@@ -528,24 +481,6 @@ export default {
             func: 'openPlaylists',
             text: this.$strings.LabelAddToPlaylist
           })
-          if (this.userIsAdminOrUp) {
-            items.push({
-              func: 'openShare',
-              text: this.$strings.LabelShare
-            })
-          }
-        }
-        if (this.ebookFormat && this.store.state.libraries.ereaderDevices?.length) {
-          items.push({
-            text: this.$strings.LabelSendEbookToDevice,
-            subitems: this.store.state.libraries.ereaderDevices.map((d) => {
-              return {
-                text: d.name,
-                func: 'sendToDevice',
-                data: d.name
-              }
-            })
-          })
         }
       }
       if (this.userCanUpdate) {
@@ -573,7 +508,7 @@ export default {
       if (this.continueListeningShelf) {
         items.push({
           func: 'removeFromContinueListening',
-          text: this.isEBookOnly ? this.$strings.ButtonRemoveFromContinueReading : this.$strings.ButtonRemoveFromContinueListening
+          text: this.$strings.ButtonRemoveFromContinueListening
         })
       }
       if (!this.isPodcast) {
@@ -605,16 +540,16 @@ export default {
       return this.$root.socket || this.$nuxt.$root.socket
     },
     titleFontSize() {
-      return 0.75
+      return 0.75 * this.sizeMultiplier
     },
     authorFontSize() {
-      return 0.6
+      return 0.6 * this.sizeMultiplier
     },
     placeholderCoverPadding() {
-      return 0.8
+      return 0.8 * this.sizeMultiplier
     },
     authorBottom() {
-      return 0.75
+      return 0.75 * this.sizeMultiplier
     },
     titleCleaned() {
       if (!this.title) return ''
@@ -638,12 +573,14 @@ export default {
       const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.AUTHOR
     },
+    titleDisplayBottomOffset() {
+      if (!this.isAlternativeBookshelfView && !this.isAuthorBookshelfView) return 0
+      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
+      return 4.25 * this.sizeMultiplier
+    },
     rssFeed() {
       if (this.booksInSeries) return null
       return this._libraryItem.rssFeed || null
-    },
-    mediaItemShare() {
-      return this._libraryItem.mediaItemShare || null
     }
   },
   methods: {
@@ -680,12 +617,6 @@ 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
@@ -736,6 +667,7 @@ export default {
         .$patch(apiEndpoint, updatePayload)
         .then(() => {
           this.processing = false
+          toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
@@ -780,40 +712,7 @@ export default {
       // More menu func
       this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
     },
-    sendToDevice(deviceName) {
-      // More menu func
-      const payload = {
-        // message: `Are you sure you want to send ${this.ebookFormat} ebook "${this.title}" to device "${deviceName}"?`,
-        message: this.$getString('MessageConfirmSendEbookToDevice', [this.ebookFormat, this.title, deviceName]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            const payload = {
-              libraryItemId: this.libraryItemId,
-              deviceName
-            }
-            this.processing = true
-            const axios = this.$axios || this.$nuxt.$axios
-            axios
-              .$post(`/api/emails/send-ebook-to-device`, payload)
-              .then(() => {
-                this.$toast.success(this.$getString('ToastSendEbookToDeviceSuccess', [deviceName]))
-              })
-              .catch((error) => {
-                console.error('Failed to send ebook to device', error)
-                this.$toast.error(this.$strings.ToastSendEbookToDeviceFailed)
-              })
-              .finally(() => {
-                this.processing = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.store.commit('globals/setConfirmPrompt', payload)
-    },
     removeSeriesFromContinueListening() {
-      if (!this.series) return
-
       const axios = this.$axios || this.$nuxt.$axios
       this.processing = true
       axios
@@ -886,21 +785,15 @@ export default {
       this.store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.recentEpisode }])
       this.store.commit('globals/setShowPlaylistsModal', true)
     },
-    openShare() {
-      this.store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.store.commit('globals/setShareModal', this.mediaItemShare)
-    },
     deleteLibraryItem() {
       const payload = {
-        message: this.$strings.MessageConfirmDeleteLibraryItem,
+        message: 'This will delete the library item from the database and your file system. Are you sure?',
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
         yesButtonText: this.$strings.ButtonDelete,
         yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
+        checkboxDefaultValue: true,
         callback: (confirmed, hardDelete) => {
           if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
             this.processing = true
             const axios = this.$axios || this.$nuxt.$axios
             axios
@@ -932,8 +825,8 @@ export default {
           items: this.moreMenuItems
         },
         created() {
-          this.$on('action', (action) => {
+          this.$on('action', (func) => {
-            if (action.func && _this[action.func]) _this[action.func](action.data)
+            if (_this[func]) _this[func]()
           })
           this.$on('close', () => {
             _this.isMoreMenuOpen = false
@@ -945,7 +838,7 @@ export default {
       var wrapperBox = this.$refs.moreIcon.getBoundingClientRect()
       var el = instance.$el
 
-      var elHeight = this.moreMenuItems.length * 28 + 10
+      var elHeight = this.moreMenuItems.length * 28 + 2
       var elWidth = 130
 
       var bottomOfIcon = wrapperBox.top + wrapperBox.height
@@ -972,13 +865,12 @@ export default {
       this.createMoreMenu()
     },
     async clickReadEBook() {
-      const axios = this.$axios || this.$nuxt.$axios
+      var libraryItem = await this.$axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
-      var libraryItem = await axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
         console.error('Failed to get lirbary item', this.libraryItemId)
         return null
       })
       if (!libraryItem) return
-      this.store.commit('showEReader', { libraryItem, keepProgress: true })
+      this.store.commit('showEReader', libraryItem)
     },
     selectBtnClick(evt) {
       if (this.processingBatch) return

client/components/cards/LazyCollectionCard.vue

@@ -1,26 +1,24 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="relative" :style="{ height: coverHeight + 'px' }">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <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">
-      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
+        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
       </div>
-      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
-          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
-        </div>
-      </div>
-
-      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+    <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>
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 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' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+    <div 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 + 'em' }">{{ title }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -30,10 +28,8 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
+    height: Number,
-      type: Number,
+    bookCoverAspectRatio: Number,
-      default: 192
-    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -53,33 +49,13 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.coverHeight * 2
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    cardHeight() {
-      return this.coverHeight + this.bottomTextHeight
-    },
-    bottomTextHeight() {
-      if (!this.isAlternativeBookshelfView) return 0 // bottom text appears on top of the divider
-      const lineHeight = 1.5
-      const remSize = 16
-      const baseHeight = this.sizeMultiplier * lineHeight * remSize
-      const titleHeight = this.labelFontSize * baseHeight
-      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
-      return titleHeight + paddingHeight
-    },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
     },
     sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
     },
     title() {
       return this.collection ? this.collection.name : ''
@@ -143,4 +119,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/LazyPlaylistCard.vue

@@ -1,24 +1,21 @@
 <template>
-  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="relative" :style="{ height: coverHeight + 'px' }">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <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">
-      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
-        <covers-playlist-cover ref="cover" :items="items" :width="cardWidth" :height="coverHeight" />
+    </div>
-      </div>
+    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
-        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
+        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
-          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
-        </div>
       </div>
     </div>
-
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6e left-0 right-0 mx-auto h-6e 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` }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+    <div 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 + 'em' }">{{ title }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -28,10 +25,8 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
+    height: Number,
-      type: Number,
+    bookCoverAspectRatio: Number,
-      default: 192
-    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -50,21 +45,13 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.coverHeight
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
     },
     sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6)
+      return this.width / 120
     },
     title() {
       return this.playlist ? this.playlist.name : ''
@@ -125,4 +112,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/cards/LazySeriesCard.vue

@@ -1,32 +1,28 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <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="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <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">
-      <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" />
-        <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      </div>
-
-      <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
-        <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
-      </div>
-
-      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e 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="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: '1em' }">
-        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
-      </div>
-
-      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+    <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 class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+    <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 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>
+
+    <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 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>
       </div>
     </div>
-    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
+    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -36,14 +32,13 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
+    height: Number,
-      type: Number,
+    bookCoverAspectRatio: Number,
-      default: 192
-    },
     bookshelfView: {
       type: Number,
       default: 0
     },
+    isCategorized: Boolean,
     seriesMount: {
       type: Object,
       default: () => null
@@ -61,24 +56,16 @@ export default {
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.coverHeight * 2
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
     },
     sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
     },
     seriesId() {
       return this.series ? this.series.id : ''
@@ -91,7 +78,7 @@ export default {
     },
     displayTitle() {
       if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
-      return this.title || '\u00A0'
+      return this.title
     },
     displaySortLine() {
       switch (this.orderBy) {
@@ -132,13 +119,9 @@ export default {
       return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0)
     },
     seriesPercentInProgress() {
-      if (!this.books.length) return 0
+      let totalFinishedAndInProgress = this.seriesBooksFinished.length
-      let progressPercent = 0
+      if (this.hasSeriesBookInProgress) totalFinishedAndInProgress += 1
-      this.seriesBookProgress.forEach((progress) => {
+      return Math.min(1, Math.max(0, totalFinishedAndInProgress / this.books.length))
-        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,19 +1,17 @@
 <template>
-  <div>
+  <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: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" 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-20">
-        <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-8xl">record_voice_over</span>
-          <span class="material-icons-outlined text-[10em]">record_voice_over</span>
-        </div>
-
-        <!-- Narrator name & num books overlay -->
-        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
-          <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
-          <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
-        </div>
       </div>
-    </nuxt-link>
+
-  </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 class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+      </div>
+    </div>
+  </nuxt-link>
 </template>
 
 <script>
@@ -24,37 +22,29 @@ export default {
       default: () => {}
     },
     width: Number,
-    height: {
+    height: Number,
+    sizeMultiplier: {
       type: Number,
-      default: 100
+      default: 1
     }
   },
   data() {
     return {}
   },
   computed: {
-    cardWidth() {
-      return this.cardHeight * 1.5
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
-    },
     name() {
       return this.narrator?.name || ''
     },
     numBooks() {
-      return this.narrator?.numBooks || this.narrator?.books?.length || 0
+      return this.narrator?.books?.length || 0
     },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
-    },
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {}
 }
-</script>
+</script>

client/components/content/LibraryItemDetails.vue

@@ -1,223 +0,0 @@
-<template>
-  <div>
-    <div v-if="narrators?.length" class="flex py-0.5 mt-4">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(narrator, index) in narrators">
-          <nuxt-link :key="narrator" :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link
-          ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div v-if="publishedYear" 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.LabelPublishYear }}</span>
-      </div>
-      <div>
-        {{ publishedYear }}
-      </div>
-    </div>
-    <div v-if="publisher" 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.LabelPublisher }}</span>
-      </div>
-      <div>
-        <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=publishers.${$encode(publisher)}`" class="hover:underline">{{ publisher }}</nuxt-link>
-      </div>
-    </div>
-    <div v-if="musicAlbum" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
-      </div>
-      <div>
-        {{ musicAlbum }}
-      </div>
-    </div>
-    <div v-if="musicAlbumArtist" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
-      </div>
-      <div>
-        {{ musicAlbumArtist }}
-      </div>
-    </div>
-    <div v-if="musicTrackPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
-      </div>
-      <div>
-        {{ musicTrackPretty }}
-      </div>
-    </div>
-    <div v-if="musicDiscPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-      </div>
-      <div>
-        {{ musicDiscPretty }}
-      </div>
-    </div>
-    <div v-if="podcastType" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPodcastType }}</span>
-      </div>
-      <div class="capitalize">
-        {{ podcastType }}
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="genres.length">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(genre, index) in genres">
-          <nuxt-link :key="genre" :to="`/library/${libraryId}/bookshelf?filter=genres.${$encode(genre)}`" class="hover:underline">{{ genre }}</nuxt-link
-          ><span :key="index" v-if="index < genres.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="tags.length">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelTags }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(tag, index) in tags">
-          <nuxt-link :key="tag" :to="`/library/${libraryId}/bookshelf?filter=tags.${$encode(tag)}`" class="hover:underline">{{ tag }}</nuxt-link
-          ><span :key="index" v-if="index < tags.length - 1">,&nbsp;</span>
-        </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>
-      </div>
-      <div>
-        {{ durationPretty }}
-      </div>
-    </div>
-    <div 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.LabelSize }}</span>
-      </div>
-      <div>
-        {{ sizePretty }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    libraryId() {
-      return this.libraryItem.libraryId
-    },
-    isPodcast() {
-      return this.libraryItem.mediaType === 'podcast'
-    },
-    audioFile() {
-      // Music track
-      return this.media.audioFile
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    tracks() {
-      return this.media.tracks || []
-    },
-    podcastEpisodes() {
-      return this.media.episodes || []
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    publishedYear() {
-      return this.mediaMetadata.publishedYear
-    },
-    genres() {
-      return this.mediaMetadata.genres || []
-    },
-    tags() {
-      return this.media.tags || []
-    },
-    podcastAuthor() {
-      return this.mediaMetadata.author || ''
-    },
-    authors() {
-      return this.mediaMetadata.authors || []
-    },
-    publisher() {
-      return this.mediaMetadata.publisher || ''
-    },
-    musicArtists() {
-      return this.mediaMetadata.artists || []
-    },
-    musicAlbum() {
-      return this.mediaMetadata.album || ''
-    },
-    musicAlbumArtist() {
-      return this.mediaMetadata.albumArtist || ''
-    },
-    musicTrackPretty() {
-      if (!this.mediaMetadata.trackNumber) return null
-      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
-      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
-    },
-    musicDiscPretty() {
-      if (!this.mediaMetadata.discNumber) return null
-      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
-      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
-    },
-    narrators() {
-      return this.mediaMetadata.narrators || []
-    },
-    language() {
-      return this.mediaMetadata.language || null
-    },
-    durationPretty() {
-      if (this.isPodcast) return this.$elapsedPrettyExtended(this.totalPodcastDuration)
-
-      if (!this.tracks.length && !this.audioFile) return 'N/A'
-      if (this.audioFile) return this.$elapsedPrettyExtended(this.duration)
-      return this.$elapsedPretty(this.duration)
-    },
-    duration() {
-      if (!this.tracks.length && !this.audioFile) return 0
-      return this.media.duration
-    },
-    totalPodcastDuration() {
-      if (!this.podcastEpisodes.length) return 0
-      let totalDuration = 0
-      this.podcastEpisodes.forEach((ep) => (totalDuration += ep.duration || 0))
-      return totalDuration
-    },
-    sizePretty() {
-      return this.$bytesPretty(this.media.size)
-    },
-    podcastType() {
-      return this.mediaMetadata.type
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>

client/components/controls/FilterSelect.vue

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

client/components/controls/GlobalSearch.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="">
+  <div class="sm:w-80 w-full relative">
-    <div class="w-full relative sm:w-80">
+    <form @submit.prevent="submitSearch">
-      <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" />
-        <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>
-      </form>
+    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-      <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
+      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
-        <span v-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>
-        <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
-      </div>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-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">
       <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>
@@ -105,7 +103,7 @@ export default {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length
     }
   },
   methods: {
@@ -199,8 +197,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .globalSearchMenu {
-  max-height: calc(100vh - 75px);
+  max-height: 80vh;
 }
 </style>

client/components/controls/LibraryFilterSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
       </span>
@@ -9,51 +9,48 @@
           <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
         </svg>
       </span>
-      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
         <span class="material-icons" style="font-size: 1.1rem">close</span>
       </div>
     </button>
 
-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm libraryFilterMenu">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
       <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in selectItems">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate text-sm">{{ item.text }}</span>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
             </div>
             <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
               <span class="material-icons text-2xl">arrow_right</span>
             </div>
-            <!-- selected checkmark icon -->
-            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
-            </div>
           </li>
         </template>
       </ul>
       <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="option" @click="sublist = null">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
           <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
             <span class="material-icons text-2xl">arrow_left</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
+            <span class="font-normal ml-3 block truncate">Back</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">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
+            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+          </div>
+        </li>
+        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('no-series'))">
+          <div class="flex items-center">
+            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">{{ $strings.MessageNoSeries }}</span>
           </div>
         </li>
         <template v-for="item in sublistItems">
-          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedSublistOption(item.value)">
+          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
             </div>
-            <!-- selected checkmark icon -->
-            <div v-if="`${sublist}.${item.value}` === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
-            </div>
           </li>
         </template>
       </ul>
@@ -75,8 +72,9 @@ export default {
   },
   watch: {
     showMenu(newVal) {
-      if (newVal) {
+      if (!newVal) {
-        this.sublist = this.selectedItemSublist
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
       }
     }
   },
@@ -89,9 +87,6 @@ export default {
         this.$emit('input', val)
       }
     },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
     libraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -109,37 +104,26 @@ 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
         },
@@ -151,50 +135,38 @@ export default {
       ]
     },
     bookItems() {
-      const items = [
+      return [
         {
           text: this.$strings.LabelAll,
           value: 'all'
         },
         {
           text: this.$strings.LabelGenre,
-          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
-          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.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
         },
@@ -213,11 +185,6 @@ export default {
           value: 'tracks',
           sublist: true
         },
-        {
-          text: this.$strings.LabelEbooks,
-          value: 'ebooks',
-          sublist: true
-        },
         {
           text: this.$strings.LabelAbridged,
           value: 'abridged',
@@ -234,14 +201,6 @@ export default {
           sublist: false
         }
       ]
-      if (this.userIsAdminOrUp) {
-        items.push({
-          text: this.$strings.LabelShareOpen,
-          value: 'share-open',
-          sublist: false
-        })
-      }
-      return items
     },
     podcastItems() {
       return [
@@ -251,22 +210,14 @@ 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',
@@ -282,13 +233,11 @@ 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
         },
@@ -306,32 +255,21 @@ export default {
       return this.bookItems
     },
     selectedItemSublist() {
-      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
-    },
-    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('.')
+      var parts = this.selected.split('.')
-      const filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
-      let filterValue = null
+      var filterValue = null
       if (parts.length > 1) {
-        const decoded = this.$decode(parts[1])
+        var decoded = this.$decode(parts[1])
-        if (parts[0] === 'authors') {
+        if (decoded.startsWith('aut_')) {
-          const author = this.authors.find((au) => au.id == decoded)
+          var author = this.authors.find((au) => au.id == decoded)
           if (author) filterValue = author.name
-        } else if (parts[0] === 'series') {
+        } else if (decoded.startsWith('ser_')) {
-          if (decoded === 'no-series') {
+          var series = this.series.find((se) => se.id == decoded)
-            filterValue = this.$strings.MessageNoSeries
+          if (series) filterValue = series.name
-          } else {
-            const series = this.series.find((se) => se.id == decoded)
-            if (series) filterValue = series.name
-          }
         } else {
           filterValue = decoded
         }
@@ -364,9 +302,6 @@ export default {
     languages() {
       return this.filterData.languages || []
     },
-    publishers() {
-      return this.filterData.publishers || []
-    },
     progress() {
       return [
         {
@@ -389,10 +324,6 @@ export default {
     },
     tracks() {
       return [
-        {
-          id: 'none',
-          name: this.$strings.LabelTracksNone
-        },
         {
           id: 'single',
           name: this.$strings.LabelTracksSingleTrack
@@ -403,26 +334,6 @@ export default {
         }
       ]
     },
-    ebooks() {
-      return [
-        {
-          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
-        }
-      ]
-    },
     missing() {
       return [
         {
@@ -480,7 +391,7 @@ export default {
       ]
     },
     sublistItems() {
-      const sublistItems = (this[this.sublist] || []).map((item) => {
+      return (this[this.sublist] || []).map((item) => {
         if (typeof item === 'string') {
           return {
             text: item,
@@ -493,13 +404,6 @@ export default {
           }
         }
       })
-      if (this.sublist === 'series') {
-        sublistItems.unshift({
-          text: this.$strings.MessageNoSeries,
-          value: this.$encode('no-series')
-        })
-      }
-      return sublistItems
     },
     filterData() {
       return this.$store.state.libraries.filterData || {}
@@ -524,7 +428,7 @@ export default {
         return
       }
 
-      const val = option.value
+      var val = option.value
       if (this.selected === val) {
         this.showMenu = false
         return
@@ -535,10 +439,4 @@ export default {
     }
   }
 }
-</script>
+</script>
-
-<style scoped>
-.libraryFilterMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>

client/components/controls/LibrarySortSelect.vue

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

client/components/controls/SortSelect.vue

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

client/components/controls/VolumeControl.vue

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

client/components/covers/AuthorImage.vue

@@ -84,4 +84,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/covers/BookCover.vue

@@ -5,8 +5,7 @@
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
 
-      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" @click="clickCover" />
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
-
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
@@ -44,7 +43,6 @@ export default {
       type: Number,
       default: 120
     },
-    expandOnClick: Boolean,
     bookCoverAspectRatio: Number
   },
   data() {
@@ -101,14 +99,9 @@ export default {
     },
     fullCoverUrl() {
       if (!this.libraryItem) return null
-      const store = this.$store || this.$nuxt.$store
+      var 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
     },
@@ -131,16 +124,14 @@ export default {
     authorBottom() {
       return 0.75 * this.sizeMultiplier
     },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {
-    clickCover() {
-      if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.rawCoverUrl)
-      }
-    },
     setCoverBg() {
       if (this.$refs.coverBg) {
         this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`

client/components/covers/PreviewCover.vue

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

client/components/modals/AccountModal.vue

@@ -6,25 +6,21 @@
       </div>
     </template>
     <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden"  style="min-height: 400px; max-height: 80vh">
         <div class="w-full p-8">
           <div class="flex py-2">
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newUser.username" :label="$strings.LabelUsername" />
+              <ui-text-input-with-label v-model="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.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.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" />
+              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" @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" />
@@ -107,12 +103,12 @@
                   <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
                 </div>
               </div>
+              
             </div>
           </div>
 
           <div class="flex pt-4 px-2">
-            <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" to="/account">{{ $strings.ButtonChangeRootPassword }}</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>
@@ -137,8 +133,7 @@ export default {
       newUser: {},
       isNew: true,
       tags: [],
-      loadingTags: false,
+      loadingTags: false
-      unlinkingFromOpenID: false
     }
   },
   watch: {
@@ -182,7 +177,7 @@ export default {
       return this.isNew ? this.$strings.HeaderNewAccount : this.$strings.HeaderUpdateAccount
     },
     isEditingRoot() {
-      return this.account?.type === 'root'
+      return this.account && this.account.type === 'root'
     },
     libraries() {
       return this.$store.state.libraries.libraries
@@ -200,9 +195,6 @@ export default {
     },
     tagsSelectionText() {
       return this.newUser.permissions.selectedTagsNotAccessible ? this.$strings.LabelTagsNotAccessibleToUser : this.$strings.LabelTagsAccessibleToUser
-    },
-    hasOpenIDLink() {
-      return !!this.account?.hasOpenIDLink
     }
   },
   methods: {
@@ -210,31 +202,6 @@ 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) {
@@ -291,6 +258,7 @@ export default {
       if (account.type === 'root' && !account.isActive) return
 
       this.processing = true
+      console.log('Calling update', account)
       this.$axios
         .$patch(`/api/users/${this.account.id}`, account)
         .then((data) => {
@@ -359,11 +327,9 @@ export default {
     init() {
       this.fetchAllTags()
       this.isNew = !this.account
-
       if (this.account) {
         this.newUser = {
           username: this.account.username,
-          email: this.account.email,
           password: this.account.password,
           type: this.account.type,
           isActive: this.account.isActive,
@@ -372,9 +338,9 @@ export default {
           itemTagsSelected: [...(this.account.itemTagsSelected || [])]
         }
       } else {
+        this.fetchAllTags()
         this.newUser = {
           username: null,
-          email: null,
           password: null,
           type: 'user',
           isActive: true,
@@ -387,8 +353,7 @@ export default {
             accessAllTags: true,
             selectedTagsNotAccessible: false
           },
-          librariesAccessible: [],
+          librariesAccessible: []
-          itemTagsSelected: []
         }
       }
     }

client/components/modals/AddCustomMetadataProviderModal.vue

@@ -1,105 +0,0 @@
-<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/AudioFileDataModal.vue

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

client/components/modals/ChaptersModal.vue

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

client/components/modals/Dialog.vue

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

client/components/modals/ListeningSessionModal.vue

@@ -2,13 +2,13 @@
   <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-lg md:text-2xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
       <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">{{ $getString('LabelByAuthor', [_session.displayAuthor]) }}</p>
+        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">by {{ _session.displayAuthor }}</p>
       </div>
 
       <div class="w-full h-px bg-white bg-opacity-10 my-4" />
@@ -50,19 +50,19 @@
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelItem }}</p>
           <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibrary }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
               {{ _session.libraryId }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibraryItem }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
               {{ _session.libraryItemId }}
             </div>
           </div>
           <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelEpisode }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
               {{ _session.episodeId }}
             </div>
           </div>
@@ -80,27 +80,26 @@
           </div>
         </div>
         <div class="w-full md:w-1/3">
-          <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p class="mb-1">{{ _session.userId }}</p>
 
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>
           <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="deviceDisplayName" class="mb-1">{{ deviceDisplayName }}</p>
+          <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</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>
       </div>
 
       <div class="flex items-center">
-        <ui-btn v-if="!isOpenSession && !isMediaItemShareSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-if="!isOpenSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-else-if="!isMediaItemShareSession" small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
+        <ui-btn v-else small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -142,14 +141,10 @@ export default {
       if (!this.deviceInfo.osName) return null
       return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
     },
-    deviceDisplayName() {
+    clientDisplayName() {
       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'
@@ -166,9 +161,6 @@ export default {
     },
     isOpenSession() {
       return !!this._session.open
-    },
-    isMediaItemShareSession() {
-      return this._session.mediaPlayer === 'web-share'
     }
   },
   methods: {

client/components/modals/Modal.vue

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

client/components/modals/RawCoverPreviewModal.vue

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

client/components/modals/ShareModal.vue

@@ -1,204 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="share" :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">{{ $strings.LabelShare }}</p>
-      </div>
-    </template>
-    <div class="px-6 py-8 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
-      <div class="absolute top-0 right-0 p-4">
-        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-          <a href="https://www.audiobookshelf.org/guides/media-item-shares" target="_blank" class="inline-flex">
-            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
-          </a>
-        </ui-tooltip>
-      </div>
-      <template v-if="currentShare">
-        <div class="w-full py-2">
-          <label class="px-1 text-sm font-semibold block">{{ $strings.LabelShareURL }}</label>
-          <ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
-        </div>
-        <div class="w-full py-2 px-1">
-          <p v-if="currentShare.expiresAt" class="text-base">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
-          <p v-else>{{ $strings.LabelPermanent }}</p>
-        </div>
-      </template>
-      <template v-else>
-        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
-          <div class="w-full sm:w-48">
-            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelSlug }}</label>
-            <ui-text-input v-model="newShareSlug" class="text-base h-10" />
-          </div>
-          <div class="flex-grow" />
-          <div class="w-full sm:w-80">
-            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelDuration }}</label>
-            <div class="inline-flex items-center space-x-2">
-              <div>
-                <ui-icon-btn icon="remove" :size="10" @click="clickMinus" />
-              </div>
-              <ui-text-input v-model="newShareDuration" type="number" text-center no-spinner class="text-center max-w-12 min-w-12 h-10 text-base" />
-              <div>
-                <ui-icon-btn icon="add" :size="10" @click="clickPlus" />
-              </div>
-              <div class="w-28">
-                <ui-dropdown v-model="shareDurationUnit" :items="durationUnits" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareURLWillBe', [demoShareUrl])" />
-        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareExpirationWillBe', [expirationDateString])" />
-      </template>
-      <div class="flex items-center pt-6">
-        <div class="flex-grow" />
-        <ui-btn v-if="currentShare" color="error" small @click="deleteShare">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-if="!currentShare" color="success" small @click="openShare">{{ $strings.ButtonShare }}</ui-btn>
-      </div>
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {},
-  data() {
-    return {
-      processing: false,
-      newShareSlug: '',
-      newShareDuration: 0,
-      currentShare: null,
-      shareDurationUnit: 'minutes',
-      durationUnits: [
-        {
-          text: this.$strings.LabelMinutes,
-          value: 'minutes'
-        },
-        {
-          text: this.$strings.LabelHours,
-          value: 'hours'
-        },
-        {
-          text: this.$strings.LabelDays,
-          value: 'days'
-        }
-      ]
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.$store.state.globals.showShareModal
-      },
-      set(val) {
-        this.$store.commit('globals/setShowShareModal', val)
-      }
-    },
-    mediaItemShare() {
-      return this.$store.state.globals.selectedMediaItemShare
-    },
-    libraryItem() {
-      return this.$store.state.selectedLibraryItem
-    },
-    user() {
-      return this.$store.state.user.user
-    },
-    demoShareUrl() {
-      return `${window.origin}/share/${this.newShareSlug}`
-    },
-    currentShareUrl() {
-      if (!this.currentShare) return ''
-      return `${window.origin}/share/${this.currentShare.slug}`
-    },
-    currentShareTimeRemaining() {
-      if (!this.currentShare) return 'Error'
-      if (!this.currentShare.expiresAt) return this.$strings.LabelPermanent
-      const msRemaining = new Date(this.currentShare.expiresAt).valueOf() - Date.now()
-      if (msRemaining <= 0) return 'Expired'
-      return this.$elapsedPrettyExtended(msRemaining / 1000, true, false)
-    },
-    expireDurationSeconds() {
-      let shareDuration = Number(this.newShareDuration)
-      if (!shareDuration || isNaN(shareDuration)) return 0
-      return this.newShareDuration * (this.shareDurationUnit === 'minutes' ? 60 : this.shareDurationUnit === 'hours' ? 3600 : 86400)
-    },
-    expirationDateString() {
-      if (!this.expireDurationSeconds) return this.$strings.LabelPermanent
-      const dateMs = Date.now() + this.expireDurationSeconds * 1000
-      return this.$formatDatetime(dateMs, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat)
-    }
-  },
-  methods: {
-    clickPlus() {
-      this.newShareDuration++
-    },
-    clickMinus() {
-      if (this.newShareDuration > 0) {
-        this.newShareDuration--
-      }
-    },
-    deleteShare() {
-      if (!this.currentShare) return
-      this.processing = true
-      this.$axios
-        .$delete(`/api/share/mediaitem/${this.currentShare.id}`)
-        .then(() => {
-          this.currentShare = null
-          this.$emit('removed')
-        })
-        .catch((error) => {
-          console.error('deleteShare', error)
-          let errorMsg = error.response?.data || 'Failed to delete share'
-          this.$toast.error(errorMsg)
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    openShare() {
-      if (!this.newShareSlug) {
-        this.$toast.error('Slug is required')
-        return
-      }
-      const payload = {
-        slug: this.newShareSlug,
-        mediaItemType: 'book',
-        mediaItemId: this.libraryItem.media.id,
-        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0
-      }
-      this.processing = true
-      this.$axios
-        .$post(`/api/share/mediaitem`, payload)
-        .then((data) => {
-          this.currentShare = data
-          this.$emit('opened', data)
-        })
-        .catch((error) => {
-          console.error('openShare', error)
-          let errorMsg = error.response?.data || 'Failed to share item'
-          this.$toast.error(errorMsg)
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    init() {
-      this.newShareSlug = this.$randomId(10)
-      if (this.mediaItemShare) {
-        this.currentShare = { ...this.mediaItemShare }
-      } else {
-        this.currentShare = null
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/SleepTimerModal.vue

@@ -15,7 +15,7 @@
         </template>
         <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
           <ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
-          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
+          <ui-btn color="success" type="submit" padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
         </form>
       </div>
       <div v-else class="w-full p-4">

client/components/modals/authors/EditModal.vue

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

client/components/modals/changelog/ViewModal.vue

@@ -6,9 +6,7 @@
       </div>
     </template>
     <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
-      <p class="text-xl font-bold pb-4">
+      <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }}</p>
-        Changelog <a :href="currentTagUrl" target="_blank" class="hover:underline">v{{ currentVersionNumber }}</a> ({{ currentVersionPubDate }})
-      </p>
       <div class="custom-text" v-html="compiledMarkedown" />
     </div>
   </modals-modal>
@@ -20,9 +18,17 @@ import { marked } from '@/static/libs/marked/index.js'
 export default {
   props: {
     value: Boolean,
-    versionData: {
+    changelog: String,
-      type: Object,
+    currentVersion: String
-      default: () => {}
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
     }
   },
   computed: {
@@ -34,27 +40,16 @@ export default {
         this.$emit('input', val)
       }
     },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
-    },
-    changelog() {
-      return this.versionData?.currentVersionChangelog || 'No Changelog Available'
-    },
     compiledMarkedown() {
       return marked.parse(this.changelog, { gfm: true, breaks: true })
     },
-    currentVersionPubDate() {
-      if (!this.versionData?.currentVersionPubDate) return 'Unknown release date'
-      return `${this.$formatDate(this.versionData.currentVersionPubDate, this.dateFormat)}`
-    },
-    currentTagUrl() {
-      return this.versionData?.currentTagUrl
-    },
     currentVersionNumber() {
-      return this.$config.version
+      return this.currentVersion
     }
   },
-  methods: {},
+  methods: {
+    init() {}
+  },
   mounted() {}
 }
 </script>
@@ -62,7 +57,7 @@ export default {
 <style scoped>
 /*
 1. we need to manually define styles to apply to the parsed markdown elements,
-since we don't have access to the actual elements in this component
+since we don't have access to the actual elements in this component 
 
 2. v-deep allows these to take effect on the content passed in to the v-html in the div above
 */
@@ -75,4 +70,4 @@ since we don't have access to the actual elements in this component
 .custom-text ::v-deep > ul {
   @apply list-disc list-inside pb-4;
 }
-</style>
+</style>

client/components/modals/collections/AddCreateModal.vue

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

client/components/modals/collections/EditModal.vue

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

client/components/modals/emails/EReaderDeviceModal.vue

@@ -1,231 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="ereader-device-edit" :width="800" :height="'unset'" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
-        <div class="w-full px-3 py-5 md:p-12">
-          <div class="flex items-center -mx-1 mb-4">
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
-            </div>
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
-            </div>
-          </div>
-          <div class="flex items-center -mx-1 mb-4">
-            <div class="w-full md:w-1/2 px-1">
-              <ui-dropdown v-model="newDevice.availabilityOption" :label="$strings.LabelDeviceIsAvailableTo" :items="userAvailabilityOptions" @input="availabilityOptionChanged" />
-            </div>
-            <div class="w-full md:w-1/2 px-1">
-              <ui-multi-select-dropdown v-if="newDevice.availabilityOption === 'specificUsers'" v-model="newDevice.users" :label="$strings.HeaderUsers" :items="userOptions" />
-            </div>
-          </div>
-
-          <div class="flex items-center pt-4">
-            <div class="flex-grow" />
-            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    existingDevices: {
-      type: Array,
-      default: () => []
-    },
-    ereaderDevice: {
-      type: Object,
-      default: () => null
-    },
-    users: {
-      type: Array,
-      default: () => []
-    },
-    loadUsers: Function
-  },
-  data() {
-    return {
-      processing: false,
-      newDevice: {
-        name: '',
-        email: '',
-        availabilityOption: 'adminAndUp',
-        users: []
-      }
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
-    },
-    userAvailabilityOptions() {
-      return [
-        {
-          text: this.$strings.LabelAdminUsersOnly,
-          value: 'adminOrUp'
-        },
-        {
-          text: this.$strings.LabelAllUsersExcludingGuests,
-          value: 'userOrUp'
-        },
-        {
-          text: this.$strings.LabelAllUsersIncludingGuests,
-          value: 'guestOrUp'
-        },
-        {
-          text: this.$strings.LabelSelectUsers,
-          value: 'specificUsers'
-        }
-      ]
-    },
-    userOptions() {
-      return this.users.map((u) => ({ text: u.username, value: u.id }))
-    }
-  },
-  methods: {
-    availabilityOptionChanged(option) {
-      if (option === 'specificUsers' && !this.users.length) {
-        this.callLoadUsers()
-      }
-    },
-    async callLoadUsers() {
-      this.processing = true
-      await this.loadUsers()
-      this.processing = false
-    },
-    submitForm() {
-      this.$refs.ereaderNameInput.blur()
-      this.$refs.ereaderEmailInput.blur()
-
-      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
-        this.$toast.error('Name and email required')
-        return
-      }
-
-      if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
-        this.$toast.error('Must select at least one user')
-        return
-      }
-      if (this.newDevice.availabilityOption !== 'specificUsers') {
-        this.newDevice.users = []
-      }
-
-      this.newDevice.name = this.newDevice.name.trim()
-      this.newDevice.email = this.newDevice.email.trim()
-
-      if (!this.ereaderDevice) {
-        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
-          return
-        }
-
-        this.submitCreate()
-      } else {
-        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
-          return
-        }
-
-        this.submitUpdate()
-      }
-    },
-    submitUpdate() {
-      this.processing = true
-
-      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
-
-      const payload = {
-        ereaderDevices: [
-          ...existingDevicesWithoutThisOne,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post(`/api/emails/ereader-devices`, payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices)
-          this.$toast.success('Device updated')
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to update device', error)
-          this.$toast.error('Failed to update device')
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    submitCreate() {
-      this.processing = true
-
-      const payload = {
-        ereaderDevices: [
-          ...this.existingDevices,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post('/api/emails/ereader-devices', payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices || [])
-          this.$toast.success('Device added')
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to add device', error)
-          this.$toast.error('Failed to add device')
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    init() {
-      if (this.ereaderDevice) {
-        this.newDevice.name = this.ereaderDevice.name
-        this.newDevice.email = this.ereaderDevice.email
-        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
-        this.newDevice.users = this.ereaderDevice.users || []
-      } else {
-        this.newDevice.name = ''
-        this.newDevice.email = ''
-        this.newDevice.availabilityOption = 'adminOrUp'
-        this.newDevice.users = []
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/item/EditModal.vue

@@ -74,9 +74,6 @@ export default {
         this.$store.commit('setEditModalTab', val)
       }
     },
-    height() {
-      return Math.min(this.availableHeight, 650)
-    },
     tabs() {
       return [
         {
@@ -127,6 +124,9 @@ export default {
         }
       ]
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -136,26 +136,14 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
-    selectedLibraryItem() {
-      return this.$store.state.selectedLibraryItem || {}
-    },
-    selectedLibraryItemId() {
-      return this.selectedLibraryItem.id
-    },
-    media() {
-      return this.libraryItem?.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
+        if (tab.experimental && !this.showExperimentalFeatures) return false
         if (tab.mediaType && this.mediaType !== tab.mediaType) return false
         if (tab.admin && !this.userIsAdminOrUp) return false
 
         if (tab.id === 'tools' && this.isMissing) return false
-        if (tab.id === 'chapters' && this.isEBookOnly) return false
 
         if ((tab.id === 'tools' || tab.id === 'files') && this.userCanDownload) return true
         if (tab.id !== 'tools' && tab.id !== 'files' && this.userCanUpdate) return true
@@ -163,6 +151,9 @@ export default {
         return false
       })
     },
+    height() {
+      return Math.min(this.availableHeight, 650)
+    },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
       return _tab ? _tab.component : ''
@@ -170,11 +161,20 @@ export default {
     isMissing() {
       return this.selectedLibraryItem.isMissing
     },
-    isEBookOnly() {
+    selectedLibraryItem() {
-      return this.media.ebookFile && !this.media.tracks?.length
+      return this.$store.state.selectedLibraryItem || {}
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem.id
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
     },
     mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
     },
     title() {
       return this.mediaMetadata.title || 'No Title'

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 @close="closeModal" />
+      <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" keep-open />
       <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`" @click="clickAddChapters">{{ $strings.ButtonAddChapters }}</ui-btn>
+        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">{{ $strings.ButtonAddChapters }}</ui-btn>
       </div>
     </div>
   </div>
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
     },
     chapters() {
       return this.media.chapters || []
@@ -32,15 +32,6 @@ 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>
+</script>

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

@@ -1,31 +1,30 @@
 <template>
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
-    <div class="flex flex-col sm:flex-row mb-4">
+    <div class="flex flex-wrap">
-      <div class="relative self-center">
+      <div class="relative">
-        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
         <!-- book cover overlay -->
         <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
           <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
-          <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
+          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
             <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
               <span class="material-icons text-2xl">delete</span>
             </ui-tooltip>
           </div>
         </div>
       </div>
-      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
+      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
         <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"
-              <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
+              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
-              <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
+              ><span class="material-icons text-2xl inline-block md:!hidden">upload</span></ui-file-input
-            </ui-file-input>
+            >
           </div>
-
           <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
+            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
-            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
           </form>
         </div>
 
@@ -37,10 +36,10 @@
           </div>
 
           <div v-if="showLocalCovers" class="flex items-center justify-center pb-2">
-            <template v-for="localCoverFile in localCovers">
+            <template v-for="cover in localCovers">
-              <div :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
+              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
                 <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
-                  <covers-preview-cover :src="localCoverFile.localPath" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                 </div>
               </div>
             </template>
@@ -49,23 +48,23 @@
       </div>
     </div>
     <form @submit.prevent="submitSearchForm">
-      <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
+      <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-48 flex-grow p-1">
+        <div class="w-48 px-1">
           <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
-        <div class="w-72 flex-grow p-1">
+        <div class="w-72 px-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 flex-grow p-1">
+        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 px-1">
           <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
+        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
-    <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">
+    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
       <template v-for="cover in coversFound">
-        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
         </div>
       </template>
@@ -129,7 +128,7 @@ export default {
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
-      return [{ text: 'All', value: 'all' }, ...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
+      return [...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
     },
     searchTitleLabel() {
       if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@@ -140,19 +139,16 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     libraryItemId() {
-      return this.libraryItem?.id || null
+      return this.libraryItem ? this.libraryItem.id : null
-    },
-    libraryItemUpdatedAt() {
-      return this.libraryItem?.updatedAt || null
     },
     mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
     },
     isPodcast() {
       return this.mediaType == 'podcast'
     },
     media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
     },
     coverPath() {
       return this.media.coverPath
@@ -161,14 +157,11 @@ export default {
       return this.media.metadata || {}
     },
     libraryFiles() {
-      return this.libraryItem?.libraryFiles || []
+      return this.libraryItem ? this.libraryItem.libraryFiles || [] : []
     },
     userCanUpload() {
       return this.$store.getters['user/getUserCanUpload']
     },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
     userToken() {
       return this.$store.getters['user/getToken']
     },
@@ -176,8 +169,8 @@ export default {
       return this.libraryFiles
         .filter((f) => f.fileType === 'image')
         .map((file) => {
-          const _file = { ...file }
+          var _file = { ...file }
-          _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
+          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
           return _file
         })
     }
@@ -226,63 +219,82 @@ export default {
         this.coversFound = []
         this.hasSearched = false
       }
-      this.imageUrl = ''
+      this.imageUrl = this.media.coverPath || ''
       this.searchTitle = this.mediaMetadata.title || ''
       this.searchAuthor = this.mediaMetadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else this.provider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
+      else this.provider = localStorage.getItem('book-provider') || 'google'
     },
     removeCover() {
-      if (!this.coverPath) {
+      if (!this.media.coverPath) {
+        this.imageUrl = ''
         return
       }
-      this.isProcessing = true
+      this.updateCover('')
-      this.$axios
-        .$delete(`/api/items/${this.libraryItemId}/cover`)
-        .then(() => {})
-        .catch((error) => {
-          console.error('Failed to remove cover', error)
-          if (error.response?.data) {
-            this.$toast.error(error.response.data)
-          }
-        })
-        .finally(() => {
-          this.isProcessing = false
-        })
     },
     submitForm() {
       this.updateCover(this.imageUrl)
     },
     async updateCover(cover) {
-      if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
+      if (cover === this.coverPath) {
-        this.$toast.error('Invalid URL')
+        console.warn('Cover has not changed..', cover)
         return
       }
 
       this.isProcessing = true
-      this.$axios
+      var success = false
-        .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
+
-        .then(() => {
+      if (!cover) {
-          this.imageUrl = ''
+        // Remove cover
-          this.$toast.success('Update Successful')
+        success = await this.$axios
+          .$delete(`/api/items/${this.libraryItemId}/cover`)
+          .then(() => true)
+          .catch((error) => {
+            console.error('Failed to remove cover', error)
+            if (error.response && error.response.data) {
+              this.$toast.error(error.response.data)
+            }
+            return false
+          })
+      } else if (cover.startsWith('http:') || cover.startsWith('https:')) {
+        // Download cover from url and use
+        success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, { url: cover }).catch((error) => {
+          console.error('Failed to download cover from url', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
         })
-        .catch((error) => {
+      } else {
-          console.error('Failed to update cover', error)
+        // Update local cover url
-          this.$toast.error(error.response?.data || 'Failed to update cover')
+        const updatePayload = {
-        })
+          cover
-        .finally(() => {
+        }
-          this.isProcessing = false
+        success = await this.$axios.$patch(`/api/items/${this.libraryItemId}/cover`, updatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
         })
+      }
+      if (success) {
+        this.$toast.success('Update Successful')
+        // this.$emit('close')
+      } else {
+        this.imageUrl = this.media.coverPath || ''
+      }
+      this.isProcessing = false
     },
     getSearchQuery() {
       var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor || ''}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
       if (this.isPodcast) searchQuery += '&podcast=1'
       return searchQuery
     },
     persistProvider() {
       try {
-        localStorage.setItem('book-cover-provider', this.provider)
+        localStorage.setItem('book-provider', this.provider)
       } catch (error) {
         console.error('PersistProvider', error)
       }
@@ -305,19 +317,7 @@ export default {
       this.hasSearched = true
     },
     setCover(coverFile) {
-      this.isProcessing = true
+      this.updateCover(coverFile.metadata.path)
-      this.$axios
-        .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
-        .then(() => {
-          this.$toast.success('Update Successful')
-        })
-        .catch((error) => {
-          console.error('Failed to set local cover', error)
-          this.$toast.error(error.response?.data || 'Failed to set cover')
-        })
-        .finally(() => {
-          this.isProcessing = false
-        })
     }
   }
 }

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

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

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

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

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

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

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

@@ -22,7 +22,7 @@
     </div>
     <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
-        <cards-book-match-card :key="index" :book="res" :current-book-duration="currentBookDuration" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+        <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
       </template>
     </div>
     <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
@@ -32,7 +32,7 @@
         </div>
         <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</p>
       </div>
-      <ui-checkbox v-model="selectAll" :label="$strings.LabelSelectAll" checkbox-bg="bg" @input="selectAllToggled" />
+      <ui-checkbox v-model="selectAll" 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">{{ $strings.LabelNew }}</p>
+              <p class="text-center text-gray-200">New</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" class="ml-0.5">
+            <div v-if="media.coverPath">
-              <p class="text-center text-gray-200">{{ $strings.LabelCurrent }}</p>
+              <p class="text-center text-gray-200">Current</p>
-              <a :href="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" target="_blank" class="bg-primary">
+              <a :href="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" target="_blank" class="bg-primary">
-                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, 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-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
+            <ui-text-input-with-label v-model="selectedMatch.narrator" :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-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
+            <ui-text-input-with-label v-model="selectedMatch.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 ? $strings.LabelExplicitChecked : $strings.LabelExplicitUnchecked }}</p>
+            <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>
           </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 ? $strings.LabelAbridgedChecked : $strings.LabelAbridgedUnchecked }}</p>
+            <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>
           </div>
         </div>
 
@@ -280,9 +280,6 @@ 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
@@ -293,31 +290,22 @@ export default {
       return this.$strings.LabelSearchTitle
     },
     media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
     },
     mediaMetadata() {
       return this.media.metadata || {}
     },
-    currentBookDuration() {
-      if (this.isPodcast) return 0
-      return this.media.duration || 0
-    },
     mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
     },
     isPodcast() {
       return this.mediaType == 'podcast'
     },
-    narrators() {
-      return this.filterData.narrators || []
-    },
     genres() {
-      const currentGenres = this.filterData.genres || []
+      const filterData = this.$store.state.libraries.filterData || {}
+      const currentGenres = filterData.genres || []
       const selectedMatchGenres = this.selectedMatch.genres || []
-      return [...new Set([...currentGenres, ...selectedMatchGenres])]
+      return [...new Set([...currentGenres ,...selectedMatchGenres])]
-    },
-    tags() {
-      return this.filterData.tags || []
     }
   },
   methods: {
@@ -336,22 +324,10 @@ 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)}`
+      if (this.isPodcast) return `term=${this.searchTitle}`
-      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${encodeURIComponent(this.searchTitle)}`
+      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${encodeURIComponent(this.searchAuthor)}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
-      if (this.libraryItemId) searchQuery += `&id=${this.libraryItemId}`
       return searchQuery
     },
     submitSearch() {
@@ -453,9 +429,7 @@ export default {
       this.searchTitle = this.libraryItem.media.metadata.title
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else {
+      else this.provider = localStorage.getItem('book-provider') || 'google'
-        this.provider = this.getDefaultBookProvider()
-      }
 
       // Prefer using ASIN if set and using audible provider
       if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
@@ -487,12 +461,6 @@ 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)
@@ -522,10 +490,7 @@ export default {
           } else if (key === 'author' && !this.isPodcast) {
             var authors = this.selectedMatch[key]
             if (!Array.isArray(authors)) {
-              authors = authors
+              authors = authors.split(',').map((au) => au.trim())
-                .split(',')
-                .map((au) => au.trim())
-                .filter((au) => !!au)
             }
             var authorPayload = []
             authors.forEach((authorName) =>
@@ -536,11 +501,11 @@ export default {
             )
             updatePayload.metadata.authors = authorPayload
           } else if (key === 'narrator') {
-            updatePayload.metadata.narrators = this.selectedMatch[key]
+            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
           } else if (key === 'genres') {
             updatePayload.metadata.genres = [...this.selectedMatch[key]]
           } else if (key === 'tags') {
-            updatePayload.tags = this.selectedMatch[key]
+            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
           } else if (key === 'itunesId') {
             updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
           } else {
@@ -563,11 +528,24 @@ export default {
       // Persist in local storage
       localStorage.setItem('selectedMatchUsage', JSON.stringify(this.selectedMatchUsage))
 
-      if (Object.keys(updatePayload).length) {
+      if (updatePayload.metadata.cover) {
-        if (updatePayload.metadata.cover) {
+        const coverPayload = {
-          updatePayload.url = updatePayload.metadata.cover
+          url: updatePayload.metadata.cover
-          delete 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)
@@ -602,7 +580,6 @@ export default {
 .matchListWrapper {
   height: calc(100% - 124px);
 }
-
 @media (min-width: 768px) {
   .matchListWrapper {
     height: calc(100% - 80px);

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="maxEpisodesToDownloadInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
+          <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-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,12 +129,9 @@ 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 = {
@@ -143,11 +140,9 @@ 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

@@ -19,6 +19,20 @@
       </div>
     </div>
 
+    <!-- Split to mp3 -->
+    <div v-if="showMp3Split && showExperimentalFeatures" 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 class="flex items-center">
@@ -65,6 +79,9 @@ export default {
     return {}
   },
   computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     libraryItemId() {
       return this.libraryItem?.id || null
     },
@@ -132,4 +149,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/libraries/EditLibrary.vue

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

client/components/modals/libraries/EditModal.vue

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

client/components/modals/libraries/FolderChooser.vue

@@ -4,37 +4,35 @@
       <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="rootDirs.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
+    <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
-      <p class="font-mono truncate">{{ selectedPath || '/' }}</p>
+      <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
     </div>
-    <div v-if="rootDirs.length" class="relative flex bg-primary bg-opacity-50 p-4 folder-container">
+    <div v-if="allFolders.length" class="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 hover:bg-white/10" @click="goBack">
+        <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center" @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 hover:bg-white/10" :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" :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.path === selectedPath" class="material-icons" style="font-size: 1.1rem">arrow_right</span>
+          <span v-if="dir.dirs && dir.dirs.length && 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 hover:bg-white/10" @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" @click="selectSubDir(dir)">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
         </div>
       </div>
-      <div v-if="loadingDirs" class="absolute inset-0 w-full h-full flex items-center justify-center bg-black/10">
-        <ui-loading-indicator />
-      </div>
     </div>
-    <div v-else-if="initialLoad" class="py-12 text-center">
+    <div v-else-if="loadingFolders" 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">
@@ -53,12 +51,11 @@ export default {
   },
   data() {
     return {
-      initialLoad: false,
+      loadingFolders: false,
-      loadingDirs: false,
+      allFolders: [],
-      isPosix: true,
-      rootDirs: [],
       directories: [],
       selectedPath: '',
+      selectedFullPath: '',
       subdirs: [],
       level: 0,
       currentDir: null,
@@ -92,91 +89,68 @@ export default {
           ...d
         }
       })
+    },
+    isDebian() {
+      return this.Source == 'debian'
+    },
+    Source() {
+      return this.$store.state.Source
     }
   },
   methods: {
-    async goBack() {
+    goBack() {
-      let selPath = this.selectedPath.replace(/^\//, '')
+      var splitPaths = this.selectedPath.split('\\').slice(1)
-      var splitPaths = selPath.split('/')
+      var prev = splitPaths.slice(0, -1).join('\\')
 
-      let previousPath = ''
+      var currDirs = this.allFolders
-      let lookupPath = ''
+      for (let i = 0; i < splitPaths.length; i++) {
-
+        var _dir = currDirs.find((dir) => dir.dirname === splitPaths[i])
-      if (splitPaths.length > 2) {
+        if (_dir && _dir.path.slice(1) === prev) {
-        lookupPath = splitPaths.slice(0, -2).join('/')
+          this.directories = currDirs
-      }
+          this.selectDir(_dir)
-      previousPath = splitPaths.slice(0, -1).join('/')
+          return
-
+        } else if (_dir) {
-      if (!this.isPosix) {
+          currDirs = _dir.dirs
-        // 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)
     },
-    async selectDir(dir) {
+    selectDir(dir) {
       if (dir.isUsed) return
       this.selectedPath = dir.path
+      this.selectedFullPath = dir.fullPath
       this.level = dir.level
-      this.subdirs = await this.fetchDirs(dir.path, dir.level + 1)
+      this.subdirs = dir.dirs
     },
-    async selectSubDir(dir) {
+    selectSubDir(dir) {
       if (dir.isUsed) return
       this.selectedPath = dir.path
+      this.selectedFullPath = dir.fullPath
       this.level = dir.level
       this.directories = this.subdirs
-      this.subdirs = await this.fetchDirs(dir.path, dir.level + 1)
+      this.subdirs = dir.dirs
     },
     selectFolder() {
       if (!this.selectedPath) {
         console.error('No Selected path')
         return
       }
-      if (this.paths.find((p) => p.startsWith(this.selectedPath))) {
+      if (this.paths.find((p) => p.startsWith(this.selectedFullPath))) {
         this.$toast.error(`Oops, you cannot add a parent directory of a folder already added`)
         return
       }
-      this.$emit('select', this.selectedPath)
+      this.$emit('select', this.selectedFullPath)
       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.initialLoad = true
+      this.loadingFolders = true
-      this.rootDirs = await this.fetchDirs('', 0)
+      this.allFolders = await this.$store.dispatch('libraries/loadFolders')
-      this.initialLoad = false
+      this.loadingFolders = false
 
-      this.directories = this.rootDirs
+      this.directories = this.allFolders
       this.subdirs = []
       this.selectedPath = ''
+      this.selectedFullPath = ''
     }
   },
   mounted() {

client/components/modals/libraries/LibraryScannerSettings.vue

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

client/components/modals/libraries/LibrarySettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-3">
+    <div class="flex items-center py-2">
       <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
       <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
         <p class="pl-4 text-base">
@@ -11,69 +11,24 @@
     </div>
     <div class="py-3">
       <div class="flex items-center">
-        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" @input="formUpdated" />
+        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
         <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsDisableWatcherForLibrary }}</p>
       </div>
       <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
     </div>
-    <div v-if="isBookLibrary" class="flex items-center py-3">
+    <div v-if="mediaType == 'book'" class="py-3">
-      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsAudiobooksOnly }}
-          <span class="material-icons icon-text text-sm">info_outlined</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
         <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
       </div>
     </div>
-    <div v-if="isBookLibrary" class="py-3">
+    <div v-if="mediaType == 'book'" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
         <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
       </div>
     </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsHideSingleBookSeries }}
-            <span class="material-icons icon-text text-sm">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-    </div>
-    <div 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>
 
@@ -90,14 +45,9 @@ export default {
     return {
       provider: null,
       useSquareBookCovers: false,
-      enableWatcher: false,
+      disableWatcher: false,
       skipMatchingMediaWithAsin: false,
-      skipMatchingMediaWithIsbn: false,
+      skipMatchingMediaWithIsbn: false
-      audiobooksOnly: false,
-      epubsAllowScriptedContent: false,
-      hideSingleBookSeries: false,
-      onlyShowLaterBooksInContinueSeries: false,
-      podcastSearchRegion: 'us'
     }
   },
   computed: {
@@ -110,12 +60,6 @@ export default {
     mediaType() {
       return this.library.mediaType
     },
-    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
@@ -126,14 +70,9 @@ export default {
       return {
         settings: {
           coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
-          disableWatcher: !this.enableWatcher,
+          disableWatcher: !!this.disableWatcher,
           skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
-          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn,
+          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
-          audiobooksOnly: !!this.audiobooksOnly,
-          epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
-          hideSingleBookSeries: !!this.hideSingleBookSeries,
-          onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
-          podcastSearchRegion: this.podcastSearchRegion
         }
       }
     },
@@ -142,18 +81,13 @@ export default {
     },
     init() {
       this.useSquareBookCovers = this.librarySettings.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-      this.enableWatcher = !this.librarySettings.disableWatcher
+      this.disableWatcher = !!this.librarySettings.disableWatcher
       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() {
     this.init()
   }
 }
-</script>
+</script>

client/components/modals/libraries/LibraryTools.vue

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

client/components/modals/playlists/AddCreateModal.vue

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

client/components/modals/podcast/EpisodeFeed.vue

@@ -16,11 +16,11 @@
           v-for="(episode, index) in episodesList"
           :key="index"
           class="relative"
-          :class="getIsEpisodeDownloaded(episode) ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          :class="itemEpisodeMap[episode.cleanUrl] ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
           @click="toggleSelectEpisode(episode)"
         >
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="getIsEpisodeDownloaded(episode)" class="material-icons text-success text-xl">download_done</span>
+            <span v-if="itemEpisodeMap[episode.cleanUrl]" class="material-icons text-success text-xl">download_done</span>
             <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
@@ -33,13 +33,13 @@
               <div class="break-words">{{ episode.title }}</div>
               <widgets-podcast-type-indicator :type="episode.episodeType" />
             </div>
-            <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
+            <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>
         </div>
       </div>
       <div class="flex justify-end pt-4">
-        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" :label="selectAllLabel" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
+        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" label="Select all episodes" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
         <ui-btn v-if="!allDownloaded" :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
         <p v-else class="text-success text-base px-2 py-4">All episodes are downloaded</p>
       </div>
@@ -68,9 +68,7 @@ export default {
       selectAll: false,
       search: null,
       searchTimeout: null,
-      searchText: null,
+      searchText: null
-      downloadedEpisodeGuidMap: {},
-      downloadedEpisodeUrlMap: {}
     }
   },
   watch: {
@@ -95,91 +93,53 @@ export default {
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
     allDownloaded() {
-      return !this.episodesCleaned.some((episode) => !this.getIsEpisodeDownloaded(episode))
+      return !this.episodesCleaned.some((episode) => !this.itemEpisodeMap[episode.cleanUrl])
     },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
     },
     buttonText() {
-      if (!this.episodesSelected.length) return this.$strings.LabelNoEpisodesSelected
+      if (!this.episodesSelected.length) return 'No Episodes Selected'
-      if (this.episodesSelected.length === 1) return `${this.$strings.LabelDownload} ${this.$strings.LabelEpisode.toLowerCase()}`
+      return `Download ${this.episodesSelected.length} Episode${this.episodesSelected.length > 1 ? 's' : ''}`
-      return this.$getString('LabelDownloadNEpisodes', [this.episodesSelected.length])
     },
     itemEpisodes() {
-      return this.libraryItem?.media.episodes || []
+      if (!this.libraryItem) return []
+      return this.libraryItem.media.episodes || []
+    },
+    itemEpisodeMap() {
+      var map = {}
+      this.itemEpisodes.forEach((item) => {
+        if (item.enclosure) map[item.enclosure.url.split('?')[0]] = true
+      })
+      return map
     },
     episodesList() {
       return this.episodesCleaned.filter((episode) => {
         if (!this.searchText) return true
-        return episode.title?.toLowerCase().includes(this.searchText) || episode.subtitle?.toLowerCase().includes(this.searchText)
+        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
       })
-    },
-    selectAllLabel() {
-      if (this.episodesList.length === this.episodesCleaned.length) {
-        return this.$strings.LabelSelectAllEpisodes
-      }
-      const episodesNotDownloaded = this.episodesList.filter((ep) => !this.getIsEpisodeDownloaded(ep)).length
-      return this.$getString('LabelSelectEpisodesShowing', [episodesNotDownloaded])
     }
   },
   methods: {
-    getIsEpisodeDownloaded(episode) {
-      if (episode.guid && !!this.downloadedEpisodeGuidMap[episode.guid]) {
-        return true
-      }
-      if (this.downloadedEpisodeUrlMap[episode.cleanUrl]) {
-        return true
-      }
-      return false
-    },
-    /**
-     * UPDATE: As of v2.4.5 guid is used for matching existing downloaded episodes if it is found on the RSS feed.
-     * Fallback to checking the clean url
-     * @see https://github.com/advplyr/audiobookshelf/issues/2207
-     *
-     * RSS feed episode url is used for matching with existing downloaded episodes.
-     * Some RSS feeds include timestamps in the episode url (e.g. patreon) that can change on requests.
-     * These need to be removed in order to detect the same episode each time the feed is pulled.
-     *
-     * An RSS feed may include an `id` in the query string. In these cases we want to leave the `id`.
-     * @see https://github.com/advplyr/audiobookshelf/issues/1896
-     *
-     * @param {string} url - rss feed episode url
-     * @returns {string} rss feed episode url without dynamic query strings
-     */
-    getCleanEpisodeUrl(url) {
-      let queryString = url.split('?')[1]
-      if (!queryString) return url
-
-      const searchParams = new URLSearchParams(queryString)
-      for (const p of Array.from(searchParams.keys())) {
-        if (p !== 'id') searchParams.delete(p)
-      }
-
-      if (!searchParams.toString()) return url
-      return `${url}?${searchParams.toString()}`
-    },
     inputUpdate() {
       clearTimeout(this.searchTimeout)
       this.searchTimeout = setTimeout(() => {
-        if (!this.search?.trim()) {
+        if (!this.search || !this.search.trim()) {
           this.searchText = ''
-          this.checkSetIsSelectedAll()
           return
         }
         this.searchText = this.search.toLowerCase().trim()
-        this.checkSetIsSelectedAll()
       }, 500)
     },
     toggleSelectAll(val) {
-      for (const episode of this.episodesList) {
+      for (const episode of this.episodesCleaned) {
-        if (this.getIsEpisodeDownloaded(episode)) this.selectedEpisodes[episode.cleanUrl] = false
+        if (this.itemEpisodeMap[episode.cleanUrl]) this.selectedEpisodes[episode.cleanUrl] = false
         else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
       }
     },
     checkSetIsSelectedAll() {
-      for (const episode of this.episodesList) {
+      for (const episode of this.episodesCleaned) {
-        if (!this.getIsEpisodeDownloaded(episode) && !this.selectedEpisodes[episode.cleanUrl]) {
+        if (!this.itemEpisodeMap[episode.cleanUrl] && !this.selectedEpisodes[episode.cleanUrl]) {
           this.selectAll = false
           return
         }
@@ -187,19 +147,19 @@ export default {
       this.selectAll = true
     },
     toggleSelectEpisode(episode) {
-      if (this.getIsEpisodeDownloaded(episode)) return
+      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
       this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
       this.checkSetIsSelectedAll()
     },
     submit() {
-      let episodesToDownload = []
+      var episodesToDownload = []
       if (this.episodesSelected.length) {
         episodesToDownload = this.episodesSelected.map((cleanUrl) => this.episodesCleaned.find((ep) => ep.cleanUrl == cleanUrl))
       }
 
-      const payloadSize = JSON.stringify(episodesToDownload).length
+      var payloadSize = JSON.stringify(episodesToDownload).length
-      const sizeInMb = payloadSize / 1024 / 1024
+      var sizeInMb = payloadSize / 1024 / 1024
-      const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      var sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
       console.log('Request size', sizeInMb)
       if (sizeInMb > 4.99) {
         return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
@@ -214,29 +174,22 @@ export default {
           this.show = false
         })
         .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to download episodes'
           console.error('Failed to download episodes', error)
           this.processing = false
-          this.$toast.error(error.response?.data || 'Failed to download episodes')
+          this.$toast.error(errorMsg)
 
           this.selectedEpisodes = {}
           this.selectAll = false
         })
     },
     init() {
-      this.downloadedEpisodeGuidMap = {}
-      this.downloadedEpisodeUrlMap = {}
-
-      this.itemEpisodes.forEach((episode) => {
-        if (episode.guid) this.downloadedEpisodeGuidMap[episode.guid] = episode.id
-        if (episode.enclosure?.url) this.downloadedEpisodeUrlMap[this.getCleanEpisodeUrl(episode.enclosure.url)] = episode.id
-      })
-
       this.episodesCleaned = this.episodes
         .filter((ep) => ep.enclosure?.url)
         .map((_ep) => {
           return {
             ..._ep,
-            cleanUrl: this.getCleanEpisodeUrl(_ep.enclosure.url)
+            cleanUrl: _ep.enclosure.url.split('?')[0]
           }
         })
       this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))

client/components/modals/podcast/ViewEpisode.vue

@@ -15,8 +15,8 @@
           <p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
         </div>
       </div>
-      <p dir="auto" class="text-lg font-semibold mb-6">{{ title }}</p>
+      <p class="text-lg font-semibold mb-6">{{ title }}</p>
-      <div v-if="description" dir="auto" class="default-style" v-html="description" />
+      <div v-if="description" 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">
+      <div class="w-full p-1 default-style">
         <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="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
+        <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
         <p class="text-xs text-gray-400">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
       </div>
     </template>

client/components/modals/rssfeed/OpenCloseModal.vue

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

client/components/modals/rssfeed/ViewFeedModal.vue

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

client/components/player/PlayerPlaybackControls.vue

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

client/components/player/PlayerTrackBar.vue

@@ -57,6 +57,7 @@ export default {
   },
   watch: {
     duration: {
+      immediate: true,
       handler() {
         this.setChapterTicks()
       }
@@ -204,14 +205,10 @@ 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 lg:top-0 right-0 lg:right-2 flex items-center h-full">
+      <div class="absolute -top-10 md: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 sm:block" />
+          <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
         </ui-tooltip>
 
-        <ui-tooltip v-if="!hideSleepTimer" direction="top" :text="$strings.LabelSleepTimer">
+        <ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
-          <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')">
+          <div class="cursor-pointer 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>
-          </button>
+          </div>
         </ui-tooltip>
 
-        <ui-tooltip v-if="!isPodcast && !hideBookmarks" direction="top" :text="$strings.LabelViewBookmarks">
+        <ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
-          <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')">
+          <div class="cursor-pointer 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>
-          </button>
+          </div>
         </ui-tooltip>
 
         <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewChapters">
-          <button :aria-label="$strings.LabelViewChapters" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
+          <div class="cursor-pointer 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>
-          </button>
+          </div>
         </ui-tooltip>
 
         <ui-tooltip v-if="playerQueueItems.length" direction="top" :text="$strings.LabelViewQueue">
-          <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')">
+          <button 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">
-          <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">
+          <div class="cursor-pointer 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>
-          </button>
+          </div>
         </ui-tooltip>
       </div>
 
@@ -52,8 +52,8 @@
       <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
       <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 px-2 truncate">
+      <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;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
+        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ currentChapterIndex + 1 }} of {{ 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>
@@ -78,9 +78,7 @@ export default {
     },
     sleepTimerSet: Boolean,
     sleepTimerRemaining: Number,
-    isPodcast: Boolean,
+    isPodcast: Boolean
-    hideBookmarks: Boolean,
-    hideSleepTimer: Boolean
   },
   data() {
     return {
@@ -370,4 +368,4 @@ export default {
     left: 100%;
   }
 }
-</style>
+</style>

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 id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />
+        <p 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" />
 
@@ -131,14 +131,4 @@ export default {
     }
   }
 }
-</script>
+</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,11 +1,11 @@
 <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-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 right-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52">
-      <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)">
+      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
         <p class="text-sm truncate">{{ file }}</p>
       </div>
     </div>
-    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-96">
+    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 right-10 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-96">
       <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
         <p class="text-xs">
           <strong>{{ key }}</strong
@@ -14,44 +14,39 @@
       </div>
     </div>
 
-    <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">
+    <div v-if="comicMetadata" class="absolute top-0 right-52 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
-      <span class="material-icons text-xl">menu</span>
-    </div>
-    <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'">
+    <div 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" style="right: 156px" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
-      <span class="material-icons text-xl">download</span>
+      <span class="material-icons text-xl">menu</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">
+    <div class="absolute top-0 right-20 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" />
+      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
-      <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
     </div>
 
-    <div class="w-full h-full relative">
+    <div class="overflow-hidden m-auto comicwrapper relative">
-      <div v-show="canGoPrev" ref="prevButton" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
+      <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
         <div 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" 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 v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
         <div 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 ref="imageContainer" class="w-full h-full relative overflow-auto">
+      <div class="h-full flex justify-center">
-        <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
+        <img v-if="mainImg" :src="mainImg" class="object-contain comicimg" />
-          <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>
     </div>
+
+    <!-- <div v-show="loading" class="w-screen h-screen absolute top-0 left-0 bg-black bg-opacity-20 flex items-center justify-center">
+      <ui-loading-indicator />
+    </div> -->
   </div>
 </template>
 
@@ -60,23 +55,13 @@ 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'
 })
 
 export default {
   props: {
-    libraryItem: {
+    url: String
-      type: Object,
-      default: () => {}
-    },
-    playerOpen: Boolean,
-    keepProgress: Boolean,
-    fileId: String
   },
   data() {
     return {
@@ -86,13 +71,11 @@ export default {
       mainImg: null,
       page: 0,
       numPages: 0,
-      pageMenuWidth: 256,
       showPageMenu: false,
       showInfoMenu: false,
       loadTimeout: null,
       loadedFirstPage: false,
-      comicMetadata: null,
+      comicMetadata: null
-      scale: 80
     }
   },
   watch: {
@@ -104,85 +87,17 @@ export default {
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    libraryItemId() {
-      return this.libraryItem?.id
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    },
     comicMetadataKeys() {
       return this.comicMetadata ? Object.keys(this.comicMetadata) : []
     },
     canGoNext() {
-      return this.page < this.numPages
+      return this.page < this.numPages - 1
     },
     canGoPrev() {
-      return this.page > 1
+      return this.page > 0
-    },
-    userMediaProgress() {
-      if (!this.libraryItemId) return
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
-    },
-    savedPage() {
-      if (!this.keepProgress) return 0
-
-      // Validate ebookLocation is a number
-      if (!this.userMediaProgress?.ebookLocation || isNaN(this.userMediaProgress.ebookLocation)) return 0
-      return Number(this.userMediaProgress.ebookLocation)
-    },
-    cleanedPageNames() {
-      return (
-        this.pages?.map((p) => {
-          if (p.length > 50) {
-            let firstHalf = p.slice(0, 22)
-            let lastHalf = p.slice(p.length - 23)
-            return `${firstHalf} ... ${lastHalf}`
-          }
-          return p
-        }) || []
-      )
-    },
-    canScaleUp() {
-      return this.scale < MAX_SCALE
-    },
-    canScaleDown() {
-      return this.scale > MIN_SCALE
     }
   },
   methods: {
-    clickShowPageMenu() {
-      this.showInfoMenu = false
-      this.showPageMenu = !this.showPageMenu
-    },
-    clickShowInfoMenu() {
-      this.showPageMenu = false
-      this.showInfoMenu = !this.showInfoMenu
-    },
-    updateProgress() {
-      if (!this.keepProgress) return
-
-      if (!this.numPages) {
-        console.error('Num pages not loaded')
-        return
-      }
-      if (this.savedPage === this.page) {
-        return
-      }
-
-      const payload = {
-        ebookLocation: this.page,
-        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
-      }
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload, { progress: false }).catch((error) => {
-        console.error('ComicReader.updateProgress failed:', error)
-      })
-    },
     clickOutside() {
       if (this.showPageMenu) this.showPageMenu = false
       if (this.showInfoMenu) this.showInfoMenu = false
@@ -195,15 +110,12 @@ export default {
       if (!this.canGoPrev) return
       this.setPage(this.page - 1)
     },
-    setPage(page) {
+    setPage(index) {
-      if (page <= 0 || page > this.numPages) {
+      if (index < 0 || index > this.numPages - 1) {
         return
       }
-      this.showPageMenu = false
+      var filename = this.pages[index]
-      this.showInfoMenu = false
+      this.page = index
-      const filename = this.pages[page - 1]
-      this.page = page
-      this.updateProgress()
       return this.extractFile(filename)
     },
     setLoadTimeout() {
@@ -233,11 +145,10 @@ export default {
     },
     async extract() {
       this.loading = true
-      var buff = await this.$axios.$get(this.ebookUrl, {
+      console.log('Extracting', this.url)
-        responseType: 'blob',
+
-        headers: {
+      var buff = await this.$axios.$get(this.url, {
-          Authorization: `Bearer ${this.userToken}`
+        responseType: 'blob'
-        }
       })
       const archive = await Archive.open(buff)
       const originalFilesObject = await archive.getFilesObject()
@@ -253,28 +164,9 @@ export default {
 
       this.numPages = this.pages.length
 
-      // Calculate page menu size
-      const largestFilename = this.cleanedPageNames
-        .map((p) => p)
-        .sort((a, b) => a.length - b.length)
-        .pop()
-      const pEl = document.createElement('p')
-      pEl.innerText = largestFilename
-      pEl.style.fontSize = '0.875rem'
-      pEl.style.opacity = 0
-      pEl.style.position = 'absolute'
-      document.body.appendChild(pEl)
-      const textWidth = pEl.getBoundingClientRect()?.width
-      if (textWidth) {
-        this.pageMenuWidth = textWidth + (16 + 5 + 2 + 5)
-      }
-      pEl.remove()
-
       if (this.pages.length) {
         this.loading = false
-
+        await this.setPage(0)
-        const startPage = this.savedPage > 0 && this.savedPage <= this.numPages ? this.savedPage : 1
-        await this.setPage(startPage)
         this.loadedFirstPage = true
       } else {
         this.$toast.error('Unable to extract pages')
@@ -320,8 +212,8 @@ export default {
     },
     parseImageFilename(filename) {
       var basename = Path.basename(filename, Path.extname(filename))
-      var numbersinpath = basename.match(/\d+/g)
+      var numbersinpath = basename.match(/\d{1,5}/g)
-      if (!numbersinpath?.length) {
+      if (!numbersinpath || !numbersinpath.length) {
         return {
           index: -1,
           filename
@@ -334,7 +226,7 @@ export default {
       }
     },
     parseFilenames(filenames) {
-      const acceptableImages = ['.jpeg', '.jpg', '.png', '.webp']
+      const acceptableImages = ['.jpeg', '.jpg', '.png']
       var imageFiles = filenames.filter((f) => {
         return acceptableImages.includes((Path.extname(f) || '').toLowerCase())
       })
@@ -348,42 +240,24 @@ 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() {},
-    const prevButton = this.$refs.prevButton
+  beforeDestroy() {}
-    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>
 
 <style scoped>
 .pagemenu {
-  max-height: calc(100% - 48px);
+  max-height: calc(100vh - 60px);
 }
-</style>
+.comicimg {
+  height: calc(100vh - 40px);
+  margin: auto;
+}
+.comicwrapper {
+  width: 100vw;
+  height: calc(100vh - 40px);
+  margin-top: 20px;
+}
+</style>

client/components/readers/EpubReader.vue

@@ -1,15 +1,15 @@
 <template>
-  <div id="epub-reader" class="h-full w-full">
+  <div class="h-full w-full">
     <div class="h-full flex items-center justify-center">
-      <button type="button" aria-label="Previous page" class="w-24 max-w-24 h-full hidden sm:flex items-center overflow-x-hidden justify-center opacity-50 hover:opacity-100">
+      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center overflow-x-hidden justify-center">
-        <span v-if="hasPrev" class="material-icons text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
-      </button>
+      </div>
       <div id="frame" class="w-full" style="height: 80%">
         <div id="viewer"></div>
       </div>
-      <button type="button" aria-label="Next page" class="w-24 max-w-24 h-full hidden sm:flex items-center justify-center overflow-x-hidden opacity-50 hover:opacity-100">
+      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center justify-center overflow-x-hidden">
-        <span v-if="hasNext" class="material-icons text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
-      </button>
+      </div>
     </div>
   </div>
 </template>
@@ -24,166 +24,58 @@ import ePub from 'epubjs'
  */
 export default {
   props: {
+    url: String,
     libraryItem: {
       type: Object,
       default: () => {}
-    },
+    }
-    playerOpen: Boolean,
-    keepProgress: Boolean,
-    fileId: String
   },
   data() {
     return {
       windowWidth: 0,
-      windowHeight: 0,
       /** @type {ePub.Book} */
       book: null,
       /** @type {ePub.Rendition} */
-      rendition: null,
+      rendition: null
-      chapters: [],
-      ereaderSettings: {
-        theme: 'dark',
-        font: 'serif',
-        fontScale: 100,
-        lineSpacing: 115,
-        spread: 'auto',
-        textStroke: 0
-      }
-    }
-  },
-  watch: {
-    playerOpen() {
-      this.resize()
     }
   },
   computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     /** @returns {string} */
     libraryItemId() {
       return this.libraryItem?.id
     },
-    allowScriptedContent() {
-      return this.$store.getters['libraries/getLibraryEpubsAllowScriptedContent']
-    },
     hasPrev() {
       return !this.rendition?.location?.atStart
     },
     hasNext() {
       return !this.rendition?.location?.atEnd
     },
+    /** @returns {Array<ePub.NavItem>} */
+    chapters() {
+      return this.book ? this.book.navigation.toc : []
+    },
     userMediaProgress() {
       if (!this.libraryItemId) return
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
-    savedEbookLocation() {
-      if (!this.keepProgress) return null
-      if (!this.userMediaProgress?.ebookLocation) return null
-      // Validate ebookLocation is an epubcfi
-      if (!String(this.userMediaProgress.ebookLocation).startsWith('epubcfi')) return null
-      return this.userMediaProgress.ebookLocation
-    },
     localStorageLocationsKey() {
       return `ebookLocations-${this.libraryItemId}`
     },
     readerWidth() {
       if (this.windowWidth < 640) return this.windowWidth
       return this.windowWidth - 200
-    },
-    readerHeight() {
-      if (this.windowHeight < 400 || !this.playerOpen) return this.windowHeight
-      return this.windowHeight - 164
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    },
-    themeRules() {
-      const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
-
-      const lineSpacing = this.ereaderSettings.lineSpacing / 100
-
-      const fontScale = this.ereaderSettings.fontScale / 100
-
-      const textStroke = this.ereaderSettings.textStroke / 100
-
-      return {
-        '*': {
-          color: `${fontColor}!important`,
-          'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important',
-          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
-        },
-        a: {
-          color: `${fontColor}!important`
-        }
-      }
     }
   },
   methods: {
-    updateSettings(settings) {
-      this.ereaderSettings = settings
-
-      if (!this.rendition) return
-
-      this.applyTheme()
-
-      const fontScale = settings.fontScale || 100
-      this.rendition.themes.fontSize(`${fontScale}%`)
-      this.rendition.themes.font(settings.font)
-      this.rendition.spread(settings.spread || 'auto')
-    },
     prev() {
-      if (!this.rendition?.manager) return
       return this.rendition?.prev()
     },
     next() {
-      if (!this.rendition?.manager) return
       return this.rendition?.next()
     },
     goToChapter(href) {
-      if (!this.rendition?.manager) return
       return this.rendition?.display(href)
     },
-    /** @returns {object} Returns the chapter that the `position` in the book is in */
-    findChapterFromPosition(chapters, position) {
-      let foundChapter
-      for (let i = 0; i < chapters.length; i++) {
-        if (position >= chapters[i].start && (!chapters[i + 1] || position < chapters[i + 1].start)) {
-          foundChapter = chapters[i]
-          if (chapters[i].subitems && chapters[i].subitems.length > 0) {
-            return this.findChapterFromPosition(chapters[i].subitems, position, foundChapter)
-          }
-          break
-        }
-      }
-      return foundChapter
-    },
-    /** @returns {Array} Returns an array of chapters that only includes chapters with query results */
-    async searchBook(query) {
-      const chapters = structuredClone(await this.chapters)
-      const searchResults = await Promise.all(this.book.spine.spineItems.map((item) => item.load(this.book.load.bind(this.book)).then(item.find.bind(item, query)).finally(item.unload.bind(item))))
-      const mergedResults = [].concat(...searchResults)
-
-      mergedResults.forEach((chapter) => {
-        chapter.start = this.book.locations.percentageFromCfi(chapter.cfi)
-        const foundChapter = this.findChapterFromPosition(chapters, chapter.start)
-        if (foundChapter) foundChapter.searchResults.push(chapter)
-      })
-
-      let filteredResults = chapters.filter(function f(o) {
-        if (o.searchResults.length) return true
-        if (o.subitems.length) {
-          return (o.subitems = o.subitems.filter(f)).length
-        }
-      })
-      return filteredResults
-    },
     keyUp(e) {
       const rtl = this.book.package.metadata.direction === 'rtl'
       if ((e.keyCode || e.which) == 37) {
@@ -198,8 +90,7 @@ export default {
      * @param {string} payload.ebookProgress - eBook Progress Percentage
      */
     updateProgress(payload) {
-      if (!this.keepProgress) return
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload, { progress: false }).catch((error) => {
         console.error('EpubReader.updateProgress failed:', error)
       })
     },
@@ -290,7 +181,7 @@ export default {
     },
     /** @param {string} location - CFI of the new location */
     relocated(location) {
-      if (this.savedEbookLocation === location.start.cfi) {
+      if (this.userMediaProgress?.ebookLocation === location.start.cfi) {
         return
       }
 
@@ -310,43 +201,43 @@ export default {
       const reader = this
 
       /** @type {ePub.Book} */
-      reader.book = new ePub(reader.ebookUrl, {
+      reader.book = new ePub(reader.url, {
         width: this.readerWidth,
-        height: this.readerHeight - 50,
+        height: window.innerHeight - 50
-        openAs: 'epub',
-        requestHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
       })
 
       /** @type {ePub.Rendition} */
       reader.rendition = reader.book.renderTo('viewer', {
         width: this.readerWidth,
-        height: this.readerHeight * 0.8,
+        height: window.innerHeight * 0.8
-        allowScriptedContent: this.allowScriptedContent,
-        spread: 'auto',
-        snap: true,
-        manager: 'continuous',
-        flow: 'paginated'
       })
 
       // load saved progress
-      reader.rendition.display(this.savedEbookLocation || reader.book.locations.start)
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
 
-      reader.rendition.on('rendered', () => {
+      // load style
-        this.applyTheme()
+      reader.rendition.themes.default({ '*': { color: '#fff!important' } })
-      })
 
       reader.book.ready.then(() => {
         // set up event listeners
         reader.rendition.on('relocated', reader.relocated)
         reader.rendition.on('keydown', reader.keyUp)
 
+        let touchStart = 0
+        let touchEnd = 0
         reader.rendition.on('touchstart', (event) => {
-          this.$emit('touchstart', event)
+          touchStart = event.changedTouches[0].screenX
         })
+
         reader.rendition.on('touchend', (event) => {
-          this.$emit('touchend', event)
+          touchEnd = event.changedTouches[0].screenX
+          const touchDistanceX = Math.abs(touchEnd - touchStart)
+          if (touchStart < touchEnd && touchDistanceX > 120) {
+            this.next()
+          }
+          if (touchStart > touchEnd && touchDistanceX > 120) {
+            this.prev()
+          }
         })
 
         // load ebook cfi locations
@@ -358,98 +249,21 @@ export default {
             this.checkSaveLocations(reader.book.locations.save())
           })
         }
-        this.getChapters()
       })
     },
-    getChapters() {
-      // Load the list of chapters in the book. See https://github.com/futurepress/epub.js/issues/759
-      const toc = this.book?.navigation?.toc || []
-
-      const tocTree = []
-
-      const resolveURL = (url, relativeTo) => {
-        // see https://github.com/futurepress/epub.js/issues/1084
-        // HACK-ish: abuse the URL API a little to resolve the path
-        // the base needs to be a valid URL, or it will throw a TypeError,
-        // so we just set a random base URI and remove it later
-        const base = 'https://example.invalid/'
-        return new URL(url, base + relativeTo).href.replace(base, '')
-      }
-
-      const basePath = this.book.packaging.navPath || this.book.packaging.ncxPath
-
-      const createTree = async (toc, parent) => {
-        const promises = toc.map(async (tocItem, i) => {
-          const href = resolveURL(tocItem.href, basePath)
-          const id = href.split('#')[1]
-          const item = this.book.spine.get(href)
-          await item.load(this.book.load.bind(this.book))
-          const el = id ? item.document.getElementById(id) : item.document.body
-
-          const cfi = item.cfiFromElement(el)
-
-          parent[i] = {
-            title: tocItem.label.trim(),
-            subitems: [],
-            href,
-            cfi,
-            start: this.book.locations.percentageFromCfi(cfi),
-            end: null, // set by flattenChapters()
-            id: null, // set by flattenChapters()
-            searchResults: []
-          }
-
-          if (tocItem.subitems) {
-            await createTree(tocItem.subitems, parent[i].subitems)
-          }
-        })
-        await Promise.all(promises)
-      }
-      return createTree(toc, tocTree).then(() => {
-        this.chapters = tocTree
-      })
-    },
-    flattenChapters(chapters) {
-      // Convert the nested epub chapters into something that looks like audiobook chapters for player-ui
-      const unwrap = (chapters) => {
-        return chapters.reduce((acc, chapter) => {
-          return chapter.subitems ? [...acc, chapter, ...unwrap(chapter.subitems)] : [...acc, chapter]
-        }, [])
-      }
-      let flattenedChapters = unwrap(chapters)
-
-      flattenedChapters = flattenedChapters.sort((a, b) => a.start - b.start)
-      for (let i = 0; i < flattenedChapters.length; i++) {
-        flattenedChapters[i].id = i
-        if (i < flattenedChapters.length - 1) {
-          flattenedChapters[i].end = flattenedChapters[i + 1].start
-        } else {
-          flattenedChapters[i].end = 1
-        }
-      }
-      return flattenedChapters
-    },
     resize() {
       this.windowWidth = window.innerWidth
-      this.windowHeight = window.innerHeight
+      this.rendition?.resize(this.readerWidth, window.innerHeight * 0.8)
-      this.rendition?.resize(this.readerWidth, this.readerHeight * 0.8)
-    },
-    applyTheme() {
-      if (!this.rendition) return
-      this.rendition.getContents().forEach((c) => {
-        c.addStylesheetRules(this.themeRules)
-      })
     }
   },
-  mounted() {
-    this.windowWidth = window.innerWidth
-    this.windowHeight = window.innerHeight
-    window.addEventListener('resize', this.resize)
-    this.initEpub()
-  },
   beforeDestroy() {
     window.removeEventListener('resize', this.resize)
     this.book?.destroy()
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    window.addEventListener('resize', this.resize)
+    this.initEpub()
   }
 }
 </script>

client/components/readers/MobiReader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
     <div class="h-full max-h-full w-full">
-      <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-16 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+      <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-12 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
         <iframe title="html-viewer" width="100%"> Loading </iframe>
       </div>
     </div>
@@ -15,30 +15,12 @@ import defaultCss from '@/assets/ebooks/basic.js'
 
 export default {
   props: {
-    libraryItem: {
+    url: String
-      type: Object,
-      default: () => {}
-    },
-    playerOpen: Boolean,
-    fileId: String
   },
   data() {
     return {}
   },
-  computed: {
+  computed: {},
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    libraryItemId() {
-      return this.libraryItem?.id
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    }
-  },
   methods: {
     addHtmlCss() {
       let iframe = document.getElementsByTagName('iframe')[0]
@@ -96,11 +78,8 @@ export default {
     },
     async initMobi() {
       // Fetch mobi file as blob
-      var buff = await this.$axios.$get(this.ebookUrl, {
+      var buff = await this.$axios.$get(this.url, {
-        responseType: 'blob',
+        responseType: 'blob'
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
       })
       var reader = new FileReader()
       reader.onload = async (event) => {