Merge branch 'master' into sqlite

.devcontainer/Dockerfile

@@ -1,12 +1,4 @@
-# [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
-FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base
-
-# Setup the node environment
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:16
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get install ffmpeg gnupg2 -y
 ENV NODE_ENV=development
-
-# Install additional OS packages.
-RUN apt-get update && \
-  DEBIAN_FRONTEND=noninteractive apt-get -y install --no-install-recommends \
-    curl tzdata ffmpeg && \
-  rm -rf /var/lib/apt/lists/*

.devcontainer/dev.js

@@ -1,10 +0,0 @@
-// Using port 3333 is important when running the client web app separately
-const Path = require('path')
-module.exports.config = {
-  Port: 3333,
-  ConfigPath: Path.resolve('config'),
-  MetadataPath: Path.resolve('metadata'),
-  FFmpegPath: '/usr/bin/ffmpeg',
-  FFProbePath: '/usr/bin/ffprobe',
-  SkipBinariesCheck: true
-}

.devcontainer/devcontainer.json

@@ -1,40 +1,12 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-	"name": "Audiobookshelf",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
-		// Append -bullseye or -buster to pin to an OS version.
-		// Use -bullseye variants on local arm64/Apple Silicon.
-		"args": {
-			"VARIANT": "20"
-		}
+    "build": { "dockerfile": "Dockerfile" },
+    "mounts": [
+        "source=abs-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
+    ],
+    "features": {
+        "fish": "latest"
 	},
-	"mounts": [
-		"source=abs-server-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
-		"source=abs-client-node_modules,target=${containerWorkspaceFolder}/client/node_modules,type=volume"
-	],
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [
-		3000,
-		3333
-	],
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "sh .devcontainer/post-create.sh",
-	// Configure tool-specific properties.
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			// Add the IDs of extensions you want installed when the container is created.
-			"extensions": [
-				"dbaeumer.vscode-eslint",
-				"octref.vetur"
-			]
-		}
-	}
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+	"extensions": [
+		"eamodio.gitlens"
+	]
 }

.devcontainer/post-create.sh

@@ -1,29 +0,0 @@
-#!/bin/sh
-
-# Mark the working directory as safe for use with git
-git config --global --add safe.directory $PWD
-
-# If there is no dev.js file, create it
-if [ ! -f dev.js ]; then
-  cp .devcontainer/dev.js .
-fi
-
-# Update permissions for node_modules folders
-# https://code.visualstudio.com/remote/advancedcontainers/improve-performance#_use-a-targeted-named-volume
-if [ -d node_modules ]; then
-  sudo chown $(id -u):$(id -g) node_modules
-fi
-
-if [ -d client/node_modules ]; then
-  sudo chown $(id -u):$(id -g) client/node_modules
-fi
-
-# Install packages for the server
-if [ -f package.json ]; then
-    npm ci
-fi
-
-# Install packages and build the client
-if [ -f client/package.json ]; then
-    (cd client; npm ci; npm run generate)
-fi

.editorconfig

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

.gitattributes

@@ -1,5 +0,0 @@
-# Set the default behavior, in case people don't have core.autocrlf set.
-* text=auto
-
-# Declare files that will always have CRLF line endings on checkout.
-.devcontainer/post-create.sh text eol=lf

.github/ISSUE_TEMPLATE/bug.yaml

@@ -1,50 +1,40 @@
 name: 🐞 Bug Report
-description: File a bug/issue and help us improve Audiobookshelf
-title: '[Bug]: '
-labels: ['bug', 'triage']
+description: File a bug/issue
+title: "[Bug]: "
+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?
-      placeholder: Tell us what you see!
-    validations:
-      required: true
-  - type: textarea
-    id: what-was-expected
-    attributes:
-      label: What did you expect to happen?
-      placeholder: Tell us what you expected to see! Be as descriptive as you can and include screenshots if applicable.
+      label: Describe the issue
+      description: What happened & what did you expect to happen
     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
-  - 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.'
+     required: true

.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]: '
-labels: ['enhancement']
+title: "[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'
-  - 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
+      value: "### Mobile app features should be requested [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
   - type: textarea
     id: describe
     attributes:
-      label: Describe the Feature/Enhancement
-      description: Please help us understand what you want.
-      placeholder: What is your vision?
+      label: Describe the feature/enhancement
     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)
-        run: npm install -g @yao-pkg/pkg
+      - name: install 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

@@ -1,22 +1,17 @@
 .env
-/dev.js
-**/node_modules/
+dev.js
+node_modules/
 /config/
 /audiobooks/
 /audiobooks2/
 /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/launch.json

@@ -1,44 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug server",
-      "runtimeExecutable": "npm",
-      "args": [
-        "run",
-        "dev"
-      ],
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug client (nuxt)",
-      "runtimeExecutable": "npm",
-      "args": [
-        "run",
-        "dev"
-      ],
-      "cwd": "${workspaceFolder}/client",
-      "skipFiles": [
-        "${workspaceFolder}/<node_internals>/**"
-      ]
-    }
-  ],
-  "compounds": [
-    {
-      "name": "Debug server and client (nuxt)",
-      "configurations": [
-        "Debug server",
-        "Debug client (nuxt)"
-      ]
-    }
-  ]
-}

.vscode/settings.json

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

.vscode/tasks.json

@@ -1,40 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"path": "client",
-			"type": "npm",
-			"script": "generate",
-			"detail": "nuxt generate",
-			"label": "Build client",
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		},
-		{
-			"dependsOn": [
-				"Build client"
-			],
-			"type": "npm",
-			"script": "dev",
-			"detail": "nodemon --watch server index.js",
-			"label": "Run server",
-			"group": {
-				"kind": "test",
-				"isDefault": true
-			}
-		},
-		{
-			"path": "client",
-			"type": "npm",
-			"script": "dev",
-			"detail": "nuxt",
-			"label": "Run Live-reload client",
-			"group": {
-				"kind": "test",
-				"isDefault": false
-			}
-		}
-	]
-}

Dockerfile

@@ -1,15 +1,15 @@
 ### STAGE 0: Build client ###
-FROM node:20-alpine AS build
+FROM node:16-alpine AS build
 WORKDIR /client
 COPY /client /client
 RUN npm ci && npm cache clean --force
 RUN npm run generate
 
 ### STAGE 1: Build server ###
-FROM node:20-alpine
+FROM sandreas/tone:v0.1.2 AS tone
+FROM node:16-alpine
 
 ENV NODE_ENV=production
-
 RUN apk update && \
     apk add --no-cache --update \
     curl \
@@ -17,9 +17,9 @@ RUN apk update && \
     ffmpeg \
     make \
     python3 \
-    g++ \
-    tini
+    g++
 
+COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
 COPY index.js package* /
 COPY server server
@@ -29,6 +29,9 @@ RUN npm ci --only=production
 RUN apk del make python3 g++
 
 EXPOSE 80
-
-ENTRYPOINT ["tini", "--"]
+HEALTHCHECK \
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/healthcheck || exit 1
 CMD ["node", "index.js"]

build/debian/DEBIAN/preinst

@@ -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.2/tone-0.1.2-linux-x64.tar.gz --output-document=tone-0.1.2-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.2-linux-x64.tar.gz --strip-components=1
+  rm tone-0.1.2-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

@@ -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>
@@ -58,6 +58,9 @@
           <span class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
           {{ $strings.ButtonPlay }}
         </ui-btn>
+        <ui-tooltip v-if="userIsAdminOrUp && isBookLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
+        </ui-tooltip>
         <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
           <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
@@ -72,11 +75,8 @@
         <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
         </ui-tooltip>
-
-        <ui-context-menu-dropdown v-if="contextMenuItems.length && !processingBatch" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
-
-        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom" class="flex items-center">
-          <span class="material-icons text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom">
+          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
         </ui-tooltip>
       </div>
     </div>
@@ -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')
     },
@@ -157,90 +160,9 @@ export default {
     },
     isHttps() {
       return location.protocol === 'https:' || process.env.NODE_ENV === 'development'
-    },
-    contextMenuItems() {
-      if (!this.userIsAdminOrUp) return []
-
-      const options = [
-        {
-          text: this.$strings.ButtonQuickMatch,
-          action: 'quick-match'
-        }
-      ]
-
-      if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
-        options.push({
-          text: 'Quick Embed Metadata',
-          action: 'quick-embed'
-        })
-      }
-
-      options.push({
-        text: 'Re-Scan',
-        action: 'rescan'
-      })
-
-      return options
     }
   },
   methods: {
-    requestBatchQuickEmbed() {
-      const payload = {
-        message: this.$strings.MessageConfirmQuickEmbed,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/tools/batch/embed-metadata`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                console.log('Audio metadata embed started')
-                this.cancelSelectionMode()
-              })
-              .catch((error) => {
-                console.error('Audio metadata embed failed', error)
-                const errorMsg = error.response.data || 'Failed to embed metadata'
-                this.$toast.error(errorMsg)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    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,51 +225,38 @@ 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]),
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
-        yesButtonText: this.$strings.ButtonDelete,
-        yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
-        callback: (confirmed, hardDelete) => {
-          if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
-            this.$store.commit('setProcessingBatch', true)
-
-            this.$axios
-              .$post(`/api/items/batch/delete?hard=${hardDelete ? 1 : 0}`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                this.$toast.success('Batch delete success')
-                this.$store.commit('globals/resetSelectedMediaItems', [])
-                this.$eventBus.$emit('bookshelf_clear_selection')
-              })
-              .catch((error) => {
-                console.error('Batch delete failed', error)
-                this.$toast.error('Batch delete failed')
-              })
-              .finally(() => {
-                this.$store.commit('setProcessingBatch', false)
-              })
-          }
-        },
-        type: 'yesNo'
+      const audiobookText = this.numMediaItemsSelected > 1 ? `these ${this.numMediaItemsSelected} items` : 'this item'
+      const confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the items from Audiobookshelf`
+      if (confirm(confirmMsg)) {
+        this.$store.commit('setProcessingBatch', true)
+        this.$axios
+          .$post(`/api/items/batch/delete`, {
+            libraryItemIds: this.selectedMediaItems.map((i) => i.id)
+          })
+          .then(() => {
+            this.$toast.success('Batch delete success!')
+            this.$store.commit('setProcessingBatch', false)
+            this.$store.commit('globals/resetSelectedMediaItems', [])
+            this.$eventBus.$emit('bookshelf_clear_selection')
+          })
+          .catch((error) => {
+            this.$toast.error('Batch delete failed')
+            console.error('Failed to batch delete', error)
+            this.$store.commit('setProcessingBatch', false)
+          })
       }
-      this.$store.commit('globals/setConfirmPrompt', payload)
     },
     batchEditClick() {
       this.$router.push('/batch')

client/components/app/BookShelfCategorized.vue

@@ -1,30 +1,39 @@
 <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 color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</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">
-      <template v-for="(shelf, index) in supportedShelves">
-        <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)">
-          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
+      <template v-for="(shelf, index) in shelves">
+        <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" :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>
       </template>
     </div>
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
-      <template v-for="(shelf, index) in supportedShelves">
-        <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)" />
+      <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'" @selectEntity="(payload) => selectEntity(payload, index)" />
       </template>
     </div>
   </div>
@@ -46,23 +55,19 @@ export default {
       scannerParseSubtitle: false,
       wrapperClientWidth: 0,
       shelves: [],
-      lastItemIndexSelected: -1,
-      tempIsScanning: false
+      lastItemIndexSelected: -1
     }
   },
   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 +86,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 +168,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
         })
@@ -185,8 +185,8 @@ export default {
       this.shelves = categories
     },
     async setShelvesFromSearch() {
-      const shelves = []
-      if (this.results.books?.length) {
+      var shelves = []
+      if (this.results.books && this.results.books.length) {
         shelves.push({
           id: 'books',
           label: 'Books',
@@ -196,7 +196,7 @@ export default {
         })
       }
 
-      if (this.results.podcasts?.length) {
+      if (this.results.podcasts && this.results.podcasts.length) {
         shelves.push({
           id: 'podcasts',
           label: 'Podcasts',
@@ -206,7 +206,7 @@ export default {
         })
       }
 
-      if (this.results.series?.length) {
+      if (this.results.series && this.results.series.length) {
         shelves.push({
           id: 'series',
           label: 'Series',
@@ -221,7 +221,7 @@ export default {
           })
         })
       }
-      if (this.results.tags?.length) {
+      if (this.results.tags && this.results.tags.length) {
         shelves.push({
           id: 'tags',
           label: 'Tags',
@@ -236,7 +236,7 @@ export default {
           })
         })
       }
-      if (this.results.authors?.length) {
+      if (this.results.authors && this.results.authors.length) {
         shelves.push({
           id: 'authors',
           label: 'Authors',
@@ -250,32 +250,17 @@ export default {
           })
         })
       }
-      if (this.results.narrators?.length) {
-        shelves.push({
-          id: 'narrators',
-          label: 'Narrators',
-          labelStringKey: 'LabelNarrators',
-          type: 'narrators',
-          entities: this.results.narrators.map((n) => {
-            return {
-              ...n,
-              type: 'narrator'
-            }
-          })
-        })
-      }
       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)
-        })
-        .finally(() => {
-          this.tempIsScanning = false
+          this.$toast.error('Failed to start scan')
         })
     },
     userUpdated(user) {
@@ -284,8 +269,7 @@ export default {
       }
       if (user.mediaProgress.length) {
         const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-listening')
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-reading')
+        this.removeItemsFromContinueListening(mediaProgressToHide)
       }
     },
     libraryItemAdded(libraryItem) {
@@ -335,16 +319,9 @@ export default {
     },
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
-
-      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
-      if (!recentlyAddedShelf) return
-
-      // Add new library item to the recently added shelf
-      for (const libraryItem of libraryItems) {
-        if (libraryItem.libraryId === this.currentLibraryId && !recentlyAddedShelf.entities.some((ent) => ent.id === libraryItem.id)) {
-          // Add to front of array
-          recentlyAddedShelf.entities.unshift(libraryItem)
-        }
+      // TODO: Check if audiobook would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
       }
     },
     libraryItemsUpdated(items) {
@@ -352,12 +329,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 +340,8 @@ export default {
         }
       })
     },
-    removeItemsFromContinueListeningReading(mediaProgressItems, categoryId) {
-      const continueListeningShelf = this.shelves.find((s) => s.id === categoryId)
+    removeItemsFromContinueListening(mediaProgressItems) {
+      const continueListeningShelf = this.shelves.find((s) => s.id === 'continue-listening')
       if (continueListeningShelf) {
         if (continueListeningShelf.type === 'book') {
           continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
@@ -385,6 +356,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 +390,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 +400,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 +414,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,62 @@
 <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 class="w-full h-full pt-6e">
+    <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-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" />
-          </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-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>
     </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">
-      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
+    <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-6xl text-white">chevron_right</span>
     </div>
   </div>
 </template>
@@ -60,6 +69,9 @@ export default {
       type: Object,
       default: () => {}
     },
+    sizeMultiplier: Number,
+    bookCoverWidth: Number,
+    bookCoverAspectRatio: Number,
     continueListeningShelf: Boolean
   },
   data() {
@@ -72,8 +84,11 @@ export default {
     }
   },
   computed: {
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+    bookCoverHeight() {
+      return this.bookCoverWidth * this.bookCoverAspectRatio
+    },
+    shelfHeight() {
+      return this.bookCoverHeight + 48
     },
     paddingLeft() {
       if (window.innerWidth < 768) return 1
@@ -197,13 +212,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>
@@ -172,44 +163,12 @@ export default {
           text: this.$strings.LabelAddedAt,
           value: 'addedAt'
         },
-        {
-          text: this.$strings.LabelLastBookAdded,
-          value: 'lastBookAdded'
-        },
-        {
-          text: this.$strings.LabelLastBookUpdated,
-          value: 'lastBookUpdated'
-        },
         {
           text: this.$strings.LabelTotalDuration,
           value: 'totalDuration'
         }
       ]
     },
-    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,15 +178,9 @@ export default {
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
-    libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
     currentLibraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
@@ -312,33 +265,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 }) {
-      if (action === 'export-opml') {
-        this.exportOPML()
-      }
-    },
-    exportOPML() {
-      this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
-    },
-    seriesContextMenuAction({ action }) {
+    seriesContextMenuAction(action) {
       if (action === 'open-rss-feed') {
         this.showOpenSeriesRSSFeed()
       } else if (action === 're-add-to-continue-listening') {
@@ -385,11 +315,7 @@ export default {
         const payload = {}
         if (author.asin) payload.asin = author.asin
         else payload.q = author.name
-
-        payload.region = 'us'
-        if (this.libraryProvider.startsWith('audible.')) {
-          payload.region = this.libraryProvider.split('.').pop() || 'us'
-        }
+        console.log('Payload', payload, 'author', author)
 
         this.$eventBus.$emit(`searching-author-${author.id}`, true)
 
@@ -482,9 +408,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">
-        <button type="button" class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</button>
+      <div class="flex justify-between">
+        <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 v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
+      <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" :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,
-      tempIsScanning: false,
-      cardWidth: 0,
-      cardHeight: 0,
-      resizeObserver: null
+      lastItemIndexSelected: -1
     }
   },
   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
-      return 64 * this.sizeMultiplier
+      if (this.bookshelfWidth < 640) return 32
+      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() {
-      return 16
+    shelfDividerHeightIndex() {
+      return 6
     },
     shelfHeight() {
-      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
-      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
+      if (this.isAlternativeBookshelfView) {
+        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']
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    isScanningLibrary() {
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
+      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.entityWidth / baseSize
     }
   },
   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) {
-      await this.cardsHelpers.setCardSize()
+    settingsUpdated(settings) {
       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)
-        })
-        .finally(() => {
-          this.tempIsScanning = false
+          this.$toast.error('Failed to start scan')
         })
     }
   },
-  async mounted() {
-    await this.cardsHelpers.setCardSize()
+  mounted() {
     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'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-        </svg>
+    <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
-        <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">format_list_bulleted</span>
+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">format_list_bulleted</span>
 
-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
-        <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-        </svg>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
-        <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-        </svg>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+      </svg>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
-        <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-2xl">collections_bookmark</span>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-2xl">collections_bookmark</span>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
-        <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2.5xl">queue_music</span>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg class="w-6 h-6" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+        />
+      </svg>
 
-        <p class="pt-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" />
-      </nuxt-link>
+      <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg class="w-6 h-6" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
-          />
-        </svg>
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="abs-icons icon-podcast text-xl"></span>
 
-        <p class="pt-1 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" />
-      </nuxt-link>
+      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">record_voice_over</span>
+    <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-xl">album</span>
 
-        <p class="pt-1 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" />
-      </nuxt-link>
+      <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="abs-icons icon-podcast text-xl"></span>
+    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2.5xl">queue_music</span>
 
-        <p class="pt-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" />
-      </nuxt-link>
+      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-xl">album</span>
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">file_download</span>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">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" />
-      </nuxt-link>
+      <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
 
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">file_download</span>
+    <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
+      <span class="material-icons text-2xl">warning</span>
 
-        <p class="pt-1.5 text-center leading-4" style="font-size: 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" />
-      </nuxt-link>
+      <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
+        <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
+      </div>
+    </nuxt-link>
 
-      <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
-        <span class="material-icons text-2xl">warning</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
-
-        <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' }">
+    <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' }">
       <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">
-      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </div>
-    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0 w-full">
-        <div class="flex items-center">
-          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
-            {{ title }}
-          </nuxt-link>
-          <widgets-explicit-indicator v-if="isExplicit" />
-        </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+    </nuxt-link>
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
+      <div class="min-w-0">
+        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
+          {{ title }}
+        </nuxt-link>
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
           <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 v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
-          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
-            <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 class="flex items-center">
+            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
+              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" 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
@@ -81,12 +81,14 @@ export default {
       sleepTimerRemaining: 0,
       sleepTimer: null,
       displayTitle: null,
-      currentPlaybackRate: 1,
-      syncFailedToast: null,
-      coverAspectRatio: 1
+      initialPlaybackRate: 1,
+      syncFailedToast: null
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
     isSquareCover() {
       return this.coverAspectRatio === 1
     },
@@ -118,31 +120,25 @@ export default {
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
-    streamEpisode() {
-      if (!this.$store.state.streamEpisodeId) return null
-      const episodes = this.streamLibraryItem.media.episodes || []
-      return episodes.find((ep) => ep.id === this.$store.state.streamEpisodeId)
-    },
     libraryItemId() {
-      return this.streamLibraryItem?.id || null
+      return this.streamLibraryItem ? this.streamLibraryItem.id : null
     },
     media() {
-      return this.streamLibraryItem?.media || {}
+      return this.streamLibraryItem ? this.streamLibraryItem.media || {} : {}
     },
     isPodcast() {
-      return this.streamLibraryItem?.mediaType === 'podcast'
+      return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'podcast' : false
     },
     isMusic() {
-      return this.streamLibraryItem?.mediaType === 'music'
+      return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'music' : false
     },
     isExplicit() {
-      return !!this.mediaMetadata.explicit
+      return this.mediaMetadata.explicit || false
     },
     mediaMetadata() {
       return this.media.metadata || {}
     },
     chapters() {
-      if (this.streamEpisode) return this.streamEpisode.chapters || []
       return this.media.chapters || []
     },
     title() {
@@ -156,8 +152,7 @@ export default {
       return this.streamLibraryItem ? this.streamLibraryItem.libraryId : null
     },
     totalDurationPretty() {
-      // Adjusted by playback rate
-      return this.$secondsToTimestamp(this.totalDuration / this.currentPlaybackRate)
+      return this.$secondsToTimestamp(this.totalDuration)
     },
     podcastAuthor() {
       if (!this.isPodcast) return null
@@ -260,16 +255,12 @@ export default {
       this.playerHandler.setVolume(volume)
     },
     setPlaybackRate(playbackRate) {
-      this.currentPlaybackRate = playbackRate
+      this.initialPlaybackRate = playbackRate
       this.playerHandler.setPlaybackRate(playbackRate)
     },
     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 +338,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 +359,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('nexttrack', this.mediaSessionSeekForward)
+        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionPreviousTrack)
+        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 +370,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 {
@@ -392,20 +384,20 @@ export default {
         libraryItem: session.libraryItem,
         episodeId: session.episodeId
       })
-      this.playerHandler.prepareOpenSession(session, this.currentPlaybackRate)
+      this.playerHandler.prepareOpenSession(session, this.initialPlaybackRate)
     },
     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 +407,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,14 +447,11 @@ 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()
       })
 
-      this.playerHandler.load(libraryItem, episodeId, true, this.currentPlaybackRate, payload.startTime)
+      this.playerHandler.load(libraryItem, episodeId, true, this.initialPlaybackRate, payload.startTime)
     },
     pauseItem() {
       this.playerHandler.pause()
@@ -470,26 +459,17 @@ export default {
     showFailedProgressSyncs() {
       if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
       this.syncFailedToast = this.$toast('Progress is not being synced. Restart playback', { timeout: false, type: 'error' })
-    },
-    sessionClosedEvent(sessionId) {
-      if (this.playerHandler.currentSessionId === sessionId) {
-        console.log('sessionClosedEvent closing current session', sessionId)
-        this.playerHandler.resetPlayer() // Closes player without reporting to server
-        this.$store.commit('setMediaPlaying', null)
-      }
     }
   },
   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 +477,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}`">
-      <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
-        <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-          <!-- Image or placeholder -->
-          <covers-author-image :author="author" />
+  <nuxt-link :to="`/author/${author.id}`">
+    <div @mouseover="mouseover" @mouseleave="mouseleave">
+      <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <!-- Image or placeholder -->
+        <covers-author-image :author="author" />
 
-          <!-- 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">
-            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
-            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</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>
+        <!-- Author name & num books overlay -->
+        <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
         </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>
+      <div v-show="nameBelow" class="w-full py-1 px-2">
+        <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+      </div>
+    </div>
+  </nuxt-link>
 </template>
 
 <script>
@@ -45,14 +43,12 @@ export default {
       default: () => {}
     },
     width: Number,
-    height: {
+    height: Number,
+    sizeMultiplier: {
       type: Number,
-      default: 192
+      default: 1
     },
-    nameBelow: {
-      type: Boolean,
-      default: false
-    }
+    nameBelow: Boolean
   },
   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']
     },
@@ -87,15 +77,6 @@ export default {
     },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {
@@ -111,11 +92,6 @@ export default {
       if (this.asin) payload.asin = this.asin
       else payload.q = this.name
 
-      payload.region = 'us'
-      if (this.libraryProvider.startsWith('audible.')) {
-        payload.region = this.libraryProvider.split('.').pop() || 'us'
-      }
-
       var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
         console.error('Failed', error)
         return null
@@ -141,4 +117,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.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
-        <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
-        <div v-if="book.series?.length" class="flex py-1 -mx-1">
+        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
+        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
+        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
+        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
           <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,
-    currentBookDuration: Number
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -64,27 +65,12 @@ export default {
   },
   computed: {
     bookCovers() {
-      return this.book.covers || []
-    },
-    bookDuration() {
-      return (this.book.duration || 0) * 60
-    },
-    bookDurationComparison() {
-      if (!this.book.duration || !this.currentBookDuration) return ''
-      const currentBookDurationMinutes = Math.floor(this.currentBookDuration / 60)
-      let differenceInMinutes = currentBookDurationMinutes - this.book.duration
-      if (differenceInMinutes < 0) {
-        differenceInMinutes = Math.abs(differenceInMinutes)
-        return this.$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
+      return this.book.covers ? this.book.covers || [] : []
     }
   },
   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: {
-      type: Number,
-      default: 192
-    }
+    height: Number,
+    bookCoverAspectRatio: Number
   },
   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,12 +5,12 @@
       <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" />
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
   </div>
 </template>
@@ -61,19 +61,18 @@ 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
       const html = this.matchText
 
-      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') this.$getString('LabelByAuthor', [html])
+      if (this.matchKey === 'episode') return `<p class="truncate">Episode: ${html}</p>`
+      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'authors') return `by ${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>`
-      if (this.matchKey === 'narrators') return `<p class="truncate">${this.$strings.LabelNarrator}: ${html}</p>`
+      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
       return `${html}`
     }
   },
@@ -90,4 +89,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="w-8 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <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>
       <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 {
-      cancelingScan: false
-    }
+    return {}
   },
   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
-    },
-    isSuccess() {
-      return this.isFinished && !this.isFailed
+      return this.task.isFailed || false
     },
     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);
-  height: 60px;
+  width: calc(100% - 80px);
+  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-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>
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
           <div v-else class="w-full">
-            <p class="px-1 text-sm font-semibold">
-              {{ $strings.LabelDirectory }}
-              <em class="font-normal text-xs pl-2">(auto)</em>
-            </p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
           </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">
-              {{ $strings.LabelDirectory }}
-              <em class="font-normal text-xs pl-2">(auto)</em>
-            </label>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs h-10" />
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
           </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">
-      <ui-loading-indicator :text="nonInteractionLabel" />
+    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
+      <ui-loading-indicator :text="$strings.MessageUploading" />
     </div>
   </div>
 </template>
@@ -77,8 +64,7 @@ export default {
       default: () => {}
     },
     mediaType: String,
-    processing: Boolean,
-    provider: String
+    processing: Boolean
   },
   data() {
     return {
@@ -90,8 +76,7 @@ export default {
       error: '',
       isUploading: false,
       uploadFailed: false,
-      uploadSuccess: false,
-      isFetchingMetadata: false
+      uploadSuccess: 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]
-      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map((part) => this.$sanitizeFilename(part))
-
-      return Path.join(...cleanedOutputPathParts)
-    },
-    isNonInteractable() {
-      return this.isUploading || this.isFetchingMetadata
-    },
-    nonInteractionLabel() {
-      if (this.isUploading) {
-        return this.$strings.MessageUploading
-      } else if (this.isFetchingMetadata) {
-        return this.$strings.LabelFetchingMetadata
+      if (this.itemData.series && this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
+      } else if (this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.title)
+      } else {
+        return this.itemData.title
       }
     }
   },
@@ -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 class="relative" :style="{ height: coverHeight + 'px' }">
-      <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">
-        <covers-preview-cover ref="cover" :src="coverSrc" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      </div>
+  <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="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <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" />
     </div>
 
-    <div class="relative w-full">
-      <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: `0em ${0.5}em` }">
-          <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 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="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: {
-      type: Number,
-      default: 192
-    },
+    height: Number,
+    bookCoverAspectRatio: Number,
     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 :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 -->
-      <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>
-
-      <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 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">
+    <!-- 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 class="absolute cover-bg" ref="coverBg" />
     </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 :style="{ fontSize: 0.9 + 'em' }">
-        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
-          <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
-          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
-        </ui-tooltip>
+    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+        <div class="flex items-center">
+          <span class="truncate">{{ displayTitle }}</span>
+          <widgets-explicit-indicator :explicit="isExplicit" />
+        </div>
       </div>
-      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    </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,10 @@ 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
-      return Math.max(Math.min(1, progressPercent), 0)
+      return this.userProgress ? this.userProgress.progress || 0 : 0
     },
     itemIsFinished() {
-      if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false
     },
     seriesIsFinished() {
@@ -407,7 +339,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 +355,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 +369,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 +476,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 +503,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) {
@@ -591,30 +521,22 @@ export default {
           }
         }
       }
-
-      if (this.userCanDelete) {
-        items.push({
-          func: 'deleteLibraryItem',
-          text: this.$strings.ButtonDelete
-        })
-      }
-
       return items
     },
     _socket() {
       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 +560,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 +604,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 +654,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 +699,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,41 +772,6 @@ 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,
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
-        yesButtonText: this.$strings.ButtonDelete,
-        yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
-        callback: (confirmed, hardDelete) => {
-          if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
-            this.processing = true
-            const axios = this.$axios || this.$nuxt.$axios
-            axios
-              .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
-              .then(() => {
-                this.$toast.success('Item deleted')
-              })
-              .catch((error) => {
-                console.error('Failed to delete item', error)
-                this.$toast.error('Failed to delete item')
-              })
-              .finally(() => {
-                this.processing = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.store.commit('globals/setConfirmPrompt', payload)
-    },
     createMoreMenu() {
       if (!this.$refs.moreIcon) return
 
@@ -932,8 +783,8 @@ export default {
           items: this.moreMenuItems
         },
         created() {
-          this.$on('action', (action) => {
-            if (action.func && _this[action.func]) _this[action.func](action.data)
+          this.$on('action', (func) => {
+            if (_this[func]) _this[func]()
           })
           this.$on('close', () => {
             _this.isMoreMenuOpen = false
@@ -945,7 +796,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 +823,12 @@ export default {
       this.createMoreMenu()
     },
     async clickReadEBook() {
-      const axios = this.$axios || this.$nuxt.$axios
-      var libraryItem = await axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
+      var libraryItem = await this.$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 class="relative" :style="{ height: coverHeight + 'px' }">
-      <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">
-        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+  <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="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <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" />
+    </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' }">
-      <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>
+    <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-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">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    <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 * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -30,10 +28,8 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
-      type: Number,
-      default: 192
-    },
+    height: Number,
+    bookCoverAspectRatio: Number,
     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 class="relative" :style="{ height: coverHeight + 'px' }">
-      <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">
-        <covers-playlist-cover ref="cover" :items="items" :width="cardWidth" :height="coverHeight" />
-      </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 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="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
+    </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>
-
-    <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: `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">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    <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 * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -28,10 +25,8 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: {
-      type: Number,
-      default: 192
-    },
+    height: Number,
+    bookCoverAspectRatio: Number,
     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 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="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="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 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 class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div 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="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 class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
+
+    <div v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />
+
+    <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">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
+    <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 * sizeMultiplier + 'rem' }">{{ displayTitle }}</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: {
-      type: Number,
-      default: 192
-    },
+    height: Number,
+    bookCoverAspectRatio: Number,
     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,23 +78,16 @@ export default {
     },
     displayTitle() {
       if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
-      return this.title || '\u00A0'
+      return this.title
     },
     displaySortLine() {
-      switch (this.orderBy) {
-        case 'addedAt':
-          return `${this.$strings.LabelAdded} ${this.$formatDate(this.addedAt, this.dateFormat)}`
-        case 'totalDuration':
-          return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}`
-        case 'lastBookUpdated':
-          const lastUpdated = Math.max(...this.books.map((x) => x.updatedAt), 0)
-          return `${this.$strings.LabelLastBookUpdated} ${this.$formatDate(lastUpdated, this.dateFormat)}`
-        case 'lastBookAdded':
-          const lastBookAdded = Math.max(...this.books.map((x) => x.addedAt), 0)
-          return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}`
-        default:
-          return null
+      if (this.orderBy === 'addedAt') {
+        // return this.addedAt
+        return 'Added ' + this.$formatDate(this.addedAt, this.dateFormat)
+      } else if (this.orderBy === 'totalDuration') {
+        return 'Duration: ' + this.$elapsedPrettyExtended(this.totalDuration, false)
       }
+      return null
     },
     books() {
       return this.series ? this.series.books || [] : []
@@ -128,18 +108,6 @@ export default {
     seriesBooksFinished() {
       return this.seriesBookProgress.filter((p) => p.isFinished)
     },
-    hasSeriesBookInProgress() {
-      return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0)
-    },
-    seriesPercentInProgress() {
-      if (!this.books.length) return 0
-      let progressPercent = 0
-      this.seriesBookProgress.forEach((progress) => {
-        progressPercent += progress.isFinished ? 1 : progress.progress || 0
-      })
-      progressPercent /= this.books.length
-      return Math.min(1, Math.max(0, progressPercent))
-    },
     isSeriesFinished() {
       return this.books.length === this.seriesBooksFinished.length
     },

client/components/cards/NarratorCard.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-      <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-40">
-          <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>
-</template>
-
-<script>
-export default {
-  props: {
-    narrator: {
-      type: Object,
-      default: () => {}
-    },
-    width: Number,
-    height: {
-      type: Number,
-      default: 100
-    }
-  },
-  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
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
-    }
-  },
-  methods: {}
-}
-</script>

client/components/cards/NarratorSearchCard.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-gray-200">record_voice_over</span>
-    </div>
-    <div class="flex-grow px-2 narratorSearchCardContent h-full">
-      <p class="truncate text-sm">{{ narrator }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    narrator: String
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style scoped>
-.narratorSearchCardContent {
-  width: calc(100% - 40px);
-  height: 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>

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>
-            </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>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
             </div>
           </li>
         </template>

client/components/controls/GlobalSearch.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="">
-    <div class="w-full relative sm:w-80">
-      <form @submit.prevent="submitSearch">
-        <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
-      </form>
-      <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-        <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
-        <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
-      </div>
+  <div class="sm:w-80 w-full relative">
+    <form @submit.prevent="submitSearch">
+      <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+    </form>
+    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
+      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
+      <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
     </div>
-    <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>
@@ -65,15 +63,6 @@
               </nuxt-link>
             </li>
           </template>
-
-          <p v-if="narratorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelNarrators }}</p>
-          <template v-for="narrator in narratorResults">
-            <li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
-                <cards-narrator-search-card :narrator="narrator.name" />
-              </nuxt-link>
-            </li>
-          </template>
         </template>
       </ul>
     </div>
@@ -95,7 +84,6 @@ export default {
       authorResults: [],
       seriesResults: [],
       tagResults: [],
-      narratorResults: [],
       searchTimeout: null,
       lastSearch: null
     }
@@ -105,7 +93,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: {
@@ -126,7 +114,6 @@ export default {
       this.authorResults = []
       this.seriesResults = []
       this.tagResults = []
-      this.narratorResults = []
       this.showMenu = false
       this.isFetching = false
       this.isTyping = false
@@ -155,7 +142,7 @@ export default {
       }
       this.isFetching = true
 
-      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
+      var searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
         console.error('Search error', error)
         return []
       })
@@ -168,7 +155,6 @@ export default {
       this.authorResults = searchResults.authors || []
       this.seriesResults = searchResults.series || []
       this.tagResults = searchResults.tags || []
-      this.narratorResults = searchResults.narrators || []
 
       this.isFetching = false
       if (!this.showMenu) {
@@ -199,8 +185,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) {
-        this.sublist = this.selectedItemSublist
+      if (!newVal) {
+        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,16 +185,6 @@ export default {
           value: 'tracks',
           sublist: true
         },
-        {
-          text: this.$strings.LabelEbooks,
-          value: 'ebooks',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelAbridged,
-          value: 'abridged',
-          sublist: false
-        },
         {
           text: this.$strings.ButtonIssues,
           value: 'issues',
@@ -234,14 +196,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 +205,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 +228,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 +250,21 @@ export default {
       return this.bookItems
     },
     selectedItemSublist() {
-      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
-    },
-    selectedSublistText() {
-      if (!this.sublist) {
-        return ''
-      }
-      const sublistItem = this.selectItems.find((i) => i.value === this.sublist)
-      return sublistItem?.textPlural || sublistItem?.text || ''
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
     },
     selectedText() {
       if (!this.selected) return ''
-      const parts = this.selected.split('.')
-      const filterName = this.selectItems.find((i) => i.value === parts[0])
-      let filterValue = null
+      var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
       if (parts.length > 1) {
-        const decoded = this.$decode(parts[1])
-        if (parts[0] === 'authors') {
-          const author = this.authors.find((au) => au.id == decoded)
+        var decoded = this.$decode(parts[1])
+        if (decoded.startsWith('aut_')) {
+          var author = this.authors.find((au) => au.id == decoded)
           if (author) filterValue = author.name
-        } else if (parts[0] === 'series') {
-          if (decoded === 'no-series') {
-            filterValue = this.$strings.MessageNoSeries
-          } else {
-            const series = this.series.find((se) => se.id == decoded)
-            if (series) filterValue = series.name
-          }
+        } else if (decoded.startsWith('ser_')) {
+          var series = this.series.find((se) => se.id == decoded)
+          if (series) filterValue = series.name
         } else {
           filterValue = decoded
         }
@@ -364,9 +297,6 @@ export default {
     languages() {
       return this.filterData.languages || []
     },
-    publishers() {
-      return this.filterData.publishers || []
-    },
     progress() {
       return [
         {
@@ -389,10 +319,6 @@ export default {
     },
     tracks() {
       return [
-        {
-          id: 'none',
-          name: this.$strings.LabelTracksNone
-        },
         {
           id: 'single',
           name: this.$strings.LabelTracksSingleTrack
@@ -403,26 +329,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 +386,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 +399,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 +423,7 @@ export default {
         return
       }
 
-      const val = option.value
+      var val = option.value
       if (this.selected === val) {
         this.showMenu = false
         return
@@ -535,10 +434,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.libraryFilterMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>
+</script>

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)
-        } catch (error) {
+          localStorage.setItem("volume", val);
+        } catch(error) {
           console.error('Failed to store volume', err)
         }
         this.$emit('input', val)
@@ -146,7 +146,7 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
-    const storageVolume = localStorage.getItem('volume')
+    const storageVolume = localStorage.getItem("volume")
     if (storageVolume) {
       this.volume = parseFloat(storageVolume)
     }

client/components/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' }" />
-        <p class="text-center text-error" :style="{ fontSize: invalidCoverFontSize + 'rem' }">Invalid Cover</p>
+        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </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">
         <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" />
@@ -100,19 +96,12 @@
               </div>
             </div>
             <div v-if="!newUser.permissions.accessAllTags" class="my-4">
-              <div class="flex items-center">
-                <ui-multi-select-dropdown v-model="newUser.itemTagsSelected" :items="itemTags" :label="tagsSelectionText" />
-                <div class="flex items-center pt-4 px-2">
-                  <p class="px-3 font-semibold" id="selected-tags-not-accessible--permissions-toggle">{{ $strings.LabelInvert }}</p>
-                  <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
-                </div>
-              </div>
+              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" :label="$strings.LabelTagsAccessibleToUser" />
             </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" small class="flex items-center" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
+            <ui-btn v-if="isEditingRoot" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
@@ -137,8 +126,7 @@ export default {
       newUser: {},
       isNew: true,
       tags: [],
-      loadingTags: false,
-      unlinkingFromOpenID: false
+      loadingTags: false
     }
   },
   watch: {
@@ -182,7 +170,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
@@ -197,12 +185,6 @@ export default {
           value: t
         }
       })
-    },
-    tagsSelectionText() {
-      return this.newUser.permissions.selectedTagsNotAccessible ? this.$strings.LabelTagsNotAccessibleToUser : this.$strings.LabelTagsAccessibleToUser
-    },
-    hasOpenIDLink() {
-      return !!this.account?.hasOpenIDLink
     }
   },
   methods: {
@@ -210,37 +192,9 @@ 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) {
-          this.newUser.itemTagsSelected = []
-        }
-        this.newUser.permissions.selectedTagsNotAccessible = false
+      if (val && this.newUser.itemTagsAccessible.length) {
+        this.newUser.itemTagsAccessible = []
       }
     },
     fetchAllTags() {
@@ -272,7 +226,7 @@ export default {
         this.$toast.error('Must select at least one library')
         return
       }
-      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsSelected.length) {
+      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsAccessible.length) {
         this.$toast.error('Must select at least one tag')
         return
       }
@@ -291,6 +245,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) => {
@@ -352,29 +307,26 @@ export default {
         delete: type === 'admin',
         upload: type === 'admin',
         accessAllLibraries: true,
-        accessAllTags: true,
-        selectedTagsNotAccessible: false
+        accessAllTags: true
       }
     },
     init() {
       this.fetchAllTags()
-      this.isNew = !this.account
 
+      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,
           permissions: { ...this.account.permissions },
           librariesAccessible: [...(this.account.librariesAccessible || [])],
-          itemTagsSelected: [...(this.account.itemTagsSelected || [])]
+          itemTagsAccessible: [...(this.account.itemTagsAccessible || [])]
         }
       } else {
         this.newUser = {
           username: null,
-          email: null,
           password: null,
           type: 'user',
           isActive: true,
@@ -384,11 +336,9 @@ export default {
             delete: false,
             upload: false,
             accessAllLibraries: true,
-            accessAllTags: true,
-            selectedTagsNotAccessible: false
+            accessAllTags: true
           },
-          librariesAccessible: [],
-          itemTagsSelected: []
+          librariesAccessible: []
         }
       }
     }

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,174 +0,0 @@
-<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 truncate">{{ metadata.filename }}</p>
-        <ui-btn v-if="ffprobeData" small class="ml-2" @click="ffprobeData = null">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">Probe Audio File</ui-btn>
-      </div>
-
-      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
-
-      <template v-if="!ffprobeData">
-        <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" />
-
-        <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>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    audioFile: {
-      type: Object,
-      default: () => {}
-    },
-    libraryItemId: String
-  },
-  data() {
-    return {
-      probingFile: false,
-      ffprobeData: null,
-      copiedToClipboard: false
-    }
-  },
-  watch: {
-    show(newVal) {
-      if (newVal) {
-        this.ffprobeData = null
-        this.copiedToClipboard = false
-        this.probingFile = false
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    metadata() {
-      return this.audioFile?.metadata || {}
-    },
-    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)
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/ChaptersModal.vue

@@ -2,13 +2,13 @@
   <modals-modal v-model="show" name="chapters" :width="600" :height="'unset'">
     <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <template v-for="chap in chapters">
-        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end / _playbackRate <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
+        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
           <p class="chapter-title truncate text-sm md:text-base">
             {{ chap.title }}
           </p>
-          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended((chap.end - chap.start) / _playbackRate) }}</span>
+          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended(chap.end - chap.start) }}</span>
           <span class="flex-grow" />
-          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start / _playbackRate) }}</span>
+          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
 
           <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
         </div>
@@ -28,12 +28,16 @@ export default {
     currentChapter: {
       type: Object,
       default: () => null
-    },
-    playbackRate: Number
+    }
   },
   data() {
     return {}
   },
+  watch: {
+    value(newVal) {
+      this.$nextTick(this.scrollToChapter)
+    }
+  },
   computed: {
     show: {
       get() {
@@ -43,15 +47,11 @@ export default {
         this.$emit('input', val)
       }
     },
-    _playbackRate() {
-      if (!this.playbackRate || isNaN(this.playbackRate)) return 1
-      return this.playbackRate
-    },
     currentChapterId() {
-      return this.currentChapter?.id || null
+      return this.currentChapter ? this.currentChapter.id : null
     },
     currentChapterStart() {
-      return (this.currentChapter?.start || 0) / this._playbackRate
+      return this.currentChapter ? this.currentChapter.start : 0
     }
   },
   methods: {
@@ -61,19 +61,16 @@ export default {
     scrollToChapter() {
       if (!this.currentChapterId) return
 
-      if (this.$refs.container) {
-        const currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+      var container = this.$refs.container
+      if (container) {
+        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
         if (currChapterEl) {
-          const containerHeight = this.$refs.container.clientHeight
-          this.$refs.container.scrollTo({ top: currChapterEl.offsetTop - containerHeight / 2 })
+          var offsetTop = currChapterEl.offsetTop
+          var containerHeight = container.clientHeight
+          container.scrollTo({ top: offsetTop - containerHeight / 2 })
         }
       }
     }
-  },
-  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,25 @@
           </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 v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
+          <p class="mb-1">{{ _session.userId }}</p>
 
           <p class="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-else-if="!isMediaItemShareSession" small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
+        <ui-btn small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -142,14 +140,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'
@@ -163,12 +157,6 @@ export default {
     },
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
-    },
-    isOpenSession() {
-      return !!this._session.open
-    },
-    isMediaItemShareSession() {
-      return this._session.mediaPlayer === 'web-share'
     }
   },
   methods: {
@@ -200,24 +188,6 @@ export default {
           var errMsg = error.response ? error.response.data || '' : ''
           this.$toast.error(errMsg || this.$strings.ToastSessionDeleteFailed)
         })
-    },
-    closeSessionClick() {
-      this.processing = true
-      this.$axios
-        .$post(`/api/session/${this._session.id}/close`)
-        .then(() => {
-          this.$toast.success('Session closed')
-          this.show = false
-          this.$emit('closedSession')
-        })
-        .catch((error) => {
-          console.error('Failed to close session', error)
-          const errMsg = error.response?.data || ''
-          this.$toast.error(errMsg || 'Failed to close open session')
-        })
-        .finally(() => {
-          this.processing = false
-        })
     }
   },
   mounted() {}

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

@@ -9,14 +9,10 @@
     <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <div v-if="!timerSet" class="w-full">
         <template v-for="time in sleepTimes">
-          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time.seconds)">
+          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time)">
             <p class="text-xl text-center">{{ time.text }}</p>
           </div>
         </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>
-        </form>
       </div>
       <div v-else class="w-full p-4">
         <div class="mb-4 flex items-center justify-center">
@@ -52,28 +48,19 @@ export default {
   },
   data() {
     return {
-      customTime: null,
       sleepTimes: [
+        {
+          seconds: 10,
+          text: '10 seconds'
+        },
         {
           seconds: 60 * 5,
           text: '5 minutes'
         },
-        {
-          seconds: 60 * 15,
-          text: '15 minutes'
-        },
-        {
-          seconds: 60 * 20,
-          text: '20 minutes'
-        },
         {
           seconds: 60 * 30,
           text: '30 minutes'
         },
-        {
-          seconds: 60 * 45,
-          text: '45 minutes'
-        },
         {
           seconds: 60 * 60,
           text: '60 minutes'
@@ -85,6 +72,10 @@ export default {
         {
           seconds: 60 * 120,
           text: '2 hours'
+        },
+        {
+          seconds: 60 * 180,
+          text: '3 hours'
         }
       ]
     }
@@ -106,17 +97,8 @@ export default {
     }
   },
   methods: {
-    submitCustomTime() {
-      if (!this.customTime || isNaN(this.customTime) || Number(this.customTime) <= 0) {
-        this.customTime = null
-        return
-      }
-
-      const timeInSeconds = Math.round(Number(this.customTime) * 60)
-      this.setTime(timeInSeconds)
-    },
-    setTime(seconds) {
-      this.$emit('set', seconds)
+    setTime(time) {
+      this.$emit('set', time.seconds)
     },
     increment(amount) {
       this.$emit('increment', amount)

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="flex">
-        <div class="w-40 p-2">
-          <div class="w-full h-45 relative">
-            <covers-author-image :author="authorCopy" />
-            <div v-if="userCanDelete && !processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
-              <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form v-if="author" @submit.prevent="submitForm">
+        <div class="flex">
+          <div class="w-40 p-2">
+            <div class="w-full h-45 relative">
+              <covers-author-image :author="author" />
+              <div v-show="!processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
+                <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="flex-grow">
-          <form @submit.prevent="submitUploadCover" class="flex flex-grow mb-2 p-2">
-            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
-            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
-          </form>
-
-          <form v-if="author" @submit.prevent="submitForm">
+          <div class="flex-grow">
             <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
     }
   },
@@ -89,51 +85,17 @@ export default {
     },
     title() {
       return this.$strings.HeaderUpdateAuthor
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {
     init() {
-      this.imageUrl = ''
-      this.authorCopy = {
-        ...this.author
-      }
-    },
-    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)
+      this.authorCopy.name = this.author.name
+      this.authorCopy.asin = this.author.asin
+      this.authorCopy.description = this.author.description
+      this.authorCopy.imagePath = this.author.imagePath
     },
     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 +124,21 @@ export default {
       }
       this.processing = false
     },
-    removeCover() {
-      this.processing = true
-      this.$axios
-        .$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
+    async removeCover() {
+      var updatePayload = {
+        imagePath: null
       }
-
       this.processing = true
-      const updatePayload = {
-        url: this.imageUrl
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
+        return null
+      })
+      if (result && result.updated) {
+        this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
+        this.$store.commit('globals/showEditAuthorModal', result.author)
       }
-      this.$axios
-        .$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
-        })
+      this.processing = false
     },
     async searchAuthor() {
       if (!this.authorCopy.name && !this.authorCopy.asin) {
@@ -218,11 +151,6 @@ export default {
       if (this.authorCopy.asin) payload.asin = this.authorCopy.asin
       else payload.q = this.authorCopy.name
 
-      payload.region = 'us'
-      if (this.libraryProvider.startsWith('audible.')) {
-        payload.region = this.libraryProvider.split('.').pop() || 'us'
-      }
-
       var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
         console.error('Failed', error)
         return null
@@ -232,11 +160,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 +171,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">
-        Changelog <a :href="currentTagUrl" target="_blank" class="hover:underline">v{{ currentVersionNumber }}</a> ({{ currentVersionPubDate }})
-      </p>
+      <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }}</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: {
-      type: Object,
-      default: () => {}
+    changelog: String,
+    currentVersion: String
+  },
+  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="w-full flex justify-center mb-2 md:w-auto md:mb-0 md:block">
+          <div class="flex">
+            <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() {
-      return this.media.ebookFile && !this.media.tracks?.length
+    selectedLibraryItem() {
+      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: {
-    closeModal() {
-      this.$emit('close')
-    },
-    clickAddChapters() {
-      if (this.$route.name === 'audiobook-id-chapters' && this.$route.params?.id === this.libraryItem?.id) {
-        this.closeModal()
-      }
-    }
-  }
+  methods: {}
 }
-</script>
+</script>

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

@@ -1,46 +1,44 @@
 <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="relative self-center">
-        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-
+    <div class="flex flex-wrap">
+      <div class="relative">
+        <covers-book-cover :library-item="libraryItem" :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">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected">
-              <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
-              <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
-            </ui-file-input>
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"
+              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
+              ><span class="material-icons text-2xl inline-block md:!hidden">upload</span></ui-file-input
+            >
           </div>
-
           <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input 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>
+            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
           </form>
         </div>
 
-        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white border-opacity-10">
+        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-primary">
           <div class="flex items-center justify-center py-2">
             <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
             <div class="flex-grow" />
             <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
           </div>
 
-          <div v-if="showLocalCovers" class="flex items-center justify-center pb-2">
-            <template v-for="localCoverFile 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 v-if="showLocalCovers" class="flex items-center justify-center">
+            <template v-for="cover in localCovers">
+              <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 +47,23 @@
       </div>
     </div>
     <form @submit.prevent="submitSearchForm">
-      <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
-        <div class="w-48 flex-grow p-1">
+      <div class="flex items-center justify-start -mx-1 h-20">
+        <div class="w-40 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'" 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 +127,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
     },
     searchTitleLabel() {
       if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@@ -140,19 +138,16 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     libraryItemId() {
-      return this.libraryItem?.id || null
-    },
-    libraryItemUpdatedAt() {
-      return this.libraryItem?.updatedAt || null
+      return this.libraryItem ? this.libraryItem.id : 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 +156,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 +168,8 @@ export default {
       return this.libraryFiles
         .filter((f) => f.fileType === 'image')
         .map((file) => {
-          const _file = { ...file }
-          _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
+          var _file = { ...file }
+          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
           return _file
         })
     }
@@ -226,63 +218,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.$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
-        })
+      this.updateCover('')
     },
     submitForm() {
       this.updateCover(this.imageUrl)
     },
     async updateCover(cover) {
-      if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
-        this.$toast.error('Invalid URL')
+      if (cover === this.coverPath) {
+        console.warn('Cover has not changed..', cover)
         return
       }
 
       this.isProcessing = true
-      this.$axios
-        .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
-        .then(() => {
-          this.imageUrl = ''
-          this.$toast.success('Update Successful')
+      var success = false
+
+      if (!cover) {
+        // Remove cover
+        success = await this.$axios
+          .$delete(`/api/items/${this.libraryItemId}/cover`)
+          .then(() => true)
+          .catch((error) => {
+            console.error('Failed to remove cover', error)
+            if (error.response && error.response.data) {
+              this.$toast.error(error.response.data)
+            }
+            return false
+          })
+      } else if (cover.startsWith('http:') || cover.startsWith('https:')) {
+        // Download cover from url and use
+        success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, { url: cover }).catch((error) => {
+          console.error('Failed to download cover from url', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
         })
-        .catch((error) => {
-          console.error('Failed to update cover', error)
-          this.$toast.error(error.response?.data || 'Failed to update cover')
-        })
-        .finally(() => {
-          this.isProcessing = false
+      } else {
+        // Update local cover url
+        const updatePayload = {
+          cover
+        }
+        success = await this.$axios.$patch(`/api/items/${this.libraryItemId}/cover`, updatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
         })
+      }
+      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 +316,7 @@ export default {
       this.hasSearched = true
     },
     setCover(coverFile) {
-      this.isProcessing = true
-      this.$axios
-        .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
-        .then(() => {
-          this.$toast.success('Update Successful')
-        })
-        .catch((error) => {
-          console.error('Failed to set local cover', error)
-          this.$toast.error(error.response?.data || 'Failed to set cover')
-        })
-        .finally(() => {
-          this.isProcessing = false
-        })
+      this.updateCover(coverFile.metadata.path)
     }
   }
 }

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

@@ -7,16 +7,19 @@
 
     <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
       <div class="flex items-center px-4">
+        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">{{ $strings.ButtonRemove }}</ui-btn>
+        <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
+
+        <div class="flex-grow" />
+
         <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
           <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-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="isLibraryScanning" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
         </ui-tooltip>
 
-        <div class="flex-grow" />
-
         <!-- desktop -->
         <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
         <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
@@ -74,15 +77,18 @@ export default {
     mediaMetadata() {
       return this.media.metadata || {}
     },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
     libraryId() {
       return this.libraryItem ? this.libraryItem.libraryId : null
     },
     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: {
@@ -178,6 +184,23 @@ export default {
       }
       return false
     },
+    removeItem() {
+      if (confirm(`Are you sure you want to remove this item?\n\n*Does not delete your files, only removes the item from audiobookshelf`)) {
+        this.isProcessing = true
+        this.$axios
+          .$delete(`/api/items/${this.libraryItemId}`)
+          .then(() => {
+            console.log('Item removed')
+            this.$toast.success('Item Removed')
+            this.$emit('close')
+            this.isProcessing = false
+          })
+          .catch((error) => {
+            console.error('Remove item failed', error)
+            this.isProcessing = false
+          })
+      }
+    },
     checkIsScrollable() {
       this.$nextTick(() => {
         var formWrapper = document.getElementById('formWrapper')

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">{{ $strings.LabelEpisodeTitle }}</th>
-          <th class="text-center w-28">{{ $strings.LabelEpisodeDuration }}</th>
-          <th class="text-center w-28">{{ $strings.LabelEpisodeSize }}</th>
+          <th class="text-left">Sort #</th>
+          <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
+          <th class="text-left">{{ $strings.EpisodeTitle }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeDuration }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeSize }}</th>
         </tr>
         <tr v-for="episode in episodes" :key="episode.id">
-          <td class="text-center w-20 min-w-20">
-            <p>{{ episode.episode }}</p>
+          <td class="text-left">
+            <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

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <tables-library-files-table expanded :library-item="libraryItem" :is-missing="isMissing" in-modal />
+    <tables-library-files-table expanded :files="libraryFiles" :library-item-id="libraryItem.id" :is-missing="isMissing" />
   </div>
 </template>
 
@@ -14,7 +14,8 @@ export default {
   },
   data() {
     return {
-      tracks: []
+      tracks: [],
+      showFullPath: false
     }
   },
   watch: {
@@ -29,6 +30,9 @@ export default {
     media() {
       return this.libraryItem.media || {}
     },
+    libraryFiles() {
+      return this.libraryItem.libraryFiles || []
+    },
     userToken() {
       return this.$store.getters['user/getToken']
     },

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,27 +32,15 @@
         </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">
-            <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
-            <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
-          </div>
-
-          <div class="flex py-2">
-            <div>
-              <p class="text-center text-gray-200">{{ $strings.LabelNew }}</p>
-              <a :href="selectedMatch.cover" target="_blank" class="bg-primary">
-                <covers-preview-cover :src="selectedMatch.cover" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </a>
-            </div>
-            <div v-if="media.coverPath" class="ml-0.5">
-              <p class="text-center text-gray-200">{{ $strings.LabelCurrent }}</p>
-              <a :href="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" target="_blank" class="bg-primary">
-                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrc'](libraryItem, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-              </a>
-            </div>
+        <div v-if="selectedMatchOrig.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
+          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
+            <a :href="selectedMatch.cover" target="_blank" class="w-full bg-primary">
+              <img :src="selectedMatch.cover" class="h-full w-full object-contain" />
+            </a>
           </div>
         </div>
         <div v-if="selectedMatchOrig.title" class="flex items-center py-2">
@@ -79,7 +67,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>
@@ -115,14 +103,14 @@
         <div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
-            <ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
+            <ui-multi-select v-model="selectedMatch.genres" :items="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
             <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p>
           </div>
         </div>
         <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>
@@ -176,18 +164,11 @@
             <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatchOrig.explicit != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.explicit == null }">
+        <div v-if="selectedMatchOrig.explicit != null" class="flex items-center py-2">
           <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>
-          </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>
+          <div class="flex-grow ml-4">
+            <ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? 'Explicit (checked)' : 'Not Explicit (unchecked)' }}</p>
           </div>
         </div>
 
@@ -235,7 +216,6 @@ export default {
         explicit: true,
         asin: true,
         isbn: true,
-        abridged: true,
         // Podcast specific
         itunesPageUrl: true,
         itunesId: true,
@@ -280,9 +260,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 +270,16 @@ 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 selectedMatchGenres = this.selectedMatch.genres || []
-      return [...new Set([...currentGenres, ...selectedMatchGenres])]
-    },
-    tags() {
-      return this.filterData.tags || []
     }
   },
   methods: {
@@ -336,22 +298,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)}`
-      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${encodeURIComponent(this.searchTitle)}`
-      if (this.searchAuthor) searchQuery += `&author=${encodeURIComponent(this.searchAuthor)}`
-      if (this.libraryItemId) searchQuery += `&id=${this.libraryItemId}`
+      if (this.isPodcast) return `term=${this.searchTitle}`
+      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
       return searchQuery
     },
     submitSearch() {
@@ -410,7 +360,6 @@ export default {
         explicit: true,
         asin: true,
         isbn: true,
-        abridged: true,
         // Podcast specific
         itunesPageUrl: true,
         itunesId: true,
@@ -453,9 +402,7 @@ export default {
       this.searchTitle = this.libraryItem.media.metadata.title
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else {
-        this.provider = this.getDefaultBookProvider()
-      }
+      else this.provider = localStorage.getItem('book-provider') || 'google'
 
       // Prefer using ASIN if set and using audible provider
       if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
@@ -487,12 +434,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 +463,7 @@ export default {
           } else if (key === 'author' && !this.isPodcast) {
             var authors = this.selectedMatch[key]
             if (!Array.isArray(authors)) {
-              authors = authors
-                .split(',')
-                .map((au) => au.trim())
-                .filter((au) => !!au)
+              authors = authors.split(',').map((au) => au.trim())
             }
             var authorPayload = []
             authors.forEach((authorName) =>
@@ -536,11 +474,12 @@ 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].split(',').map((v) => v.trim())
             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 +502,24 @@ export default {
       // Persist in local storage
       localStorage.setItem('selectedMatchUsage', JSON.stringify(this.selectedMatchUsage))
 
-      if (Object.keys(updatePayload).length) {
-        if (updatePayload.metadata.cover) {
-          updatePayload.url = updatePayload.metadata.cover
-          delete updatePayload.metadata.cover
+      if (updatePayload.metadata.cover) {
+        const coverPayload = {
+          url: updatePayload.metadata.cover
         }
+        const success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success(this.$strings.ToastItemCoverUpdateSuccess)
+        } else {
+          this.$toast.error(this.$strings.ToastItemCoverUpdateFailed)
+        }
+        console.log('Updated cover')
+        delete updatePayload.metadata.cover
+      }
+
+      if (Object.keys(updatePayload).length) {
         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 +554,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?.isFocused) {
+      if (this.$refs.maxEpisodesInput && this.$refs.maxEpisodesInput.isFocused) {
         this.$refs.maxEpisodesInput.blur()
-      }
-      if (this.$refs.maxEpisodesToDownloadInput?.isFocused) {
-        this.$refs.maxEpisodesToDownloadInput.blur()
+        return
       }
 
       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">
@@ -32,20 +46,8 @@
             >{{ $strings.ButtonOpenManager }}
             <span class="material-icons text-lg ml-2">launch</span>
           </ui-btn>
-
-          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
         </div>
       </div>
-
-      <!-- queued alert -->
-      <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
-        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
-      </widgets-alert>
-
-      <!-- processing alert -->
-      <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
-        <p class="text-lg">Currently embedding metadata</p>
-      </widgets-alert>
     </div>
 
     <p v-if="!mediaTracks.length" class="text-lg text-center my-8">{{ $strings.MessageNoAudioTracks }}</p>
@@ -65,11 +67,14 @@ export default {
     return {}
   },
   computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     libraryItemId() {
-      return this.libraryItem?.id || null
+      return this.libraryItem ? this.libraryItem.id : null
     },
     media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
     },
     mediaTracks() {
       return this.media.tracks || []
@@ -87,49 +92,9 @@ export default {
     showMp3Split() {
       if (!this.mediaTracks.length) return false
       return this.isSingleM4b && this.chapters.length
-    },
-    queuedEmbedLIds() {
-      return this.$store.state.tasks.queuedEmbedLIds || []
-    },
-    isMetadataEmbedQueued() {
-      return this.queuedEmbedLIds.some((lid) => lid === this.libraryItemId)
-    },
-    tasks() {
-      return this.$store.getters['tasks/getTasksByLibraryItemId'](this.libraryItemId)
-    },
-    embedTask() {
-      return this.tasks.find((t) => t.action === 'embed-metadata')
-    },
-    encodeTask() {
-      return this.tasks.find((t) => t.action === 'encode-m4b')
-    },
-    isEmbedTaskRunning() {
-      return this.embedTask && !this.embedTask?.isFinished
-    },
-    isEncodeTaskRunning() {
-      return this.encodeTask && !this.encodeTask?.isFinished
     }
   },
-  methods: {
-    quickEmbed() {
-      const payload = {
-        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/tools/item/${this.libraryItemId}/embed-metadata`)
-              .then(() => {
-                console.log('Audio metadata encode started')
-              })
-              .catch((error) => {
-                console.error('Audio metadata encode failed', error)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    }
-  }
+  methods: {},
+  mounted() {}
 }
-</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,
-          hideSingleBookSeries: false,
-          onlyShowLaterBooksInContinueSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
+          autoScanCronExpression: null
         }
       }
     },
@@ -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">
-      <p class="font-mono truncate">{{ selectedPath || '/' }}</p>
+    <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
+      <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
     </div>
-    <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,
-      loadingDirs: false,
-      isPosix: true,
-      rootDirs: [],
+      loadingFolders: false,
+      allFolders: [],
       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() {
-      let selPath = this.selectedPath.replace(/^\//, '')
-      var splitPaths = selPath.split('/')
+    goBack() {
+      var splitPaths = this.selectedPath.split('\\').slice(1)
+      var prev = splitPaths.slice(0, -1).join('\\')
 
-      let previousPath = ''
-      let lookupPath = ''
-
-      if (splitPaths.length > 2) {
-        lookupPath = splitPaths.slice(0, -2).join('/')
-      }
-      previousPath = splitPaths.slice(0, -1).join('/')
-
-      if (!this.isPosix) {
-        // For windows drives add a trailing slash. e.g. C:/
-        if (!this.isPosix && lookupPath.endsWith(':')) {
-          lookupPath += '/'
+      var currDirs = this.allFolders
+      for (let i = 0; i < splitPaths.length; i++) {
+        var _dir = currDirs.find((dir) => dir.dirname === splitPaths[i])
+        if (_dir && _dir.path.slice(1) === prev) {
+          this.directories = currDirs
+          this.selectDir(_dir)
+          return
+        } else if (_dir) {
+          currDirs = _dir.dirs
         }
-        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 = ''
-    },
-    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
-        })
+      this.selectedFullPath = ''
     },
     async init() {
-      this.initialLoad = true
-      this.rootDirs = await this.fetchDirs('', 0)
-      this.initialLoad = false
+      this.loadingFolders = true
+      this.allFolders = await this.$store.dispatch('libraries/loadFolders')
+      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">
-      <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 v-if="mediaType == 'book'" 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,
-      audiobooksOnly: false,
-      epubsAllowScriptedContent: false,
-      hideSingleBookSeries: false,
-      onlyShowLaterBooksInContinueSeries: false,
-      podcastSearchRegion: 'us'
+      skipMatchingMediaWithIsbn: false
     }
   },
   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,
-          audiobooksOnly: !!this.audiobooksOnly,
-          epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
-          hideSingleBookSeries: !!this.hideSingleBookSeries,
-          onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
-          podcastSearchRegion: this.podcastSearchRegion
+          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
         }
       }
     },
@@ -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/notification/NotificationEditModal.vue

@@ -10,7 +10,7 @@
         <div class="w-full px-3 py-5 md:p-12">
           <ui-dropdown v-model="newNotification.eventName" :label="$strings.LabelNotificationEvent" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
 
-          <ui-multi-select ref="urlsInput" v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />
+          <ui-multi-select v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />
 
           <ui-text-input-with-label v-model="newNotification.titleTemplate" :label="$strings.LabelNotificationTitleTemplate" class="mb-2" />
 
@@ -103,8 +103,6 @@ export default {
       if (this.$refs.modal) this.$refs.modal.setHide()
     },
     submitForm() {
-      this.$refs.urlsInput?.forceBlur()
-      
       if (!this.newNotification.urls.length) {
         this.$toast.error('Must enter an Apprise URL')
         return

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

@@ -6,7 +6,7 @@
       </div>
     </template>
     <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
-      <div v-if="episodesCleaned.length" class="w-full py-3 mx-auto flex">
+      <div v-if="episodes.length" class="w-full py-3 mx-auto flex">
         <form @submit.prevent="submit" class="flex flex-grow">
           <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
         </form>
@@ -16,12 +16,12 @@
           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'"
-          @click="toggleSelectEpisode(episode)"
+          :class="itemEpisodeMap[episode.enclosure.url?.split('?')[0]] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? '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(index, 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>
-            <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" small checkbox-bg="primary" border-color="gray-600" />
+            <span v-if="itemEpisodeMap[episode.enclosure.url?.split('?')[0]]" class="material-icons text-success text-xl">download_done</span>
+            <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
             <div class="flex items-center font-semibold text-gray-200">
@@ -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>
@@ -63,14 +63,11 @@ export default {
   data() {
     return {
       processing: false,
-      episodesCleaned: [],
       selectedEpisodes: {},
       selectAll: false,
       search: null,
       searchTimeout: null,
-      searchText: null,
-      downloadedEpisodeGuidMap: {},
-      downloadedEpisodeUrlMap: {}
+      searchText: null
     }
   },
   watch: {
@@ -95,111 +92,75 @@ export default {
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
     allDownloaded() {
-      return !this.episodesCleaned.some((episode) => !this.getIsEpisodeDownloaded(episode))
+      return !this.episodes.some((episode) => !this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]])
     },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
     },
     buttonText() {
-      if (!this.episodesSelected.length) return this.$strings.LabelNoEpisodesSelected
-      if (this.episodesSelected.length === 1) return `${this.$strings.LabelDownload} ${this.$strings.LabelEpisode.toLowerCase()}`
-      return this.$getString('LabelDownloadNEpisodes', [this.episodesSelected.length])
+      if (!this.episodesSelected.length) return 'No Episodes Selected'
+      return `Download ${this.episodesSelected.length} Episode${this.episodesSelected.length > 1 ? 's' : ''}`
     },
     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) => {
+      return this.episodes.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) {
-        if (this.getIsEpisodeDownloaded(episode)) this.selectedEpisodes[episode.cleanUrl] = false
-        else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) this.selectedEpisodes[String(i)] = false
+        else this.$set(this.selectedEpisodes, String(i), val)
       }
     },
     checkSetIsSelectedAll() {
-      for (const episode of this.episodesList) {
-        if (!this.getIsEpisodeDownloaded(episode) && !this.selectedEpisodes[episode.cleanUrl]) {
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (!this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]] && !this.selectedEpisodes[String(i)]) {
           this.selectAll = false
           return
         }
       }
       this.selectAll = true
     },
-    toggleSelectEpisode(episode) {
-      if (this.getIsEpisodeDownloaded(episode)) return
-      this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
+    toggleSelectEpisode(index, episode) {
+      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
+      this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
       this.checkSetIsSelectedAll()
     },
     submit() {
-      let episodesToDownload = []
+      var episodesToDownload = []
       if (this.episodesSelected.length) {
-        episodesToDownload = this.episodesSelected.map((cleanUrl) => this.episodesCleaned.find((ep) => ep.cleanUrl == cleanUrl))
+        episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
       }
 
-      const payloadSize = JSON.stringify(episodesToDownload).length
-      const sizeInMb = payloadSize / 1024 / 1024
-      const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      var payloadSize = JSON.stringify(episodesToDownload).length
+      var sizeInMb = payloadSize / 1024 / 1024
+      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,32 +175,17 @@ 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)
-          }
-        })
-      this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
+      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
       this.selectAll = false
       this.selectedEpisodes = {}
     }

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>
-      <div v-if="description" dir="auto" class="default-style" v-html="description" />
+      <p class="text-lg font-semibold mb-6">{{ title }}</p>
+      <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>
@@ -31,10 +31,9 @@
       <!-- mobile -->
       <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
     </div>
-    <div v-if="enclosureUrl" class="pb-4 pt-6">
-      <ui-text-input-with-label :value="enclosureUrl" readonly class="text-xs">
-        <label class="px-1 text-xs text-gray-200 font-semibold">Episode URL from RSS feed</label>
-      </ui-text-input-with-label>
+    <div v-if="enclosureUrl" class="py-4">
+      <p class="text-xs text-gray-300 font-semibold">Episode URL from RSS feed</p>
+      <a :href="enclosureUrl" target="_blank" class="text-xs text-blue-400 hover:text-blue-500 hover:underline">{{ enclosureUrl }}</a>
     </div>
     <div v-else class="py-4">
       <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>

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

client/components/player/PlayerTrackBar.vue

@@ -38,8 +38,7 @@ export default {
     currentChapter: {
       type: Object,
       default: () => {}
-    },
-    playbackRate: Number
+    }
   },
   data() {
     return {
@@ -57,16 +56,13 @@ export default {
   },
   watch: {
     duration: {
+      immediate: true,
       handler() {
         this.setChapterTicks()
       }
     }
   },
   computed: {
-    _playbackRate() {
-      if (!this.playbackRate || isNaN(this.playbackRate)) return 1
-      return this.playbackRate
-    },
     currentChapterDuration() {
       if (!this.currentChapter) return 0
       return this.currentChapter.end - this.currentChapter.start
@@ -85,8 +81,8 @@ export default {
     clickTrack(e) {
       if (this.loading) return
 
-      const offsetX = e.offsetX
-      const perc = offsetX / this.trackWidth
+      var offsetX = e.offsetX
+      var perc = offsetX / this.trackWidth
       const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
       const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
       const time = baseTime + perc * duration
@@ -115,7 +111,7 @@ export default {
       this.updateReadyTrack()
     },
     updateReadyTrack() {
-      const widthReady = Math.round(this.trackWidth * this.percentReady)
+      var widthReady = Math.round(this.trackWidth * this.percentReady)
       if (this.readyTrackWidth === widthReady) return
       this.readyTrackWidth = widthReady
       if (this.$refs.readyTrack) this.$refs.readyTrack.style.width = widthReady + 'px'
@@ -128,7 +124,7 @@ export default {
       const time = this.useChapterTrack ? Math.max(0, this.currentTime - this.currentChapterStart) : this.currentTime
       const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
 
-      const ptWidth = Math.round((time / duration) * this.trackWidth)
+      var ptWidth = Math.round((time / duration) * this.trackWidth)
       if (this.playedTrackWidth === ptWidth) {
         return
       }
@@ -137,7 +133,7 @@ export default {
     },
     setChapterTicks() {
       this.chapterTicks = this.chapters.map((chap) => {
-        const perc = chap.start / this.duration
+        var perc = chap.start / this.duration
         return {
           title: chap.title,
           left: perc * this.trackWidth
@@ -145,7 +141,7 @@ export default {
       })
     },
     mousemoveTrack(e) {
-      const offsetX = e.offsetX
+      var offsetX = e.offsetX
 
       const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
       const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
@@ -171,7 +167,7 @@ export default {
         this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
       }
       if (this.$refs.hoverTimestampText) {
-        var hoverText = this.$secondsToTimestamp(progressTime / this._playbackRate)
+        var hoverText = this.$secondsToTimestamp(progressTime)
 
         var chapter = this.chapters.find((chapter) => chapter.start <= totalTime && totalTime < chapter.end)
         if (chapter && chapter.title) {
@@ -204,14 +200,10 @@ export default {
     },
     windowResize() {
       this.setTrackWidth()
-      this.setChapterTicks()
-      this.updatePlayedTrackWidth()
-      this.updateBufferTrack()
     }
   },
   mounted() {
     this.setTrackWidth()
-    this.setChapterTicks()
     window.addEventListener('resize', this.windowResize)
   },
   beforeDestroy() {