Merge pull request #4590 from advplyr/fix_authorize_race_condition

Fix authorize race condition by not updating the user on token refresh

.devcontainer/Dockerfile

@@ -0,0 +1,12 @@
+# [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
+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

@@ -0,0 +1,10 @@
+// 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: false
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,40 @@
+// 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"
+		}
+	},
+	"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"
+}

.devcontainer/post-create.sh

@@ -0,0 +1,29 @@
+#!/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

.dockerignore

@@ -6,8 +6,11 @@ npm-debug.log
 /config
 /audiobooks
 /audiobooks2
+/media/
 /metadata
 dev.js
 test/
 /client/.nuxt/
 /client/dist/
+/dist/
+/deploy/

.editorconfig

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

.gitattributes

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

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

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discord
+    url: https://discord.gg/HQgCbd6E75
+    about: Ask questions, get help troubleshooting, and join the Abs community here.

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,63 @@
+name: 🚀 Feature Request
+description: Request a feature/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)*.'
+  - 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
+  - type: textarea
+    id: describe
+    attributes:
+      label: Describe the Feature/Enhancement
+      description: Please help us understand what you want.
+      placeholder: What is your vision?
+    validations:
+      required: true
+  - type: textarea
+    id: the-why
+    attributes:
+      label: Why would this be helpful?
+      description: Please help us understand why this would enhance your experience.
+      placeholder: Explain the "why" or "use case".
+    validations:
+      required: true
+  - type: textarea
+    id: image
+    attributes:
+      label: Future Implementation (Screenshot)
+      description: Please help us visualize by including a doodle or screenshot.
+      placeholder: How could this look?
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: '## Web/Server Current Implementation'
+  - type: input
+    id: version
+    attributes:
+      label: Audiobookshelf Server Version
+      description: Do not put 'Latest version', please put your current version number here
+      placeholder: 'e.g. v1.6.60'
+    validations:
+      required: true
+  - type: textarea
+    id: current-image
+    attributes:
+      label: Current Implementation (Screenshot)
+      description: What page were you looking at when you thought of this enhancement?
+      placeholder: If an image is not applicable, please explain why.

.github/pull_request_template.md

@@ -0,0 +1,33 @@
+<!--
+For Work In Progress Pull Requests, please use the Draft PR feature,
+see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
+
+If you do not follow this template, the PR may be closed without review.
+
+Please ensure all checks pass.
+If you are a new contributor, the workflows will need to be manually approved before they run.
+-->
+
+## Brief summary
+
+<!-- Please provide a brief summary of what your PR attempts to achieve. -->
+
+## Which issue is fixed?
+
+<!-- Which issue number does this PR fix? Ex: "Fixes #1234" -->
+
+## In-depth Description
+
+<!--
+Describe your solution in more depth.
+How does it work? Why is this the best solution?
+Does it solve a problem that affects multiple users or is this an edge case for your setup?
+-->
+
+## How have you tested this?
+
+<!-- Please describe in detail with reproducible steps how you tested your changes. -->
+
+## Screenshots
+
+<!-- If your PR includes any changes to the web client, please include screenshots or a short video from before and after your changes. -->

.github/workflows/apply_comments.yaml

@@ -0,0 +1,55 @@
+name: Add issue comments by label
+on:
+  issues:
+    types:
+      - labeled
+jobs:
+  help-wanted:
+    if: github.event.label.name == 'help wanted'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Help wanted comment
+        run: gh issue comment "$NUMBER" --body "$BODY"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.issue.number }}
+          BODY: >
+            This issue is not able to be completed due to limited bandwidth or access to the required test hardware.
+            
+            This issue is available for anyone to work on.
+
+
+  config-issue:
+    if: github.event.label.name == 'config-issue'
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Config issue comment
+        run: gh issue close "$NUMBER" --reason "not planned" --comment "$BODY"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.issue.number }}
+          BODY: >
+            After reviewing this issue, this appears to be a problem with your setup and not Audiobookshelf. This issue is being closed to keep the issue tracker focused on Audiobookshelf itself. Please reach out on the Audiobookshelf Discord for community support.
+            
+            Some common search terms to help you find the solution to your problem:
+              - Reverse proxy
+              - Enabling websockets
+              - SSL (https vs http)
+              - Configuring a static IP
+              - `localhost` versus IP address
+              - hairpin NAT
+              - VPN
+              - firewall ports
+              - public versus private network
+              - bridge versus host mode
+              - Docker networking
+              - DNS (such as EAI_AGAIN errors)
+            
+            After you have followed these steps, please post the solution or steps you followed to fix the problem to help others in the future, or show that it is a problem with Audiobookshelf so we can reopen the issue.
+

.github/workflows/close-issues-on-release.yml

@@ -0,0 +1,20 @@
+name: Close fixed issues on release.
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+  issues: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close issues marked as fixed upon a release.
+        uses: gcampbell-msft/fixed-pending-release@7fa1b75a0c04bcd4b375110522878e5f6100cff5
+        with:
+          label: 'awaiting release'
+          removeLabel: true
+          applyToAll: true
+          message: Fixed in [${releaseTag}](${releaseUrl}).

.github/workflows/close_blank_issues.yaml

@@ -0,0 +1,42 @@
+name: Close Issues not using a template
+
+on:
+  issues:
+    types:
+      - opened
+
+permissions:
+  issues: write
+
+jobs:
+  close_issue:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check issue headings
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const issueBody = context.payload.issue.body || "";
+
+            // Match Markdown headings (e.g., # Heading, ## Heading)
+            const headingRegex = /^(#{1,6})\s.+/gm;
+            const headings = [...issueBody.matchAll(headingRegex)];
+
+            if (headings.length < 3) {
+              // Post a comment
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.issue.number,
+                body: "Thank you for opening an issue! To help us review your request efficiently, please use one of the provided issue templates. If you're seeking information or have a general question, consider opening a Discussion or joining the conversation on our Discord. Thanks!"
+              });
+
+              // Close the issue
+              await github.rest.issues.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.issue.number,
+                state: "closed"
+              });
+            }

.github/workflows/codeql.yml

@@ -0,0 +1,78 @@
+name: 'CodeQL'
+
+on:
+  push:
+    branches: ['master']
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: ['master']
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
+  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@v4
+
+      # 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/component-tests.yml

@@ -0,0 +1,48 @@
+name: Run Component Tests
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Branch/Tag/SHA to test'
+        required: true
+  pull_request:
+    paths:
+      - 'client/**'
+      - '.github/workflows/component-tests.yml'
+  push:
+    paths:
+      - 'client/**'
+      - '.github/workflows/component-tests.yml'
+
+jobs:
+  run-component-tests:
+    name: Run Component 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
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: |
+          cd client
+          npm ci
+
+      - name: Run tests
+        run: |
+          cd client
+          npm test

.github/workflows/docker-build.yml

@@ -0,0 +1,82 @@
+---
+name: Build and Push Docker Image
+
+on:
+  # Allows you to run workflow manually from Actions tab
+  workflow_dispatch:
+    inputs:
+      tags:
+        description: 'Docker Tag'
+        required: true
+        default: 'latest'
+  push:
+    branches: [main, master]
+    tags:
+      - 'v*.*.*'
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - index.js
+      - package.json
+
+jobs:
+  build:
+    if: ${{ !contains(github.event.head_commit.message, 'skip ci') && github.repository == 'advplyr/audiobookshelf' }}
+    runs-on: ubuntu-24.04
+
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
+          tags: |
+            type=edge,branch=master
+            type=semver,pattern={{version}}
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Login to Dockerhub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Login to ghcr
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GHCR_PASSWORD }}
+
+      - name: Build image
+        uses: docker/build-push-action@v6
+        with:
+          tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
+
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/i18n-integration.yml

@@ -0,0 +1,31 @@
+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
+          cache: 'npm'
+
+      # 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

@@ -0,0 +1,52 @@
+name: Integration Test
+
+on:
+  pull_request:
+  push:
+    branches-ignore:
+      - 'dependabot/**' # Don't run dependabot branches, as they are already covered by pull requests
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - test/**
+      - index.js
+      - package.json
+
+jobs:
+  build:
+    name: build and test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: install pkg (using yao-pkg fork for targeting node20)
+        run: npm install -g @yao-pkg/pkg
+
+      - name: get client dependencies
+        working-directory: client
+        run: npm ci
+
+      - name: build client
+        working-directory: client
+        run: npm run generate
+
+      - name: get server dependencies
+        run: npm ci --only=production
+
+      - name: build binary
+        run: pkg -t node20-linux-x64 -o audiobookshelf .
+
+      - name: run audiobookshelf
+        run: |
+          ./audiobookshelf &
+          sleep 5
+
+      - name: test if server is available
+        run: curl -sf http://127.0.0.1:3333 | grep Audiobookshelf

.github/workflows/lint-openapi.yml

@@ -0,0 +1,39 @@
+name: API linting
+
+# Run on pull requests or pushes when there is a change to any OpenAPI files in docs/
+on:
+  pull_request:
+  push:
+    paths:
+      - 'docs/**'
+
+# This action only needs read permissions
+permissions:
+  contents: read
+
+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
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      # 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

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

.github/workflows/unit-tests.yml

@@ -0,0 +1,38 @@
+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
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test

.gitignore

@@ -1,10 +1,26 @@
 .env
-dev.js
-node_modules/
+/dev.js
+**/node_modules/
 /config/
 /audiobooks/
 /audiobooks2/
+/podcasts/
+/media/
 /metadata/
-test/
+/plugins/
 /client/.nuxt/
 /client/dist/
+/dist/
+/deploy/
+/coverage/
+/.nyc_output/
+/ffmpeg*
+/ffprobe*
+/unicode*
+/libnusqlite3*
+
+sw.*
+.DS_STORE
+.idea/*
+tailwind.compiled.css
+tailwind.config.js

.prettierrc

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

.vscode/extensions.json

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

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  // 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

@@ -0,0 +1,27 @@
+{
+  "vetur.format.defaultFormatterOptions": {
+    "prettier": {
+      "semi": false,
+      "singleQuote": true,
+      "printWidth": 400,
+      "proseWrap": "never",
+      "trailingComma": "none"
+    },
+    "prettyhtml": {
+      "printWidth": 400,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+  "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"
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,40 @@
+{
+	"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,22 +1,73 @@
-### STAGE 0: FFMPEG ###
-FROM jrottenberg/ffmpeg:4.1-alpine AS ffmpeg
+ARG NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
+ARG NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
+
+### STAGE 0: Build client ###
+FROM node:20-alpine AS build-client
 
-### STAGE 1: Build client ###
-FROM node:12-alpine AS build
 WORKDIR /client
 COPY /client /client
-RUN npm install
+RUN npm ci && npm cache clean --force
 RUN npm run generate
 
-### STAGE 2: Build server ###
-FROM node:12-alpine
+### STAGE 1: Build server ###
+FROM node:20-alpine AS build-server
+
+ARG NUSQLITE3_DIR
+ARG TARGETPLATFORM
+
 ENV NODE_ENV=production
-ENV LOG_LEVEL=INFO
-COPY --from=build /client/dist /client/dist
-COPY --from=ffmpeg / /
-COPY index.js index.js
-COPY package.json package.json
-COPY server server
-RUN npm install --production
+
+RUN apk add --no-cache --update \
+  curl \
+  make \
+  python3 \
+  g++ \
+  unzip
+
+WORKDIR /server
+COPY index.js package* /server
+COPY /server /server/server
+
+RUN case "$TARGETPLATFORM" in \
+  "linux/amd64") \
+  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-x64.zip" ;; \
+  "linux/arm64") \
+  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-arm64.zip" ;; \
+  *) echo "Unsupported platform: $TARGETPLATFORM" && exit 1 ;; \
+  esac && \
+  unzip /tmp/library.zip -d $NUSQLITE3_DIR && \
+  rm /tmp/library.zip
+
+RUN npm ci --only=production
+
+### STAGE 2: Create minimal runtime image ###
+FROM node:20-alpine
+
+ARG NUSQLITE3_DIR
+ARG NUSQLITE3_PATH
+
+# Install only runtime dependencies
+RUN apk add --no-cache --update \
+  tzdata \
+  ffmpeg \
+  tini
+
+WORKDIR /app
+
+# Copy compiled frontend and server from build stages
+COPY --from=build-client /client/dist /app/client/dist
+COPY --from=build-server /server /app
+COPY --from=build-server ${NUSQLITE3_PATH} ${NUSQLITE3_PATH}
+
 EXPOSE 80
-CMD ["npm", "start"]
+
+ENV PORT=80
+ENV NODE_ENV=production
+ENV CONFIG_PATH="/config"
+ENV METADATA_PATH="/metadata"
+ENV SOURCE="docker"
+ENV NUSQLITE3_DIR=${NUSQLITE3_DIR}
+ENV NUSQLITE3_PATH=${NUSQLITE3_PATH}
+
+ENTRYPOINT ["tini", "--"]
+CMD ["node", "index.js"]

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    Audiobookshelf  Self-hosted audiobook server
+    Copyright (C) 2021  advplyr
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    Audiobookshelf  Copyright (C) 2021  advplyr
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

build/debian/DEBIAN/control

@@ -0,0 +1,8 @@
+Package: audiobookshelf
+Version: 1.6.41
+Section: base
+Priority: optional
+Architecture: amd64
+Depends:
+Maintainer: advplyr
+Description: Self-hosted audiobook server for managing and playing audiobooks

build/debian/DEBIAN/postinst

@@ -0,0 +1,47 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+ABS_LOG_DIR="/var/log/audiobookshelf"
+
+declare -r init_type='auto'
+declare -ri no_rebuild='0'
+
+start_service () {
+  : "${1:?'Service name was not defined'}"
+  declare -r service_name="$1"
+
+  if hash systemctl 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'systemd' ]]; then
+      {
+        systemctl enable "$service_name.service" && \
+        systemctl start "$service_name.service"
+      } || echo "$service_name could not be registered or started"
+    fi
+  elif hash service 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'upstart' || "$init_type" == 'sysv' ]]; then
+      service "$service_name" start || echo "$service_name could not be registered or started"
+    fi
+  elif hash start 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'upstart' ]]; then
+      start "$service_name" || echo "$service_name could not be registered or started"
+    fi
+  elif hash update-rc.d 2> /dev/null; then
+      if [[ "$init_type" == 'auto' || "$init_type" == 'sysv' ]]; then
+      {
+        update-rc.d "$service_name" defaults && \
+        "/etc/init.d/$service_name" start
+      } || echo "$service_name could not be registered or started"
+    fi
+  else
+    echo 'Your system does not appear to use systemd, Upstart, or System V, so the service could not be started'
+  fi
+}
+
+# Create log directory if not there and set ownership
+if [ ! -d "$ABS_LOG_DIR" ]; then
+  mkdir -p "$ABS_LOG_DIR"
+  chown -R 'audiobookshelf:audiobookshelf' "$ABS_LOG_DIR"
+fi
+
+start_service 'audiobookshelf'

build/debian/DEBIAN/preinst

@@ -0,0 +1,81 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
+CONFIG_PATH="/etc/default/audiobookshelf"
+DEFAULT_PORT=13378
+DEFAULT_HOST="0.0.0.0"
+
+add_user() {
+  : "${1:?'User was not defined'}"
+  declare -r user="$1"
+  declare -r uid="$2"
+
+  if [ -z "$uid" ]; then
+    declare -r uid_flags=""
+  else
+    declare -r uid_flags="--uid $uid"
+  fi
+
+  declare -r group="${3:-$user}"
+  declare -r descr="${4:-No description}"
+  declare -r shell="${5:-/bin/false}"
+
+  if ! getent passwd | grep -q "^$user:"; then
+    echo "Creating system user: $user in $group with $descr and shell $shell"
+    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
+  fi
+}
+
+add_group() {
+  : "${1:?'Group was not defined'}"
+  declare -r group="$1"
+  declare -r gid="$2"
+
+  if [ -z "$gid" ]; then
+    declare -r gid_flags=""
+  else
+    declare -r gid_flags="--gid $gid"
+  fi
+
+  if ! getent group | grep -q "^$group:" ; then
+    echo "Creating system group: $group"
+    groupadd $gid_flags --system $group
+  fi
+}
+
+setup_config() {
+  if [ -f "$CONFIG_PATH" ]; then
+    echo "Existing config found."
+    cat $CONFIG_PATH
+
+  else
+
+    if [ ! -d "$DEFAULT_DATA_DIR" ]; then
+      # Create directory and set permissions
+      echo "Creating default data dir at $DEFAULT_DATA_DIR"
+      mkdir "$DEFAULT_DATA_DIR"
+      chown -R 'audiobookshelf:audiobookshelf' "$DEFAULT_DATA_DIR"
+    fi
+
+    echo "Creating default config."
+
+    config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
+CONFIG_PATH=$DEFAULT_DATA_DIR/config
+PORT=$DEFAULT_PORT
+HOST=$DEFAULT_HOST"
+
+    echo "$config_text"
+
+    echo "$config_text" > /etc/default/audiobookshelf;
+
+    echo "Config created"
+  fi
+}
+
+add_group 'audiobookshelf' ''
+
+add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
+
+setup_config

build/debian/DEBIAN/prerm

@@ -0,0 +1,26 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+declare -r init_type='auto'
+declare -r service_name='audiobookshelf'
+
+if [[ "$init_type" == 'auto' || "$init_type" == 'systemd' || "$init_type" == 'upstart' || "$init_type" == 'sysv' ]]; then
+  if hash systemctl 2> /dev/null; then
+    systemctl disable "$service_name.service" && \
+    systemctl stop "$service_name.service" || \
+    echo "$service_name wasn't even running!"
+  elif hash service 2> /dev/null; then
+    service "$service_name" stop || echo "$service_name wasn't even running!"
+  elif hash stop 2> /dev/null; then
+    stop "$service_name" || echo "$service_name wasn't even running!"
+  elif hash update-rc.d 2> /dev/null; then
+    {
+      update-rc.d "$service_name" remove && \
+      "/etc/init.d/$service_name" stop
+    } || "$service_name wasn't even running!"
+  else
+    echo "Your system does not appear to use upstart, systemd or sysv, so $service_name could not be stopped"
+    echo 'Unless these systems were removed since install, no processes have been left running'
+  fi
+fi

build/debian/lib/systemd/system/audiobookshelf.service

@@ -0,0 +1,16 @@
+[Unit]
+Description=Self-hosted audiobook server for managing and playing audiobooks
+Requires=network.target
+
+[Service]
+Type=simple
+EnvironmentFile=/etc/default/audiobookshelf
+WorkingDirectory=/usr/share/audiobookshelf
+ExecStart=/usr/share/audiobookshelf/audiobookshelf
+ExecReload=/bin/kill -HUP $MAINPID
+Restart=always
+User=audiobookshelf
+Group=audiobookshelf
+
+[Install]
+WantedBy=multi-user.target

build/linuxpackager

@@ -0,0 +1,57 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+
+cd "$SCRIPT_DIR/.."
+
+# Get package version without double quotes
+VERSION="$( eval echo $( jq '.version' package.json) )"
+DESCRIPTION="$( eval echo $( jq '.description' package.json) )"
+OUTPUT_FILE="audiobookshelf_${VERSION}_amd64.deb"
+
+echo ">>> Building Client"
+echo "--------------------"
+
+cd client
+rm -rf node_modules
+npm ci --unsafe-perm=true --allow-root
+npm run generate
+cd ..
+
+echo ">>> Building Server"
+echo "--------------------"
+
+rm -rf node_modules
+npm ci --unsafe-perm=true --allow-root
+
+echo ">>> Packaging"
+echo "--------------------"
+
+# Create debian control file
+
+mkdir -p dist
+rm -rf dist/debian
+cp -R build/debian dist/debian
+chmod -R 775 dist/debian
+
+controlfile="Package: audiobookshelf
+Version: $VERSION
+Section: base
+Priority: optional
+Architecture: amd64
+Depends:
+Maintainer: advplyr
+Description: $DESCRIPTION"
+
+echo "$controlfile" > dist/debian/DEBIAN/control;
+
+# Package debian
+pkg -t node20-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+
+fakeroot dpkg-deb -Zxz --build dist/debian
+
+mv dist/debian.deb "dist/$OUTPUT_FILE"
+
+echo "Finished! Filename: $OUTPUT_FILE"

client/assets/absicons.css

@@ -0,0 +1,106 @@
+@font-face {
+  font-family: 'absicons';
+  src: url('~static/fonts/absicons/absicons.eot?2jfq33');
+  src: url('~static/fonts/absicons/absicons.eot?2jfq33#iefix') format('embedded-opentype'),
+    url('~static/fonts/absicons/absicons.ttf?2jfq33') format('truetype'),
+    url('~static/fonts/absicons/absicons.woff?2jfq33') format('woff'),
+    url('~static/fonts/absicons/absicons.svg?2jfq33#absicons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.abs-icons {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'absicons' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-books-1:before {
+  content: "\e905";
+}
+
+.icon-microphone-1:before {
+  content: "\e902";
+}
+
+.icon-radio:before {
+  content: "\e903";
+}
+
+.icon-podcast:before {
+  content: "\e904";
+}
+
+.icon-audiobookshelf:before {
+  content: "\e900";
+}
+
+.icon-database:before {
+  content: "\e906";
+}
+
+.icon-microphone-2:before {
+  content: "\e901";
+}
+
+.icon-headphones:before {
+  content: "\e910";
+}
+
+.icon-music:before {
+  content: "\e911";
+}
+
+.icon-video:before {
+  content: "\e914";
+}
+
+.icon-microphone-3:before {
+  content: "\e91e";
+}
+
+.icon-book-1:before {
+  content: "\e91f";
+}
+
+.icon-books-2:before {
+  content: "\e920";
+}
+
+.icon-file-picture:before {
+  content: "\e927";
+}
+
+.icon-database-1:before {
+  content: "\e964";
+}
+
+.icon-rocket:before {
+  content: "\e9a5";
+}
+
+.icon-power:before {
+  content: "\e9b5";
+}
+
+.icon-star:before {
+  content: "\e9d9";
+}
+
+.icon-heart:before {
+  content: "\e9da";
+}
+
+.icon-rss:before {
+  content: "\ea9b";
+}

client/assets/app.css

@@ -1,28 +1,72 @@
-@import url('./transitions.css');
+@import './fonts.css';
+@import './transitions.css';
+@import './draggable.css';
+@import './defaultStyles.css';
+@import './absicons.css';
+
+:root {
+  --bookshelf-texture-img: url(~static/textures/wood_default.jpg);
+  --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
+}
 
 .page {
   width: 100%;
   height: calc(100% - 64px);
   max-height: calc(100% - 64px);
 }
+
 .page.streaming {
   height: calc(100% - 64px - 165px);
   max-height: calc(100% - 64px - 165px);
 }
 
+#bookshelf {
+  height: calc(100% - 40px);
+  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
+
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #855620 rgba(0, 0, 0, 0);
+}
+
+.bookshelf-row {
+  width: calc(100vw - (100vw - 100%));
+}
+
+@media (max-width: 768px) {
+  #bookshelf {
+    height: calc(100% - 80px);
+  }
+
+  .bookshelf-row {
+    width: 100vw;
+  }
+}
+
+#page-wrapper {
+  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 8px;
 }
+
+::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #855620;
   border-radius: 4px;
 }
+
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #704922;
@@ -33,25 +77,49 @@
   opacity: 0;
 }
 
+.no-scroll {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+/* Chrome, Safari, Edge, Opera */
+.no-spinner::-webkit-outer-spin-button,
+.no-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 .tracksTable {
   border-collapse: collapse;
   width: 100%;
   border: 1px solid #474747;
 }
+
 .tracksTable tr:nth-child(even) {
   background-color: #2e2e2e;
 }
+
 .tracksTable tr {
   background-color: #373838;
 }
-.tracksTable tr:hover {
+
+.tracksTable tr:hover:not(:has(th)) {
   background-color: #474747;
 }
+
 .tracksTable td {
-  padding: 4px;
+  padding: 4px 8px;
 }
+
 .tracksTable th {
-  padding: 4px;
+  padding: 4px 8px;
   font-size: 0.75rem;
 }
 
@@ -62,27 +130,40 @@
   border-right: 6px solid transparent;
   border-top: 6px solid white;
 }
+
+.arrow-down-small {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+}
+
 .triangle-right {
   width: 0;
   height: 0;
   border-left: 8px solid transparent;
   border-bottom: 8px solid transparent;
-  border-top: 8px solid rgb(34,127,35);
-  border-right: 8px solid rgb(34,127,35);
+  border-top: 8px solid rgb(34, 127, 35);
+  border-right: 8px solid rgb(34, 127, 35);
 }
 
 .icon-text {
   font-size: 1.1rem;
 }
 
-#page-wrapper {
-  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
-}
-
 .box-shadow-md {
   box-shadow: 2px 8px 6px #111111aa;
 }
 
+.box-shadow-sm-up {
+  box-shadow: 0px -5px 8px #11111122;
+}
+
+.box-shadow-md-up {
+  box-shadow: 0px -8px 8px #11111144;
+}
+
 .box-shadow-lg-up {
   box-shadow: 0px -12px 8px #111111ee;
 }
@@ -94,3 +175,78 @@
 .box-shadow-book {
   box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
+
+.box-shadow-progressbar {
+  box-shadow: 0px -1px 4px rgb(62, 50, 2, 0.5);
+}
+
+.shadow-height {
+  height: calc(100% - 4px);
+}
+
+.box-shadow-book3d {
+  box-shadow: 4px 1px 8px #11111166, 1px -4px 8px #11111166;
+}
+
+.box-shadow-side {
+  box-shadow: 5px 0px 5px #11111166;
+}
+
+/*
+Bookshelf Label
+*/
+.categoryPlacard {
+  letter-spacing: 1px;
+}
+
+.shinyBlack {
+  background-color: #2d3436;
+  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
+  border-color: rgba(255, 244, 182, 0.6);
+  border-style: solid;
+  color: #fce3a6;
+}
+
+.cover-bg {
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
+  background-size: 100% 100%;
+  background-position: center;
+  opacity: 1;
+  filter: blur(20px);
+}
+
+/* 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;
+}
+
+.app-bar .Vue-Toastification__container.top-right {
+  padding-top: 64px;
+}
+
+.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/defaultStyles.css

@@ -0,0 +1,68 @@
+/*
+
+  This is for setting regular html styles for places where embedding HTML will be
+  like podcast episode descriptions. Otherwise TailwindCSS will have stripped all default markup.
+
+*/
+
+.default-style p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
+.default-style a {
+  text-decoration: none;
+  color: #5985ff;
+}
+
+.default-style ul {
+  display: block;
+  list-style: circle;
+  list-style-type: disc;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+}
+
+.default-style ol {
+  display: block;
+  list-style: decimal;
+  list-style-type: decimal;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+}
+
+.default-style li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+}
+
+.default-style li::marker {
+  unicode-bidi: isolate;
+  font-variant-numeric: tabular-nums;
+  text-transform: none;
+  text-indent: 0px !important;
+  text-align: start !important;
+  text-align-last: start !important;
+}
+
+.default-style.less-spacing p {
+  margin-block-start: 0;
+}
+
+.default-style.less-spacing ul {
+  margin-block-start: 0;
+}
+
+.default-style.less-spacing ol {
+  margin-block-start: 0;
+}
+

client/assets/draggable.css

@@ -0,0 +1,48 @@
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.list-group {
+  min-height: 30px;
+}
+
+.drag-handle {
+  cursor: n-resize;
+}
+
+.list-group-item:not(.exclude) {
+  cursor: n-resize;
+}
+
+.list-group-item.exclude {
+  cursor: not-allowed;
+}
+
+.list-group-item:not(.ghost):not(.exclude):hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.list-group-item:nth-child(even):not(.ghost):not(.exclude) {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.list-group-item.exclude:not(.ghost) {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+
+.list-group-item.exclude:not(.ghost):hover {
+  background-color: rgba(223, 0, 0, 0.25);
+}

client/assets/ebooks/basic.js

@@ -0,0 +1,506 @@
+/*
+Calibres stylesheet
+*/
+
+export default `
+@charset "UTF-8";
+
+/*
+  Calibre styles
+*/
+.arabic {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.attribution {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    margin: 0.3em 0
+    }
+.big {
+    font-size: 1.375em;
+    line-height: 1.2
+    }
+.big1 {
+    font-size: 1em
+    }
+.block {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 2em
+    }
+.block1 {
+    display: block;
+    text-align: justify;
+    margin: 1em 4em
+    }
+.block2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 1em 1em 2em
+    }
+.bullet {
+    display: block;
+    list-style-type: disc;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: disc
+    }
+.calibre {
+    background-color: #000007;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre1 {
+    display: block
+    }
+.calibre2 {
+    height: auto;
+    width: auto
+    }
+.calibre3:not(strong) {
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 5pt
+    }
+.calibre4 {
+    font-weight: bold
+    }
+.calibre5 {
+    font-style: italic
+    }
+.calibre6 {
+    background-color: #FFF;
+    display: block;
+    font-family: Charis, "Times New Roman", Verdana, Arial;
+    font-size: 1.125em;
+    line-height: 1.2;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    margin: 0 5pt
+    }
+.calibre7 {
+    display: list-item
+    }
+.calibre8 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre9 {
+    border-collapse: separate;
+    border-spacing: 2px;
+    display: table;
+    margin-bottom: 0;
+    margin-top: 0;
+    text-indent: 0
+    }
+.calibre10 {
+    display: table-row;
+    vertical-align: middle
+    }
+.calibre11 {
+    display: table-cell;
+    text-align: right;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre12 {
+    display: table-cell;
+    text-align: left;
+    vertical-align: inherit;
+    padding: 1px
+    }
+.calibre13 {
+    height: 1em;
+    width: auto
+    }
+.calibre14 {
+    font-size: 0.88889em;
+    line-height: 1.2;
+    vertical-align: super
+    }
+.calibre15 {
+    font-size: 1em;
+    line-height: 1.2;
+    vertical-align: sub
+    }
+.calibre16 {
+    display: block;
+    list-style-type: decimal;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em
+    }
+.calibre17 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0.83em 0
+    }
+.center {
+    display: block;
+    text-align: center;
+    margin: 1em 0
+    }
+.center1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: -2em 0 3em
+    }
+.center2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.center3 {
+    display: block;
+    text-align: center;
+    margin: -1em 0 1em
+    }
+.center4 {
+    display: block;
+    text-align: center;
+    text-indent: 3%;
+    margin: 1em 0
+    }
+.chapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 1em
+    }
+.chapter1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-top: 2em
+    }
+.chapter2 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 2em 0 3em
+    }
+.copyright {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em;
+    text-align: center
+    }
+.dedication {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 4em
+    }
+.dropcaps {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: -0.05em;
+    padding-top: 1px
+    }
+.dropcaps1 {
+    float: left;
+    font-size: 3.4375rem;
+    line-height: 50px;
+    margin-right: 0.09em;
+    margin-top: 0.15em;
+    padding-top: 1px
+    }
+.extract {
+    display: block;
+    text-align: justify;
+    margin: 2em 0 0.3em
+    }
+.extract1 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 2em 0 0.3em
+    }
+.extract2 {
+    display: block;
+    text-align: justify;
+    margin: 1em 0 0.3em
+    }
+.footnote {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.footnote1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0 0.3em 2
+    }
+.footnote2 {
+    border-bottom-style: solid;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-left-width: 0;
+    border-right-style: solid;
+    border-right-width: 0;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-top: 2 em
+    }
+.hanging {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging1 {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1.5em
+    }
+.hanging2 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 1em
+    }
+.hanging3 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+.hanging4 {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: left;
+    text-indent: 0.1em;
+    margin: 0.1em 0 0.3em 1em
+    }
+a.hlink {
+    text-decoration: none
+    }
+.indent {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0
+    }
+.line {
+    border-top: currentColor solid 1px;
+    border-bottom: currentColor solid 1px
+    }
+.loweralpha {
+    display: block;
+    list-style-type: lower-alpha;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 1em;
+    margin-right: 0;
+    margin-top: 1em;
+    text-align: justify
+    }
+.none1 {
+    display: block;
+    list-style-type: none;
+    margin-bottom: 0;
+    margin-right: 0;
+    margin-top: 0;
+    text-align: justify
+    }
+.nonindent {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0
+    }
+.nonindent1 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em 0.1em
+    }
+.nonindent2 {
+    display: block;
+    font-size: 1.125em;
+    line-height: 1.2;
+    text-indent: -1em;
+    margin: 0.5em 0 0.3em -0.5em
+    }
+.nonindent3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0
+    }
+.part {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 2em;
+    text-align: center;
+    margin: 4em 0 1em
+    }
+.preface {
+    display: block;
+    font-size: 0.88889em;
+    line-height: 1.2;
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: justify
+    }
+.pubhlink {
+    color: green;
+    text-decoration: none
+    }
+.right {
+    display: block;
+    text-align: right;
+    margin: 0.3em 0
+    }
+.section {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 2em 0 0.5em
+    }
+.section1 {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em
+    }
+.section2 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: left;
+    margin: 2em 0 0.3em 1em
+    }
+.small {
+    font-size: 0.66667em
+    }
+.small1 {
+    font-size: 0.75em
+    }
+.subchapter {
+    display: block;
+    font-size: 1.125em;
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 1em 0
+    }
+.textbox {
+    background-color: #E4E4E4;
+    display: block;
+    line-height: 1.5em;
+    margin-bottom: 2em;
+    margin-top: 2em;
+    text-align: justify;
+    border-top: currentColor double 2px;
+    border-bottom: currentColor double 2px
+    }
+.textbox1 {
+    display: block;
+    text-align: justify;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.textbox2 {
+    display: block;
+    text-align: justify;
+    text-indent: 1em;
+    margin: 0.3em 0.5em
+    }
+.textbox3 {
+    display: block;
+    text-align: justify;
+    text-indent: 3%;
+    margin: 0.3em 0.5em 0.3em 0.8em
+    }
+.titlepage {
+    display: block;
+    margin-left: -0.4em;
+    margin-top: 1.2em
+    }
+.toc {
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    text-align: center
+    }
+.toc1 {
+    display: block;
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.2;
+    text-align: center;
+    margin: 0.67em 0 3em
+    }
+.underline {
+    text-decoration: underline
+    }
+`

client/assets/ebooks/htmlParser.js

@@ -0,0 +1,248 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
+export const isTitle = (
+  line,
+  isContainDI = false,
+  isContainChapter = false,
+  isContainCHAPTER = false
+) => {
+  return (
+    line.length < 30 &&
+    line.indexOf("[") === -1 &&
+    line.indexOf("(") === -1 &&
+    (line.startsWith("CHAPTER") ||
+      line.startsWith("Chapter") ||
+      line.startsWith("序章") ||
+      line.startsWith("前言") ||
+      line.startsWith("声明") ||
+      line.startsWith("聲明") ||
+      line.startsWith("写在前面的话") ||
+      line.startsWith("后记") ||
+      line.startsWith("楔子") ||
+      line.startsWith("后序") ||
+      line.startsWith("寫在前面的話") ||
+      line.startsWith("後記") ||
+      line.startsWith("後序") ||
+      /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+        line
+      ) ||
+      (line.startsWith("第") && startWithDI(line)) ||
+      (line.startsWith("卷") && startWithJUAN(line)) ||
+      startWithRomanNum(line) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("第") > -1 &&
+        (line[line.indexOf("第") - 1] === " " ||
+          line[line.indexOf("第") - 1] === "　" ||
+          line[line.indexOf("第") - 1] === "、" ||
+          line[line.indexOf("第") - 1] === "：" ||
+          line[line.indexOf("第") - 1] === ":") &&
+        startWithDI(line.substr(line.indexOf("第")))) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(" ") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("　") &&
+        startWithNumAndSpace(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("、") &&
+        startWithNumAndPause(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf("：") &&
+        startWithNumAndColon(line)) ||
+      (!isContainDI &&
+        !isContainChapter &&
+        !isContainCHAPTER &&
+        line.indexOf(":") &&
+        startWithNumAndColon(line)))
+  );
+};
+const startWithDI = (line) => {
+  let keywords = [
+    "章",
+    "节",
+    "回",
+    "節",
+    "卷",
+    "部",
+    "輯",
+    "辑",
+    "話",
+    "集",
+    "话",
+    "篇",
+  ];
+  let flag = false;
+  for (let i = 0; i < keywords.length; i++) {
+    if (
+      (line.indexOf(keywords[i]) > -1 &&
+        (line[line.indexOf(keywords[i]) + 1] === " " ||
+          line[line.indexOf(keywords[i]) + 1] === "　" ||
+          line[line.indexOf(keywords[i]) + 1] === "、" ||
+          line[line.indexOf(keywords[i]) + 1] === "：" ||
+          line[line.indexOf(keywords[i]) + 1] === ":")) ||
+      !line[line.indexOf(keywords[i]) + 1]
+    ) {
+      if (
+        /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+          line.substring(1, line.indexOf(keywords[i])).trim()
+        ) ||
+        /^\d+$/.test(line.substring(1, line.indexOf(keywords[i])).trim())
+      ) {
+        flag = true;
+      }
+      if (flag) break;
+    }
+  }
+  return flag;
+};
+const startWithJUAN = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf(" "))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf(" ")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1, line.indexOf("　"))
+    ) ||
+    /^\d+$/.test(line.substring(1, line.indexOf("　")))
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(1)
+    ) ||
+    /^\d+$/.test(line.substring(1))
+  )
+    return true;
+  return false;
+};
+const startWithRomanNum = (line) => {
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.substring(0, line.indexOf("."))
+    )
+  )
+    return true;
+  if (
+    /(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/.test(
+      line.trim()
+    )
+  )
+    return true;
+  return false;
+};
+const startWithNumAndSpace = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(" "))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("　"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(" ")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("　")))) return true;
+  return false;
+};
+const startWithNumAndColon = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf(":"))
+    )
+  )
+    return true;
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("："))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf(":")))) return true;
+  if (/^\d+$/.test(line.substring(0, line.indexOf("：")))) return true;
+  return false;
+};
+const startWithNumAndPause = (line) => {
+  if (
+    /^[\u4e00\u4e8c\u4e09\u56db\u4e94\u516d\u4e03\u516b\u4e5d\u5341\u767e\u5343\u4e07\u842c]+$/.test(
+      line.substring(0, line.indexOf("、"))
+    )
+  )
+    return true;
+
+  if (/^\d+$/.test(line.substring(0, line.indexOf("、")))) return true;
+  return false;
+};
+
+
+class HtmlParser {
+  bookDoc;
+  contentList;
+  contentTitleList;
+  constructor(bookDoc) {
+    this.bookDoc = bookDoc;
+    this.contentList = [];
+    this.contentTitleList = [];
+    this.getContent(bookDoc);
+  }
+  getContent(bookDoc) {
+    this.contentList = Array.from(
+      bookDoc.querySelectorAll("h1,h2,h3,h4,h5,b,font")
+    ).filter((item, index) => {
+      return isTitle(item.innerText.trim());
+    });
+
+    for (let i = 0; i < this.contentList.length; i++) {
+      let random = Math.floor(Math.random() * 900000) + 100000;
+      this.contentTitleList.push({
+        label: this.contentList[i].innerText,
+        id: "title" + random,
+        href: "#title" + random,
+        subitems: [],
+      });
+    }
+    for (let i = 0; i < this.contentList.length; i++) {
+      this.contentList[i].id = this.contentTitleList[i].id;
+    }
+  }
+  getAnchoredDoc() {
+    return this.bookDoc;
+  }
+  getContentList() {
+    return this.contentTitleList.filter((item, index) => {
+      if (index > 0) {
+        return item.label !== this.contentTitleList[index - 1].label;
+      } else {
+        return true;
+      }
+    });
+  }
+}
+
+export default HtmlParser;

client/assets/ebooks/mobi.js

@@ -0,0 +1,450 @@
+/*
+This is borrowed from koodo-reader https://github.com/troyeguo/koodo-reader/tree/master/src
+*/
+
+function ab2str(buf) {
+  if (buf instanceof ArrayBuffer) {
+    buf = new Uint8Array(buf);
+  }
+  return new TextDecoder("utf-8").decode(buf);
+}
+
+var domParser = new DOMParser();
+
+class Buffer {
+  capacity;
+  fragment_list;
+  imageArray;
+  cur_fragment;
+  constructor(capacity) {
+    this.capacity = capacity;
+    this.fragment_list = [];
+    this.imageArray = [];
+    this.cur_fragment = new Fragment(capacity);
+    this.fragment_list.push(this.cur_fragment);
+  }
+  write(byte) {
+    var result = this.cur_fragment.write(byte);
+    if (!result) {
+      this.cur_fragment = new Fragment(this.capacity);
+      this.fragment_list.push(this.cur_fragment);
+      this.cur_fragment.write(byte);
+    }
+  }
+  get(idx) {
+    var fi = 0;
+    while (fi < this.fragment_list.length) {
+      var frag = this.fragment_list[fi];
+      if (idx < frag.size) {
+        return frag.get(idx);
+      }
+      idx -= frag.size;
+      fi += 1;
+    }
+    return null;
+  }
+  size() {
+    var s = 0;
+    for (var i = 0; i < this.fragment_list.length; i++) {
+      s += this.fragment_list[i].size;
+    }
+    return s;
+  }
+  shrink() {
+    var total_buffer = new Uint8Array(this.size());
+    var offset = 0;
+    for (var i = 0; i < this.fragment_list.length; i++) {
+      var frag = this.fragment_list[i];
+      if (frag.full()) {
+        total_buffer.set(frag.buffer, offset);
+      } else {
+        total_buffer.set(frag.buffer.slice(0, frag.size), offset);
+      }
+      offset += frag.size;
+    }
+    return total_buffer;
+  }
+}
+
+var copagesne_uint8array = function (buffers) {
+  var total_size = 0;
+  for (let i = 0; i < buffers.length; i++) {
+    var buffer = buffers[i];
+    total_size += buffer.length;
+  }
+  var total_buffer = new Uint8Array(total_size);
+  var offset = 0;
+  for (let i = 0; i < buffers.length; i++) {
+    buffer = buffers[i];
+    total_buffer.set(buffer, offset);
+    offset += buffer.length;
+  }
+  return total_buffer;
+};
+
+class Fragment {
+  buffer;
+  capacity;
+  size;
+  constructor(capacity) {
+    this.buffer = new Uint8Array(capacity);
+    this.capacity = capacity;
+    this.size = 0;
+  }
+
+  write(byte) {
+    if (this.size >= this.capacity) {
+      return false;
+    }
+    this.buffer[this.size] = byte;
+    this.size += 1;
+    return true;
+  }
+  full() {
+    return this.size === this.capacity;
+  }
+  get(idx) {
+    return this.buffer[idx];
+  }
+}
+
+var uncompression_lz77 = function (data) {
+  var length = data.length;
+  var offset = 0; // Current offset into data
+  var buffer = new Buffer(data.length);
+
+  while (offset < length) {
+    var char = data[offset];
+    offset += 1;
+
+    if (char === 0) {
+      buffer.write(char);
+    } else if (char <= 8) {
+      for (var i = offset; i < offset + char; i++) {
+        buffer.write(data[i]);
+      }
+      offset += char;
+    } else if (char <= 0x7f) {
+      buffer.write(char);
+    } else if (char <= 0xbf) {
+      var next = data[offset];
+      offset += 1;
+      var distance = (((char << 8) | next) >> 3) & 0x7ff;
+      var lz_length = (next & 0x7) + 3;
+
+      var buffer_size = buffer.size();
+      for (let i = 0; i < lz_length; i++) {
+        buffer.write(buffer.get(buffer_size - distance));
+        buffer_size += 1;
+      }
+    } else {
+      buffer.write(32);
+      buffer.write(char ^ 0x80);
+    }
+  }
+  return buffer;
+};
+
+class MobiFile {
+  view;
+  buffer;
+  offset;
+  header;
+  palm_header;
+  mobi_header;
+  reclist;
+  constructor(data) {
+    this.view = new DataView(data);
+    this.buffer = this.view.buffer;
+    this.offset = 0;
+    this.header = null;
+  }
+
+  parse() { }
+
+  getUint8() {
+    var v = this.view.getUint8(this.offset);
+    this.offset += 1;
+    return v;
+  }
+
+  getUint16() {
+    var v = this.view.getUint16(this.offset);
+    this.offset += 2;
+    return v;
+  }
+
+  getUint32() {
+    var v = this.view.getUint32(this.offset);
+    this.offset += 4;
+    return v;
+  }
+
+  getStr(size) {
+    var v = ab2str(this.buffer.slice(this.offset, this.offset + size));
+    this.offset += size;
+    return v;
+  }
+
+  skip(size) {
+    this.offset += size;
+  }
+
+  setoffset(_of) {
+    this.offset = _of;
+  }
+
+  get_record_extrasize(data, flags) {
+    var pos = data.length - 1;
+    var extra = 0;
+    for (var i = 15; i > 0; i--) {
+      if (flags & (1 << i)) {
+        var res = this.buffer_get_varlen(data, pos);
+        var size = res[0];
+        var l = res[1];
+        pos = res[2];
+        pos -= size - l;
+        extra += size;
+      }
+    }
+    if (flags & 1) {
+      var a = data[pos];
+      extra += (a & 0x3) + 1;
+    }
+    return extra;
+  }
+
+  // data should be uint8array
+  buffer_get_varlen(data, pos) {
+    var l = 0;
+    var size = 0;
+    var byte_count = 0;
+    var mask = 0x7f;
+    var stop_flag = 0x80;
+    var shift = 0;
+    for (var i = 0; ; i++) {
+      var byte = data[pos];
+      size |= (byte & mask) << shift;
+      shift += 7;
+      l += 1;
+      byte_count += 1;
+      pos -= 1;
+
+      var to_stop = byte & stop_flag;
+      if (byte_count >= 4 || to_stop > 0) {
+        break;
+      }
+    }
+    return [size, l, pos];
+  }
+  // 读出文本内容
+  read_text() {
+    var text_end = this.palm_header.record_count;
+    var buffers = [];
+    for (var i = 1; i <= text_end; i++) {
+      buffers.push(this.read_text_record(i));
+    }
+    var all = copagesne_uint8array(buffers);
+    return ab2str(all);
+  }
+
+  read_text_record(i) {
+    var flags = this.mobi_header.extra_flags;
+    var begin = this.reclist[i].offset;
+    var end = this.reclist[i + 1].offset;
+
+    var data = new Uint8Array(this.buffer.slice(begin, end));
+    var ex = this.get_record_extrasize(data, flags);
+
+    data = new Uint8Array(this.buffer.slice(begin, end - ex));
+    if (this.palm_header.compression === 2) {
+      var buffer = uncompression_lz77(data);
+      return buffer.shrink();
+    } else {
+      return data;
+    }
+  }
+  // 从buffer中读出image
+  read_image(idx) {
+    var first_image_idx = this.mobi_header.first_image_idx;
+    var begin = this.reclist[first_image_idx + idx].offset;
+    var end = this.reclist[first_image_idx + idx + 1].offset;
+    var data = new Uint8Array(this.buffer.slice(begin, end));
+    return new Blob([data.buffer]);
+  }
+
+  load() {
+    this.header = this.load_pdbheader();
+    this.reclist = this.load_reclist();
+    this.load_record0();
+  }
+
+  load_pdbheader() {
+    var header = {};
+    header.name = this.getStr(32);
+    header.attr = this.getUint16();
+    header.version = this.getUint16();
+    header.ctime = this.getUint32();
+    header.mtime = this.getUint32();
+    header.btime = this.getUint32();
+    header.mod_num = this.getUint32();
+    header.appinfo_offset = this.getUint32();
+    header.sortinfo_offset = this.getUint32();
+    header.type = this.getStr(4);
+    header.creator = this.getStr(4);
+    header.uid = this.getUint32();
+    header.next_rec = this.getUint32();
+    header.record_num = this.getUint16();
+    return header;
+  }
+
+  load_reclist() {
+    var reclist = [];
+    for (var i = 0; i < this.header.record_num; i++) {
+      var record = {};
+      record.offset = this.getUint32();
+      // TODO(zz) change
+      record.attr = this.getUint32();
+      reclist.push(record);
+    }
+    return reclist;
+  }
+  load_record0() {
+    this.palm_header = this.load_record0_header();
+    this.mobi_header = this.load_mobi_header();
+  }
+
+  load_record0_header() {
+    var p_header = {};
+    var first_record = this.reclist[0];
+    this.setoffset(first_record.offset);
+
+    p_header.compression = this.getUint16();
+    this.skip(2);
+    p_header.text_length = this.getUint32();
+    p_header.record_count = this.getUint16();
+    p_header.record_size = this.getUint16();
+    p_header.encryption_type = this.getUint16();
+    this.skip(2);
+
+    return p_header;
+  }
+
+  load_mobi_header() {
+    var mobi_header = {};
+
+    var start_offset = this.offset;
+
+    mobi_header.identifier = this.getUint32();
+    mobi_header.header_length = this.getUint32();
+    mobi_header.mobi_type = this.getUint32();
+    mobi_header.text_encoding = this.getUint32();
+    mobi_header.uid = this.getUint32();
+    mobi_header.generator_version = this.getUint32();
+
+    this.skip(40);
+
+    mobi_header.first_nonbook_index = this.getUint32();
+    mobi_header.full_name_offset = this.getUint32();
+    mobi_header.full_name_length = this.getUint32();
+
+    mobi_header.language = this.getUint32();
+    mobi_header.input_language = this.getUint32();
+    mobi_header.output_language = this.getUint32();
+    mobi_header.min_version = this.getUint32();
+    mobi_header.first_image_idx = this.getUint32();
+
+    mobi_header.huff_rec_index = this.getUint32();
+    mobi_header.huff_rec_count = this.getUint32();
+    mobi_header.datp_rec_index = this.getUint32();
+    mobi_header.datp_rec_count = this.getUint32();
+
+    mobi_header.exth_flags = this.getUint32();
+
+    this.skip(36);
+
+    mobi_header.drm_offset = this.getUint32();
+    mobi_header.drm_count = this.getUint32();
+    mobi_header.drm_size = this.getUint32();
+    mobi_header.drm_flags = this.getUint32();
+
+    this.skip(8);
+
+    // TODO (zz) fdst_index
+    this.skip(4);
+
+    this.skip(46);
+
+    mobi_header.extra_flags = this.getUint16();
+
+    this.setoffset(start_offset + mobi_header.header_length);
+
+    return mobi_header;
+  }
+  load_exth_header() {
+    // TODO
+    return {};
+  }
+  extractContent(s) {
+    var span = document.createElement("span");
+    span.innerHTML = s;
+    return span.textContent || span.innerText;
+  }
+  render(isElectron = false) {
+    return new Promise((resolve, reject) => {
+      this.load();
+      var content = this.read_text();
+      var bookDoc = domParser.parseFromString(content, "text/html")
+        .documentElement;
+      let lines = Array.from(
+        bookDoc.querySelectorAll("p,b,font,h3,h2,h1")
+      );
+      let parseContent = [];
+      for (let i = 0, len = lines.length; i < len - 1; i++) {
+        lines[i].innerText &&
+          lines[i].innerText !== parseContent[parseContent.length - 1] &&
+          parseContent.push(lines[i].innerText);
+        let imgDoms = lines[i].getElementsByTagName("img");
+        if (imgDoms.length > 0) {
+          for (let i = 0; i < imgDoms.length; i++) {
+            parseContent.push("#image");
+          }
+        }
+      }
+      const handleImage = async () => {
+        var imgDoms = bookDoc.getElementsByTagName("img");
+        parseContent.push("~image");
+        for (let i = 0; i < imgDoms.length; i++) {
+          const src = await this.render_image(imgDoms, i);
+          parseContent.push(
+            src + " " + imgDoms[i].width + " " + imgDoms[i].height
+          );
+        }
+        if (imgDoms.length > 200 || !isElectron) {
+          resolve(bookDoc);
+        } else {
+          resolve(parseContent.join("\n    \n"));
+        }
+      };
+      handleImage();
+    });
+  }
+  render_image = (imgDoms, i) => {
+    return new Promise((resolve, reject) => {
+      var imgDom = imgDoms[i];
+      var idx = +imgDom.getAttribute("recindex");
+      var blob = this.read_image(idx - 1);
+      var imgReader = new FileReader();
+      imgReader.onload = (e) => {
+        imgDom.src = e.target?.result;
+        resolve(e.target?.result);
+      };
+      imgReader.onerror = function (err) {
+        reject(err);
+      };
+      imgReader.readAsDataURL(blob);
+    });
+  };
+}
+
+export default MobiFile;

client/assets/fastSort.js

@@ -1,158 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-      (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['fast-sort'] = {}));
-}(this, (function (exports) {
-  'use strict';
-
-  // >>> INTERFACES <<<
-  // >>> HELPERS <<<
-  var castComparer = function (comparer) { return function (a, b, order) { return comparer(a, b, order) * order; }; };
-  var throwInvalidConfigErrorIfTrue = function (condition, context) {
-    if (condition)
-      throw Error("Invalid sort config: " + context);
-  };
-  var unpackObjectSorter = function (sortByObj) {
-    var _a = sortByObj || {}, asc = _a.asc, desc = _a.desc;
-    var order = asc ? 1 : -1;
-    var sortBy = (asc || desc);
-    // Validate object config
-    throwInvalidConfigErrorIfTrue(!sortBy, 'Expected `asc` or `desc` property');
-    throwInvalidConfigErrorIfTrue(asc && desc, 'Ambiguous object with `asc` and `desc` config properties');
-    var comparer = sortByObj.comparer && castComparer(sortByObj.comparer);
-    return { order: order, sortBy: sortBy, comparer: comparer };
-  };
-  // >>> SORTERS <<<
-  var multiPropertySorterProvider = function (defaultComparer) {
-    return function multiPropertySorter(sortBy, sortByArr, depth, order, comparer, a, b) {
-      var valA;
-      var valB;
-      if (typeof sortBy === 'string') {
-        valA = a[sortBy];
-        valB = b[sortBy];
-      }
-      else if (typeof sortBy === 'function') {
-        valA = sortBy(a);
-        valB = sortBy(b);
-      }
-      else {
-        var objectSorterConfig = unpackObjectSorter(sortBy);
-        return multiPropertySorter(objectSorterConfig.sortBy, sortByArr, depth, objectSorterConfig.order, objectSorterConfig.comparer || defaultComparer, a, b);
-      }
-      var equality = comparer(valA, valB, order);
-      if ((equality === 0 || (valA == null && valB == null)) &&
-        sortByArr.length > depth) {
-        return multiPropertySorter(sortByArr[depth], sortByArr, depth + 1, order, comparer, a, b);
-      }
-      return equality;
-    };
-  };
-  function getSortStrategy(sortBy, comparer, order) {
-    // Flat array sorter
-    if (sortBy === undefined || sortBy === true) {
-      return function (a, b) { return comparer(a, b, order); };
-    }
-    // Sort list of objects by single object key
-    if (typeof sortBy === 'string') {
-      throwInvalidConfigErrorIfTrue(sortBy.includes('.'), 'String syntax not allowed for nested properties.');
-      return function (a, b) { return comparer(a[sortBy], b[sortBy], order); };
-    }
-    // Sort list of objects by single function sorter
-    if (typeof sortBy === 'function') {
-      return function (a, b) { return comparer(sortBy(a), sortBy(b), order); };
-    }
-    // Sort by multiple properties
-    if (Array.isArray(sortBy)) {
-      var multiPropSorter_1 = multiPropertySorterProvider(comparer);
-      return function (a, b) { return multiPropSorter_1(sortBy[0], sortBy, 1, order, comparer, a, b); };
-    }
-    // Unpack object config to get actual sorter strategy
-    var objectSorterConfig = unpackObjectSorter(sortBy);
-    return getSortStrategy(objectSorterConfig.sortBy, objectSorterConfig.comparer || comparer, objectSorterConfig.order);
-  }
-  var sortArray = function (order, ctx, sortBy, comparer) {
-    var _a;
-    if (!Array.isArray(ctx)) {
-      return ctx;
-    }
-    // Unwrap sortBy if array with only 1 value to get faster sort strategy
-    if (Array.isArray(sortBy) && sortBy.length < 2) {
-      _a = sortBy, sortBy = _a[0];
-    }
-    return ctx.sort(getSortStrategy(sortBy, comparer, order));
-  };
-  // >>> Public <<<
-  var createNewSortInstance = function (opts) {
-    var comparer = castComparer(opts.comparer);
-    return function (_ctx) {
-      var ctx = Array.isArray(_ctx) && !opts.inPlaceSorting
-        ? _ctx.slice()
-        : _ctx;
-      return {
-        /**
-         * Sort array in ascending order.
-         * @example
-         * sort([3, 1, 4]).asc();
-         * sort(users).asc(u => u.firstName);
-         * sort(users).asc([
-         *   U => u.firstName
-         *   u => u.lastName,
-         * ]);
-         */
-        asc: function (sortBy) {
-          return sortArray(1, ctx, sortBy, comparer);
-        },
-        /**
-         * Sort array in descending order.
-         * @example
-         * sort([3, 1, 4]).desc();
-         * sort(users).desc(u => u.firstName);
-         * sort(users).desc([
-         *   U => u.firstName
-         *   u => u.lastName,
-         * ]);
-         */
-        desc: function (sortBy) {
-          return sortArray(-1, ctx, sortBy, comparer);
-        },
-        /**
-         * Sort array in ascending or descending order. It allows sorting on multiple props
-         * in different order for each of them.
-         * @example
-         * sort(users).by([
-         *  { asc: u => u.score }
-         *  { desc: u => u.age }
-         * ]);
-         */
-        by: function (sortBy) {
-          return sortArray(1, ctx, sortBy, comparer);
-        },
-      };
-    };
-  };
-  var defaultComparer = function (a, b, order) {
-    if (a == null)
-      return order;
-    if (b == null)
-      return -order;
-    if (a < b)
-      return -1;
-    if (a === b)
-      return 0;
-    return 1;
-  };
-  var sort = createNewSortInstance({
-    comparer: defaultComparer,
-  });
-  var inPlaceSort = createNewSortInstance({
-    comparer: defaultComparer,
-    inPlaceSorting: true,
-  });
-
-  exports.createNewSortInstance = createNewSortInstance;
-  exports.inPlaceSort = inPlaceSort;
-  exports.sort = sort;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));

client/assets/fonts.css

@@ -0,0 +1,296 @@
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~static/fonts/MaterialSymbolsRounded.woff2) format('woff2');
+}
+
+.material-symbols {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  vertical-align: top;
+}
+
+.material-symbols.fill {
+  font-variation-settings:
+    'FILL' 1
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

client/assets/tailwind.css

@@ -0,0 +1,85 @@
+@import 'tailwindcss';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  [role='button'],
+  button {
+    cursor: pointer;
+  }
+}
+
+@theme {
+  --spacing-0\.5e: 0.125em;
+  --spacing-1e: 0.25em;
+  --spacing-1\.5e: 0.375em;
+  --spacing-2e: 0.5em;
+  --spacing-2\.5e: 0.625em;
+  --spacing-3e: 0.75em;
+  --spacing-3\.5e: 0.875em;
+  --spacing-4e: 1em;
+  --spacing-5e: 1.25em;
+  --spacing-6e: 1.5em;
+  --spacing-7e: 1.75em;
+  --spacing-8e: 2em;
+  --spacing-9e: 2.25em;
+  --spacing-10e: 2.5em;
+  --spacing-11e: 2.75em;
+  --spacing-12e: 3em;
+  --spacing-14e: 3.5em;
+  --spacing-16e: 4em;
+  --spacing-20e: 5em;
+  --spacing-24e: 6em;
+  --spacing-28e: 7em;
+  --spacing-32e: 8em;
+  --spacing-36e: 9em;
+  --spacing-40e: 10em;
+  --spacing-44e: 11em;
+  --spacing-48e: 12em;
+  --spacing-52e: 13em;
+  --spacing-56e: 14em;
+  --spacing-60e: 15em;
+  --spacing-64e: 16em;
+  --spacing-72e: 18em;
+  --spacing-80e: 20em;
+  --spacing-96e: 24em;
+
+  --color-bg: #373838;
+  --color-primary: #232323;
+  --color-accent: #1ad691;
+  --color-error: #ff5252;
+  --color-info: #2196f3;
+  --color-success: #4caf50;
+  --color-warning: #fb8c00;
+  --color-darkgreen: rgb(34, 127, 35);
+  --color-black-50: #bbbbbb;
+  --color-black-100: #666666;
+  --color-black-200: #555555;
+  --color-black-300: #444444;
+  --color-black-400: #333333;
+  --color-black-500: #222222;
+  --color-black-600: #111111;
+  --color-black-700: #101010;
+
+  --font-sans: 'Source Sans Pro';
+  --font-mono: 'Ubuntu Mono';
+
+  --text-xxs: 0.625rem;
+  --text-1\.5xl: 1.375rem;
+  --text-2\.5xl: 1.6875rem;
+  --text-4\.5xl: 2.625rem;
+}

client/assets/transitions.css

@@ -20,42 +20,67 @@
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 
-.slide-enter-to, .slide-leave {
+.slide-enter-to,
+.slide-leave {
   max-height: 600px;
   overflow: hidden;
 }
 
-.slide-enter, .slide-leave-to {
+.slide-enter,
+.slide-leave-to {
   overflow: hidden;
   max-height: 0;
 }
 
 
 
-.menu-enter, .menu-leave-active {
+.menu-enter,
+.menu-leave-active {
   transform: translateY(-15px);
 }
+
 .menu-enter-active {
   transition: all 0.2s;
 }
+
 .menu-leave-active {
   transition: all 0.1s;
 }
+
 .menu-enter,
 .menu-leave-active {
   opacity: 0;
 }
 
-.menux-enter, .menux-leave-active {
+.menux-enter,
+.menux-leave-active {
   transform: translateX(15px);
 }
+
 .menux-enter-active {
   transition: all 0.2s;
 }
+
 .menux-leave-active {
   transition: all 0.1s;
 }
+
 .menux-enter,
 .menux-leave-active {
   opacity: 0;
 }
+
+
+.list-complete-item {
+  transition: all 0.8s ease;
+}
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}

client/assets/trix.css

@@ -0,0 +1,570 @@
+@charset "UTF-8";
+
+/*
+Trix 1.3.1
+Copyright © 2020 Basecamp, LLC
+http://trix-editor.org/*/
+trix-editor {
+  border: 1px solid rgb(75, 85, 99);
+  border-radius: 3px;
+  background: rgb(35, 35, 35);
+  margin: 0;
+  padding: 0.4em 0.6em;
+  min-height: 5em;
+  outline: none;
+}
+
+trix-toolbar * {
+  box-sizing: border-box;
+}
+
+trix-toolbar .trix-button-row {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  overflow-x: auto;
+}
+
+trix-toolbar .trix-button-group {
+  display: flex;
+  margin-bottom: 10px;
+  border: 1px solid rgb(75, 85, 99);
+  border-top-color: rgb(75, 85, 99);
+  border-bottom-color: rgb(75, 85, 99);
+  border-radius: 3px;
+}
+
+trix-toolbar .trix-button-group:not(:first-child) {
+  margin-left: 1.5vw;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button-group:not(:first-child) {
+    margin-left: 0;
+  }
+}
+
+trix-toolbar .trix-button-group-spacer {
+  flex-grow: 1;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button-group-spacer {
+    display: none;
+  }
+}
+
+trix-toolbar .trix-button {
+  position: relative;
+  float: left;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.75em;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 0 0.5em;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+trix-toolbar .trix-button:not(:first-child) {
+  border-left: 1px solid rgb(75, 85, 99);
+}
+
+trix-toolbar .trix-button.trix-active {
+  background: #bbb;
+  color: black;
+}
+
+trix-toolbar .trix-button:not(:disabled) {
+  cursor: pointer;
+  background: rgb(35, 35, 35);
+}
+
+trix-toolbar .trix-button:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button {
+    letter-spacing: -0.01em;
+    padding: 0 0.3em;
+  }
+}
+
+trix-toolbar .trix-button--icon {
+  font-size: inherit;
+  width: 2.6em;
+  height: 1.6em;
+  max-width: calc(0.8em + 4vw);
+  text-indent: -9999px;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button--icon {
+    height: 2em;
+    max-width: calc(0.8em + 3.5vw);
+  }
+}
+
+trix-toolbar .trix-button--icon::before {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.6;
+  content: "";
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  filter: invert(100%);
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button--icon::before {
+    right: 6%;
+    left: 6%;
+  }
+}
+
+trix-toolbar .trix-button--icon.trix-active::before {
+  opacity: 1;
+}
+
+trix-toolbar .trix-button--icon:disabled::before {
+  opacity: 0.125;
+}
+
+trix-toolbar .trix-button--icon-attach::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
+  top: 8%;
+  bottom: 4%;
+}
+
+trix-toolbar .trix-button--icon-bold::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-italic::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-link::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-strike::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-quote::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-heading-1::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-code::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-bullet-list::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-number-list::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-undo::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-redo::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-decrease-nesting-level::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-increase-nesting-level::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-dialogs {
+  position: relative;
+}
+
+trix-toolbar .trix-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 0.75em;
+  padding: 15px 10px;
+  background: rgb(48, 48, 48);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgb(112, 112, 112);
+  border-radius: 5px;
+  z-index: 5;
+}
+
+trix-toolbar .trix-input--dialog {
+  font-size: inherit;
+  font-weight: normal;
+  padding: 0.5em 0.8em;
+  margin: 0 10px 0 0;
+  border-radius: 3px;
+  border: 1px solid #bbb;
+  background-color: rgb(95, 95, 95);
+  box-shadow: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+trix-toolbar .trix-input--dialog.validate:invalid {
+  box-shadow: #F00 0px 0px 1.5px 1px;
+}
+
+trix-toolbar .trix-button--dialog {
+  font-size: inherit;
+  padding: 0.5em;
+  border-bottom: none;
+  color: #eee;
+}
+
+trix-toolbar .trix-dialog--link {
+  max-width: 600px;
+}
+
+trix-toolbar .trix-dialog__link-fields {
+  display: flex;
+  align-items: baseline;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-input {
+  flex: 1;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-button-group {
+  flex: 0 0 content;
+  margin: 0;
+}
+
+trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+trix-editor [data-trix-mutable]::-moz-selection,
+trix-editor [data-trix-cursor-target]::-moz-selection,
+trix-editor [data-trix-mutable] ::-moz-selection {
+  background: none;
+}
+
+trix-editor [data-trix-mutable]::selection,
+trix-editor [data-trix-cursor-target]::selection,
+trix-editor [data-trix-mutable] ::selection {
+  background: none;
+}
+
+trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
+  background: highlight;
+}
+
+trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
+  background: highlight;
+}
+
+trix-editor [data-trix-mutable].attachment.attachment--file {
+  box-shadow: 0 0 0 2px highlight;
+  border-color: transparent;
+}
+
+trix-editor [data-trix-mutable].attachment img {
+  box-shadow: 0 0 0 2px highlight;
+}
+
+trix-editor .attachment {
+  position: relative;
+}
+
+trix-editor .attachment:hover {
+  cursor: default;
+}
+
+trix-editor .attachment--preview .attachment__caption:hover {
+  cursor: text;
+}
+
+trix-editor .attachment__progress {
+  position: absolute;
+  z-index: 1;
+  height: 20px;
+  top: calc(50% - 10px);
+  left: 5%;
+  width: 90%;
+  opacity: 0.9;
+  transition: opacity 200ms ease-in;
+}
+
+trix-editor .attachment__progress[value="100"] {
+  opacity: 0;
+}
+
+trix-editor .attachment__caption-editor {
+  display: inline-block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: center;
+  vertical-align: top;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+trix-editor .attachment__toolbar {
+  position: absolute;
+  z-index: 1;
+  top: -0.9em;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+trix-editor .trix-button-group {
+  display: inline-flex;
+}
+
+trix-editor .trix-button {
+  position: relative;
+  float: left;
+  color: #666;
+  white-space: nowrap;
+  font-size: 80%;
+  padding: 0 0.8em;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+trix-editor .trix-button:not(:first-child) {
+  border-left: 1px solid #ccc;
+}
+
+trix-editor .trix-button.trix-active {
+  background: #cbeefa;
+}
+
+trix-editor .trix-button:not(:disabled) {
+  cursor: pointer;
+}
+
+trix-editor .trix-button--remove {
+  text-indent: -9999px;
+  display: inline-block;
+  padding: 0;
+  outline: none;
+  width: 1.8em;
+  height: 1.8em;
+  line-height: 1.8em;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2px solid highlight;
+  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
+}
+
+trix-editor .trix-button--remove::before {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.7;
+  content: "";
+  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 90%;
+}
+
+trix-editor .trix-button--remove:hover {
+  border-color: #333;
+}
+
+trix-editor .trix-button--remove:hover::before {
+  opacity: 1;
+}
+
+trix-editor .attachment__metadata-container {
+  position: relative;
+}
+
+trix-editor .attachment__metadata {
+  position: absolute;
+  left: 50%;
+  top: 2em;
+  transform: translate(-50%, 0);
+  max-width: 90%;
+  padding: 0.1em 0.6em;
+  font-size: 0.8em;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 3px;
+}
+
+trix-editor .attachment__metadata .attachment__name {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+trix-editor .attachment__metadata .attachment__size {
+  margin-left: 0.2em;
+  white-space: nowrap;
+}
+
+.trix-content {
+  line-height: inherit;
+}
+
+.trix-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.trix-content p {
+  box-sizing: border-box;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  padding: 0;
+}
+
+.trix-content h1 {
+  font-size: 1.2em;
+  line-height: 1.2;
+}
+
+.trix-content blockquote {
+  border: 0 solid #ccc;
+  border-left-width: 0.3em;
+  margin-left: 0.3em;
+  padding-left: 0.6em;
+}
+
+.trix-content [dir=rtl] blockquote,
+.trix-content blockquote[dir=rtl] {
+  border-width: 0;
+  border-right-width: 0.3em;
+  margin-right: 0.3em;
+  padding-right: 0.6em;
+}
+
+.trix-content li {
+  margin-left: 1em;
+}
+
+.trix-content [dir=rtl] li {
+  margin-right: 1em;
+}
+
+.trix-content pre {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 0.5em;
+  white-space: pre;
+  background-color: #eee;
+  overflow-x: auto;
+}
+
+.trix-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.trix-content .attachment {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+}
+
+.trix-content .attachment a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.trix-content .attachment a:hover,
+.trix-content .attachment a:visited:hover {
+  color: inherit;
+}
+
+.trix-content .attachment__caption {
+  text-align: center;
+}
+
+.trix-content .attachment__caption .attachment__name+.attachment__size::before {
+  content: ' · ';
+}
+
+.trix-content .attachment--preview {
+  width: 100%;
+  text-align: center;
+}
+
+.trix-content .attachment--preview .attachment__caption {
+  color: #666;
+  font-size: 0.9em;
+  line-height: 1.2;
+}
+
+.trix-content .attachment--file {
+  color: #333;
+  line-height: 1;
+  margin: 0 2px 2px 2px;
+  padding: 0.4em 1em;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+}
+
+.trix-content .attachment-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.trix-content .attachment-gallery .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}

client/components/AudioPlayer.vue

@@ -1,463 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="w-full relative mb-4">
-      <div class="absolute left-2 top-0 bottom-0 h-full flex items-center">
-        <p ref="currentTimestamp" class="font-mono text-sm">00:00:00</p>
-      </div>
-      <div class="absolute right-2 top-0 bottom-0 h-full flex items-center">
-        <p class="font-mono text-sm">{{ totalDurationPretty }}</p>
-      </div>
-
-      <div class="absolute right-24 top-0 bottom-0">
-        <controls-volume-control v-model="volume" @input="updateVolume" />
-      </div>
-      <div class="flex my-2">
-        <div class="flex-grow" />
-
-        <template v-if="!loading">
-          <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-8" @mousedown.prevent @mouseup.prevent @click.stop="restart">
-            <span class="material-icons text-3xl">first_page</span>
-          </div>
-          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="backward10">
-            <span class="material-icons 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-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
-            <span class="material-icons">{{ seekLoading ? 'autorenew' : isPaused ? 'play_arrow' : 'pause' }}</span>
-          </div>
-          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="forward10">
-            <span class="material-icons text-3xl">forward_10</span>
-          </div>
-          <controls-playback-speed-control v-model="playbackRate" @change="playbackRateChanged" />
-        </template>
-        <template v-else>
-          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-            <span class="material-icons">autorenew</span>
-          </div>
-        </template>
-
-        <div class="flex-grow" />
-      </div>
-    </div>
-    <div class="relative">
-      <!-- Track -->
-      <div ref="track" class="w-full h-2 bg-gray-700 relative cursor-pointer transform duration-100 hover:scale-y-125 overflow-hidden" @mousemove="mousemoveTrack" @mouseleave="mouseleaveTrack" @click.stop="clickTrack">
-        <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
-        <div ref="bufferTrack" class="h-full bg-gray-400 absolute top-0 left-0 pointer-events-none" />
-        <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
-        <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
-        <div v-if="loading" class="h-full w-1/4 absolute left-0 top-0 loadingTrack pointer-events-none bg-white bg-opacity-25" />
-      </div>
-
-      <!-- Hover timestamp -->
-      <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
-        <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5">00:00</p>
-        <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
-          <div class="arrow-down" />
-        </div>
-      </div>
-    </div>
-
-    <audio ref="audio" @pause="paused" @playing="playing" @progress="progress" @timeupdate="timeupdate" @loadeddata="audioLoadedData" />
-  </div>
-</template>
-
-<script>
-import Hls from 'hls.js'
-
-export default {
-  props: {
-    loading: Boolean
-  },
-  data() {
-    return {
-      hlsInstance: null,
-      staleHlsInstance: null,
-      volume: 0.5,
-      playbackRate: 1,
-      trackWidth: 0,
-      isPaused: true,
-      url: null,
-      src: null,
-      playedTrackWidth: 0,
-      bufferTrackWidth: 0,
-      readyTrackWidth: 0,
-      audioEl: null,
-      totalDuration: 0,
-      seekedTime: 0,
-      seekLoading: false
-    }
-  },
-  computed: {
-    token() {
-      return this.$store.getters['user/getToken']
-    },
-    totalDurationPretty() {
-      return this.$secondsToTimestamp(this.totalDuration)
-    }
-  },
-  methods: {
-    seek(time) {
-      if (this.loading) {
-        return
-      }
-      if (this.seekLoading) {
-        console.error('Already seek loading', this.seekedTime)
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio el for seek', time)
-        return
-      }
-      this.seekedTime = time
-      this.seekLoading = true
-      console.warn('SEEK TO', this.$secondsToTimestamp(time))
-      this.audioEl.currentTime = time
-
-      if (this.$refs.playedTrack) {
-        var perc = time / this.audioEl.duration
-        var ptWidth = Math.round(perc * this.trackWidth)
-        this.$refs.playedTrack.style.width = ptWidth + 'px'
-        this.playedTrackWidth = ptWidth
-
-        this.$refs.playedTrack.classList.remove('bg-gray-200')
-        this.$refs.playedTrack.classList.add('bg-yellow-300')
-      }
-    },
-    updateVolume(volume) {
-      if (this.audioEl) {
-        this.audioEl.volume = volume
-      }
-    },
-    updatePlaybackRate(playbackRate) {
-      if (this.audioEl) {
-        try {
-          this.audioEl.playbackRate = playbackRate
-          this.audioEl.defaultPlaybackRate = playbackRate
-        } catch (error) {
-          console.error('Update playback rate failed', error)
-        }
-      } else {
-        console.error('No Audio El updatePlaybackRate')
-      }
-    },
-    playbackRateChanged(playbackRate) {
-      this.updatePlaybackRate(playbackRate)
-      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
-    },
-    mousemoveTrack(e) {
-      var offsetX = e.offsetX
-      var time = (offsetX / this.trackWidth) * this.totalDuration
-      if (this.$refs.hoverTimestamp) {
-        var width = this.$refs.hoverTimestamp.clientWidth
-        this.$refs.hoverTimestamp.style.opacity = 1
-        this.$refs.hoverTimestamp.style.left = offsetX - width / 2 + 'px'
-      }
-      if (this.$refs.hoverTimestampText) {
-        this.$refs.hoverTimestampText.innerText = this.$secondsToTimestamp(time)
-      }
-      if (this.$refs.trackCursor) {
-        this.$refs.trackCursor.style.opacity = 1
-        this.$refs.trackCursor.style.left = offsetX - 1 + 'px'
-      }
-    },
-    mouseleaveTrack() {
-      if (this.$refs.hoverTimestamp) {
-        this.$refs.hoverTimestamp.style.opacity = 0
-      }
-      if (this.$refs.trackCursor) {
-        this.$refs.trackCursor.style.opacity = 0
-      }
-    },
-    restart() {
-      this.seek(0)
-    },
-    backward10() {
-      var newTime = this.audioEl.currentTime - 10
-      newTime = Math.max(0, newTime)
-      this.seek(newTime)
-    },
-    forward10() {
-      var newTime = this.audioEl.currentTime + 10
-      newTime = Math.min(this.audioEl.duration, newTime)
-      this.seek(newTime)
-    },
-    sendStreamUpdate() {
-      if (!this.audioEl) return
-      this.$emit('updateTime', this.audioEl.currentTime)
-    },
-    setStreamReady() {
-      this.readyTrackWidth = this.trackWidth
-      this.$refs.readyTrack.style.width = this.trackWidth + 'px'
-    },
-    setChunksReady(chunks, numSegments) {
-      var largestSeg = 0
-      for (let i = 0; i < chunks.length; i++) {
-        var chunk = chunks[i]
-        if (typeof chunk === 'string') {
-          var chunkRange = chunk.split('-').map((c) => Number(c))
-          if (chunkRange.length < 2) continue
-          if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
-        } else if (chunk > largestSeg) {
-          largestSeg = chunk
-        }
-      }
-      var percentageReady = largestSeg / numSegments
-      var widthReady = Math.round(this.trackWidth * percentageReady)
-      if (this.readyTrackWidth === widthReady) return
-      this.readyTrackWidth = widthReady
-      this.$refs.readyTrack.style.width = widthReady + 'px'
-    },
-    updateTimestamp() {
-      var ts = this.$refs.currentTimestamp
-      if (!ts) {
-        console.error('No timestamp el')
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio El')
-        return
-      }
-      var currTimeClean = this.$secondsToTimestamp(this.audioEl.currentTime)
-      ts.innerText = currTimeClean
-    },
-    clickTrack(e) {
-      var offsetX = e.offsetX
-      var perc = offsetX / this.trackWidth
-      var time = perc * this.audioEl.duration
-      if (isNaN(time) || time === null) {
-        console.error('Invalid time', perc, time)
-        return
-      }
-      this.seek(time)
-    },
-    playPauseClick() {
-      if (this.isPaused) {
-        this.play()
-      } else {
-        this.pause()
-      }
-    },
-    isValidDuration(duration) {
-      if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
-        return true
-      }
-      return false
-    },
-    getBufferedRanges() {
-      if (!this.audioEl) return []
-
-      const ranges = []
-      const seekable = this.audioEl.buffered || []
-
-      let offset = 0
-
-      for (let i = 0, length = seekable.length; i < length; i++) {
-        let start = seekable.start(i)
-        let end = seekable.end(i)
-        if (!this.isValidDuration(start)) {
-          start = 0
-        }
-        if (!this.isValidDuration(end)) {
-          end = 0
-          continue
-        }
-
-        ranges.push({
-          start: start + offset,
-          end: end + offset
-        })
-      }
-
-      return ranges
-    },
-    getLastBufferedTime() {
-      var bufferedRanges = this.getBufferedRanges()
-      if (!bufferedRanges.length) return 0
-
-      var buff = bufferedRanges.find((buff) => buff.start < this.audioEl.currentTime && buff.end > this.audioEl.currentTime)
-      if (buff) return buff.end
-
-      var last = bufferedRanges[bufferedRanges.length - 1]
-      return last.end
-    },
-    progress() {
-      if (!this.audioEl) {
-        return
-      }
-      var lastbuff = this.getLastBufferedTime()
-      this.sendStreamUpdate()
-      var bufferlen = (lastbuff / this.audioEl.duration) * this.trackWidth
-      bufferlen = Math.round(bufferlen)
-      if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return
-      this.$refs.bufferTrack.style.width = bufferlen + 'px'
-      this.bufferTrackWidth = bufferlen
-    },
-    timeupdate() {
-      // console.log('Time update', this.audioEl.currentTime)
-      if (!this.$refs.playedTrack) {
-        console.error('Invalid no played track ref')
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio El')
-        return
-      }
-
-      if (this.seekLoading) {
-        this.seekLoading = false
-        if (this.$refs.playedTrack) {
-          this.$refs.playedTrack.classList.remove('bg-yellow-300')
-          this.$refs.playedTrack.classList.add('bg-gray-200')
-        }
-      }
-
-      this.updateTimestamp()
-
-      var perc = this.audioEl.currentTime / this.audioEl.duration
-      var ptWidth = Math.round(perc * this.trackWidth)
-      if (this.playedTrackWidth === ptWidth) {
-        return
-      }
-      this.$refs.playedTrack.style.width = ptWidth + 'px'
-      this.playedTrackWidth = ptWidth
-    },
-    paused() {
-      if (!this.$refs.audio) {
-        console.error('No audio on paused()')
-        return
-      }
-      this.isPaused = this.$refs.audio.paused
-    },
-    playing() {
-      if (!this.$refs.audio) {
-        console.error('No audio on playing()')
-        return
-      }
-      this.isPaused = this.$refs.audio.paused
-    },
-    audioLoadedData() {
-      this.totalDuration = this.audioEl.duration
-    },
-    set(url, currentTime, playOnLoad = false) {
-      if (this.hlsInstance) {
-        this.terminateStream()
-      }
-      if (!this.$refs.audio) {
-        console.error('No audio widget')
-        return
-      }
-      this.url = url
-      if (process.env.NODE_ENV === 'development') {
-        url = `${process.env.serverUrl}${url}`
-      }
-      this.src = url
-      console.log('[AudioPlayer-Set] Set url', url)
-
-      var hlsOptions = {
-        startPosition: currentTime || -1,
-        xhrSetup: (xhr) => {
-          xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-        }
-      }
-      console.log('[AudioPlayer-Set] HLS Config', hlsOptions)
-      this.hlsInstance = new Hls(hlsOptions)
-      var audio = this.$refs.audio
-      audio.volume = this.volume
-      audio.defaultPlaybackRate = this.playbackRate
-
-      this.hlsInstance.attachMedia(audio)
-      this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-        // console.log('[HLS] MEDIA ATTACHED')
-        this.hlsInstance.loadSource(url)
-
-        this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, function () {
-          console.log('[HLS] Manifest Parsed')
-          if (playOnLoad) {
-            audio.play()
-          }
-        })
-
-        this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
-          console.error('[HLS] Error', data.type, data.details)
-          if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
-            console.error('[HLS] BUFFER STALLED ERROR')
-          }
-        })
-        this.hlsInstance.on(Hls.Events.DESTROYING, () => {
-          console.warn('[HLS] Destroying HLS Instance')
-        })
-      })
-    },
-    play() {
-      if (!this.$refs.audio) {
-        console.error('No Audio ref')
-        return
-      }
-      this.$refs.audio.play()
-    },
-    pause() {
-      if (!this.$refs.audio) return
-      this.$refs.audio.pause()
-    },
-    terminateStream() {
-      if (this.hlsInstance) {
-        if (!this.hlsInstance.destroy) {
-          console.error('HLS Instance has no destroy property', this.hlsInstance)
-          return
-        }
-        this.staleHlsInstance = this.hlsInstance
-        this.staleHlsInstance.destroy()
-        this.hlsInstance = null
-        console.log('Terminated HLS Instance', this.staleHlsInstance)
-      }
-    },
-    async resetStream(startTime) {
-      if (this.$refs.audio) this.$refs.audio.pause()
-      this.terminateStream()
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      console.log('Waited 1 second after terminating stream to start again')
-      this.set(this.url, startTime, true)
-    },
-    init() {
-      this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
-
-      this.audioEl = this.$refs.audio
-      if (this.$refs.track) {
-        this.trackWidth = this.$refs.track.clientWidth
-      } else {
-        console.error('Track not loaded', this.$refs)
-      }
-    },
-    settingsUpdated(settings) {
-      if (settings.playbackRate && this.playbackRate !== settings.playbackRate) {
-        this.updatePlaybackRate(settings.playbackRate)
-      }
-    }
-  },
-  mounted() {
-    this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated })
-    this.init()
-  },
-  beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'audioplayer')
-  }
-}
-</script>
-
-<style>
-.loadingTrack {
-  animation-name: loadingTrack;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-}
-@keyframes loadingTrack {
-  0% {
-    left: -25%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-</style>

client/components/app/Appbar.vue

@@ -1,31 +1,83 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-30">
+    <div id="appbar" role="toolbar" aria-label="Appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-60">
       <div class="flex h-full items-center">
-        <img v-if="!showBack" src="/Logo48.png" class="w-12 h-12 mr-4" />
-        <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
-          <span class="material-icons text-4xl text-white">arrow_back</span>
-        </a>
-        <h1 class="text-2xl font-book mr-6">AudioBookshelf</h1>
-
-        <controls-global-search />
-        <div class="flex-grow" />
-
-        <nuxt-link v-if="isRootUser" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
-          <span class="material-icons">settings</span>
+        <nuxt-link to="/">
+          <img src="~static/icon.svg" :alt="$strings.ButtonHome" class="w-8 min-w-8 h-8 mr-2 sm:w-10 sm:min-w-10 sm:h-10 sm:mr-4" />
         </nuxt-link>
 
-        <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" />
+        <nuxt-link to="/">
+          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
+        </nuxt-link>
+
+        <ui-libraries-dropdown class="mr-2" />
+
+        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
+        <div class="grow" />
+
+        <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
+          <span class="material-symbols text-2xl text-warning/50"> cast </span>
+        </ui-tooltip>
+        <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
+          <google-cast-launcher></google-cast-launcher>
         </div>
 
-      <div v-show="numAudiobooksSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
-        <h1 class="text-2xl px-4">{{ numAudiobooksSelected }} Selected</h1>
-        <ui-btn small class="text-sm mx-2" @click="toggleSelectAll">{{ isAllSelected ? 'Select None' : 'Select All' }}</ui-btn>
+        <widgets-notification-widget class="hidden md:block" />
 
-        <div class="flex-grow" />
-        <ui-btn v-show="!processingBatchDelete" color="warning" small class="mx-2" @click="batchEditClick"><span class="material-icons text-gray-200 pt-1">edit</span></ui-btn>
-        <ui-btn color="error" small class="mx-2" :loading="processingBatchDelete" @click="batchDeleteClick"><span class="material-icons text-gray-200 pt-1">delete</span></ui-btn>
-        <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        <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-symbols text-2xl" aria-label="User Stats" role="button">&#xe01d;</span>
+          </ui-tooltip>
+        </nuxt-link>
+
+        <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <ui-tooltip :text="$strings.ButtonUpload" direction="bottom" class="flex items-center">
+            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">&#xf09b;</span>
+          </ui-tooltip>
+        </nuxt-link>
+
+        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <ui-tooltip :text="$strings.HeaderSettings" direction="bottom" class="flex items-center">
+            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">&#xe8b8;</span>
+          </ui-tooltip>
+        </nuxt-link>
+
+        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded-sm shadow-xs ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg/40" aria-haspopup="listbox" aria-expanded="true">
+          <span class="items-center hidden md:flex">
+            <span class="block truncate">{{ username }}</span>
+          </span>
+          <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
+            <span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
+          </span>
+        </nuxt-link>
+      </div>
+      <div v-show="numMediaItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
+        <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}</h1>
+        <div class="grow" />
+        <ui-btn v-if="!isPodcastLibrary && selectedMediaItemsArePlayable" color="bg-success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playSelectedItems">
+          <span class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+          {{ $strings.ButtonPlay }}
+        </ui-btn>
+        <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>
+        <ui-tooltip v-if="userCanUpdate && isBookLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
+        </ui-tooltip>
+        <template v-if="userCanUpdate">
+          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
+            <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="bg-warning" class="mx-1.5" @click="batchEditClick" />
+          </ui-tooltip>
+        </template>
+        <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="bg-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-symbols text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        </ui-tooltip>
       </div>
     </div>
   </div>
@@ -35,107 +87,302 @@
 export default {
   data() {
     return {
-      menuItems: [
-        {
-          value: 'account',
-          text: 'Account',
-          to: '/account'
-        },
-        {
-          value: 'logout',
-          text: 'Logout'
-        }
-      ],
-      processingBatchDelete: false
+      totalEntities: 0
     }
   },
   computed: {
-    showBack() {
-      return this.$route.name !== 'index'
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    libraryName() {
+      return this.currentLibrary ? this.currentLibrary.name : 'unknown'
+    },
+    libraryMediaType() {
+      return this.currentLibrary ? this.currentLibrary.mediaType : null
+    },
+    isPodcastLibrary() {
+      return this.libraryMediaType === 'podcast'
+    },
+    isBookLibrary() {
+      return this.libraryMediaType === 'book'
+    },
+    isHome() {
+      return this.$route.name === 'library-library'
     },
     user() {
       return this.$store.state.user.user
     },
-    isRootUser() {
-      return this.$store.getters['user/getIsRoot']
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
     },
     username() {
       return this.user ? this.user.username : 'err'
     },
-    numAudiobooksSelected() {
-      return this.selectedAudiobooks.length
+    numMediaItemsSelected() {
+      return this.selectedMediaItems.length
     },
-    selectedAudiobooks() {
-      return this.$store.state.selectedAudiobooks
+    selectedMediaItems() {
+      return this.$store.state.globals.selectedMediaItems
     },
-    isAllSelected() {
-      return this.audiobooksShowing.length === this.selectedAudiobooks.length
+    selectedMediaItemsArePlayable() {
+      return !this.selectedMediaItems.some((i) => !i.hasTracks)
     },
-    audiobooksShowing() {
-      return this.$store.getters['audiobooks/getFiltered']()
+    userMediaProgress() {
+      return this.$store.state.user.user.mediaProgress || []
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanUpload() {
+      return this.$store.getters['user/getUserCanUpload']
+    },
+    selectedIsFinished() {
+      // Find an item that is not finished, if none then all items finished
+      return !this.selectedMediaItems.find((item) => {
+        const itemProgress = this.userMediaProgress.find((lip) => lip.libraryItemId === item.id)
+        return !itemProgress || !itemProgress.isFinished
+      })
+    },
+    processingBatch() {
+      return this.$store.state.processingBatch
+    },
+    isChromecastEnabled() {
+      return this.$store.getters['getServerSetting']('chromecastEnabled')
+    },
+    isChromecastInitialized() {
+      return this.$store.state.globals.isChromecastInitialized
+    },
+    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: this.$strings.ButtonQuickEmbedMetadata,
+          action: 'quick-embed'
+        })
+      }
+
+      options.push({
+        text: this.$strings.ButtonReScan,
+        action: 'rescan'
+      })
+
+      // The limit of 50 is introduced because of the URL length. Each id has 36 chars, so 36 * 40 = 1440
+      // + 40 , separators = 1480 chars + base path 280 chars = 1760 chars. This keeps the URL under 2000 chars even with longer domains
+      if (this.selectedMediaItems.length <= 40) {
+        options.push({
+          text: this.$strings.LabelDownload,
+          action: 'download'
+        })
+      }
+
+      return options
     }
   },
   methods: {
-    back() {
-      if (this.$route.name === 'audiobook-id-edit') {
-        this.$router.push(`/audiobook/${this.$route.params.id}`)
-      } else {
-        this.$router.push('/')
-      }
-    },
-    logout() {
-      this.$axios.$post('/logout').catch((error) => {
-        console.error(error)
-      })
-      if (localStorage.getItem('token')) {
-        localStorage.removeItem('token')
-      }
-      this.$router.push('/login')
-    },
-    menuAction(action) {
-      if (action === 'logout') {
-        this.logout()
-      }
-    },
-    cancelSelectionMode() {
-      if (this.processingBatchDelete) return
-      this.$store.commit('setSelectedAudiobooks', [])
-    },
-    toggleSelectAll() {
-      if (this.isAllSelected) {
-        this.cancelSelectionMode()
-      } else {
-        var audiobookIds = this.audiobooksShowing.map((a) => a.id)
-        this.$store.commit('setSelectedAudiobooks', audiobookIds)
-      }
-    },
-    batchDeleteClick() {
-      if (confirm(`Are you sure you want to delete these ${this.numAudiobooksSelected} audiobook(s)?`)) {
-        this.processingBatchDelete = true
-        this.$store.commit('setProcessingBatch', true)
+    requestBatchQuickEmbed() {
+      const payload = {
+        message: this.$strings.MessageConfirmQuickEmbed,
+        callback: (confirmed) => {
+          if (confirmed) {
             this.$axios
-          .$post(`/api/audiobooks/delete`, {
-            audiobookIds: this.selectedAudiobooks
+              .$post(`/api/tools/batch/embed-metadata`, {
+                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
               })
               .then(() => {
-            this.$toast.success('Batch delete success!')
-            this.processingBatchDelete = false
-            this.$store.commit('setProcessingBatch', false)
-            this.$store.commit('setSelectedAudiobooks', [])
+                console.log('Audio metadata embed started')
+                this.cancelSelectionMode()
               })
               .catch((error) => {
-            this.$toast.error('Batch delete failed')
-            console.error('Failed to batch delete', error)
-            this.processingBatchDelete = false
+                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()
+      } else if (action === 'download') {
+        this.batchDownload()
+      }
+    },
+    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 batchDownload() {
+      const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
+      console.log('Downloading library items', libraryItemIds)
+      this.$downloadFile(`/api/libraries/${this.$store.state.libraries.currentLibraryId}/download?token=${this.$store.getters['user/getToken']}&ids=${libraryItemIds.join(',')}`)
+    },
+    async playSelectedItems() {
+      this.$store.commit('setProcessingBatch', true)
+
+      const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
+      const libraryItems = await this.$axios
+        .$post(`/api/items/batch/get`, { libraryItemIds })
+        .then((res) => res.libraryItems)
+        .catch((error) => {
+          const errorMsg = error.response.data || 'Failed to get items'
+          console.error(errorMsg, error)
+          this.$toast.error(errorMsg)
+          return []
+        })
+
+      if (!libraryItems.length) {
+        this.$store.commit('setProcessingBatch', false)
+        return
+      }
+
+      const queueItems = []
+      libraryItems.forEach((item) => {
+        let subtitle = ''
+        if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
+        queueItems.push({
+          libraryItemId: item.id,
+          libraryId: item.libraryId,
+          episodeId: null,
+          title: item.media.metadata.title,
+          subtitle,
+          caption: '',
+          duration: item.media.duration || null,
+          coverPath: item.media.coverPath || null
+        })
+      })
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: queueItems[0].libraryItemId,
+        queueItems
+      })
+      this.$store.commit('setProcessingBatch', false)
+      this.$store.commit('globals/resetSelectedMediaItems', [])
+      this.$eventBus.$emit('bookshelf_clear_selection')
+    },
+    cancelSelectionMode() {
+      if (this.processingBatch) return
+      this.$store.commit('globals/resetSelectedMediaItems', [])
+      this.$eventBus.$emit('bookshelf_clear_selection')
+    },
+    toggleBatchRead() {
+      this.$store.commit('setProcessingBatch', true)
+      const newIsFinished = !this.selectedIsFinished
+      const updateProgressPayloads = this.selectedMediaItems.map((item) => {
+        return {
+          libraryItemId: item.id,
+          isFinished: newIsFinished
+        }
+      })
+      console.log('Progress payloads', updateProgressPayloads)
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.$store.commit('setProcessingBatch', false)
+          this.$store.commit('globals/resetSelectedMediaItems', [])
+          this.$eventBus.$emit('bookshelf_clear_selection')
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          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(this.$strings.ToastBatchDeleteSuccess)
+                this.$store.commit('globals/resetSelectedMediaItems', [])
+                this.$eventBus.$emit('bookshelf_clear_selection')
+              })
+              .catch((error) => {
+                console.error('Batch delete failed', error)
+                this.$toast.error(this.$strings.ToastBatchDeleteFailed)
+              })
+              .finally(() => {
                 this.$store.commit('setProcessingBatch', false)
               })
           }
         },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     batchEditClick() {
       this.$router.push('/batch')
+    },
+    batchAddToCollectionClick() {
+      this.$store.commit('globals/setShowBatchCollectionsModal', true)
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
+    },
+    batchAutoMatchClick() {
+      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
     }
   },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  }
 }
 </script>
 

client/components/app/BookShelf.vue

@@ -1,175 +0,0 @@
-<template>
-  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-auto relative">
-    <!-- Cover size widget -->
-    <div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-20">
-      <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-        <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
-        <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
-        <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
-      </div>
-    </div>
-
-    <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4">Your Audiobookshelf is empty!</p>
-      <ui-btn color="success" @click="scan">Scan your Audiobooks</ui-btn>
-    </div>
-    <div class="w-full flex flex-col items-center">
-      <template v-for="(shelf, index) in groupedBooks">
-        <div :key="index" class="w-full bookshelfRow relative">
-          <div class="flex justify-center items-center">
-            <template v-for="audiobook in shelf">
-              <cards-book-card :ref="`audiobookCard-${audiobook.id}`" :key="audiobook.id" :width="bookCoverWidth" :user-progress="userAudiobooks[audiobook.id]" :audiobook="audiobook" />
-            </template>
-          </div>
-          <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      width: 0,
-      booksPerRow: 0,
-      groupedBooks: [],
-      currFilterOrderKey: null,
-      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
-      selectedSizeIndex: 3,
-      rowPaddingX: 40
-    }
-  },
-  computed: {
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
-    },
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
-    },
-    filterOrderKey() {
-      return this.$store.getters['user/getFilterOrderKey']
-    },
-    bookCoverWidth() {
-      return this.availableSizes[this.selectedSizeIndex]
-    },
-    sizeMultiplier() {
-      return this.bookCoverWidth / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    bookWidth() {
-      return this.bookCoverWidth + this.paddingX * 2
-    },
-    isSelectionMode() {
-      return this.$store.getters['getNumAudiobooksSelected']
-    }
-  },
-  methods: {
-    increaseSize() {
-      this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
-    },
-    decreaseSize() {
-      this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
-    },
-    setGroupedBooks() {
-      var groups = []
-      var currentRow = 0
-      var currentGroup = []
-
-      var audiobooksSorted = this.$store.getters['audiobooks/getFilteredAndSorted']()
-      this.currFilterOrderKey = this.filterOrderKey
-
-      for (let i = 0; i < audiobooksSorted.length; i++) {
-        var row = Math.floor(i / this.booksPerRow)
-        if (row > currentRow) {
-          groups.push([...currentGroup])
-          currentRow = row
-          currentGroup = []
-        }
-        currentGroup.push(audiobooksSorted[i])
-      }
-      if (currentGroup.length) {
-        groups.push([...currentGroup])
-      }
-      this.groupedBooks = groups
-    },
-    calculateBookshelf() {
-      this.width = this.$refs.wrapper.clientWidth
-      this.width = Math.max(0, this.width - this.rowPaddingX * 2)
-      var booksPerRow = Math.floor(this.width / this.bookWidth)
-      this.booksPerRow = booksPerRow
-    },
-    getAudiobookCard(id) {
-      if (this.$refs[`audiobookCard-${id}`] && this.$refs[`audiobookCard-${id}`].length) {
-        return this.$refs[`audiobookCard-${id}`][0]
-      }
-      return null
-    },
-    init() {
-      var bookshelfCoverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      var sizeIndex = this.availableSizes.findIndex((s) => s === bookshelfCoverSize)
-      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
-      this.calculateBookshelf()
-    },
-    resize() {
-      this.$nextTick(() => {
-        this.calculateBookshelf()
-        this.setGroupedBooks()
-      })
-    },
-    audiobooksUpdated() {
-      console.log('[AudioBookshelf] Audiobooks Updated')
-      this.setGroupedBooks()
-    },
-    settingsUpdated(settings) {
-      if (this.currFilterOrderKey !== this.filterOrderKey) {
-        this.setGroupedBooks()
-      }
-      if (settings.bookshelfCoverSize !== this.bookCoverWidth && settings.bookshelfCoverSize !== undefined) {
-        var index = this.availableSizes.indexOf(settings.bookshelfCoverSize)
-        if (index >= 0) {
-          this.selectedSizeIndex = index
-          this.resize()
-        }
-      }
-    },
-    scan() {
-      this.$root.socket.emit('scan')
-    }
-  },
-  mounted() {
-    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
-
-    this.$store.dispatch('audiobooks/load')
-    this.init()
-    window.addEventListener('resize', this.resize)
-  },
-  beforeDestroy() {
-    this.$store.commit('audiobooks/removeListener', 'bookshelf')
-    this.$store.commit('user/removeSettingsListener', 'bookshelf')
-    window.removeEventListener('resize', this.resize)
-  }
-}
-</script>
-
-<style>
-#bookshelf {
-  height: calc(100% - 40px);
-}
-.bookshelfRow {
-  background-image: url(/wood_panels.jpg);
-}
-.bookshelfDivider {
-  background: rgb(149, 119, 90);
-  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
-  box-shadow: 2px 14px 8px #111111aa;
-}
-</style>

client/components/app/BookShelfCategorized.vue

@@ -0,0 +1,512 @@
+<template>
+  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
+    <!-- Cover size widget -->
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+
+    <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
+      <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+      <div v-if="userIsAdminOrUp" class="flex">
+        <ui-btn to="/config" color="bg-primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="bg-success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+      </div>
+    </div>
+    <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
+      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</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)">
+          <h2 class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</h2>
+        </widgets-item-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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    search: Boolean,
+    results: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      loaded: false,
+      keywordFilterTimeout: null,
+      scannerParseSubtitle: false,
+      wrapperClientWidth: 0,
+      shelves: [],
+      lastItemIndexSelected: -1,
+      tempIsScanning: false
+    }
+  },
+  computed: {
+    supportedShelves() {
+      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    libraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    isAlternativeBookshelfView() {
+      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.DETAIL
+    },
+    bookCoverWidth() {
+      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      return coverSize
+    },
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio == 1
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
+    },
+    selectedMediaItems() {
+      return this.$store.state.globals.selectedMediaItems || []
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    isScanningLibrary() {
+      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
+    }
+  },
+  methods: {
+    selectEntity({ entity, shiftKey }, shelfIndex) {
+      const shelf = this.shelves[shelfIndex]
+      const entityShelfIndex = shelf.entities.findIndex((ent) => ent.id === entity.id)
+      const indexOf = shelf.shelfStartIndex + entityShelfIndex
+
+      const lastLastItemIndexSelected = this.lastItemIndexSelected
+      if (!this.selectedMediaItems.some((i) => i.id === entity.id)) {
+        this.lastItemIndexSelected = indexOf
+      } else {
+        this.lastItemIndexSelected = -1
+      }
+
+      if (shiftKey && lastLastItemIndexSelected >= 0) {
+        let loopStart = indexOf
+        let loopEnd = lastLastItemIndexSelected
+        if (indexOf > lastLastItemIndexSelected) {
+          loopStart = lastLastItemIndexSelected
+          loopEnd = indexOf
+        }
+
+        const flattenedEntitiesArray = []
+        this.shelves.map((s) => flattenedEntitiesArray.push(...s.entities))
+
+        let isSelecting = false
+        // If any items in this range is not selected then select all otherwise unselect all
+        for (let i = loopStart; i <= loopEnd; i++) {
+          const thisEntity = flattenedEntitiesArray[i]
+          if (thisEntity) {
+            if (!this.selectedMediaItems.some((i) => i.id === thisEntity.id)) {
+              isSelecting = true
+              break
+            }
+          }
+        }
+        if (isSelecting) this.lastItemIndexSelected = indexOf
+
+        for (let i = loopStart; i <= loopEnd; i++) {
+          const thisEntity = flattenedEntitiesArray[i]
+          if (thisEntity) {
+            const mediaItem = {
+              id: thisEntity.id,
+              mediaType: thisEntity.mediaType,
+              hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
+            }
+            this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
+          } else {
+            console.error('Invalid entity index', i)
+          }
+        }
+      } else {
+        const mediaItem = {
+          id: entity.id,
+          mediaType: entity.mediaType,
+          hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
+        }
+        this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
+      }
+
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', entity)
+      })
+    },
+    async init() {
+      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
+
+      if (this.search) {
+        this.setShelvesFromSearch()
+      } else {
+        await this.fetchCategories()
+      }
+      this.loaded = true
+    },
+    async fetchCategories() {
+      // Sets the limit for the number of items to be displayed based on the viewport width.
+      const viewportWidth = window.innerWidth
+      let limit
+      if (viewportWidth >= 3240) {
+        limit = 15
+      } else if (viewportWidth >= 2880 && viewportWidth < 3240) {
+        limit = 12
+      }
+
+      const limitQuery = limit ? `&limit=${limit}` : ''
+
+      const categories = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share${limitQuery}`)
+        .then((data) => {
+          return data
+        })
+        .catch((error) => {
+          console.error('Failed to fetch categories', error)
+          return []
+        })
+
+      let totalEntityCount = 0
+      for (const shelf of categories) {
+        shelf.shelfStartIndex = totalEntityCount
+        totalEntityCount += shelf.entities.length
+      }
+      this.shelves = categories
+    },
+    async setShelvesFromSearch() {
+      const shelves = []
+      if (this.results.books?.length) {
+        shelves.push({
+          id: 'books',
+          label: 'Books',
+          labelStringKey: 'LabelBooks',
+          type: 'book',
+          entities: this.results.books.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.podcasts?.length) {
+        shelves.push({
+          id: 'podcasts',
+          label: 'Podcasts',
+          labelStringKey: 'LabelPodcasts',
+          type: 'podcast',
+          entities: this.results.podcasts.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.episodes?.length) {
+        shelves.push({
+          id: 'episodes',
+          label: 'Episodes',
+          labelStringKey: 'LabelEpisodes',
+          type: 'episode',
+          entities: this.results.episodes.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.series?.length) {
+        shelves.push({
+          id: 'series',
+          label: 'Series',
+          labelStringKey: 'LabelSeries',
+          type: 'series',
+          entities: this.results.series.map((seriesObj) => {
+            return {
+              ...seriesObj.series,
+              books: seriesObj.books,
+              type: 'series'
+            }
+          })
+        })
+      }
+      if (this.results.tags?.length) {
+        shelves.push({
+          id: 'tags',
+          label: 'Tags',
+          labelStringKey: 'LabelTags',
+          type: 'tags',
+          entities: this.results.tags.map((tagObj) => {
+            return {
+              name: tagObj.name,
+              books: tagObj.books || [],
+              type: 'tags'
+            }
+          })
+        })
+      }
+      if (this.results.authors?.length) {
+        shelves.push({
+          id: 'authors',
+          label: 'Authors',
+          labelStringKey: 'LabelAuthors',
+          type: 'authors',
+          entities: this.results.authors.map((a) => {
+            return {
+              ...a,
+              type: 'author'
+            }
+          })
+        })
+      }
+      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 })
+        .catch((error) => {
+          console.error('Failed to start scan', error)
+          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+        })
+        .finally(() => {
+          this.tempIsScanning = false
+        })
+    },
+    userUpdated(user) {
+      if (user.seriesHideFromContinueListening && user.seriesHideFromContinueListening.length) {
+        this.removeAllSeriesFromContinueSeries(user.seriesHideFromContinueListening)
+      }
+      if (user.mediaProgress.length) {
+        const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
+        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-listening')
+        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-reading')
+      }
+    },
+    libraryItemAdded(libraryItem) {
+      console.log('libraryItem added', libraryItem)
+      // TODO: Check if libraryItem would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
+      }
+    },
+    libraryItemUpdated(libraryItem) {
+      console.log('libraryItem updated', libraryItem)
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.id === libraryItem.id) {
+              return libraryItem
+            }
+            return ent
+          })
+        } else if (shelf.type === 'series') {
+          shelf.entities.forEach((ent) => {
+            ent.books = ent.books.map((book) => {
+              if (book.id === libraryItem.id) return libraryItem
+              return book
+            })
+          })
+        }
+      })
+    },
+    removeBookFromShelf(libraryItem) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
+          shelf.entities = shelf.entities.filter((ent) => {
+            return ent.id !== libraryItem.id
+          })
+        } else if (shelf.type === 'series') {
+          shelf.entities.forEach((ent) => {
+            ent.books = ent.books.filter((book) => {
+              return book.id !== libraryItem.id
+            })
+          })
+        }
+      })
+    },
+    libraryItemRemoved(libraryItem) {
+      this.removeBookFromShelf(libraryItem)
+    },
+    libraryItemsAdded(libraryItems) {
+      console.log('libraryItems added', libraryItems)
+
+      // First items added to library
+      const isThisLibrary = libraryItems.some((li) => li.libraryId === this.currentLibraryId)
+      if (!this.shelves.length && !this.search && isThisLibrary) {
+        this.fetchCategories()
+        return
+      }
+
+      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
+      if (!recentlyAddedShelf) return
+
+      // Add new library item to the recently added shelf
+      for (const libraryItem of libraryItems) {
+        if (libraryItem.libraryId === this.currentLibraryId && !recentlyAddedShelf.entities.some((ent) => ent.id === libraryItem.id)) {
+          // Add to front of array
+          recentlyAddedShelf.entities.unshift(libraryItem)
+        }
+      }
+    },
+    libraryItemsUpdated(items) {
+      items.forEach((li) => {
+        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') {
+          // Filter out series books from continue series shelf
+          shelf.entities = shelf.entities.filter((ent) => {
+            if (ent.media.metadata.series && seriesIds.includes(ent.media.metadata.series.id)) return false
+            return true
+          })
+        }
+      })
+    },
+    removeItemsFromContinueListeningReading(mediaProgressItems, categoryId) {
+      const continueListeningShelf = this.shelves.find((s) => s.id === categoryId)
+      if (continueListeningShelf) {
+        if (continueListeningShelf.type === 'book') {
+          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
+            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id)) return false
+            return true
+          })
+        } else if (continueListeningShelf.type === 'episode') {
+          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
+            if (!ent.recentEpisode) return true // Should always have this here
+            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id && mp.episodeId === ent.recentEpisode.id)) return false
+            return true
+          })
+        }
+      }
+    },
+    authorUpdated(author) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'authors') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.id === author.id) {
+              return {
+                ...ent,
+                ...author
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
+    authorRemoved(author) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'authors') {
+          shelf.entities = shelf.entities.filter((ent) => ent.id != author.id)
+        }
+      })
+    },
+    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)
+        this.$root.socket.on('author_updated', this.authorUpdated)
+        this.$root.socket.on('author_removed', this.authorRemoved)
+        this.$root.socket.on('item_updated', this.libraryItemUpdated)
+        this.$root.socket.on('item_added', this.libraryItemAdded)
+        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')
+      }
+    },
+    removeListeners() {
+      if (this.$root.socket) {
+        this.$root.socket.off('user_updated', this.userUpdated)
+        this.$root.socket.off('author_updated', this.authorUpdated)
+        this.$root.socket.off('author_removed', this.authorRemoved)
+        this.$root.socket.off('item_updated', this.libraryItemUpdated)
+        this.$root.socket.off('item_added', this.libraryItemAdded)
+        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')
+      }
+    }
+  },
+  mounted() {
+    this.initListeners()
+    this.init()
+  },
+  beforeDestroy() {
+    this.removeListeners()
+  }
+}
+</script>

client/components/app/BookShelfRow.vue

@@ -0,0 +1,210 @@
+<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 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" />
+          </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" />
+          </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" />
+          </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" />
+          </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" :authorMount="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" />
+          </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-xs border" :style="{ padding: `0em 0.5em` }">
+          <h2 :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</h2>
+        </div>
+      </div>
+
+      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
+    </div>
+    <button v-show="canScrollLeft && !isScrolling" :aria-label="$strings.ButtonScrollLeft" 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-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
+    </button>
+    <button v-show="canScrollRight && !isScrolling" :aria-label="$strings.ButtonScrollRight" 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-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    shelf: {
+      type: Object,
+      default: () => {}
+    },
+    continueListeningShelf: Boolean
+  },
+  data() {
+    return {
+      canScrollRight: false,
+      canScrollLeft: false,
+      isScrolling: false,
+      scrollTimer: null,
+      updateTimer: null
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
+    },
+    paddingLeft() {
+      if (window.innerWidth < 768) return 1
+      return 2.5
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    isSelectionMode() {
+      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
+    }
+  },
+  methods: {
+    clearSelectedEntities() {
+      this.updateSelectionMode(false)
+    },
+    editAuthor(author) {
+      this.$store.commit('globals/showEditAuthorModal', author)
+    },
+    editItem(libraryItem) {
+      var itemIds = this.shelf.entities.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', itemIds)
+      this.$store.commit('showEditModal', libraryItem)
+    },
+    editEpisode({ libraryItem, episode }) {
+      this.$store.commit('setEpisodeTableEpisodeIds', [episode.id])
+      this.$store.commit('setSelectedLibraryItem', libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    updateSelectionMode(val) {
+      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
+      if (this.shelf.type === 'book' || this.shelf.type === 'podcast') {
+        this.shelf.entities.forEach((ent) => {
+          var component = this.$refs[`shelf-book-${ent.id}`]
+          if (!component || !component.length) return
+          component = component[0]
+          component.setSelectionMode(val)
+          component.selected = selectedMediaItems.some((i) => i.id === ent.id)
+        })
+      } else if (this.shelf.type === 'episode') {
+        this.shelf.entities.forEach((ent) => {
+          var component = this.$refs[`shelf-episode-${ent.recentEpisode.id}`]
+          if (!component || !component.length) return
+          component = component[0]
+          component.setSelectionMode(val)
+          component.selected = selectedMediaItems.some((i) => i.id === ent.id)
+        })
+      }
+    },
+    selectItem(payload) {
+      this.$emit('selectEntity', payload)
+    },
+    itemSelectedEvt() {
+      this.updateSelectionMode(this.isSelectionMode)
+    },
+    scrolled() {
+      clearTimeout(this.scrollTimer)
+      this.scrollTimer = setTimeout(() => {
+        this.isScrolling = false
+        this.$nextTick(this.checkCanScroll)
+      }, 50)
+    },
+    scrollLeft() {
+      if (!this.$refs.shelf) {
+        return
+      }
+      this.isScrolling = true
+      this.$refs.shelf.scrollLeft = 0
+    },
+    scrollRight() {
+      if (!this.$refs.shelf) {
+        return
+      }
+      this.isScrolling = true
+      this.$refs.shelf.scrollLeft = 999
+    },
+    updatedBookCard() {
+      clearTimeout(this.updateTimer)
+      this.updateTimer = setTimeout(() => {
+        this.$nextTick(this.checkCanScroll)
+      }, 100)
+    },
+    checkCanScroll() {
+      if (!this.$refs.shelf) {
+        return
+      }
+      var clientWidth = this.$refs.shelf.clientWidth
+      var scrollWidth = this.$refs.shelf.scrollWidth
+      var scrollLeft = this.$refs.shelf.scrollLeft
+      if (scrollWidth > clientWidth) {
+        this.canScrollRight = scrollLeft === 0
+        this.canScrollLeft = scrollLeft > 0
+      } else {
+        this.canScrollRight = false
+        this.canScrollLeft = false
+      }
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+  }
+}
+</script>
+
+<style>
+.categorizedBookshelfRow {
+  scroll-behavior: smooth;
+  background-image: var(--bookshelf-texture-img);
+  background-repeat: repeat-x;
+}
+
+.bookshelfDividerCategorized {
+  background: rgb(149, 119, 90);
+  background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+}
+
+.book-shelf-arrow-right {
+  height: calc(100% - 1.5em);
+  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);
+  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>

client/components/app/BookShelfToolbar.vue

@@ -1,37 +1,596 @@
 <template>
-  <div class="w-full h-10 relative">
-    <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-8">
-      <p class="font-book">{{ numShowing }} Audiobooks</p>
-      <div class="flex-grow" />
-      <controls-filter-select v-model="settings.filterBy" class="w-48 h-7.5" @change="updateFilter" />
-      <span class="px-4 text-sm">by</span>
-      <controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5" @change="updateOrder" />
+  <div class="w-full h-20 md:h-10 relative">
+    <div class="flex md:hidden h-10 items-center">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
+        <span v-else class="material-symbols text-lg">home</span>
+      </nuxt-link>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
+        <span v-else class="material-symbols text-lg">import_contacts</span>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p class="text-sm">{{ $strings.ButtonLatest }}</p>
+      </nuxt-link>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
+        <span v-else class="material-symbols text-lg">view_column</span>
+      </nuxt-link>
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
+        <span v-else class="material-symbols text-lg">&#xe03d;</span>
+      </nuxt-link>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
+        <span v-else class="material-symbols text-lg">&#xe431;</span>
+      </nuxt-link>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
+        <span v-else class="material-symbols text-lg">groups</span>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p class="text-sm">{{ $strings.ButtonAdd }}</p>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="grow h-full flex justify-center items-center" :class="isPodcastDownloadQueuePage ? 'bg-primary/80' : 'bg-primary/40'">
+        <p class="text-sm">{{ $strings.ButtonDownloadQueue }}</p>
+      </nuxt-link>
+    </div>
+    <div id="toolbar" role="toolbar" aria-label="Library 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">
+      <!-- Series books page -->
+      <template v-if="selectedSeries">
+        <p class="pl-2 text-base md:text-lg">
+          {{ seriesName }}
+        </p>
+        <div class="w-6 h-6 rounded-full bg-black/30 flex items-center justify-center ml-3">
+          <span class="font-mono">{{ $formatNumber(numShowing) }}</span>
+        </div>
+        <div class="grow" />
+
+        <!-- RSS feed -->
+        <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
+          <ui-icon-btn icon="rss_feed" class="mx-0.5" :size="7" icon-font-size="1.2rem" bg-color="bg-success" outlined @click="showOpenSeriesRSSFeed" />
+        </ui-tooltip>
+
+        <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
+      </template>
+      <!-- library & collections page -->
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
+
+        <div class="grow hidden sm:inline-block" />
+
+        <!-- library filter select -->
+        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+
+        <!-- library sort select -->
+        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
+
+        <!-- series filter select -->
+        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
+
+        <!-- series sort select -->
+        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+
+        <!-- issues page remove all button -->
+        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="bg-error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ $formatNumber(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'">
+        <div class="grow" />
+        <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
+        <div class="grow" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
+      </template>
+      <!-- authors page -->
+      <template v-else-if="isAuthorsPage">
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
+
+        <div class="grow hidden sm:inline-block" />
+        <ui-btn v-if="userCanUpdate && !isBatchSelecting" :loading="processingAuthors" color="bg-primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+
+        <!-- author sort select -->
+        <controls-sort-select 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>
+      <!-- home page -->
+      <template v-else-if="isHome">
+        <div class="grow" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    page: String,
+    isHome: Boolean,
+    selectedSeries: {
+      type: Object,
+      default: () => null
+    },
+    searchQuery: String
+  },
   data() {
     return {
       settings: {},
-      hasInit: false
+      hasInit: false,
+      totalEntities: 0,
+      processingSeries: false,
+      processingIssues: false,
+      processingAuthors: false
     }
   },
   computed: {
+    seriesContextMenuItems() {
+      if (!this.selectedSeries) return []
+
+      const items = [
+        {
+          text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
+          action: 'mark-series-finished'
+        }
+      ]
+
+      if (this.userIsAdminOrUp || this.selectedSeries.rssFeed) {
+        items.push({
+          text: this.$strings.LabelOpenRSSFeed,
+          action: 'open-rss-feed'
+        })
+      }
+
+      if (this.isSeriesRemovedFromContinueListening) {
+        items.push({
+          text: this.$strings.LabelReAddSeriesToContinueListening,
+          action: 're-add-to-continue-listening'
+        })
+      }
+
+      this.addSubtitlesMenuItem(items)
+      this.addCollapseSubSeriesMenuItem(items)
+
+      return items
+    },
+    seriesSortItems() {
+      return [
+        {
+          text: this.$strings.LabelName,
+          value: 'name'
+        },
+        {
+          text: this.$strings.LabelNumberOfBooks,
+          value: 'numBooks'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelLastBookAdded,
+          value: 'lastBookAdded'
+        },
+        {
+          text: this.$strings.LabelLastBookUpdated,
+          value: 'lastBookUpdated'
+        },
+        {
+          text: this.$strings.LabelTotalDuration,
+          value: 'totalDuration'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
+        }
+      ]
+    },
+    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']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    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']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcast'
+    },
+    isLibraryPage() {
+      return this.page === ''
+    },
+    isSeriesPage() {
+      return this.page === 'series'
+    },
+    isCollectionsPage() {
+      return this.page === 'collections'
+    },
+    isPlaylistsPage() {
+      return this.page === 'playlists'
+    },
+    isHomePage() {
+      return this.$route.name === 'library-library'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
+    },
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
+    },
+    isPodcastDownloadQueuePage() {
+      return this.$route.name === 'library-library-podcast-download-queue'
+    },
+    isAuthorsPage() {
+      return this.page === 'authors'
+    },
     numShowing() {
-      return this.$store.getters['audiobooks/getFiltered']().length
+      return this.totalEntities
+    },
+    entityName() {
+      if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
+      if (!this.page) return this.$strings.LabelBooks
+      if (this.isSeriesPage) return this.$strings.LabelSeries
+      if (this.isCollectionsPage) return this.$strings.LabelCollections
+      if (this.isPlaylistsPage) return this.$strings.LabelPlaylists
+      if (this.isAuthorsPage) return this.$strings.LabelAuthors
+      return ''
+    },
+    seriesId() {
+      return this.selectedSeries ? this.selectedSeries.id : null
+    },
+    seriesName() {
+      return this.selectedSeries ? this.selectedSeries.name : null
+    },
+    seriesProgress() {
+      return this.selectedSeries ? this.selectedSeries.progress : null
+    },
+    seriesRssFeed() {
+      return this.selectedSeries ? this.selectedSeries.rssFeed : null
+    },
+    seriesLibraryItemIds() {
+      if (!this.seriesProgress) return []
+      return this.seriesProgress.libraryItemIds || []
+    },
+    isBatchSelecting() {
+      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
+    },
+    isSeriesFinished() {
+      return this.seriesProgress && !!this.seriesProgress.isFinished
+    },
+    isSeriesRemovedFromContinueListening() {
+      if (!this.seriesId) return false
+      return this.$store.getters['user/getIsSeriesRemovedFromContinueListening'](this.seriesId)
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    isIssuesFilter() {
+      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
+    },
+    contextMenuItems() {
+      const items = []
+
+      if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
+        items.push({
+          text: this.$strings.LabelExportOPML,
+          action: 'export-opml'
+        })
+      }
+
+      this.addSubtitlesMenuItem(items)
+      this.addCollapseSeriesMenuItem(items)
+
+      return items
+    },
+    showPlaylists() {
+      return this.$store.state.libraries.numUserPlaylists > 0
     }
   },
   methods: {
+    addSubtitlesMenuItem(items) {
+      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
+        if (this.settings.showSubtitles) {
+          items.push({
+            text: this.$strings.LabelHideSubtitles,
+            action: 'hide-subtitles'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelShowSubtitles,
+            action: 'show-subtitles'
+          })
+        }
+      }
+    },
+    addCollapseSeriesMenuItem(items) {
+      if (this.isLibraryPage && this.isBookLibrary && !this.isBatchSelecting) {
+        if (this.settings.collapseSeries) {
+          items.push({
+            text: this.$strings.LabelExpandSeries,
+            action: 'expand-series'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelCollapseSeries,
+            action: 'collapse-series'
+          })
+        }
+      }
+    },
+    addCollapseSubSeriesMenuItem(items) {
+      if (this.selectedSeries && this.isBookLibrary && !this.isBatchSelecting) {
+        if (this.settings.collapseBookSeries) {
+          items.push({
+            text: this.$strings.LabelExpandSubSeries,
+            action: 'expand-sub-series'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelCollapseSubSeries,
+            action: 'collapse-sub-series'
+          })
+        }
+      }
+    },
+    handleSubtitlesAction(action) {
+      if (action === 'show-subtitles') {
+        this.settings.showSubtitles = true
+        this.updateShowSubtitles()
+        return true
+      }
+      if (action === 'hide-subtitles') {
+        this.settings.showSubtitles = false
+        this.updateShowSubtitles()
+        return true
+      }
+      return false
+    },
+    handleCollapseSeriesAction(action) {
+      if (action === 'collapse-series') {
+        this.settings.collapseSeries = true
+        this.updateCollapseSeries()
+        return true
+      }
+      if (action === 'expand-series') {
+        this.settings.collapseSeries = false
+        this.updateCollapseSeries()
+        return true
+      }
+      return false
+    },
+    handleCollapseSubSeriesAction(action) {
+      if (action === 'collapse-sub-series') {
+        this.settings.collapseBookSeries = true
+        this.updateCollapseSubSeries()
+        return true
+      }
+      if (action === 'expand-sub-series') {
+        this.settings.collapseBookSeries = false
+        this.updateCollapseSubSeries()
+        return true
+      }
+      return false
+    },
+    contextMenuAction({ action }) {
+      if (action === 'export-opml') {
+        this.exportOPML()
+        return
+      } else if (this.handleSubtitlesAction(action)) {
+        return
+      } else if (this.handleCollapseSeriesAction(action)) {
+        return
+      }
+    },
+    exportOPML() {
+      this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
+    },
+    seriesContextMenuAction({ action }) {
+      if (action === 'open-rss-feed') {
+        this.showOpenSeriesRSSFeed()
+      } else if (action === 're-add-to-continue-listening') {
+        if (this.processingSeries) {
+          console.warn('Already processing series')
+          return
+        }
+        this.reAddSeriesToContinueListening()
+      } else if (action === 'mark-series-finished') {
+        if (this.processingSeries) {
+          console.warn('Already processing series')
+          return
+        }
+        this.markSeriesFinished()
+      } else if (this.handleSubtitlesAction(action)) {
+        return
+      } else if (this.handleCollapseSubSeriesAction(action)) {
+        return
+      }
+    },
+    showOpenSeriesRSSFeed() {
+      this.$store.commit('globals/setRSSFeedOpenCloseModal', {
+        id: this.selectedSeries.id,
+        name: this.selectedSeries.name,
+        type: 'series',
+        feed: this.selectedSeries.rssFeed
+      })
+    },
+    reAddSeriesToContinueListening() {
+      this.processingSeries = true
+      this.$axios
+        .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed to re-add series to continue listening', error)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
+        })
+        .finally(() => {
+          this.processingSeries = false
+        })
+    },
+    async fetchAllAuthors() {
+      // fetch all authors from the server, in the order that they are currently displayed
+      const response = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors?sort=${this.settings.authorSortBy}&desc=${this.settings.authorSortDesc}`)
+      return response.authors
+    },
+    async matchAllAuthors() {
+      this.processingAuthors = true
+
+      try {
+        const authors = await this.fetchAllAuthors()
+
+        for (const author of authors) {
+          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'
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, true)
+
+          var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
+            console.error('Failed', error)
+            return null
+          })
+          if (!response) {
+            console.error(`Author ${author.name} not found`)
+            this.$toast.error(this.$getString('ToastAuthorNotFound', [author.name]))
+          } else if (response.updated) {
+            if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
+            else console.log(`Author ${response.author.name} was updated (no image found)`)
+          } else {
+            console.log(`No updates were made for Author ${response.author.name}`)
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, false)
+        }
+      } catch (error) {
+        console.error('Failed to match all authors', error)
+        this.$toast.error(this.$strings.ToastMatchAllAuthorsFailed)
+      }
+      this.processingAuthors = false
+    },
+    removeAllIssues() {
+      if (confirm(`Are you sure you want to remove all library items with issues?\n\nNote: This will not delete any files`)) {
+        this.processingIssues = true
+        this.$axios
+          .$delete(`/api/libraries/${this.currentLibraryId}/issues`)
+          .then(() => {
+            this.$toast.success(this.$strings.ToastRemoveItemsWithIssuesSuccess)
+            this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
+            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
+          })
+          .catch((error) => {
+            console.error('Failed to remove library items with issues', error)
+            this.$toast.error(this.$strings.ToastRemoveItemsWithIssuesFailed)
+          })
+          .finally(() => {
+            this.processingIssues = false
+          })
+      }
+    },
+    markSeriesFinished() {
+      const newIsFinished = !this.isSeriesFinished
+
+      const payload = {
+        message: newIsFinished ? this.$strings.MessageConfirmMarkSeriesFinished : this.$strings.MessageConfirmMarkSeriesNotFinished,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.processingSeries = true
+            const updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
+              return {
+                libraryItemId: lid,
+                isFinished: newIsFinished
+              }
+            })
+            console.log('Progress payloads', updateProgressPayloads)
+            this.$axios
+              .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+              .then(() => {
+                this.$toast.success(this.$strings.ToastSeriesUpdateSuccess)
+                this.selectedSeries.progress.isFinished = newIsFinished
+              })
+              .catch((error) => {
+                this.$toast.error(this.$strings.ToastSeriesUpdateFailed)
+                console.error('Failed to batch update read/not read', error)
+              })
+              .finally(() => {
+                this.processingSeries = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     updateOrder() {
       this.saveSettings()
     },
     updateFilter() {
       this.saveSettings()
     },
+    updateSeriesSort() {
+      this.saveSettings()
+    },
+    updateSeriesFilter() {
+      this.saveSettings()
+    },
+    updateCollapseSeries() {
+      this.saveSettings()
+    },
+    updateCollapseSubSeries() {
+      this.saveSettings()
+    },
+    updateShowSubtitles() {
+      this.saveSettings()
+    },
+    updateAuthorSort() {
+      this.saveSettings()
+    },
     saveSettings() {
-      this.$store.commit('user/setSettings', this.settings) // Immediate update
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
     init() {
@@ -41,14 +600,35 @@ export default {
       for (const key in settings) {
         this.settings[key] = settings[key]
       }
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
+    },
+    rssFeedOpen(data) {
+      if (data.entityId === this.seriesId) {
+        console.log('RSS Feed Opened', data)
+        this.selectedSeries.rssFeed = data
+      }
+    },
+    rssFeedClosed(data) {
+      if (data.entityId === this.seriesId) {
+        console.log('RSS Feed Closed', data)
+        this.selectedSeries.rssFeed = null
+      }
     }
   },
   mounted() {
     this.init()
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+    this.$eventBus.$on('user-settings', this.settingsUpdated)
+    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
+    this.$root.socket.on('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.on('rss_feed_closed', this.rssFeedClosed)
   },
   beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+    this.$eventBus.$off('user-settings', this.settingsUpdated)
+    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
+    this.$root.socket.off('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.off('rss_feed_closed', this.rssFeedClosed)
   }
 }
 </script>
@@ -56,6 +636,6 @@ export default {
 
 <style>
 #toolbar {
-  box-shadow: 0px 8px 8px #111111aa;
+  box-shadow: 0px 8px 6px #111111aa;
 }
 </style>

client/components/app/ConfigSideNav.vue

@@ -0,0 +1,184 @@
+<template>
+  <div role="toolbar" aria-orientation="vertical" aria-label="Config Sidebar">
+    <div role="navigation" aria-label="Config Navigation" class="w-44 fixed left-0 top-16 bg-bg/100 md:bg-bg/70 shadow-lg border-r border-white/5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
+      <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
+        <span class="material-symbols text-2xl">arrow_back</span>
+      </div>
+
+      <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-3 h-12 border-b border-primary/30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary/70' : 'hover:bg-primary/30'">
+        <p class="leading-4">{{ route.title }}</p>
+        <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
+    </div>
+
+    <div class="w-44 h-12 px-4 border-t bg-bg border-black/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>
+
+        <p class="text-xs text-gray-300 italic">{{ Source }}</p>
+      </div>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ versionData.latestVersion }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isOpen: Boolean
+  },
+  data() {
+    return {
+      showChangelogModal: false
+    }
+  },
+  computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    configRoutes() {
+      if (!this.userIsAdminOrUp) {
+        return [
+          {
+            id: 'config-stats',
+            title: this.$strings.HeaderYourStats,
+            path: '/config/stats'
+          }
+        ]
+      }
+      const configRoutes = [
+        {
+          id: 'config',
+          title: this.$strings.HeaderSettings,
+          path: '/config'
+        },
+        {
+          id: 'config-libraries',
+          title: this.$strings.HeaderLibraries,
+          path: '/config/libraries'
+        },
+        {
+          id: 'config-users',
+          title: this.$strings.HeaderUsers,
+          path: '/config/users'
+        },
+        {
+          id: 'config-api-keys',
+          title: this.$strings.HeaderApiKeys,
+          path: '/config/api-keys'
+        },
+        {
+          id: 'config-sessions',
+          title: this.$strings.HeaderListeningSessions,
+          path: '/config/sessions'
+        },
+        {
+          id: 'config-backups',
+          title: this.$strings.HeaderBackups,
+          path: '/config/backups'
+        },
+        {
+          id: 'config-log',
+          title: this.$strings.HeaderLogs,
+          path: '/config/log'
+        },
+        {
+          id: 'config-notifications',
+          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'
+        }
+      ]
+
+      if (this.currentLibraryId) {
+        configRoutes.push({
+          id: 'library-stats',
+          title: this.$strings.HeaderLibraryStats,
+          path: `/library/${this.currentLibraryId}/stats`
+        })
+        configRoutes.push({
+          id: 'config-stats',
+          title: this.$strings.HeaderYourStats,
+          path: '/config/stats'
+        })
+      }
+
+      return configRoutes
+    },
+    wrapperClass() {
+      var classes = []
+      if (this.drawerOpen) classes.push('translate-x-0')
+      else classes.push('-translate-x-44')
+      if (this.isMobilePortrait) classes.push('z-50')
+      else classes.push('z-40')
+      return classes.join(' ')
+    },
+    isMobile() {
+      return this.$store.state.globals.isMobile
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
+    isMobilePortrait() {
+      return this.$store.state.globals.isMobilePortrait
+    },
+    drawerOpen() {
+      return !this.isMobilePortrait || this.isOpen
+    },
+    routeName() {
+      return this.$route.name
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    }
+  },
+  methods: {
+    clickChangelog() {
+      this.showChangelogModal = true
+    },
+    clickOutside() {
+      if (!this.isOpen) return
+      this.closeDrawer()
+    },
+    closeDrawer() {
+      this.$emit('update:isOpen', false)
+    }
+  }
+}
+</script>

client/components/app/LazyBookshelf.vue

@@ -0,0 +1,917 @@
+<template>
+  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
+    <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' }">
+        <!-- Card skeletons -->
+        <template v-for="entityIndex in entitiesInShelf(shelf)">
+          <div :key="entityIndex" class="w-full h-full absolute rounded-sm z-5 top-0 left-0 bg-primary box-shadow-book" :style="{ transform: entityTransform(entityIndex), width: cardWidth + 'px', height: coverHeight + 'px' }" />
+        </template>
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
+      </div>
+    </template>
+
+    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'items'" 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>
+      <div v-if="userIsAdminOrUp" class="flex">
+        <ui-btn to="/config" color="bg-primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="bg-success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+      </div>
+    </div>
+    <div v-else-if="!totalShelves && initialized" class="w-full py-16">
+      <p class="text-xl text-center">{{ emptyMessage }}</p>
+      <div v-if="entityName === 'collections' || entityName === 'playlists'" class="flex justify-center mt-4">
+        {{ emptyMessageHelp }}
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
+            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+      </div>
+      <!-- Clear filter only available on Library bookshelf -->
+      <div v-if="entityName === 'items'" class="flex justify-center mt-2">
+        <ui-btn v-if="hasFilter" color="bg-primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
+      </div>
+    </div>
+
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+  </div>
+</template>
+
+<script>
+import bookshelfCardsHelpers from '@/mixins/bookshelfCardsHelpers'
+
+export default {
+  props: {
+    page: String,
+    seriesId: String
+  },
+  mixins: [bookshelfCardsHelpers],
+  data() {
+    return {
+      routeFullPath: null,
+      initialized: false,
+      bookshelfHeight: 0,
+      bookshelfWidth: 0,
+      shelvesPerPage: 0,
+      entitiesPerShelf: 8,
+      currentPage: 0,
+      totalEntities: 0,
+      entities: [],
+      pagesLoaded: {},
+      entityIndexesMounted: [],
+      entityComponentRefs: {},
+      currentBookWidth: 0,
+      isFetchingEntities: false,
+      scrollTimeout: null,
+      booksPerFetch: 0,
+      totalShelves: 0,
+      bookshelfMarginLeft: 0,
+      isSelectionMode: false,
+      currentSFQueryString: null,
+      pendingReset: false,
+      keywordFilter: null,
+      currScrollTop: 0,
+      resizeTimeout: null,
+      mountWindowWidth: 0,
+      lastItemIndexSelected: -1,
+      tempIsScanning: false,
+      cardWidth: 0,
+      cardHeight: 0,
+      coverHeight: 0,
+      resizeObserver: null,
+      lastScrollTop: 0,
+      lastTimestamp: 0,
+      postScrollTimeout: null,
+      currFirstEntityIndex: -1,
+      currLastEntityIndex: -1
+    }
+  },
+  watch: {
+    '$route.query.filter'() {
+      if (this.$route.query.filter && this.$route.query.filter !== this.filterBy) {
+        this.$store.dispatch('user/updateUserSettings', { filterBy: this.$route.query.filter })
+      } else if (!this.$route.query.filter && this.filterBy) {
+        this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
+      }
+    }
+  },
+  computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcast() {
+      return this.libraryMediaType === 'podcast'
+    },
+    emptyMessage() {
+      if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
+      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
+      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylists
+      if (this.page === 'authors') return this.$strings.MessageNoAuthors
+      if (this.hasFilter) {
+        if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
+        else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
+        return this.$getString('MessageBookshelfNoResultsForFilter', [this.filterName, this.filterValue])
+      }
+      return this.$strings.MessageNoResults
+    },
+    emptyMessageHelp() {
+      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollectionsHelp
+      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylistsHelp
+      return ''
+    },
+    entityName() {
+      if (!this.page) return 'items'
+      return this.page
+    },
+    seriesSortBy() {
+      return this.$store.getters['user/getUserSetting']('seriesSortBy')
+    },
+    seriesSortDesc() {
+      return this.$store.getters['user/getUserSetting']('seriesSortDesc')
+    },
+    seriesFilterBy() {
+      return this.$store.getters['user/getUserSetting']('seriesFilterBy')
+    },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy')
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
+    orderBy() {
+      return this.$store.getters['user/getUserSetting']('orderBy')
+    },
+    orderDesc() {
+      return this.$store.getters['user/getUserSetting']('orderDesc')
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    collapseSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseSeries')
+    },
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
+    },
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    sortingIgnorePrefix() {
+      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio == 1
+    },
+    bookshelfView() {
+      return this.$store.getters['getBookshelfView']
+    },
+    isAlternativeBookshelfView() {
+      return this.bookshelfView === this.$constants.BookshelfView.DETAIL
+    },
+    hasFilter() {
+      return this.filterBy && this.filterBy !== 'all'
+    },
+    filterName() {
+      if (!this.filterBy) return ''
+      var filter = this.filterBy.split('.')[0]
+      filter = filter.substr(0, 1).toUpperCase() + filter.substr(1)
+      return filter
+    },
+    filterValue() {
+      if (!this.filterBy) return ''
+      if (!this.filterBy.includes('.')) return ''
+      return this.$decode(this.filterBy.split('.')[1])
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    libraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    bookWidth() {
+      return this.cardWidth
+    },
+    shelfPadding() {
+      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
+      return 64 * this.sizeMultiplier
+    },
+    totalPadding() {
+      return this.shelfPadding * 2
+    },
+    entityWidth() {
+      return this.cardWidth
+    },
+    shelfPaddingHeight() {
+      return 16
+    },
+    shelfHeight() {
+      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
+      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
+    },
+    totalEntityCardWidth() {
+      // Includes margin
+      return this.entityWidth + 24 * this.sizeMultiplier
+    },
+    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)
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
+    },
+    editEntity(entity) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        const bookIds = this.entities.map((e) => e.id)
+        this.$store.commit('setBookshelfBookIds', bookIds)
+        this.$store.commit('showEditModal', entity)
+      } else if (this.entityName === 'collections') {
+        this.$store.commit('globals/setEditCollection', entity)
+      } else if (this.entityName === 'playlists') {
+        this.$store.commit('globals/setEditPlaylist', entity)
+      } else if (this.entityName === 'authors') {
+        this.$store.commit('globals/showEditAuthorModal', entity)
+      }
+    },
+    clearSelectedEntities() {
+      this.updateBookSelectionMode(false)
+      this.isSelectionMode = false
+    },
+    selectEntity(entity, shiftKey) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        const indexOf = this.entities.findIndex((ent) => ent && ent.id === entity.id)
+        const lastLastItemIndexSelected = this.lastItemIndexSelected
+        if (!this.selectedMediaItems.some((i) => i.id === entity.id)) {
+          this.lastItemIndexSelected = indexOf
+        } else {
+          this.lastItemIndexSelected = -1
+        }
+
+        if (shiftKey && lastLastItemIndexSelected >= 0) {
+          let loopStart = indexOf
+          let loopEnd = lastLastItemIndexSelected
+          if (indexOf > lastLastItemIndexSelected) {
+            loopStart = lastLastItemIndexSelected
+            loopEnd = indexOf
+          }
+
+          let isSelecting = false
+          // If any items in this range is not selected then select all otherwise unselect all
+          for (let i = loopStart; i <= loopEnd; i++) {
+            const thisEntity = this.entities[i]
+            if (thisEntity && !thisEntity.collapsedSeries) {
+              if (!this.selectedMediaItems.some((i) => i.id === thisEntity.id)) {
+                isSelecting = true
+                break
+              }
+            }
+          }
+          if (isSelecting) this.lastItemIndexSelected = indexOf
+
+          for (let i = loopStart; i <= loopEnd; i++) {
+            const thisEntity = this.entities[i]
+            if (thisEntity.collapsedSeries) {
+              console.warn('Ignoring collapsed series')
+              continue
+            }
+
+            const entityComponentRef = this.entityComponentRefs[i]
+            if (thisEntity && entityComponentRef) {
+              entityComponentRef.selected = isSelecting
+
+              const mediaItem = {
+                id: thisEntity.id,
+                mediaType: thisEntity.mediaType,
+                hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
+              }
+              this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
+            } else {
+              console.error('Invalid entity index', i)
+            }
+          }
+        } else {
+          const mediaItem = {
+            id: entity.id,
+            mediaType: entity.mediaType,
+            hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
+          }
+          this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
+        }
+
+        const newIsSelectionMode = !!this.selectedMediaItems.length
+        if (this.isSelectionMode !== newIsSelectionMode) {
+          this.isSelectionMode = newIsSelectionMode
+          this.updateBookSelectionMode(newIsSelectionMode)
+        }
+      }
+    },
+    updateBookSelectionMode(isSelectionMode) {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityIndexesMounted.includes(Number(key))) {
+          this.entityComponentRefs[key].setSelectionMode(isSelectionMode)
+        }
+      }
+      if (!isSelectionMode) {
+        this.lastItemIndexSelected = -1
+      }
+    },
+    async fetchEntites(page = 0) {
+      const startIndex = page * this.booksPerFetch
+
+      this.isFetchingEntities = true
+
+      if (!this.initialized) {
+        this.currentSFQueryString = this.buildSearchParams()
+      }
+
+      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
+      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete,share`
+
+      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
+        console.error('failed to fetch items', error)
+        return null
+      })
+
+      this.isFetchingEntities = false
+      if (this.pendingReset) {
+        this.pendingReset = false
+        this.resetEntities()
+        return
+      }
+      if (payload) {
+        if (!this.initialized) {
+          this.initialized = true
+          this.totalEntities = payload.total
+          this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+          this.entities = new Array(this.totalEntities)
+        }
+
+        for (let i = 0; i < payload.results.length; i++) {
+          const index = i + startIndex
+          this.entities[index] = payload.results[i]
+          if (this.entityComponentRefs[index]) {
+            this.entityComponentRefs[index].setEntity(this.entities[index])
+          }
+        }
+
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+      }
+    },
+    loadPage(page) {
+      if (!this.pagesLoaded[page]) this.pagesLoaded[page] = this.fetchEntites(page)
+      return this.pagesLoaded[page]
+    },
+    showHideBookPlaceholder(index, show) {
+      var el = document.getElementById(`book-${index}-placeholder`)
+      if (el) el.style.display = show ? 'flex' : 'none'
+    },
+    mountEntities(fromIndex, toIndex) {
+      for (let i = fromIndex; i < toIndex; i++) {
+        if (!this.entityIndexesMounted.includes(i)) {
+          this.cardsHelpers.mountEntityCard(i)
+        }
+      }
+    },
+    getVisibleIndices(scrollTop) {
+      const firstShelfIndex = Math.floor(scrollTop / this.shelfHeight)
+      const lastShelfIndex = Math.min(Math.ceil((scrollTop + this.bookshelfHeight) / this.shelfHeight), this.totalShelves - 1)
+      const firstEntityIndex = firstShelfIndex * this.entitiesPerShelf
+      const lastEntityIndex = Math.min(lastShelfIndex * this.entitiesPerShelf + this.entitiesPerShelf, this.totalEntities)
+      return { firstEntityIndex, lastEntityIndex }
+    },
+    postScroll() {
+      const { firstEntityIndex, lastEntityIndex } = this.getVisibleIndices(this.currScrollTop)
+      this.entityIndexesMounted = this.entityIndexesMounted.filter((_index) => {
+        if (_index < firstEntityIndex || _index >= lastEntityIndex) {
+          var el = this.entityComponentRefs[_index]
+          if (el && el.$el) el.$el.remove()
+          return false
+        }
+        return true
+      })
+    },
+    handleScroll(scrollTop) {
+      this.currScrollTop = scrollTop
+      const { firstEntityIndex, lastEntityIndex } = this.getVisibleIndices(scrollTop)
+      if (firstEntityIndex === this.currFirstEntityIndex && lastEntityIndex === this.currLastEntityIndex) return
+      this.currFirstEntityIndex = firstEntityIndex
+      this.currLastEntityIndex = lastEntityIndex
+
+      clearTimeout(this.postScrollTimeout)
+      const firstPage = Math.floor(firstEntityIndex / this.booksPerFetch)
+      const lastPage = Math.floor(lastEntityIndex / this.booksPerFetch)
+      Promise.all([this.loadPage(firstPage), this.loadPage(lastPage)])
+        .then(() => this.mountEntities(firstEntityIndex, lastEntityIndex))
+        .catch((error) => console.error('Failed to load page', error))
+
+      this.postScrollTimeout = setTimeout(this.postScroll, 500)
+    },
+    async resetEntities(scrollPositionToRestore) {
+      if (this.isFetchingEntities) {
+        this.pendingReset = true
+        return
+      }
+      this.destroyEntityComponents()
+      this.pagesLoaded = {}
+      this.entities = []
+      this.totalShelves = 0
+      this.totalEntities = 0
+      this.currentPage = 0
+      this.isSelectionMode = false
+      this.initialized = false
+
+      this.initSizeData()
+      await this.loadPage(0)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.mountEntities(0, lastBookIndex)
+
+      if (scrollPositionToRestore) {
+        if (window.bookshelf) {
+          window.bookshelf.scrollTop = scrollPositionToRestore
+        }
+      }
+    },
+    async rebuild() {
+      this.initSizeData()
+
+      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
+      this.destroyEntityComponents()
+      await this.loadPage(0)
+      if (window.bookshelf) {
+        window.bookshelf.scrollTop = 0
+      }
+      this.mountEntities(0, lastBookIndex)
+    },
+    buildSearchParams() {
+      if (this.page === 'search' || this.page === 'collections') {
+        return ''
+      }
+
+      let searchParams = new URLSearchParams()
+      if (this.page === 'series') {
+        searchParams.set('sort', this.seriesSortBy)
+        searchParams.set('desc', this.seriesSortDesc ? 1 : 0)
+        searchParams.set('filter', this.seriesFilterBy)
+      } else if (this.page === 'series-books') {
+        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
+      } else if (this.page === 'authors') {
+        searchParams.set('sort', this.authorSortBy)
+        searchParams.set('desc', this.authorSortDesc ? 1 : 0)
+      } else {
+        if (this.filterBy && this.filterBy !== 'all') {
+          searchParams.set('filter', this.filterBy)
+        }
+        if (this.orderBy) {
+          searchParams.set('sort', this.orderBy)
+          searchParams.set('desc', this.orderDesc ? 1 : 0)
+        }
+        if (this.collapseSeries && !this.isPodcast) {
+          searchParams.set('collapseseries', 1)
+        }
+      }
+      return searchParams.toString()
+    },
+    checkUpdateSearchParams() {
+      var newSearchParams = this.buildSearchParams()
+      var currentQueryString = window.location.search
+      if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
+
+      if (newSearchParams === '') {
+        return false
+      }
+      if (newSearchParams !== this.currentSFQueryString || newSearchParams !== currentQueryString) {
+        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newSearchParams
+        window.history.replaceState({ path: newurl }, '', newurl)
+
+        this.routeFullPath = window.location.pathname + (window.location.search || '') // Update for saving scroll position
+        return true
+      }
+
+      return false
+    },
+    seriesSortUpdated() {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
+    async settingsUpdated(settings) {
+      await this.cardsHelpers.setCardSize()
+      const wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
+        this.rebuild()
+      }
+    },
+    getScrollRate() {
+      const currentTimestamp = Date.now()
+      const timeDelta = currentTimestamp - this.lastTimestamp
+      const scrollDelta = this.currScrollTop - this.lastScrollTop
+      const scrollRate = Math.abs(scrollDelta) / (timeDelta || 1)
+      this.lastScrollTop = this.currScrollTop
+      this.lastTimestamp = currentTimestamp
+      return scrollRate
+    },
+    scroll(e) {
+      if (!e || !e.target) return
+      clearTimeout(this.scrollTimeout)
+      const { scrollTop } = e.target
+      const scrollRate = this.getScrollRate()
+      if (scrollRate > 5) {
+        this.scrollTimeout = setTimeout(() => {
+          this.handleScroll(scrollTop)
+        }, 25)
+        return
+      }
+      this.handleScroll(scrollTop)
+    },
+    libraryItemAdded(libraryItem) {
+      console.log('libraryItem added', libraryItem)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    libraryItemUpdated(libraryItem) {
+      console.log('Item updated', libraryItem)
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
+        if (indexOf >= 0) {
+          if (this.entityName === 'items' && this.orderBy === 'media.metadata.title') {
+            const curTitle = this.entities[indexOf].media.metadata?.title
+            const newTitle = libraryItem.media.metadata?.title
+            if (curTitle != newTitle) {
+              console.log('Title changed. Re-sorting...')
+              this.resetEntities(this.currScrollTop)
+              return
+            }
+          }
+          this.entities[indexOf] = libraryItem
+          if (this.entityComponentRefs[indexOf]) {
+            this.entityComponentRefs[indexOf].setEntity(libraryItem)
+          }
+        }
+      }
+    },
+    routeToBookshelfIfLastIssueRemoved() {
+      if (this.totalEntities === 0) {
+        const currentRouteQuery = this.$route.query
+        if (currentRouteQuery?.filter && currentRouteQuery.filter === 'issues') {
+          this.$nextTick(() => {
+            console.log('Last issue removed. Redirecting to library bookshelf')
+            this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
+            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
+          })
+        }
+      }
+    },
+    libraryItemRemoved(libraryItem) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
+        if (indexOf >= 0) {
+          this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
+          this.totalEntities--
+          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+          this.executeRebuild()
+        }
+      }
+      this.routeToBookshelfIfLastIssueRemoved()
+    },
+    libraryItemsAdded(libraryItems) {
+      console.log('items added', libraryItems)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    libraryItemsUpdated(libraryItems) {
+      libraryItems.forEach((ab) => {
+        this.libraryItemUpdated(ab)
+      })
+    },
+    collectionAdded(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionAdded ${collection.id}`, collection)
+      this.resetEntities()
+    },
+    collectionUpdated(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionUpdated ${collection.id}`, collection)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = collection
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(collection)
+        }
+      }
+    },
+    collectionRemoved(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionRemoved ${collection.id}`, collection)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== collection.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+    playlistAdded(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistAdded ${playlist.id}`, playlist)
+      this.resetEntities()
+    },
+    playlistUpdated(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistUpdated ${playlist.id}`, playlist)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = playlist
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(playlist)
+        }
+      }
+    },
+    playlistRemoved(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistRemoved ${playlist.id}`, playlist)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== playlist.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+    authorAdded(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorAdded ${author.id}`, author)
+      this.resetEntities()
+    },
+    authorUpdated(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorUpdated ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = author
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(author)
+        }
+      }
+    },
+    authorRemoved(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorRemoved ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== author.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        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)
+      this.pagesLoaded = {}
+      for (let page = 0; page < numPages; page++) {
+        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
+        this.pagesLoaded[page] = Promise.resolve()
+        for (let i = 0; i < numEntities; i++) {
+          const index = page * this.booksPerFetch + i
+          if (!this.entities[index]) {
+            if (this.pagesLoaded[page]) delete this.pagesLoaded[page]
+            break
+          }
+        }
+      }
+    },
+    initSizeData(_bookshelf) {
+      var bookshelf = _bookshelf || document.getElementById('bookshelf')
+      if (!bookshelf) {
+        console.error('Failed to init size data')
+        return
+      }
+      var entitiesPerShelfBefore = this.entitiesPerShelf
+
+      var { clientHeight, clientWidth } = bookshelf
+      this.mountWindowWidth = window.innerWidth
+      this.bookshelfHeight = clientHeight
+      this.bookshelfWidth = clientWidth
+      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) {
+        this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+      }
+      return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
+    },
+    async init(bookshelf) {
+      this.initSizeData(bookshelf)
+      this.checkUpdateSearchParams()
+
+      await this.loadPage(0)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.mountEntities(0, lastBookIndex)
+
+      // Set last scroll position for this bookshelf page
+      if (this.$store.state.lastBookshelfScrollData[this.page] && window.bookshelf) {
+        const { path, scrollTop } = this.$store.state.lastBookshelfScrollData[this.page]
+        if (path === this.routeFullPath) {
+          // Exact path match with query so use scroll position
+          window.bookshelf.scrollTop = scrollTop
+        }
+      }
+    },
+    executeRebuild() {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(() => {
+        this.rebuild()
+      }, 200)
+    },
+    windowResize() {
+      this.executeRebuild()
+    },
+    initListeners() {
+      window.addEventListener('resize', this.windowResize)
+
+      this.$nextTick(() => {
+        var bookshelf = document.getElementById('bookshelf')
+        if (bookshelf) {
+          this.init(bookshelf)
+          bookshelf.addEventListener('scroll', this.scroll, { passive: true })
+        }
+      })
+
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$on('user-settings', this.settingsUpdated)
+
+      if (this.$root.socket) {
+        this.$root.socket.on('item_updated', this.libraryItemUpdated)
+        this.$root.socket.on('item_added', this.libraryItemAdded)
+        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('collection_added', this.collectionAdded)
+        this.$root.socket.on('collection_updated', this.collectionUpdated)
+        this.$root.socket.on('collection_removed', this.collectionRemoved)
+        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('author_added', this.authorAdded)
+        this.$root.socket.on('author_updated', this.authorUpdated)
+        this.$root.socket.on('author_removed', this.authorRemoved)
+        this.$root.socket.on('share_open', this.shareOpen)
+        this.$root.socket.on('share_closed', this.shareClosed)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    },
+    removeListeners() {
+      window.removeEventListener('resize', this.windowResize)
+      var bookshelf = document.getElementById('bookshelf')
+      if (bookshelf) {
+        bookshelf.removeEventListener('scroll', this.scroll)
+      }
+
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$off('user-settings', this.settingsUpdated)
+
+      if (this.$root.socket) {
+        this.$root.socket.off('item_updated', this.libraryItemUpdated)
+        this.$root.socket.off('item_added', this.libraryItemAdded)
+        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('collection_added', this.collectionAdded)
+        this.$root.socket.off('collection_updated', this.collectionUpdated)
+        this.$root.socket.off('collection_removed', this.collectionRemoved)
+        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('author_added', this.authorAdded)
+        this.$root.socket.off('author_updated', this.authorUpdated)
+        this.$root.socket.off('author_removed', this.authorRemoved)
+        this.$root.socket.off('share_open', this.shareOpen)
+        this.$root.socket.off('share_closed', this.shareClosed)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    },
+    destroyEntityComponents() {
+      for (const key in this.entityComponentRefs) {
+        const ref = this.entityComponentRefs[key]
+        if (ref && ref.destroy) {
+          if (ref.$el) ref.$el.remove()
+          ref.destroy()
+        }
+      }
+      this.entityComponentRefs = {}
+      this.entityIndexesMounted = []
+    },
+    scan() {
+      this.tempIsScanning = true
+      this.$store
+        .dispatch('libraries/requestLibraryScan', { libraryId: this.currentLibraryId })
+        .catch((error) => {
+          console.error('Failed to start scan', error)
+          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+        })
+        .finally(() => {
+          this.tempIsScanning = false
+        })
+    },
+    entitiesInShelf(shelf) {
+      return shelf == this.totalShelves ? this.totalEntities % this.entitiesPerShelf || this.entitiesPerShelf : this.entitiesPerShelf
+    },
+    entityTransform(entityIndex) {
+      const shelfOffsetY = this.shelfPaddingHeight * this.sizeMultiplier
+      const shelfOffsetX = (entityIndex - 1) * this.totalEntityCardWidth + this.bookshelfMarginLeft
+      return `translate3d(${shelfOffsetX}px, ${shelfOffsetY}px, 0px)`
+    }
+  },
+  async mounted() {
+    await this.cardsHelpers.setCardSize()
+    this.initListeners()
+
+    this.routeFullPath = window.location.pathname + (window.location.search || '')
+  },
+  updated() {
+    this.routeFullPath = window.location.pathname + (window.location.search || '')
+
+    setTimeout(() => {
+      if (window.innerWidth > 0 && window.innerWidth !== this.mountWindowWidth) {
+        console.log('Updated window width', window.innerWidth, 'from', this.mountWindowWidth)
+        this.executeRebuild()
+      }
+    }, 50)
+  },
+  beforeDestroy() {
+    this.destroyEntityComponents()
+    this.removeListeners()
+
+    // Set bookshelf scroll position for specific bookshelf page and query
+    if (window.bookshelf) {
+      this.$store.commit('setLastBookshelfScrollData', { scrollTop: window.bookshelf.scrollTop || 0, path: this.routeFullPath, name: this.page })
+    }
+  }
+}
+</script>
+
+<style>
+.bookshelfRow {
+  background-image: var(--bookshelf-texture-img);
+}
+
+.bookshelfDivider {
+  background: rgb(149, 119, 90);
+  background: var(--bookshelf-divider-bg);
+  box-shadow: 0.125em 0.875em 0.5em #111111aa;
+}
+</style>

client/components/app/MediaPlayerContainer.vue

@@ -0,0 +1,571 @@
+<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 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="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 class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
+          <span class="material-symbols text-sm">person</span>
+          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">{{ podcastAuthor }}</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>
+          <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">
+          <span class="material-symbols text-xs">schedule</span>
+          <p class="font-mono text-xs sm:text-sm pl-1 sm:pl-1.5 pb-px">{{ totalDurationPretty }}</p>
+        </div>
+      </div>
+      <div class="grow" />
+      <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
+        <button :aria-label="$strings.LabelClosePlayer" class="material-symbols sm:px-2 py-1 lg:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
+      </ui-tooltip>
+    </div>
+    <player-ui
+      ref="audioPlayer"
+      :chapters="chapters"
+      :current-chapter="currentChapter"
+      :paused="!isPlaying"
+      :loading="playerLoading"
+      :bookmarks="bookmarks"
+      :sleep-timer-set="sleepTimerSet"
+      :sleep-timer-remaining="sleepTimerRemaining"
+      :sleep-timer-type="sleepTimerType"
+      :is-podcast="isPodcast"
+      :hasNextItemInQueue="hasNextItemInQueue"
+      @playPause="playPause"
+      @jumpForward="jumpForward"
+      @jumpBackward="jumpBackward"
+      @setVolume="setVolume"
+      @setPlaybackRate="setPlaybackRate"
+      @seek="seek"
+      @nextItemInQueue="playNextItemInQueue"
+      @close="closePlayer"
+      @showBookmarks="showBookmarks"
+      @showSleepTimer="showSleepTimerModal = true"
+      @showPlayerQueueItems="showPlayerQueueItemsModal = true"
+    />
+
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :playback-rate="currentPlaybackRate" :library-item-id="libraryItemId" @select="selectBookmark" />
+
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
+
+    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" />
+  </div>
+</template>
+
+<script>
+import PlayerHandler from '@/players/PlayerHandler'
+
+export default {
+  data() {
+    return {
+      playerHandler: new PlayerHandler(this),
+      totalDuration: 0,
+      showBookmarksModal: false,
+      bookmarkCurrentTime: 0,
+      playerLoading: false,
+      isPlaying: false,
+      currentTime: 0,
+      showSleepTimerModal: false,
+      showPlayerQueueItemsModal: false,
+      sleepTimerSet: false,
+      sleepTimerRemaining: 0,
+      sleepTimerType: null,
+      sleepTimer: null,
+      displayTitle: null,
+      currentPlaybackRate: 1,
+      syncFailedToast: null,
+      coverAspectRatio: 1,
+      lastChapterId: null
+    }
+  },
+  computed: {
+    isSquareCover() {
+      return this.coverAspectRatio === 1
+    },
+    isMobile() {
+      return this.$store.state.globals.isMobile
+    },
+    bookCoverWidth() {
+      if (this.isMobile) return 64 / this.coverAspectRatio
+      return 77 / this.coverAspectRatio
+    },
+    cover() {
+      if (this.media.coverPath) return this.media.coverPath
+      return 'Logo.png'
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    userItemCurrentTime() {
+      return this.userMediaProgress ? this.userMediaProgress.currentTime || 0 : 0
+    },
+    bookmarks() {
+      if (!this.libraryItemId) return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
+    },
+    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
+    },
+    media() {
+      return this.streamLibraryItem?.media || {}
+    },
+    isPodcast() {
+      return this.streamLibraryItem?.mediaType === 'podcast'
+    },
+    isExplicit() {
+      return !!this.mediaMetadata.explicit
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    chapters() {
+      if (this.streamEpisode) return this.streamEpisode.chapters || []
+      return this.media.chapters || []
+    },
+    currentChapter() {
+      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
+    },
+    title() {
+      if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
+      return this.mediaMetadata.title || 'No Title'
+    },
+    authors() {
+      return this.mediaMetadata.authors || []
+    },
+    libraryId() {
+      return this.streamLibraryItem?.libraryId || null
+    },
+    totalDurationPretty() {
+      // Adjusted by playback rate
+      return this.$secondsToTimestamp(this.totalDuration / this.currentPlaybackRate)
+    },
+    podcastAuthor() {
+      if (!this.isPodcast) return null
+      return this.mediaMetadata.author || this.$strings.LabelUnknown
+    },
+    hasNextItemInQueue() {
+      return this.currentPlayerQueueIndex < this.playerQueueItems.length - 1
+    },
+    currentPlayerQueueIndex() {
+      if (!this.libraryItemId) return -1
+      return this.playerQueueItems.findIndex((i) => {
+        if (this.streamEpisode?.id) return i.episodeId === this.streamEpisode.id
+        return i.libraryItemId === this.libraryItemId
+      })
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
+    }
+  },
+  methods: {
+    mediaFinished(libraryItemId, episodeId) {
+      // Play next item in queue
+      if (!this.playerQueueItems.length || !this.$store.state.playerQueueAutoPlay) {
+        // TODO: Set media finished flag so play button will play next queue item
+        return
+      }
+      var currentQueueIndex = this.playerQueueItems.findIndex((i) => {
+        if (episodeId) return i.libraryItemId === libraryItemId && i.episodeId === episodeId
+        return i.libraryItemId === libraryItemId
+      })
+      if (currentQueueIndex < 0) {
+        console.error('Media finished not found in queue - using first in queue', this.playerQueueItems)
+        currentQueueIndex = -1
+      }
+      if (currentQueueIndex === this.playerQueueItems.length - 1) {
+        console.log('Finished last item in queue')
+        return
+      }
+      const nextItemInQueue = this.playerQueueItems[currentQueueIndex + 1]
+      if (nextItemInQueue) {
+        this.playLibraryItem({
+          libraryItemId: nextItemInQueue.libraryItemId,
+          episodeId: nextItemInQueue.episodeId || null,
+          queueItems: this.playerQueueItems
+        })
+      }
+    },
+    setPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+      this.$store.commit('setIsPlaying', isPlaying)
+      this.updateMediaSessionPlaybackState()
+    },
+    setSleepTimer(time) {
+      this.sleepTimerSet = true
+      this.showSleepTimerModal = false
+
+      this.sleepTimerType = time.timerType
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.COUNTDOWN) {
+        this.runSleepTimer(time)
+      }
+    },
+    runSleepTimer(time) {
+      this.sleepTimerRemaining = time.seconds
+
+      var lastTick = Date.now()
+      clearInterval(this.sleepTimer)
+      this.sleepTimer = setInterval(() => {
+        var elapsed = Date.now() - lastTick
+        lastTick = Date.now()
+        this.sleepTimerRemaining -= elapsed / 1000
+
+        if (this.sleepTimerRemaining <= 0) {
+          this.sleepTimerEnd()
+        }
+      }, 1000)
+    },
+    checkChapterEnd() {
+      if (!this.currentChapter) return
+
+      // Track chapter transitions by comparing current chapter with last chapter
+      if (this.lastChapterId !== this.currentChapter.id) {
+        // Chapter changed - if we had a previous chapter, this means we crossed a boundary
+        if (this.lastChapterId) {
+          this.sleepTimerEnd()
+        }
+        this.lastChapterId = this.currentChapter.id
+      }
+    },
+    sleepTimerEnd() {
+      this.clearSleepTimer()
+      this.playerHandler.pause()
+      this.$toast.info(this.$strings.ToastSleepTimerDone)
+    },
+    cancelSleepTimer() {
+      this.showSleepTimerModal = false
+      this.clearSleepTimer()
+    },
+    clearSleepTimer() {
+      clearInterval(this.sleepTimer)
+      this.sleepTimerRemaining = 0
+      this.sleepTimer = null
+      this.sleepTimerSet = false
+      this.sleepTimerType = null
+    },
+    incrementSleepTimer(amount) {
+      if (!this.sleepTimerSet) return
+      this.sleepTimerRemaining += amount
+    },
+    decrementSleepTimer(amount) {
+      if (this.sleepTimerRemaining < amount) {
+        this.sleepTimerRemaining = 3
+        return
+      }
+      this.sleepTimerRemaining = Math.max(0, this.sleepTimerRemaining - amount)
+    },
+    playPause() {
+      this.playerHandler.playPause()
+    },
+    jumpForward() {
+      this.playerHandler.jumpForward()
+    },
+    jumpBackward() {
+      this.playerHandler.jumpBackward()
+    },
+    setVolume(volume) {
+      this.playerHandler.setVolume(volume)
+    },
+    setPlaybackRate(playbackRate) {
+      this.currentPlaybackRate = 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) {
+        this.$refs.audioPlayer.setCurrentTime(time)
+      }
+
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
+        this.checkChapterEnd()
+      }
+    },
+    setDuration(duration) {
+      this.totalDuration = duration
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setDuration(duration)
+      }
+    },
+    setBufferTime(buffertime) {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setBufferTime(buffertime)
+      }
+    },
+    showBookmarks() {
+      this.bookmarkCurrentTime = this.currentTime
+      this.showBookmarksModal = true
+    },
+    selectBookmark(bookmark) {
+      this.seek(bookmark.time)
+      this.showBookmarksModal = false
+    },
+    closePlayer() {
+      this.playerHandler.closePlayer()
+      this.$store.commit('setMediaPlaying', null)
+    },
+    mediaSessionPlay() {
+      console.log('Media session play')
+      this.playerHandler.play()
+    },
+    mediaSessionPause() {
+      console.log('Media session pause')
+      this.playerHandler.pause()
+    },
+    mediaSessionStop() {
+      console.log('Media session stop')
+      this.playerHandler.pause()
+    },
+    mediaSessionSeekBackward() {
+      console.log('Media session seek backward')
+      this.playerHandler.jumpBackward()
+    },
+    mediaSessionSeekForward() {
+      console.log('Media session seek forward')
+      this.playerHandler.jumpForward()
+    },
+    mediaSessionSeekTo(e) {
+      console.log('Media session seek to', e)
+      if (e.seekTime !== null && !isNaN(e.seekTime)) {
+        this.playerHandler.seek(e.seekTime)
+      }
+    },
+    mediaSessionPreviousTrack() {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.prevChapter()
+      }
+    },
+    mediaSessionNextTrack() {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.nextChapter()
+      }
+    },
+    updateMediaSessionPlaybackState() {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.playbackState = this.isPlaying ? 'playing' : 'paused'
+      }
+    },
+    setMediaSession() {
+      if (!this.streamLibraryItem) {
+        console.error('setMediaSession: No library item set')
+        return
+      }
+
+      // https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API
+      if ('mediaSession' in navigator) {
+        const chapterInfo = []
+        if (this.chapters.length) {
+          this.chapters.forEach((chapter) => {
+            chapterInfo.push({
+              title: chapter.title,
+              startTime: chapter.start
+            })
+          })
+        }
+
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: this.title,
+          artist: this.playerHandler.displayAuthor || this.mediaMetadata.authorName || 'Unknown',
+          album: this.mediaMetadata.seriesName || '',
+          artwork: [
+            {
+              src: this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png', true)
+            }
+          ],
+          chapterInfo
+        })
+        console.log('Set media session metadata', navigator.mediaSession.metadata)
+
+        navigator.mediaSession.setActionHandler('play', this.mediaSessionPlay)
+        navigator.mediaSession.setActionHandler('pause', this.mediaSessionPause)
+        navigator.mediaSession.setActionHandler('stop', this.mediaSessionStop)
+        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)
+      } else {
+        console.warn('Media session not available')
+      }
+    },
+    streamProgress(data) {
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === data.stream) {
+        if (!data.numSegments) return
+        var chunks = data.chunks
+        console.log(`[MediaPlayerContainer] Stream Progress ${data.percent}`)
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
+        } else {
+          console.error('No Audio Ref')
+        }
+      }
+    },
+    sessionOpen(session) {
+      // For opening session on init (temporarily unused)
+      this.$store.commit('setMediaPlaying', {
+        libraryItem: session.libraryItem,
+        episodeId: session.episodeId
+      })
+      this.playerHandler.prepareOpenSession(session, this.currentPlaybackRate)
+    },
+    streamOpen(session) {
+      console.log(`[MediaPlayerContainer] Stream session open`, session)
+    },
+    streamClosed(streamId) {
+      // Stream was closed from the server
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
+        console.warn('[MediaPlayerContainer] Closing stream due to request from server')
+        this.playerHandler.closePlayer()
+      }
+    },
+    streamReady() {
+      console.log(`[MediaPlayerContainer] Stream Ready`)
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setStreamReady()
+      } else {
+        console.error('No Audio Ref')
+      }
+    },
+    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')
+        this.playerHandler.closePlayer()
+      }
+    },
+    streamReset({ startTime, streamId }) {
+      this.playerHandler.resetStream(startTime, streamId)
+    },
+    castSessionActive(isActive) {
+      if (isActive && this.playerHandler.isPlayingLocalItem) {
+        // Cast session started switch to cast player
+        this.playerHandler.switchPlayer()
+      } else if (!isActive && this.playerHandler.isPlayingCastedItem) {
+        // Cast session ended switch to local player
+        this.playerHandler.switchPlayer()
+      }
+    },
+    playNextItemInQueue() {
+      if (this.hasNextItemInQueue) {
+        this.playQueueItem({ index: this.currentPlayerQueueIndex + 1 })
+      }
+    },
+    /**
+     * @param {{ index: number }} payload
+     */
+    playQueueItem(payload) {
+      if (payload?.index === undefined) {
+        console.error('playQueueItem: No index provided')
+        return
+      }
+      if (!this.playerQueueItems[payload.index]) {
+        console.error('playQueueItem: No item found at index', payload.index)
+        return
+      }
+      const item = this.playerQueueItems[payload.index]
+      this.playLibraryItem({
+        libraryItemId: item.libraryItemId,
+        episodeId: item.episodeId || null,
+        queueItems: this.playerQueueItems
+      })
+    },
+    async playLibraryItem(payload) {
+      const libraryItemId = payload.libraryItemId
+      const episodeId = payload.episodeId || null
+
+      if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
+        if (payload.startTime !== null && !isNaN(payload.startTime)) {
+          this.seek(payload.startTime)
+        } else {
+          this.playerHandler.play()
+        }
+        return
+      }
+
+      const libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed to fetch full item', error)
+        return null
+      })
+      if (!libraryItem) return
+
+      this.$store.commit('setMediaPlaying', {
+        libraryItem,
+        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)
+    },
+    pauseItem() {
+      this.playerHandler.pause()
+    },
+    showFailedProgressSyncs() {
+      if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
+      this.syncFailedToast = this.$toast(this.$strings.ToastProgressIsNotBeingSynced, { 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-queue-item', this.playQueueItem)
+    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-queue-item', this.playQueueItem)
+    this.$eventBus.$off('play-item', this.playLibraryItem)
+    this.$eventBus.$off('pause-item', this.pauseItem)
+  }
+}
+</script>
+
+<style>
+#mediaPlayerContainer {
+  box-shadow: 0px -6px 8px #1111113f;
+}
+</style>

client/components/app/SettingsContent.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white/5 p-2 sm:p-4 mb-8">
+    <div class="flex items-center mb-2">
+      <slot name="header-prefix"></slot>
+      <h1 class="text-xl">{{ headerText }}</h1>
+
+      <slot name="header-items"></slot>
+    </div>
+
+    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String
+  },
+  methods: {}
+}
+</script>
+
+<style>
+#settings-description a {
+  color: rgb(96 165 250);
+}
+#settings-description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#settings-description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>

client/components/app/SideRail.vue

@@ -0,0 +1,231 @@
+<template>
+  <div role="toolbar" aria-orientation="vertical" aria-label="Library Sidebar" class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-50" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
+    <!-- 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" role="navigation" aria-label="Library Navigation" :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/70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">home</span>
+
+        <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>
+
+      <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/70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">&#xe241;</span>
+
+        <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>
+
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">import_contacts</span>
+
+        <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>
+
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">view_column</span>
+
+        <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>
+
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">&#xe431;</span>
+
+        <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>
+
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2.5xl">&#xe03d;</span>
+
+        <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+
+        <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">groups</span>
+
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
+
+        <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">&#xe91f;</span>
+
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
+
+        <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">&#xf190;</span>
+
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
+
+        <div v-show="isStatsPage" 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/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="abs-icons icon-podcast text-xl"></span>
+
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAdd }}</p>
+
+        <div v-show="isPodcastSearchPage" 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/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary/80' : 'bg-bg/60'">
+        <span class="material-symbols text-2xl">&#xf090;</span>
+
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
+
+        <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <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/80 border-b border-primary/70 hover:bg-error/40 cursor-pointer relative" :class="showingIssues ? 'bg-error/40' : 'bg-error/20'">
+        <span class="material-symbols 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/30 flex items-center justify-center">
+          <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
+        </div>
+      </nuxt-link>
+    </div>
+
+    <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
+      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1 cursor-pointer" @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" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showChangelogModal: false
+    }
+  },
+  computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
+    isShowingBookshelfToolbar() {
+      if (!this.$route.name) return false
+      return this.$route.name.startsWith('library')
+    },
+    offsetTop() {
+      return 64
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    paramId() {
+      return this.$route.params ? this.$route.params.id || '' : ''
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcast'
+    },
+    isPodcastDownloadQueuePage() {
+      return this.$route.name === 'library-library-podcast-download-queue'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
+    },
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
+    },
+    homePage() {
+      return this.$route.name === 'library-library'
+    },
+    isSeriesPage() {
+      return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
+    },
+    isAuthorsPage() {
+      return this.libraryBookshelfPage && this.paramId === 'authors'
+    },
+    isNarratorsPage() {
+      return this.$route.name === 'library-library-narrators'
+    },
+    isPlaylistsPage() {
+      return this.paramId === 'playlists'
+    },
+    isStatsPage() {
+      return this.$route.name === 'library-library-stats'
+    },
+    libraryBookshelfPage() {
+      return this.$route.name === 'library-library-bookshelf-id'
+    },
+    showLibrary() {
+      return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    showingIssues() {
+      if (!this.$route.query) return false
+      return this.libraryBookshelfPage && this.$route.query.filter === 'issues'
+    },
+    numIssues() {
+      return this.$store.state.libraries.issues || 0
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    showPlaylists() {
+      return this.$store.state.libraries.numUserPlaylists > 0
+    }
+  },
+  methods: {
+    clickChangelog() {
+      this.showChangelogModal = true
+    }
+  },
+  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,157 +0,0 @@
-<template>
-  <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-40 bg-primary p-4">
-    <div class="absolute -top-16 left-4">
-      <cards-book-cover :audiobook="streamAudiobook" :width="88" />
-    </div>
-    <div class="flex items-center pl-24">
-      <div>
-        <h1>
-          {{ title }} <span v-if="stream" class="text-xs text-gray-400">({{ stream.id }})</span>
-        </h1>
-        <p class="text-gray-400 text-sm">by {{ author }}</p>
-      </div>
-      <div class="flex-grow" />
-      <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
-    </div>
-
-    <audio-player ref="audioPlayer" :loading="isLoading" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      audioPlayerReady: false,
-      lastServerUpdateSentSeconds: 0,
-      stream: null
-    }
-  },
-  computed: {
-    cover() {
-      if (this.streamAudiobook && this.streamAudiobook.cover) return this.streamAudiobook.cover
-      return 'Logo.png'
-    },
-    user() {
-      return this.$store.state.user.user
-    },
-    isLoading() {
-      if (!this.streamAudiobook) return false
-      if (this.stream) {
-        // IF Stream exists, set loading if stream is diff from next stream
-        return this.stream.audiobook.id !== this.streamAudiobook.id
-      }
-      return true
-    },
-    streamAudiobook() {
-      return this.$store.state.streamAudiobook
-    },
-    book() {
-      return this.streamAudiobook ? this.streamAudiobook.book || {} : {}
-    },
-    title() {
-      return this.book.title || 'No Title'
-    },
-    author() {
-      return this.book.author || 'Unknown'
-    },
-    streamId() {
-      return this.stream ? this.stream.id : null
-    },
-    playlistUrl() {
-      return this.stream ? this.stream.clientPlaylistUri : null
-    }
-  },
-  methods: {
-    audioPlayerMounted() {
-      this.audioPlayerReady = true
-      if (this.stream) {
-        console.log('[STREAM-CONTAINER] audioPlayerMounted w/ Stream', this.stream)
-        this.openStream()
-      }
-    },
-    cancelStream() {
-      this.$root.socket.emit('close_stream')
-    },
-    terminateStream() {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.terminateStream()
-      }
-    },
-    openStream() {
-      var playOnLoad = this.$store.state.playOnLoad
-      console.log(`[StreamContainer] openStream PlayOnLoad`, playOnLoad)
-      if (!this.$refs.audioPlayer) {
-        console.error('NO Audio Player')
-        return
-      }
-      var currentTime = this.stream.clientCurrentTime || 0
-      this.$refs.audioPlayer.set(this.playlistUrl, currentTime, playOnLoad)
-      if (this.stream.isTranscodeComplete) {
-        this.$refs.audioPlayer.setStreamReady()
-      }
-    },
-    streamProgress(data) {
-      if (!data.numSegments) return
-      var chunks = data.chunks
-      console.log(`[STREAM-CONTAINER] Stream Progress ${data.percent}`)
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
-      } else {
-        console.error('No Audio Ref')
-      }
-    },
-    streamOpen(stream) {
-      this.stream = stream
-      if (this.$refs.audioPlayer) {
-        console.log('[STREAM-CONTAINER] streamOpen', stream)
-        this.openStream()
-      } else if (this.audioPlayerReady) {
-        console.error('No Audio Ref')
-      }
-    },
-    streamClosed(streamId) {
-      if (this.stream && (this.stream.id === streamId || streamId === 'n/a')) {
-        this.terminateStream()
-        this.$store.commit('clearStreamAudiobook', this.stream.audiobook.id)
-        this.stream = null
-      }
-    },
-    streamReady() {
-      console.log(`[STREAM-CONTAINER] Stream Ready`)
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setStreamReady()
-      } else {
-        console.error('No Audio Ref')
-      }
-    },
-    updateTime(currentTime) {
-      var diff = currentTime - this.lastServerUpdateSentSeconds
-      if (diff > 4 || diff < 0) {
-        this.lastServerUpdateSentSeconds = currentTime
-        var updatePayload = {
-          currentTime,
-          streamId: this.streamId
-        }
-        this.$root.socket.emit('stream_update', updatePayload)
-      }
-    },
-    streamReset({ startTime, streamId }) {
-      if (streamId !== this.streamId) {
-        console.error('resetStream StreamId Mismatch', streamId, this.streamId)
-        return
-      }
-      if (this.$refs.audioPlayer) {
-        console.log(`[STREAM-CONTAINER] streamReset Received for time ${startTime}`)
-        this.$refs.audioPlayer.resetStream(startTime)
-      }
-    }
-  }
-}
-</script>
-
-<style>
-#streamContainer {
-  box-shadow: 0px -6px 8px #1111113f;
-}
-</style>

client/components/cards/AudiobookSearchCard.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <cards-book-cover :audiobook="audiobook" :width="40" />
-    <div class="flex-grow px-2 searchCardContent h-full">
-      <p class="truncate text-sm">{{ title }}</p>
-      <p class="text-xs text-gray-200 truncate">by {{ author }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
-    },
-    title() {
-      return this.book ? this.book.title : 'No Title'
-    },
-    author() {
-      return this.book ? this.book.author : 'Unknown'
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.searchCardContent {
-  width: calc(100% - 80px);
-  height: calc(40px * 1.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>

client/components/cards/AuthorCard.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="pb-3e" :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" />
+
+          <!-- 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/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-symbols" :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-symbols" :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/50 flex items-center justify-center">
+            <widgets-loading-spinner size="" />
+          </div>
+        </div>
+        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
+          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+        </div>
+      </div>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    authorMount: {
+      type: Object,
+      default: () => {}
+    },
+    width: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
+    nameBelow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searching: false,
+      isHovering: false,
+      author: null
+    }
+  },
+  computed: {
+    cardWidth() {
+      return this.width || this.cardHeight * 0.8
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    coverHeight() {
+      return this.cardHeight
+    },
+    _author() {
+      return this.author || {}
+    },
+    authorId() {
+      return this._author?.id || ''
+    },
+    name() {
+      return this._author?.name || ''
+    },
+    asin() {
+      return this._author?.asin || ''
+    },
+    numBooks() {
+      return this._author?.numBooks || 0
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    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: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    async searchAuthor() {
+      this.searching = true
+      const payload = {}
+      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
+      })
+      if (!response) {
+        this.$toast.error(this.$getString('ToastAuthorNotFound', [this.name]))
+      } else if (response.updated) {
+        if (response.author.imagePath) {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
+        } else {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+        }
+      } else {
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+      }
+      this.searching = false
+    },
+    setSearching(isSearching) {
+      this.searching = isSearching
+    },
+    setEntity(author) {
+      this.removeListeners()
+      this.author = author
+      this.addListeners()
+    },
+    addListeners() {
+      if (this.author) {
+        this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    removeListeners() {
+      if (this.author) {
+        this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    },
+    setSelectionMode(val) {}
+  },
+  mounted() {
+    if (this.authorMount) this.setEntity(this.authorMount)
+  },
+  beforeDestroy() {
+    this.removeListeners()
+  }
+}
+</script>

client/components/cards/AuthorSearchCard.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="overflow-hidden bg-primary rounded-sm" style="height: 50px; width: 40px">
+      <covers-author-image :author="author" />
+    </div>
+    <div class="grow px-2 authorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ name }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    name() {
+      return this.author.name
+    },
+    numBooks() {
+      return this.author.numBooks
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.authorSearchCardContent {
+  width: calc(100% - 80px);
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/BookCard.vue

@@ -1,184 +0,0 @@
-<template>
-  <div class="relative">
-    <!-- New Book Flag -->
-    <div v-show="isNew" class="absolute top-4 left-0 w-4 h-10 pr-2 bg-darkgreen box-shadow-xl">
-      <div class="absolute top-0 left-0 w-full h-full transform -rotate-90 flex items-center justify-center">
-        <p class="text-center text-sm">New</p>
-      </div>
-      <div class="absolute -bottom-4 left-0 triangle-right" />
-    </div>
-
-    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
-      <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
-        <div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }">
-          <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
-
-          <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
-            <div v-show="!isSelectionMode" class="h-full flex items-center justify-center">
-              <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
-                <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
-              </div>
-            </div>
-            <div v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 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>
-          </div>
-          <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-          <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
-            <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>
-      </nuxt-link>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => null
-    },
-    userProgress: {
-      type: Object,
-      default: () => null
-    },
-    width: {
-      type: Number,
-      default: 120
-    }
-  },
-  data() {
-    return {
-      isHovering: false
-    }
-  },
-  computed: {
-    isNew() {
-      return this.tags.includes('new')
-    },
-    tags() {
-      return this.audiobook.tags || []
-    },
-    audiobookId() {
-      return this.audiobook.id
-    },
-    isSelectionMode() {
-      return this.$store.getters['getNumAudiobooksSelected']
-    },
-    selectedAudiobooks() {
-      return this.$store.state.selectedAudiobooks
-    },
-    selected() {
-      return this.$store.getters['getIsAudiobookSelected'](this.audiobookId)
-    },
-    processingBatch() {
-      return this.$store.state.processingBatch
-    },
-    book() {
-      return this.audiobook.book || {}
-    },
-    height() {
-      return this.width * 1.6
-    },
-    sizeMultiplier() {
-      return this.width / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    title() {
-      return this.book.title
-    },
-    playIconFontSize() {
-      return Math.max(2, 3 * this.sizeMultiplier)
-    },
-    author() {
-      return this.book.author
-    },
-    authorFL() {
-      return this.book.authorFL || this.author
-    },
-    authorLF() {
-      return this.book.authorLF || this.author
-    },
-    authorFormat() {
-      if (!this.orderBy || !this.orderBy.startsWith('book.author')) return null
-      return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
-    },
-    volumeNumber() {
-      return this.book.volumeNumber || null
-    },
-    orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
-    },
-    filterBy() {
-      return this.$store.getters['user/getUserSetting']('filterBy')
-    },
-    userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
-    },
-    showError() {
-      return this.hasMissingParts || this.hasInvalidParts
-    },
-    hasMissingParts() {
-      return this.audiobook.hasMissingParts
-    },
-    hasInvalidParts() {
-      return this.audiobook.hasInvalidParts
-    },
-    errorText() {
-      var txt = ''
-      if (this.hasMissingParts) {
-        txt = `${this.hasMissingParts} missing parts.`
-      }
-      if (this.hasInvalidParts) {
-        if (this.hasMissingParts) txt += ' '
-        txt += `${this.hasInvalidParts} invalid parts.`
-      }
-      return txt || 'Unknown Error'
-    },
-    overlayWrapperClasslist() {
-      var classes = []
-      if (this.isSelectionMode) classes.push('bg-opacity-60')
-      else classes.push('bg-opacity-40')
-      if (this.selected) {
-        classes.push('border-2 border-yellow-400')
-      }
-      return classes
-    }
-  },
-  methods: {
-    selectBtnClick() {
-      if (this.processingBatch) return
-      this.$store.commit('toggleAudiobookSelected', this.audiobookId)
-    },
-    clickError(e) {
-      e.stopPropagation()
-      this.$router.push(`/audiobook/${this.audiobookId}`)
-    },
-    play() {
-      this.$store.commit('setStreamAudiobook', this.audiobook)
-      this.$root.socket.emit('open_stream', this.audiobookId)
-    },
-    editClick() {
-      this.$store.commit('showEditModal', this.audiobook)
-    },
-    clickCard(e) {
-      if (this.isSelectionMode) {
-        e.stopPropagation()
-        e.preventDefault()
-        this.selectBtnClick()
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/cards/BookCover.vue

@@ -1,144 +0,0 @@
-<template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
-    <div class="w-full h-full relative">
-      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
-        <div class="w-full h-full z-0" ref="coverBg" />
-      </div>
-      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
-    </div>
-
-    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
-      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
-        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
-      </div>
-    </div>
-
-    <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 font-book" 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 font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    },
-    authorOverride: String,
-    width: {
-      type: Number,
-      default: 120
-    }
-  },
-  data() {
-    return {
-      imageFailed: false,
-      showCoverBg: false
-    }
-  },
-  watch: {
-    cover() {
-      this.imageFailed = false
-    }
-  },
-  computed: {
-    book() {
-      return this.audiobook.book || {}
-    },
-    title() {
-      return this.book.title || 'No Title'
-    },
-    titleCleaned() {
-      if (this.title.length > 60) {
-        return this.title.slice(0, 57) + '...'
-      }
-      return this.title
-    },
-    author() {
-      if (this.authorOverride) return this.authorOverride
-      return this.book.author || 'Unknown'
-    },
-    authorCleaned() {
-      if (this.author.length > 30) {
-        return this.author.slice(0, 27) + '...'
-      }
-      return this.author
-    },
-    placeholderUrl() {
-      return '/book_placeholder.jpg'
-    },
-    fullCoverUrl() {
-      if (!this.cover || this.cover === this.placeholderUrl) return ''
-      if (this.cover.startsWith('http:') || this.cover.startsWith('https:')) return this.cover
-      try {
-        var url = new URL(this.cover, document.baseURI)
-        return url.href
-      } catch (err) {
-        console.error(err)
-        return ''
-      }
-    },
-    cover() {
-      return this.book.cover || this.placeholderUrl
-    },
-    hasCover() {
-      return !!this.book.cover
-    },
-    sizeMultiplier() {
-      return this.width / 120
-    },
-    titleFontSize() {
-      return 0.75 * this.sizeMultiplier
-    },
-    authorFontSize() {
-      return 0.6 * this.sizeMultiplier
-    },
-    placeholderCoverPadding() {
-      return 0.8 * this.sizeMultiplier
-    },
-    authorBottom() {
-      return 0.75 * this.sizeMultiplier
-    }
-  },
-  methods: {
-    setCoverBg() {
-      if (this.$refs.coverBg) {
-        this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
-        this.$refs.coverBg.style.backgroundSize = 'cover'
-        this.$refs.coverBg.style.backgroundPosition = 'center'
-        this.$refs.coverBg.style.opacity = 0.25
-        this.$refs.coverBg.style.filter = 'blur(1px)'
-      }
-    },
-    hideCoverBg() {},
-    imageLoaded() {
-      if (this.$refs.cover && this.cover !== this.placeholderUrl) {
-        var { naturalWidth, naturalHeight } = this.$refs.cover
-        var aspectRatio = naturalHeight / naturalWidth
-        var arDiff = Math.abs(aspectRatio - 1.6)
-
-        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
-        if (arDiff > 0.15) {
-          this.showCoverBg = true
-          this.$nextTick(this.setCoverBg)
-        } else {
-          this.showCoverBg = false
-        }
-      }
-    },
-    imageError(err) {
-      console.error('ImgError', err)
-      this.imageFailed = true
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/cards/BookMatchCard.vue

@@ -1,18 +1,48 @@
 <template>
-  <div class="w-full border-b border-gray-700 pb-2">
-    <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
-      <img :src="selectedCover || '/book_placeholder.jpg'" class="h-24 object-cover" style="width: 60px" />
-      <div class="px-4 flex-grow">
+  <div v-if="book" class="w-full border-b border-gray-700 pb-2">
+    <div class="flex py-1 hover:bg-gray-300/10 cursor-pointer" @click="selectMatch">
+      <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
+        <div class="w-full bg-primary">
+          <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
+          <div v-else class="w-12 h-12 md:w-20 md:h-20 bg-primary" />
+        </div>
+      </div>
+      <div v-if="!isPodcast" class="px-2 md:px-4 grow">
         <div class="flex items-center">
-          <h1>{{ book.title }}</h1>
-          <div class="flex-grow" />
-          <p>{{ book.year || book.first_publish_date }}</p>
+          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
+          <div class="grow" />
+          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
+        </div>
+
+        <div class="flex items-center">
+          <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>
+          <div class="grow" />
+          <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
+        </div>
+
+        <div v-if="book.series?.length" class="flex py-1 -mx-1">
+          <div v-for="(series, index) in book.series" :key="index" class="bg-white/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>
+            </p>
+          </div>
         </div>
-        <p class="text-gray-400">{{ book.author }}</p>
         <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs" v-html="book.description"></p>
+          <p class="text-gray-500 text-xs">{{ book.descriptionPlain }}</p>
         </div>
       </div>
+      <div v-else class="px-4 grow">
+        <h1>
+          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator v-if="book.explicit" /></div>
+        </h1>
+        <p class="text-base text-gray-300 whitespace-nowrap truncate">{{ $getString('LabelByAuthor', [book.author]) }}</p>
+        <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
+        <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
+      </div>
     </div>
     <div v-if="bookCovers.length > 1" class="flex">
       <template v-for="cover in bookCovers">
@@ -30,7 +60,10 @@ export default {
     book: {
       type: Object,
       default: () => {}
-    }
+    },
+    isPodcast: Boolean,
+    bookCoverAspectRatio: Number,
+    currentBookDuration: Number
   },
   data() {
     return {
@@ -39,21 +72,36 @@ export default {
   },
   computed: {
     bookCovers() {
-      return this.book.covers ? this.book.covers || [] : []
+      return this.book.covers || []
+    },
+    bookDuration() {
+      return (this.book.duration || 0) * 60
+    },
+    bookDurationComparison() {
+      if (!this.book.duration || !this.currentBookDuration) return ''
+      const currentBookDurationMinutes = Math.floor(this.currentBookDuration / 60)
+      let differenceInMinutes = currentBookDurationMinutes - this.book.duration
+      if (differenceInMinutes < 0) {
+        differenceInMinutes = Math.abs(differenceInMinutes)
+        return this.$getString('LabelDurationComparisonLonger', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
+      } else if (differenceInMinutes > 0) {
+        return this.$getString('LabelDurationComparisonShorter', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
+      }
+      return this.$strings.LabelDurationComparisonExactMatch
     }
   },
   methods: {
     selectMatch() {
-      var book = { ...this.book }
+      const book = { ...this.book }
       book.cover = this.selectedCover
-      this.$emit('select', this.book)
+      this.$emit('select', book)
     },
     clickCover(cover) {
       this.selectedCover = cover
     }
   },
   mounted() {
-    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : null
+    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
   }
 }
 </script>

client/components/cards/EpisodeSearchCard.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="grow px-2 episodeSearchCardContent">
+      <p class="truncate text-sm">{{ episodeTitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ podcastTitle }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episode: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    media() {
+      return this.libraryItem?.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    episodeTitle() {
+      return this.episode.title || 'No Title'
+    },
+    podcastTitle() {
+      return this.mediaMetadata.title || 'No Title'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.episodeSearchCardContent {
+  width: calc(100% - 80px);
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/GenreSearchCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-symbols text-2xl text-gray-200">category</span>
+    </div>
+    <div class="grow px-2 tagSearchCardContent h-full">
+      <p class="truncate text-sm">{{ genre }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    genre: String,
+    numItems: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.tagSearchCardContent {
+  width: calc(100% - 40px);
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/GroupCard.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="relative">
+    <div class="rounded-xs h-full relative" :style="{ width: cardWidth + 'px', height: cardHeight + '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" />
+
+          <div v-if="hasValidCovers" class="bg-black/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>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: Object,
+      default: () => null
+    },
+    width: Number,
+    height: {
+      type: Number,
+      default: 192
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  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
+    },
+    _group() {
+      return this.group || {}
+    },
+    groupType() {
+      return this._group.type
+    },
+    groupTo() {
+      return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
+    },
+    bookItems() {
+      return this._group.books || []
+    },
+    groupName() {
+      return this._group.name || 'No Name'
+    },
+    groupEncode() {
+      return this.$encode(this.groupName)
+    },
+    filter() {
+      return `${this.groupType}.${this.$encode(this.groupName)}`
+    },
+    hasValidCovers() {
+      var validCovers = this.bookItems.map((bookItem) => bookItem.media.coverPath)
+      return !!validCovers.length
+    }
+  },
+  methods: {
+    mouseoverCard() {
+      this.isHovering = true
+    },
+    mouseleaveCard() {
+      this.isHovering = false
+    },
+    clickCard() {
+      this.$emit('click', this.group)
+    }
+  }
+}
+</script>

client/components/cards/ItemSearchCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="grow px-2 audiobookSearchCardContent">
+      <p class="truncate text-sm">{{ title }}</p>
+      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    title() {
+      return this.mediaMetadata.title || 'No Title'
+    },
+    subtitle() {
+      return this.mediaMetadata.subtitle || ''
+    },
+    authorName() {
+      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.authorName || 'Unknown'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.audiobookSearchCardContent {
+  width: calc(100% - 80px);
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/ItemTaskRunningCard.vue

@@ -0,0 +1,143 @@
+<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-symbols text-base">{{ actionIcon }}</span>
+      <widgets-loading-spinner v-else />
+    </div>
+    <div class="grow px-2 taskRunningCardContent">
+      <p class="truncate text-sm">{{ title }}</p>
+
+      <p class="truncate text-xs text-gray-300">{{ description }}</p>
+      <p v-if="specialMessage" class="truncate text-xs text-gray-300">{{ specialMessage }}</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="bg-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>
+
+<script>
+export default {
+  props: {
+    task: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      cancelingScan: false,
+      specialMessage: ''
+    }
+  },
+  watch: {
+    task: {
+      immediate: true,
+      handler() {
+        this.initTask()
+      }
+    }
+  },
+  computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    title() {
+      if (this.task.titleKey && this.$strings[this.task.titleKey]) {
+        return this.$getString(this.task.titleKey, this.task.titleSubs)
+      }
+      return this.task.title || 'No Title'
+    },
+    description() {
+      if (this.task.descriptionKey && this.$strings[this.task.descriptionKey]) {
+        return this.$getString(this.task.descriptionKey, this.task.descriptionSubs)
+      }
+      return this.task.description || ''
+    },
+    isFinished() {
+      return !!this.task.isFinished
+    },
+    isFailed() {
+      return !!this.task.isFailed
+    },
+    isSuccess() {
+      return this.isFinished && !this.isFailed
+    },
+    failedMessage() {
+      if (this.task.errorKey && this.$strings[this.task.errorKey]) {
+        return this.$getString(this.task.errorKey, this.task.errorSubs)
+      }
+      return this.task.error || ''
+    },
+    action() {
+      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'
+        case 'encode-m4b':
+          return 'sync'
+        default:
+          return 'settings'
+      }
+    },
+    taskIconStatus() {
+      if (this.isFinished && this.isFailed) {
+        return 'text-red-500'
+      }
+      if (this.isFinished && !this.isFailed) {
+        return 'text-green-500'
+      }
+
+      return ''
+    },
+    isLibraryScan() {
+      return this.action === 'library-scan' || this.action === 'library-match-all'
+    }
+  },
+  methods: {
+    initTask() {
+      // special message for library scan tasks
+      if (this.task?.data?.scanResults) {
+        const scanResults = this.task.data.scanResults
+        const strs = []
+        if (scanResults.added) strs.push(this.$getString('MessageTaskScanItemsAdded', [scanResults.added]))
+        if (scanResults.updated) strs.push(this.$getString('MessageTaskScanItemsUpdated', [scanResults.updated]))
+        if (scanResults.missing) strs.push(this.$getString('MessageTaskScanItemsMissing', [scanResults.missing]))
+        const changesDetected = strs.length > 0 ? strs.join(', ') : this.$strings.MessageTaskScanNoChangesNeeded
+        const timeElapsed = scanResults.elapsed ? ` (${this.$elapsedPretty(scanResults.elapsed / 1000, false, true)})` : ''
+        this.specialMessage = `${changesDetected}${timeElapsed}`
+      } else {
+        this.specialMessage = ''
+      }
+    },
+    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() {}
+}
+</script>
+
+<style>
+.taskRunningCardContent {
+  width: calc(100% - 84px);
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/ItemUploadCard.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="relative w-full py-4 px-6 border border-white/10 shadow-lg rounded-md my-6">
+    <div class="absolute -top-3 -left-3 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full">
+      <p class="text-base text-white/80 font-mono">#{{ item.index }}</p>
+    </div>
+
+    <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
+      <span class="text-base text-white/80 font-mono material-symbols">close</span>
+    </div>
+
+    <template v-if="!uploadSuccess && !uploadFailed">
+      <widgets-alert v-if="error" type="error">
+        <p class="text-base">{{ error }}</p>
+      </widgets-alert>
+
+      <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" />
+        </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 direction="top" :text="$strings.LabelUploaderItemFetchMetadataHelp">
+              <button type="button" class="ml-2 mb-1 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer" @click="fetchMetadata">
+                <span class="text-base text-white/80 font-mono material-symbols">sync</span>
+              </button>
+            </ui-tooltip>
+          </div>
+          <div v-else class="w-full">
+            <p class="px-1 text-sm font-semibold">
+              {{ $strings.LabelDirectory }}
+              <em class="font-normal text-xs pl-2">(auto)</em>
+            </p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
+          </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" />
+        </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" />
+          </div>
+        </div>
+      </div>
+
+      <tables-uploaded-files-table :files="item.itemFiles" :title="$strings.HeaderItemFiles" class="mt-8" />
+      <tables-uploaded-files-table v-if="item.otherFiles.length" :title="$strings.HeaderOtherFiles" :files="item.otherFiles" />
+      <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>
+    </widgets-alert>
+    <widgets-alert v-if="uploadFailed" type="error">
+      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemFailed }}</p>
+    </widgets-alert>
+
+    <div v-if="isNonInteractable" class="absolute top-0 left-0 w-full h-full bg-black/50 flex items-center justify-center z-20">
+      <ui-loading-indicator :text="nonInteractionLabel" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Path from 'path'
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    mediaType: String,
+    processing: Boolean,
+    provider: String
+  },
+  data() {
+    return {
+      itemData: {
+        title: '',
+        author: '',
+        series: ''
+      },
+      error: '',
+      isUploading: false,
+      uploadFailed: false,
+      uploadSuccess: false,
+      isFetchingMetadata: false
+    }
+  },
+  computed: {
+    isPodcast() {
+      return this.mediaType === 'podcast'
+    },
+    directory() {
+      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
+      }
+    }
+  },
+  methods: {
+    setUploadStatus(status) {
+      this.isUploading = status === 'uploading'
+      this.uploadFailed = status === 'failed'
+      this.uploadSuccess = status === 'success'
+    },
+    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
+        return null
+      }
+      this.error = ''
+      var files = this.item.itemFiles.concat(this.item.otherFiles)
+      return {
+        index: this.item.index,
+        directory: this.directory,
+        ...this.itemData,
+        files
+      }
+    }
+  },
+  mounted() {
+    if (this.item) {
+      this.itemData.title = this.item.title
+      this.itemData.author = this.item.author
+      this.itemData.series = this.item.series
+    }
+  }
+}
+</script>

client/components/cards/LazyCollectionCard.vue

@@ -0,0 +1,134 @@
+<template>
+  <div ref="card" :id="`collection-card-${index}`" role="button" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-xs 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-sm overflow-hidden">
+        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black/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-symbols text-white/75 hover:text-white/100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
+      </div>
+
+      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols 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-xs border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+      </div>
+    </div>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    collectionMount: {
+      type: Object,
+      default: () => null
+    },
+    isTag: Boolean
+  },
+  data() {
+    return {
+      collection: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.9
+    },
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
+    title() {
+      return this.collection ? this.collection.name : ''
+    },
+    books() {
+      return this.collection ? this.collection.books || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    },
+    rssFeed() {
+      return this.collection ? this.collection.rssFeed : null
+    }
+  },
+  methods: {
+    setEntity(_collection) {
+      this.collection = _collection
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.collection) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/collection/${this.collection.id}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.collection)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.collectionMount) {
+      this.setEntity(this.collectionMount)
+    }
+  }
+}
+</script>

client/components/cards/LazyPlaylistCard.vue

@@ -0,0 +1,128 @@
+<template>
+  <div ref="card" :id="`playlist-card-${index}`" role="button" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-xs 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-sm 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/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-symbols text-white/75 hover:text-white/100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
+      </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-xs border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+      </div>
+    </div>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    playlistMount: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      playlist: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false
+    }
+  },
+  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
+    },
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
+    title() {
+      return this.playlist ? this.playlist.name : ''
+    },
+    items() {
+      return this.playlist ? this.playlist.items || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    setEntity(playlist) {
+      this.playlist = playlist
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.playlist) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/playlist/${this.playlist.id}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.playlist)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.playlistMount) {
+      this.setEntity(this.playlistMount)
+    }
+  }
+}
+</script>

client/components/cards/LazySeriesCard.vue

@@ -0,0 +1,207 @@
+<template>
+  <div cy-id="card" ref="card" :id="`series-card-${index}`" tabindex="0" :style="{ width: cardWidth + 'px' }" class="absolute rounded-xs 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-sm 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/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' }" role="status" :aria-label="$strings.LabelNumberOfBooks">{{ books.length }}</p>
+      </div>
+
+      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-xs max-w-full z-10 rounded-b w-full box-shadow-progressbar" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+
+      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" aria-hidden="true" class="bg-black/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-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
+    </div>
+
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-xs border" :style="{ padding: `0em 0.5em` }">
+        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ 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>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    seriesMount: {
+      type: Object,
+      default: () => null
+    },
+    sortingIgnorePrefix: Boolean,
+    orderBy: String
+  },
+  data() {
+    return {
+      series: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false,
+      imageReady: false
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    dateFormat() {
+      return this.store.getters['getServerSetting']('dateFormat')
+    },
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.9
+    },
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
+    seriesId() {
+      return this.series?.id || ''
+    },
+    title() {
+      return this.series?.name || ''
+    },
+    nameIgnorePrefix() {
+      return this.series?.nameIgnorePrefix || ''
+    },
+    displayTitle() {
+      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title || '\u00A0'
+      return this.title || '\u00A0'
+    },
+    displaySortLine() {
+      switch (this.orderBy) {
+        case 'addedAt':
+          return this.$getString('LabelAddedDate', [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
+      }
+    },
+    books() {
+      return this.series?.books || []
+    },
+    addedAt() {
+      return this.series?.addedAt || 0
+    },
+    totalDuration() {
+      return this.series?.totalDuration || 0
+    },
+    seriesBookProgress() {
+      return this.books
+        .map((libraryItem) => {
+          return this.store.getters['user/getUserMediaProgress'](libraryItem.id)
+        })
+        .filter((p) => !!p)
+    },
+    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
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    seriesBooksRoute() {
+      return `/library/${this.currentLibraryId}/series/${this.seriesId}`
+    },
+    hasValidCovers() {
+      var validCovers = this.books.map((bookItem) => bookItem.media.coverPath)
+      return !!validCovers.length
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    rssFeed() {
+      return this.series?.rssFeed
+    }
+  },
+  methods: {
+    setEntity(_series) {
+      this.series = _series
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.series) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/library/${this.currentLibraryId}/series/${this.seriesId}`)
+    },
+    imageLoaded() {
+      this.imageReady = true
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.seriesMount) {
+      this.setEntity(this.seriesMount)
+    }
+  },
+  beforeDestroy() {}
+}
+</script>

client/components/cards/NarratorCard.vue

@@ -0,0 +1,60 @@
+<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-symbols text-[10em]">&#xe91f;</span>
+        </div>
+
+        <!-- Narrator name & num books overlay -->
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black/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

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-symbols text-2xl text-gray-200">&#xe91f;</span>
+    </div>
+    <div class="grow px-2 narratorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ narrator }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    narrator: String,
+    numBooks: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.narratorSearchCardContent {
+  width: calc(100% - 40px);
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/NotificationCard.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="w-full border border-white/10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary/25' : 'bg-error/5'">
+    <div class="flex flex-wrap items-center">
+      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
+      <div class="grow" />
+
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">{{ this.$strings.ButtonFireOnTest }}</ui-btn>
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="bg-red-600" @click.stop="fireTestEventAndFail">{{ this.$strings.ButtonFireAndFail }}</ui-btn>
+      <!-- <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="rapidFireTestEvents">Rapid Fire</ui-btn> -->
+      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">{{ this.$strings.ButtonTest }}</ui-btn>
+      <ui-btn v-else :loading="enabling" small color="bg-success" class="mr-2" @click="enableNotification">{{ this.$strings.ButtonEnable }}</ui-btn>
+
+      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
+      <ui-icon-btn bg-color="bg-error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
+    </div>
+    <div class="pt-4">
+      <p class="text-gray-300 text-xs md:text-sm mb-2">{{ notification.urls.join(', ') }}</p>
+
+      <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
+      <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      sendingTest: false,
+      enabling: false,
+      deleting: false,
+      testing: false
+    }
+  },
+  computed: {
+    eventName() {
+      return this.notification ? this.notification.eventName : null
+    },
+    lastFiredAt() {
+      return this.notification ? this.notification.lastFiredAt : null
+    },
+    lastAttemptFailed() {
+      return this.notification ? this.notification.lastAttemptFailed : null
+    },
+    numConsecutiveFailedAttempts() {
+      return this.notification ? this.notification.numConsecutiveFailedAttempts : null
+    }
+  },
+  methods: {
+    // For testing using the onTest event
+    fireTestEventAndFail() {
+      this.fireTestEvent(true)
+    },
+    fireTestEventAndSucceed() {
+      this.fireTestEvent(false)
+    },
+    fireTestEvent(intentionallyFail = false) {
+      this.testing = true
+      this.$axios
+        .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
+        })
+        .finally(() => {
+          this.testing = false
+        })
+    },
+    rapidFireTestEvents() {
+      this.testing = true
+      var numFired = 0
+      var interval = setInterval(() => {
+        this.fireTestEvent()
+        numFired++
+        if (numFired > 25) {
+          this.testing = false
+          clearInterval(interval)
+        }
+      }, 100)
+    },
+    // End testing functions
+    sendTestClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmNotificationTestTrigger,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.sendTest()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    sendTest() {
+      this.sendingTest = true
+      this.$axios
+        .$get(`/api/notifications/${this.notification.id}/test`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
+        })
+        .finally(() => {
+          this.sendingTest = false
+        })
+    },
+    enableNotification() {
+      this.enabling = true
+      const payload = {
+        id: this.notification.id,
+        enabled: true
+      }
+      this.$axios
+        .$patch(`/api/notifications/${this.notification.id}`, payload)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+        })
+        .catch((error) => {
+          console.error('Failed to update notification', error)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
+        })
+        .finally(() => {
+          this.enabling = false
+        })
+    },
+    deleteNotificationClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmDeleteNotification,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteNotification()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteNotification() {
+      this.deleting = true
+      this.$axios
+        .$delete(`/api/notifications/${this.notification.id}`)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error(this.$strings.ToastNotificationDeleteFailed)
+        })
+        .finally(() => {
+          this.deleting = false
+        })
+    },
+    editNotification() {
+      this.$emit('edit', this.notification)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/cards/PodcastFeedSummaryCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <div ref="wrapper" class="w-full p-2 border border-white/10 rounded-sm">
+    <div class="flex">
+      <div class="w-16 min-w-16">
+        <div class="w-full h-16 bg-primary">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        </div>
+        <p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} {{ $strings.HeaderEpisodes }}</p>
+      </div>
+      <div class="grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
+        <p class="mb-1">{{ title }}</p>
+        <p class="text-xs mb-1 text-gray-300">{{ author }}</p>
+        <p class="text-xs mb-2 text-gray-200">{{ description }}</p>
+        <p class="text-xs truncate text-blue-200">
+          {{ $strings.LabelFolder }}: <span class="font-mono">{{ folderPath }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    feed: {
+      type: Object,
+      default: () => {}
+    },
+    libraryFolderPath: String
+  },
+  data() {
+    return {
+      width: 900
+    }
+  },
+  computed: {
+    title() {
+      return this.metadata.title || 'No Title'
+    },
+    image() {
+      return this.metadata.imageUrl
+    },
+    description() {
+      return this.metadata.description || ''
+    },
+    author() {
+      return this.metadata.author || ''
+    },
+    metadata() {
+      return this.feed || {}
+    },
+    numEpisodes() {
+      return this.feed.numEpisodes || 0
+    },
+    folderPath() {
+      if (!this.libraryFolderPath) return ''
+      return `${this.libraryFolderPath}/${this.$sanitizeFilename(this.title)}`
+    },
+    detailsWidth() {
+      return this.width - 85
+    }
+  },
+  methods: {},
+  updated() {
+    this.width = this.$refs.wrapper.clientWidth
+  },
+  mounted() {
+    this.width = this.$refs.wrapper.clientWidth
+  }
+}
+</script>

client/components/cards/SeriesSearchCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <covers-group-cover :name="name" :book-items="bookItems" :width="60" :height="60" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="grow px-2 seriesSearchCardContent h-full">
+      <p class="truncate text-sm">{{ name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    series: {
+      type: Object,
+      default: () => {}
+    },
+    bookItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    name() {
+      return this.series.name
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.seriesSearchCardContent {
+  width: calc(100% - 80px);
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/TagSearchCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-symbols text-2xl text-gray-200">local_offer</span>
+    </div>
+    <div class="grow px-2 tagSearchCardContent h-full">
+      <p class="truncate text-sm">{{ tag }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: String,
+    numItems: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.tagSearchCardContent {
+  width: calc(100% - 40px);
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/content/LibraryItemDetails.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <div v-if="narrators?.length" class="flex py-0.5 mt-4">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
+      </div>
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-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" role="paragraph" class="flex py-0.5">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
+      </div>
+      <div>
+        {{ publishedYear }}
+      </div>
+    </div>
+    <div v-if="publisher" role="paragraph" class="flex py-0.5">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/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="podcastType" role="paragraph" class="flex py-0.5">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/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-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
+      </div>
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-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-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelTags }}</span>
+      </div>
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-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-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/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 || (isPodcast && totalPodcastDuration)" role="paragraph" class="flex py-0.5">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
+      </div>
+      <div>
+        {{ durationPretty }}
+      </div>
+    </div>
+    <div role="paragraph" class="flex py-0.5">
+      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
+        <span class="text-white/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'
+    },
+    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 || ''
+    },
+    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,50 +1,32 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <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">
+    <div class="relative h-9">
+      <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @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="block truncate text-xs">{{ selectedText }}</span>
         </span>
+      </button>
       <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <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-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
-        <span class="material-icons" style="font-size: 1.1rem">close</span>
-      </div>
+      <button v-else type="button" :aria-label="$strings.ButtonClearFilter" 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-symbols" style="font-size: 1.1rem">close</span>
       </button>
+    </div>
 
-    <div 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">
-      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+    <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/5 overflow-auto focus:outline-hidden">
+      <ul class="h-full w-full" role="menu">
         <template v-for="item in items">
-          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+          <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="menuitem" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
               <span class="font-normal ml-3 block truncate">{{ 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">arrow_right</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-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">arrow_left</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <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">No {{ sublist }}</span>
-          </div>
-        </li>
-        <template v-for="item in sublistItems">
-          <li :key="item" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item)">
-            <div class="flex items-center">
-              <span class="font-normal truncate py-2 text-xs">{{ snakeToNormal(item) }}</span>
+
+            <!-- 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-symbols text-base text-yellow-400">check</span>
             </div>
           </li>
         </template>
@@ -56,41 +38,15 @@
 <script>
 export default {
   props: {
-    value: String
+    value: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
-      showMenu: false,
-      sublist: null,
-      items: [
-        {
-          text: 'All',
-          value: 'all'
-        },
-        {
-          text: 'Genre',
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: 'Tag',
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: 'Series',
-          value: 'series',
-          sublist: true
-        }
-      ]
-    }
-  },
-  watch: {
-    showMenu(newVal) {
-      if (!newVal) {
-        if (this.sublist && !this.selectedItemSublist) this.sublist = null
-        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
-      }
+      showMenu: false
     }
   },
   computed: {
@@ -102,30 +58,13 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectedItemSublist() {
-      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
-    },
     selectedText() {
       if (!this.selected) return ''
-      var parts = this.selected.split('.')
-      if (parts.length > 1) {
-        return this.snakeToNormal(parts[1])
-      }
-      var _sel = this.items.find((i) => i.value === this.selected)
-      if (!_sel) return ''
-      return _sel.text
+      const filter = this.items.find((i) => i.value === this.selected)
+      return filter ? filter.text : ''
     },
-    genres() {
-      return this.$store.state.audiobooks.genres
-    },
-    tags() {
-      return this.$store.state.audiobooks.tags
-    },
-    series() {
-      return this.$store.state.audiobooks.series
-    },
-    sublistItems() {
-      return this[this.sublist] || []
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
     }
   },
   methods: {
@@ -134,28 +73,10 @@ export default {
       this.showMenu = false
       this.$nextTick(() => this.$emit('change', 'all'))
     },
-    snakeToNormal(kebab) {
-      if (!kebab) {
-        return 'err'
-      }
-      return String(kebab)
-        .split('_')
-        .map((t) => t.slice(0, 1).toUpperCase() + t.slice(1))
-        .join(' ')
-    },
     clickOutside() {
-      if (!this.selectedItemSublist) this.sublist = null
       this.showMenu = false
     },
-    clickedSublistOption(item) {
-      this.clickedOption({ value: `${this.sublist}.${item}` })
-    },
     clickedOption(option) {
-      if (option.sublist) {
-        this.sublist = option.value
-        return
-      }
-
       var val = option.value
       if (this.selected === val) {
         this.showMenu = false

client/components/controls/GlobalSearch.vue

@@ -1,27 +1,95 @@
 <template>
-  <div class="w-64 ml-8 relative">
-    <ui-text-input v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
-    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
-      <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
+  <div class="">
+    <div class="w-full relative sm:w-80">
+      <form role="search" @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>
+      <button :aria-hidden="!search" 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-symbols" style="font-size: 1.2rem">&#xe8b6;</span>
+        <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
+      </button>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-10 -mt-px 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">
+    <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/5 overflow-auto focus:outline-hidden sm:text-sm globalSearchMenu" @mousedown.stop.prevent>
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
-          <p>Typing...</p>
+          <p>{{ $strings.MessageThinking }}</p>
         </li>
         <li v-else-if="isFetching" class="py-2 px-2">
-          <p>Fetching...</p>
+          <p>{{ $strings.MessageFetching }}</p>
         </li>
-        <li v-else-if="!items.length" class="py-2 px-2">
-          <p>No Results</p>
+        <li v-else-if="!totalResults" class="py-2 px-2">
+          <p>{{ $strings.MessageNoResults }}</p>
         </li>
         <template v-else>
-          <template v-for="item in items">
-            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item)">
-              <template v-if="item.type === 'audiobook'">
-                <cards-audiobook-search-card :audiobook="item.data" />
+          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelBooks }}</p>
+          <template v-for="item in bookResults">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-item-search-card :library-item="item.libraryItem" />
+              </nuxt-link>
+            </li>
           </template>
+
+          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
+          <template v-for="item in podcastResults">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-item-search-card :library-item="item.libraryItem" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="episodeResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelEpisodes }}</p>
+          <template v-for="item in episodeResults">
+            <li :key="item.libraryItem.recentEpisode.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-episode-search-card :episode="item.libraryItem.recentEpisode" :library-item="item.libraryItem" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
+          <template v-for="item in authorResults">
+            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/author/${item.id}`">
+                <cards-author-search-card :author="item" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelSeries }}</p>
+          <template v-for="item in seriesResults">
+            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/series/${item.series.id}`">
+                <cards-series-search-card :series="item.series" :book-items="item.books" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelTags }}</p>
+          <template v-for="item in tagResults">
+            <li :key="`tag.${item.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=tags.${$encode(item.name)}`">
+                <cards-tag-search-card :tag="item.name" :num-items="item.numItems" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="genreResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelGenres }}</p>
+          <template v-for="item in genreResults">
+            <li :key="`genre.${item.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=genres.${$encode(item.name)}`">
+                <cards-genre-search-card :genre="item.name" :num-items="item.numItems" />
+              </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" :num-books="narrator.numBooks" />
+              </nuxt-link>
             </li>
           </template>
         </template>
@@ -40,17 +108,57 @@ export default {
       isTyping: false,
       isFetching: false,
       search: null,
-      items: [],
+      podcastResults: [],
+      episodeResults: [],
+      bookResults: [],
+      authorResults: [],
+      seriesResults: [],
+      tagResults: [],
+      genreResults: [],
+      narratorResults: [],
       searchTimeout: null,
       lastSearch: null
     }
   },
   computed: {
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    totalResults() {
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length + this.episodeResults.length
     }
   },
   methods: {
+    clickOption() {
+      this.clearResults()
+    },
+    submitSearch() {
+      if (!this.search) return
+      var search = this.search
+      this.clearResults()
+      this.$router.push(`/library/${this.currentLibraryId}/search?q=${encodeURIComponent(search)}`)
+    },
+    clearResults() {
+      this.search = null
+      this.lastSearch = null
+      this.podcastResults = []
+      this.episodeResults = []
+      this.bookResults = []
+      this.authorResults = []
+      this.seriesResults = []
+      this.tagResults = []
+      this.genreResults = []
+      this.narratorResults = []
+      this.showMenu = false
+      this.isFetching = false
+      this.isTyping = false
+      clearTimeout(this.searchTimeout)
+      this.$nextTick(() => {
+        if (this.$refs.input) {
+          this.$refs.input.blur()
+        }
+      })
+    },
     focussed() {
       this.isFocused = true
       this.showMenu = true
@@ -60,7 +168,7 @@ export default {
       clearTimeout(this.focusTimeout)
       this.focusTimeout = setTimeout(() => {
         this.showMenu = false
-      }, 200)
+      }, 100)
     },
     async runSearch(value) {
       this.lastSearch = value
@@ -68,18 +176,28 @@ export default {
         return
       }
       this.isFetching = true
-      var results = await this.$axios.$get(`/api/audiobooks?q=${value}`).catch((error) => {
+
+      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${encodeURIComponent(value)}&limit=3`).catch((error) => {
         console.error('Search error', error)
         return []
       })
+
+      // Search was canceled
+      if (!this.isFetching) return
+
+      this.podcastResults = searchResults.podcast || []
+      this.episodeResults = searchResults.episodes || []
+      this.bookResults = searchResults.book || []
+      this.authorResults = searchResults.authors || []
+      this.seriesResults = searchResults.series || []
+      this.tagResults = searchResults.tags || []
+      this.genreResults = searchResults.genres || []
+      this.narratorResults = searchResults.narrators || []
+
       this.isFetching = false
-      this.items = results.map((res) => {
-        return {
-          id: res.id,
-          data: res,
-          type: 'audiobook'
+      if (!this.showMenu) {
+        return
       }
-      })
     },
     inputUpdate(val) {
       clearTimeout(this.searchTimeout)
@@ -90,23 +208,23 @@ export default {
       }
       this.isTyping = true
       this.searchTimeout = setTimeout(() => {
+        // Canceled search
+        if (!this.isTyping) return
+
         this.isTyping = false
         this.runSearch(val)
-      }, 1000)
-    },
-    clickedOption(option) {
-      if (option.type === 'audiobook') {
-        this.$router.push(`/audiobook/${option.data.id}`)
-      }
+      }, 750)
     },
     clickClear() {
-      if (this.search) {
-        this.search = null
-        this.items = []
-        this.showMenu = false
-      }
+      this.clearResults()
     }
   },
   mounted() {}
 }
 </script>
+
+<style scoped>
+.globalSearchMenu {
+  max-height: calc(100vh - 75px);
+}
+</style>

client/components/controls/LibraryFilterSelect.vue

@@ -0,0 +1,557 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <div class="relative h-7">
+      <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @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>
+      </button>
+      <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <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>
+      <button v-else :aria-label="$strings.ButtonClearFilter" 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">
+        <span class="material-symbols" style="font-size: 1.1rem">close</span>
+      </button>
+    </div>
+
+    <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/5 overflow-auto focus:outline-hidden text-sm libraryFilterMenu">
+      <ul v-show="!sublist" class="h-full w-full" role="menu">
+        <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="menuitem" :aria-haspopup="item.sublist ? '' : 'menu'" @click="clickedOption(item)">
+            <div class="flex items-center justify-between">
+              <span class="font-normal ml-3 block truncate text-sm">{{ 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-symbols text-2xl" :aria-label="$strings.LabelMore">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-symbols text-base text-yellow-400">check</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <ul v-show="sublist" class="h-full w-full" role="menu">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="menuitem" @click="sublist = null">
+          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
+            <span class="material-symbols text-2xl">arrow_left</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
+          </div>
+        </li>
+        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="menuitem">
+          <div class="flex items-center justify-center">
+            <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</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="menuitem" @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-symbols text-base text-yellow-400">check</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    isSeries: Boolean
+  },
+  data() {
+    return {
+      showMenu: false,
+      sublist: null
+    }
+  },
+  watch: {
+    showMenu(newVal) {
+      if (newVal) {
+        this.sublist = this.selectedItemSublist
+      }
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    userCanAccessExplicitContent() {
+      return this.$store.getters['user/getUserCanAccessExplicitContent']
+    },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcast() {
+      return this.libraryMediaType === 'podcast'
+    },
+    seriesItems() {
+      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.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
+        },
+        {
+          text: this.$strings.LabelSeriesProgress,
+          value: 'progress',
+          sublist: true
+        }
+      ]
+    },
+    bookItems() {
+      const items = [
+        {
+          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.LabelPublishedDecade,
+          textPlural: this.$strings.LabelPublishedDecades,
+          value: 'publishedDecades',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelProgress,
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelMissing,
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTracks,
+          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',
+          sublist: false
+        },
+        {
+          text: this.$strings.LabelRSSFeedOpen,
+          value: 'feed-open',
+          sublist: false
+        }
+      ]
+
+      if (this.userCanAccessExplicitContent) {
+        items.push({
+          text: this.$strings.LabelExplicit,
+          value: 'explicit',
+          sublist: false
+        })
+      }
+
+      if (this.userIsAdminOrUp) {
+        items.push({
+          text: this.$strings.LabelShareOpen,
+          value: 'share-open',
+          sublist: false
+        })
+      }
+      return items
+    },
+    podcastItems() {
+      const items = [
+        {
+          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.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        },
+        {
+          text: this.$strings.LabelRSSFeedOpen,
+          value: 'feed-open',
+          sublist: false
+        }
+      ]
+
+      if (this.userCanAccessExplicitContent) {
+        items.push({
+          text: this.$strings.LabelExplicit,
+          value: 'explicit',
+          sublist: false
+        })
+      }
+
+      return items
+    },
+    selectItems() {
+      if (this.isSeries) return this.seriesItems
+      if (this.isPodcast) return this.podcastItems
+      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 || ''
+    },
+    selectedText() {
+      if (!this.selected) return ''
+      const parts = this.selected.split('.')
+      const filterName = this.selectItems.find((i) => i.value === parts[0])
+      let 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)
+          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 {
+          filterValue = decoded
+        }
+      }
+      if (filterName && filterValue) {
+        return `${filterName.text}: ${filterValue}`
+      } else if (filterName) {
+        return filterName.text
+      } else if (filterValue) {
+        return filterValue
+      } else {
+        return ''
+      }
+    },
+    genres() {
+      return this.filterData.genres || []
+    },
+    tags() {
+      return this.filterData.tags || []
+    },
+    series() {
+      return this.filterData.series || []
+    },
+    authors() {
+      return this.filterData.authors || []
+    },
+    narrators() {
+      return this.filterData.narrators || []
+    },
+    languages() {
+      return this.filterData.languages || []
+    },
+    publishers() {
+      return this.filterData.publishers || []
+    },
+    publishedDecades() {
+      return this.filterData.publishedDecades || []
+    },
+    progress() {
+      return [
+        {
+          id: 'finished',
+          name: this.$strings.LabelFinished
+        },
+        {
+          id: 'in-progress',
+          name: this.$strings.LabelInProgress
+        },
+        {
+          id: 'not-started',
+          name: this.$strings.LabelNotStarted
+        },
+        {
+          id: 'not-finished',
+          name: this.$strings.LabelNotFinished
+        }
+      ]
+    },
+    tracks() {
+      return [
+        {
+          id: 'none',
+          name: this.$strings.LabelTracksNone
+        },
+        {
+          id: 'single',
+          name: this.$strings.LabelTracksSingleTrack
+        },
+        {
+          id: 'multi',
+          name: this.$strings.LabelTracksMultiTrack
+        }
+      ]
+    },
+    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 [
+        {
+          id: 'asin',
+          name: 'ASIN'
+        },
+        {
+          id: 'isbn',
+          name: 'ISBN'
+        },
+        {
+          id: 'authors',
+          name: this.$strings.LabelAuthor
+        },
+        {
+          id: 'chapters',
+          name: this.$strings.LabelChapters
+        },
+        {
+          id: 'cover',
+          name: this.$strings.LabelCover
+        },
+        {
+          id: 'description',
+          name: this.$strings.LabelDescription
+        },
+        {
+          id: 'genres',
+          name: this.$strings.LabelGenres
+        },
+        {
+          id: 'language',
+          name: this.$strings.LabelLanguage
+        },
+        {
+          id: 'narrators',
+          name: this.$strings.LabelNarrator
+        },
+        {
+          id: 'publishedYear',
+          name: this.$strings.LabelPublishYear
+        },
+        {
+          id: 'publisher',
+          name: this.$strings.LabelPublisher
+        },
+        {
+          id: 'series',
+          name: this.$strings.LabelSeries
+        },
+        {
+          id: 'subtitle',
+          name: this.$strings.LabelSubtitle
+        },
+        {
+          id: 'tags',
+          name: this.$strings.LabelTags
+        }
+      ]
+    },
+    sublistItems() {
+      const sublistItems = (this[this.sublist] || []).map((item) => {
+        if (typeof item === 'string') {
+          return {
+            text: item,
+            value: this.$encode(item)
+          }
+        } else {
+          return {
+            text: item.name,
+            value: this.$encode(item.id)
+          }
+        }
+      })
+      if (this.sublist === 'series') {
+        sublistItems.unshift({
+          text: this.$strings.MessageNoSeries,
+          value: this.$encode('no-series')
+        })
+      }
+      return sublistItems
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
+    }
+  },
+  methods: {
+    clearSelected() {
+      this.selected = 'all'
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', 'all'))
+    },
+    clickOutside() {
+      if (!this.selectedItemSublist) this.sublist = null
+      this.showMenu = false
+    },
+    clickedSublistOption(item) {
+      this.clickedOption({ value: `${this.sublist}.${item}` })
+    },
+    clickedOption(option) {
+      if (option.sublist) {
+        this.sublist = option.value
+        return
+      }
+
+      const val = option.value
+      if (this.selected === val) {
+        this.showMenu = false
+        return
+      }
+      this.selected = val
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.libraryFilterMenu {
+  max-height: calc(100vh - 125px);
+}
+</style>

client/components/controls/LibrarySortSelect.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @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-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+      </span>
+    </button>
+
+    <ul v-show="showMenu" class="librarySortMenu 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/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+      <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="menuitem" @click="clickedOption(item.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate">{{ 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-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    descending: Boolean
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcast() {
+      return this.libraryMediaType === 'podcast'
+    },
+    podcastItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'media.metadata.author'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelNumberOfEpisodes,
+          value: 'media.numTracks'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
+        }
+      ]
+    },
+    bookItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthorFirstLast,
+          value: 'media.metadata.authorName'
+        },
+        {
+          text: this.$strings.LabelAuthorLastFirst,
+          value: 'media.metadata.authorNameLF'
+        },
+        {
+          text: this.$strings.LabelPublishYear,
+          value: 'media.metadata.publishedYear'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelDuration,
+          value: 'media.duration'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        },
+        {
+          text: this.$strings.LabelLibrarySortByProgress,
+          value: 'progress'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
+        }
+      ]
+    },
+    seriesItems() {
+      return [
+        ...this.bookItems,
+        {
+          text: this.$strings.LabelSequence,
+          value: 'sequence'
+        }
+      ]
+    },
+    selectItems() {
+      let items = null
+      if (this.isPodcast) {
+        items = this.podcastItems
+      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
+        items = this.seriesItems
+      } else {
+        items = this.bookItems
+      }
+
+      if (!items.some((i) => i.value === this.selected)) {
+        this.selected = items[0].value
+        this.selectedDesc = !this.defaultsToAsc(items[0].value)
+      }
+
+      return items
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      if (this.selected.startsWith('book.')) _selected = _selected.replace('book.', 'media.metadata.')
+      var _sel = this.selectItems.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      if (this.selected === val) {
+        this.selectedDesc = !this.selectedDesc
+      } else {
+        this.selected = val
+        if (this.defaultsToAsc(val)) this.selectedDesc = false
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    },
+    defaultsToAsc(val) {
+      return val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF' || val == 'sequence'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.librarySortMenu {
+  max-height: calc(100vh - 125px);
+}
+</style>

client/components/controls/OrderSelect.vue

@@ -1,101 +0,0 @@
-<template>
-  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <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 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-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
-      <template v-for="item in items">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :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 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>
-          </span>
-        </li>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-    descending: Boolean
-  },
-  data() {
-    return {
-      showMenu: false,
-      items: [
-        {
-          text: 'Title',
-          value: 'book.title'
-        },
-        {
-          text: 'Author (First Last)',
-          value: 'book.authorFL'
-        },
-        {
-          text: 'Author (Last, First)',
-          value: 'book.authorLF'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Duration',
-          value: 'duration'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        }
-      ]
-    }
-  },
-  computed: {
-    selected: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    selectedDesc: {
-      get() {
-        return this.descending
-      },
-      set(val) {
-        this.$emit('update:descending', val)
-      }
-    },
-    selectedText() {
-      var _selected = this.selected === 'book.author' ? 'book.authorFL' : this.selected
-      var _sel = this.items.find((i) => i.value === _selected)
-      if (!_sel) return ''
-      return _sel.text
-    }
-  },
-  methods: {
-    clickOutside() {
-      this.showMenu = false
-    },
-    clickedOption(val) {
-      if (this.selected === val) {
-        this.selectedDesc = !this.selectedDesc
-      } else {
-        this.selected = val
-      }
-      this.showMenu = false
-      this.$nextTick(() => this.$emit('change', val))
-    }
-  }
-}
-</script>

client/components/controls/PlaybackSpeedControl.vue

@@ -1,30 +1,26 @@
 <template>
-  <div class="relative ml-8" v-click-outside="clickOutside">
-    <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="showMenu = !showMenu">
-      <span class="font-mono uppercase text-gray-200">{{ playbackRate.toFixed(1) }}<span class="text-lg">⨯</span></span>
+  <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
+    <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
+      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRateDisplay }}<span class="text-base">x</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-10 left-0 z-20 h-9 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -114px">
-      <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
+    <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
+      <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
-
-      <div class="w-full h-full no-scroll flex px-7 relative overflow-hidden">
-        <div class="absolute left-0 top-0 h-full w-7 border-r border-black-300 bg-black-300 rounded-l-lg flex items-center justify-center cursor-pointer" :class="rateIndex === 0 ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="leftArrowClick">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_left</span>
-        </div>
-        <div class="overflow-hidden relative" style="width: 220px">
-          <div class="flex items-center h-full absolute top-0 left-0 transition-transform duration-100" :style="{ transform: `translateX(${xPos}px)` }">
+      <div class="flex items-center h-9 relative overflow-hidden rounded-lg" style="width: 220px">
         <template v-for="rate in rates">
-              <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border-r" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
+          <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-xs" :class="value === rate ? 'bg-black-100' : 'hover:bg-black/10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-                  <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
+              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
             </div>
           </div>
         </template>
       </div>
-        </div>
-        <div class="absolute top-0 right-0 h-full w-7 bg-black-300 rounded-r-lg flex items-center justify-center cursor-pointer" :class="rateIndex === rates.length - numVisible ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="rightArrowClick">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_right</span>
+      <div class="w-full py-1 px-1">
+        <div class="flex items-center justify-between">
+          <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
+          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRateDisplay }}<span class="text-2xl">x</span></p>
+          <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
     </div>
@@ -37,13 +33,20 @@ export default {
     value: {
       type: [String, Number],
       default: 1
+    },
+    playbackRateIncrementDecrement: {
+      type: Number,
+      default: 0.1
     }
   },
   data() {
     return {
       showMenu: false,
-      rateIndex: 1,
-      numVisible: 5
+      currentPlaybackRate: 0,
+      MIN_SPEED: 0.5,
+      MAX_SPEED: 10,
+      menuLeft: -96,
+      arrowLeft: 0
     }
   },
   computed: {
@@ -56,30 +59,65 @@ export default {
       }
     },
     rates() {
-      return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      return [0.5, 1, 1.2, 1.5, 2]
     },
-    xPos() {
-      return -1 * this.rateIndex * 44
+    canIncrement() {
+      return this.playbackRate + this.playbackRateIncrementDecrement <= this.MAX_SPEED
+    },
+    canDecrement() {
+      return this.playbackRate - this.playbackRateIncrementDecrement >= this.MIN_SPEED
+    },
+    playbackRateDisplay() {
+      if (this.playbackRateIncrementDecrement == 0.05) return this.playbackRate.toFixed(2)
+      // For 0.1 increment: Only show 2 decimal places if the playback rate is 2 decimals
+      const numDecimals = String(this.playbackRate).split('.')[1]?.length || 0
+      if (numDecimals <= 1) return this.playbackRate.toFixed(1)
+      return this.playbackRate.toFixed(2)
     }
   },
   methods: {
     clickOutside() {
-      this.showMenu = false
+      this.setShowMenu(false)
     },
     set(rate) {
-      var newPlaybackRate = Number(rate)
-      var hasChanged = this.playbackRate !== newPlaybackRate
-      this.playbackRate = newPlaybackRate
-      if (hasChanged) this.$emit('change', newPlaybackRate)
-      this.showMenu = false
+      this.playbackRate = Number(rate)
+      this.$nextTick(() => this.setShowMenu(false))
     },
-    leftArrowClick() {
-      this.rateIndex = Math.max(0, this.rateIndex - 4)
+    increment() {
+      if (this.playbackRate + this.playbackRateIncrementDecrement > this.MAX_SPEED) return
+      var newPlaybackRate = this.playbackRate + this.playbackRateIncrementDecrement
+      this.playbackRate = Number(newPlaybackRate.toFixed(2))
     },
-    rightArrowClick() {
-      this.rateIndex = Math.min(this.rates.length - this.numVisible, this.rateIndex + 4)
+    decrement() {
+      if (this.playbackRate - this.playbackRateIncrementDecrement < this.MIN_SPEED) return
+      var newPlaybackRate = this.playbackRate - this.playbackRateIncrementDecrement
+      this.playbackRate = Number(newPlaybackRate.toFixed(2))
+    },
+    updateMenuPositions() {
+      if (!this.$refs.wrapper) return
+      const boundingBox = this.$refs.wrapper.getBoundingClientRect()
+
+      if (boundingBox.left + 110 > window.innerWidth - 10) {
+        this.menuLeft = window.innerWidth - 230 - boundingBox.left
+
+        this.arrowLeft = Math.abs(this.menuLeft) - 96
+      } else {
+        this.menuLeft = -96
+        this.arrowLeft = 0
       }
     },
-  mounted() {}
+    setShowMenu(val) {
+      if (val) {
+        this.updateMenuPositions()
+        this.currentPlaybackRate = this.playbackRate
+      } else if (this.currentPlaybackRate !== this.playbackRate) {
+        this.$emit('change', this.playbackRate)
+      }
+      this.showMenu = val
+    }
+  },
+  mounted() {
+    this.currentPlaybackRate = this.playbackRate
+  }
 }
 </script>

client/components/controls/SortSelect.vue

@@ -0,0 +1,80 @@
+<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-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @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-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ 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/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+      <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="menuitem" @click="clickedOption(item.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate">{{ 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-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    descending: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      var _sel = this.items.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      if (this.selected === val) {
+        this.selectedDesc = !this.selectedDesc
+      } else {
+        this.selected = val
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>

client/components/controls/VolumeControl.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div class="cursor-pointer" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
-      <span class="material-icons text-3xl">{{ volumeIcon }}</span>
-    </div>
+    <button :aria-label="$strings.LabelVolume" class="text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
+      <span class="material-symbols text-2xl sm:text-3xl">{{ volumeIcon }}</span>
+    </button>
     <transition name="menux">
-      <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
-        <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
-          <div class="bg-gray-100 h-full absolute left-0 top-0 pointer-events-none rounded-full" :style="{ width: volume * trackWidth + 'px' }" />
-          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ left: cursorLeft + 'px', top: '-3px' }" />
+      <div v-show="isOpen" class="volumeMenu h-28 absolute bottom-2 w-6 py-2 bg-bg shadow-xs rounded-lg" style="top: -116px">
+        <div ref="volumeTrack" class="w-1 h-full bg-gray-500 mx-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
+          <div class="bg-gray-100 w-full absolute left-0 bottom-0 pointer-events-none rounded-full" :style="{ height: volume * trackHeight + 'px' }" />
+          <div class="w-2.5 h-2.5 bg-white shadow-xs rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ bottom: cursorBottom + 'px', left: '-3px' }" />
         </div>
       </div>
     </transition>
@@ -24,10 +24,10 @@ export default {
       isOpen: false,
       isDragging: false,
       isHovering: false,
-      posX: 0,
+      posY: 0,
       lastValue: 0.5,
       isMute: false,
-      trackWidth: 112 - 20,
+      trackHeight: 112 - 20,
       openTimeout: null
     }
   },
@@ -37,12 +37,17 @@ export default {
         return this.value
       },
       set(val) {
+        try {
+          localStorage.setItem('volume', val)
+        } catch (error) {
+          console.error('Failed to store volume', err)
+        }
         this.$emit('input', val)
       }
     },
-    cursorLeft() {
-      var left = this.trackWidth * this.volume
-      return left - 3
+    cursorBottom() {
+      var bottom = this.trackHeight * this.volume
+      return bottom - 3
     },
     volumeIcon() {
       if (this.volume <= 0) return 'volume_mute'
@@ -51,11 +56,25 @@ export default {
     }
   },
   methods: {
+    scroll(e) {
+      if (!e || !e.wheelDeltaY) return
+      if (e.wheelDeltaY > 0) {
+        this.volume = Math.min(1, this.volume + 0.1)
+      } else {
+        this.volume = Math.max(0, this.volume - 0.1)
+      }
+    },
     mouseover() {
+      if (!this.isHovering) {
+        window.addEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = true
       this.setOpen()
     },
     mouseleave() {
+      if (this.isHovering) {
+        window.removeEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = false
     },
     setOpen() {
@@ -70,17 +89,10 @@ export default {
       }, 600)
     },
     mousemove(e) {
-      var diff = this.posX - e.x
-      this.posX = e.x
-      var volShift = 0
-      if (diff < 0) {
-        // Volume up
-        volShift = diff / this.trackWidth
-      } else {
-        // volume down
-        volShift = diff / this.trackWidth
-      }
-      var newVol = this.volume - volShift
+      var diff = this.posY - e.y
+      this.posY = e.y
+      var volShift = diff / this.trackHeight
+      var newVol = this.volume + volShift
       newVol = Math.min(Math.max(0, newVol), 1)
       this.volume = newVol
       e.preventDefault()
@@ -94,8 +106,8 @@ export default {
     },
     mousedownTrack(e) {
       this.isDragging = true
-      this.posX = e.x
-      var vol = e.offsetX / this.trackWidth
+      this.posY = e.y
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
       document.body.addEventListener('mousemove', this.mousemove)
@@ -114,8 +126,11 @@ export default {
         this.volume = this.lastValue || 0.5
       }
     },
+    toggleMute() {
+      this.clickVolumeIcon()
+    },
     clickVolumeTrack(e) {
-      var vol = e.offsetX / this.trackWidth
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
     }
@@ -124,6 +139,15 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
+    const storageVolume = localStorage.getItem('volume')
+    if (storageVolume && !isNaN(storageVolume)) {
+      this.volume = parseFloat(storageVolume)
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('mousewheel', this.scroll)
+    document.body.removeEventListener('mousemove', this.mousemove)
+    document.body.removeEventListener('mouseup', this.mouseup)
   }
 }
 </script>

client/components/covers/AuthorImage.vue

@@ -0,0 +1,75 @@
+<template>
+  <div ref="wrapper" :class="`rounded-${rounded}`" class="w-full h-full bg-primary overflow-hidden">
+    <svg v-if="!imagePath" width="140%" height="140%" style="margin-left: -20%; margin-top: -20%; opacity: 0.6" viewBox="0 0 177 266" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill="white" d="M40.7156 165.47C10.2694 150.865 -31.5407 148.629 -38.0532 155.529L63.3191 204.159L76.9443 190.899C66.828 181.394 54.006 171.846 40.7156 165.47Z" stroke="white" stroke-width="4" transform="translate(-2 -1)" />
+      <path d="M-38.0532 155.529C-31.5407 148.629 10.2694 150.865 40.7156 165.47C54.006 171.846 66.828 181.394 76.9443 190.899L95.0391 173.37C80.6681 159.403 64.7526 149.155 51.5747 142.834C21.3549 128.337 -46.2471 114.563 -60.6897 144.67L-71.5489 167.307L44.5864 223.019L63.3191 204.159L-38.0532 155.529Z" fill="white" />
+      <path
+        d="M105.87 29.6508C80.857 17.6515 50.8784 28.1923 38.879 53.2056C26.8797 78.219 37.4205 108.198 62.4338 120.197C87.4472 132.196 117.426 121.656 129.425 96.6422C141.425 71.6288 130.884 41.6502 105.87 29.6508ZM106.789 85.783C112.761 73.3329 107.461 58.2599 95.0112 52.2874C82.5611 46.3148 67.4881 51.6147 61.5156 64.0648C55.543 76.5149 60.8429 91.5879 73.293 97.5604C85.7431 103.533 100.816 98.2331 106.789 85.783Z"
+        fill="white"
+      />
+      <path
+        d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01ZM181.725 108.497C179.624 108.491 177.436 109.326 175.835 110.918L160.415 126.257L191.848 157.856L207.268 142.517C210.554 139.248 210.568 133.954 207.299 130.667L187.685 110.95C186.009 109.264 183.91 108.502 181.725 108.497ZM151.399 135.226L58.2034 227.931L58.1203 259.447L89.6359 259.53L182.831 166.825L151.399 135.226Z"
+        fill="white"
+      />
+      <path d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01Z" fill="white" stroke="white" stroke-width="10px" />
+    </svg>
+    <div v-else class="w-full h-full relative">
+      <div v-if="showCoverBg" class="cover-bg absolute" :style="{ backgroundImage: `url(${imgSrc})` }" />
+      <img ref="img" :src="imgSrc" @load="imageLoaded" class="absolute top-0 left-0 h-full w-full" :class="coverContain ? 'object-contain' : 'object-cover'" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: {
+      type: Object,
+      default: () => {}
+    },
+    rounded: {
+      type: String,
+      default: 'lg'
+    }
+  },
+  data() {
+    return {
+      showCoverBg: false,
+      coverContain: true
+    }
+  },
+  computed: {
+    _author() {
+      return this.author || {}
+    },
+    authorId() {
+      return this._author.id
+    },
+    imagePath() {
+      return this._author.imagePath
+    },
+    updatedAt() {
+      return this._author.updatedAt
+    },
+    imgSrc() {
+      if (!this.imagePath) return null
+      return `${this.$config.routerBasePath}/api/authors/${this.authorId}/image?ts=${this.updatedAt}`
+    }
+  },
+  methods: {
+    imageLoaded() {
+      if (this.$refs.img) {
+        var { naturalWidth, naturalHeight } = this.$refs.img
+        var imgAr = naturalHeight / naturalWidth
+        if (imgAr < 0.5 || imgAr > 2) {
+          this.showCoverBg = true
+        } else {
+          this.showCoverBg = false
+          this.coverContain = false
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/covers/BookCover.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="relative rounded-xs overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+    <div class="w-full h-full relative bg-bg">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary">
+        <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" />
+
+      <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">
+          <widgets-loading-spinner />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
+        <img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
+      </div>
+    </div>
+
+    <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :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 z-10" :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>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    width: {
+      type: Number,
+      default: 120
+    },
+    expandOnClick: Boolean,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      loading: true,
+      imageFailed: false,
+      showCoverBg: false,
+      imageReady: false
+    }
+  },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
+  computed: {
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    height() {
+      return this.width * this.bookCoverAspectRatio
+    },
+    media() {
+      if (!this.libraryItem) return {}
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    title() {
+      return this.mediaMetadata.title || 'No Title'
+    },
+    titleCleaned() {
+      if (this.title.length > 60) {
+        return this.title.slice(0, 57) + '...'
+      }
+      return this.title
+    },
+    authors() {
+      return this.mediaMetadata.authors || []
+    },
+    author() {
+      return this.authors.map((au) => au.name).join(', ')
+    },
+    authorCleaned() {
+      if (this.author.length > 30) {
+        return this.author.slice(0, 27) + '...'
+      }
+      return this.author
+    },
+    placeholderUrl() {
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getPlaceholderCoverSrc']
+    },
+    fullCoverUrl() {
+      if (!this.libraryItem) return null
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
+    },
+    rawCoverUrl() {
+      if (!this.libraryItem) return null
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl, true)
+    },
+    cover() {
+      return this.media.coverPath || this.placeholderUrl
+    },
+    hasCover() {
+      return !!this.media.coverPath
+    },
+    sizeMultiplier() {
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
+    },
+    titleFontSize() {
+      return 0.75 * this.sizeMultiplier
+    },
+    authorFontSize() {
+      return 0.6 * this.sizeMultiplier
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    authorBottom() {
+      return 0.75 * this.sizeMultiplier
+    },
+    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}")`
+      }
+    },
+    imageLoaded() {
+      this.loading = false
+      this.$nextTick(() => {
+        this.imageReady = true
+      })
+
+      if (this.$refs.cover && this.cover !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+          this.$nextTick(this.setCoverBg)
+        } else {
+          this.showCoverBg = false
+        }
+      }
+    },
+    imageError(err) {
+      this.loading = false
+      console.error('ImgError', err)
+      this.imageFailed = true
+    }
+  },
+  mounted() {}
+}
+</script>
+

client/components/covers/CollectionCover.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="relative rounded-xs overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <!-- <div class="absolute top-0 left-0 w-full h-full rounded-xs overflow-hidden z-10">
+      <div class="w-full h-full border border-white/10" />
+    </div> -->
+
+    <div v-if="hasOwnCover" class="w-full h-full relative rounded-xs">
+      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
+        <div class="w-full h-full z-0" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+    </div>
+    <div v-else-if="books.length" class="flex justify-center h-full relative bg-primary/95 rounded-xs">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+
+      <covers-book-cover :library-item="books[0]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover v-if="books.length > 1" :library-item="books[1]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-xs">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+
+      <p class="text-white/60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    hasOwnCover() {
+      return false
+    },
+    fullCoverUrl() {
+      return null
+    },
+    books() {
+      return this.bookItems || []
+    }
+  },
+  methods: {
+    imageError() {},
+    imageLoaded() {}
+  },
+  mounted() {}
+}
+</script>

client/components/covers/GroupCover.vue

@@ -0,0 +1,213 @@
+<template>
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
+    <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    name: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      noValidCovers: false,
+      coverDiv: null,
+      isHovering: false,
+      coverWrapperEl: null,
+      coverImageEls: [],
+      coverWidth: 0,
+      offsetIncrement: 0,
+      isFannedOut: false,
+      isDetached: false,
+      isAttaching: false,
+      isInit: false
+    }
+  },
+  watch: {
+    bookItems: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          // ensure wrapper is initialized
+          this.$nextTick(this.init)
+        }
+      }
+    },
+    width: {
+      handler(newVal) {
+        if (newVal) {
+          this.isInit = false
+          this.$nextTick(this.init)
+        }
+      }
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    router() {
+      return this.$router || this.$nuxt.$router
+    }
+  },
+  methods: {
+    getCoverUrl(book) {
+      return this.store.getters['globals/getLibraryItemCoverSrc'](book, '')
+    },
+    async buildCoverImg(coverData, bgCoverWidth, offsetLeft, zIndex, forceCoverBg = false) {
+      var src = coverData.coverUrl
+
+      var showCoverBg =
+        forceCoverBg ||
+        (await new Promise((resolve) => {
+          var image = new Image()
+
+          image.onload = () => {
+            var { naturalWidth, naturalHeight } = image
+            var aspectRatio = naturalHeight / naturalWidth
+            var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+            // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+            if (arDiff > 0.15) {
+              resolve(true)
+            } else {
+              resolve(false)
+            }
+          }
+          image.onerror = (err) => {
+            console.error(err)
+            resolve(false)
+          }
+          image.src = src
+        }))
+
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = bgCoverWidth + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.style.zIndex = zIndex
+      imgdiv.dataset.audiobookId = coverData.id
+      imgdiv.dataset.volumeNumber = coverData.volumeNumber || ''
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      // imgdiv.style.transform = 'skew(0deg, 15deg)'
+
+      if (showCoverBg) {
+        var coverbgwrapper = document.createElement('div')
+        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary'
+
+        var coverbg = document.createElement('div')
+        coverbg.className = 'absolute cover-bg'
+        coverbg.style.backgroundImage = `url("${src}")`
+
+        coverbgwrapper.appendChild(coverbg)
+        imgdiv.appendChild(coverbgwrapper)
+      }
+
+      var img = document.createElement('img')
+      img.src = src
+      img.alt = `${this.name}, ${this.$strings.LabelCover}`
+      img.ariaHidden = true
+      img.className = 'absolute top-0 left-0 w-full h-full'
+      img.style.objectFit = showCoverBg ? 'contain' : 'cover'
+
+      imgdiv.appendChild(img)
+      return imgdiv
+    },
+    createSeriesNameCover(offsetLeft) {
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = this.height / this.bookCoverAspectRatio + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform flex items-center justify-center'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      imgdiv.style.backgroundColor = '#111'
+
+      var innerP = document.createElement('p')
+      innerP.textContent = this.name
+      innerP.className = 'text-sm text-white'
+      imgdiv.appendChild(innerP)
+
+      return imgdiv
+    },
+    async init() {
+      if (this.isInit) return
+      this.isInit = true
+
+      if (this.coverDiv) {
+        this.coverDiv.remove()
+        this.coverDiv = null
+      }
+      var validCovers = this.bookItems
+        .map((bookItem) => {
+          return {
+            id: bookItem.id,
+            coverUrl: this.getCoverUrl(bookItem)
+          }
+        })
+        .filter((b) => b.coverUrl !== '')
+      if (!validCovers.length) {
+        this.noValidCovers = true
+        return
+      }
+      this.noValidCovers = false
+
+      validCovers = validCovers.slice(0, 10)
+
+      var coverWidth = this.width
+      var widthPer = this.width
+      if (validCovers.length > 1) {
+        coverWidth = this.height / this.bookCoverAspectRatio
+        widthPer = (this.width - coverWidth) / (validCovers.length - 1)
+      }
+      this.coverWidth = coverWidth
+      this.offsetIncrement = widthPer
+
+      var outerdiv = document.createElement('div')
+      outerdiv.id = `group-cover-${this.id}`
+      this.coverWrapperEl = outerdiv
+      outerdiv.className = 'w-full h-full relative box-shadow-book'
+
+      var coverImageEls = []
+      var offsetLeft = 0
+      for (let i = 0; i < validCovers.length; i++) {
+        offsetLeft = widthPer * i
+        var zIndex = validCovers.length - i
+        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, zIndex, validCovers.length === 1)
+        outerdiv.appendChild(img)
+        coverImageEls.push(img)
+      }
+
+      this.coverImageEls = coverImageEls
+
+      if (this.$refs.wrapper) {
+        this.coverDiv = outerdiv
+        this.$refs.wrapper.appendChild(outerdiv)
+      }
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    if (this.coverWrapperEl) this.coverWrapperEl.remove()
+    if (this.coverImageEls && this.coverImageEls.length) {
+      this.coverImageEls.forEach((el) => el.remove())
+    }
+    if (this.coverDiv) this.coverDiv.remove()
+  }
+}
+</script>

client/components/covers/PlaylistCover.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative rounded-xs overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <div v-if="items.length" class="flex flex-wrap justify-center h-full relative bg-primary/95 rounded-xs">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+      <covers-book-cover v-for="(li, index) in libraryItemCovers" :key="index" :library-item="li" :width="itemCoverWidth" :book-cover-aspect-ratio="1" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-xs">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    sizeMultiplier() {
+      return this.width / (120 * 1.6 * 2)
+    },
+    itemCoverWidth() {
+      if (this.libraryItemCovers.length === 1) return this.width
+      return this.width / 2
+    },
+    libraryItemCovers() {
+      if (!this.items.length) return []
+      if (this.items.length === 1) return [this.items[0].libraryItem]
+
+      const covers = []
+      for (let i = 0; i < 4; i++) {
+        let index = i % this.items.length
+        if (this.items.length === 2 && i >= 2) index = (i + 1) % 2 // for playlists with 2 items show covers in checker pattern
+
+        covers.push(this.items[index].libraryItem)
+      }
+      return covers
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/covers/PreviewCover.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="relative rounded-xs" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+    <div class="w-full h-full relative overflow-hidden">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+
+      <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-xs rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
+        <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
+      </a>
+    </div>
+
+    <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>
+      </div>
+    </div>
+
+    <p v-if="!imageFailed && showResolution && resolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: String,
+    width: {
+      type: Number,
+      default: 120
+    },
+    showOpenNewTab: Boolean,
+    bookCoverAspectRatio: Number,
+    showResolution: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false,
+      isHovering: false,
+      naturalHeight: 0,
+      naturalWidth: 0
+    }
+  },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
+  computed: {
+    cover() {
+      return this.src
+    },
+    sizeMultiplier() {
+      return this.width / 120
+    },
+    invalidCoverFontSize() {
+      return Math.max(this.sizeMultiplier * 0.8, 0.5)
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    resolution() {
+      if (!this.naturalWidth || !this.naturalHeight) return null
+      return `${this.naturalWidth}×${this.naturalHeight}px`
+    },
+    placeholderUrl() {
+      const store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getPlaceholderCoverSrc']
+    }
+  },
+  methods: {
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.src}")`
+      }
+    },
+    imageLoaded() {
+      if (this.$refs.cover && this.src !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        this.naturalHeight = naturalHeight
+        this.naturalWidth = naturalWidth
+
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+          this.$nextTick(this.setCoverBg)
+        } else {
+          this.showCoverBg = false
+        }
+      }
+    },
+    imageError(err) {
+      console.error('ImgError', err)
+      this.imageFailed = true
+    }
+  },
+  mounted() {}
+}
+</script>