Version bump 2.2.2

Merge pull request #1110 from keaganhilliard/tone-json
Added tone json file support
2025-12-31 11:38:47 -05:00 · 2022-11-05 15:06:10 -05:00 · 2022-11-05 13:13:49 -05:00 · 2022-11-05 13:13:52 -05:00 · 2022-11-05 07:36:58 -05:00 · 2022-11-05 07:36:53 -05:00
171 changed files with 5904 additions and 2454 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -11,7 +11,6 @@ test/
 /client/.nuxt/
 /client/dist/
 /dist/
-library/

 sw.*
 .DS_STORE
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "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
+}
--- a/3
+++ b/3
@@ -6,7 +6,9 @@ RUN npm ci && npm cache clean --force
 RUN npm run generate

 ### STAGE 1: Build server ###
+FROM sandreas/tone:v0.1.2 AS tone
 FROM node:16-alpine
+
 ENV NODE_ENV=production
 RUN apk update && \
    apk add --no-cache --update \
@@ -14,6 +16,7 @@ RUN apk update && \
    tzdata \
    ffmpeg

+COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
 COPY index.js package* /
 COPY server server
--- a/build/debian/DEBIAN/preinst
+++ b/build/debian/DEBIAN/preinst
@@ -8,8 +8,6 @@ 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"
@@ -51,7 +49,8 @@ add_group() {
 install_ffmpeg() {
  echo "Starting FFMPEG Install"

-  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz"
+  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz --output-document=ffmpeg-git-amd64-static.tar.xz"
+  WGET_TONE="wget https://github.com/sandreas/tone/releases/download/v0.1.2/tone-0.1.2-linux-x64.tar.gz --output-document=tone-0.1.2-linux-x64.tar.gz"

  if ! cd "$FFMPEG_INSTALL_DIR"; then
    echo "Creating ffmpeg install dir at $FFMPEG_INSTALL_DIR"
@@ -64,13 +63,26 @@ install_ffmpeg() {
  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
  rm ffmpeg-git-amd64-static.tar.xz

-  echo "Good to go on Ffmpeg... hopefully"
+  # Temp downloading tone library to the ffmpeg dir
+  echo "Getting tone.."
+  $WGET_TONE
+  tar xvf tone-0.1.2-linux-x64.tar.gz --strip-components=1
+  rm tone-0.1.2-linux-x64.tar.gz
+
+  echo "Good to go on Ffmpeg (& tone)... hopefully"
 }

 setup_config() {
  if [ -f "$CONFIG_PATH" ]; then
    echo "Existing config found."
    cat $CONFIG_PATH
+
+    # TONE_PATH variable added in 2.1.6, if it doesnt exist then add it
+    if ! grep -q "TONE_PATH" "$CONFIG_PATH"; then
+      echo "Adding TONE_PATH to existing config"
+      echo "TONE_PATH=$FFMPEG_INSTALL_DIR/tone" >> "$CONFIG_PATH"
+    fi
+
  else

    if [ ! -d "$DEFAULT_DATA_DIR" ]; then
@@ -83,11 +95,12 @@ setup_config() {
    echo "Creating default config."

    config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
-  CONFIG_PATH=$DEFAULT_DATA_DIR/config
-  FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
-  FFPROBE_PATH=/usr/lib/audiobookshelf-ffmpeg/ffprobe
-  PORT=$DEFAULT_PORT
-  HOST=$DEFAULT_HOST"
+CONFIG_PATH=$DEFAULT_DATA_DIR/config
+FFMPEG_PATH=$FFMPEG_INSTALL_DIR/ffmpeg
+FFPROBE_PATH=$FFMPEG_INSTALL_DIR/ffprobe
+TONE_PATH=$FFMPEG_INSTALL_DIR/tone
+PORT=$DEFAULT_PORT
+HOST=$DEFAULT_HOST"

    echo "$config_text"

--- a/build/debian/lib/systemd/system/audiobookshelf.service
+++ b/build/debian/lib/systemd/system/audiobookshelf.service
@@ -10,6 +10,7 @@ ExecStart=/usr/share/audiobookshelf/audiobookshelf
 ExecReload=/bin/kill -HUP $MAINPID
 Restart=always
 User=audiobookshelf
+Group=audiobookshelf
 PermissionsStartOnly=true

 [Install]
--- a/client/assets/absicons.css
+++ b/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";
+}
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -2,6 +2,7 @@
@import './transitions.css';
@import './draggable.css';
@import './defaultStyles.css';
+@import './absicons.css';

 :root {
  --bookshelf-texture-img: url(/textures/wood_default.jpg);
--- a/client/assets/fonts.css
+++ b/client/assets/fonts.css
@@ -2,14 +2,14 @@
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
-  src: url(/fonts/MaterialIcons.woff2) format('woff2');
+  src: url(~static/fonts/MaterialIcons.woff2) format('woff2');
 }

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
-  src: url(/fonts/MaterialIconsOutlined.woff2) format('woff2');
+  src: url(~static/fonts/MaterialIconsOutlined.woff2) format('woff2');
 }

 .material-icons {
@@ -54,7 +54,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
  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;
 }

@@ -64,7 +64,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
  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;
 }

@@ -74,7 +74,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  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;
 }

@@ -84,7 +84,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  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;
 }

@@ -94,7 +94,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
  unicode-range: U+1F00-1FFF;
 }

@@ -104,7 +104,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
  unicode-range: U+0370-03FF;
 }

@@ -114,7 +114,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  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;
 }

@@ -124,7 +124,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  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;
 }

@@ -134,7 +134,7 @@
  font-style: normal;
  font-weight: 300;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  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;
 }

@@ -144,7 +144,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  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;
 }

@@ -154,7 +154,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  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;
 }

@@ -164,7 +164,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
  unicode-range: U+1F00-1FFF;
 }

@@ -174,7 +174,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
  unicode-range: U+0370-03FF;
 }

@@ -184,7 +184,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  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;
 }

@@ -194,7 +194,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  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;
 }

@@ -204,7 +204,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  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;
 }

@@ -214,7 +214,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  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;
 }

@@ -224,7 +224,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  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;
 }

@@ -234,7 +234,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
  unicode-range: U+1F00-1FFF;
 }

@@ -244,7 +244,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
  unicode-range: U+0370-03FF;
 }

@@ -254,7 +254,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  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;
 }

@@ -264,7 +264,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  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;
 }

@@ -274,7 +274,7 @@
  font-style: normal;
  font-weight: 600;
  font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  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;
 }

@@ -284,7 +284,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  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;
 }

@@ -294,7 +294,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }

@@ -304,7 +304,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
  unicode-range: U+1F00-1FFF;
 }

@@ -314,7 +314,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
  unicode-range: U+0370-03FF;
 }

@@ -324,7 +324,7 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  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;
 }

@@ -334,6 +334,6 @@
  font-style: normal;
  font-weight: 400;
  font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  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;
 }
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -3,11 +3,11 @@
    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
      <div class="flex h-full items-center">
        <nuxt-link to="/">
-          <img src="/icon.svg" class="w-8 min-w-8 h-8 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
+          <img src="~static/icon.svg" class="w-8 min-w-8 h-8 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
        </nuxt-link>

        <nuxt-link to="/">
-          <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
+          <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
        </nuxt-link>

        <ui-libraries-dropdown class="mr-2" />
@@ -15,7 +15,7 @@
        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
        <div class="flex-grow" />

-        <span v-if="showExperimentalFeatures" class="material-icons text-2xl md:text-4xl text-warning pr-0 sm:pr-2 md:pr-4">logo_dev</span>
+        <widgets-notification-widget class="hidden md:block" />

        <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
          <span class="material-icons-outlined text-warning text-opacity-50"> cast </span>
@@ -49,6 +49,9 @@
      <div v-show="numLibraryItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
        <h1 class="text-2xl px-4">{{ numLibraryItemsSelected }} Selected</h1>
        <div class="flex-grow" />
+        <ui-tooltip v-if="userIsAdminOrUp && !isPodcastLibrary" text="Quick Match Selected" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
+        </ui-tooltip>
        <ui-tooltip v-if="!isPodcastLibrary" :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
        </ui-tooltip>
@@ -150,7 +153,7 @@ export default {
    cancelSelectionMode() {
      if (this.processingBatchDelete) return
      this.$store.commit('setSelectedLibraryItems', [])
-      this.$eventBus.$emit('bookshelf-clear-selection')
+      this.$eventBus.$emit('bookshelf_clear_selection')
      this.isAllSelected = false
    },
    toggleBatchRead() {
@@ -169,7 +172,7 @@ export default {
          this.$toast.success('Batch update success!')
          this.$store.commit('setProcessingBatch', false)
          this.$store.commit('setSelectedLibraryItems', [])
-          this.$eventBus.$emit('bookshelf-clear-selection')
+          this.$eventBus.$emit('bookshelf_clear_selection')
        })
        .catch((error) => {
          this.$toast.error('Batch update failed')
@@ -192,7 +195,7 @@ export default {
            this.processingBatchDelete = false
            this.$store.commit('setProcessingBatch', false)
            this.$store.commit('setSelectedLibraryItems', [])
-            this.$eventBus.$emit('bookshelf-clear-selection')
+            this.$eventBus.$emit('bookshelf_clear_selection')
          })
          .catch((error) => {
            this.$toast.error('Batch delete failed')
@@ -210,6 +213,9 @@ export default {
    },
    setBookshelfTotalEntities(totalEntities) {
      this.totalEntities = totalEntities
+    },
+    batchAutoMatchClick() {
+      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
    }
  },
  mounted() {
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -16,10 +16,10 @@
    <!-- Alternate plain view -->
    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
      <template v-for="(shelf, index) in shelves">
-        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
        </widgets-item-slider>
-        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
        </widgets-episode-slider>
        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
@@ -33,7 +33,7 @@
    <!-- Regular bookshelf view -->
    <div v-else class="w-full">
      <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening'" @selectEntity="(payload) => selectEntity(payload, index)" />
      </template>
    </div>
  </div>
@@ -54,7 +54,8 @@ export default {
      keywordFilterTimeout: null,
      scannerParseSubtitle: false,
      wrapperClientWidth: 0,
-      shelves: []
+      shelves: [],
+      lastItemIndexSelected: -1
    }
  },
  computed: {
@@ -71,7 +72,7 @@ export default {
      return this.$store.getters['libraries/getCurrentLibraryName']
    },
    isAlternativeBookshelfView() {
-      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.TITLES
+      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.DETAIL
    },
    bookCoverWidth() {
      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
@@ -87,9 +88,64 @@ export default {
    sizeMultiplier() {
      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
      return this.bookCoverWidth / baseSize
+    },
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems || []
    }
  },
  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.selectedLibraryItems.includes(entity.id)) {
+        this.lastItemIndexSelected = indexOf
+      } else {
+        this.lastItemIndexSelected = -1
+      }
+
+      if (shiftKey && lastLastItemIndexSelected >= 0) {
+        var loopStart = indexOf
+        var loopEnd = lastLastItemIndexSelected
+        if (indexOf > lastLastItemIndexSelected) {
+          loopStart = lastLastItemIndexSelected
+          loopEnd = indexOf
+        }
+
+        const flattenedEntitiesArray = []
+        this.shelves.map((s) => flattenedEntitiesArray.push(...s.entities))
+
+        var 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.selectedLibraryItems.includes(thisEntity.id)) {
+              isSelecting = true
+              break
+            }
+          }
+        }
+        if (isSelecting) this.lastItemIndexSelected = indexOf
+
+        for (let i = loopStart; i <= loopEnd; i++) {
+          const thisEntity = flattenedEntitiesArray[i]
+          if (thisEntity) {
+            this.$store.commit('setLibraryItemSelected', { libraryItemId: thisEntity.id, selected: isSelecting })
+          } else {
+            console.error('Invalid entity index', i)
+          }
+        }
+      } else {
+        this.$store.commit('toggleLibraryItemSelected', entity.id)
+      }
+
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', entity)
+      })
+    },
    async init() {
      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0

@@ -110,6 +166,12 @@ export default {
          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() {
@@ -175,7 +237,6 @@ export default {
      }
      this.shelves = shelves
    },
-    settingsUpdated(settings) {},
    scan() {
      this.$store
        .dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
@@ -187,6 +248,15 @@ export default {
          this.$toast.error('Failed to start scan')
        })
    },
+    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.removeItemsFromContinueListening(mediaProgressToHide)
+      }
+    },
    libraryItemAdded(libraryItem) {
      console.log('libraryItem added', libraryItem)
      // TODO: Check if libraryItem would be on this shelf
@@ -244,6 +314,45 @@ export default {
        this.libraryItemUpdated(li)
      })
    },
+    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
+          })
+        }
+      })
+    },
+    removeItemsFromContinueListening(mediaProgressItems) {
+      const continueListeningShelf = this.shelves.find((s) => s.id === 'continue-listening')
+      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
+          })
+        }
+      }
+      // this.shelves.forEach((shelf) => {
+      //   if (shelf.id == 'continue-listening') {
+      //     if (shelf.type == 'book') {
+      //       // Filter out books from continue listening shelf
+      //       shelf.entities = shelf.entities.filter((ent) => {
+      //         if (mediaProgressItems.some(mp => mp.libraryItemId === ent.id)) return false
+      //         return true
+      //       })
+      //     }
+      //   }
+      // })
+    },
    authorUpdated(author) {
      this.shelves.forEach((shelf) => {
        if (shelf.type == 'authors') {
@@ -267,9 +376,8 @@ export default {
      })
    },
    initListeners() {
-      this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
-
      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)
@@ -285,6 +393,7 @@ export default {
      this.$store.commit('user/removeSettingsListener', 'bookshelf')

      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)
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@@ -4,12 +4,26 @@
      <div class="w-full h-full pt-6">
        <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
          </template>
        </div>
        <div v-if="shelf.type === 'episode'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
+            <cards-lazy-book-card
+              :key="entity.recentEpisode.id"
+              :ref="`shelf-episode-${entity.recentEpisode.id}`"
+              :index="index"
+              :width="bookCoverWidth"
+              :height="bookCoverHeight"
+              :book-cover-aspect-ratio="bookCoverAspectRatio"
+              :book-mount="entity"
+              :continue-listening-shelf="continueListeningShelf"
+              class="relative mx-2"
+              @hook:updated="updatedBookCard"
+              @select="selectItem"
+              @editPodcast="editItem"
+              @edit="editEpisode"
+            />
          </template>
        </div>
        <div v-if="shelf.type === 'series'" class="flex items-center">
@@ -57,7 +71,8 @@ export default {
    },
    sizeMultiplier: Number,
    bookCoverWidth: Number,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    continueListeningShelf: Boolean
  },
  data() {
    return {
@@ -123,11 +138,8 @@ export default {
        })
      }
    },
-    selectItem(libraryItem) {
-      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
-      this.$nextTick(() => {
-        this.$eventBus.$emit('item-selected', libraryItem)
-      })
+    selectItem(payload) {
+      this.$emit('selectEntity', payload)
    },
    itemSelectedEvt() {
      this.updateSelectionMode(this.isSelectionMode)
@@ -176,11 +188,11 @@ export default {
    }
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    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('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -1,16 +1,16 @@
 <template>
  <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="flex-grow h-full flex justify-center items-center" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Home</p>
      </nuxt-link>
-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Library</p>
      </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Series</p>
      </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p class="text-sm">Collections</p>
      </nuxt-link>
      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
@@ -18,13 +18,10 @@
      </nuxt-link>
    </div>
    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
-      <template v-if="page !== 'search' && page !== 'podcast-search' && !isHome">
+      <template v-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
        <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
        <div v-else class="items-center hidden md:flex w-full">
-          <div @click="seriesBackArrow" class="rounded-full h-9 w-9 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
-            <span class="material-icons text-2xl text-white">west</span>
-          </div>
-          <p class="pl-4 font-book text-lg">
+          <p class="pl-2 font-book text-lg">
            {{ seriesName }}
          </p>
          <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
@@ -40,29 +37,20 @@
                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
              </svg>
            </div>
-            <span class="pl-2"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span></ui-btn
-          >
+            <span class="pl-2"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span>
+          </ui-btn>
        </div>
        <div class="flex-grow hidden sm:inline-block" />

-        <ui-checkbox v-show="showSortFilters && !isPodcast" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
-        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
-        <controls-order-select v-show="showSortFilters" 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" />
-        <!-- <div v-show="showSortFilters" class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
-          <div class="h-full px-2 text-white flex items-center rounded-l-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'grid')">
-            <span class="material-icons" style="font-size: 1.4rem">view_module</span>
-          </div>
-          <div class="h-full px-2 text-white flex items-center rounded-r-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="!isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'list')">
-            <span class="material-icons" style="font-size: 1.4rem">view_list</span>
-          </div>
-        </div> -->
+        <ui-checkbox v-if="isLibraryPage && !isPodcastLibrary" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
+        <controls-library-filter-select v-if="isLibraryPage" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+        <controls-library-sort-select v-if="isLibraryPage" 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" />
+        <controls-library-filter-select v-if="isSeriesPage" v-model="seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
+        <controls-sort-select v-if="isSeriesPage" v-model="seriesSortBy" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />

        <ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
      </template>
      <template v-else-if="page === 'search'">
-        <div @click="searchBackArrow" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
-          <span class="material-icons text-3xl text-white">west</span>
-        </div>
        <div class="flex-grow" />
        <p>Search results for "{{ searchQuery }}"</p>
        <div class="flex-grow" />
@@ -85,22 +73,37 @@ export default {
      default: () => null
    },
    searchQuery: String,
-    viewMode: String,
    authors: {
      type: Array,
      default: () => []
-    },
+    }
  },
  data() {
    return {
      settings: {},
      hasInit: false,
      totalEntities: 0,
-      keywordFilter: null,
-      keywordTimeout: null,
      processingSeries: false,
      processingIssues: false,
-      processingAuthors: false
+      processingAuthors: false,
+      seriesSortItems: [
+        {
+          text: 'Name',
+          value: 'name'
+        },
+        {
+          text: 'Number of Books',
+          value: 'numBooks'
+        },
+        {
+          text: 'Date Added',
+          value: 'addedAt'
+        },
+        {
+          text: 'Total Duration',
+          value: 'totalDuration'
+        }
+      ]
    }
  },
  computed: {
@@ -113,28 +116,6 @@ export default {
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
    },
-    isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
-    },
-    isGridMode() {
-      return this.viewMode === 'grid'
-    },
-    showSortFilters() {
-      return this.page === ''
-    },
-    numShowing() {
-      return this.totalEntities
-    },
-    entityName() {
-      if (this.isPodcast) return 'Podcasts'
-      if (!this.page) return 'Books'
-      if (this.page === 'series') return 'Series'
-      if (this.page === 'collections') return 'Collections'
-      return ''
-    },
-    paramId() {
-      return this.$route.params ? this.$route.params.id || '' : ''
-    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
@@ -144,14 +125,30 @@ export default {
    isPodcastLibrary() {
      return this.currentLibraryMediaType === 'podcast'
    },
-    homePage() {
+    isLibraryPage() {
+      return this.page === ''
+    },
+    isSeriesPage() {
+      return this.page === 'series'
+    },
+    isCollectionsPage() {
+      return this.page === 'collections'
+    },
+    isHomePage() {
      return this.$route.name === 'library-library'
    },
-    libraryBookshelfPage() {
-      return this.$route.name === 'library-library-bookshelf-id'
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
    },
-    showLibrary() {
-      return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
+    numShowing() {
+      return this.totalEntities
+    },
+    entityName() {
+      if (this.isPodcastLibrary) return 'Podcasts'
+      if (!this.page) return 'Books'
+      if (this.isSeriesPage) return 'Series'
+      if (this.isCollectionsPage) return 'Collections'
+      return ''
    },
    seriesName() {
      return this.selectedSeries ? this.selectedSeries.name : null
@@ -172,8 +169,29 @@ export default {
    isIssuesFilter() {
      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
    },
-    isPodcastSearchPage() {
-      return this.$route.name === 'library-library-podcast-search'
+    seriesSortBy: {
+      get() {
+        return this.$store.state.libraries.seriesSortBy
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortBy', val)
+      }
+    },
+    seriesSortDesc: {
+      get() {
+        return this.$store.state.libraries.seriesSortDesc
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortDesc', val)
+      }
+    },
+    seriesFilterBy: {
+      get() {
+        return this.$store.state.libraries.seriesFilterBy
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesFilterBy', val)
+      }
    }
  },
  methods: {
@@ -247,18 +265,18 @@ export default {
          this.processingSeries = false
        })
    },
-    searchBackArrow() {
-      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
-    },
-    seriesBackArrow() {
-      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/series`)
-    },
    updateOrder() {
      this.saveSettings()
    },
    updateFilter() {
      this.saveSettings()
    },
+    updateSeriesSort() {
+      this.$eventBus.$emit('series-sort-updated')
+    },
+    updateSeriesFilter() {
+      this.$eventBus.$emit('series-sort-updated')
+    },
    updateCollapseSeries() {
      this.saveSettings()
    },
@@ -275,15 +293,6 @@ export default {
    },
    setBookshelfTotalEntities(totalEntities) {
      this.totalEntities = totalEntities
-    },
-    keywordFilterInput() {
-      clearTimeout(this.keywordTimeout)
-      this.keywordTimeout = setTimeout(() => {
-        this.keywordUpdated(this.keywordFilter)
-      }, 1000)
-    },
-    keywordUpdated() {
-      this.$eventBus.$emit('bookshelf-keyword-filter', this.keywordFilter)
    }
  },
  mounted() {
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -82,6 +82,11 @@ export default {
          id: 'config-log',
          title: 'Logs',
          path: '/config/log'
+        },
+        {
+          id: 'config-notifications',
+          title: 'Notifications',
+          path: '/config/notifications'
        }
      ]

--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -61,7 +61,8 @@ export default {
      keywordFilter: null,
      currScrollTop: 0,
      resizeTimeout: null,
-      mountWindowWidth: 0
+      mountWindowWidth: 0,
+      lastItemIndexSelected: -1
    }
  },
  watch: {
@@ -97,6 +98,15 @@ export default {
      if (!this.page) return 'books'
      return this.page
    },
+    seriesSortBy() {
+      return this.$store.state.libraries.seriesSortBy
+    },
+    seriesSortDesc() {
+      return this.$store.state.libraries.seriesSortDesc
+    },
+    seriesFilterBy() {
+      return this.$store.state.libraries.seriesFilterBy
+    },
    orderBy() {
      return this.$store.getters['user/getUserSetting']('orderBy')
    },
@@ -122,7 +132,7 @@ export default {
      return this.$store.getters['getBookshelfView']
    },
    isAlternativeBookshelfView() {
-      return this.bookshelfView === this.$constants.BookshelfView.TITLES
+      return this.bookshelfView === this.$constants.BookshelfView.DETAIL
    },
    hasFilter() {
      return this.filterBy && this.filterBy !== 'all'
@@ -212,9 +222,55 @@ export default {
      this.updateBookSelectionMode(false)
      this.isSelectionMode = false
    },
-    selectEntity(entity) {
+    selectEntity(entity, shiftKey) {
      if (this.entityName === 'books' || this.entityName === 'series-books') {
-        this.$store.commit('toggleLibraryItemSelected', entity.id)
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === entity.id)
+        const lastLastItemIndexSelected = this.lastItemIndexSelected
+        if (!this.selectedLibraryItems.includes(entity.id)) {
+          this.lastItemIndexSelected = indexOf
+        } else {
+          this.lastItemIndexSelected = -1
+        }
+
+        if (shiftKey && lastLastItemIndexSelected >= 0) {
+          var loopStart = indexOf
+          var loopEnd = lastLastItemIndexSelected
+          if (indexOf > lastLastItemIndexSelected) {
+            loopStart = lastLastItemIndexSelected
+            loopEnd = indexOf
+          }
+
+          var 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.selectedLibraryItems.includes(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
+              this.$store.commit('setLibraryItemSelected', { libraryItemId: thisEntity.id, selected: isSelecting })
+            } else {
+              console.error('Invalid entity index', i)
+            }
+          }
+        } else {
+          this.$store.commit('toggleLibraryItemSelected', entity.id)
+        }

        var newIsSelectionMode = !!this.selectedLibraryItems.length
        if (this.isSelectionMode !== newIsSelectionMode) {
@@ -229,6 +285,9 @@ export default {
          this.entityComponentRefs[key].setSelectionMode(isSelectionMode)
        }
      }
+      if (!isSelectionMode) {
+        this.lastItemIndexSelected = -1
+      }
    },
    async fetchEntites(page = 0) {
      var startIndex = page * this.booksPerFetch
@@ -367,12 +426,16 @@ export default {
      this.$nextTick(this.remountEntities)
    },
    buildSearchParams() {
-      if (this.page === 'search' || this.page === 'series' || this.page === 'collections') {
+      if (this.page === 'search' || this.page === 'collections') {
        return ''
      }

      let searchParams = new URLSearchParams()
-      if (this.page === 'series-books') {
+      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)}`)
      } else {
        if (this.filterBy && this.filterBy !== 'all') {
@@ -408,6 +471,12 @@ export default {

      return false
    },
+    seriesSortUpdated() {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
    settingsUpdated(settings) {
      var wasUpdated = this.checkUpdateSearchParams()
      if (wasUpdated) {
@@ -419,10 +488,7 @@ export default {
    scroll(e) {
      if (!e || !e.target) return
      var { scrollTop } = e.target
-      // clearTimeout(this.scrollTimeout)
-      // this.scrollTimeout = setTimeout(() => {
      this.handleScroll(scrollTop)
-      // }, 250)
    },
    libraryItemAdded(libraryItem) {
      console.log('libraryItem added', libraryItem)
@@ -554,7 +620,8 @@ export default {
        }
      })

-      this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+      this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
      this.$eventBus.$on('socket_init', this.socketInit)

      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
@@ -578,7 +645,9 @@ export default {
      if (bookshelf) {
        bookshelf.removeEventListener('scroll', this.scroll)
      }
-      this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+
+      this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
      this.$eventBus.$off('socket_init', this.socketInit)

      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -14,6 +14,14 @@
      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
    </nuxt-link>

+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons">format_list_bulleted</span>
+
+      <p class="font-book pt-1" style="font-size: 0.9rem">Latest</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 border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -56,7 +64,7 @@
    </nuxt-link>

    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <icons-podcast-svg class="w-6 h-6" />
+      <span class="abs-icons icon-podcast text-xl"></span>

      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>

@@ -80,7 +88,7 @@
      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
    </div>

-    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version"/>
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
  </div>
 </template>

@@ -123,6 +131,9 @@ export default {
    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'
    },
@@ -165,9 +176,9 @@ export default {
    }
  },
  methods: {
-    clickChangelog(){
+    clickChangelog() {
      this.showChangelogModal = true
-    } 
+    }
  },
  mounted() {}
 }
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@@ -93,12 +93,12 @@ export default {
        return null
      })
      if (!response) {
-        this.$toast.error('Author not found')
+        this.$toast.error(`Author ${this.name} not found`)
      } else if (response.updated) {
-        if (response.author.imagePath) this.$toast.success('Author was updated')
-        else this.$toast.success('Author was updated (no image found)')
+        if (response.author.imagePath) this.$toast.success(`Author ${response.author.name} was updated`)
+        else this.$toast.success(`Author ${response.author.name} was updated (no image found)`)
      } else {
-        this.$toast.info('No updates were made for Author')
+        this.$toast.info(`No updates were made for Author ${response.author.name}`)
      }
      this.searching = false
    },
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@@ -4,6 +4,7 @@
      <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 flex-grow">
@@ -12,13 +13,13 @@
          <div class="flex-grow" />
          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
        </div>
-        <p class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
+        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
          <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
            <p class="leading-3 text-xs text-gray-400">
-              {{ series.series }}<span v-if="series.volumeNumber">&nbsp;#{{ series.volumeNumber }}</span>
+              {{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
            </p>
          </div>
        </div>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -37,6 +37,8 @@

    <!-- No progress shown for collapsed series in library and podcasts (unless showing podcast episode) -->
    <div v-if="!booksInSeries && (!isPodcast || episodeProgress)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+    <!-- Finished progress bar for collapsed series -->
+    <div v-else-if="booksInSeries && seriesIsFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success" :style="{ width: width * userProgressPercent + 'px' }"></div>

    <!-- Overlay is not shown if collapsing series in library -->
    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
@@ -128,7 +130,8 @@ export default {
    },
    orderBy: String,
    filterBy: String,
-    sortingIgnorePrefix: Boolean
+    sortingIgnorePrefix: Boolean,
+    continueListeningShelf: Boolean
  },
  data() {
    return {
@@ -181,7 +184,8 @@ export default {
      return this.mediaType === 'podcast'
    },
    placeholderUrl() {
-      return '/book_placeholder.jpg'
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
    },
    bookCoverSrc() {
      return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)
@@ -232,6 +236,10 @@ export default {
      // Only added to item object when collapseSeries is enabled
      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
    },
+    libraryItemIdsInSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
+    },
    hasCover() {
      return !!this.media.coverPath
    },
@@ -296,6 +304,12 @@ export default {
    itemIsFinished() {
      return this.userProgress ? !!this.userProgress.isFinished : false
    },
+    seriesIsFinished() {
+      return !this.libraryItemIdsInSeries.some((lid) => {
+        const progress = this.store.getters['user/getUserMediaProgress'](lid)
+        return !progress || !progress.isFinished
+      })
+    },
    showError() {
      if (this.recentEpisode) return false // Dont show podcast error on episode card
      return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
@@ -368,7 +382,7 @@ export default {
    },
    moreMenuItems() {
      if (this.recentEpisode) {
-        return [
+        const items = [
          {
            func: 'editPodcast',
            text: 'Edit Podcast'
@@ -378,6 +392,13 @@ export default {
            text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
          }
        ]
+        if (this.continueListeningShelf) {
+          items.push({
+            func: 'removeFromContinueListening',
+            text: 'Remove from Continue Listening'
+          })
+        }
+        return items
      }

      var items = []
@@ -411,6 +432,18 @@ export default {
          text: 'Re-Scan'
        })
      }
+      if (this.series && this.bookMount) {
+        items.push({
+          func: 'removeSeriesFromContinueListening',
+          text: 'Remove Series from Continue Series'
+        })
+      }
+      if (this.continueListeningShelf) {
+        items.push({
+          func: 'removeFromContinueListening',
+          text: 'Remove from Continue Listening'
+        })
+      }
      return items
    },
    _socket() {
@@ -444,7 +477,7 @@ export default {
    },
    isAlternativeBookshelfView() {
      var constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView === constants.BookshelfView.TITLES
+      return this.bookshelfView === constants.BookshelfView.DETAIL
    },
    isAuthorBookshelfView() {
      var constants = this.$constants || this.$nuxt.$constants
@@ -572,11 +605,12 @@ export default {
          } else if (result === 'REMOVED') {
            this.$toast.error(`Re-Scan complete item was removed`)
          }
-          this.processing = false
        })
        .catch((error) => {
          console.error('Failed to scan library item', error)
          this.$toast.error('Failed to scan library item')
+        })
+        .finally(() => {
          this.processing = false
        })
    },
@@ -588,6 +622,40 @@ export default {
      // More menu func
      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
    },
+    removeSeriesFromContinueListening() {
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
+        .$get(`/api/me/series/${this.series.id}/remove-from-continue-listening`)
+        .then((data) => {
+          console.log('User updated', data)
+        })
+        .catch((error) => {
+          console.error('Failed to remove series from home', error)
+          this.$toast.error('Failed to update user')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    removeFromContinueListening() {
+      if (!this.userProgress) return
+
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
+        .$get(`/api/me/progress/${this.userProgress.id}/remove-from-continue-listening`)
+        .then((data) => {
+          console.log('User updated', data)
+        })
+        .catch((error) => {
+          console.error('Failed to hide item from home', error)
+          this.$toast.error('Failed to update user')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
    openCollections() {
      this.store.commit('setSelectedLibraryItem', this.libraryItem)
      this.store.commit('globals/setShowUserCollectionsModal', true)
@@ -651,10 +719,10 @@ export default {
      console.log('Got library itemn', libraryItem)
      this.store.commit('showEReader', libraryItem)
    },
-    selectBtnClick() {
+    selectBtnClick(evt) {
      if (this.processingBatch) return
      this.selected = !this.selected
-      this.$emit('select', this.libraryItem)
+      this.$emit('select', { entity: this.libraryItem, shiftKey: evt.shiftKey })
    },
    async play() {
      var eventBus = this.$eventBus || this.$nuxt.$eventBus
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@@ -68,7 +68,7 @@ export default {
    },
    isAlternativeBookshelfView() {
      const constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView == constants.BookshelfView.TITLES
+      return this.bookshelfView == constants.BookshelfView.DETAIL
    },
    userCanUpdate() {
      return this.store.getters['user/getUserCanUpdate']
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
@@ -20,6 +20,7 @@
    </div>
    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
    </div>
  </div>
 </template>
@@ -40,7 +41,8 @@ export default {
      type: Object,
      default: () => null
    },
-    sortingIgnorePrefix: Boolean
+    sortingIgnorePrefix: Boolean,
+    orderBy: String
  },
  data() {
    return {
@@ -52,6 +54,9 @@ export default {
    }
  },
  computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
    labelFontSize() {
      if (this.width < 160) return 0.75
      return 0.875
@@ -73,12 +78,24 @@ export default {
      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
      return this.title
    },
+    displaySortLine() {
+      if (this.orderBy === 'addedAt') {
+        // return this.addedAt
+        return 'Added ' + this.$formatDate(this.addedAt, this.dateFormat)
+      } else if (this.orderBy === 'totalDuration') {
+        return 'Duration: ' + this.$elapsedPrettyExtended(this.totalDuration, false)
+      }
+      return null
+    },
    books() {
      return this.series ? this.series.books || [] : []
    },
    addedAt() {
      return this.series ? this.series.addedAt : 0
    },
+    totalDuration() {
+      return this.series ? this.series.totalDuration : 0
+    },
    seriesBookProgress() {
      return this.books
        .map((libraryItem) => {
@@ -107,7 +124,7 @@ export default {
    },
    isAlternativeBookshelfView() {
      const constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView == constants.BookshelfView.TITLES
+      return this.bookshelfView == constants.BookshelfView.DETAIL
    }
  },
  methods: {
--- a/client/components/cards/NotificationCard.vue
+++ b/client/components/cards/NotificationCard.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full border border-white border-opacity-10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
+    <div class="flex flex-wrap items-center">
+      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
+      <div class="flex-grow" />
+
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">Fire onTest Event</ui-btn>
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="red-600" @click.stop="fireTestEventAndFail">Fire & Fail</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">Test</ui-btn>
+      <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</ui-btn>
+
+      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
+      <ui-icon-btn bg-color="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('Triggered onTest Event')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger onTest event')
+        })
+        .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: `Trigger this notification with test data?`,
+        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('Triggered test notification')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger test notification')
+        })
+        .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)
+          this.$toast.success('Notification enabled')
+        })
+        .catch((error) => {
+          console.error('Failed to update notification', error)
+          this.$toast.error('Failed to update notification')
+        })
+        .finally(() => {
+          this.enabling = false
+        })
+    },
+    deleteNotificationClick() {
+      const payload = {
+        message: `Are you sure you want to delete this notification?`,
+        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)
+          this.$toast.success('Deleted notification')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Failed to delete notification')
+        })
+        .finally(() => {
+          this.deleting = false
+        })
+    },
+    editNotification() {
+      this.$emit('edit', this.notification)
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@@ -1,8 +1,8 @@
 <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">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
-        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="block truncate text-xs">{{ selectedText }}</span>
      </span>
      <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">
@@ -15,42 +15,12 @@
    </button>

    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <template v-for="item in selectItems">
+      <ul class="h-full w-full" 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)">
            <div class="flex items-center justify-between">
              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
            </div>
-            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-icons">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>
-        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('No Series'))">
-          <div class="flex items-center">
-            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">No Series</span>
-          </div>
-        </li>
-        <template v-for="item in sublistItems">
-          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
-            <div class="flex items-center">
-              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
-            </div>
          </li>
        </template>
      </ul>
@@ -61,97 +31,15 @@
 <script>
 export default {
  props: {
-    value: String
+    value: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
  },
  data() {
    return {
-      showMenu: false,
-      sublist: null,
-      bookItems: [
-        {
-          text: 'All',
-          value: 'all'
-        },
-        {
-          text: 'Genre',
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: 'Tag',
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: 'Series',
-          value: 'series',
-          sublist: true
-        },
-        {
-          text: 'Authors',
-          value: 'authors',
-          sublist: true
-        },
-        {
-          text: 'Narrator',
-          value: 'narrators',
-          sublist: true
-        },
-        {
-          text: 'Language',
-          value: 'languages',
-          sublist: true
-        },
-        {
-          text: 'Progress',
-          value: 'progress',
-          sublist: true
-        },
-        {
-          text: 'Missing',
-          value: 'missing',
-          sublist: true
-        },
-        {
-          text: 'Issues',
-          value: 'issues',
-          sublist: false
-        },
-        {
-          text: 'RSS Feed Open',
-          value: 'feed-open',
-          sublist: false
-        }
-      ],
-      podcastItems: [
-        {
-          text: 'All',
-          value: 'all'
-        },
-        {
-          text: 'Genre',
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: 'Tag',
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: 'Issues',
-          value: 'issues',
-          sublist: false
-        }
-      ]
-    }
-  },
-  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: {
@@ -163,81 +51,10 @@ export default {
        this.$emit('input', val)
      }
    },
-    isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
-    },
-    selectItems() {
-      if (this.isPodcast) return this.podcastItems
-      return this.bookItems
-    },
-    selectedItemSublist() {
-      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
-    },
    selectedText() {
      if (!this.selected) return ''
-      var parts = this.selected.split('.')
-      var filterName = this.selectItems.find((i) => i.value === parts[0])
-      var filterValue = null
-      if (parts.length > 1) {
-        var decoded = this.$decode(parts[1])
-        if (decoded.startsWith('aut_')) {
-          var author = this.authors.find((au) => au.id == decoded)
-          if (author) filterValue = author.name
-        } else if (decoded.startsWith('ser_')) {
-          var 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 || []
-    },
-    progress() {
-      return ['Finished', 'In Progress', 'Not Started', 'Not Finished']
-    },
-    missing() {
-      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
-    },
-    sublistItems() {
-      return (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)
-          }
-        }
-      })
+      const filter = this.items.find((i) => i.value === this.selected)
+      return filter ? filter.text : ''
    },
    filterData() {
      return this.$store.state.libraries.filterData || {}
@@ -250,18 +67,9 @@ export default {
      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
-      }
-
      var val = option.value
      if (this.selected === val) {
        this.showMenu = false
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@@ -0,0 +1,314 @@
+<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>
+      <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>
+
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in selectItems">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+            <div class="flex items-center justify-between">
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
+            </div>
+            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
+              <span class="material-icons">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>
+        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('No Series'))">
+          <div class="flex items-center">
+            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">No Series</span>
+          </div>
+        </li>
+        <template v-for="item in sublistItems">
+          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    isSeries: Boolean
+  },
+  data() {
+    return {
+      showMenu: false,
+      sublist: null,
+      seriesItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Authors',
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: 'Narrator',
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: 'Language',
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: 'Series Progress',
+          value: 'progress',
+          sublist: true
+        }
+      ],
+      bookItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Series',
+          value: 'series',
+          sublist: true
+        },
+        {
+          text: 'Authors',
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: 'Narrator',
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: 'Language',
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: 'Progress',
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: 'Missing',
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
+        },
+        {
+          text: 'RSS Feed Open',
+          value: 'feed-open',
+          sublist: false
+        }
+      ],
+      podcastItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    }
+  },
+  watch: {
+    showMenu(newVal) {
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      }
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    selectItems() {
+      if (this.isSeries) return this.seriesItems
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
+    selectedItemSublist() {
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+    },
+    selectedText() {
+      if (!this.selected) return ''
+      var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
+      if (parts.length > 1) {
+        var decoded = this.$decode(parts[1])
+        if (decoded.startsWith('aut_')) {
+          var author = this.authors.find((au) => au.id == decoded)
+          if (author) filterValue = author.name
+        } else if (decoded.startsWith('ser_')) {
+          var 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 || []
+    },
+    progress() {
+      return ['Finished', 'In Progress', 'Not Started', 'Not Finished']
+    },
+    missing() {
+      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
+    },
+    sublistItems() {
+      return (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)
+          }
+        }
+      })
+    },
+    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
+      }
+
+      var val = option.value
+      if (this.selected === val) {
+        this.showMenu = false
+        return
+      }
+      this.selected = val
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
--- a/client/components/controls/EpisodeSortSelect.vue
+++ b/client/components/controls/EpisodeSortSelect.vue
@@ -1,6 +1,6 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-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">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
@@ -26,29 +26,15 @@
 export default {
  props: {
    value: String,
-    descending: Boolean
+    descending: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    }
  },
  data() {
    return {
-      showMenu: false,
-      items: [
-        {
-          text: 'Pub Date',
-          value: 'publishedAt'
-        },
-        {
-          text: 'Title',
-          value: 'title'
-        },
-        {
-          text: 'Season',
-          value: 'season'
-        },
-        {
-          text: 'Episode',
-          value: 'episode'
-        }
-      ]
+      showMenu: false
    }
  },
  computed: {
--- a/client/components/controls/VolumeControl.vue
+++ b/client/components/controls/VolumeControl.vue
@@ -37,6 +37,11 @@ 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)
      }
    },
@@ -141,6 +146,10 @@ export default {
    if (this.value === 0) {
      this.isMute = true
    }
+    const storageVolume = localStorage.getItem("volume")
+    if (storageVolume) {
+      this.volume = parseFloat(storageVolume)
+    }
  },
  beforeDestroy() {
    window.removeEventListener('mousewheel', this.scroll)
--- a/client/components/covers/AuthorImage.vue
+++ b/client/components/covers/AuthorImage.vue
@@ -58,7 +58,7 @@ export default {
      if (!this.imagePath) return null
      if (process.env.NODE_ENV !== 'production') {
        // Testing
-        return `http://localhost:3333/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
+        return `http://localhost:3333${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
      }
      return `/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
    }
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -94,7 +94,8 @@ export default {
      return this.author
    },
    placeholderUrl() {
-      return '/book_placeholder.jpg'
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
    },
    fullCoverUrl() {
      if (!this.libraryItem) return null
--- a/client/components/covers/HoverBookCover.vue
+++ b/client/components/covers/HoverBookCover.vue
@@ -1,41 +0,0 @@
-<template>
-  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
-    <covers-book-cover :width="24" :audiobook="audiobook" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      isHovering: false
-    }
-  },
-  computed: {
-    placeholderUrl() {
-      return '/book_placeholder.jpg'
-    },
-    fullCoverUrl() {
-      return this.$store.getters['globals/getLibraryItemCoverSrc'](this.audiobook, this.placeholderUrl)
-    },
-    hasCover() {
-      return !!this.audiobook.book.cover
-    }
-  },
-  methods: {
-    mouseover() {
-      this.isHovering = true
-    },
-    mouseleave() {
-      this.isHovering = false
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/icons/audiobook-svg.vue
+++ b/client/components/icons/audiobook-svg.vue
@@ -1,23 +0,0 @@
-<template>
-  <svg fill="currentColor" class="h-full w-full p-px" viewBox="0 0 1978.03 2349.44">
-    <path
-      d="M2519.5,1438.39c-12.13-10.1-31-25-56.57-42.62V1197.31c0-505.94-410.15-916.09-916.1-916.09h0c-505.94,0-916.09,410.15-916.09,916.09v198.46c-25.57,17.66-44.44,32.52-56.57,42.62a45.45,45.45,0,0,0-16.35,34.95v237.74a45.45,45.45,0,0,0,16.35,35c28.28,23.54,93.18,72.92,194.22,123.55v23.11c0,62.32,40.21,112.85,89.8,112.85h0c49.59,0,89.8-50.53,89.8-112.85V1322.51c0-62.33-40.21-112.86-89.8-112.86h0c-47.51,0-86.4,46.38-89.58,105.07l-.22.11V1197.31c0-429.92,348.52-778.43,778.44-778.43h0c429.92,0,778.44,348.51,778.44,778.43v117.52l-.22-.11c-3.18-58.69-42.06-105.07-89.58-105.07h0c-49.59,0-89.79,50.53-89.79,112.86v570.18c0,62.32,40.2,112.85,89.79,112.85h0c49.6,0,89.8-50.53,89.8-112.85v-23.11c101.05-50.63,165.95-100,194.23-123.55a45.48,45.48,0,0,0,16.35-35V1473.34A45.48,45.48,0,0,0,2519.5,1438.39Z"
-      transform="translate(-557.82 -281.22)"
-    />
-    <path d="M1227.4,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56A108.47,108.47,0,0,0,1227.4,998.08H1115.33a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1047.75,1289.38H1295v25.83H1047.75Z" transform="translate(-557.82 -281.22)" />
-    <path d="M1602.87,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1490.8a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1423.22,1289.38h247.22v25.83H1423.22Z" transform="translate(-557.82 -281.22)" />
-    <path d="M1978.34,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1866.27a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1798.69,1289.38h247.22v25.83H1798.69Z" transform="translate(-557.82 -281.22)" />
-    <rect x="180.05" y="2185.95" width="1617.93" height="163.49" rx="81.74" />
-  </svg>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/icons/book-svg.vue
+++ b/client/components/icons/book-svg.vue
@@ -1,16 +0,0 @@
-<template>
-  <svg fill="currentColor" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
-  </svg>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/icons/comic-svg.vue
+++ b/client/components/icons/comic-svg.vue
@@ -1,16 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path fill="currentColor" d="M6,19L9,15.14L11.14,17.72L14.14,13.86L18,19H6M6,4H11V12L8.5,10.5L6,12M18,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z" />
-  </svg>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/icons/database-svg.vue
+++ b/client/components/icons/database-svg.vue
@@ -1,16 +0,0 @@
-<template>
-  <svg class="p-px" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-  </svg>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/icons/podcast-svg.vue
+++ b/client/components/icons/podcast-svg.vue
@@ -1,19 +0,0 @@
-<template>
-  <svg class="p-px" viewBox="0 0 122.877 120.596">
-    <path
-      fill="currentColor"
-      d="M68.925,69.906v50.689H53.953V69.906c-4.918-2.662-8.259-7.867-8.259-13.854 c0-8.694,7.05-15.744,15.745-15.744c8.694,0,15.745,7.05,15.745,15.744C77.184,62.039,73.843,67.244,68.925,69.906L68.925,69.906z M39.32,11.165c2.916-1.438,4.111-4.969,2.673-7.882c-1.438-2.914-4.966-4.111-7.88-2.674C22.213,6.479,12.958,16.19,7.11,27.625 c-4.32,8.445-6.783,17.842-7.08,27.325c-0.299,9.563,1.587,19.223,5.973,28.114c5.401,10.953,14.558,20.695,28.039,27.592 c2.889,1.477,6.429,0.33,7.905-2.559c1.477-2.889,0.331-6.428-2.558-7.904c-11.037-5.645-18.486-13.525-22.833-22.334 c-3.506-7.111-5.014-14.857-4.774-22.539c0.243-7.757,2.256-15.442,5.79-22.348C22.304,23.721,29.76,15.879,39.32,11.165 L39.32,11.165z M88.765,0.608c-2.914-1.438-6.443-0.24-7.881,2.674c-1.438,2.914-0.242,6.445,2.674,7.882 c9.561,4.715,17.017,12.556,21.747,21.808c3.533,6.905,5.547,14.59,5.789,22.348c0.24,7.682-1.268,15.428-4.773,22.539 c-4.347,8.809-11.796,16.689-22.833,22.334c-2.889,1.477-4.034,5.016-2.558,7.904c1.476,2.889,5.016,4.035,7.905,2.559 c13.48-6.896,22.638-16.639,28.039-27.592c4.386-8.891,6.272-18.551,5.973-28.114c-0.297-9.483-2.76-18.88-7.079-27.325 C109.919,16.19,100.665,6.479,88.765,0.608L88.765,0.608z M82.791,26.505c-2.195-1.581-5.256-1.082-6.837,1.113 c-1.58,2.195-1.082,5.256,1.113,6.837c0.885,0.637,1.753,1.352,2.604,2.134c4.971,4.583,7.919,10.694,8.538,17.16 c0.626,6.524-1.111,13.437-5.518,19.552c-0.748,1.039-1.61,2.092-2.585,3.15c-1.835,1.992-1.708,5.098,0.287,6.932 c1.994,1.834,5.099,1.705,6.933-0.287c1.18-1.279,2.286-2.641,3.315-4.072c5.862-8.139,8.166-17.4,7.322-26.197 c-0.848-8.853-4.871-17.208-11.648-23.457C85.249,28.387,84.074,27.431,82.791,26.505L82.791,26.505z M45.81,34.458 c2.195-1.581,2.694-4.642,1.113-6.837c-1.581-2.195-4.642-2.694-6.837-1.114c-1.284,0.926-2.458,1.882-3.524,2.864 c-6.778,6.25-10.801,14.604-11.649,23.457c-0.844,8.796,1.46,18.06,7.323,26.199c1.031,1.43,2.136,2.791,3.315,4.07 c1.834,1.992,4.939,2.121,6.932,0.287c1.996-1.834,2.123-4.939,0.288-6.932c-0.975-1.059-1.837-2.111-2.585-3.15 c-4.406-6.115-6.144-13.027-5.518-19.551c0.619-6.465,3.567-12.577,8.538-17.16C44.058,35.81,44.926,35.095,45.81,34.458 L45.81,34.458z"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/modals/BatchQuickMatchModel.vue
+++ b/client/components/modals/BatchQuickMatchModel.vue
@@ -0,0 +1,141 @@
+<template>
+  <modals-modal v-model="show" name="batchQuickMatch" :processing="processing" :width="500" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
+        <div class="py-4 px-4">
+          <h1 class="text-2xl">Quick Match {{ selectedBookIds.length }} Books</h1>
+        </div>
+        
+        <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
+          <div class="flex px-8 items-center py-2">
+            <p class="pr-4">Provider</p>
+            <ui-dropdown v-model="options.provider" :items="providers" small />
+          </div>
+          <p class="text-base px-8 py-2">Quick Match will attempt to add missing covers and metadata for the selected books. Enable the options below to allow Quick Match to overwrite existing covers and/or metadata.</p>
+          <div class="flex px-8 items-end py-2">
+            <ui-toggle-switch v-model="options.overrideCover"/>
+            <ui-tooltip :text="tooltips.updateCovers">
+              <p class="pl-4">
+                Update Covers
+                <span class="material-icons icon-text text-sm">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div class="flex px-8 items-end py-2">
+            <ui-toggle-switch v-model="options.overrideDetails"/>
+            <ui-tooltip :text="tooltips.updateDetails">
+              <p class="pl-4">
+                Update Details
+                <span class="material-icons icon-text text-sm">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div class="mt-4 py-4 border-b border-white border-opacity-10 text-white text-opacity-80 border-t border-white border-opacity-5">
+            <div class="flex items-center px-4">
+              <ui-btn type="button" @click="show = false">Cancel</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn color="success" @click="doBatchQuickMatch">Continue</ui-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      lastUsedLibrary: undefined,
+      options: {
+        provider: undefined,
+        overrideDetails: true,
+        overrideCover: true,
+        overrideDefaults: true
+      },
+      tooltips: {
+        updateCovers: 'Allow overwriting of existing covers for the selected books when a match is located.',
+        updateDetails: 'Allow overwriting of existing details for the selected books when a match is located.'
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showBatchQuickMatchModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowBatchQuickMatchModal', val)
+      }
+    },
+    title() {
+      return `${this.selectedBookIds.length} Items Selected`
+    },
+    showBatchQuickMatchModal() {
+      return this.$store.state.globals.showBatchQuickMatchModal
+    },
+    selectedBookIds() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    libraryProvider() {
+      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    }
+  },
+  methods: {
+    init() {
+      // If we don't have a set provider (first open of dialog) or we've switched library, set
+      // the selected provider to the current library default provider
+      if (!this.options.provider || (this.options.lastUsedLibrary != this.currentLibraryId)) {
+        this.options.lastUsedLibrary = this.currentLibraryId
+        this.options.provider = this.libraryProvider
+      }
+    },
+    doBatchQuickMatch() {
+      if (!this.selectedBookIds.length) return
+      if (this.processing) return
+         
+      this.processing = true
+      this.$store.commit('setProcessingBatch', true)
+      this.$axios
+        .$post(`/api/items/batch/quickmatch`, {
+          options: this.options,
+          libraryItemIds: this.selectedBookIds
+        })
+        .then(() => {
+          this.$toast.info('Batch quick match of ' + this.selectedBookIds.length + ' books started!')
+        }).catch((error) => {
+          this.$toast.error('Batch quick match failed')
+          console.error('Failed to batch quick match', error)
+        }).finally(() => {
+          this.processing = false
+          this.$store.commit('setProcessingBatch', false)
+          this.show = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>
+
--- a/client/components/modals/item/EditModal.vue
+++ b/client/components/modals/item/EditModal.vue
@@ -66,9 +66,9 @@ export default {
          component: 'modals-item-tabs-match'
        },
        {
-          id: 'manage',
-          title: 'Manage',
-          component: 'modals-item-tabs-manage',
+          id: 'tools',
+          title: 'Tools',
+          component: 'modals-item-tabs-tools',
          mediaType: 'book',
          admin: true
        },
@@ -141,10 +141,10 @@ export default {
        if (tab.mediaType && this.mediaType !== tab.mediaType) return false
        if (tab.admin && !this.userIsAdminOrUp) return false

-        if (tab.id === 'manage' && this.isMissing) return false
+        if (tab.id === 'tools' && this.isMissing) return false

-        if ((tab.id === 'manage' || tab.id === 'files') && this.userCanDownload) return true
-        if (tab.id !== 'manage' && tab.id !== 'files' && this.userCanUpdate) return true
+        if ((tab.id === 'tools' || tab.id === 'files') && this.userCanDownload) return true
+        if (tab.id !== 'tools' && tab.id !== 'files' && this.userCanUpdate) return true
        if (tab.id === 'match' && this.userCanUpdate) return true
        return false
      })
@@ -231,8 +231,10 @@ export default {
      }
    },
    selectTab(tab) {
+      if (this.selectedTab === tab) return
      if (this.availableTabs.find((t) => t.id === tab)) {
        this.selectedTab = tab
+        this.processing = false
      }
    },
    libraryItemUpdated(expandedLibraryItem) {
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@@ -125,7 +125,7 @@ export default {
      return this.$store.state.scanners.providers
    },
    searchTitleLabel() {
-      if (this.provider == 'audible') return 'Search Title or ASIN'
+      if (this.provider.startsWith('audible')) return 'Search Title or ASIN'
      else if (this.provider == 'itunes') return 'Search Term'
      return 'Search Title'
    },
@@ -164,7 +164,7 @@ export default {
        .filter((f) => f.fileType === 'image')
        .map((file) => {
          var _file = { ...file }
-          _file.localPath = `/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
+          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
          return _file
        })
    }
--- a/client/components/modals/item/tabs/Manage.vue
+++ b/client/components/modals/item/tabs/Manage.vue
@@ -1,267 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
-    <!-- Merge to m4b -->
-    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
-      <div class="flex flex-wrap items-center">
-        <div>
-          <p class="text-lg">Make M4B Audiobook File <span class="text-error">*</span></p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate a .M4B audiobook file with embedded metadata, cover image, and chapters. <br /><span class="text-warning">*</span> Does not delete existing audio files.</p>
-        </div>
-        <div class="flex-grow" />
-        <div class="mt-2 md:mt-0">
-          <p v-if="abmergeStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
-          <p v-if="abmergeStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
-          <p v-if="abmergeStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
-
-          <ui-btn v-if="abmergeStatus !== $constants.DownloadStatus.READY" :loading="abmergeStatus === $constants.DownloadStatus.PENDING" :disabled="tempDisable" @click="startAudiobookMerge">Start Merge</ui-btn>
-          <div v-else>
-            <div class="flex">
-              <ui-btn @click="downloadWithProgress(abmergeDownload)">Download</ui-btn>
-              <ui-icon-btn small icon="delete" bg-color="error" class="ml-2" @click="removeDownload" />
-            </div>
-            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(abmergeDownload.size) }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Split to mp3 -->
-    <div v-if="showMp3Split && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
-      <div class="flex items-center">
-        <div>
-          <p class="text-lg">Split M4B to MP3's</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate multiple MP3's split by chapters with embedded metadata, cover image, and chapters. <br /><span class="text-warning">*</span> Does not delete existing audio files.</p>
-        </div>
-        <div class="flex-grow" />
-        <div>
-          <p v-if="abmergeStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
-          <p v-if="abmergeStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
-          <p v-if="abmergeStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
-
-          <ui-btn v-if="abmergeStatus !== $constants.DownloadStatus.READY" :loading="abmergeStatus === $constants.DownloadStatus.PENDING" :disabled="true" @click="startAudiobookMerge">Not yet implemented</ui-btn>
-          <div v-else>
-            <div class="flex">
-              <ui-btn @click="downloadWithProgress(abmergeDownload)">Download</ui-btn>
-              <ui-icon-btn small icon="delete" bg-color="error" class="ml-2" @click="removeDownload" />
-            </div>
-            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(abmergeDownload.size) }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Embed Metadata -->
-    <div v-if="mediaTracks.length && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
-      <div class="flex items-center">
-        <div>
-          <p class="text-lg">Embed Metadata</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Embed metadata into audio files including cover image and chapters. <br /><span class="text-warning">*</span> Modifies audio files.</p>
-        </div>
-        <div class="flex-grow" />
-        <div>
-          <ui-btn :to="`/item/${libraryItemId}/manage`" class="flex items-center"
-            >Open Manager
-            <span class="material-icons text-lg ml-2">launch</span>
-          </ui-btn>
-        </div>
-      </div>
-    </div>
-
-    <p v-if="showM4bDownload" class="text-left text-base mb-4 py-4">
-      <span class="text-error">* <strong>Experimental</strong></span
-      >&nbsp;-&nbsp;M4b merge can take several minutes and will be stored in <span class="bg-primary bg-opacity-75 font-mono p-1 text-base">/metadata/downloads</span>. After the download is ready, it will remain available for 60 minutes, then be deleted. Download will timeout after 30 minutes.
-    </p>
-
-    <!-- <p v-if="isSingleM4b" class="text-lg text-center my-8">Audiobook is already a single m4b!</p> -->
-    <p v-if="!mediaTracks.length" class="text-lg text-center my-8">No audio tracks to merge</p>
-
-    <div v-if="isDownloading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 flex items-center justify-center">
-      <div class="w-80 border border-black-400 bg-bg rounded-xl h-20">
-        <div class="w-full h-full flex items-center justify-center">
-          <p class="text-lg">Download.... {{ downloadPercent }}%</p>
-          <p class="w-24 font-mono pl-8 text-right">
-            {{ downloadAmount }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      tempDisable: false,
-      isDownloading: false,
-      downloadPercent: '0',
-      downloadAmount: '0 KB'
-    }
-  },
-  watch: {
-    abmergeStatus(newVal) {
-      if (newVal) {
-        this.tempDisable = false
-      }
-    }
-  },
-  computed: {
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
-    libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
-    },
-    media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
-    },
-    downloads() {
-      return this.$store.getters['downloads/getDownloads'](this.libraryItemId)
-    },
-    abmergeDownload() {
-      return this.downloads.find((d) => d.type === 'abmerge')
-    },
-    abmergeStatus() {
-      return this.abmergeDownload ? this.abmergeDownload.status : false
-    },
-    libraryFiles() {
-      return this.libraryItem.libraryFiles
-    },
-    totalFiles() {
-      return this.libraryFiles.length
-    },
-    mediaTracks() {
-      return this.media.tracks || []
-    },
-    isSingleM4b() {
-      return this.mediaTracks.length === 1 && this.mediaTracks[0].metadata.ext.toLowerCase() === '.m4b'
-    },
-    chapters() {
-      return this.media.chapters || []
-    },
-    showM4bDownload() {
-      if (!this.mediaTracks.length) return false
-      return !this.isSingleM4b
-    },
-    showMp3Split() {
-      if (!this.mediaTracks.length) return false
-      return this.isSingleM4b && this.chapters.length
-    }
-  },
-  methods: {
-    removeDownload() {
-      if (!this.abmergeDownload) return
-      if (!confirm(`Are you sure you want to remove this merge download?`)) return
-
-      var downloadId = this.abmergeDownload.id
-
-      this.tempDisable = true
-      this.$axios
-        .$delete(`/api/download/${downloadId}`)
-        .then(() => {
-          this.tempDisable = false
-          this.$toast.success('Merge download deleted')
-          this.$store.commit('downloads/removeDownload', { id: downloadId })
-        })
-        .catch((error) => {
-          var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
-          this.$toast.error(errorMsg)
-          this.tempDisable = false
-        })
-    },
-    startAudiobookMerge() {
-      this.tempDisable = true
-
-      this.$axios
-        .$get(`/api/audiobook-merge/${this.libraryItemId}`)
-        .then(() => {
-          this.tempDisable = false
-        })
-        .catch((error) => {
-          var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
-          this.$toast.error(errorMsg)
-          this.tempDisable = false
-        })
-    },
-    downloadWithProgress(download) {
-      var downloadId = download.id
-      var downloadUrl = `${process.env.serverUrl}/api/download/${downloadId}`
-      var filename = download.filename
-
-      this.isDownloading = true
-
-      var request = new XMLHttpRequest()
-      request.responseType = 'blob'
-      request.open('get', downloadUrl, true)
-      request.setRequestHeader('Authorization', `Bearer ${this.$store.getters['user/getToken']}`)
-      request.send()
-
-      request.onreadystatechange = () => {
-        if (request.readyState === 4) {
-          this.isDownloading = false
-        }
-        if (request.readyState == 4 && request.status == 200) {
-          const url = window.URL.createObjectURL(request.response)
-
-          const anchor = document.createElement('a')
-          anchor.href = url
-          anchor.download = filename
-          document.body.appendChild(anchor)
-          anchor.click()
-          setTimeout(() => {
-            if (anchor) anchor.remove()
-          }, 1000)
-        }
-      }
-
-      request.onerror = (err) => {
-        console.error('Download error', err)
-        this.isDownloading = false
-      }
-
-      request.onprogress = (e) => {
-        const percent_complete = Math.floor((e.loaded / e.total) * 100)
-        this.downloadAmount = this.$bytesPretty(e.loaded)
-        this.downloadPercent = percent_complete
-
-        // const duration = (new Date().getTime() - startTime) / 1000
-        // const bps = e.loaded / duration
-        // const kbps = Math.floor(bps / 1024)
-        // const time = (e.total - e.loaded) / bps
-        // const seconds = Math.floor(time % 60)
-        // const minutes = Math.floor(time / 60)
-        // console.log(`${percent_complete}% - ${kbps} Kbps - ${minutes} min ${seconds} sec remaining`)
-      }
-    },
-    loadDownloads() {
-      this.$axios
-        .$get(`/api/downloads`)
-        .then((data) => {
-          var pendingDownloads = data.pendingDownloads.map((pd) => {
-            pd.download.status = this.$constants.DownloadStatus.PENDING
-            return pd.download
-          })
-          var downloads = data.downloads.map((d) => {
-            d.status = this.$constants.DownloadStatus.READY
-            return d
-          })
-          var allDownloads = downloads.concat(pendingDownloads)
-          this.$store.commit('downloads/setDownloads', allDownloads)
-        })
-        .catch((error) => {
-          console.error('Failed to load downloads', error)
-        })
-    }
-  },
-  mounted() {
-    this.loadDownloads()
-  }
-}
-</script>
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -25,16 +25,16 @@
        <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
      </template>
    </div>
-    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
+    <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
      <div class="flex mb-4">
-        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="selectedMatch = null">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="clearSelectedMatch">
          <span class="material-icons text-3xl">arrow_back</span>
        </div>
        <p class="text-xl pl-3">Update Book Details</p>
      </div>
      <ui-checkbox v-model="selectAll" checkbox-bg="bg" @input="selectAllToggled" />
      <form @submit.prevent="submitMatchUpdate">
-        <div v-if="selectedMatch.cover" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.cover" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly label="Cover" class="flex-grow mx-4" />
          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
@@ -43,46 +43,49 @@
            </a>
          </div>
        </div>
-        <div v-if="selectedMatch.title" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.title" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" label="Title" />
            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.title || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.subtitle" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" label="Subtitle" />
            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.subtitle || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.author" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.author" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" label="Author" />
            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.authorName || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.narrator" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" label="Narrator" />
            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.narratorName || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.description" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.description" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
-          <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
+          <div class="flex-grow ml-4">
+            <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" />
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</p>
+          </div>
        </div>
-        <div v-if="selectedMatch.publisher" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.publisher" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.publisher" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" label="Publisher" />
            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publisher || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.publishedYear" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.publishedYear" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.publishedYear" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" label="Published Year" />
@@ -90,46 +93,42 @@
          </div>
        </div>

-        <div v-if="selectedMatch.series" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.series" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.series" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
-            <widgets-series-input-widget v-model="selectedMatch.series" />
+            <widgets-series-input-widget v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" />
            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.volumeNumber" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" @input="checkboxToggled" />
-          <ui-text-input-with-label v-model="selectedMatch.volumeNumber" :disabled="!selectedMatchUsage.volumeNumber" label="Volume Number" class="flex-grow ml-4" />
-        </div>
-        <div v-if="selectedMatch.genres" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" label="Genres" />
-            <p v-if="mediaMetadata.genresList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.genresList || '' }}</p>
+            <ui-multi-select v-model="selectedMatch.genres" :items="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" label="Genres" />
+            <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.genres.join(', ') }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.tags" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" label="Tags" />
-            <p v-if="mediaMetadata.tagsList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.tagsList || '' }}</p>
+            <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ media.tags.join(', ') }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.language" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.language" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.language" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" label="Language" />
            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.language || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.isbn" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.isbn" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.isbn || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.asin" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.asin" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.asin" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
@@ -137,28 +136,28 @@
          </div>
        </div>

-        <div v-if="selectedMatch.itunesId" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.itunesId" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.itunesId" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.itunesId || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.feedUrl" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.feedUrl" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.feedUrl" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.feedUrl || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.itunesPageUrl" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.itunesPageUrl" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.itunesPageUrl || '' }}</p>
          </div>
        </div>
-        <div v-if="selectedMatch.releaseDate" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.releaseDate" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.releaseDate" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" label="Release Date" />
@@ -193,6 +192,7 @@ export default {
      searchResults: [],
      hasSearched: false,
      selectedMatch: null,
+      selectedMatchOrig: null,
      selectedMatchUsage: {
        title: true,
        subtitle: true,
@@ -203,7 +203,6 @@ export default {
        publisher: true,
        publishedYear: true,
        series: true,
-        volumeNumber: true,
        genres: true,
        tags: true,
        language: true,
@@ -241,14 +240,13 @@ export default {
        return this.selectedMatch.series.map((se) => {
          return {
            id: `new-${Math.floor(Math.random() * 10000)}`,
-            displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+            displayName: se.sequence ? `${se.series} #${se.sequence}` : se.series,
            name: se.series,
-            sequence: se.volumeNumber || ''
+            sequence: se.sequence || ''
          }
        })
      },
      set(val) {
-        console.log('set series items', val)
        this.selectedMatch.series = val
      }
    },
@@ -260,7 +258,7 @@ export default {
      return this.$store.state.scanners.providers
    },
    searchTitleLabel() {
-      if (this.provider == 'audible') return 'Search Title or ASIN'
+      if (this.provider.startsWith('audible')) return 'Search Title or ASIN'
      else if (this.provider == 'itunes') return 'Search Term'
      return 'Search Title'
    },
@@ -314,7 +312,7 @@ export default {
      this.isProcessing = true
      this.lastSearch = searchQuery
      var searchEntity = this.isPodcast ? 'podcast' : 'books'
-      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 10000 }).catch((error) => {
+      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 20000 }).catch((error) => {
        console.error('Failed', error)
        return []
      })
@@ -338,7 +336,7 @@ export default {
      this.hasSearched = true
    },
    init() {
-      this.selectedMatch = null
+      this.clearSelectedMatch()
      this.selectedMatchUsage = {
        title: true,
        subtitle: true,
@@ -349,7 +347,6 @@ export default {
        publisher: true,
        publishedYear: true,
        series: true,
-        volumeNumber: true,
        genres: true,
        tags: true,
        language: true,
@@ -392,37 +389,34 @@ export default {
            match.series = match.series.map((se) => {
              return {
                id: `new-${Math.floor(Math.random() * 10000)}`,
-                displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+                displayName: se.sequence ? `${se.series} #${se.sequence}` : se.series,
                name: se.series,
-                sequence: se.volumeNumber || ''
+                sequence: se.sequence || ''
              }
            })
          }
        }
-        if (match.genres && Array.isArray(match.genres)) {
-          match.genres = match.genres.join(',')
+        if (match.genres && !Array.isArray(match.genres)) {
+          // match.genres = match.genres.join(',')
+          match.genres = match.genres.split(',').map((g) => g.trim())
        }
      }

      console.log('Select Match', match)
      this.selectedMatch = match
+      this.selectedMatchOrig = JSON.parse(JSON.stringify(match))
    },
    buildMatchUpdatePayload() {
      var updatePayload = {}
      updatePayload.metadata = {}

-      var volumeNumber = this.selectedMatchUsage.volumeNumber ? this.selectedMatch.volumeNumber || null : null
      for (const key in this.selectedMatchUsage) {
        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
          if (key === 'series') {
-            var seriesPayload = []
            if (!Array.isArray(this.selectedMatch[key])) {
-              seriesPayload.push({
-                id: `new-${Math.floor(Math.random() * 10000)}`,
-                name: this.selectedMatch[key],
-                sequence: volumeNumber
-              })
+              console.error('Invalid series in selectedMatch', this.selectedMatch[key])
            } else {
+              var seriesPayload = []
              this.selectedMatch[key].forEach((seriesItem) =>
                seriesPayload.push({
                  id: seriesItem.id,
@@ -430,9 +424,8 @@ export default {
                  sequence: seriesItem.sequence
                })
              )
+              updatePayload.metadata.series = seriesPayload
            }
-
-            updatePayload.metadata.series = seriesPayload
          } else if (key === 'author' && !this.isPodcast) {
            var authors = this.selectedMatch[key]
            if (!Array.isArray(authors)) {
@@ -449,7 +442,8 @@ export default {
          } else if (key === 'narrator') {
            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
          } else if (key === 'genres') {
-            updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
+            // updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.metadata.genres = [...this.selectedMatch[key]]
          } else if (key === 'tags') {
            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
          } else if (key === 'itunesId') {
@@ -500,15 +494,19 @@ export default {
          } else {
            this.$toast.info('No detail updates were necessary')
          }
-          this.selectedMatch = null
+          this.clearSelectedMatch()
          this.$emit('selectTab', 'details')
        } else {
          this.$toast.error('Item Details Failed to Update')
        }
      } else {
-        this.selectedMatch = null
+        this.clearSelectedMatch()
      }
      this.isProcessing = false
+    },
+    clearSelectedMatch() {
+      this.selectedMatch = null
+      this.selectedMatchOrig = null
    }
  }
 }
--- a/client/components/modals/item/tabs/Schedule.vue
+++ b/client/components/modals/item/tabs/Schedule.vue
@@ -19,6 +19,15 @@
            </p>
          </ui-tooltip>
        </div>
+        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
+          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
+          <ui-tooltip text="Value of 0 sets no max limit. When checking for new episodes this is the max number of episodes that will be downloaded.">
+            <p class="pl-4 text-base">
+              Max new episodes to download per check
+              <span class="material-icons icon-text text-sm">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>

        <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoDownloadEpisodes" v-model="cronExpression" />
      </template>
@@ -46,7 +55,8 @@ export default {
    return {
      enableAutoDownloadEpisodes: false,
      cronExpression: null,
-      newMaxEpisodesToKeep: 0
+      newMaxEpisodesToKeep: 0,
+      newMaxNewEpisodesToDownload: 0
    }
  },
  computed: {
@@ -82,8 +92,11 @@ export default {
    maxEpisodesToKeep() {
      return this.media.maxEpisodesToKeep
    },
+    maxNewEpisodesToDownload() {
+      return this.media.maxNewEpisodesToDownload
+    },
    isUpdated() {
-      return this.autoDownloadSchedule !== this.cronExpression || this.autoDownloadEpisodes !== this.enableAutoDownloadEpisodes || this.maxEpisodesToKeep !== Number(this.newMaxEpisodesToKeep)
+      return this.autoDownloadSchedule !== this.cronExpression || this.autoDownloadEpisodes !== this.enableAutoDownloadEpisodes || this.maxEpisodesToKeep !== Number(this.newMaxEpisodesToKeep) || this.maxNewEpisodesToDownload !== Number(this.newMaxNewEpisodesToDownload)
    }
  },
  methods: {
@@ -94,6 +107,13 @@ export default {
        this.newMaxEpisodesToKeep = Number(this.newMaxEpisodesToKeep)
      }
    },
+    updateMaxNewEpisodesToDownload() {
+      if (isNaN(this.newMaxNewEpisodesToDownload) || this.newMaxNewEpisodesToDownload < 0) {
+        this.newMaxNewEpisodesToDownload = 0
+      } else {
+        this.newMaxNewEpisodesToDownload = Number(this.newMaxNewEpisodesToDownload)
+      }
+    },
    save() {
      // If custom expression input is focused then unfocus it instead of submitting
      if (this.$refs.cronExpressionBuilder && this.$refs.cronExpressionBuilder.checkBlurExpressionInput) {
@@ -115,6 +135,9 @@ export default {
      if (this.newMaxEpisodesToKeep !== this.maxEpisodesToKeep) {
        updatePayload.maxEpisodesToKeep = this.newMaxEpisodesToKeep
      }
+      if (this.newMaxNewEpisodesToDownload !== this.maxNewEpisodesToDownload) {
+        updatePayload.maxNewEpisodesToDownload = this.newMaxNewEpisodesToDownload
+      }

      this.updateDetails(updatePayload)
    },
@@ -139,6 +162,7 @@ export default {
      this.enableAutoDownloadEpisodes = this.autoDownloadEpisodes
      this.cronExpression = this.autoDownloadSchedule
      this.newMaxEpisodesToKeep = this.maxEpisodesToKeep
+      this.newMaxNewEpisodesToDownload = this.maxNewEpisodesToDownload
    }
  },
  mounted() {
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
+    <p class="text-xl font-semibold mb-2">Audiobook File Management Tools</p>
+
+    <!-- Merge to m4b -->
+    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex flex-wrap items-center">
+        <div>
+          <p class="text-lg">Make M4B Audiobook File</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate a .M4B audiobook file with embedded metadata, cover image, and chapters.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=m4b`" class="flex items-center"
+            >Open Manager
+            <span class="material-icons text-lg ml-2">launch</span>
+          </ui-btn>
+        </div>
+      </div>
+    </div>
+
+    <!-- Split to mp3 -->
+    <div v-if="showMp3Split && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">Split M4B to MP3's</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate multiple MP3's split by chapters with embedded metadata, cover image, and chapters.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :disabled="true">Not yet implemented</ui-btn>
+        </div>
+      </div>
+    </div>
+
+    <!-- Embed Metadata -->
+    <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">Embed Metadata</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Embed metadata into audio files including cover image and chapters.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=embed`" class="flex items-center"
+            >Open Manager
+            <span class="material-icons text-lg ml-2">launch</span>
+          </ui-btn>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="!mediaTracks.length" class="text-lg text-center my-8">No audio tracks</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaTracks() {
+      return this.media.tracks || []
+    },
+    isSingleM4b() {
+      return this.mediaTracks.length === 1 && this.mediaTracks[0].metadata.ext.toLowerCase() === '.m4b'
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    showM4bDownload() {
+      if (!this.mediaTracks.length) return false
+      return !this.isSingleM4b
+    },
+    showMp3Split() {
+      if (!this.mediaTracks.length) return false
+      return this.isSingleM4b && this.chapters.length
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/modals/libraries/FolderChooser.vue
+++ b/client/components/modals/libraries/FolderChooser.vue
@@ -29,9 +29,10 @@
    <div v-else-if="loadingFolders" class="py-12 text-center">
      <p>Loading folders...</p>
    </div>
-    <div v-else class="py-12 text-center">
+    <div v-else class="py-12 text-center max-w-sm mx-auto">
      <p class="text-lg mb-2">No Folders Available</p>
-      <p class="text-gray-300">Note: folders already mapped will not be shown</p>
+      <p class="text-gray-300 mb-2">Note: folders already mapped will not be shown</p>
+      <p v-if="isDebian" class="text-red-400">Note: Folder picker for the debian install is not fully implemented. You should enter the path to your library directly.</p>
    </div>

    <div class="w-full py-2">
@@ -88,6 +89,12 @@ export default {
          ...d
        }
      })
+    },
+    isDebian() {
+      return this.Source == 'debian'
+    },
+    Source() {
+      return this.$store.state.Source
    }
  },
  methods: {
--- a/client/components/modals/notification/NotificationEditModal.vue
+++ b/client/components/modals/notification/NotificationEditModal.vue
@@ -0,0 +1,188 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="notification-edit" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <form @submit.prevent="submitForm">
+      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full px-3 py-5 md:p-12">
+          <ui-dropdown v-model="newNotification.eventName" label="Notification Event" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
+
+          <ui-multi-select v-model="newNotification.urls" label="Apprise URL(s)" class="mb-2" />
+
+          <ui-text-input-with-label v-model="newNotification.titleTemplate" label="Title Template" class="mb-2" />
+
+          <ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" :rows="4" class="mb-2" />
+
+          <p v-if="availableVariables" class="text-sm text-gray-300"><strong>Available variables:</strong> {{ availableVariables.join(', ') }}</p>
+
+          <div class="flex items-center pt-4">
+            <div class="flex items-center">
+              <ui-toggle-switch v-model="newNotification.enabled" />
+              <p class="text-lg pl-2">Enabled</p>
+            </div>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">Submit</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    notification: {
+      type: Object,
+      default: () => null
+    },
+    notificationData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newNotification: {},
+      isNew: true
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    notificationEvents() {
+      if (!this.notificationData) return []
+      return this.notificationData.events || []
+    },
+    eventOptions() {
+      return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
+    },
+    selectedEventData() {
+      return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
+    },
+    showLibrarySelectInput() {
+      return this.selectedEventData && this.selectedEventData.requiresLibrary
+    },
+    title() {
+      return this.isNew ? 'Create Notification' : 'Update Notification'
+    },
+    availableVariables() {
+      return this.selectedEventData ? this.selectedEventData.variables || null : null
+    }
+  },
+  methods: {
+    eventOptionUpdated() {
+      if (!this.selectedEventData) return
+      this.newNotification.titleTemplate = this.selectedEventData.defaults.title || ''
+      this.newNotification.bodyTemplate = this.selectedEventData.defaults.body || ''
+    },
+    close() {
+      // Force close when navigating - used in UsersTable
+      if (this.$refs.modal) this.$refs.modal.setHide()
+    },
+    submitForm() {
+      if (!this.newNotification.urls.length) {
+        this.$toast.error('Must enter an Apprise URL')
+        return
+      }
+
+      if (this.isNew) {
+        this.submitCreate()
+      } else {
+        this.submitUpdate()
+      }
+    },
+    submitUpdate() {
+      this.processing = true
+
+      const payload = {
+        ...this.newNotification
+      }
+      console.log('Sending update notification', payload)
+      this.$axios
+        .$patch(`/api/notifications/${payload.id}`, payload)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+          this.$toast.success('Notification updated')
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to update notification', error)
+          this.$toast.error('Failed to update notification')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    submitCreate() {
+      this.processing = true
+
+      const payload = {
+        ...this.newNotification
+      }
+      console.log('Sending create notification', payload)
+      this.$axios
+        .$post('/api/notifications', payload)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+          this.$toast.success('Notification created')
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to create notification', error)
+          this.$toast.error('Failed to create notification')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      this.isNew = !this.notification
+      if (this.notification) {
+        this.newNotification = {
+          id: this.notification.id,
+          libraryId: this.notification.libraryId,
+          eventName: this.notification.eventName,
+          urls: [...this.notification.urls],
+          titleTemplate: this.notification.titleTemplate,
+          bodyTemplate: this.notification.bodyTemplate,
+          enabled: this.notification.enabled,
+          type: this.notification.type
+        }
+      } else {
+        this.newNotification = {
+          libraryId: null,
+          eventName: 'onTest',
+          urls: [],
+          titleTemplate: '',
+          bodyTemplate: '',
+          enabled: true,
+          type: null
+        }
+        this.eventOptionUpdated()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/modals/player/QueueItemRow.vue
+++ b/client/components/modals/player/QueueItemRow.vue
@@ -55,7 +55,7 @@ export default {
      return this.item.coverPath
    },
    coverUrl() {
-      if (!this.coverPath) return '/book_placeholder.jpg'
+      if (!this.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
    },
    bookCoverAspectRatio() {
--- a/client/components/modals/podcast/NewModal.vue
+++ b/client/components/modals/podcast/NewModal.vue
@@ -1,18 +1,18 @@
 <template>
  <modals-modal v-model="show" name="new-podcast-modal" :width="1000" :height="'unset'" :processing="processing">
    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      <div class="absolute top-0 left-0 p-5 w-3/4 overflow-hidden">
+        <p class="font-book text-xl md:text-3xl text-white truncate">{{ title }}</p>
      </div>
    </template>
-    <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
-      <div class="w-full p-4">
-        <p class="text-lg font-semibold mb-2">Details</p>
+    <div ref="wrapper" id="podcast-wrapper" class="p-2 md:p-8 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-x-hidden overflow-y-auto" style="max-height: 80vh">
+      <div class="w-full">
+        <p class="text-lg font-semibold mb-2 px-2">Details</p>

-        <div v-if="podcast.imageUrl" class="p-1 w-full">
+        <div v-if="podcast.imageUrl" class="p-2 w-full">
          <img :src="podcast.imageUrl" class="h-16 w-16 object-contain" />
        </div>
-        <div class="flex">
+        <div class="flex flex-wrap">
          <div class="w-full md:w-1/2 p-2">
            <ui-text-input-with-label v-model="podcast.title" label="Title" @input="titleUpdated" />
          </div>
@@ -20,7 +20,7 @@
            <ui-text-input-with-label v-model="podcast.author" label="Author" />
          </div>
        </div>
-        <div class="flex">
+        <div class="flex flex-wrap">
          <div class="w-full md:w-1/2 p-2">
            <ui-text-input-with-label v-model="podcast.feedUrl" label="Feed URL" readonly />
          </div>
@@ -31,19 +31,19 @@
        <div class="p-2 w-full">
          <ui-textarea-with-label v-model="podcast.description" label="Description" :rows="3" />
        </div>
-        <div class="flex">
+        <div class="flex flex-wrap">
          <div class="w-full md:w-1/2 p-2">
            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" @input="folderUpdated" />
          </div>
          <div class="w-full md:w-1/2 p-2">
-            <ui-text-input-with-label v-model="fullPath" label="Podcast Path" readonly />
+            <ui-text-input-with-label v-model="fullPath" label="Podcast Path" input-class="h-10" readonly />
          </div>
        </div>
      </div>
-      <div class="flex items-center py-4">
+      <div class="flex items-center py-4 px-2">
        <div class="flex-grow" />
        <div class="px-4">
-          <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+          <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-sm md:text-base font-semibold" />
        </div>
        <ui-btn color="success" @click="submit">Add Podcast</ui-btn>
      </div>
--- a/client/components/modals/rssfeed/ViewModal.vue
+++ b/client/components/modals/rssfeed/ViewModal.vue
@@ -117,7 +117,7 @@ export default {
        serverAddress: window.origin,
        slug: this.newFeedSlug
      }
-      if (this.$isDev) payload.serverAddress = 'http://localhost:3333'
+      if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`

      console.log('Payload', payload)
      this.$axios
--- a/client/components/prompt/Confirm.vue
+++ b/client/components/prompt/Confirm.vue
@@ -3,7 +3,7 @@
    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
    <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-base mb-8 mt-2 px-1">{{ message }}</p>
+        <p class="text-lg mb-8 mt-2 px-1" v-html="message" />
        <div class="flex px-1 items-center">
          <ui-btn v-if="isYesNo" color="primary" @click="nevermind">Cancel</ui-btn>
          <div class="flex-grow" />
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -53,6 +53,7 @@
 <script>
 import Path from 'path'
 import { Archive } from 'libarchive.js/main.js'
+import { CompressedFile } from 'libarchive.js/src/compressed-file'

 Archive.init({
  workerUrl: '/libarchive/worker-bundle.js'
@@ -150,7 +151,11 @@ export default {
        responseType: 'blob'
      })
      const archive = await Archive.open(buff)
-      this.filesObject = await archive.getFilesObject()
+      const originalFilesObject = await archive.getFilesObject()
+      // to support images in subfolders we need to flatten the object
+      //   ref: https://github.com/advplyr/audiobookshelf/issues/811
+      this.filesObject = this.flattenFilesObject(originalFilesObject)
+      console.log('Extracted files object', this.filesObject)
      var filenames = Object.keys(this.filesObject)
      this.parseFilenames(filenames)

@@ -168,6 +173,26 @@ export default {
        this.loading = false
      }
    },
+    flattenFilesObject(filesObject) {
+      const flattenObject = (obj, prefix = '') => {
+        var _obj = {}
+        for (const key in obj) {
+          const newKey = prefix ? prefix + '/' + key : key
+          if (obj[key] instanceof CompressedFile) {
+            _obj[newKey] = obj[key]
+          } else if (!key.startsWith('_') && typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+            _obj = {
+              ..._obj,
+              ...flattenObject(obj[key], newKey)
+            }
+          } else {
+            _obj[newKey] = obj[key]
+          }
+        }
+        return _obj
+      }
+      return flattenObject(filesObject)
+    },
    async extractXmlFile(filename) {
      console.log('extracting xml filename', filename)
      try {
@@ -187,7 +212,7 @@ export default {
    },
    parseImageFilename(filename) {
      var basename = Path.basename(filename, Path.extname(filename))
-      var numbersinpath = basename.match(/\d{1,4}/g)
+      var numbersinpath = basename.match(/\d{1,5}/g)
      if (!numbersinpath || !numbersinpath.length) {
        return {
          index: -1,
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -96,7 +96,9 @@ export default {
      if (itemRelPath.startsWith('/')) itemRelPath = itemRelPath.slice(1)
      var relPath = this.ebookFile.metadata.relPath
      if (relPath.startsWith('/')) relPath = relPath.slice(1)
-      return `/ebook/${this.libraryId}/${this.folderId}/${itemRelPath}/${relPath}`
+
+      const relRelPath = this.$encodeUriPath(`${itemRelPath}/${relPath}`)
+      return `/ebook/${this.libraryId}/${this.folderId}/${relRelPath}`
    },
    userToken() {
      return this.$store.getters['user/getToken']
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@@ -21,7 +21,7 @@
          <td class="hidden sm:table-cell font-mono md:text-sm text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
          <td>
            <div class="w-full flex flex-row items-center justify-center">
-              <ui-btn v-if="backup.serverVersion" small color="primary" @click="applyBackup(backup)">Apply</ui-btn>
+              <ui-btn v-if="backup.serverVersion" small color="primary" @click="applyBackup(backup)">Restore</ui-btn>

              <a v-if="backup.serverVersion" :href="`/metadata/${$encodeUriPath(backup.path)}?token=${userToken}`" class="mx-1 pt-1 hover:text-opacity-100 text-opacity-70 text-white" download><span class="material-icons text-xl">download</span></a>
              <ui-tooltip v-else text="This backup was created with an old version of audiobookshelf no longer supported" direction="bottom" class="mx-2 flex items-center">
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@@ -34,7 +34,7 @@
                </div>
              </td>
              <td v-if="userCanDownload && !isMissing" class="text-center">
-                <a :href="`/s/item/${libraryItemId}/${$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+                <a :href="`${$config.routerBasePath}/s/item/${libraryItemId}/${$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
              </td>
            </tr>
          </template>
--- a/client/components/tables/TracksTable.vue
+++ b/client/components/tables/TracksTable.vue
@@ -24,6 +24,14 @@
            <th class="text-left w-20">Size</th>
            <th class="text-left w-20">Duration</th>
            <th v-if="userCanDownload" class="text-center w-20">Download</th>
+            <th v-if="showExperimentalFeatures" class="text-center w-20">
+              <div class="flex items-center">
+                <p>Tone</p>
+                <ui-tooltip text="Experimental feature for testing Tone library metadata scan results. Results logged in browser console." class="ml-2 w-2" direction="left">
+                  <span class="material-icons-outlined text-sm">information</span>
+                </ui-tooltip>
+              </div>
+            </th>
          </tr>
          <template v-for="track in tracks">
            <tr :key="track.index">
@@ -38,7 +46,10 @@
                {{ $secondsToTimestamp(track.duration) }}
              </td>
              <td v-if="userCanDownload" class="text-center">
-                <a :href="`/s/item/${libraryItemId}/${$encodeUriPath(track.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+                <a :href="`${$config.routerBasePath}/s/item/${libraryItemId}/${$encodeUriPath(track.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download><span class="material-icons icon-text pt-1">download</span></a>
+              </td>
+              <td v-if="showExperimentalFeatures" class="text-center">
+                <ui-icon-btn borderless :loading="toneProbing" icon="search" @click="toneProbe(track.index)" />
              </td>
            </tr>
          </template>
@@ -65,7 +76,8 @@ export default {
  data() {
    return {
      showTracks: false,
-      showFullPath: false
+      showFullPath: false,
+      toneProbing: false
    }
  },
  computed: {
@@ -77,11 +89,35 @@ export default {
    },
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
    }
  },
  methods: {
    clickBar() {
      this.showTracks = !this.showTracks
+    },
+    toneProbe(index) {
+      this.toneProbing = true
+
+      this.$axios
+        .$post(`/api/items/${this.libraryItemId}/tone-scan/${index}`)
+        .then((data) => {
+          console.log('Tone probe data', data)
+          if (data.error) {
+            this.$toast.error('Tone probe error: ' + data.error)
+          } else {
+            this.$toast.success('Tone probe successful! Check browser console')
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to tone probe', error)
+          this.$toast.error('Tone probe failed')
+        })
+        .finally(() => {
+          this.toneProbing = false
+        })
    }
  },
  mounted() {}
--- a/client/components/tables/collection/BookTableRow.vue
+++ b/client/components/tables/collection/BookTableRow.vue
@@ -6,7 +6,7 @@
          <span class="material-icons drag-handle text-lg md:text-xl">menu</span>
        </div>
      </div>
-      <div class="h-full relative" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
+      <div class="h-full relative flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
        <covers-book-cover :library-item="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
        <div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
          <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
@@ -14,18 +14,20 @@
          </div>
        </div>
      </div>
-      <div class="flex-grow max-w-md h-full px-2 flex items-center">
-        <div class="truncate px-1">
-          <nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline">{{ bookTitle }}</nuxt-link>
+      <div class="flex-grow overflow-hidden max-w-48 md:max-w-md h-full flex items-center px-2 md:px-3">
+        <div>
+          <div class="truncate max-w-48 md:max-w-md">
+            <nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline text-sm md:text-base">{{ bookTitle }}</nuxt-link>
+          </div>
+          <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
+            <template v-for="(author, index) in bookAuthors">
+              <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
+              ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
+            </template>
+          </div>
+          <p class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
        </div>
      </div>
-      <div class="w-20 flex items-center">
-        <p class="font-mono text-sm">{{ bookDuration }}</p>
-      </div>
-
-      <!-- <div class="w-12 flex items-center justify-center">
-        <span class="material-icons text-lg text-white text-opacity-70 hover:text-opacity-100 cursor-pointer">radio_button_unchecked</span>
-      </div> -->
    </div>
    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
      <div class="flex h-full items-center">
@@ -88,11 +90,11 @@ export default {
    bookTitle() {
      return this.mediaMetadata.title || ''
    },
-    bookAuthor() {
-      return (this.mediaMetadata.authors || []).map((au) => au.name).join(', ')
+    bookAuthors() {
+      return this.mediaMetadata.authors || []
    },
    bookDuration() {
-      return this.$secondsToTimestamp(this.media.duration)
+      return this.$elapsedPretty(this.media.duration)
    },
    isMissing() {
      return this.book.isMissing
@@ -113,7 +115,7 @@ export default {
      return this.itemProgress ? !!this.itemProgress.isFinished : false
    },
    coverSize() {
-      return this.$store.state.globals.isMobile ? 40 : 50
+      return this.$store.state.globals.isMobile ? 30 : 50
    },
    coverWidth() {
      if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
--- a/client/components/tables/library/LibraryItem.vue
+++ b/client/components/tables/library/LibraryItem.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
    <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <widgets-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
    <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
      <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
    </svg>
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/client/components/tables/podcast/EpisodesTable.vue
@@ -10,7 +10,10 @@
        <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">Remove {{ selectedEpisodes.length }} episode{{ selectedEpisodes.length > 1 ? 's' : '' }}</ui-btn>
        <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">Cancel</ui-btn>
      </template>
-      <controls-episode-sort-select v-else v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+      <template v-else>
+        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-32 md:w-36 h-9 ml-1 sm:ml-4" />
+        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-32 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+      </template>
    </div>
    <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
    <template v-for="episode in episodesSorted">
@@ -32,13 +35,50 @@ export default {
  data() {
    return {
      episodesCopy: [],
+      filterKey: 'incomplete',
      sortKey: 'publishedAt',
      sortDesc: true,
      selectedEpisode: null,
      showPodcastRemoveModal: false,
      selectedEpisodes: [],
      episodesToRemove: [],
-      processing: false
+      processing: false,
+      sortItems: [
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Season',
+          value: 'season'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        }
+      ],
+      filterItems: [
+        {
+          value: 'all',
+          text: 'Show All'
+        },
+        {
+          value: 'incomplete',
+          text: 'Incomplete'
+        },
+        {
+          value: 'complete',
+          text: 'Complete'
+        },
+        {
+          value: 'in_progress',
+          text: 'In Progress'
+        }
+      ]
    }
  },
  watch: {
@@ -63,12 +103,20 @@ export default {
      return this.media.episodes || []
    },
    episodesSorted() {
-      return this.episodesCopy.sort((a, b) => {
-        if (this.sortDesc) {
-          return String(b[this.sortKey]).localeCompare(String(a[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
-        }
-        return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
-      })
+      return this.episodesCopy
+        .filter((ep) => {
+          if (this.filterKey === 'all') return true
+          const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
+          if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
+          if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
+          return episodeProgress && !episodeProgress.isFinished
+        })
+        .sort((a, b) => {
+          if (this.sortDesc) {
+            return String(b[this.sortKey]).localeCompare(String(a[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+          }
+          return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
+        })
    },
    selectedIsFinished() {
      // Find an item that is not finished, if none then all items finished
--- a/client/components/ui/Dropdown.vue
+++ b/client/components/ui/Dropdown.vue
@@ -3,7 +3,9 @@
    <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
      <span class="flex items-center">
-        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
+        <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
+        <span v-if="selectedSubtext">:&nbsp;</span>
+        <span v-if="selectedSubtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ selectedSubtext }}</span>
      </span>
      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
        <span class="material-icons">expand_more</span>
@@ -12,10 +14,12 @@

    <transition name="menu">
      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
-        <template v-for="item in items">
+        <template v-for="item in itemsToShow">
          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
            <div class="flex items-center">
-              <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
+              <span class="ml-3 block truncate font-sans text-sm" :class="{ 'font-semibold': item.subtext }">{{ item.text }}</span>
+              <span v-if="item.subtext">:&nbsp;</span>
+              <span v-if="item.subtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ item.subtext }}</span>
            </div>
          </li>
        </template>
@@ -58,12 +62,26 @@ export default {
        this.$emit('input', val)
      }
    },
+    itemsToShow() {
+      return this.items.map((i) => {
+        if (typeof i === 'string') {
+          return {
+            text: i,
+            value: i
+          }
+        }
+        return i
+      })
+    },
    selectedItem() {
-      return this.items.find((i) => i.value === this.selected)
+      return this.itemsToShow.find((i) => i.value === this.selected)
    },
    selectedText() {
      return this.selectedItem ? this.selectedItem.text : ''
    },
+    selectedSubtext() {
+      return this.selectedItem ? this.selectedItem.subtext : ''
+    },
    buttonClass() {
      var classes = []
      if (this.small) classes.push('h-9')
--- a/client/components/ui/IconBtn.vue
+++ b/client/components/ui/IconBtn.vue
@@ -54,7 +54,7 @@ export default {
        return
      }
      e.preventDefault()
-      this.$emit('click')
+      this.$emit('click', e)
      e.stopPropagation()
    }
  },
--- a/client/components/ui/LibrariesDropdown.vue
+++ b/client/components/ui/LibrariesDropdown.vue
@@ -2,17 +2,17 @@
  <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
      <div class="flex items-center justify-center sm:justify-start">
-        <widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
+        <ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
        <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
      </div>
    </button>

    <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
        <template v-for="library in librariesFiltered">
-          <li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
+          <li :key="library.id" class="text-gray-400 hover:text-white select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="selectLibrary(library)">
            <div class="flex items-center px-2">
-              <widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
+              <ui-library-icon :icon="library.icon" class="mr-1.5" />
              <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
            </div>
          </li>
--- a/client/components/ui/LibraryIcon.vue
+++ b/client/components/ui/LibraryIcon.vue
@@ -0,0 +1,37 @@
+<template>
+  <div :class="`h-${size} w-${size} min-w-${size} text-${fontSize}`" class="flex items-center justify-center">
+    <span class="abs-icons" :class="`icon-${iconToUse}`"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: 'audiobookshelf'
+    },
+    fontSize: {
+      type: String,
+      default: 'lg'
+    },
+    size: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iconToUse() {
+      return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf'
+    },
+    icons() {
+      return this.$store.state.globals.libraryIcons
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/ui/MediaIconPicker.vue
+++ b/client/components/ui/MediaIconPicker.vue
@@ -3,19 +3,19 @@
    <p class="text-sm font-semibold">{{ label }}</p>

    <button type="button" :disabled="disabled" class="relative h-full w-full border border-gray-600 rounded shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer bg-primary text-gray-100 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
-      <span class="flex items-center">
-        <widgets-library-icon :icon="selected" />
-      </span>
+      <ui-library-icon :icon="selectedItem" />
    </button>

    <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
-        <template v-for="type in types">
-          <li :key="type.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400 flex justify-center" id="listbox-option-0" role="option" @click="select(type)">
-            <widgets-library-icon :icon="type.id" />
-          </li>
-        </template>
-      </ul>
+      <div v-show="showMenu" class="absolute -left-[4.5rem] z-10 -mt-px bg-primary border border-black-200 shadow-lg max-h-56 w-48 rounded-md py-1 overflow-auto focus:outline-none sm:text-sm">
+        <div class="flex justify-center items-center flex-wrap">
+          <template v-for="icon in icons">
+            <div :key="icon" class="p-2">
+              <span class="abs-icons text-xl text-white text-opacity-80 hover:text-opacity-100 cursor-pointer" :class="`icon-${icon}`" @click="select(icon)"></span>
+            </div>
+          </template>
+        </div>
+      </div>
    </transition>
  </div>
 </template>
@@ -37,29 +37,7 @@ export default {
        events: ['mousedown'],
        isActive: true
      },
-      showMenu: false,
-      types: [
-        {
-          id: 'database',
-          name: 'Database'
-        },
-        {
-          id: 'audiobook',
-          name: 'Audiobooks'
-        },
-        {
-          id: 'book',
-          name: 'Books'
-        },
-        {
-          id: 'podcast',
-          name: 'Podcasts'
-        },
-        {
-          id: 'comic',
-          name: 'Comics'
-        }
-      ]
+      showMenu: false
    }
  },
  computed: {
@@ -71,11 +49,11 @@ export default {
        this.$emit('input', val)
      }
    },
-    selectedItem() {
-      return this.types.find((t) => t.id === this.selected)
+    icons() {
+      return this.$store.state.globals.libraryIcons
    },
-    selectedName() {
-      return this.selectedItem ? this.selectedItem.name : 'Database'
+    selectedItem() {
+      return this.icons.find((i) => i === this.selected) || 'audiobookshelf'
    }
  },
  methods: {
@@ -86,9 +64,9 @@ export default {
    clickedOutside() {
      this.showMenu = false
    },
-    select(type) {
+    select(icon) {
      if (this.disabled) return
-      this.selected = type.id
+      this.selected = icon
      this.showMenu = false
    }
  },
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -5,9 +5,9 @@
      <form @submit.prevent="submitForm">
        <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
          <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
-            <div class="w-full h-full rounded-full absolute top-0 left-0 opacity-0 hover:opacity-100 px-1 bg-bg bg-opacity-75 flex items-center justify-end cursor-pointer">
-              <span v-if="showEdit" class="material-icons text-white hover:text-warning" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
-              <span class="material-icons text-white hover:text-error" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
+            <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100">
+              <span v-if="showEdit" class="material-icons text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
+              <span class="material-icons text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
            </div>
            {{ item }}
          </div>
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@@ -5,13 +5,13 @@
      <form @submit.prevent="submitForm">
        <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-0.5" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
          <div v-for="item in selected" :key="item.id" class="rounded-full px-2 py-0.5 m-0.5 text-xs bg-bg flex flex-nowrap whitespace-nowrap items-center justify-center relative min-w-12">
-            <div class="w-full h-full rounded-full absolute top-0 left-0 opacity-0 hover:opacity-100 px-1 bg-bg bg-opacity-75 flex items-center justify-end cursor-pointer">
+            <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 opacity-0 hover:opacity-100 px-1 bg-bg bg-opacity-75 flex items-center justify-end cursor-pointer">
              <span v-if="showEdit" class="material-icons text-white hover:text-warning mr-1" style="font-size: 1rem" @click.stop="editItem(item)">edit</span>
              <span class="material-icons text-white hover:text-error" style="font-size: 1.1rem" @click.stop="removeItem(item.id)">close</span>
            </div>
            {{ item[textKey] }}
          </div>
-          <div v-if="showEdit" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
+          <div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
            <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
          </div>
          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
--- a/client/components/widgets/EpisodeSlider.vue
+++ b/client/components/widgets/EpisodeSlider.vue
@@ -13,7 +13,22 @@
    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
      <div class="flex" :style="{ height: height + 'px' }">
        <template v-for="(item, index) in items">
-          <cards-lazy-book-card :key="item.recentEpisode.id" :ref="`slider-episode-${item.recentEpisode.id}`" :index="index" :book-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="bookshelfView" class="relative mx-2" @edit="editEpisode" @editPodcast="editPodcast" @select="selectItem" @hook:updated="setScrollVars" />
+          <cards-lazy-book-card
+            :key="item.recentEpisode.id"
+            :ref="`slider-episode-${item.recentEpisode.id}`"
+            :index="index"
+            :book-mount="item"
+            :height="cardHeight"
+            :width="cardWidth"
+            :book-cover-aspect-ratio="bookCoverAspectRatio"
+            :bookshelf-view="bookshelfView"
+            :continue-listening-shelf="continueListeningShelf"
+            class="relative mx-2"
+            @edit="editEpisode"
+            @editPodcast="editPodcast"
+            @select="selectItem"
+            @hook:updated="setScrollVars"
+          />
        </template>
      </div>
    </div>
@@ -34,7 +49,8 @@ export default {
    bookshelfView: {
      type: Number,
      default: 1
-    }
+    },
+    continueListeningShelf: Boolean
  },
  data() {
    return {
@@ -78,11 +94,8 @@ export default {
      this.$store.commit('setBookshelfBookIds', itemIds)
      this.$store.commit('showEditModal', libraryItem)
    },
-    selectItem(libraryItem) {
-      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
-      this.$nextTick(() => {
-        this.$eventBus.$emit('item-selected', libraryItem)
-      })
+    selectItem(payload) {
+      this.$emit('selectEntity', payload)
    },
    itemSelectedEvt() {
      this.updateSelectionMode(this.isSelectionMode)
@@ -137,11 +150,11 @@ export default {
    this.setScrollVars()
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    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('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@@ -13,7 +13,7 @@
    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
      <div class="flex" :style="{ height: height + 'px' }">
        <template v-for="(item, index) in items">
-          <cards-lazy-book-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :book-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="bookshelfView" class="relative mx-2" @edit="editItem" @select="selectItem" @hook:updated="setScrollVars" />
+          <cards-lazy-book-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :book-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="bookshelfView" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @edit="editItem" @select="selectItem" @hook:updated="setScrollVars" />
        </template>
      </div>
    </div>
@@ -34,7 +34,8 @@ export default {
    bookshelfView: {
      type: Number,
      default: 1
-    }
+    },
+    continueListeningShelf: Boolean
  },
  data() {
    return {
@@ -73,11 +74,8 @@ export default {
      this.$store.commit('setBookshelfBookIds', itemIds)
      this.$store.commit('showEditModal', libraryItem)
    },
-    selectItem(libraryItem) {
-      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
-      this.$nextTick(() => {
-        this.$eventBus.$emit('item-selected', libraryItem)
-      })
+    selectItem(payload) {
+      this.$emit('selectEntity', payload)
    },
    itemSelectedEvt() {
      this.updateSelectionMode(this.isSelectionMode)
@@ -132,11 +130,11 @@ export default {
    this.setScrollVars()
  },
  mounted() {
-    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+    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('bookshelf_clear_selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
--- a/client/components/widgets/LibraryIcon.vue
+++ b/client/components/widgets/LibraryIcon.vue
@@ -1,28 +0,0 @@
-<template>
-  <div :class="`h-${size} w-${size} min-w-${size}`">
-    <component :is="iconComponentName" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    icon: String,
-    size: {
-      type: Number,
-      default: 5
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    iconComponentName() {
-      if (this.icon === 'default') return `icons-database-svg`
-      return `icons-${this.icon}-svg`
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/widgets/MoreMenu.vue
+++ b/client/components/widgets/MoreMenu.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" style="top: 0; left: 0">
    <template v-for="(item, index) in items">
-      <div :key="index" class="flex h-7 items-center px-2 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.func)">
+      <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.func)">
        <p>{{ item.text }}</p>
      </div>
    </template>
--- a/client/components/widgets/NotificationWidget.vue
+++ b/client/components/widgets/NotificationWidget.vue
@@ -0,0 +1,25 @@
+<template>
+  <div v-if="tasksRunning" class="w-4 h-4 mx-3 relative">
+    <div class="flex h-full items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    tasks() {
+      return this.$store.state.tasks.tasks
+    },
+    tasksRunning() {
+      return this.tasks.some((t) => !t.isFinished)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/widgets/SeriesInputWidget.vue
+++ b/client/components/widgets/SeriesInputWidget.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" label="Series" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
+    <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" label="Series" :disabled="disabled" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />

    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
  </div>
@@ -12,7 +12,8 @@ export default {
    value: {
      type: Array,
      default: () => []
-    }
+    },
+    disabled: Boolean
  },
  data() {
    return {
--- a/client/components/widgets/SeriesSlider.vue
+++ b/client/components/widgets/SeriesSlider.vue
@@ -13,7 +13,7 @@
    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll -mx-2" style="scroll-behavior: smooth" @scroll="scrolled">
      <div class="flex" :style="{ height: height + 'px' }">
        <template v-for="(item, index) in items">
-          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.TITLES" class="relative mx-2" @hook:updated="setScrollVars" />
+          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative mx-2" @hook:updated="setScrollVars" />
        </template>
      </div>
    </div>
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -15,6 +15,7 @@
    <modals-podcast-edit-episode />
    <modals-podcast-view-episode />
    <modals-authors-edit-modal />
+    <modals-batch-quick-match-model />
    <prompt-confirm />
    <readers-reader />
  </div>
@@ -269,6 +270,14 @@ export default {

      this.$store.commit('scanners/addUpdate', data)
    },
+    taskStarted(task) {
+      console.log('Task started', task)
+      this.$store.commit('tasks/addUpdateTask', task)
+    },
+    taskFinished(task) {
+      console.log('Task finished', task)
+      this.$store.commit('tasks/addUpdateTask', task)
+    },
    userUpdated(user) {
      if (this.$store.state.user.user.id === user.id) {
        this.$store.commit('user/setUser', user)
@@ -301,53 +310,6 @@ export default {
      }
      this.$store.commit('user/removeCollection', collection)
    },
-    abmergeStarted(download) {
-      download.status = this.$constants.DownloadStatus.PENDING
-      download.toastId = this.$toast(`Preparing download "${download.filename}"`, { timeout: false, draggable: false, closeOnClick: false })
-      this.$store.commit('downloads/addUpdateDownload', download)
-    },
-    abmergeReady(download) {
-      download.status = this.$constants.DownloadStatus.READY
-      var existingDownload = this.$store.getters['downloads/getDownload'](download.id)
-
-      if (existingDownload && existingDownload.toastId !== undefined) {
-        download.toastId = existingDownload.toastId
-        this.$toast.update(existingDownload.toastId, { content: `Download "${download.filename}" is ready!`, options: { timeout: 5000, type: 'success' } }, true)
-      } else {
-        this.$toast.success(`Download "${download.filename}" is ready!`)
-      }
-      this.$store.commit('downloads/addUpdateDownload', download)
-    },
-    abmergeFailed(download) {
-      download.status = this.$constants.DownloadStatus.FAILED
-      var existingDownload = this.$store.getters['downloads/getDownload'](download.id)
-
-      var failedMsg = download.isTimedOut ? 'timed out' : 'failed'
-
-      if (existingDownload && existingDownload.toastId !== undefined) {
-        download.toastId = existingDownload.toastId
-        this.$toast.update(existingDownload.toastId, { content: `Download "${download.filename}" ${failedMsg}`, options: { timeout: 5000, type: 'error' } }, true)
-      } else {
-        console.warn('Download failed no existing download', existingDownload)
-        this.$toast.error(`Download "${download.filename}" ${failedMsg}`)
-      }
-      this.$store.commit('downloads/addUpdateDownload', download)
-    },
-    abmergeKilled(download) {
-      var existingDownload = this.$store.getters['downloads/getDownload'](download.id)
-      if (existingDownload && existingDownload.toastId !== undefined) {
-        download.toastId = existingDownload.toastId
-        this.$toast.update(existingDownload.toastId, { content: `Download "${download.filename}" was terminated`, options: { timeout: 5000, type: 'error' } }, true)
-      } else {
-        console.warn('Download killed no existing download found', existingDownload)
-        this.$toast.error(`Download "${download.filename}" was terminated`)
-      }
-      this.$store.commit('downloads/removeDownload', download)
-    },
-    abmergeExpired(download) {
-      download.status = this.$constants.DownloadStatus.EXPIRED
-      this.$store.commit('downloads/addUpdateDownload', download)
-    },
    rssFeedOpen(data) {
      this.$store.commit('feeds/addFeed', data)
    },
@@ -358,6 +320,18 @@ export default {
      // Force refresh
      location.reload()
    },
+    batchQuickMatchComplete(result) {
+      var success = result.success || false
+      var toast = 'Batch quick match complete!\n' + result.updates + ' Updated'
+      if (result.unmatched && result.unmatched > 0) {
+        toast += '\n' + result.unmatched + ' with no matches'
+      }
+      if (success) {
+        this.$toast.success(toast)
+      } else {
+        this.$toast.info(toast)
+      }
+    },
    initializeSocket() {
      this.socket = this.$nuxtSocket({
        name: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
@@ -417,18 +391,17 @@ export default {
      this.socket.on('scan_complete', this.scanComplete)
      this.socket.on('scan_progress', this.scanProgress)

-      // Download Listeners
-      this.socket.on('abmerge_started', this.abmergeStarted)
-      this.socket.on('abmerge_ready', this.abmergeReady)
-      this.socket.on('abmerge_failed', this.abmergeFailed)
-      this.socket.on('abmerge_killed', this.abmergeKilled)
-      this.socket.on('abmerge_expired', this.abmergeExpired)
+      // Task Listeners
+      this.socket.on('task_started', this.taskStarted)
+      this.socket.on('task_finished', this.taskFinished)

      // Feed Listeners
      this.socket.on('rss_feed_open', this.rssFeedOpen)
      this.socket.on('rss_feed_closed', this.rssFeedClosed)

      this.socket.on('backup_applied', this.backupApplied)
+
+      this.socket.on('batch_quickmatch_complete', this.batchQuickMatchComplete)
    },
    showUpdateToast(versionData) {
      var ignoreVersion = localStorage.getItem('ignoreVersion')
@@ -501,7 +474,7 @@ export default {
      if (this.$store.getters['getNumLibraryItemsSelected'] && name === 'Escape') {
        // ESCAPE key cancels batch selection
        this.$store.commit('setSelectedLibraryItems', [])
-        this.$eventBus.$emit('bookshelf-clear-selection')
+        this.$eventBus.$emit('bookshelf_clear_selection')
        e.preventDefault()
        return
      }
@@ -533,6 +506,19 @@ export default {
      // Queue auto play
      var playerQueueAutoPlay = localStorage.getItem('playerQueueAutoPlay')
      this.$store.commit('setPlayerQueueAutoPlay', playerQueueAutoPlay !== '0')
+    },
+    loadTasks() {
+      this.$axios
+        .$get('/api/tasks')
+        .then((payload) => {
+          console.log('Fetched tasks', payload)
+          if (payload.tasks) {
+            this.$store.commit('tasks/setTasks', payload.tasks)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to load tasks', error)
+        })
    }
  },
  beforeMount() {
@@ -550,6 +536,8 @@ export default {

    this.checkVersionUpdate()

+    this.loadTasks()
+
    if (this.$route.query.error) {
      this.$toast.error(this.$route.query.error)
      this.$router.replace(this.$route.path)
--- a/client/middleware/authenticated.js
+++ b/client/middleware/authenticated.js
@@ -4,6 +4,6 @@ export default function ({ store, redirect, route, app }) {
    if (route.name === 'batch' || route.name === 'index') {
      return redirect('/login')
    }
-    return redirect(`/login?redirect=${route.fullPath}`)
+    return redirect(`/login?redirect=${encodeURIComponent(route.fullPath)}`)
  }
 }
--- a/client/mixins/bookshelfCardsHelpers.js
+++ b/client/mixins/bookshelfCardsHelpers.js
@@ -59,6 +59,8 @@ export default {
      if (this.entityName === 'books') {
        props.filterBy = this.filterBy
        props.orderBy = this.orderBy
+      } else if (this.entityName === 'series') {
+        props.orderBy = this.seriesSortBy
      }

      var _this = this
@@ -68,8 +70,8 @@ export default {
          this.$on('edit', (entity) => {
            if (_this.editEntity) _this.editEntity(entity)
          })
-          this.$on('select', (entity) => {
-            if (_this.selectEntity) _this.selectEntity(entity)
+          this.$on('select', ({ entity, shiftKey }) => {
+            if (_this.selectEntity) _this.selectEntity(entity, shiftKey)
          })
        }
      })
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@@ -6,13 +6,14 @@ module.exports = {
  target: 'static',
  dev: process.env.NODE_ENV !== 'production',
  env: {
-    serverUrl: process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3333',
+    serverUrl: process.env.NODE_ENV === 'production' ? process.env.ROUTER_BASE_PATH || '' : 'http://localhost:3333',
    chromecastReceiver: 'FD1F76C5'
  },
  telemetry: false,

  publicRuntimeConfig: {
-    version: pkg.version
+    version: pkg.version,
+    routerBasePath: process.env.ROUTER_BASE_PATH || ''
  },

  // Global page headers: https://go.nuxtjs.dev/config-head
@@ -28,15 +29,17 @@ module.exports = {
    ],
    script: [
      {
-        src: '/libs/sortable.js'
+        src: (process.env.ROUTER_BASE_PATH || '') + '/libs/sortable.js'
      }
    ],
    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' }
    ]
  },

-  router: {},
+  router: {
+    base: process.env.ROUTER_BASE_PATH || ''
+  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
@@ -73,8 +76,7 @@ module.exports = {
  proxy: {
    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } },
    '/ebook/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/s/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/metadata/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' }
+    '/s/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' + process.env : '/' },
  },

  io: {
@@ -89,7 +91,7 @@ module.exports = {

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
-    baseURL: process.env.serverUrl || ''
+    baseURL: process.env.ROUTER_BASE_PATH || ''
  },

  // nuxt/pwa https://pwa.nuxtjs.org
@@ -109,15 +111,15 @@ module.exports = {
      background_color: '#373838',
      icons: [
        {
-          src: '/icon.svg',
+          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
          sizes: "64x64"
        },
        {
-          src: '/icon.svg',
+          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
          sizes: "192x192"
        },
        {
-          src: '/icon.svg',
+          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
          sizes: "512x512"
        }
      ]
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "audiobookshelf-client",
-  "version": "2.1.5",
+  "version": "2.2.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "audiobookshelf-client",
-      "version": "2.1.5",
+      "version": "2.2.2",
      "license": "ISC",
      "dependencies": {
        "@nuxtjs/axios": "^5.13.6",
@@ -20,7 +20,7 @@
        "nuxt-socket-io": "^1.1.18",
        "trix": "^1.3.1",
        "v-click-outside": "^3.1.2",
-        "vue-pdf": "^4.3.0",
+        "vue-pdf": "^4.2.0",
        "vue-toastification": "^1.7.11",
        "vuedraggable": "^2.24.3"
      },
@@ -15879,14 +15879,14 @@
      "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
    },
    "node_modules/vue-pdf": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.3.0.tgz",
-      "integrity": "sha512-zd3lJj6CbtrawgaaDDciTDjkJMUKiLWtbEmBg5CvFn9Noe9oAO/GNy/fc5c59qGuFCJ14ibIV1baw4S07e5bSQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.2.0.tgz",
+      "integrity": "sha512-GpAbZfM48Hom1R8f4XL5ZzoVBLlbyy+4z0VYmTQORVOSieVIIu+XtnNl0RY6EXg60Qni6T6nIgrmsCcCkWv39A==",
      "dependencies": {
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "loader-utils": "^1.4.0",
-        "pdfjs-dist": "2.6.347",
-        "raw-loader": "^4.0.2",
+        "pdfjs-dist": "^2.5.207",
+        "raw-loader": "^4.0.1",
        "vue-resize-sensor": "^2.0.0",
        "worker-loader": "^2.0.0"
      }
@@ -29629,14 +29629,14 @@
      "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
    },
    "vue-pdf": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.3.0.tgz",
-      "integrity": "sha512-zd3lJj6CbtrawgaaDDciTDjkJMUKiLWtbEmBg5CvFn9Noe9oAO/GNy/fc5c59qGuFCJ14ibIV1baw4S07e5bSQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.2.0.tgz",
+      "integrity": "sha512-GpAbZfM48Hom1R8f4XL5ZzoVBLlbyy+4z0VYmTQORVOSieVIIu+XtnNl0RY6EXg60Qni6T6nIgrmsCcCkWv39A==",
      "requires": {
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "loader-utils": "^1.4.0",
-        "pdfjs-dist": "2.6.347",
-        "raw-loader": "^4.0.2",
+        "pdfjs-dist": "^2.5.207",
+        "raw-loader": "^4.0.1",
        "vue-resize-sensor": "^2.0.0",
        "worker-loader": "^2.0.0"
      },
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-client",
-  "version": "2.1.5",
+  "version": "2.2.2",
  "description": "Self-hosted audiobook and podcast client",
  "main": "index.js",
  "scripts": {
@@ -24,7 +24,7 @@
    "nuxt-socket-io": "^1.1.18",
    "trix": "^1.3.1",
    "v-click-outside": "^3.1.2",
-    "vue-pdf": "^4.3.0",
+    "vue-pdf": "^4.2.0",
    "vue-toastification": "^1.7.11",
    "vuedraggable": "^2.24.3"
  },
--- a/client/pages/audiobook/_id/chapters.vue
+++ b/client/pages/audiobook/_id/chapters.vue
@@ -9,7 +9,7 @@
      </button>
      <div class="flex-grow" />
      <p class="text-base">Duration:</p>
-      <p class="text-base font-mono ml-8">{{ mediaDuration }}</p>
+      <p class="text-base font-mono ml-8">{{ $secondsToTimestamp(mediaDurationRounded) }}</p>
    </div>

    <div class="flex flex-wrap-reverse justify-center py-4">
@@ -18,11 +18,35 @@
          <p class="text-lg mb-4 font-semibold">Audiobook Chapters</p>
          <div class="flex-grow" />
          <ui-checkbox v-model="showSecondInputs" checkbox-bg="primary" small label-class="text-sm text-gray-200 pl-1" label="Show seconds" class="mx-2" />
+          <div class="w-40" />
+        </div>
+        <div class="flex items-center mb-3 py-1">
+          <div class="flex-grow" />
+          <ui-btn v-if="newChapters.length > 1" :color="showShiftTimes ? 'bg' : 'primary'" small @click="showShiftTimes = !showShiftTimes">Shift Times</ui-btn>
          <ui-btn color="primary" small class="mx-2" @click="showFindChaptersModal = true">Lookup</ui-btn>
          <ui-btn color="success" small @click="saveChapters">Save</ui-btn>
          <div class="w-40" />
        </div>

+        <div class="overflow-hidden">
+          <transition name="slide">
+            <div v-if="showShiftTimes" class="flex mb-4">
+              <div class="w-12"></div>
+              <div class="flex-grow">
+                <div class="flex items-center">
+                  <p class="text-sm mb-1 font-semibold pr-2">Time to shift in seconds</p>
+                  <ui-text-input v-model="shiftAmount" type="number" class="max-w-20" style="height: 30px" />
+                  <ui-btn color="primary" class="mx-1" small @click="shiftChapterTimes">Add</ui-btn>
+                  <div class="flex-grow" />
+                  <span class="material-icons text-gray-200 hover:text-white cursor-pointer" @click="showShiftTimes = false">close</span>
+                </div>
+                <p class="text-xs py-1.5 text-gray-300 max-w-md">Note: First chapter start time must remain at 0:00 and the last chapter start time cannot exceed this audiobooks duration.</p>
+              </div>
+              <div class="w-40"></div>
+            </div>
+          </transition>
+        </div>
+
        <div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
          <div class="w-12"></div>
          <div class="w-32 px-2">Start</div>
@@ -81,7 +105,7 @@
              <p class="text-xs truncate max-w-sm">{{ track.metadata.filename }}</p>
            </div>
            <div class="w-20" style="min-width: 80px">
-              <p class="text-xs font-mono text-gray-200">{{ track.duration }}</p>
+              <p class="text-xs font-mono text-gray-200">{{ $secondsToTimestamp(Math.round(track.duration), false, true) }}</p>
            </div>
            <div class="w-20 flex justify-center" style="min-width: 80px">
              <span v-if="(track.chapters || []).length" class="material-icons text-success text-sm">check</span>
@@ -104,13 +128,24 @@
      <div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative">
        <div v-if="!chapterData" class="flex p-20">
          <ui-text-input-with-label v-model="asinInput" label="ASIN" />
-          <ui-btn small color="primary" class="mt-5 ml-2" @click="findChapters">Find</ui-btn>
+          <ui-dropdown v-model="regionInput" label="Region" small :items="audibleRegions" class="w-32 mx-1" />
+          <ui-btn small color="primary" class="mt-5" @click="findChapters">Find</ui-btn>
        </div>
        <div v-else class="w-full p-4">
-          <p class="mb-4">Duration found: {{ chapterData.runtimeLengthSec }}</p>
-          <div v-if="chapterData.runtimeLengthSec > mediaDuration" class="w-full bg-error bg-opacity-25 p-4 text-center mb-2 rounded border border-white border-opacity-10 text-gray-100 text-sm">
-            <p>Chapter data invalid duration<br />Your media duration is shorter than duration found</p>
+          <div class="flex justify-between mb-4">
+            <p>
+              Duration found: <span class="font-semibold">{{ $secondsToTimestamp(chapterData.runtimeLengthSec) }}</span
+              ><br />
+              <span class="font-semibold" :class="{ 'text-warning': chapters.length !== chapterData.chapters.length }">{{ chapterData.chapters.length }}</span> chapters found
+            </p>
+            <p>
+              Your audiobook duration: <span class="font-semibold">{{ $secondsToTimestamp(mediaDurationRounded) }}</span
+              ><br />
+              Your audiobook has <span class="font-semibold" :class="{ 'text-warning': chapters.length !== chapterData.chapters.length }">{{ chapters.length }}</span> chapters
+            </p>
          </div>
+          <widgets-alert v-if="chapterData.runtimeLengthSec > mediaDurationRounded" type="warning" class="mb-2"> Your audiobook duration is shorter than duration found </widgets-alert>
+          <widgets-alert v-else-if="chapterData.runtimeLengthSec < mediaDurationRounded" type="warning" class="mb-2"> Your audiobook duration is longer than the duration found </widgets-alert>

          <div class="flex py-0.5 text-xs font-semibold uppercase text-gray-300 mb-1">
            <div class="w-24 px-2">Start</div>
@@ -126,7 +161,21 @@
              </div>
            </div>
          </div>
-          <div class="flex pt-2">
+          <div v-if="chapterData.runtimeLengthSec > mediaDurationRounded" class="w-full pt-2">
+            <div class="flex items-center">
+              <div class="w-2 h-2 bg-warning bg-opacity-50" />
+              <p class="pl-2">Chapter end is after the end of your audiobook</p>
+            </div>
+            <div class="flex items-center">
+              <div class="w-2 h-2 bg-error bg-opacity-50" />
+              <p class="pl-2">Chapter start is after the end of your audiobook</p>
+            </div>
+          </div>
+          <div class="flex items-center pt-2">
+            <ui-btn small color="primary" class="mr-1" @click="applyChapterNamesOnly">Map Chapter Titles</ui-btn>
+            <ui-tooltip text="Map chapter titles to your existing audiobook chapters without adjusting timestamps" direction="top">
+              <span class="material-icons-outlined">info</span>
+            </ui-tooltip>
            <div class="flex-grow" />
            <ui-btn small color="success" @click="applyChapterData">Apply Chapters</ui-btn>
          </div>
@@ -166,16 +215,20 @@ export default {
    return {
      newChapters: [],
      selectedChapter: null,
+      showShiftTimes: false,
+      shiftAmount: 0,
      audioEl: null,
      isPlayingChapter: false,
      isLoadingChapter: false,
      currentTrackIndex: 0,
      saving: false,
      asinInput: null,
+      regionInput: 'US',
      findingChapters: false,
      showFindChaptersModal: false,
      chapterData: null,
-      showSecondInputs: false
+      showSecondInputs: false,
+      audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES']
    }
  },
  computed: {
@@ -197,6 +250,9 @@ export default {
    mediaDuration() {
      return this.media.duration
    },
+    mediaDurationRounded() {
+      return Math.round(this.mediaDuration)
+    },
    chapters() {
      return this.media.chapters || []
    },
@@ -214,6 +270,32 @@ export default {
    }
  },
  methods: {
+    shiftChapterTimes() {
+      if (!this.shiftAmount || isNaN(this.shiftAmount) || this.newChapters.length <= 1) {
+        return
+      }
+
+      const amount = Number(this.shiftAmount)
+
+      const lastChapter = this.newChapters[this.newChapters.length - 1]
+      if (lastChapter.start + amount > this.mediaDurationRounded) {
+        this.$toast.error('Invalid shift amount. Last chapter start time would extend beyond the duration of this audiobook.')
+        return
+      }
+
+      if (this.newChapters[0].end + amount <= 0) {
+        this.$toast.error('Invalid shift amount. First chapter would have zero or negative length.')
+        return
+      }
+
+      for (let i = 0; i < this.newChapters.length; i++) {
+        const chap = this.newChapters[i]
+        chap.end = Math.min(chap.end + amount, this.mediaDuration)
+        if (i > 0) {
+          chap.start = Math.max(0, chap.start + amount)
+        }
+      }
+    },
    editItem() {
      this.$store.commit('showEditModal', this.libraryItem)
    },
@@ -281,7 +363,7 @@ export default {
      const audioEl = this.audioEl || document.createElement('audio')
      var src = audioTrack.contentUrl + `?token=${this.userToken}`
      if (this.$isDev) {
-        src = `http://localhost:3333${src}`
+        src = `http://localhost:3333${this.$config.routerBasePath}${src}`
      }
      console.log('src', src)

@@ -369,6 +451,16 @@ export default {
          this.$toast.error('Failed to update chapters')
        })
    },
+    applyChapterNamesOnly() {
+      this.newChapters.forEach((chapter, index) => {
+        if (this.chapterData.chapters[index]) {
+          chapter.title = this.chapterData.chapters[index].title
+        }
+      })
+
+      this.showFindChaptersModal = false
+      this.chapterData = null
+    },
    applyChapterData() {
      var index = 0
      this.newChapters = this.chapterData.chapters
@@ -390,10 +482,16 @@ export default {
        this.$toast.error('Must input an ASIN')
        return
      }
+
+      // Update local storage region
+      if (this.regionInput !== localStorage.getItem('audibleRegion')) {
+        localStorage.setItem('audibleRegion', this.regionInput)
+      }
+
      this.findingChapters = true
      this.chapterData = null
      this.$axios
-        .$get(`/api/search/chapters?asin=${this.asinInput}`)
+        .$get(`/api/search/chapters?asin=${this.asinInput}&region=${this.regionInput}`)
        .then((data) => {
          this.findingChapters = false

@@ -414,6 +512,7 @@ export default {
    }
  },
  mounted() {
+    this.regionInput = localStorage.getItem('audibleRegion') || 'US'
    this.asinInput = this.mediaMetadata.asin || null
    this.newChapters = this.chapters.map((c) => ({ ...c }))
    if (!this.newChapters.length) {
--- a/client/pages/audiobook/_id/manage.vue
+++ b/client/pages/audiobook/_id/manage.vue
@@ -0,0 +1,366 @@
+<template>
+  <div id="page-wrapper" class="bg-bg page p-8 overflow-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
+    <div class="flex items-center justify-center mb-6">
+      <div class="w-full max-w-2xl">
+        <p class="text-2xl mb-2">Audiobook File Management Tools</p>
+      </div>
+      <div class="w-full max-w-2xl">
+        <div class="flex justify-end">
+          <ui-dropdown v-model="selectedTool" :items="availableTools" :disabled="processing" class="max-w-sm" @input="selectedToolUpdated" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-center">
+      <div class="w-full max-w-2xl">
+        <p class="text-xl mb-1">Metadata to embed</p>
+        <p class="mb-2 text-base text-gray-300">audiobookshelf uses <a href="https://github.com/sandreas/tone" target="_blank" class="hover:underline text-blue-400 hover:text-blue-300">tone</a> to write metadata.</p>
+      </div>
+      <div class="w-full max-w-2xl"></div>
+    </div>
+
+    <div class="flex justify-center flex-wrap">
+      <div class="w-full max-w-2xl border border-white border-opacity-10 bg-bg mx-2">
+        <div class="flex py-2 px-4">
+          <div class="w-1/3 text-xs font-semibold uppercase text-gray-200">Meta Tag</div>
+          <div class="w-2/3 text-xs font-semibold uppercase text-gray-200">Value</div>
+        </div>
+        <div class="w-full max-h-72 overflow-auto">
+          <template v-for="(value, key, index) in toneObject">
+            <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
+              <div class="w-1/3 font-semibold">{{ key }}</div>
+              <div class="w-2/3">
+                {{ value }}
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="w-full max-w-2xl border border-white border-opacity-10 bg-bg mx-2">
+        <div class="flex py-2 px-4 bg-primary bg-opacity-25">
+          <div class="flex-grow text-xs font-semibold uppercase text-gray-200">Chapter Title</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">Start</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">End</div>
+        </div>
+        <div class="w-full max-h-72 overflow-auto">
+          <p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">No chapters</p>
+          <template v-for="(chapter, index) in metadataChapters">
+            <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary bg-opacity-25' : ''">
+              <div class="flex-grow font-semibold">{{ chapter.title }}</div>
+              <div class="w-24">
+                {{ $secondsToTimestamp(chapter.start) }}
+              </div>
+              <div class="w-24">
+                {{ $secondsToTimestamp(chapter.end) }}
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full h-px bg-white bg-opacity-10 my-8" />
+
+    <div class="w-full max-w-4xl mx-auto">
+      <div v-if="selectedTool === 'embed'" class="w-full flex justify-end items-center mb-4">
+        <ui-btn v-if="!isFinished" color="primary" :loading="processing" @click.stop="embedClick">Start Metadata Embed</ui-btn>
+        <p v-else class="text-success text-lg font-semibold">Embed Finished!</p>
+      </div>
+      <div v-else class="w-full flex justify-end items-center mb-4">
+        <ui-btn v-if="!isTaskFinished && processing" color="error" :loading="isCancelingEncode" class="mr-2" @click.stop="cancelEncodeClick">Cancel Encode</ui-btn>
+        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" @click.stop="encodeM4bClick">Start M4B Encode</ui-btn>
+        <p v-else-if="taskFailed" class="text-error text-lg font-semibold">M4B Failed! {{ taskError }}</p>
+        <p v-else class="text-success text-lg font-semibold">M4B Finished!</p>
+      </div>
+
+      <div class="mb-4">
+        <div v-if="selectedTool === 'embed'" class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">Metadata will be embedded on the audio tracks inside your audiobook folder.</p>
+        </div>
+        <div v-else class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">
+            Finished M4B will be put into your audiobook folder at <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">.../{{ libraryItemRelPath }}/</span>.
+          </p>
+        </div>
+
+        <div class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">
+            A backup of your original audio files will be stored in <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">/metadata/cache/items/{{ libraryItemId }}/</span>. Make sure to periodically purge items cache.
+          </p>
+        </div>
+        <div v-if="selectedTool === 'embed' && audioFiles.length > 1" class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">Chapters are not embedded in multi-track audiobooks.</p>
+        </div>
+        <div v-if="selectedTool === 'm4b'" class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">Encoding can take up to 30 minutes.</p>
+        </div>
+        <div v-if="selectedTool === 'm4b'" class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">If you have the watcher disabled you will need to re-scan this audiobook afterwards.</p>
+        </div>
+        <div class="flex items-start mb-2">
+          <span class="material-icons text-base text-warning pt-1">star</span>
+          <p class="text-gray-200 ml-2">Once the task is started you can navigate away from this page.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full max-w-4xl mx-auto">
+      <p class="mb-2 font-semibold">Audio Tracks</p>
+      <div class="w-full mx-auto border border-white border-opacity-10 bg-bg">
+        <div class="flex py-2 px-4 bg-primary bg-opacity-25">
+          <div class="w-10 text-xs font-semibold text-gray-200">#</div>
+          <div class="flex-grow text-xs font-semibold uppercase text-gray-200">Filename</div>
+          <div class="w-16 text-xs font-semibold uppercase text-gray-200">Size</div>
+          <div class="w-24"></div>
+        </div>
+        <template v-for="file in audioFiles">
+          <div :key="file.index" class="flex py-2 px-4 text-sm" :class="file.index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
+            <div class="w-10">{{ file.index }}</div>
+            <div class="flex-grow">
+              {{ file.metadata.filename }}
+            </div>
+            <div class="w-16 font-mono text-gray-200">
+              {{ $bytesPretty(file.metadata.size) }}
+            </div>
+            <div class="w-24">
+              <div class="flex justify-center">
+                <span v-if="audiofilesFinished[file.ino]" class="material-icons text-xl text-success leading-none">check_circle</span>
+                <div v-else-if="audiofilesEncoding[file.ino]">
+                  <widgets-loading-spinner />
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, app, redirect, route }) {
+    if (!store.state.user.user) {
+      return redirect(`/login?redirect=${route.path}`)
+    }
+    if (!store.getters['user/getIsAdminOrUp']) {
+      return redirect('/?error=unauthorized')
+    }
+    var libraryItem = await app.$axios.$get(`/api/items/${params.id}?expanded=1`).catch((error) => {
+      console.error('Failed', error)
+      return false
+    })
+    if (!libraryItem) {
+      console.error('Not found...', params.id)
+      return redirect('/?error=not found')
+    }
+    if (libraryItem.mediaType !== 'book') {
+      console.error('Invalid media type')
+      return redirect('/?error=invalid media type')
+    }
+    if (!libraryItem.media.audioFiles.length) {
+      cnosole.error('No audio files')
+      return redirect('/?error=no audio files')
+    }
+    return {
+      libraryItem
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      audiofilesEncoding: {},
+      audiofilesFinished: {},
+      isFinished: false,
+      toneObject: null,
+      selectedTool: 'embed',
+      isCancelingEncode: false
+    }
+  },
+  watch: {
+    task: {
+      handler(newVal) {
+        if (newVal) {
+          this.taskUpdated(newVal)
+        }
+      }
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    libraryItemRelPath() {
+      return this.libraryItem.relPath
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    audioFiles() {
+      return (this.media.audioFiles || []).filter((af) => !af.exclude && !af.invalid)
+    },
+    isSingleM4b() {
+      return this.audioFiles.length === 1 && this.audioFiles[0].metadata.ext.toLowerCase() === '.m4b'
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    metadataChapters() {
+      return this.media.chapters || []
+    },
+    availableTools() {
+      if (this.isSingleM4b) {
+        return [{ value: 'embed', text: 'Embed Metadata' }]
+      } else {
+        return [
+          { value: 'embed', text: 'Embed Metadata' },
+          { value: 'm4b', text: 'M4B Encoder' }
+        ]
+      }
+    },
+    taskFailed() {
+      return this.isTaskFinished && this.task.isFailed
+    },
+    taskError() {
+      return this.taskFailed ? this.task.error || 'Unknown Error' : null
+    },
+    isTaskFinished() {
+      return this.task && this.task.isFinished
+    },
+    task() {
+      return this.$store.getters['tasks/getTaskByLibraryItemId'](this.libraryItemId)
+    },
+    taskRunning() {
+      return this.task && !this.task.isFinished
+    }
+  },
+  methods: {
+    cancelEncodeClick() {
+      this.isCancelingEncode = true
+      this.$axios
+        .$post(`/api/encode-m4b/${this.libraryItemId}/cancel`)
+        .then(() => {
+          this.$toast.success('Encode canceled')
+        })
+        .catch((error) => {
+          console.error('Failed to cancel encode', error)
+          this.$toast.error('Failed to cancel encode')
+        })
+        .finally(() => {
+          this.isCancelingEncode = false
+        })
+    },
+    encodeM4bClick() {
+      this.processing = true
+      this.$axios
+        .$get(`/api/encode-m4b/${this.libraryItemId}`)
+        .then(() => {
+          console.log('Ab m4b merge started')
+        })
+        .catch((error) => {
+          var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.processing = true
+        })
+    },
+    embedClick() {
+      const payload = {
+        message: `Are you sure you want to embed metadata in ${this.audioFiles.length} audio files?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.updateAudioFileMetadata()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    updateAudioFileMetadata() {
+      this.processing = true
+      this.$axios
+        .$get(`/api/items/${this.libraryItemId}/audio-metadata?tone=1`)
+        .then(() => {
+          console.log('Audio metadata encode started')
+        })
+        .catch((error) => {
+          console.error('Audio metadata encode failed', error)
+          this.processing = false
+        })
+    },
+    audioMetadataStarted(data) {
+      console.log('audio metadata started', data)
+      if (data.libraryItemId !== this.libraryItemId) return
+      this.audiofilesFinished = {}
+    },
+    audioMetadataFinished(data) {
+      console.log('audio metadata finished', data)
+      if (data.libraryItemId !== this.libraryItemId) return
+      this.processing = false
+      this.isFinished = true
+      this.audiofilesEncoding = {}
+      this.$toast.success('Audio file metadata updated')
+    },
+    audiofileMetadataStarted(data) {
+      if (data.libraryItemId !== this.libraryItemId) return
+      this.$set(this.audiofilesEncoding, data.ino, true)
+    },
+    audiofileMetadataFinished(data) {
+      if (data.libraryItemId !== this.libraryItemId) return
+      this.$set(this.audiofilesEncoding, data.ino, false)
+      this.$set(this.audiofilesFinished, data.ino, true)
+    },
+    selectedToolUpdated() {
+      let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + `?tool=${this.selectedTool}`
+      window.history.replaceState({ path: newurl }, '', newurl)
+    },
+    init() {
+      this.fetchToneObject()
+      if (this.$route.query.tool === 'm4b') {
+        if (this.availableTools.some((t) => t.value === 'm4b')) {
+          this.selectedTool = 'm4b'
+        } else {
+          this.selectedToolUpdated()
+        }
+      }
+
+      if (this.task) this.taskUpdated(this.task)
+    },
+    fetchToneObject() {
+      this.$axios
+        .$get(`/api/items/${this.libraryItemId}/tone-object`)
+        .then((toneObject) => {
+          delete toneObject.CoverFile
+          this.toneObject = toneObject
+        })
+        .catch((error) => {
+          console.error('Failed to fetch tone object', error)
+        })
+    },
+    taskUpdated(task) {
+      this.processing = !task.isFinished
+    }
+  },
+  mounted() {
+    this.init()
+    this.$root.socket.on('audio_metadata_started', this.audioMetadataStarted)
+    this.$root.socket.on('audio_metadata_finished', this.audioMetadataFinished)
+    this.$root.socket.on('audiofile_metadata_started', this.audiofileMetadataStarted)
+    this.$root.socket.on('audiofile_metadata_finished', this.audiofileMetadataFinished)
+  },
+  beforeDestroy() {
+    this.$root.socket.off('audio_metadata_started', this.audioMetadataStarted)
+    this.$root.socket.off('audio_metadata_finished', this.audioMetadataFinished)
+    this.$root.socket.off('audiofile_metadata_started', this.audiofileMetadataStarted)
+    this.$root.socket.off('audiofile_metadata_finished', this.audiofileMetadataFinished)
+  }
+}
+</script>
--- a/client/pages/author/_id.vue
+++ b/client/pages/author/_id.vue
@@ -44,7 +44,7 @@
 <script>
 export default {
  async asyncData({ store, app, params, redirect }) {
-    const author = await app.$axios.$get(`/api/authors/${params.id}?include=items,series`).catch((error) => {
+    const author = await app.$axios.$get(`/api/authors/${params.id}?library=${store.state.libraries.currentLibraryId}&include=items,series`).catch((error) => {
      console.error('Failed to get author', error)
      return null
    })
--- a/client/pages/config/backups.vue
+++ b/client/pages/config/backups.vue
@@ -25,7 +25,9 @@
      <div class="flex items-center py-2">
        <ui-text-input type="number" v-model="backupsToKeep" no-spinner :disabled="updatingServerSettings" :padding-x="1" text-center class="w-10" @change="updateBackupsSettings" />

-        <p class="pl-4 text-lg">Number of backups to keep</p>
+        <ui-tooltip :text="numBackupsToKeepTooltip">
+          <p class="pl-4 text-lg">Number of backups to keep <span class="material-icons icon-text">info_outlined</span></p>
+        </ui-tooltip>
      </div>

      <div class="flex items-center py-2">
@@ -53,7 +55,10 @@ export default {
      maxBackupSize: 1,
      cronExpression: '',
      newServerSettings: {},
-      showCronBuilder: false
+      showCronBuilder: false,
+      backupsTooltip: 'Backups saved in /metadata/backups',
+      numBackupsToKeepTooltip: 'Only 1 backup will be removed at a time so if you already have more backups than this you should manually remove them.',
+      maxBackupSizeTooltip: 'As a safeguard against misconfiguration, backups will fail if they exceed the configured size.'
    }
  },
  watch: {
@@ -65,12 +70,6 @@ export default {
    }
  },
  computed: {
-    backupsTooltip() {
-      return 'Backups saved in /metadata/backups'
-    },
-    maxBackupSizeTooltip() {
-      return 'As a safeguard against misconfiguration, backups will fail if they exceed the configured size.'
-    },
    serverSettings() {
      return this.$store.state.serverSettings
    },
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -53,20 +53,20 @@
          </div>

          <div class="flex items-center py-2">
-            <ui-toggle-switch v-model="homeUseAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateHomeAlternativeBookshelfView" />
+            <ui-toggle-switch v-model="homepageUseBookshelfView" :disabled="updatingServerSettings" @input="updateHomeUseBookshelfView" />
            <ui-tooltip :text="tooltips.bookshelfView">
              <p class="pl-4">
-                Alternative bookshelf view for home page
+                Home page use bookshelf view
                <span class="material-icons icon-text text-sm">info_outlined</span>
              </p>
            </ui-tooltip>
          </div>

          <div class="flex items-center py-2">
-            <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
+            <ui-toggle-switch v-model="useBookshelfView" :disabled="updatingServerSettings" @input="updateUseBookshelfView" />
            <ui-tooltip :text="tooltips.bookshelfView">
              <p class="pl-4">
-                Alternative bookshelf view
+                Library use bookshelf view
                <span class="material-icons icon-text text-sm">info_outlined</span>
              </p>
            </ui-tooltip>
@@ -172,17 +172,15 @@
          </div>

          <div class="flex items-center py-2">
-            <div class="flex items-center">
-              <ui-toggle-switch v-model="showExperimentalFeatures" />
-              <ui-tooltip :text="tooltips.experimentalFeatures">
-                <p class="pl-4">
-                  Experimental Features
-                  <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
-                    <span class="material-icons icon-text text-sm">info_outlined</span>
-                  </a>
-                </p>
-              </ui-tooltip>
-            </div>
+            <ui-toggle-switch v-model="showExperimentalFeatures" />
+            <ui-tooltip :text="tooltips.experimentalFeatures">
+              <p class="pl-4">
+                Experimental Features
+                <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
+                  <span class="material-icons icon-text text-sm">info_outlined</span>
+                </a>
+              </p>
+            </ui-tooltip>
          </div>

          <div class="flex items-center py-2">
@@ -196,10 +194,10 @@
          </div>

          <!-- <div class="flex items-center py-2">
-            <ui-toggle-switch v-model="newServerSettings.scannerUseSingleThreadedProber" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerUseSingleThreadedProber', val)" />
-            <ui-tooltip :text="tooltips.scannerUseSingleThreadedProber">
+            <ui-toggle-switch v-model="newServerSettings.scannerUseTone" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerUseTone', val)" />
+            <ui-tooltip text="Tone library for metadata">
              <p class="pl-4">
-                Scanner use old single threaded audio prober
+                Use Tone library for metadata
                <span class="material-icons icon-text text-sm">info_outlined</span>
              </p>
            </ui-tooltip>
@@ -211,8 +209,12 @@
    <div class="h-0.5 bg-primary bg-opacity-30 w-full" />

    <div class="flex items-center py-4">
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click="purgeCache">Purge Cache</ui-btn>
+      <div class="flex-grow" />
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeCache">Purge All Cache</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">Purge Items Cache</ui-btn>
      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">Remove All Library Items</ui-btn>
+    </div>
+    <div class="flex items-center py-4">
      <div class="flex-grow" />
      <p class="pr-2 text-sm font-book text-yellow-400">
        Report bugs, request features, and contribute on
@@ -270,8 +272,8 @@ export default {
    return {
      isResettingLibraryItems: false,
      updatingServerSettings: false,
-      homeUseAlternativeBookshelfView: false,
-      useAlternativeBookshelfView: false,
+      homepageUseBookshelfView: false,
+      useBookshelfView: false,
      isPurgingCache: false,
      newServerSettings: {},
      tooltips: {
@@ -283,10 +285,9 @@ export default {
        scannerParseSubtitle: 'Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by " - "<br>i.e. "Book Title - A Subtitle Here" has the subtitle "A Subtitle Here"',
        sortingIgnorePrefix: 'i.e. for prefix "the" book title "The Book Title" would sort as "Book Title, The"',
        scannerFindCovers: 'If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time',
-        bookshelfView: 'Alternative view without wooden bookshelf',
+        bookshelfView: 'Skeumorphic design with wooden shelves',
        storeCoverWithItem: 'By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named "cover" will be kept',
        storeMetadataWithItem: 'By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension',
-        coverAspectRatio: 'Prefer to use square covers over standard 1.6:1 book covers',
        enableEReader: 'E-reader is still a work in progress, but use this setting to open it up to all your users (or use the "Experimental Features" toggle just for use by you)',
        scannerPreferOverdriveMediaMarker: 'MP3 files from Overdrive come with chapter timings embedded as custom metadata. Enabling this will use these tags for chapter timings automatically',
        scannerUseSingleThreadedProber: 'The old scanner used a single thread. Leaving it in to use as a comparison for now.',
@@ -357,19 +358,14 @@ export default {
        scannerCoverProvider: val
      })
    },
-    updateBookCoverAspectRatio(val) {
+    updateHomeUseBookshelfView(val) {
      this.updateServerSettings({
-        coverAspectRatio: val ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD
+        homeBookshelfView: !val ? this.$constants.BookshelfView.DETAIL : this.$constants.BookshelfView.STANDARD
      })
    },
-    updateHomeAlternativeBookshelfView(val) {
+    updateUseBookshelfView(val) {
      this.updateServerSettings({
-        homeBookshelfView: val ? this.$constants.BookshelfView.TITLES : this.$constants.BookshelfView.STANDARD
-      })
-    },
-    updateAlternativeBookshelfView(val) {
-      this.updateServerSettings({
-        bookshelfView: val ? this.$constants.BookshelfView.TITLES : this.$constants.BookshelfView.STANDARD
+        bookshelfView: !val ? this.$constants.BookshelfView.DETAIL : this.$constants.BookshelfView.STANDARD
      })
    },
    updateSettingsKey(key, val) {
@@ -396,8 +392,8 @@ export default {
      this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
      this.newServerSettings.sortingPrefixes = [...(this.newServerSettings.sortingPrefixes || [])]

-      this.homeUseAlternativeBookshelfView = this.newServerSettings.homeBookshelfView === this.$constants.BookshelfView.TITLES
-      this.useAlternativeBookshelfView = this.newServerSettings.bookshelfView === this.$constants.BookshelfView.TITLES
+      this.homepageUseBookshelfView = this.newServerSettings.homeBookshelfView != this.$constants.BookshelfView.DETAIL
+      this.useBookshelfView = this.newServerSettings.bookshelfView != this.$constants.BookshelfView.DETAIL
    },
    resetLibraryItems() {
      if (confirm('WARNING! This action will remove all library items from the database including any updates or matches you have made. This does not do anything to your actual files. Shall we continue?')) {
@@ -423,7 +419,7 @@ export default {
      this.showConfirmPurgeCache = false
      this.isPurgingCache = true
      await this.$axios
-        .$post('/api/purgecache')
+        .$post('/api/cache/purge')
        .then(() => {
          this.$toast.success('Cache Purged!')
        })
@@ -432,6 +428,31 @@ export default {
          this.$toast.error('Failed to purge cache')
        })
      this.isPurgingCache = false
+    },
+    purgeItemsCache() {
+      const payload = {
+        message: `<span class="text-warning text-base">Warning! This will delete the entire folder at /metadata/cache/items.</span><br />Are you sure you want to purge items cache?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.sendPurgeItemsCache()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    async sendPurgeItemsCache() {
+      this.isPurgingCache = true
+      await this.$axios
+        .$post('/api/cache/items/purge')
+        .then(() => {
+          this.$toast.success('Items Cache Purged!')
+        })
+        .catch((error) => {
+          console.error('Failed to purge items cache', error)
+          this.$toast.error('Failed to purge items cache')
+        })
+      this.isPurgingCache = false
    }
  },
  mounted() {
--- a/client/pages/config/notifications.vue
+++ b/client/pages/config/notifications.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-3 md:p-8 mb-2 max-w-3xl mx-auto">
+      <h2 class="text-xl font-semibold mb-4">Apprise Notification Settings</h2>
+      <p class="mb-6 text-gray-200">
+        In order to use this feature you will need to have an instance of <a href="https://github.com/caronc/apprise-api" target="_blank" class="hover:underline text-blue-400 hover:text-blue-300">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at
+        <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">http://192.168.1.1:8337</span> then you would put <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">http://192.168.1.1:8337/notify</span>.
+      </p>
+
+      <form @submit.prevent="submitForm">
+        <ui-text-input-with-label ref="apiUrlInput" v-model="appriseApiUrl" :disabled="savingSettings" label="Apprise API Url" class="mb-2" />
+
+        <div class="flex items-center py-2">
+          <ui-text-input ref="maxNotificationQueueInput" type="number" v-model="maxNotificationQueue" no-spinner :disabled="savingSettings" :padding-x="1" text-center class="w-10" />
+
+          <ui-tooltip text="Events are limited to firing 1 per second. Events will be ignored if the queue is at max size. This prevents notification spamming." direction="right">
+            <p class="pl-2 md:pl-4 text-base md:text-lg">Max queue size for notification events<span class="material-icons icon-text ml-1">info_outlined</span></p>
+          </ui-tooltip>
+        </div>
+
+        <div class="flex items-center py-2">
+          <ui-text-input ref="maxFailedAttemptsInput" type="number" v-model="maxFailedAttempts" no-spinner :disabled="savingSettings" :padding-x="1" text-center class="w-10" />
+
+          <ui-tooltip text="Notifications are disabled once they fail to send this many times." direction="right">
+            <p class="pl-2 md:pl-4 text-base md:text-lg">Max failed attempts<span class="material-icons icon-text ml-1">info_outlined</span></p>
+          </ui-tooltip>
+        </div>
+
+        <div class="flex items-center justify-end pt-4">
+          <ui-btn :loading="savingSettings" type="submit">Save</ui-btn>
+        </div>
+      </form>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-6" />
+
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-xl font-semibold">Notifications</h2>
+        <ui-btn small color="success" class="flex items-center" @click="clickCreate">Create <span class="material-icons text-lg pl-2">add</span></ui-btn>
+      </div>
+
+      <div v-if="!notifications.length" class="flex justify-center text-center">
+        <p class="text-lg text-gray-200">No notifications</p>
+      </div>
+      <template v-for="notification in notifications">
+        <cards-notification-card :key="notification.id" :notification="notification" @update="updateSettings" @edit="editNotification" />
+      </template>
+    </div>
+
+    <modals-notification-edit-modal v-model="showEditModal" :notification="selectedNotification" :notification-data="notificationData" @update="updateSettings" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      savingSettings: false,
+      appriseApiUrl: null,
+      maxNotificationQueue: 0,
+      maxFailedAttempts: 0,
+      notifications: [],
+      notificationSettings: null,
+      notificationData: null,
+      showEditModal: false,
+      selectedNotification: null,
+      sendingTest: false
+    }
+  },
+  computed: {},
+  methods: {
+    updateSettings(settings) {
+      this.notificationSettings = settings
+      this.notifications = settings.notifications
+    },
+    editNotification(notification) {
+      this.selectedNotification = notification
+      this.showEditModal = true
+    },
+    clickCreate() {
+      this.selectedNotification = null
+      this.showEditModal = true
+    },
+    validateAppriseApiUrl() {
+      try {
+        return new URL(this.appriseApiUrl)
+      } catch (error) {
+        console.log('URL error', error)
+        this.$toast.error(error.message)
+        return false
+      }
+    },
+    validateForm() {
+      if (this.$refs.apiUrlInput) {
+        this.$refs.apiUrlInput.blur()
+      }
+      if (this.$refs.maxNotificationQueueInput) {
+        this.$refs.maxNotificationQueueInput.blur()
+      }
+      if (this.$refs.maxFailedAttemptsInput) {
+        this.$refs.maxFailedAttemptsInput.blur()
+      }
+
+      if (!this.validateAppriseApiUrl()) {
+        return false
+      }
+
+      if (isNaN(this.maxNotificationQueue) || this.maxNotificationQueue <= 0) {
+        this.$toast.error('Max notification queue must be >= 0')
+        return false
+      }
+
+      if (isNaN(this.maxFailedAttempts) || this.maxFailedAttempts <= 0) {
+        this.$toast.error('Max failed attempts must be >= 0')
+        return false
+      }
+
+      return true
+    },
+    submitForm() {
+      if (!this.validateForm()) return
+
+      const updatePayload = {
+        appriseApiUrl: this.appriseApiUrl || null,
+        maxNotificationQueue: Number(this.maxNotificationQueue),
+        maxFailedAttempts: Number(this.maxFailedAttempts)
+      }
+      this.savingSettings = true
+      this.$axios
+        .$patch('/api/notifications', updatePayload)
+        .then(() => {
+          this.$toast.success('Notification settings updated')
+        })
+        .catch((error) => {
+          console.error('Failed to update notification settings', error)
+          this.$toast.error('Failed to update notification settings')
+        })
+        .finally(() => {
+          this.savingSettings = false
+        })
+    },
+    async init() {
+      this.loading = true
+      const notificationResponse = await this.$axios.$get('/api/notifications').catch((error) => {
+        console.error('Failed to get notification settings', error)
+        this.$toast.error('Failed to load notification settings')
+        return null
+      })
+      this.loading = false
+      if (!notificationResponse) {
+        return
+      }
+      this.notificationData = notificationResponse.data
+      this.setNotificationSettings(notificationResponse.settings)
+    },
+    setNotificationSettings(notificationSettings) {
+      this.notificationSettings = notificationSettings
+      this.appriseApiUrl = notificationSettings.appriseApiUrl
+      this.maxNotificationQueue = notificationSettings.maxNotificationQueue
+      this.maxFailedAttempts = notificationSettings.maxFailedAttempts
+      this.notifications = notificationSettings.notifications || []
+    },
+    notificationsUpdated(notificationSettings) {
+      console.log('Notifications updated', notificationSettings)
+      this.setNotificationSettings(notificationSettings)
+    }
+  },
+  mounted() {
+    this.init()
+    this.$root.socket.on('notifications_updated', this.notificationsUpdated)
+  },
+  beforeDestroy() {
+    this.$root.socket.off('notifications_updated', this.notificationsUpdated)
+  }
+}
+</script>
--- a/client/pages/config/users/_id/index.vue
+++ b/client/pages/config/users/_id/index.vue
@@ -46,7 +46,14 @@
      <div class="w-full h-px bg-white bg-opacity-10 my-2" />
      <div class="py-2">
        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Saved Media Progress</h1>
-        <table v-if="mediaProgress.length" class="userAudiobooksTable">
+
+        <div v-if="mediaProgressWithoutMedia.length" class="flex items-center py-2 mb-2">
+          <p class="text-error">User has media progress for {{ mediaProgressWithoutMedia.length }} items that no longer exist.</p>
+          <div class="flex-grow" />
+          <ui-btn small :loading="purgingMediaProgress" @click.stop="purgeMediaProgress">Purge Media Progress</ui-btn>
+        </div>
+
+        <table v-if="mediaProgressWithMedia.length" class="userAudiobooksTable">
          <tr class="bg-primary bg-opacity-40">
            <th class="w-16 text-left">Item</th>
            <th class="text-left"></th>
@@ -54,13 +61,19 @@
            <th class="w-40 hidden sm:table-cell">Started At</th>
            <th class="w-40 hidden sm:table-cell">Last Update</th>
          </tr>
-          <tr v-for="item in mediaProgress" :key="item.id" :class="!item.isFinished ? '' : 'isFinished'">
+          <tr v-for="item in mediaProgressWithMedia" :key="item.id" :class="!item.isFinished ? '' : 'isFinished'">
            <td>
              <covers-book-cover :width="50" :library-item="item" :book-cover-aspect-ratio="bookCoverAspectRatio" />
            </td>
            <td class="font-book">
-              <p>{{ item.media && item.media.metadata ? item.media.metadata.title : 'Unknown' }}</p>
-              <p v-if="item.media && item.media.metadata && item.media.metadata.authorName" class="text-white text-opacity-50 text-sm font-sans">by {{ item.media.metadata.authorName }}</p>
+              <template v-if="item.media && item.media.metadata && item.episode">
+                <p>{{ item.episode.title || 'Unknown' }}</p>
+                <p class="text-white text-opacity-50 text-sm font-sans">{{ item.media.metadata.title }}</p>
+              </template>
+              <template v-else-if="item.media && item.media.metadata">
+                <p>{{ item.media.metadata.title || 'Unknown' }}</p>
+                <p v-if="item.media.metadata.authorName" class="text-white text-opacity-50 text-sm font-sans">by {{ item.media.metadata.authorName }}</p>
+              </template>
            </td>
            <td class="text-center">
              <p class="text-sm">{{ Math.floor(item.progress * 100) }}%</p>
@@ -98,7 +111,8 @@ export default {
  data() {
    return {
      listeningSessions: [],
-      listeningStats: {}
+      listeningStats: {},
+      purgingMediaProgress: false
    }
  },
  computed: {
@@ -117,6 +131,12 @@ export default {
    mediaProgress() {
      return this.user.mediaProgress.sort((a, b) => b.lastUpdate - a.lastUpdate)
    },
+    mediaProgressWithMedia() {
+      return this.mediaProgress.filter((mp) => mp.media)
+    },
+    mediaProgressWithoutMedia() {
+      return this.mediaProgress.filter((mp) => !mp.media)
+    },
    totalListeningTime() {
      return this.listeningStats.totalTime || 0
    },
@@ -150,6 +170,24 @@ export default {
        return []
      })
      console.log('Loaded user listening data', this.listeningSessions, this.listeningStats)
+    },
+    purgeMediaProgress() {
+      this.purgingMediaProgress = true
+
+      this.$axios
+        .$post(`/api/users/${this.user.id}/purge-media-progress`)
+        .then((updatedUser) => {
+          console.log('Updated user', updatedUser)
+          this.$toast.success('Media progress purged')
+          this.user = updatedUser
+        })
+        .catch((error) => {
+          console.error('Failed to purge media progress', error)
+          this.$toast.error('Failed to purge media progress')
+        })
+        .finally(() => {
+          this.purgingMediaProgress = false
+        })
    }
  },
  mounted() {
--- a/client/pages/item/_id/manage.vue
+++ b/client/pages/item/_id/manage.vue
@@ -1,270 +0,0 @@
-<template>
-  <div id="page-wrapper" class="bg-bg page p-8 overflow-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
-    <div class="flex justify-center mb-2">
-      <div class="w-full max-w-2xl">
-        <p class="text-xl">Metadata to embed</p>
-      </div>
-      <div class="w-full max-w-2xl"></div>
-    </div>
-    <div class="flex justify-center flex-wrap">
-      <div class="w-full max-w-2xl border border-opacity-10 bg-bg mx-2">
-        <div class="flex py-2 px-4">
-          <div class="w-1/3 text-xs font-semibold uppercase text-gray-200">Meta Tag</div>
-          <div class="w-2/3 text-xs font-semibold uppercase text-gray-200">Value</div>
-        </div>
-        <div class="w-full max-h-72 overflow-auto">
-          <template v-for="(keyValue, index) in metadataKeyValues">
-            <div :key="keyValue.key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
-              <div class="w-1/3 font-semibold">{{ keyValue.key }}</div>
-              <div class="w-2/3">
-                {{ keyValue.value }}
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-      <div class="w-full max-w-2xl border border-opacity-10 bg-bg mx-2">
-        <div class="flex py-2 px-4">
-          <div class="flex-grow text-xs font-semibold uppercase text-gray-200">Chapter Title</div>
-          <div class="w-24 text-xs font-semibold uppercase text-gray-200">Start</div>
-          <div class="w-24 text-xs font-semibold uppercase text-gray-200">End</div>
-        </div>
-        <div class="w-full max-h-72 overflow-auto">
-          <template v-for="(chapter, index) in metadataChapters">
-            <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
-              <div class="flex-grow font-semibold">{{ chapter.title }}</div>
-              <div class="w-24">
-                {{ chapter.start.toFixed(2) }}
-              </div>
-              <div class="w-24">
-                {{ chapter.end.toFixed(2) }}
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full h-px bg-white bg-opacity-10 my-8" />
-
-    <div class="w-full max-w-4xl mx-auto">
-      <div class="w-full flex justify-between items-center mb-4">
-        <p class="text-warning text-lg font-semibold">Warning: Modifies your audio files</p>
-        <ui-btn v-if="!embedFinished" color="primary" :loading="updatingMetadata" @click="updateAudioFileMetadata">Embed Metadata</ui-btn>
-        <p v-else class="text-success text-lg font-semibold">Embed Finished!</p>
-      </div>
-      <div class="w-full mx-auto border border-opacity-10 bg-bg">
-        <div class="flex py-2 px-4">
-          <div class="w-10 text-xs font-semibold text-gray-200">#</div>
-          <div class="flex-grow text-xs font-semibold uppercase text-gray-200">Filename</div>
-          <div class="w-16 text-xs font-semibold uppercase text-gray-200">Size</div>
-          <div class="w-24"></div>
-        </div>
-        <template v-for="file in audioFiles">
-          <div :key="file.index" class="flex py-2 px-4 text-sm" :class="file.index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
-            <div class="w-10">{{ file.index }}</div>
-            <div class="flex-grow">
-              {{ file.metadata.filename }}
-            </div>
-            <div class="w-16 font-mono text-gray-200">
-              {{ $bytesPretty(file.metadata.size) }}
-            </div>
-            <div class="w-24">
-              <div class="flex justify-center">
-                <span v-if="audiofilesFinished[file.ino]" class="material-icons text-xl text-success leading-none">check_circle</span>
-                <div v-else-if="audiofilesEncoding[file.ino]">
-                  <widgets-loading-spinner />
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  async asyncData({ store, params, app, redirect, route }) {
-    if (!store.state.user.user) {
-      return redirect(`/login?redirect=${route.path}`)
-    }
-    if (!store.getters['user/getIsAdminOrUp']) {
-      return redirect('/?error=unauthorized')
-    }
-    var libraryItem = await app.$axios.$get(`/api/items/${params.id}?expanded=1`).catch((error) => {
-      console.error('Failed', error)
-      return false
-    })
-    if (!libraryItem) {
-      console.error('Not found...', params.id)
-      return redirect('/?error=not found')
-    }
-    if (libraryItem.mediaType !== 'book') {
-      console.error('Invalid media type')
-      return redirect('/?error=invalid media type')
-    }
-    if (!libraryItem.media.audioFiles.length) {
-      cnosole.error('No audio files')
-      return redirect('/?error=no audio files')
-    }
-    return {
-      libraryItem
-    }
-  },
-  data() {
-    return {
-      audiofilesEncoding: {},
-      audiofilesFinished: {},
-      updatingMetadata: false,
-      embedFinished: false
-    }
-  },
-  computed: {
-    libraryItemId() {
-      return this.libraryItem.id
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    audioFiles() {
-      return this.media.audioFiles || []
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    metadataKeyValues() {
-      const keyValues = [
-        {
-          key: 'title',
-          value: this.mediaMetadata.title
-        },
-        {
-          key: 'artist',
-          value: this.mediaMetadata.authorName
-        },
-        {
-          key: 'album_artist',
-          value: this.mediaMetadata.authorName
-        },
-        {
-          key: 'date',
-          value: this.mediaMetadata.publishedYear
-        },
-        {
-          key: 'description',
-          value: this.mediaMetadata.description
-        },
-        {
-          key: 'genre',
-          value: this.mediaMetadata.genres.join(';')
-        },
-        {
-          key: 'performer',
-          value: this.mediaMetadata.narratorName
-        }
-      ]
-
-      if (this.mediaMetadata.subtitle) {
-        keyValues.push({
-          key: 'subtitle',
-          value: this.mediaMetadata.subtitle
-        })
-      }
-
-      if (this.mediaMetadata.asin) {
-        keyValues.push({
-          key: 'asin',
-          value: this.mediaMetadata.asin
-        })
-      }
-      if (this.mediaMetadata.isbn) {
-        keyValues.push({
-          key: 'isbn',
-          value: this.mediaMetadata.isbn
-        })
-      }
-      if (this.mediaMetadata.language) {
-        keyValues.push({
-          key: 'language',
-          value: this.mediaMetadata.language
-        })
-      }
-      if (this.mediaMetadata.series.length) {
-        var firstSeries = this.mediaMetadata.series[0]
-        keyValues.push({
-          key: 'series',
-          value: firstSeries.name
-        })
-        if (firstSeries.sequence) {
-          keyValues.push({
-            key: 'series-part',
-            value: firstSeries.sequence
-          })
-        }
-      }
-
-      return keyValues
-    },
-    metadataChapters() {
-      var chapters = this.media.chapters || []
-      return chapters.concat(chapters)
-    }
-  },
-  methods: {
-    updateAudioFileMetadata() {
-      if (confirm(`Warning!\n\nThis will modify the audio files for this audiobook.\nMake sure your audio files are backed up before using this feature.`)) {
-        this.updatingMetadata = true
-        this.$axios
-          .$get(`/api/items/${this.libraryItemId}/audio-metadata`)
-          .then(() => {
-            console.log('Audio metadata encode started')
-          })
-          .catch((error) => {
-            console.error('Audio metadata encode failed', error)
-            this.updatingMetadata = false
-          })
-      }
-    },
-    audioMetadataStarted(data) {
-      console.log('audio metadata started', data)
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.audiofilesFinished = {}
-      this.updatingMetadata = true
-    },
-    audioMetadataFinished(data) {
-      console.log('audio metadata finished', data)
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.updatingMetadata = false
-      this.embedFinished = true
-      this.audiofilesEncoding = {}
-      this.$toast.success('Audio file metadata updated')
-    },
-    audiofileMetadataStarted(data) {
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.$set(this.audiofilesEncoding, data.ino, true)
-    },
-    audiofileMetadataFinished(data) {
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.$set(this.audiofilesEncoding, data.ino, false)
-      this.$set(this.audiofilesFinished, data.ino, true)
-    }
-  },
-  mounted() {
-    this.$root.socket.on('audio_metadata_started', this.audioMetadataStarted)
-    this.$root.socket.on('audio_metadata_finished', this.audioMetadataFinished)
-    this.$root.socket.on('audiofile_metadata_started', this.audiofileMetadataStarted)
-    this.$root.socket.on('audiofile_metadata_finished', this.audiofileMetadataFinished)
-  },
-  beforeDestroy() {
-    this.$root.socket.off('audio_metadata_started', this.audioMetadataStarted)
-    this.$root.socket.off('audio_metadata_finished', this.audioMetadataFinished)
-    this.$root.socket.off('audiofile_metadata_started', this.audiofileMetadataStarted)
-    this.$root.socket.off('audiofile_metadata_finished', this.audiofileMetadataFinished)
-  }
-}
-</script>
--- a/client/pages/library/_library/bookshelf/_id.vue
+++ b/client/pages/library/_library/bookshelf/_id.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar :page="id || ''" :view-mode.sync="viewMode"/>
-    <app-lazy-bookshelf :page="id || ''" :view-mode="viewMode" />
+    <app-book-shelf-toolbar :page="id || ''" />
+    <app-lazy-bookshelf :page="id || ''" />
  </div>
 </template>

@@ -14,8 +14,18 @@ export default {
      return redirect('/oops?message=Library not found')
    }

-    // Set filter by
-    if (query.filter) {
+    // Set series sort by
+    if (params.id === 'series') {
+      console.log('Series page', query)
+      if (query.sort) {
+        store.commit('libraries/setSeriesSortBy', query.sort)
+        store.commit('libraries/setSeriesSortDesc', !!query.desc)
+      }
+      if (query.filter) {
+        console.log('has filter', query.filter)
+        store.commit('libraries/setSeriesFilterBy', query.filter)
+      }
+    } else if (query.filter) {
      store.dispatch('user/updateUserSettings', { filterBy: query.filter })
    }

@@ -31,9 +41,7 @@ export default {
    }
  },
  data() {
-    return {
-      viewMode: 'grid'
-    }
+    return {}
  },
  computed: {
    streamLibraryItem() {
--- a/client/pages/library/_library/podcast/latest.vue
+++ b/client/pages/library/_library/podcast/latest.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar page="recent-episodes" />
+
+    <div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
+      <div class="w-full max-w-3xl mx-auto py-4">
+        <p class="text-xl mb-2 font-semibold">Latest episodes</p>
+        <p v-if="!recentEpisodes.length && !processing" class="text-center text-xl">No podcasts found</p>
+        <template v-for="(episode, index) in episodesMapped">
+          <div :key="episode.id" class="flex py-5 cursor-pointer relative" @click.stop="clickEpisode(episode)">
+            <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](episode.libraryItemId)" :width="96" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
+            <div class="flex-grow pl-4 max-w-2xl">
+              <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
+
+              <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
+
+              <p class="font-semibold mb-2">{{ episode.title }}</p>
+
+              <p class="text-sm text-gray-200 mb-4">{{ episode.subtitle }}</p>
+
+              <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">
+                <span v-if="episodeIdStreaming === episode.id" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+                <span v-else class="material-icons text-success">play_arrow</span>
+                <p class="pl-2 pr-1 text-sm font-semibold">{{ getButtonText(episode) }}</p>
+              </button>
+            </div>
+
+             <div v-if="episode.progress" class="absolute bottom-0 left-0 h-0.5 pointer-events-none bg-warning" :style="{ width: episode.progress.progress * 100 + '%' }" />
+          </div>
+          <div :key="index" v-if="index !== recentEpisodes.length" class="w-full h-px bg-white bg-opacity-10" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, query, store, app, redirect }) {
+    var libraryId = params.library
+    var libraryData = await store.dispatch('libraries/fetch', libraryId)
+    if (!libraryData) {
+      return redirect('/oops?message=Library not found')
+    }
+
+    // Redirect book libraries
+    const library = libraryData.library
+    if (library.mediaType === 'book') {
+      return redirect(`/library/${libraryId}`)
+    }
+
+    return {
+      libraryId
+    }
+  },
+  data() {
+    return {
+      recentEpisodes: [],
+      totalEpisodes: 0,
+      currentPage: 0,
+      processing: false,
+      openingItem: false
+    }
+  },
+  computed: {
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    libraryItemIdStreaming() {
+      return this.$store.getters['getLibraryItemIdStreaming']
+    },
+    episodeIdStreaming() {
+      return this.$store.state.streamEpisodeId
+    },
+    streamIsPlaying() {
+      return this.$store.state.streamIsPlaying
+    },
+    episodesMapped() {
+      return this.recentEpisodes.map((ep) => {
+        return {
+          ...ep,
+          progress: this.$store.getters['user/getUserMediaProgress'](ep.libraryItemId, ep.id)
+        }
+      })
+    }
+  },
+  methods: {
+    async clickEpisode(episode) {
+      if (this.openingItem) return
+      this.openingItem = true
+      const fullLibraryItem = await this.$axios.$get(`/api/items/${episode.libraryItemId}`).catch((error) => {
+        var errMsg = error.response ? error.response.data || '' : ''
+        this.$toast.error(errMsg || 'Failed to get library item')
+        return null
+      })
+      this.openingItem = false
+      if (!fullLibraryItem) return
+
+      this.$store.commit('setSelectedLibraryItem', fullLibraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
+    },
+    getButtonText(episode) {
+      if (this.episodeIdStreaming === episode.id) return this.streamIsPlaying ? 'Streaming' : 'Play'
+      if (!episode.progress) return this.$elapsedPretty(episode.duration)
+      if (episode.progress.isFinished) return 'Finished'
+      var remaining = Math.floor(episode.progress.duration - episode.progress.currentTime)
+      return `${this.$elapsedPretty(remaining)} left`
+    },
+    playClick(episodeToPlay) {
+      if (episodeToPlay.id === this.episodeIdStreaming && this.streamIsPlaying) {
+        return this.$eventBus.$emit('pause-item')
+      }
+
+      // Queue up more recent items
+      const queueItems = []
+      const episodeIndex = this.episodesMapped.findIndex((e) => e.id === episodeToPlay.id)
+      const indexFromBack = this.episodesMapped.length - episodeIndex - 1
+      for (let i = this.episodesMapped.length - 1 - indexFromBack; i >= 0; i--) {
+        const episode = this.episodesMapped[i]
+        if (!episode.progress || !episode.isFinished) {
+          queueItems.push({
+            libraryItemId: episode.libraryItemId,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: episode.podcast.metadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            duration: episode.duration || null,
+            coverPath: episode.podcast.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: episodeToPlay.libraryItemId,
+        episodeId: episodeToPlay.id,
+        queueItems
+      })
+    },
+    async loadRecentEpisodes(page = 0) {
+      this.processing = true
+      const episodePayload = await this.$axios.$get(`/api/libraries/${this.libraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
+        console.error('Failed to get recent episodes', error)
+        this.$toast.error('Failed to get recent episodes')
+        return null
+      })
+      this.processing = false
+      console.log('Episodes', episodePayload)
+      this.recentEpisodes = episodePayload.episodes || []
+      this.totalEpisodes = episodePayload.total
+      this.currentPage = page
+    }
+  },
+  mounted() {
+    this.loadRecentEpisodes()
+  }
+}
+</script>
--- a/client/pages/library/_library/podcast/search.vue
+++ b/client/pages/library/_library/podcast/search.vue
@@ -2,7 +2,7 @@
  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
    <app-book-shelf-toolbar page="podcast-search" />

-    <div class="w-full h-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
+    <div id="bookshelf" class="w-full overflow-y-auto px-2 py-6 sm:px-4 md:p-12 relative">
      <div class="w-full max-w-4xl mx-auto flex">
        <form @submit.prevent="submit" class="flex flex-grow">
          <ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2 text-sm md:text-base" />
--- a/client/pages/library/_library/series/_id.vue
+++ b/client/pages/library/_library/series/_id.vue
@@ -40,7 +40,20 @@ export default {
      return this.$store.state.streamLibraryItem
    }
  },
-  mounted() {},
-  beforeDestroy() {}
+  methods: {
+    seriesUpdated(series) {
+      this.series = series
+    }
+  },
+  mounted() {
+    if (this.$root.socket) {
+      this.$root.socket.on('series_updated', this.seriesUpdated)
+    }
+  },
+  beforeDestroy() {
+    if (this.$root.socket) {
+      this.$root.socket.off('series_updated', this.seriesUpdated)
+    }
+  }
 }
 </script>
--- a/client/players/LocalAudioPlayer.js
+++ b/client/players/LocalAudioPlayer.js
@@ -46,7 +46,7 @@ export default class LocalAudioPlayer extends EventEmitter {
    this.player.addEventListener('loadedmetadata', this.evtLoadedMetadata.bind(this))
    this.player.addEventListener('timeupdate', this.evtTimeupdate.bind(this))

-    var mimeTypes = ['audio/flac', 'audio/mpeg', 'audio/mp4', 'audio/ogg', 'audio/aac', 'audio/x-ms-wma', 'audio/x-aiff']
+    var mimeTypes = ['audio/flac', 'audio/mpeg', 'audio/mp4', 'audio/ogg', 'audio/aac', 'audio/x-ms-wma', 'audio/x-aiff', 'audio/webm']
    var mimeTypeCanPlayMap = {}
    mimeTypes.forEach((mt) => {
      var canPlay = this.player.canPlayType(mt)
--- a/client/players/PlayerHandler.js
+++ b/client/players/PlayerHandler.js
@@ -296,7 +296,7 @@ export default class PlayerHandler {
      currentTime
    }
    this.listeningTimeSinceSync = 0
-    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 1000 }).then(() => {
+    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 3000 }).then(() => {
      this.failedProgressSyncs = 0
    }).catch((error) => {
      console.error('Failed to update session progress', error)
--- a/client/plugins/axios.js
+++ b/client/plugins/axios.js
@@ -1,4 +1,4 @@
-export default function ({ $axios, store }) {
+export default function ({ $axios, store, $config }) {
  $axios.onRequest(config => {
    if (!config.url) {
      console.error('Axios request invalid config', config)
--- a/client/plugins/constants.js
+++ b/client/plugins/constants.js
@@ -1,6 +1,6 @@
 const SupportedFileTypes = {
  image: ['png', 'jpg', 'jpeg', 'webp'],
-  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'oga', 'mp4', 'aac', 'wma', 'aiff', 'wav'],
+  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'oga', 'mp4', 'aac', 'wma', 'aiff', 'wav', 'webm', 'webma'],
  ebook: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
  info: ['nfo'],
  text: ['txt'],
@@ -21,7 +21,7 @@ const BookCoverAspectRatio = {

 const BookshelfView = {
  STANDARD: 0,
-  TITLES: 1,
+  DETAIL: 1,
  AUTHOR: 2 // Books shown on author page
 }

--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@@ -143,8 +143,10 @@ export {
  encode,
  decode
 }
-export default ({ app }, inject) => {
+export default ({ app, store }, inject) => {
  app.$decode = decode
  app.$encode = encode
  inject('isDev', process.env.NODE_ENV !== 'production')
+
+  store.commit('setRouterBasePath', app.$config.routerBasePath)
 }
--- a/client/plugins/utils.js
+++ b/client/plugins/utils.js
@@ -27,18 +27,27 @@ Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
  return `${hours} ${useFullNames ? `hour${hours === 1 ? '' : 's'}` : 'hr'} ${minutes} ${useFullNames ? `minute${minutes === 1 ? '' : 's'}` : 'min'}`
 }

-Vue.prototype.$secondsToTimestamp = (seconds) => {
-  if (!seconds) return '0:00'
+Vue.prototype.$secondsToTimestamp = (seconds, includeMs = false, alwaysIncludeHours = false) => {
+  if (!seconds) {
+    return alwaysIncludeHours ? '00:00:00' : '0:00'
+  }
  var _seconds = seconds
  var _minutes = Math.floor(seconds / 60)
  _seconds -= _minutes * 60
  var _hours = Math.floor(_minutes / 60)
  _minutes -= _hours * 60
+
+  var ms = _seconds - Math.floor(seconds)
  _seconds = Math.floor(_seconds)
-  if (!_hours) {
-    return `${_minutes}:${_seconds.toString().padStart(2, '0')}`
+
+  var msString = includeMs ? '.' + ms.toFixed(3).split('.')[1] : ''
+  if (alwaysIncludeHours) {
+    return `${_hours.toString().padStart(2, '0')}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}${msString}`
  }
-  return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}`
+  if (!_hours) {
+    return `${_minutes}:${_seconds.toString().padStart(2, '0')}${msString}`
+  }
+  return `${_hours}:${_minutes.toString().padStart(2, '0')}:${_seconds.toString().padStart(2, '0')}${msString}`
 }

 Vue.prototype.$elapsedPrettyExtended = (seconds, useDays = true) => {
--- a/client/static/fonts/absicons/absicons.eot
+++ b/client/static/fonts/absicons/absicons.eot
--- a/client/static/fonts/absicons/absicons.svg
+++ b/client/static/fonts/absicons/absicons.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="absicons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="audiobookshelf" horiz-adv-x="862" d="M854.995 455.649c-5.287 4.402-13.511 10.896-24.656 18.576v86.499c0 220.513-178.763 399.276-399.281 399.276v0c-220.513 0-399.276-178.763-399.276-399.276v-86.499c-11.145-7.697-19.369-14.174-24.656-18.576-4.368-3.659-7.126-9.116-7.126-15.217 0-0.006 0-0.011 0-0.017v0.001-103.619c0-0.011 0-0.025 0-0.038 0-6.101 2.758-11.558 7.095-15.191l0.031-0.025c12.326-10.26 40.612-31.782 84.651-53.849v-10.072c0-27.162 17.525-49.186 39.139-49.186v0c21.614 0 39.139 22.023 39.139 49.186v248.534c0 27.166-17.525 49.19-39.139 49.19v0c-20.707 0-37.657-20.215-39.043-45.795l-0.096-0.048v51.221c0 187.38 151.902 339.278 339.282 339.278v0c187.38 0 339.282-151.898 339.282-339.278v-51.221l-0.096 0.048c-1.386 25.58-18.332 45.795-39.043 45.795v0c-21.614 0-39.135-22.023-39.135-49.19v-248.512c0-27.162 17.521-49.186 39.135-49.186v0c21.618 0 39.139 22.023 39.139 49.186v10.072c44.042 22.067 72.329 43.585 84.655 53.849 4.368 3.661 7.126 9.12 7.126 15.223 0 0.011 0 0.022 0 0.034v-0.002 103.597c0 0.003 0 0.007 0 0.010 0 6.103-2.758 11.561-7.095 15.198l-0.031 0.025zM291.835 23.619c26.11 0 47.276 21.166 47.276 47.276v0 529.382c0 0.001 0 0.003 0 0.004 0 26.11-21.166 47.276-47.276 47.276h-48.846c-26.112 0-47.281-21.168-47.281-47.281v0-529.382c0-26.11 21.166-47.276 47.276-47.276 0.002 0 0.003 0 0.005 0v0zM213.535 520.595h107.764v-11.258h-107.764zM455.484 23.619c26.11 0 47.276 21.166 47.276 47.276v0 529.382c0 0.001 0 0.003 0 0.004 0 26.11-21.166 47.276-47.276 47.276h-48.846c-26.112 0-47.281-21.168-47.281-47.281v0-529.382c0-26.11 21.166-47.276 47.276-47.276 0.002 0 0.003 0 0.005 0v0zM377.183 520.595h107.75v-11.258h-107.75zM619.132 23.619c26.11 0 47.276 21.166 47.276 47.276v0 529.382c0 0.001 0 0.003 0 0.004 0 26.11-21.166 47.276-47.276 47.276h-48.846c-26.112 0-47.281-21.168-47.281-47.281v0-529.382c0-26.11 21.166-47.276 47.276-47.276 0.002 0 0.003 0 0.005 0v0zM540.831 520.595h107.75v-11.258h-107.75zM114.101 7.257h633.92c19.676 0 35.626-15.95 35.626-35.626v-0.004c0-19.676-15.95-35.626-35.626-35.626h-633.92c-19.676 0-35.626 15.95-35.626 35.626v0.004c0 19.676 15.95 35.626 35.626 35.626z" />
+<glyph unicode="&#xe901;" glyph-name="microphone-2" horiz-adv-x="713" d="M713.333 484.083c0 26.75-21.667 48.333-48.333 48.333-26.75 0-48.333-21.667-48.333-48.333 0-95.25-22.833-173.917-69.083-226.417-41.917-47.5-105.25-74.917-190.833-74.917s-148.917 27.333-190.833 74.833c-46.333 52.5-69.083 131.167-69.083 226.5 0 26.75-21.667 48.333-48.333 48.333-26.75 0-48.333-21.667-48.333-48.333 0-118.75 30.75-219.417 93.25-290.333 46-52.167 108-87.5 186.083-101.25v-79.333h-118.5c-21.167 0-38.5-17.333-38.5-38.5v-38.583h468.667v38.583c0 21.167-17.333 38.5-38.5 38.5h-118.75v79.333c78.083 13.833 140 49.083 186.083 101.333 62.5 70.833 93.333 171.5 93.333 290.25v0 0zM356.667 960c98.667 0 179.333-80.75 179.333-179.333v-4.667h-96.417v-114.25h96.5v-58.167h-96.5v-114.25h96.5v-41.083c0-98.667-80.75-179.333-179.333-179.333-98.667 0-179.333 80.75-179.333 179.333v41.083h96.5v114.25h-96.583v58.167h96.5v114.25h-96.5v4.667c0 98.583 80.667 179.333 179.333 179.333v0z" />
+<glyph unicode="&#xe902;" glyph-name="microphone-1" horiz-adv-x="768" d="M192 768v-320c0-106 86-192 192-192s192 86 192 192h-160c-17.6 0-32 14.4-32 32s14.4 32 32 32h160v64h-160c-17.6 0-32 14.4-32 32s14.4 32 32 32h160v64h-160c-17.6 0-32 14.4-32 32s14.4 32 32 32h160c0 106-86 192-192 192s-192-86-192-192zM640 480v-32c0-141.4-114.6-256-256-256s-256 114.6-256 256v80c0 26.6-21.4 48-48 48s-48-21.4-48-48v-80c0-178.2 132.4-325.4 304-348.8v-67.2h-96c-26.6 0-48-21.4-48-48s21.4-48 48-48h288c26.6 0 48 21.4 48 48s-21.4 48-48 48h-96v67.2c171.6 23.4 304 170.6 304 348.8v80c0 26.6-21.4 48-48 48s-48-21.4-48-48v-48z" />
+<glyph unicode="&#xe903;" glyph-name="radio" d="M989.6 866c25.4 7.4 40 34.2 32.6 59.6s-34.2 40-59.8 32.4l-859-251.8c-18.8-5.4-35.8-14.6-50.2-26.4-32.2-23.2-53.2-61-53.2-103.8v-512c0-70.6 57.4-128 128-128h768c70.6 0 128 57.4 128 128v512c0 70.6-57.4 128-128 128h-459l552.6 162zM736 160c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zM160 448c0 17.6 14.4 32 32 32h192c17.6 0 32-14.4 32-32s-14.4-32-32-32h-192c-17.6 0-32 14.4-32 32zM128 320c0 17.6 14.4 32 32 32h256c17.6 0 32-14.4 32-32s-14.4-32-32-32h-256c-17.6 0-32 14.4-32 32zM160 192c0 17.6 14.4 32 32 32h192c17.6 0 32-14.4 32-32s-14.4-32-32-32h-192c-17.6 0-32 14.4-32 32z" />
+<glyph unicode="&#xe904;" glyph-name="podcast" horiz-adv-x="1043" d="M585.253 366.417v-430.408h-127.13v430.408c-41.76 22.603-70.128 66.8-70.128 117.637 0 73.822 59.863 133.685 133.693 133.685 73.822 0 133.693-59.863 133.693-133.685 0-50.837-28.369-95.033-70.128-117.637v0zM333.872 865.196c24.76 12.21 34.907 42.193 22.697 66.927-12.21 24.743-42.167 34.907-66.91 22.705-101.045-49.843-179.63-132.301-229.287-229.397-36.682-71.708-57.596-151.499-60.117-232.021-2.539-81.201 13.475-163.226 50.718-238.72 45.861-93.004 123.614-175.725 238.084-234.288 24.531-12.541 54.59-2.802 67.123 21.729 12.541 24.531 2.811 54.581-21.72 67.114-93.717 47.933-156.968 114.843-193.879 189.642-29.77 60.381-42.575 126.153-40.537 191.382 2.063 65.866 19.156 131.12 49.164 189.76 40.18 78.552 103.49 145.139 184.666 185.167v0zM753.718 954.837c-24.743 12.21-54.709 2.038-66.919-22.705s-2.055-54.726 22.705-66.927c81.184-40.036 144.494-106.615 184.657-185.175 29.999-58.631 47.1-123.886 49.155-189.76 2.038-65.229-10.767-131.002-40.528-191.382-36.911-74.799-100.162-141.709-193.879-189.642-24.531-12.541-34.253-42.592-21.72-67.114 12.533-24.531 42.592-34.262 67.123-21.729 114.461 58.555 192.223 141.284 238.084 234.288 37.242 75.495 53.257 157.52 50.718 238.72-2.522 80.522-23.436 160.313-60.109 232.021-49.665 97.096-128.242 179.554-229.287 229.406v0zM702.992 734.942c-18.638 13.425-44.63 9.187-58.054-9.451-13.416-18.638-9.187-44.63 9.451-58.054 7.515-5.409 14.885-11.48 22.111-18.12 42.21-38.915 67.241-90.804 72.498-145.708 5.315-55.396-9.434-114.096-46.854-166.019-6.351-8.822-13.671-17.764-21.95-26.747-15.581-16.914-14.503-43.288 2.437-58.861 16.931-15.573 43.296-14.477 58.869 2.437 10.020 10.86 19.411 22.425 28.148 34.576 49.775 69.11 69.339 147.746 62.172 222.443-7.201 75.172-41.36 146.116-98.905 199.177-9.052 8.347-19.029 16.464-29.923 24.327v0zM388.98 667.412c18.638 13.425 22.875 39.416 9.451 58.054s-39.416 22.875-58.054 9.459c-10.903-7.863-20.871-15.98-29.923-24.319-57.553-53.070-91.713-124.005-98.914-199.177-7.167-74.688 12.397-153.35 62.181-222.46 8.754-12.142 18.137-23.699 28.148-34.559 15.573-16.914 41.938-18.010 58.861-2.437 16.948 15.573 18.027 41.938 2.445 58.861-8.279 8.992-15.598 17.925-21.95 26.747-37.412 51.923-52.17 110.614-46.854 166.011 5.256 54.895 30.288 106.793 72.498 145.708 7.234 6.632 14.605 12.703 22.111 18.112v0z" />
+<glyph unicode="&#xe905;" glyph-name="books-1" d="M384 832v-640h128v640h-128zM512 746.667l170.667-554.667 128 42.667-170.667 554.667-128-42.667zM213.333 746.667v-554.667h128v554.667h-128zM128 149.333v-85.333h768v85.333h-768z" />
+<glyph unicode="&#xe906;" glyph-name="database-2" horiz-adv-x="876" d="M437.75 960c240.583 0 435.583-91.333 435.583-203.833 0-112.583-195.083-203.833-435.583-203.833s-435.583 91.333-435.583 203.833c0 112.5 195.083 203.833 435.583 203.833v0zM2.167 278.083v-156.5c77.5-275.25 843.167-222.083 871.25 14.083v156.333c-38.25-259.25-810-277.917-871.25-13.917v0 0zM0 685.5v-152.833c77.5-268.833 847.417-232.5 875.583-1.917v152.75c-38.333-253.25-814.333-255.833-875.583 2v0zM0 488v-156.5c77.5-275.25 847.417-238.083 875.583-1.917v156.333c-38.333-259.25-814.333-261.917-875.583 2.083v0z" />
+<glyph unicode="&#xe910;" glyph-name="headphones" d="M288 384h-64v-448h64c17.6 0 32 14.4 32 32v384c0 17.6-14.4 32-32 32zM736 384c-17.602 0-32-14.4-32-32v-384c0-17.6 14.398-32 32-32h64v448h-64zM1024 448c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-61.412 10.83-120.29 30.656-174.848-19.478-33.206-30.656-71.87-30.656-113.152 0-112.846 83.448-206.188 192-221.716v443.418c-31.914-4.566-61.664-15.842-87.754-32.378-5.392 26.718-8.246 54.364-8.246 82.676 0 229.75 186.25 416 416 416s416-186.25 416-416c0-28.314-2.83-55.968-8.22-82.696-26.1 16.546-55.854 27.848-87.78 32.418v-443.44c108.548 15.532 192 108.874 192 221.714 0 41.274-11.178 79.934-30.648 113.138 19.828 54.566 30.648 113.452 30.648 174.866z" />
+<glyph unicode="&#xe911;" glyph-name="music" d="M960 960h64v-736c0-88.366-100.29-160-224-160s-224 71.634-224 160c0 88.368 100.29 160 224 160 62.684 0 119.342-18.4 160-48.040v368.040l-512-113.778v-494.222c0-88.366-100.288-160-224-160s-224 71.634-224 160c0 88.368 100.288 160 224 160 62.684 0 119.342-18.4 160-48.040v624.040l576 128z" />
+<glyph unicode="&#xe914;" glyph-name="video" d="M384 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM0 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM768 352v96c0 35.2-28.8 64-64 64h-640c-35.2 0-64-28.8-64-64v-320c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v96l256-160v448l-256-160zM640 192h-512v192h512v-192z" />
+<glyph unicode="&#xe91e;" glyph-name="microphone-3" d="M480 256c88.366 0 160 71.634 160 160v384c0 88.366-71.634 160-160 160s-160-71.634-160-160v-384c0-88.366 71.636-160 160-160zM704 512v-96c0-123.71-100.29-224-224-224-123.712 0-224 100.29-224 224v96h-64v-96c0-148.238 112.004-270.3 256-286.22v-129.78h-128v-64h320v64h-128v129.78c143.994 15.92 256 137.982 256 286.22v96h-64z" />
+<glyph unicode="&#xe91f;" glyph-name="book" d="M896 832v-832h-672c-53.026 0-96 42.98-96 96s42.974 96 96 96h608v768h-640c-70.398 0-128-57.6-128-128v-768c0-70.4 57.602-128 128-128h768v896h-64zM224.056 128v0c-0.018-0.002-0.038 0-0.056 0-17.672 0-32-14.326-32-32s14.328-32 32-32c0.018 0 0.038 0.002 0.056 0.002v-0.002h607.89v64h-607.89z" />
+<glyph unicode="&#xe920;" glyph-name="books-2" horiz-adv-x="1152" d="M224 832h-192c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h192c17.6 0 32 14.4 32 32v704c0 17.6-14.4 32-32 32zM192 640h-128v64h128v-64zM544 832h-192c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h192c17.6 0 32 14.4 32 32v704c0 17.6-14.4 32-32 32zM512 640h-128v64h128v-64zM765.088 782.52l-171.464-86.394c-15.716-7.918-22.096-27.258-14.178-42.976l287.978-571.548c7.918-15.718 27.258-22.098 42.976-14.178l171.464 86.392c15.716 7.92 22.096 27.26 14.178 42.974l-287.978 571.55c-7.92 15.718-27.26 22.1-42.976 14.18z" />
+<glyph unicode="&#xe927;" glyph-name="file-picture" d="M832 64h-640v128l192 320 263-320 185 128v-256zM832 480c0-53.020-42.98-96-96-96-53.022 0-96 42.98-96 96s42.978 96 96 96c53.020 0 96-42.98 96-96zM917.806 730.924c-22.212 30.292-53.174 65.7-87.178 99.704s-69.412 64.964-99.704 87.178c-51.574 37.82-76.592 42.194-90.924 42.194h-496c-44.112 0-80-35.888-80-80v-864c0-44.112 35.888-80 80-80h736c44.112 0 80 35.888 80 80v624c0 14.332-4.372 39.35-42.194 90.924zM785.374 785.374c30.7-30.7 54.8-58.398 72.58-81.374h-153.954v153.946c22.984-17.78 50.678-41.878 81.374-72.572zM896 16c0-8.672-7.328-16-16-16h-736c-8.672 0-16 7.328-16 16v864c0 8.672 7.328 16 16 16 0 0 495.956 0.002 496 0v-224c0-17.672 14.326-32 32-32h224v-624z" />
+<glyph unicode="&#xe964;" glyph-name="database-1" d="M512 960c-282.77 0-512-71.634-512-160v-128c0-88.366 229.23-160 512-160s512 71.634 512 160v128c0 88.366-229.23 160-512 160zM512 416c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160zM512 128c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160z" />
+<glyph unicode="&#xe9a5;" glyph-name="rocket" d="M704 896l-320-320h-192l-192-256c0 0 203.416 56.652 322.066 30.084l-322.066-414.084 421.902 328.144c58.838-134.654-37.902-328.144-37.902-328.144l256 192v192l320 320 64 320-320-64z" />
+<glyph unicode="&#xe9b5;" glyph-name="power" d="M384 960l-384-512h384l-256-512 896 640h-512l384 384z" />
+<glyph unicode="&#xe9d9;" glyph-name="star" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538z" />
+<glyph unicode="&#xe9da;" glyph-name="heart" d="M755.188 896c-107.63 0-200.258-87.554-243.164-179-42.938 91.444-135.578 179-243.216 179-148.382 0-268.808-120.44-268.808-268.832 0-301.846 304.5-380.994 512.022-679.418 196.154 296.576 511.978 387.206 511.978 679.418 0 148.392-120.43 268.832-268.812 268.832z" />
+<glyph unicode="&#xea9b;" glyph-name="rss" d="M136.294 209.070c-75.196 0-136.292-61.334-136.292-136.076 0-75.154 61.1-135.802 136.292-135.802 75.466 0 136.494 60.648 136.494 135.802-0.002 74.742-61.024 136.076-136.494 136.076zM0.156 612.070v-196.258c127.784 0 247.958-49.972 338.458-140.512 90.384-90.318 140.282-211.036 140.282-339.3h197.122c-0.002 372.82-303.282 676.070-675.862 676.070zM0.388 960v-196.356c455.782 0 826.756-371.334 826.756-827.644h196.856c0 564.47-459.254 1024-1023.612 1024z" />
+</font></defs></svg>
--- a/client/static/fonts/absicons/absicons.ttf
+++ b/client/static/fonts/absicons/absicons.ttf
--- a/client/static/fonts/absicons/absicons.woff
+++ b/client/static/fonts/absicons/absicons.woff
--- a/client/static/icons/NoUserPhoto.png
+++ b/client/static/icons/NoUserPhoto.png
--- a/client/store/downloads.js
+++ b/client/store/downloads.js
@@ -1,34 +0,0 @@
-
-export const state = () => ({
-  downloads: []
-})
-
-export const getters = {
-  getDownloads: (state) => (libraryItemId) => {
-    return state.downloads.filter(d => d.libraryItemId === libraryItemId)
-  },
-  getDownload: (state) => (id) => {
-    return state.downloads.find(d => d.id === id)
-  }
-}
-
-export const actions = {
-
-}
-
-export const mutations = {
-  setDownloads(state, downloads) {
-    state.downloads = downloads
-  },
-  addUpdateDownload(state, download) {
-    var index = state.downloads.findIndex(d => d.id === download.id)
-    if (index >= 0) {
-      state.downloads.splice(index, 1, download)
-    } else {
-      state.downloads.push(download)
-    }
-  },
-  removeDownload(state, download) {
-    state.downloads = state.downloads.filter(d => d.id !== download.id)
-  }
-}
--- a/client/store/globals.js
+++ b/client/store/globals.js
@@ -14,6 +14,7 @@ export const state = () => ({
  selectedAuthor: null,
  isCasting: false, // Actively casting
  isChromecastInitialized: false, // Script loaded
+  showBatchQuickMatchModal: false,
  dateFormats: [
    {
      text: 'MM/DD/YYYY',
@@ -27,11 +28,13 @@ export const state = () => ({
      text: 'YYYY-MM-DD',
      value: 'yyyy-MM-dd'
    }
-  ]
+  ],
+  libraryIcons: ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
 })

 export const getters = {
-  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = '/book_placeholder.jpg') => {
+  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null) => {
+    if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
    if (!libraryItem) return placeholder
    var media = libraryItem.media
    if (!media || !media.coverPath || media.coverPath === placeholder) return placeholder
@@ -39,21 +42,24 @@ export const getters = {
    // Absolute URL covers (should no longer be used)
    if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath

-    var userToken = rootGetters['user/getToken']
-    var lastUpdate = libraryItem.updatedAt || Date.now()
+    const userToken = rootGetters['user/getToken']
+    const lastUpdate = libraryItem.updatedAt || Date.now()
+    const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers

    if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333/api/items/${libraryItem.id}/cover?token=${userToken}&ts=${lastUpdate}`
+      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
    }
-    return `/api/items/${libraryItem.id}/cover?token=${userToken}&ts=${lastUpdate}`
+
+    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
  },
-  getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, placeholder = '/book_placeholder.jpg') => {
+  getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, placeholder = null) => {
+    if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
    if (!libraryItemId) return placeholder
    var userToken = rootGetters['user/getToken']
    if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333/api/items/${libraryItemId}/cover?token=${userToken}`
+      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}`
    }
-    return `/api/items/${libraryItemId}/cover?token=${userToken}`
+    return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}`
  }
 }

@@ -108,5 +114,8 @@ export const mutations = {
  },
  setCasting(state, val) {
    state.isCasting = val
+  },
+  setShowBatchQuickMatchModal(state, val) {
+    state.showBatchQuickMatchModal = val
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
advplyr	a3dc79121e	Version bump 2.2.2	2022-11-05 15:06:10 -05:00
advplyr	9627f58541	Merge pull request #1110 from keaganhilliard/tone-json Added tone json file support	2022-11-05 13:13:49 -05:00
advplyr	1118b8b782	Metadata embed and m4b merge fixes and cleanup	2022-11-05 13:13:52 -05:00
advplyr	36626d43a1	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-11-05 07:36:58 -05:00
advplyr	af9a87f8bd	Tone version bump v0.1.2	2022-11-05 07:36:53 -05:00
advplyr	056de09645	Merge pull request #1111 from ruoti/fix-sortIgnorePrefix Makes it so the when sorting and ignoring prefixes, prefixes are actually ignored	2022-11-04 17:48:19 -05:00
advplyr	f5c394c96d	Merge pull request #1106 from ruoti/livereload-server Makes the dev target support auto reloading of the server	2022-11-04 17:14:57 -05:00
Keagan Hilliard	3824154c15	Forgot to update the merge	2022-11-03 10:20:32 -06:00
Keagan Hilliard	586c8a550a	Removed a noisy log and limit chapter embedding to items with only 1 audiofile	2022-11-03 10:09:49 -06:00
Keagan Hilliard	d57effe97c	Fixed a couple of issues, should be working well now	2022-11-03 09:32:50 -06:00
Scott Ruoti	473257f65e	Makes it so the when sorting and ignoring prefixes, they are actually ignored	2022-11-03 00:14:07 -04:00
Keagan Hilliard	c1938f78c2	Added json file support	2022-11-02 19:40:50 -06:00
Scott Ruoti	e97171d953	Makes the dev target support auto reloading of the server	2022-11-02 19:51:41 -04:00
advplyr	c6e9fe6513	Update:Chapter lookup modal show # of chapters found vs current # of chapters #1070	2022-11-02 17:28:26 -05:00
advplyr	765a11f135	Update:Increase db lockfile stale time to 2 mins #1095	2022-10-29 17:37:56 -05:00
advplyr	491bb04877	Update:Library folder picker note to debian installs	2022-10-29 15:42:34 -05:00
advplyr	fbbcbb4af1	Add:Series filters #712	2022-10-29 15:33:38 -05:00
advplyr	ce133cd6f2	Add:Series sort #712	2022-10-29 11:17:51 -05:00
advplyr	dc4c30d791	Update readme add matrix invite link	2022-10-29 10:28:12 -05:00
advplyr	e752b4071d	Update:Cleanup bookshelf toolbars & fix siderail icon	2022-10-28 18:10:19 -05:00
advplyr	685b4e77eb	Remove old viewMode code	2022-10-28 17:27:06 -05:00
advplyr	1a35def375	Update:default sorting ignore prefixes to just be the #869	2022-10-27 17:50:56 -05:00
advplyr	76d55e72df	Update:Collections page book list show authors and update UI for mobile #943	2022-10-27 17:46:51 -05:00
advplyr	8127ee7e56	Fix:Debian preinst wget to specify output filename #1092	2022-10-26 17:13:56 -05:00
advplyr	efecf7ed82	Update:Podcast episode auto download schedule setting for max new episodes to download #1091	2022-10-26 16:55:16 -05:00
advplyr	ac46548c4d	Fix:Comic reader for comics that have subfolders containing images #811	2022-10-25 17:49:08 -05:00
advplyr	40384dd442	Add:Podcast episode filters and default to filter out completed episodes #940	2022-10-24 17:57:08 -05:00
advplyr	05b4124761	Update comic reader to look for number up to 5 digits in filename for sorting	2022-10-23 11:48:00 -05:00
advplyr	e1e10dca50	Update:Default library view to detail instead of bookshelf view & update settings copy	2022-10-22 09:13:20 -05:00
advplyr	0e96465d74	Remove old coverAspectRatio server setting	2022-10-22 09:01:00 -05:00
advplyr	88e9dabaaa	Update:fallback to comment meta tag for book descriptions	2022-10-22 08:37:56 -05:00
advplyr	d65ab0e35d	Fix:Read pdf error by downgrading vue-pdf version to 4.2.0	2022-10-21 16:19:59 -05:00
advplyr	f55559e9a3	Add:Support for webm and webma audio files #1079	2022-10-20 17:24:51 -05:00
advplyr	4ea1e4460a	Remove old library icons	2022-10-19 10:56:54 -05:00
advplyr	b16e69ee86	Update:New library icons and picker using icon font	2022-10-18 12:09:36 -05:00
advplyr	6b8d71c0b0	Add:absicons font to replace library icons	2022-10-17 18:02:25 -05:00
advplyr	cb762c97a8	Fix:Podcast parsing pubDate from RSS feed #1072	2022-10-16 16:24:05 -05:00
advplyr	77139c7256	Add:Support for shift selecting multiple library items #1020	2022-10-15 17:17:40 -05:00
advplyr	4cf43bc105	Fix:Local covers not showing in covers tab	2022-10-15 15:55:17 -05:00
advplyr	588b8ff209	Fix:Collection covers	2022-10-15 15:45:39 -05:00
advplyr	62a8301938	Readme update	2022-10-15 15:42:52 -05:00
advplyr	ce4e48cbd7	Add:Region support for audible chapter lookup	2022-10-15 15:31:07 -05:00
advplyr	067d90474b	Add:Collapsed series finished progress bar #1062	2022-10-14 17:59:00 -05:00
advplyr	e0e69fb164	Fix book log	2022-10-13 18:01:21 -05:00
advplyr	365610d918	Fix:multi select dropdown items remove button #1055	2022-10-11 16:56:06 -05:00
advplyr	fdece944f4	Remove leftover string in chapter editor	2022-10-08 17:37:43 -05:00
advplyr	d7952dab04	Fix:Setting book chapters from audio files #1052	2022-10-08 17:32:46 -05:00
advplyr	bec599f325	Update:30s timeout for file downloading axios request #1050	2022-10-08 17:15:37 -05:00
advplyr	affcc03c61	Update debian service with audiobookshelf group	2022-10-08 17:12:23 -05:00
advplyr	db18c71857	Version bump 2.2.1	2022-10-08 16:48:20 -05:00
advplyr	dcc223949a	Update:Add note for number of backups to keep #1041	2022-10-08 16:30:21 -05:00
advplyr	6a6d384d88	Update:Scanner folder name parse sequence starting with decimal and cast to number	2022-10-08 15:42:38 -05:00
advplyr	cd57667444	Fix:Library item edit modal clear loading indicator when changing tabs	2022-10-07 17:22:23 -05:00
advplyr	3900db14d3	Add:Multi-region audible & audnexus support #731	2022-10-07 17:18:28 -05:00
advplyr	1fa94cbfad	Update tone to v0.1.1	2022-10-07 16:21:47 -05:00
advplyr	793233e782	Fix:Authors page to only include library items from the current library #1049	2022-10-06 17:06:06 -05:00
advplyr	94012e5dff	Add:Chapter editor shift all chapters by X seconds #927	2022-10-05 18:01:42 -05:00
advplyr	d440a9fd6a	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-10-04 17:43:43 -05:00
advplyr	928c6cf5b3	Fix:iTunes returning artist names with & instead of all comma separated #1022	2022-10-04 17:41:26 -05:00
advplyr	23a25d420c	Fix:Escape ebook URLs #1039	2022-10-04 17:29:26 -05:00
advplyr	dc779a3fc5	Merge pull request #1031 from Undergrid/Issue_1030 Fix a crash under certain circumstances when updating tags when quick… (Issue #1030)	2022-10-03 09:50:12 -05:00
Nick Thomson	876badbeea	Fix a crash under certain circumstances when updating tags when quick matching.	2022-10-03 01:38:52 +01:00
advplyr	8563bdde74	Update:Podcast episode downloads using episode title as filename without prefixing episode num	2022-10-02 17:12:44 -05:00
advplyr	803c9699ef	Version bump 2.2.0	2022-10-02 15:54:05 -05:00
advplyr	c254dc5144	Add:Button for testing scan probes in audiobook tracks table	2022-10-02 15:24:32 -05:00
advplyr	d22b475539	Update tools copy	2022-10-02 14:49:24 -05:00
advplyr	142205f060	Add:Purge items cache button and api endpoint	2022-10-02 14:46:48 -05:00
advplyr	02d997897c	Add:Cancel m4b merge button #1008	2022-10-02 14:31:04 -05:00
advplyr	39979ff8a3	Add:Tasks widget in appbar for merging m4bs & remove old m4b merge routes	2022-10-02 14:16:17 -05:00
advplyr	441b8c5bb7	Update:M4b Merge tool moved to manage page	2022-10-02 11:53:53 -05:00
advplyr	d456ec2786	Fix:Local covers path for localhost	2022-10-02 10:07:24 -05:00
advplyr	a729ce1512	Fix:Metadata embed tool chapters list	2022-10-02 08:44:38 -05:00
advplyr	3949896d88	Fix:Disable multi select input and series input widget	2022-10-01 17:15:21 -05:00
advplyr	14e5e11344	Cleaned series match & renaming volumeNumber to sequence	2022-10-01 17:01:22 -05:00
advplyr	c23f31216a	Fix:iTunes crash on matching genres #1025	2022-10-01 16:51:22 -05:00
advplyr	cd04533eea	Update:Setting up paths to eventually support subdirectory	2022-10-01 16:07:30 -05:00
advplyr	6701551289	Fix:Ensure podcast library item folder exists before downloading episodes #1019	2022-09-30 16:55:31 -05:00
advplyr	1a4833f873	Add:Chapter editor lookup chapters and apply titles only #991	2022-09-29 18:06:13 -05:00
advplyr	3a7639f690	Update:Chapter editor lookup modal add color legend and style improvements #657	2022-09-29 17:55:45 -05:00
advplyr	63c55f08dc	Add:Remove episodes from continue listening shelf #919	2022-09-28 17:57:27 -05:00
advplyr	98e79f144c	Add:Remove item from continue listening shelf #919	2022-09-28 17:45:39 -05:00
advplyr	3b9236a7ce	Fix:More menu item height	2022-09-28 17:14:20 -05:00
advplyr	ac30a971c5	Fix:Clean user data on server start removing invalid media progress items	2022-09-28 17:12:27 -05:00
advplyr	9ee6eaade9	Add:Hide series from home page option #919	2022-09-27 17:48:45 -05:00
advplyr	8c32fed911	Update:Match tab show current genres, tags and description #976	2022-09-27 16:49:14 -05:00
advplyr	f36a5eae6d	Update:Audiobook merge to set metadata with tone and replace m4b in library item #594	2022-09-26 18:07:31 -05:00
advplyr	b7bdaac163	Fix:Trim whitespace when parsing audio file meta tags #997	2022-09-25 17:15:19 -05:00
advplyr	162a1b7971	Add:Purge media progress button & api endpoint for items that no longer exist #921	2022-09-25 17:11:39 -05:00
advplyr	97da73baf3	Update:Experimental metadata embed tool to use tone	2022-09-25 15:56:06 -05:00
advplyr	b6e3559aba	Update:Notification config UI for mobile #996	2022-09-25 11:50:41 -05:00
advplyr	39a13e3610	Add:Notification system max queue and max failed attempts settings #996	2022-09-25 10:42:26 -05:00
advplyr	7aa89f16c9	Add:Notification system queueing and queue limit #996	2022-09-25 10:19:44 -05:00
advplyr	88726bed86	Update:Notification system descriptions #996	2022-09-25 09:46:45 -05:00
advplyr	a35b35c062	Merge pull request #1005 from Undergrid/multi_select_quick_match Multi select quick match	2022-09-24 17:46:51 -05:00
Undergrid	951afaa568	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:40:07 +01:00
Undergrid	5e8979876f	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:39:37 +01:00
Undergrid	eb0ef8c696	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:38:58 +01:00
Undergrid	066b6c13c6	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:38:51 +01:00
Undergrid	014ad668a5	Update server/controllers/LibraryItemController.js Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:38:44 +01:00
Undergrid	62c59c634c	Update server/controllers/LibraryItemController.js Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:38:18 +01:00
Undergrid	f3f2d614b1	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:37:59 +01:00
Undergrid	7fd70c1c86	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:37:54 +01:00
Undergrid	46a3974b79	Update client/components/modals/BatchQuickMatchModel.vue Co-authored-by: advplyr <67830747+advplyr@users.noreply.github.com>	2022-09-24 23:37:43 +01:00
advplyr	f851cde1f4	Merge pull request #1007 from Undergrid/Issue_1004 Issue 1004	2022-09-24 17:36:42 -05:00
advplyr	0f772fd3cf	Update server/libs/nodeFfprobe/index.js	2022-09-24 17:36:29 -05:00
Nick Thomson	dd0d2e9f55	Fix tabs	2022-09-24 22:51:17 +01:00
Nick Thomson	022c506eda	Possible fix for issue #1004	2022-09-24 22:50:21 +01:00
Nick Thomson	dd8577354b	Fixing tabs again.	2022-09-24 22:20:49 +01:00
Nick Thomson	3e7a76574b	Switch to using the websocket for confirmation of batch updates, allowing the main request to be done asynchronously	2022-09-24 22:17:36 +01:00
advplyr	0ef2a2e4b6	Update:Notifications onTest for testing and parse title/body template #996	2022-09-24 16:15:16 -05:00
advplyr	8e8046541e	Add:Notification edit/delete and UI updates #996	2022-09-24 14:03:14 -05:00
Nick Thomson	2d6f9bab8b	Added totals of updated and unmatched books to toast shown at completion of batch quick match.	2022-09-24 18:57:09 +01:00
Nick Thomson	11e3cf4f19	Initialise the selected provider to the default for the library when the batch quick match is first opened or if the user has switched libraries.	2022-09-24 18:23:33 +01:00
advplyr	37a3fdb606	Notifications UI update and delete endpoint	2022-09-23 18:10:03 -05:00
Nick Thomson	9983fe7d66	Fix another whitespace issue	2022-09-23 19:39:20 +01:00
Nick Thomson	731cf8e4ed	Fix whitespace issues	2022-09-23 19:37:30 +01:00
Nick Thomson	c3f2e606dd	Clarified behaviour of Update options in batch quick match dialog and added flag in quickMatchLibraryItem to override the default system settings	2022-09-23 18:53:30 +01:00
Nick Thomson	dbb62069ef	Implementation of batch quick match API and related options dialog	2022-09-23 17:51:34 +01:00
advplyr	b08ad8785e	Notification create/update events UI	2022-09-22 18:12:48 -05:00
advplyr	ff04eb8d5e	Add:Notification settings, notification manager trigger #996	2022-09-21 18:01:10 -05:00
advplyr	9a7503cde2	Start adding notification manager	2022-09-20 18:08:41 -05:00
Nick Thomson	7d4e7ce2c0	Initial commit	2022-09-19 16:29:24 +01:00
advplyr	565bb4cd6b	Update:Add author name to author quickmatch toast #992	2022-09-18 17:02:19 -05:00
advplyr	be592a04d0	Update:Author names ignore periods when checking for existing authors #993	2022-09-18 16:58:20 -05:00
advplyr	ae4ac392c6	Add:Podcasts latest episodes page	2022-09-17 15:23:33 -05:00
advplyr	f6b6c0a41e	Add:API endpoint for podcasts to get most recent unfinished episodes for all podcasts in the library	2022-09-16 16:59:16 -05:00
advplyr	83e4a8f4ed	Add .vscode settings.json	2022-09-16 13:38:21 -05:00
advplyr	70ef09f451	Add:Podcast quickmatch attempts quick matching unmatched episodes #983	2022-09-15 18:35:56 -05:00
advplyr	b91b320006	Update:Sync progress request timeout to 3s	2022-09-13 16:50:27 -05:00
advplyr	d139fffa96	Update:Backup Apply to Restore #981	2022-09-12 16:55:59 -05:00
advplyr	845fc0794e	Fix debian FFPROBE_PATH	2022-09-11 16:57:36 -05:00
advplyr	ac6c885878	Update debian preinst to add TONE_PATH variable if not in existing config	2022-09-11 16:55:33 -05:00
advplyr	b2b5111c50	Fix TONE_PATH in toneProber	2022-09-11 16:42:28 -05:00
advplyr	e11629a161	Fix:.ignore files not working inside library item subdirs #979	2022-09-11 16:22:07 -05:00
advplyr	ff2fb2b2ba	Add: tone download in debian packager	2022-09-11 16:05:53 -05:00
advplyr	b9a9c0e717	Revert sample docker-compose	2022-09-11 15:36:32 -05:00
advplyr	c16e6d19ae	Add:Experimental tone library for scanning metadata	2022-09-11 15:35:06 -05:00
advplyr	0e98620939	Remove back arrow on toolbar	2022-09-10 09:10:29 -05:00
advplyr	e32f51f58a	Fix:Add podcast modal for mobile screen sizes #975	2022-09-09 17:40:06 -05:00
advplyr	1ec12a547e	Merge pull request #974 from Zibbp/master Persist Volume in Local Storage	2022-09-08 16:51:05 -05:00
Zibbp	baedced83f	feat(player): persist volume in local storage	2022-09-08 10:02:40 -05:00