Version bump v2.2.5

Update it.json

.dockerignore

@@ -12,4 +12,5 @@ dev.js
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
+/dist/
+/deploy/

.gitignore

@@ -11,7 +11,7 @@ test/
 /client/.nuxt/
 /client/dist/
 /dist/
-library/
+/deploy/
 
 sw.*
 .DS_STORE

.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
+}

Dockerfile

@@ -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

build/debian/DEBIAN/preinst

@@ -5,11 +5,9 @@ set -o pipefail
 FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg"
 DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
 CONFIG_PATH="/etc/default/audiobookshelf"
-DEFAULT_PORT=7331
+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"
 

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]

client/assets/absicons.css

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

client/assets/app.css

@@ -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);
@@ -22,6 +23,10 @@
 #bookshelf {
   height: calc(100% - 40px);
   background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
+
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #855620 rgba(0, 0, 0, 0);
 }
 
 .bookshelf-row {

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 {
@@ -26,7 +26,7 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+.material-icons:not([class*="text-"]) {
   font-size: 1.5rem;
 }
 
@@ -44,17 +44,16 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+.material-icons-outlined:not([class*="text-"]) {
   font-size: 1.5rem;
 }
 
-
 @font-face {
   font-family: 'Gentium Book Basic';
   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 +63,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 +73,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 +83,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 +93,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 +103,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 +113,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 +123,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 +133,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 +143,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 +153,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 +163,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 +173,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 +183,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 +193,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 +203,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 +213,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 +223,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 +233,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 +243,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 +253,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 +263,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 +273,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 +283,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 +293,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 +303,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 +313,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 +323,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 +333,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;
 }

client/components/app/Appbar.vue

@@ -3,19 +3,19 @@
     <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-10 min-w-10 h-10 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" />
 
-        <controls-global-search v-if="currentLibrary" class="" />
+        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
         <div class="flex-grow" />
 
-        <span v-if="showExperimentalFeatures" class="material-icons 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>
@@ -41,30 +41,36 @@
             <span class="block truncate">{{ username }}</span>
           </span>
           <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
-            <span class="material-icons text-gray-100">person</span>
+            <span class="material-icons text-xl text-gray-100">person</span>
           </span>
         </nuxt-link>
       </div>
-
       <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>
+        <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numLibraryItemsSelected]) }}</h1>
         <div class="flex-grow" />
-        <ui-tooltip v-if="!isPodcastLibrary" :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
+        <ui-btn v-if="!isPodcastLibrary" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playSelectedItems">
+          <span class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
+          {{ $strings.ButtonPlay }}
+        </ui-btn>
+        <ui-tooltip v-if="userIsAdminOrUp && !isPodcastLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-tooltip v-if="!isPodcastLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
           <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
-        <ui-tooltip v-if="userCanUpdate && !isPodcastLibrary" text="Add to Collection" direction="bottom">
+        <ui-tooltip v-if="userCanUpdate && !isPodcastLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
         </ui-tooltip>
-        <template v-if="userCanUpdate && numLibraryItemsSelected < 50">
+        <template v-if="userCanUpdate">
           <ui-tooltip text="Edit" direction="bottom">
-            <ui-icon-btn v-show="!processingBatchDelete" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
+            <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
           </ui-tooltip>
         </template>
-        <ui-tooltip v-if="userCanDelete" text="Delete" direction="bottom">
-          <ui-icon-btn :disabled="processingBatchDelete" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
+        <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
         </ui-tooltip>
-        <ui-tooltip text="Deselect All" direction="bottom">
-          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom">
+          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
         </ui-tooltip>
       </div>
     </div>
@@ -75,9 +81,7 @@
 export default {
   data() {
     return {
-      processingBatchDelete: false,
-      totalEntities: 0,
-      isAllSelected: false
+      totalEntities: 0
     }
   },
   computed: {
@@ -147,18 +151,54 @@ export default {
     }
   },
   methods: {
-    cancelSelectionMode() {
-      if (this.processingBatchDelete) return
+    async playSelectedItems() {
+      this.$store.commit('setProcessingBatch', true)
+
+      var libraryItems = await this.$axios.$post(`/api/items/batch/get`, { libraryItemIds: this.selectedLibraryItems }).catch((error) => {
+        var errorMsg = error.response.data || 'Failed to get items'
+        console.error(errorMsg, error)
+        this.$toast.error(errorMsg)
+        return []
+      })
+
+      if (!libraryItems.length) {
+        this.$store.commit('setProcessingBatch', false)
+        return
+      }
+
+      const queueItems = []
+      libraryItems.forEach((item) => {
+        queueItems.push({
+          libraryItemId: item.id,
+          libraryId: item.libraryId,
+          episodeId: null,
+          title: item.media.metadata.title,
+          subtitle: item.media.metadata.authors.map((au) => au.name).join(', '),
+          caption: '',
+          duration: item.media.duration || null,
+          coverPath: item.media.coverPath || null
+        })
+      })
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: queueItems[0].libraryItemId,
+        queueItems
+      })
+      this.$store.commit('setProcessingBatch', false)
       this.$store.commit('setSelectedLibraryItems', [])
-      this.$eventBus.$emit('bookshelf-clear-selection')
-      this.isAllSelected = false
+      this.$eventBus.$emit('bookshelf_clear_selection')
+    },
+    cancelSelectionMode() {
+      if (this.processingBatch) return
+      this.$store.commit('setSelectedLibraryItems', [])
+      this.$eventBus.$emit('bookshelf_clear_selection')
     },
     toggleBatchRead() {
       this.$store.commit('setProcessingBatch', true)
       var newIsFinished = !this.selectedIsFinished
       var updateProgressPayloads = this.selectedLibraryItems.map((lid) => {
         return {
-          id: lid,
+          libraryItemId: lid,
           isFinished: newIsFinished
         }
       })
@@ -169,7 +209,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')
@@ -181,7 +221,6 @@ export default {
       var audiobookText = this.numLibraryItemsSelected > 1 ? `these ${this.numLibraryItemsSelected} items` : 'this item'
       var confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the items from Audiobookshelf`
       if (confirm(confirmMsg)) {
-        this.processingBatchDelete = true
         this.$store.commit('setProcessingBatch', true)
         this.$axios
           .$post(`/api/items/batch/delete`, {
@@ -189,15 +228,13 @@ export default {
           })
           .then(() => {
             this.$toast.success('Batch delete success!')
-            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')
             console.error('Failed to batch delete', error)
-            this.processingBatchDelete = false
             this.$store.commit('setProcessingBatch', false)
           })
       }
@@ -206,10 +243,13 @@ export default {
       this.$router.push('/batch')
     },
     batchAddToCollectionClick() {
-      this.$store.commit('globals/setShowBatchUserCollectionsModal', true)
+      this.$store.commit('globals/setShowBatchCollectionsModal', true)
     },
     setBookshelfTotalEntities(totalEntities) {
       this.totalEntities = totalEntities
+    },
+    batchAutoMatchClick() {
+      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
     }
   },
   mounted() {

client/components/app/BookShelfCategorized.vue

@@ -16,24 +16,24 @@
     <!-- 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">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
+        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
-        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
+        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-episode-slider>
         <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-series-slider>
         <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ shelf.label }}</p>
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-authors-slider>
       </template>
     </div>
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
       <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <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: {
@@ -70,11 +71,8 @@ export default {
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
-    bookshelfView() {
-      return this.$store.getters['getServerSetting']('bookshelfView')
-    },
     isAlternativeBookshelfView() {
-      return this.bookshelfView === this.$constants.BookshelfView.TITLES
+      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.DETAIL
     },
     bookCoverWidth() {
       var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
@@ -82,20 +80,72 @@ export default {
       return coverSize
     },
     coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
+      return this.coverAspectRatio == 1
     },
     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
 
@@ -116,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() {
@@ -124,6 +180,7 @@ export default {
         shelves.push({
           id: 'books',
           label: 'Books',
+          labelStringKey: 'LabelBooks',
           type: 'book',
           entities: this.results.books.map((res) => res.libraryItem)
         })
@@ -133,6 +190,7 @@ export default {
         shelves.push({
           id: 'podcasts',
           label: 'Podcasts',
+          labelStringKey: 'LabelPodcasts',
           type: 'podcast',
           entities: this.results.podcasts.map((res) => res.libraryItem)
         })
@@ -142,6 +200,7 @@ export default {
         shelves.push({
           id: 'series',
           label: 'Series',
+          labelStringKey: 'LabelSeries',
           type: 'series',
           entities: this.results.series.map((seriesObj) => {
             return {
@@ -156,6 +215,7 @@ export default {
         shelves.push({
           id: 'tags',
           label: 'Tags',
+          labelStringKey: 'LabelTags',
           type: 'tags',
           entities: this.results.tags.map((tagObj) => {
             return {
@@ -170,6 +230,7 @@ export default {
         shelves.push({
           id: 'authors',
           label: 'Authors',
+          labelStringKey: 'LabelAuthors',
           type: 'authors',
           entities: this.results.authors.map((a) => {
             return {
@@ -181,7 +242,6 @@ export default {
       }
       this.shelves = shelves
     },
-    settingsUpdated(settings) {},
     scan() {
       this.$store
         .dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
@@ -193,6 +253,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
@@ -250,6 +319,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') {
@@ -273,9 +381,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)
@@ -291,6 +398,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)

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">
@@ -17,6 +31,11 @@
             <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
           </template>
         </div>
+        <div v-if="shelf.type === 'tags'" class="flex items-center">
+          <template v-for="entity in shelf.entities">
+            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+          </template>
+        </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
             <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
@@ -27,7 +46,7 @@
 
     <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
-        <p class="transform text-sm">{{ shelf.label }}</p>
+        <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
       </div>
     </div>
 
@@ -52,7 +71,8 @@ export default {
     },
     sizeMultiplier: Number,
     bookCoverWidth: Number,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    continueListeningShelf: Boolean
   },
   data() {
     return {
@@ -118,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)
@@ -171,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)
   }
 }

client/components/app/BookShelfToolbar.vue

@@ -1,75 +1,92 @@
 <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'">
-        <p class="text-sm">Home</p>
+      <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 v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
       </nuxt-link>
-      <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'">
-        <p class="text-sm">Library</p>
+      <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 v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
       </nuxt-link>
-      <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'">
-        <p class="text-sm">Series</p>
+      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">{{ $strings.ButtonLatest }}</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'">
-        <p class="text-sm">Collections</p>
+      <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 v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+        </svg>
+      </nuxt-link>
+      <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 v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
+        <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
+      </nuxt-link>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
+        <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          />
+        </svg>
       </nuxt-link>
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p class="text-sm">Search</p>
+        <p class="text-sm">{{ $strings.ButtonSearch }}</p>
       </nuxt-link>
     </div>
     <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
-      <template v-if="page !== 'search' && page !== 'podcast-search' && !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">
-            {{ seriesName }}
-          </p>
-          <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
-            <span class="font-mono">{{ numShowing }}</span>
-          </div>
-          <div class="flex-grow" />
-          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center" @click="markSeriesFinished">
-            <div class="h-5 w-5">
-              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
-                <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-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
-              </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                <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
-          >
+      <!-- Series books page -->
+      <template v-if="selectedSeries">
+        <p class="pl-2 font-book text-base md:text-lg">
+          {{ seriesName }}
+        </p>
+        <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
+          <span class="font-mono">{{ numShowing }}</span>
         </div>
+        <div class="flex-grow" />
+        <ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
+        <ui-btn v-if="!isBatchSelecting" color="primary" small :loading="processingSeries" class="items-center ml-1 sm:ml-4 hidden md:flex" @click="markSeriesFinished">
+          <div class="h-5 w-5">
+            <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
+              <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-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <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"> {{ $strings.LabelMarkSeries }} {{ isSeriesFinished ? $strings.LabelNotFinished : $strings.LabelFinished }}</span>
+        </ui-btn>
+        <ui-btn v-if="isSeriesRemovedFromContinueListening && !isBatchSelecting" small :loading="processingSeries" @click="reAddSeriesToContinueListening" class="hidden md:block ml-2"> Re-Add Series to Continue Listening </ui-btn>
+      </template>
+      <!-- library & collections page -->
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
+        <p class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
+
         <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 && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
+        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
+        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" 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 && !isBatchSelecting" 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>
+        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
       </template>
+      <!-- search page -->
       <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>
+        <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
         <div class="flex-grow" />
       </template>
+      <!-- authors page -->
       <template v-else-if="page === 'authors'">
         <div class="flex-grow" />
-        <ui-btn v-if="userCanUpdate && authors && authors.length" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">Match All Authors</ui-btn>
+        <ui-btn v-if="userCanUpdate && authors && authors.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
       </template>
     </div>
   </div>
@@ -85,7 +102,6 @@ export default {
       default: () => null
     },
     searchQuery: String,
-    viewMode: String,
     authors: {
       type: Array,
       default: () => []
@@ -96,11 +112,27 @@ export default {
       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 +145,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 +154,39 @@ 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
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
+    },
+    isAuthorsPage() {
+      return this.$route.name === 'library-library-authors'
+    },
+    numShowing() {
+      return this.totalEntities
+    },
+    entityName() {
+      if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
+      if (!this.page) return this.$strings.LabelBooks
+      if (this.isSeriesPage) return this.$strings.LabelSeries
+      if (this.isCollectionsPage) return this.$strings.LabelCollections
+      return ''
+    },
+    seriesId() {
+      return this.selectedSeries ? this.selectedSeries.id : null
     },
     seriesName() {
       return this.selectedSeries ? this.selectedSeries.name : null
@@ -163,20 +198,63 @@ export default {
       if (!this.seriesProgress) return []
       return this.seriesProgress.libraryItemIds || []
     },
+    isBatchSelecting() {
+      return this.$store.state.selectedLibraryItems.length
+    },
     isSeriesFinished() {
       return this.seriesProgress && !!this.seriesProgress.isFinished
     },
+    isSeriesRemovedFromContinueListening() {
+      if (!this.seriesId) return false
+      return this.$store.getters['user/getIsSeriesRemovedFromContinueListening'](this.seriesId)
+    },
     filterBy() {
       return this.$store.getters['user/getUserSetting']('filterBy')
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
     },
-    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: {
+    reAddSeriesToContinueListening() {
+      this.processingSeries = true
+      this.$axios
+        .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
+        .then(() => {
+          this.$toast.success('Series re-added to continue listening')
+        })
+        .catch((error) => {
+          console.error('Failed to re-add series to continue listening', error)
+          this.$toast.error('Failed to re-add series to continue listening')
+        })
+        .finally(() => {
+          this.processingSeries = false
+        })
+    },
     async matchAllAuthors() {
       this.processingAuthors = true
 
@@ -214,11 +292,13 @@ export default {
           .then(() => {
             this.$toast.success('Removed library items with issues')
             this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
-            this.processingIssues = false
+            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
           })
           .catch((error) => {
             console.error('Failed to remove library items with issues', error)
             this.$toast.error('Failed to remove library items with issues')
+          })
+          .finally(() => {
             this.processingIssues = false
           })
       }
@@ -228,7 +308,7 @@ export default {
       this.processingSeries = true
       var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
         return {
-          id: lid,
+          libraryItemId: lid,
           isFinished: newIsFinished
         }
       })
@@ -246,21 +326,24 @@ 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()
     },
+    updateCollapseBookSeries() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
@@ -274,15 +357,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() {
@@ -302,4 +376,4 @@ export default {
 #toolbar {
   box-shadow: 0px 8px 6px #111111aa;
 }
-</style>
+</style>

client/components/app/ConfigSideNav.vue

@@ -18,7 +18,7 @@
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </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>
 
@@ -47,7 +47,7 @@ export default {
         return [
           {
             id: 'config-stats',
-            title: 'Your Stats',
+            title: this.$strings.HeaderYourStats,
             path: '/config/stats'
           }
         ]
@@ -55,45 +55,50 @@ export default {
       const configRoutes = [
         {
           id: 'config',
-          title: 'Settings',
+          title: this.$strings.HeaderSettings,
           path: '/config'
         },
         {
           id: 'config-libraries',
-          title: 'Libraries',
+          title: this.$strings.HeaderLibraries,
           path: '/config/libraries'
         },
         {
           id: 'config-users',
-          title: 'Users',
+          title: this.$strings.HeaderUsers,
           path: '/config/users'
         },
         {
           id: 'config-sessions',
-          title: 'Listening Sessions',
+          title: this.$strings.HeaderListeningSessions,
           path: '/config/sessions'
         },
         {
           id: 'config-backups',
-          title: 'Backups',
+          title: this.$strings.HeaderBackups,
           path: '/config/backups'
         },
         {
           id: 'config-log',
-          title: 'Logs',
+          title: this.$strings.HeaderLogs,
           path: '/config/log'
+        },
+        {
+          id: 'config-notifications',
+          title: this.$strings.HeaderNotifications,
+          path: '/config/notifications'
         }
       ]
 
       if (this.currentLibraryId) {
         configRoutes.push({
           id: 'config-library-stats',
-          title: 'Library Stats',
+          title: this.$strings.HeaderLibraryStats,
           path: '/config/library-stats'
         })
         configRoutes.push({
           id: 'config-stats',
-          title: 'Your Stats',
+          title: this.$strings.HeaderYourStats,
           path: '/config/stats'
         })
       }
@@ -141,7 +146,7 @@ export default {
     }
   },
   methods: {
-    clickChangelog(){
+    clickChangelog() {
       this.showChangelogModal = true
     },
     clickOutside() {
@@ -150,7 +155,7 @@ export default {
     },
     closeDrawer() {
       this.$emit('update:isOpen', false)
-    },
+    }
   }
 }
 </script>

client/components/app/LazyBookshelf.vue

@@ -7,17 +7,17 @@
     </template>
 
     <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
+      <p class="text-center text-2xl font-book mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
       <div v-if="userIsAdminOrUp" class="flex">
-        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
-        <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
       </div>
     </div>
     <div v-else-if="!totalShelves && initialized" class="w-full py-16">
       <p class="text-xl text-center">{{ emptyMessage }}</p>
       <!-- Clear filter only available on Library bookshelf -->
       <div v-if="entityName === 'books'" class="flex justify-center mt-2">
-        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">Clear Filter</ui-btn>
+        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
       </div>
     </div>
 
@@ -61,7 +61,8 @@ export default {
       keywordFilter: null,
       currScrollTop: 0,
       resizeTimeout: null,
-      mountWindowWidth: 0
+      mountWindowWidth: 0,
+      lastItemIndexSelected: -1
     }
   },
   watch: {
@@ -84,19 +85,29 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
     },
     emptyMessage() {
-      if (this.page === 'series') return 'You have no series'
-      if (this.page === 'collections') return "You haven't made any collections yet"
+      if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
+      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
       if (this.hasFilter) {
-        if (this.filterName === 'Issues') return 'No Issues'
-        else if (this.filterName === 'Feed-open') return 'No RSS feeds are open'
-        return `No Results for filter "${this.filterName}: ${this.filterValue}"`
+        if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
+        else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
+        return this.$getString('MessageBookshelfNoResultsForFilter', [this.filterName, this.filterValue])
+        // return `No Results for filter "${this.filterName}: ${this.filterValue}"`
       }
-      return 'No results'
+      return this.$strings.MessageNoResults
     },
     entityName() {
       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')
     },
@@ -109,24 +120,23 @@ export default {
     collapseSeries() {
       return this.$store.getters['user/getUserSetting']('collapseSeries')
     },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
     },
-    bookshelfView() {
-      return this.$store.getters['getServerSetting']('bookshelfView')
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     sortingIgnorePrefix() {
       return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
     },
     isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+      return this.coverAspectRatio == 1
+    },
+    bookshelfView() {
+      return this.$store.getters['getBookshelfView']
     },
     isAlternativeBookshelfView() {
-      // if (!this.isEntityBook) return false // Only used for bookshelf showing books
-      return this.bookshelfView === this.$constants.BookshelfView.TITLES
-    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
+      return this.bookshelfView === this.$constants.BookshelfView.DETAIL
     },
     hasFilter() {
       return this.filterBy && this.filterBy !== 'all'
@@ -216,9 +226,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) {
@@ -233,6 +289,9 @@ export default {
           this.entityComponentRefs[key].setSelectionMode(isSelectionMode)
         }
       }
+      if (!isSelectionMode) {
+        this.lastItemIndexSelected = -1
+      }
     },
     async fetchEntites(page = 0) {
       var startIndex = page * this.booksPerFetch
@@ -264,7 +323,6 @@ export default {
           this.totalEntities = payload.total
           this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
           this.entities = new Array(this.totalEntities)
-          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
         }
 
         for (let i = 0; i < payload.results.length; i++) {
@@ -274,6 +332,8 @@ export default {
             this.entityComponentRefs[index].setEntity(this.entities[index])
           }
         }
+
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
       }
     },
     loadPage(page) {
@@ -371,13 +431,20 @@ 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)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
       } else {
         if (this.filterBy && this.filterBy !== 'all') {
           searchParams.set('filter', this.filterBy)
@@ -393,8 +460,6 @@ export default {
       return searchParams.toString()
     },
     checkUpdateSearchParams() {
-      if (this.page === 'series-books') return false
-
       var newSearchParams = this.buildSearchParams()
       var currentQueryString = window.location.search
       if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
@@ -412,6 +477,12 @@ export default {
 
       return false
     },
+    seriesSortUpdated() {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
     settingsUpdated(settings) {
       var wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
@@ -423,10 +494,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)
@@ -450,7 +518,7 @@ export default {
         var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
         if (indexOf >= 0) {
           this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
-          this.totalEntities = this.entities.length
+          this.totalEntities--
           this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
           this.executeRebuild()
         }
@@ -488,7 +556,7 @@ export default {
       var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
       if (indexOf >= 0) {
         this.entities = this.entities.filter((ent) => ent.id !== collection.id)
-        this.totalEntities = this.entities.length
+        this.totalEntities--
         this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
         this.executeRebuild()
       }
@@ -558,7 +626,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 })
@@ -582,7 +651,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')
@@ -650,6 +721,7 @@ export default {
 .bookshelfRow {
   background-image: var(--bookshelf-texture-img);
 }
+
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: var(--bookshelf-divider-bg);

client/components/app/SideRail.vue

@@ -9,17 +9,25 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Home</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
       <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary 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 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+
+      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Library</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
       <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -29,7 +37,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Series</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
       <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -37,7 +45,7 @@
     <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons-outlined">collections_bookmark</span>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Collections</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
       <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -50,15 +58,15 @@
         />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Authors</p>
+      <p class="font-book pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
 
       <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
     <nuxt-link v-if="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>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
 
       <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -66,7 +74,7 @@
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Issues</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
       <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
@@ -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() {}
 }

client/components/app/StreamContainer.vue

@@ -2,7 +2,7 @@
   <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-40 bg-primary px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
     <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-1 sm:left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
-      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </nuxt-link>
     <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-20 sm:pl-24'">
       <div>
@@ -15,7 +15,7 @@
           <p v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
             <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
           </p>
-          <p v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">Unknown</p>
+          <p v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</p>
         </div>
 
         <div class="text-gray-400 flex items-center">
@@ -44,11 +44,14 @@
       @close="closePlayer"
       @showBookmarks="showBookmarks"
       @showSleepTimer="showSleepTimerModal = true"
+      @showPlayerQueueItems="showPlayerQueueItemsModal = true"
     />
 
     <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
 
     <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
+
+    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />
   </div>
 </template>
 
@@ -66,6 +69,7 @@ export default {
       isPlaying: false,
       currentTime: 0,
       showSleepTimerModal: false,
+      showPlayerQueueItemsModal: false,
       sleepTimerSet: false,
       sleepTimerTime: 0,
       sleepTimerRemaining: 0,
@@ -77,16 +81,13 @@ export default {
   },
   computed: {
     coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
-    bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     bookCoverWidth() {
       return 88
     },
     bookCoverPosTop() {
-      if (this.bookCoverAspectRatio === 1) return -10
+      if (this.coverAspectRatio == 1) return -10
       return -64
     },
     cover() {
@@ -141,9 +142,39 @@ export default {
     podcastAuthor() {
       if (!this.isPodcast) return null
       return this.mediaMetadata.author || 'Unknown'
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
     }
   },
   methods: {
+    mediaFinished(libraryItemId, episodeId) {
+      // Play next item in queue
+      if (!this.playerQueueItems.length || !this.$store.state.playerQueueAutoPlay) {
+        // TODO: Set media finished flag so play button will play next queue item
+        return
+      }
+      var currentQueueIndex = this.playerQueueItems.findIndex((i) => {
+        if (episodeId) return i.libraryItemId === libraryItemId && i.episodeId === episodeId
+        return i.libraryItemId === libraryItemId
+      })
+      if (currentQueueIndex < 0) {
+        console.error('Media finished not found in queue - using first in queue', this.playerQueueItems)
+        currentQueueIndex = -1
+      }
+      if (currentQueueIndex === this.playerQueueItems.length - 1) {
+        console.log('Finished last item in queue')
+        return
+      }
+      const nextItemInQueue = this.playerQueueItems[currentQueueIndex + 1]
+      if (nextItemInQueue) {
+        this.playLibraryItem({
+          libraryItemId: nextItemInQueue.libraryItemId,
+          episodeId: nextItemInQueue.episodeId || null,
+          queueItems: this.playerQueueItems
+        })
+      }
+    },
     setPlaying(isPlaying) {
       this.isPlaying = isPlaying
       this.$store.commit('setIsPlaying', isPlaying)
@@ -316,6 +347,7 @@ export default {
       }
     },
     sessionOpen(session) {
+      // For opening session on init (temporarily unused)
       this.$store.commit('setMediaPlaying', {
         libraryItem: session.libraryItem,
         episodeId: session.episodeId
@@ -367,7 +399,7 @@ export default {
         if (payload.startTime !== null && !isNaN(payload.startTime)) {
           this.seek(payload.startTime)
         } else {
-           this.playerHandler.play()
+          this.playerHandler.play()
         }
         return
       }
@@ -379,7 +411,8 @@ export default {
       if (!libraryItem) return
       this.$store.commit('setMediaPlaying', {
         libraryItem,
-        episodeId
+        episodeId,
+        queueItems: payload.queueItems || []
       })
       this.$nextTick(() => {
         if (this.$refs.audioPlayer) this.$refs.audioPlayer.checkUpdateChapterTrack()

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
     },

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) }}</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>

client/components/cards/GroupCard.vue

@@ -1,26 +1,18 @@
 <template>
   <div class="relative">
-    <div class="rounded-sm h-full relative" :style="{ padding: `0px ${paddingX}px` }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
+    <div class="rounded-sm h-full relative" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" class="cursor-pointer">
-        <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'" :style="{ height: coverHeight + 'px', width: coverWidth + 'px' }">
-          <covers-group-cover ref="groupcover" :id="seriesId" :name="groupName" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'">
+          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
           <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-            <p class="font-book" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ groupName }}</p>
+            <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
-          <div class="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black bg-opacity-90 text-gray-300 box-shadow-book flex items-center justify-center border border-white border-opacity-25 pointer-events-none z-40">
-            <p class="font-book text-xl">{{ bookItems.length }}</p>
-          </div>
+          <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
         </div>
       </nuxt-link>
     </div>
-
-    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto bottom-0 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, coverWidth) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${1 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ groupName }}</p>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -31,11 +23,8 @@ export default {
       type: Object,
       default: () => null
     },
-    width: {
-      type: Number,
-      default: 120
-    },
-    isCategorized: Boolean,
+    width: Number,
+    height: Number,
     bookCoverAspectRatio: Number
   },
   data() {
@@ -43,23 +32,7 @@ export default {
       isHovering: false
     }
   },
-  watch: {
-    width(newVal) {
-      this.$nextTick(() => {
-        if (this.$refs.groupcover) {
-          this.$refs.groupcover.init()
-        }
-      })
-    }
-  },
   computed: {
-    seriesId() {
-      return this.groupEncode
-    },
-    labelFontSize() {
-      if (this.coverWidth < 160) return 0.75
-      return 0.875
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -70,29 +43,11 @@ export default {
       return this._group.type
     },
     groupTo() {
-      if (this.groupType === 'series') {
-        return `/library/${this.currentLibraryId}/series/${this._group.id}`
-      } else if (this.groupType === 'collection') {
-        return `/collection/${this._group.id}`
-      } else {
-        return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}`
-      }
-    },
-    squareAspectRatio() {
-      return this.bookCoverAspectRatio === 1
-    },
-    coverWidth() {
-      return this.width * 2
-    },
-    coverHeight() {
-      return this.width * this.bookCoverAspectRatio
+      return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
     },
     sizeMultiplier() {
-      var baseSize = this.squareAspectRatio ? 192 : 120
-      return this.width / baseSize
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
     },
     bookItems() {
       return this._group.books || []

client/components/cards/ItemSearchCard.vue

@@ -31,7 +31,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     coverWidth() {
       if (this.bookCoverAspectRatio === 1) return 50 * 1.2

client/components/cards/ItemUploadCard.vue

@@ -15,41 +15,41 @@
 
       <div class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" label="Title" @input="titleUpdated" />
+          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
         </div>
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" label="Author" />
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
           <div v-else class="w-full">
-            <p class="px-1 text-sm font-semibold">Directory <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
             <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
           </div>
         </div>
       </div>
       <div v-if="!isPodcast" class="flex my-2 -mx-2">
         <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" label="Series" note="(optional)" />
+          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
         </div>
         <div class="w-1/2 px-2">
           <div class="w-full">
-            <p class="px-1 text-sm font-semibold">Directory <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
             <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
           </div>
         </div>
       </div>
 
-      <tables-uploaded-files-table :files="item.itemFiles" title="Item Files" class="mt-8" />
-      <tables-uploaded-files-table v-if="item.otherFiles.length" title="Other Files" :files="item.otherFiles" />
-      <tables-uploaded-files-table v-if="item.ignoredFiles.length" title="Ignored Files" :files="item.ignoredFiles" />
+      <tables-uploaded-files-table :files="item.itemFiles" :title="$strings.HeaderItemFiles" class="mt-8" />
+      <tables-uploaded-files-table v-if="item.otherFiles.length" :title="$strings.HeaderOtherFiles" :files="item.otherFiles" />
+      <tables-uploaded-files-table v-if="item.ignoredFiles.length" :title="$strings.HeaderIgnoredFiles" :files="item.ignoredFiles" />
     </template>
     <widgets-alert v-if="uploadSuccess" type="success">
-      <p class="text-base">Successfully Uploaded!</p>
+      <p class="text-base">{{ $strings.MessageUploaderItemSuccess }}</p>
     </widgets-alert>
     <widgets-alert v-if="uploadFailed" type="error">
-      <p class="text-base">Failed to upload</p>
+      <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
     </widgets-alert>
 
     <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
-      <ui-loading-indicator text="Uploading..." />
+      <ui-loading-indicator :text="$strings.MessageUploading" />
     </div>
   </div>
 </template>

client/components/cards/LazyBookCard.vue

@@ -14,7 +14,12 @@
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
 
-    <div v-if="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
+    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+    </div>
+    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+    </div>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
       <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
@@ -27,7 +32,9 @@
       <!-- Placeholder Cover Title & Author -->
       <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
         <div>
-          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+            {{ titleCleaned }}
+          </p>
         </div>
       </div>
       <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
@@ -37,9 +44,11 @@
 
     <!-- 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)" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
+    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
       <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
@@ -66,6 +75,11 @@
       </div>
     </div>
 
+    <!-- Processing/loading spinner overlay -->
+    <div v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+      <widgets-loading-spinner size="la-lg" />
+    </div>
+
     <!-- Series name overlay -->
     <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
       <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
@@ -88,7 +102,7 @@
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">Episode #{{ recentEpisodeNumber }}</p>
     </div>
 
@@ -123,16 +137,16 @@ export default {
     },
     orderBy: String,
     filterBy: String,
-    sortingIgnorePrefix: Boolean
+    sortingIgnorePrefix: Boolean,
+    continueListeningShelf: Boolean
   },
   data() {
     return {
       isHovering: false,
       isMoreMenuOpen: false,
-      isProcessingReadUpdate: false,
+      processing: false,
       libraryItem: null,
       imageReady: false,
-      rescanning: false,
       selected: false,
       isSelectionMode: false,
       showCoverBg: false
@@ -177,7 +191,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)
@@ -228,6 +243,13 @@ export default {
       // Only added to item object when collapseSeries is enabled
       return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
     },
+    seriesSequenceList() {
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
+    },
+    libraryItemIdsInSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
+    },
     hasCover() {
       return !!this.media.coverPath
     },
@@ -292,12 +314,28 @@ 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
     },
+    libraryItemIdStreaming() {
+      return this.store.getters['getLibraryItemIdStreaming']
+    },
     isStreaming() {
-      return this.store.getters['getlibraryItemIdStreaming'] === this.libraryItemId
+      return this.libraryItemIdStreaming === this.libraryItemId
+    },
+    isQueued() {
+      const episodeId = this.recentEpisode ? this.recentEpisode.id : null
+      return this.store.getters['getIsMediaQueued'](this.libraryItemId, episodeId)
+    },
+    isStreamingFromDifferentLibrary() {
+      return this.store.getters['getIsStreamingFromDifferentLibrary']
     },
     showReadButton() {
       return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
@@ -364,16 +402,36 @@ export default {
     },
     moreMenuItems() {
       if (this.recentEpisode) {
-        return [
+        const items = [
           {
             func: 'editPodcast',
-            text: 'Edit Podcast'
+            text: this.$strings.ButtonEditPodcast
           },
           {
             func: 'toggleFinished',
-            text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
+            text: this.itemIsFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished
           }
         ]
+        if (this.continueListeningShelf) {
+          items.push({
+            func: 'removeFromContinueListening',
+            text: this.$strings.ButtonRemoveFromContinueListening
+          })
+        }
+        if (this.libraryItemIdStreaming && !this.isStreamingFromDifferentLibrary) {
+          if (!this.isQueued) {
+            items.push({
+              func: 'addToQueue',
+              text: this.$strings.ButtonQueueAddItem
+            })
+          } else if (!this.isStreaming) {
+            items.push({
+              func: 'removeFromQueue',
+              text: this.$strings.ButtonQueueRemoveItem
+            })
+          }
+        }
+        return items
       }
 
       var items = []
@@ -381,30 +439,59 @@ export default {
         items = [
           {
             func: 'toggleFinished',
-            text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
-          },
-          {
-            func: 'openCollections',
-            text: 'Add to Collection'
+            text: this.itemIsFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished
           }
         ]
+        if (this.userCanUpdate) {
+          items.push({
+            func: 'openCollections',
+            text: this.$strings.LabelAddToCollection
+          })
+        }
       }
       if (this.userCanUpdate) {
         items.push({
           func: 'showEditModalFiles',
-          text: 'Files'
+          text: this.$strings.HeaderFiles
         })
         items.push({
           func: 'showEditModalMatch',
-          text: 'Match'
+          text: this.$strings.HeaderMatch
         })
       }
       if (this.userIsAdminOrUp && !this.isFile) {
         items.push({
           func: 'rescan',
-          text: 'Re-Scan'
+          text: this.$strings.ButtonReScan
         })
       }
+      if (this.series && this.bookMount) {
+        items.push({
+          func: 'removeSeriesFromContinueListening',
+          text: this.$strings.ButtonRemoveSeriesFromContinueSeries
+        })
+      }
+      if (this.continueListeningShelf) {
+        items.push({
+          func: 'removeFromContinueListening',
+          text: this.$strings.ButtonRemoveFromContinueListening
+        })
+      }
+      if (!this.isPodcast) {
+        if (this.libraryItemIdStreaming && !this.isStreamingFromDifferentLibrary) {
+          if (!this.isQueued) {
+            items.push({
+              func: 'addToQueue',
+              text: this.$strings.ButtonQueueAddItem
+            })
+          } else if (!this.isStreaming) {
+            items.push({
+              func: 'removeFromQueue',
+              text: this.$strings.ButtonQueueRemoveItem
+            })
+          }
+        }
+      }
       return items
     },
     _socket() {
@@ -438,7 +525,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
@@ -476,7 +563,7 @@ export default {
           }
         }
         var mediaMetadata = libraryItem.media.metadata
-        if (mediaMetadata.series) {
+        if (mediaMetadata.series && Array.isArray(mediaMetadata.series)) {
           var newSeries = mediaMetadata.series.find((se) => se.id === this.series.id)
           if (newSeries) {
             // update selected series
@@ -490,10 +577,11 @@ export default {
       this.libraryItem = libraryItem
     },
     clickCard(e) {
+      if (this.processing) return
       if (this.isSelectionMode) {
         e.stopPropagation()
         e.preventDefault()
-        this.selectBtnClick()
+        this.selectBtnClick(e)
       } else {
         var router = this.$router || this.$nuxt.$router
         if (router) {
@@ -526,7 +614,7 @@ export default {
       var updatePayload = {
         isFinished: !this.itemIsFinished
       }
-      this.isProcessingReadUpdate = true
+      this.processing = true
 
       var apiEndpoint = `/api/me/progress/${this.libraryItemId}`
       if (this.recentEpisode) apiEndpoint += `/${this.recentEpisode.id}`
@@ -536,24 +624,25 @@ export default {
       axios
         .$patch(apiEndpoint, updatePayload)
         .then(() => {
-          this.isProcessingReadUpdate = false
-          toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.processing = false
+          toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
-          this.isProcessingReadUpdate = false
-          toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.processing = false
+          toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
         })
     },
     editPodcast() {
       this.$emit('editPodcast', this.libraryItem)
     },
     rescan() {
-      this.rescanning = true
-      this.$axios
+      if (this.processing) return
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
         .$get(`/api/items/${this.libraryItemId}/scan`)
         .then((data) => {
-          this.rescanning = false
           var result = data.result
           if (!result) {
             this.$toast.error(`Re-Scan Failed for "${this.title}"`)
@@ -568,7 +657,9 @@ export default {
         .catch((error) => {
           console.error('Failed to scan library item', error)
           this.$toast.error('Failed to scan library item')
-          this.rescanning = false
+        })
+        .finally(() => {
+          this.processing = false
         })
     },
     showEditModalFiles() {
@@ -579,9 +670,74 @@ 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
+        })
+    },
+    addToQueue() {
+      var queueItem = {}
+      if (this.recentEpisode) {
+        queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: this.recentEpisode.id,
+          title: this.recentEpisode.title,
+          subtitle: this.mediaMetadata.title,
+          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          duration: this.recentEpisode.audioFile.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      } else {
+        queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: null,
+          title: this.title,
+          subtitle: this.author,
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      }
+      this.store.commit('addItemToQueue', queueItem)
+    },
+    removeFromQueue() {
+      const episodeId = this.recentEpisode ? this.recentEpisode.id : null
+      this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId })
+    },
     openCollections() {
       this.store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.store.commit('globals/setShowUserCollectionsModal', true)
+      this.store.commit('globals/setShowCollectionsModal', true)
     },
     createMoreMenu() {
       if (!this.$refs.moreIcon) return
@@ -642,16 +798,68 @@ 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 })
     },
-    play() {
+    async play() {
       var eventBus = this.$eventBus || this.$nuxt.$eventBus
+
+      const queueItems = []
+      // Podcast episode load queue items
+      if (this.recentEpisode) {
+        const axios = this.$axios || this.$nuxt.$axios
+        this.processing = true
+        const fullLibraryItem = await axios.$get(`/api/items/${this.libraryItemId}`).catch((err) => {
+          console.error('Failed to fetch library item', err)
+          return null
+        })
+        this.processing = false
+
+        if (fullLibraryItem && fullLibraryItem.media.episodes) {
+          const episodes = fullLibraryItem.media.episodes || []
+          // Sort from least recent to most recent
+          episodes.sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+
+          const episodeIndex = episodes.findIndex((ep) => ep.id === this.recentEpisode.id)
+          if (episodeIndex >= 0) {
+            for (let i = episodeIndex; i < episodes.length; i++) {
+              const episode = episodes[i]
+              const podcastProgress = this.store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+              if (!podcastProgress || !podcastProgress.isFinished) {
+                queueItems.push({
+                  libraryItemId: this.libraryItemId,
+                  libraryId: this.libraryId,
+                  episodeId: episode.id,
+                  title: episode.title,
+                  subtitle: this.mediaMetadata.title,
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  duration: episode.audioFile.duration || null,
+                  coverPath: this.media.coverPath || null
+                })
+              }
+            }
+          }
+        }
+      } else {
+        const queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: null,
+          title: this.title,
+          subtitle: this.author,
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+        queueItems.push(queueItem)
+      }
+
       eventBus.$emit('play-item', {
         libraryItemId: this.libraryItemId,
-        episodeId: this.recentEpisode ? this.recentEpisode.id : null
+        episodeId: this.recentEpisode ? this.recentEpisode.id : null,
+        queueItems
       })
     },
     mouseover() {

client/components/cards/LazyCollectionCard.vue

@@ -4,7 +4,7 @@
     <div class="w-full h-full bg-primary relative rounded overflow-hidden">
       <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
-    <div v-show="isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
       <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
         <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
       </div>
@@ -30,7 +30,12 @@ export default {
     bookshelfView: {
       type: Number,
       default: 0
-    }
+    },
+    collectionMount: {
+      type: Object,
+      default: () => null
+    },
+    isTag: Boolean
   },
   data() {
     return {
@@ -63,7 +68,10 @@ 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']
     }
   },
   methods: {
@@ -99,6 +107,10 @@ export default {
       }
     }
   },
-  mounted() {}
+  mounted() {
+    if (this.collectionMount) {
+      this.setEntity(this.collectionMount)
+    }
+  }
 }
 </script>

client/components/cards/LazySeriesCard.vue

@@ -1,8 +1,8 @@
 <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" :group-to="seriesBooksRoute" />
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
     <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
@@ -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: {

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>

client/components/cards/PodcastFeedSummaryCard.vue

@@ -5,14 +5,14 @@
         <div class="w-full h-16 bg-primary">
           <img v-if="image" :src="image" class="w-full h-full object-cover" />
         </div>
-        <p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} Episodes</p>
+        <p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} {{ $strings.HeaderEpisodes }}</p>
       </div>
       <div class="flex-grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
         <p class="mb-1">{{ title }}</p>
         <p class="text-xs mb-1 text-gray-300">{{ author }}</p>
         <p class="text-xs mb-2 text-gray-200">{{ description }}</p>
         <p class="text-xs truncate text-blue-200">
-          Folder: <span class="font-mono">{{ folderPath }}</span>
+          {{ $strings.LabelFolder }}: <span class="font-mono">{{ folderPath }}</span>
         </p>
       </div>
     </div>

client/components/cards/SeriesSearchCard.vue

@@ -24,7 +24,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     name() {
       return this.series.name

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

client/components/controls/GlobalSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sm:w-80 w-full relative">
     <form @submit.prevent="submitSearch">
-      <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+      <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
     </form>
     <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
       <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
@@ -10,16 +10,16 @@
     <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
-          <p>Thinking...</p>
+          <p>{{ $strings.MessageThinking }}</p>
         </li>
         <li v-else-if="isFetching" class="py-2 px-2">
-          <p>Fetching...</p>
+          <p>{{ $strings.MessageFetching }}</p>
         </li>
         <li v-else-if="!totalResults" class="py-2 px-2">
-          <p>No Results</p>
+          <p>{{ $strings.MessageNoResults }}</p>
         </li>
         <template v-else>
-          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Books</p>
+          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelBooks }}</p>
           <template v-for="item in bookResults">
             <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/item/${item.libraryItem.id}`">
@@ -28,7 +28,7 @@
             </li>
           </template>
 
-          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Podcasts</p>
+          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
           <template v-for="item in podcastResults">
             <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/item/${item.libraryItem.id}`">
@@ -37,7 +37,7 @@
             </li>
           </template>
 
-          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Authors</p>
+          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
           <template v-for="item in authorResults">
             <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(item.id)}`">
@@ -46,7 +46,7 @@
             </li>
           </template>
 
-          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Series</p>
+          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelSeries }}</p>
           <template v-for="item in seriesResults">
             <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/series/${item.series.id}`">
@@ -55,7 +55,7 @@
             </li>
           </template>
 
-          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Tags</p>
+          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelTags }}</p>
           <template v-for="item in tagResults">
             <li :key="item.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">

client/components/controls/LibraryFilterSelect.vue

@@ -0,0 +1,320 @@
+<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
+    }
+  },
+  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'
+    },
+    seriesItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelNarrator,
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelLanguage,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelSeriesProgress,
+          value: 'progress',
+          sublist: true
+        }
+      ]
+    },
+    bookItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelSeries,
+          value: 'series',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelNarrator,
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelLanguage,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelProgress,
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelMissing,
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        },
+        {
+          text: this.$strings.LabelRSSFeedOpen,
+          value: 'feed-open',
+          sublist: false
+        }
+      ]
+    },
+    podcastItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    },
+    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 [this.$strings.LabelFinished, this.$strings.LabelInProgress, this.$strings.LabelNotStarted, this.$strings.LabelNotFinished]
+    },
+    missing() {
+      return ['ASIN', 'ISBN', this.$strings.LabelSubtitle, this.$strings.LabelAuthor, this.$strings.LabelPublishYear, this.$strings.LabelSeries, this.$strings.LabelDescription, this.$strings.LabelGenres, this.$strings.LabelTags, this.$strings.LabelNarrator, this.$strings.LabelPublisher, this.$strings.LabelLanguage]
+    },
+    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>

client/components/controls/LibrarySortSelect.vue

@@ -7,7 +7,7 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in selectItems">
         <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
           <div class="flex items-center">
@@ -30,71 +30,7 @@ export default {
   },
   data() {
     return {
-      showMenu: false,
-      bookItems: [
-        {
-          text: 'Title',
-          value: 'media.metadata.title'
-        },
-        {
-          text: 'Author (First Last)',
-          value: 'media.metadata.authorName'
-        },
-        {
-          text: 'Author (Last, First)',
-          value: 'media.metadata.authorNameLF'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        },
-        {
-          text: 'Duration',
-          value: 'media.duration'
-        },
-        {
-          text: 'File Birthtime',
-          value: 'birthtimeMs'
-        },
-        {
-          text: 'File Modified',
-          value: 'mtimeMs'
-        }
-      ],
-      podcastItems: [
-        {
-          text: 'Title',
-          value: 'media.metadata.title'
-        },
-        {
-          text: 'Author',
-          value: 'media.metadata.author'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        },
-        {
-          text: '# of Episodes',
-          value: 'media.numTracks'
-        },
-        {
-          text: 'File Birthtime',
-          value: 'birthtimeMs'
-        },
-        {
-          text: 'File Modified',
-          value: 'mtimeMs'
-        }
-      ]
+      showMenu: false
     }
   },
   computed: {
@@ -117,9 +53,103 @@ export default {
     isPodcast() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
     },
+    podcastItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'media.metadata.author'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelNumberOfEpisodes,
+          value: 'media.numTracks'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        }
+      ]
+    },
+    bookItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthorFirstLast,
+          value: 'media.metadata.authorName'
+        },
+        {
+          text: this.$strings.LabelAuthorLastFirst,
+          value: 'media.metadata.authorNameLF'
+        },
+        {
+          text: this.$strings.LabelPublishYear,
+          value: 'media.metadata.publishedYear'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelDuration,
+          value: 'media.duration'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        }
+      ]
+    },
+    seriesItems() {
+      return [
+        ...this.bookItems,
+        {
+          text: this.$strings.LabelSequence,
+          value: 'sequence'
+        }
+      ]
+    },
     selectItems() {
-      if (this.isPodcast) return this.podcastItems
-      return this.bookItems
+      let items = null
+      if (this.isPodcast) {
+        items = this.podcastItems
+      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
+        items = this.seriesItems
+      } else {
+        items = this.bookItems
+      }
+
+      if (!items.some((i) => i.value === this.selected)) {
+        this.selected = items[0].value
+        this.selectedDesc = !this.defaultsToAsc(items[0].value)
+      }
+
+      return items
     },
     selectedText() {
       var _selected = this.selected
@@ -139,12 +169,13 @@ export default {
         this.selectedDesc = !this.selectedDesc
       } else {
         this.selected = val
-        if (val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF') {
-          this.selectedDesc = false
-        }
+        if (this.defaultsToAsc(val)) this.selectedDesc = false
       }
       this.showMenu = false
       this.$nextTick(() => this.$emit('change', val))
+    },
+    defaultsToAsc(val) {
+      return val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF' || val == 'sequence'
     }
   }
 }

client/components/controls/SortSelect.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: {

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)

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}`
     }

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

client/components/covers/GroupCover.vue

@@ -17,7 +17,6 @@ export default {
     },
     width: Number,
     height: Number,
-    groupTo: String,
     bookCoverAspectRatio: Number
   },
   data() {

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>

client/components/covers/PreviewCover.vue

@@ -4,7 +4,7 @@
       <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
-      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
 
       <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
         <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <p v-if="!imageFailed" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
+    <p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
   </div>
 </template>
 
@@ -31,7 +31,11 @@ export default {
       default: 120
     },
     showOpenNewTab: Boolean,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    showResolution: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -59,6 +63,9 @@ export default {
     },
     resolution() {
       return `${this.naturalWidth}x${this.naturalHeight}px`
+    },
+    placeholderUrl() {
+      return `${this.$config.routerBasePath}/book_placeholder.jpg`
     }
   },
   methods: {
@@ -68,7 +75,7 @@ export default {
       }
     },
     imageLoaded() {
-      if (this.$refs.cover) {
+      if (this.$refs.cover && this.src !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
         this.naturalHeight = naturalHeight
         this.naturalWidth = naturalWidth

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>

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>

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>

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>

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>

client/components/modals/AccountModal.vue

@@ -10,28 +10,28 @@
         <div class="w-full p-8">
           <div class="flex py-2">
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model="newUser.username" label="Username" />
+              <ui-text-input-with-label v-model="newUser.username" :label="$strings.LabelUsername" />
             </div>
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? 'Password' : 'Change Password'" type="password" />
+              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
             </div>
           </div>
           <div v-show="!isEditingRoot" class="flex py-2">
             <div class="px-2 w-52">
-              <ui-dropdown v-model="newUser.type" label="Account Type" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
+              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
             </div>
             <div class="flex-grow" />
             <div class="flex items-center pt-4 px-2">
-              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
+              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
               <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
             </div>
           </div>
 
           <div v-if="!isEditingRoot && newUser.permissions" class="w-full border-t border-b border-black-200 py-2 px-3 mt-4">
-            <p class="text-lg mb-2 font-semibold">Permissions</p>
+            <p class="text-lg mb-2 font-semibold">{{ $strings.HeaderPermissions }}</p>
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Download</p>
+                <p>{{ $strings.LabelPermissionsDownload }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.download" />
@@ -40,7 +40,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Update</p>
+                <p>{{ $strings.LabelPermissionsUpdate }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.update" />
@@ -49,7 +49,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Delete</p>
+                <p>{{ $strings.LabelPermissionsDelete }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.delete" />
@@ -58,7 +58,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Upload</p>
+                <p>{{ $strings.LabelPermissionsUpload }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.upload" />
@@ -67,7 +67,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Access Explicit Content</p>
+                <p>{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.accessExplicitContent" />
@@ -76,7 +76,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Access All Libraries</p>
+                <p>{{ $strings.LabelPermissionsAccessAllLibraries }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
@@ -84,26 +84,26 @@
             </div>
 
             <div v-if="!newUser.permissions.accessAllLibraries" class="my-4">
-              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" label="Libraries Accessible to User" />
+              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" :label="$strings.LabelLibrariesAccessibleToUser" />
             </div>
 
             <div class="flex items-cen~ter my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Access All Tags</p>
+                <p>{{ $strings.LabelPermissionsAccessAllTags }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.accessAllTags" @input="accessAllTagsToggled" />
               </div>
             </div>
             <div v-if="!newUser.permissions.accessAllTags" class="my-4">
-              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" label="Tags Accessible to User" />
+              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" :label="$strings.LabelTagsAccessibleToUser" />
             </div>
           </div>
 
           <div class="flex pt-4 px-2">
-            <ui-btn v-if="isEditingRoot" to="/account">Change Root Password</ui-btn>
+            <ui-btn v-if="isEditingRoot" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
             <div class="flex-grow" />
-            <ui-btn color="success" type="submit">Submit</ui-btn>
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
         </div>
       </div>
@@ -125,20 +125,6 @@ export default {
       processing: false,
       newUser: {},
       isNew: true,
-      accountTypes: [
-        {
-          text: 'Guest',
-          value: 'guest'
-        },
-        {
-          text: 'User',
-          value: 'user'
-        },
-        {
-          text: 'Admin',
-          value: 'admin'
-        }
-      ],
       tags: [],
       loadingTags: false
     }
@@ -161,11 +147,27 @@ export default {
         this.$emit('input', val)
       }
     },
+    accountTypes() {
+      return [
+        {
+          text: this.$strings.LabelAccountTypeGuest,
+          value: 'guest'
+        },
+        {
+          text: this.$strings.LabelAccountTypeUser,
+          value: 'user'
+        },
+        {
+          text: this.$strings.LabelAccountTypeAdmin,
+          value: 'admin'
+        }
+      ]
+    },
     user() {
       return this.$store.state.user.user
     },
     title() {
-      return this.isNew ? 'Add New Account' : `Update ${(this.account || {}).username}`
+      return this.isNew ? this.$strings.HeaderNewAccount : this.$strings.HeaderUpdateAccount
     },
     isEditingRoot() {
       return this.account && this.account.type === 'root'
@@ -249,7 +251,7 @@ export default {
         .then((data) => {
           this.processing = false
           if (data.error) {
-            this.$toast.error(`Failed to update account: ${data.error}`)
+            this.$toast.error(`${this.$strings.ToastAccountUpdateFailed}: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
 
@@ -258,7 +260,7 @@ export default {
               this.$store.commit('user/setUserToken', data.user.token)
             }
 
-            this.$toast.success('Account updated')
+            this.$toast.success(this.$strings.ToastAccountUpdateSuccess)
             this.show = false
           }
         })

client/components/modals/BackupScheduleModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <modals-modal v-model="show" name="backup-scheduler" :width="700" :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">{{ $strings.HeaderSetBackupSchedule }}</p>
+      </div>
+    </template>
+    <div v-if="show && newCronExpression" class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <widgets-cron-expression-builder ref="expressionBuilder" v-model="newCronExpression" @input="expressionUpdated" />
+
+      <div class="flex items-center justify-end">
+        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdateNecessary }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    cronExpression: {
+      type: String,
+      default: '* * * * *'
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newCronExpression: null,
+      isUpdated: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    expressionUpdated() {
+      this.isUpdated = this.newCronExpression !== this.cronExpression
+    },
+    init() {
+      this.newCronExpression = this.cronExpression
+      this.isUpdated = false
+    },
+    submit() {
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.expressionBuilder && this.$refs.expressionBuilder.checkBlurExpressionInput) {
+        if (this.$refs.expressionBuilder.checkBlurExpressionInput()) {
+          return
+        }
+      }
+
+      this.processing = true
+
+      var updatePayload = {
+        backupSchedule: this.newCronExpression
+      }
+      this.$store
+        .dispatch('updateServerSettings', updatePayload)
+        .then((success) => {
+          console.log('Updated Server Settings', success)
+          this.processing = false
+          this.show = false
+          this.$emit('update:cronExpression', this.newCronExpression)
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+          this.processing = false
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/BatchQuickMatchModel.vue

@@ -0,0 +1,135 @@
+<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 py-4">
+        <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">{{ $strings.LabelProvider }}</p>
+            <ui-dropdown v-model="options.provider" :items="providers" small />
+          </div>
+          <p class="text-base px-8 py-2">{{ $strings.MessageBatchQuickMatchDescription }}</p>
+          <div class="flex px-8 items-end py-2">
+            <ui-toggle-switch v-model="options.overrideCover" />
+            <ui-tooltip :text="$strings.LabelUpdateCoverHelp">
+              <p class="pl-4">
+                {{ $strings.LabelUpdateCover }}
+                <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="$strings.LabelUpdateDetailsHelp">
+              <p class="pl-4">
+                {{ $strings.LabelUpdateDetails }}
+                <span class="material-icons icon-text text-sm">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div class="mt-4 pt-4 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">{{ $strings.ButtonCancel }}</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn color="success" @click="doBatchQuickMatch">{{ $strings.ButtonSubmit }}</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
+      }
+    }
+  },
+  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.$getString('MessageItemsSelected', [this.selectedBookIds.length])
+    },
+    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>
+

client/components/modals/BookmarksModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="bookmarks" :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">Your Bookmarks</p>
+        <p class="font-book text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
@@ -11,7 +11,7 @@
           <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
         </template>
         <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">No Bookmarks</p>
+          <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
         </div>
         <div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
         <form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
@@ -85,10 +85,10 @@ export default {
       this.$axios
         .$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
         .then(() => {
-          this.$toast.success('Bookmark removed')
+          this.$toast.success(this.$strings.ToastBookmarkRemoveSuccess)
         })
         .catch((error) => {
-          this.$toast.error(`Failed to remove bookmark`)
+          this.$toast.error(this.$strings.ToastBookmarkRemoveFailed)
           console.error(error)
         })
       this.show = false
@@ -101,10 +101,10 @@ export default {
       this.$axios
         .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
         .then(() => {
-          this.$toast.success('Bookmark updated')
+          this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
         })
         .catch((error) => {
-          this.$toast.error(`Failed to update bookmark`)
+          this.$toast.error(this.$strings.ToastBookmarkUpdateFailed)
           console.error(error)
         })
       this.show = false
@@ -120,10 +120,10 @@ export default {
       this.$axios
         .$post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
         .then(() => {
-          this.$toast.success('Bookmark added')
+          this.$toast.success(this.$strings.ToastBookmarkCreateSuccess)
         })
         .catch((error) => {
-          this.$toast.error(`Failed to create bookmark`)
+          this.$toast.error(this.$strings.ToastBookmarkCreateFailed)
           console.error(error)
         })
 

client/components/modals/EditCollectionModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-collection" :width="700" :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">Collection</p>
+        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderCollection }}</p>
       </div>
     </template>
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
@@ -14,15 +14,15 @@
               <!-- <ui-btn type="button" @click="showImageUploader = true">Upload</ui-btn> -->
             </div>
             <div class="flex-grow px-4">
-              <ui-text-input-with-label v-model="newCollectionName" label="Name" class="mb-2" />
+              <ui-text-input-with-label v-model="newCollectionName" :label="$strings.LabelName" class="mb-2" />
 
-              <ui-textarea-with-label v-model="newCollectionDescription" label="Description" />
+              <ui-textarea-with-label v-model="newCollectionDescription" :label="$strings.LabelDescription" />
             </div>
           </div>
           <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
-            <ui-btn small color="error" type="button" @click.stop="removeClick">Remove</ui-btn>
+            <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
             <div class="flex-grow" />
-            <ui-btn color="success" type="submit">Save</ui-btn>
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSave }}</ui-btn>
           </div>
         </form>
       </template>
@@ -75,7 +75,7 @@ export default {
       }
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     collection() {
       return this.$store.state.globals.selectedCollection || {}
@@ -85,6 +85,9 @@ export default {
     },
     books() {
       return this.collection.books || []
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {
@@ -93,20 +96,19 @@ export default {
       this.newCollectionDescription = this.collection.description || ''
     },
     removeClick() {
-      if (confirm(`Are you sure you want to remove collection "${this.collectionName}"?`)) {
+      if (confirm(this.$getString('MessageConfirmRemoveCollection', [this.collectionName]))) {
         this.processing = true
-        var collectionName = this.collectionName
         this.$axios
           .$delete(`/api/collections/${this.collection.id}`)
           .then(() => {
             this.processing = false
             this.show = false
-            this.$toast.success(`Collection "${collectionName}" Removed`)
+            this.$toast.success(this.$strings.ToastCollectionRemoveSuccess)
           })
           .catch((error) => {
             console.error('Failed to remove collection', error)
             this.processing = false
-            this.$toast.error(`Failed to remove collection`)
+            this.$toast.error(this.$strings.ToastCollectionRemoveFailed)
           })
       }
     },
@@ -130,12 +132,12 @@ export default {
           console.log('Collection Updated', collection)
           this.processing = false
           this.show = false
-          this.$toast.success(`Collection "${collection.name}" Updated`)
+          this.$toast.success(this.$strings.ToastCollectionUpdateSuccess)
         })
         .catch((error) => {
           console.error('Failed to update collection', error)
           this.processing = false
-          this.$toast.error(`Failed to update collection`)
+          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
         })
     }
   },

client/components/modals/EditSeriesInputInnerModal.vue

@@ -8,14 +8,14 @@
         <div class="bg-bg rounded-lg px-2 py-6 sm:p-6 md:p-8" @click.stop>
           <div class="flex">
             <div class="flex-grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
-              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" label="Series Name" />
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" />
             </div>
             <div class="w-24 sm:w-28 md:w-40 p-1">
-              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" label="Sequence" />
+              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
             </div>
           </div>
           <div class="flex justify-end mt-2 p-1">
-            <ui-btn type="submit">Save</ui-btn>
+            <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
           </div>
         </div>
       </form>

client/components/modals/ListeningSessionModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <modals-modal v-model="show" name="listening-session-modal" :width="700" :height="'unset'">
+  <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">Session {{ _session.id }}</p>
+        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
@@ -15,87 +15,91 @@
 
       <div class="flex flex-wrap mb-4">
         <div class="w-full md:w-2/3">
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2">Details</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2">{{ $strings.HeaderDetails }}</p>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Started At</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelStartedAt }}</div>
             <div class="px-1">
               {{ $formatDate(_session.startedAt, 'MMMM do, yyyy HH:mm') }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Updated At</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelUpdatedAt }}</div>
             <div class="px-1">
               {{ $formatDate(_session.updatedAt, 'MMMM do, yyyy HH:mm') }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Listened for</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelTimeListened }}</div>
             <div class="px-1">
               {{ $elapsedPrettyExtended(_session.timeListening) }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Start Time</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelStartTime }}</div>
             <div class="px-1">
               {{ $secondsToTimestamp(_session.startTime) }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Last Time</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLastTime }}</div>
             <div class="px-1">
               {{ $secondsToTimestamp(_session.currentTime) }}
             </div>
           </div>
 
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Item</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelItem }}</p>
           <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Library Id</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibrary }} Id</div>
             <div class="px-1">
               {{ _session.libraryId }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Library Item Id</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibraryItem }} Id</div>
             <div class="px-1">
               {{ _session.libraryItemId }}
             </div>
           </div>
           <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Episode Id</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelEpisode }} Id</div>
             <div class="px-1">
               {{ _session.episodeId }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Media Type</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelMediaType }}</div>
             <div class="px-1">
               {{ _session.mediaType }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
-            <div class="w-40 px-1 text-gray-200">Duration</div>
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelDuration }}</div>
             <div class="px-1">
               {{ $elapsedPretty(_session.duration) }}
             </div>
           </div>
         </div>
         <div class="w-full md:w-1/3">
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">User</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
           <p class="mb-1">{{ _session.userId }}</p>
 
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Media Player</p>
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>
           <p class="mb-1">{{ _session.mediaPlayer }}</p>
 
-          <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
+          <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelDevice }}</p>
           <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
           <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
           <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
           <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</p>
-          <p v-if="deviceInfo.sdkVersion" class="mb-1">SDK Version: {{ deviceInfo.sdkVersion }}</p>
-          <p v-if="deviceInfo.deviceType" class="mb-1">Type: {{ deviceInfo.deviceType }}</p>
+          <p v-if="deviceInfo.sdkVersion" class="mb-1">SDK {{ $strings.LabelVersion }}: {{ deviceInfo.sdkVersion }}</p>
+          <p v-if="deviceInfo.deviceType" class="mb-1">{{ $strings.LabelType }}: {{ deviceInfo.deviceType }}</p>
         </div>
       </div>
+
+      <div class="flex items-center">
+        <ui-btn small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+      </div>
     </div>
   </modals-modal>
 </template>
@@ -110,7 +114,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      processing: false
+    }
   },
   computed: {
     show: {
@@ -147,7 +153,37 @@ export default {
       return 'Unknown'
     }
   },
-  methods: {},
+  methods: {
+    deleteSessionClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmDeleteSession,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteSession()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteSession() {
+      this.processing = true
+      this.$axios
+        .$delete(`/api/sessions/${this._session.id}`)
+        .then(() => {
+          this.processing = false
+          this.$toast.success(this.$strings.ToastSessionDeleteSuccess)
+          this.$emit('removedSession')
+          this.show = false
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to delete session', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || this.$strings.ToastSessionDeleteFailed)
+        })
+    }
+  },
   mounted() {}
 }
 </script>

client/components/modals/SleepTimerModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="sleep-timer" :width="350" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-3xl text-white truncate pointer-events-none">Sleep Timer</p>
+        <p class="font-book text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderSleepTimer }}</p>
       </div>
     </template>
 
@@ -32,7 +32,7 @@
             <span class="pl-1 text-base font-mono">30m</span>
           </ui-btn>
         </div>
-        <ui-btn class="w-full" @click="$emit('cancel')">Cancel</ui-btn>
+        <ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
       </div>
     </div>
   </modals-modal>

client/components/modals/authors/EditModal.vue

@@ -19,23 +19,23 @@
           <div class="flex-grow">
             <div class="flex">
               <div class="w-3/4 p-2">
-                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" label="Name" />
+                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" :label="$strings.LabelName" />
               </div>
               <div class="flex-grow p-2">
                 <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
               </div>
             </div>
             <div class="p-2">
-              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" label="Photo Path/URL" />
+              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" :label="$strings.LabelPhotoPathURL" />
             </div>
             <div class="p-2">
-              <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" label="Description" :rows="8" />
+              <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" :label="$strings.LabelDescription" :rows="8" />
             </div>
 
             <div class="flex pt-2 px-2">
-              <ui-btn type="button" @click="searchAuthor">Quick Match</ui-btn>
+              <ui-btn type="button" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
               <div class="flex-grow" />
-              <ui-btn type="submit">Submit</ui-btn>
+              <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
             </div>
           </div>
         </div>
@@ -84,7 +84,7 @@ export default {
       return this.author.id
     },
     title() {
-      return 'Edit Author'
+      return this.$strings.HeaderUpdateAuthor
     }
   },
   methods: {
@@ -103,23 +103,23 @@ export default {
         }
       })
       if (!Object.keys(updatePayload).length) {
-        this.$toast.info('No updates are necessary')
+        this.$toast.info(this.$strings.MessageNoUpdateNecessary)
         return
       }
       this.processing = true
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
         console.error('Failed', error)
-        this.$toast.error('Failed to update author')
+        this.$toast.error(this.$strings.ToastAuthorUpdateFailed)
         return null
       })
       if (result) {
         if (result.updated) {
-          this.$toast.success('Author updated')
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
           this.show = false
         } else if (result.merged) {
-          this.$toast.success('Author merged')
+          this.$toast.success(this.$strings.ToastAuthorUpdateMerged)
           this.show = false
-        } else this.$toast.info('No updates were needed')
+        } else this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
       }
       this.processing = false
     },
@@ -131,11 +131,11 @@ export default {
       this.processing = true
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
         console.error('Failed', error)
-        this.$toast.error('Failed to remove image')
+        this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
         return null
       })
       if (result && result.updated) {
-        this.$toast.success('Author image removed')
+        this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
       }
       this.processing = false
     },
@@ -157,8 +157,8 @@ export default {
       if (!response) {
         this.$toast.error('Author 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(this.$strings.ToastAuthorUpdateSuccess)
+        else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
       } else {
         this.$toast.info('No updates were made for Author')
       }

client/components/modals/collections/AddCreateModal.vue

@@ -1,7 +1,7 @@
 <template>
   <modals-modal v-model="show" name="collections" :processing="processing" :width="500" :height="'unset'">
     <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
         <p class="font-book text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
@@ -9,8 +9,8 @@
     <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 v-if="!showBatchUserCollectionModal" class="text-2xl">Add to Collection</h1>
-          <h1 v-else class="text-2xl">Add {{ selectedBookIds.length }} Books to Collection</h1>
+          <h1 v-if="!showBatchCollectionModal" class="text-2xl">{{ $strings.LabelAddToCollection }}</h1>
+          <h1 v-else class="text-2xl">{{ $getString('LabelAddToCollectionBatch', [selectedBookIds.length]) }}</h1>
         </div>
         <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
           <transition-group name="list-complete" tag="div">
@@ -20,15 +20,15 @@
           </transition-group>
         </div>
         <div v-if="!collections.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">No Collections</p>
+          <p class="text-xl">{{ $strings.MessageNoCollections }}</p>
         </div>
         <div class="w-full h-px bg-white bg-opacity-10" />
         <form @submit.prevent="submitCreateCollection">
           <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
             <div class="flex-grow px-2">
-              <ui-text-input v-model="newCollectionName" placeholder="New Collection" class="w-full" />
+              <ui-text-input v-model="newCollectionName" :placeholder="$strings.PlaceholderNewCollection" class="w-full" />
             </div>
-            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">Create</ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
           </div>
         </form>
       </div>
@@ -57,20 +57,23 @@ export default {
   computed: {
     show: {
       get() {
-        return this.$store.state.globals.showUserCollectionsModal
+        return this.$store.state.globals.showCollectionsModal
       },
       set(val) {
-        this.$store.commit('globals/setShowUserCollectionsModal', val)
+        this.$store.commit('globals/setShowCollectionsModal', val)
       }
     },
     title() {
-      if (this.showBatchUserCollectionModal) {
-        return `${this.selectedBookIds.length} Items Selected`
+      if (this.showBatchCollectionModal) {
+        return this.$getString('MessageItemsSelected', [this.selectedBookIds.length])
       }
       return this.selectedLibraryItem ? this.selectedLibraryItem.media.metadata.title : ''
     },
+    collections() {
+      return this.$store.state.libraries.collections || []
+    },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     selectedLibraryItem() {
       return this.$store.state.selectedLibraryItem
@@ -78,14 +81,11 @@ export default {
     selectedLibraryItemId() {
       return this.selectedLibraryItem ? this.selectedLibraryItem.id : null
     },
-    collections() {
-      return this.$store.state.user.collections || []
-    },
     sortedCollections() {
       return this.collections
         .map((c) => {
           var includesBook = false
-          if (this.showBatchUserCollectionModal) {
+          if (this.showBatchCollectionModal) {
             // Only show collection added if all books are in the collection
             var collectionBookIds = c.books.map((b) => b.id)
             includesBook = !this.selectedBookIds.find((id) => !collectionBookIds.includes(id))
@@ -100,8 +100,8 @@ export default {
         })
         .sort((a, b) => (a.isBookIncluded ? -1 : 1))
     },
-    showBatchUserCollectionModal() {
-      return this.$store.state.globals.showBatchUserCollectionModal
+    showBatchCollectionModal() {
+      return this.$store.state.globals.showBatchCollectionModal
     },
     selectedBookIds() {
       return this.$store.state.selectedLibraryItems || []
@@ -112,24 +112,40 @@ export default {
   },
   methods: {
     loadCollections() {
-      this.$store.dispatch('user/loadUserCollections')
+      if (!this.collections.length) {
+        this.processing = true
+        this.$axios
+          .$get(`/api/libraries/${this.currentLibraryId}/collections`)
+          .then((data) => {
+            if (data.results) {
+              this.$store.commit('libraries/setCollections', data.results || [])
+            }
+          })
+          .catch((error) => {
+            console.error('Failed to get collections', error)
+            this.$toast.error('Failed to load collections')
+          })
+          .finally(() => {
+            this.processing = false
+          })
+      }
     },
     removeFromCollection(collection) {
       if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
       this.processing = true
 
-      if (this.showBatchUserCollectionModal) {
+      if (this.showBatchCollectionModal) {
         // BATCH Remove books
         this.$axios
           .$post(`/api/collections/${collection.id}/batch/remove`, { books: this.selectedBookIds })
           .then((updatedCollection) => {
             console.log(`Books removed from collection`, updatedCollection)
-            this.$toast.success('Books removed from collection')
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
             this.processing = false
           })
           .catch((error) => {
             console.error('Failed to remove books from collection', error)
-            this.$toast.error('Failed to remove books from collection')
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
             this.processing = false
           })
       } else {
@@ -138,12 +154,12 @@ export default {
           .$delete(`/api/collections/${collection.id}/book/${this.selectedLibraryItemId}`)
           .then((updatedCollection) => {
             console.log(`Book removed from collection`, updatedCollection)
-            this.$toast.success('Book removed from collection')
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
             this.processing = false
           })
           .catch((error) => {
             console.error('Failed to remove book from collection', error)
-            this.$toast.error('Failed to remove book from collection')
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
             this.processing = false
           })
       }
@@ -152,7 +168,7 @@ export default {
       if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
       this.processing = true
 
-      if (this.showBatchUserCollectionModal) {
+      if (this.showBatchCollectionModal) {
         // BATCH Remove books
         this.$axios
           .$post(`/api/collections/${collection.id}/batch/add`, { books: this.selectedBookIds })
@@ -189,7 +205,7 @@ export default {
       }
       this.processing = true
 
-      var books = this.showBatchUserCollectionModal ? this.selectedBookIds : [this.selectedLibraryItemId]
+      var books = this.showBatchCollectionModal ? this.selectedBookIds : [this.selectedLibraryItemId]
       var newCollection = {
         books: books,
         libraryId: this.currentLibraryId,

client/components/modals/item/EditModal.vue

@@ -31,44 +31,7 @@ export default {
       processing: false,
       libraryItem: null,
       availableHeight: 0,
-      marginTop: 0,
-      tabs: [
-        {
-          id: 'details',
-          title: 'Details',
-          component: 'modals-item-tabs-details'
-        },
-        {
-          id: 'cover',
-          title: 'Cover',
-          component: 'modals-item-tabs-cover'
-        },
-        {
-          id: 'chapters',
-          title: 'Chapters',
-          component: 'modals-item-tabs-chapters'
-        },
-        {
-          id: 'episodes',
-          title: 'Episodes',
-          component: 'modals-item-tabs-episodes'
-        },
-        {
-          id: 'files',
-          title: 'Files',
-          component: 'modals-item-tabs-files'
-        },
-        {
-          id: 'match',
-          title: 'Match',
-          component: 'modals-item-tabs-match'
-        },
-        {
-          id: 'manage',
-          title: 'Manage',
-          component: 'modals-item-tabs-manage'
-        }
-      ]
+      marginTop: 0
     }
   },
   watch: {
@@ -111,6 +74,56 @@ export default {
         this.$store.commit('setEditModalTab', val)
       }
     },
+    tabs() {
+      return [
+        {
+          id: 'details',
+          title: this.$strings.HeaderDetails,
+          component: 'modals-item-tabs-details'
+        },
+        {
+          id: 'cover',
+          title: this.$strings.HeaderCover,
+          component: 'modals-item-tabs-cover'
+        },
+        {
+          id: 'chapters',
+          title: this.$strings.HeaderChapters,
+          component: 'modals-item-tabs-chapters',
+          mediaType: 'book'
+        },
+        {
+          id: 'episodes',
+          title: this.$strings.HeaderEpisodes,
+          component: 'modals-item-tabs-episodes',
+          mediaType: 'podcast'
+        },
+        {
+          id: 'files',
+          title: this.$strings.HeaderFiles,
+          component: 'modals-item-tabs-files'
+        },
+        {
+          id: 'match',
+          title: this.$strings.HeaderMatch,
+          component: 'modals-item-tabs-match'
+        },
+        {
+          id: 'tools',
+          title: this.$strings.HeaderTools,
+          component: 'modals-item-tabs-tools',
+          mediaType: 'book',
+          admin: true
+        },
+        {
+          id: 'schedule',
+          title: this.$strings.HeaderSchedule,
+          component: 'modals-item-tabs-schedule',
+          mediaType: 'podcast',
+          admin: true
+        }
+      ]
+    },
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
     },
@@ -120,16 +133,20 @@ export default {
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
         if (tab.experimental && !this.showExperimentalFeatures) return false
-        if (tab.id === 'manage' && (this.isMissing || this.mediaType !== 'book')) return false
-        if (this.mediaType == 'podcast' && tab.id == 'chapters') return false
-        if (this.mediaType == 'book' && tab.id == 'episodes') return false
+        if (tab.mediaType && this.mediaType !== tab.mediaType) return false
+        if (tab.admin && !this.userIsAdminOrUp) 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' && this.isMissing) return false
+
+        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
       })
@@ -216,8 +233,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) {

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

@@ -3,8 +3,8 @@
     <div class="w-full mb-4">
       <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" keep-open />
       <div v-if="!chapters.length" class="py-4 text-center">
-        <p class="mb-8 text-xl">No Chapters</p>
-        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">Add Chapters</ui-btn>
+        <p class="mb-8 text-xl">{{ $strings.MessageNoChapters }}</p>
+        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">{{ $strings.ButtonAddChapters }}</ui-btn>
       </div>
     </div>
   </div>

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

@@ -14,11 +14,14 @@
       <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
         <div class="flex items-center">
           <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected"><span class="hidden md:inline-block">Upload Cover</span><span class="material-icons inline-block md:!hidden">upload</span></ui-file-input>
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"
+              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
+              ><span class="material-icons inline-block md:!hidden">upload</span></ui-file-input
+            >
           </div>
           <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
-            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">Update</ui-btn>
+            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
           </form>
         </div>
 
@@ -26,7 +29,7 @@
           <div class="flex items-center justify-center py-2">
             <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
             <div class="flex-grow" />
-            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? 'Hide' : 'Show' }}</ui-btn>
+            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
           </div>
 
           <div v-if="showLocalCovers" class="flex items-center justify-center">
@@ -44,19 +47,19 @@
     <form @submit.prevent="submitSearchForm">
       <div class="flex items-center justify-start -mx-1 h-20">
         <div class="w-40 px-1">
-          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
         <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
         </div>
         <div v-show="provider != 'itunes'" class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
+          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
+        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
     <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
-      <p v-if="!coversFound.length">No Covers Found</p>
+      <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
       <template v-for="cover in coversFound">
         <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
@@ -65,14 +68,14 @@
     </div>
 
     <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
-      <p class="text-lg">Preview Cover</p>
+      <p class="text-lg">{{ $strings.HeaderPreviewCover }}</p>
       <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
       <div class="flex justify-center py-4">
         <covers-preview-cover :src="previewUpload" :width="240" :book-cover-aspect-ratio="bookCoverAspectRatio" />
       </div>
       <div class="absolute bottom-0 right-0 flex py-4 px-5">
-        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
-        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
+        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">{{ $strings.ButtonReset }}</ui-btn>
+        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
       </div>
     </div>
   </div>
@@ -125,15 +128,12 @@ export default {
       return this.$store.state.scanners.providers
     },
     searchTitleLabel() {
-      if (this.provider == 'audible') return 'Search Title or ASIN'
-      else if (this.provider == 'itunes') return 'Search Term'
-      return 'Search Title'
-    },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
+      else if (this.provider == 'itunes') return this.$strings.LabelSearchTerm
+      return this.$strings.LabelSearchTitle
     },
     bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     libraryItemId() {
       return this.libraryItem ? this.libraryItem.id : null
@@ -167,7 +167,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
         })
     }

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

@@ -7,22 +7,24 @@
 
     <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
       <div class="flex items-center px-4">
-        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">Remove</ui-btn>
+        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">{{ $strings.ButtonRemove }}</ui-btn>
         <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
 
         <div class="flex-grow" />
 
-        <ui-tooltip v-if="mediaType == 'book'" :disabled="!!quickMatching" :text="`(Root User Only) Populate empty book details & cover with first book result from '${libraryProvider}'. Does not overwrite details.`" direction="bottom" class="mr-2 md:mr-4">
-          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">Quick Match</ui-btn>
+        <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
         </ui-tooltip>
 
-        <ui-tooltip :disabled="!!libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="mr-2 md:mr-4">
-          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
+        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
         </ui-tooltip>
 
-        <ui-btn @click="save" class="mx-2 hidden md:block">Save</ui-btn>
-
-        <ui-btn @click="saveAndClose">Save<span class="hidden md:inline-block">&nbsp;& Close</span></ui-btn>
+        <!-- desktop -->
+        <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+        <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+        <!-- mobile -->
+        <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
       </div>
     </div>
   </div>
@@ -177,7 +179,7 @@ export default {
           this.$toast.success('Item details updated')
           return true
         } else {
-          this.$toast.info('No updates were necessary')
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
         }
       }
       return false

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

@@ -2,22 +2,29 @@
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
     <div class="w-full mb-4">
       <div v-if="userIsAdminOrUp" class="flex items-end justify-end mb-4">
-        <!-- <p v-if="autoDownloadEpisodes">Last new episode check {{ $formatDate(lastEpisodeCheck) }}</p> -->
-        <ui-text-input-with-label ref="lastCheckInput" v-model="lastEpisodeCheckInput" :disabled="checkingNewEpisodes" type="datetime-local" label="Look for new episodes after this date" class="max-w-xs mr-2" />
-        <ui-btn :loading="checkingNewEpisodes" @click="checkForNewEpisodes">Check & Download New Episodes</ui-btn>
+        <ui-text-input-with-label ref="lastCheckInput" v-model="lastEpisodeCheckInput" :disabled="checkingNewEpisodes" type="datetime-local" :label="$strings.LabelLookForNewEpisodesAfterDate" class="max-w-xs mr-2" />
+        <ui-text-input-with-label ref="maxEpisodesInput" v-model="maxEpisodesToDownload" :disabled="checkingNewEpisodes" type="number" :label="$strings.LabelLimit" class="w-16 mr-2" input-class="h-10">
+          <div class="flex -mb-0.5">
+            <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': checkingNewEpisodes }">{{ $strings.LabelLimit }}</p>
+            <ui-tooltip direction="top" text="Max # of episodes to download. Use 0 for unlimited.">
+              <span class="material-icons text-base">info_outlined</span>
+            </ui-tooltip>
+          </div>
+        </ui-text-input-with-label>
+        <ui-btn :loading="checkingNewEpisodes" @click="checkForNewEpisodes">{{ $strings.ButtonCheckAndDownloadNewEpisodes }}</ui-btn>
       </div>
 
       <div v-if="episodes.length" class="w-full p-4 bg-primary">
-        <p>Podcast Episodes</p>
+        <p>{{ $strings.HeaderEpisodes }}</p>
       </div>
-      <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">No Episodes</div>
+      <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">{{ $strings.MessageNoEpisodes }}</div>
       <table v-else class="text-sm tracksTable">
         <tr class="font-book">
           <th class="text-left">Sort #</th>
-          <th class="text-left whitespace-nowrap">Episode #</th>
-          <th class="text-left">Title</th>
-          <th class="text-center w-28">Duration</th>
-          <th class="text-center w-28">Size</th>
+          <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
+          <th class="text-left">{{ $strings.EpisodeTitle }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeDuration }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeSize }}</th>
         </tr>
         <tr v-for="episode in episodes" :key="episode.id">
           <td class="text-left">
@@ -52,7 +59,8 @@ export default {
   data() {
     return {
       checkingNewEpisodes: false,
-      lastEpisodeCheckInput: null
+      lastEpisodeCheckInput: null,
+      maxEpisodesToDownload: 3
     }
   },
   watch: {
@@ -89,6 +97,16 @@ export default {
       if (this.$refs.lastCheckInput) {
         this.$refs.lastCheckInput.blur()
       }
+      if (this.$refs.maxEpisodesInput) {
+        this.$refs.maxEpisodesInput.blur()
+      }
+
+      if (this.maxEpisodesToDownload < 0) {
+        this.maxEpisodesToDownload = 3
+        this.$toast.error('Invalid max episodes to download')
+        return
+      }
+
       this.checkingNewEpisodes = true
       const lastEpisodeCheck = new Date(this.lastEpisodeCheckInput).valueOf()
 
@@ -102,7 +120,7 @@ export default {
       }
 
       this.$axios
-        .$get(`/api/podcasts/${this.libraryItemId}/checknew`)
+        .$get(`/api/podcasts/${this.libraryItemId}/checknew?limit=${this.maxEpisodesToDownload}`)
         .then((response) => {
           if (response.episodes && response.episodes.length) {
             console.log('New episodes', response.episodes.length)

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>

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

@@ -3,165 +3,170 @@
     <form @submit.prevent="submitSearch">
       <div class="flex flex-wrap md:flex-nowrap items-center justify-start -mx-1">
         <div class="w-36 px-1">
-          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
         <div class="flex-grow md:w-72 px-1">
-          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
         </div>
         <div v-show="provider != 'itunes'" class="w-60 md:w-72 px-1">
-          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
+          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
+        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
     <div v-show="processing" class="flex h-full items-center justify-center">
-      <p>Loading...</p>
+      <p>{{ $strings.MessageLoading }}</p>
     </div>
     <div v-show="!processing && !searchResults.length && hasSearched" class="flex h-full items-center justify-center">
-      <p>No Results</p>
+      <p>{{ $strings.MessageNoResults }}</p>
     </div>
     <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
         <cards-book-match-card :key="index" :book="res" :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 p-8 max-h-full overflow-y-auto overflow-x-hidden">
-      <div class="flex mb-2">
-        <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 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="clearSelectedMatch">
           <span class="material-icons text-3xl">arrow_back</span>
         </div>
-        <p class="text-xl pl-3">Update Book Details</p>
+        <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</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">
-          <ui-checkbox v-model="selectedMatchUsage.cover" />
-          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" label="Cover" class="flex-grow ml-4" />
-        </div>
-        <div v-if="selectedMatch.title" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.title" />
-          <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 v-if="selectedMatchOrig.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
+          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
+            <a :href="selectedMatch.cover" target="_blank" class="w-full bg-primary">
+              <img :src="selectedMatch.cover" class="h-full w-full object-contain" />
+            </a>
           </div>
         </div>
-        <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.subtitle" />
+        <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.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>
+            <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
+            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.title || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.author" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.author" />
+        <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.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>
+            <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
+            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.subtitle || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.narrator" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.narrator" />
+        <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.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>
+            <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.authorName || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.description" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.description" />
-          <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
-        </div>
-        <div v-if="selectedMatch.publisher" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.publisher" />
+        <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.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>
+            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
+            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.publishedYear" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.publishedYear" />
+        <div v-if="selectedMatchOrig.description" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.description" 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" />
-            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publishedYear || '' }}</p>
+            <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</p>
+          </div>
+        </div>
+        <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="$strings.LabelPublisher" />
+            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publisher || '' }}</p>
+          </div>
+        </div>
+        <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="$strings.LabelPublishYear" />
+            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publishedYear || '' }}</p>
           </div>
         </div>
 
-        <div v-if="selectedMatch.series" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.series" />
+        <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" />
-            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
+            <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.seriesName || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.volumeNumber" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" />
-          <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">
-          <ui-checkbox v-model="selectedMatchUsage.genres" />
+        <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="$strings.LabelGenres" />
+            <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.tags" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.tags" />
+        <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>
+            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
+            <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.language" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.language" />
+        <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>
+            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" :label="$strings.LabelLanguage" />
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.language || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+        <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>
+            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.isbn || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.asin" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.asin" />
+        <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" />
-            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.asin || '' }}</p>
+            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.asin || '' }}</p>
           </div>
         </div>
 
-        <div v-if="selectedMatch.itunesId" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.itunesId" />
+        <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>
+            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesId || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.feedUrl" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.feedUrl" />
+        <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>
+            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.feedUrl || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.itunesPageUrl" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" />
+        <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>
+            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesPageUrl || '' }}</p>
           </div>
         </div>
-        <div v-if="selectedMatch.releaseDate" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.releaseDate" />
+        <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" />
-            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.releaseDate || '' }}</p>
+            <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" :label="$strings.LabelReleaseDate" />
+            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
           </div>
         </div>
 
         <div class="flex items-center justify-end py-2">
-          <ui-btn color="success" type="submit">Update</ui-btn>
+          <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
         </div>
       </form>
     </div>
@@ -187,6 +192,7 @@ export default {
       searchResults: [],
       hasSearched: false,
       selectedMatch: null,
+      selectedMatchOrig: null,
       selectedMatchUsage: {
         title: true,
         subtitle: true,
@@ -197,7 +203,6 @@ export default {
         publisher: true,
         publishedYear: true,
         series: true,
-        volumeNumber: true,
         genres: true,
         tags: true,
         language: true,
@@ -209,7 +214,8 @@ export default {
         itunesId: true,
         feedUrl: true,
         releaseDate: true
-      }
+      },
+      selectAll: true
     }
   },
   watch: {
@@ -234,28 +240,27 @@ 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
       }
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
     },
     searchTitleLabel() {
-      if (this.provider == 'audible') return 'Search Title or ASIN'
-      else if (this.provider == 'itunes') return 'Search Term'
-      return 'Search Title'
+      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
+      else if (this.provider == 'itunes') return this.$strings.LabelSearchTerm
+      return this.$strings.LabelSearchTitle
     },
     media() {
       return this.libraryItem ? this.libraryItem.media || {} : {}
@@ -271,6 +276,14 @@ export default {
     }
   },
   methods: {
+    selectAllToggled(val) {
+      for (const key in this.selectedMatchUsage) {
+        this.selectedMatchUsage[key] = val
+      }
+    },
+    checkboxToggled() {
+      this.selectAll = Object.values(this.selectedMatchUsage).findIndex((v) => v == false) < 0
+    },
     persistProvider() {
       try {
         localStorage.setItem('book-provider', this.provider)
@@ -299,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 []
       })
@@ -323,7 +336,7 @@ export default {
       this.hasSearched = true
     },
     init() {
-      this.selectedMatch = null
+      this.clearSelectedMatch()
       this.selectedMatchUsage = {
         title: true,
         subtitle: true,
@@ -334,7 +347,6 @@ export default {
         publisher: true,
         publishedYear: true,
         series: true,
-        volumeNumber: true,
         genres: true,
         tags: true,
         language: true,
@@ -377,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,
@@ -415,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)) {
@@ -434,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') {
@@ -465,9 +474,9 @@ export default {
           return false
         })
         if (success) {
-          this.$toast.success('Item Cover Updated')
+          this.$toast.success(this.$strings.ToastItemCoverUpdateSuccess)
         } else {
-          this.$toast.error('Item Cover Failed to Update')
+          this.$toast.error(this.$strings.ToastItemCoverUpdateFailed)
         }
         console.log('Updated cover')
         delete updatePayload.metadata.cover
@@ -481,19 +490,23 @@ export default {
         })
         if (updateResult) {
           if (updateResult.updated) {
-            this.$toast.success('Item details updated')
+            this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
           } else {
-            this.$toast.info('No detail updates were necessary')
+            this.$toast.info(this.$strings.ToastItemDetailsUpdateUnneeded)
           }
-          this.selectedMatch = null
+          this.clearSelectedMatch()
           this.$emit('selectTab', 'details')
         } else {
-          this.$toast.error('Item Details Failed to Update')
+          this.$toast.error(this.$strings.ToastItemDetailsUpdateFailed)
         }
       } else {
-        this.selectedMatch = null
+        this.clearSelectedMatch()
       }
       this.isProcessing = false
+    },
+    clearSelectedMatch() {
+      this.selectedMatch = null
+      this.selectedMatchOrig = null
     }
   }
 }

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

@@ -0,0 +1,179 @@
+<template>
+  <div class="w-full h-full relative">
+    <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-6 md:py-6">
+      <template v-if="!feedUrl">
+        <widgets-alert type="warning" class="text-base mb-4">No RSS feed URL is set for this podcast</widgets-alert>
+      </template>
+      <template v-if="feedUrl || autoDownloadEpisodes">
+        <div class="flex items-center justify-between mb-4">
+          <p class="text-base md:text-xl font-semibold">Schedule Automatic Episode Downloads</p>
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+        </div>
+
+        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
+          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxEpisodesToKeep" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updatedMaxEpisodesToKeep" />
+          <ui-tooltip text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes. <br>This will only delete 1 episode per new download.">
+            <p class="pl-4 text-base">
+              Max episodes to keep
+              <span class="material-icons icon-text text-sm">info_outlined</span>
+            </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>
+    </div>
+
+    <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
+      <div class="flex items-center px-2 md:px-4">
+        <div class="flex-grow" />
+        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? 'Save' : 'No update necessary' }}</ui-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      enableAutoDownloadEpisodes: false,
+      cronExpression: null,
+      newMaxEpisodesToKeep: 0,
+      newMaxNewEpisodesToDownload: 0
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    feedUrl() {
+      return this.mediaMetadata.feedUrl
+    },
+    autoDownloadEpisodes() {
+      return !!this.media.autoDownloadEpisodes
+    },
+    autoDownloadSchedule() {
+      return this.media.autoDownloadSchedule
+    },
+    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) || this.maxNewEpisodesToDownload !== Number(this.newMaxNewEpisodesToDownload)
+    }
+  },
+  methods: {
+    updatedMaxEpisodesToKeep() {
+      if (isNaN(this.newMaxEpisodesToKeep) || this.newMaxEpisodesToKeep < 0) {
+        this.newMaxEpisodesToKeep = 0
+      } else {
+        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) {
+        if (this.$refs.cronExpressionBuilder.checkBlurExpressionInput()) {
+          return
+        }
+      }
+      if (this.$refs.maxEpisodesInput && this.$refs.maxEpisodesInput.isFocused) {
+        this.$refs.maxEpisodesInput.blur()
+        return
+      }
+
+      const updatePayload = {
+        autoDownloadEpisodes: this.enableAutoDownloadEpisodes
+      }
+      if (this.enableAutoDownloadEpisodes) {
+        updatePayload.autoDownloadSchedule = this.cronExpression
+      }
+      if (this.newMaxEpisodesToKeep !== this.maxEpisodesToKeep) {
+        updatePayload.maxEpisodesToKeep = this.newMaxEpisodesToKeep
+      }
+      if (this.newMaxNewEpisodesToDownload !== this.maxNewEpisodesToDownload) {
+        updatePayload.maxNewEpisodesToDownload = this.newMaxNewEpisodesToDownload
+      }
+
+      this.updateDetails(updatePayload)
+    },
+    async updateDetails(updatePayload) {
+      this.isProcessing = true
+      var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, updatePayload).catch((error) => {
+        console.error('Failed to update', error)
+        return false
+      })
+      this.isProcessing = false
+      if (updateResult) {
+        if (updateResult.updated) {
+          this.$toast.success('Item details updated')
+          return true
+        } else {
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        }
+      }
+      return false
+    },
+    init() {
+      this.enableAutoDownloadEpisodes = this.autoDownloadEpisodes
+      this.cronExpression = this.autoDownloadSchedule
+      this.newMaxEpisodesToKeep = this.maxEpisodesToKeep
+      this.newMaxNewEpisodesToDownload = this.maxNewEpisodesToDownload
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+#scheduleWrapper {
+  height: calc(100% - 80px);
+  max-height: calc(100% - 80px);
+}
+</style>

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">{{ $strings.HeaderAudiobookTools }}</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">{{ $strings.LabelToolsMakeM4b }}</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsMakeM4bDescription }}</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=m4b`" class="flex items-center"
+            >{{ $strings.ButtonOpenManager }}
+            <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">{{ $strings.LabelToolsSplitM4b }}</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsSplitM4bDescription }}</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :disabled="true">{{ $strings.MessageNotYetImplemented }}</ui-btn>
+        </div>
+      </div>
+    </div>
+
+    <!-- Embed Metadata -->
+    <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">{{ $strings.LabelToolsEmbedMetadata }}</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsEmbedMetadataDescription }}</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=embed`" class="flex items-center"
+            >{{ $strings.ButtonOpenManager }}
+            <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">{{ $strings.MessageNoAudioTracks }}</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>

client/components/modals/libraries/EditLibrary.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="w-full h-full px-4 py-2 mb-4">
+  <div class="w-full h-full px-1 md:px-4 py-2 mb-4">
     <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
       <div class="flex flex-wrap md:flex-nowrap -mx-1">
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
-          <ui-dropdown v-model="mediaType" :items="mediaTypes" label="Media Type" :disabled="!isNew" small @input="changedMediaType" />
+          <ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" />
         </div>
         <div class="w-full md:flex-grow px-1 py-1 md:py-0">
-          <ui-text-input-with-label v-model="name" label="Library Name" @blur="nameBlurred" />
+          <ui-text-input-with-label v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
         </div>
         <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
-          <ui-media-icon-picker v-model="icon" @input="iconChanged" />
+          <ui-media-icon-picker v-model="icon" :label="$strings.LabelIcon" @input="iconChanged" />
         </div>
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
-          <ui-dropdown v-model="provider" :items="providers" label="Metadata Provider" small @input="formUpdated" />
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelMetadataProvider" small @input="formUpdated" />
         </div>
       </div>
 
       <div class="w-full py-4">
-        <p class="px-1 text-sm font-semibold">Folders</p>
+        <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
         <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" />
@@ -25,10 +25,10 @@
         </div>
         <div class="flex py-1 px-2 items-center w-full">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text v-model="newFolderPath" placeholder="New folder path" type="text" class="w-full" @blur="newFolderInputBlurred" />
+          <ui-editable-text v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
         </div>
 
-        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">Browse for Folder</ui-btn>
+        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
       </div>
     </div>
     <modals-libraries-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />
@@ -53,20 +53,22 @@ export default {
       folders: [],
       showDirectoryPicker: false,
       newFolderPath: '',
-      mediaType: null,
-      mediaTypes: [
-        {
-          value: 'book',
-          text: 'Books'
-        },
-        {
-          value: 'podcast',
-          text: 'Podcasts'
-        }
-      ]
+      mediaType: null
     }
   },
   computed: {
+    mediaTypes() {
+      return [
+        {
+          value: 'book',
+          text: this.$strings.LabelBooks
+        },
+        {
+          value: 'podcast',
+          text: this.$strings.LabelPodcasts
+        }
+      ]
+    },
     folderPaths() {
       return this.folders.map((f) => f.fullPath)
     },

client/components/modals/libraries/EditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="font-book text-xl md:text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
@@ -11,10 +11,10 @@
       </template>
     </div>
 
-    <div class="px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <component v-if="libraryCopy && show" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
+    <div class="px-2 md:px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
 
-      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-opacity-10">
+      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
         <div class="flex justify-end">
           <ui-btn @click="submit">{{ buttonText }}</ui-btn>
         </div>
@@ -36,18 +36,6 @@ export default {
     return {
       processing: false,
       selectedTab: 'details',
-      tabs: [
-        {
-          id: 'details',
-          title: 'Details',
-          component: 'modals-libraries-edit-library'
-        },
-        {
-          id: 'settings',
-          title: 'Settings',
-          component: 'modals-libraries-library-settings'
-        }
-      ],
       libraryCopy: null
     }
   },
@@ -61,10 +49,29 @@ export default {
       }
     },
     title() {
-      return this.library ? 'Update Library' : 'New Library'
+      return this.library ? this.$strings.HeaderUpdateLibrary : this.$strings.HeaderNewLibrary
     },
     buttonText() {
-      return this.library ? 'Update Library' : 'Create New Library'
+      return this.library ? this.$strings.ButtonSave : this.$strings.ButtonCreate
+    },
+    tabs() {
+      return [
+        {
+          id: 'details',
+          title: this.$strings.HeaderDetails,
+          component: 'modals-libraries-edit-library'
+        },
+        {
+          id: 'settings',
+          title: this.$strings.HeaderSettings,
+          component: 'modals-libraries-library-settings'
+        },
+        {
+          id: 'schedule',
+          title: this.$strings.HeaderSchedule,
+          component: 'modals-libraries-schedule-scan'
+        }
+      ]
     },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
@@ -84,6 +91,7 @@ export default {
     },
     updateLibrary(library) {
       this.mapLibraryToCopy(library)
+      console.log('Updated library', this.libraryCopy)
     },
     getNewLibraryData() {
       return {
@@ -93,9 +101,11 @@ export default {
         icon: 'database',
         mediaType: 'book',
         settings: {
+          coverAspectRatio: this.$constants.BookCoverAspectRatio.SQUARE,
           disableWatcher: false,
           skipMatchingMediaWithAsin: false,
-          skipMatchingMediaWithIsbn: false
+          skipMatchingMediaWithIsbn: false,
+          autoScanCronExpression: null
         }
       }
     },
@@ -112,7 +122,9 @@ export default {
           if (key === 'folders') {
             this.libraryCopy.folders = library.folders.map((f) => ({ ...f }))
           } else if (key === 'settings') {
-            this.libraryCopy.settings = { ...library.settings }
+            for (const settingKey in library.settings) {
+              this.libraryCopy.settings[settingKey] = library.settings[settingKey]
+            }
           } else {
             this.libraryCopy[key] = library[key]
           }
@@ -134,6 +146,13 @@ export default {
     submit() {
       if (!this.validate()) return
 
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) {
+        if (this.$refs.tabComponent.checkBlurExpressionInput()) {
+          return
+        }
+      }
+
       if (this.library) {
         this.submitUpdateLibrary()
       } else {
@@ -173,14 +192,14 @@ export default {
         .then((res) => {
           this.processing = false
           this.show = false
-          this.$toast.success(`Library "${res.name}" updated successfully`)
+          this.$toast.success(this.$getString('ToastLibraryUpdateSuccess', [res.name]))
         })
         .catch((error) => {
           console.error(error)
           if (error.response && error.response.data) {
             this.$toast.error(error.response.data)
           } else {
-            this.$toast.error('Failed to update library')
+            this.$toast.error(this.$strings.ToastLibraryUpdateFailed)
           }
           this.processing = false
         })
@@ -192,7 +211,7 @@ export default {
         .then((res) => {
           this.processing = false
           this.show = false
-          this.$toast.success(`Library "${res.name}" created successfully`)
+          this.$toast.success(this.$getString('ToastLibraryCreateSuccess', [res.name]))
           if (!this.$store.state.libraries.currentLibraryId) {
             console.log('Setting initially library id', res.id)
             // First library added
@@ -204,7 +223,7 @@ export default {
           if (error.response && error.response.data) {
             this.$toast.error(error.response.data)
           } else {
-            this.$toast.error('Failed to create library')
+            this.$toast.error(this.$strings.ToastLibraryCreateFailed)
           }
           this.processing = false
         })

client/components/modals/libraries/FolderChooser.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full bg-bg absolute top-0 left-0 px-4 py-4 z-10">
     <div class="flex items-center py-1 mb-2">
       <span class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
-      <p class="px-4 text-xl">Choose a Folder</p>
+      <p class="px-4 text-xl">{{ $strings.HeaderChooseAFolder }}</p>
     </div>
     <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
       <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
@@ -27,15 +27,16 @@
       </div>
     </div>
     <div v-else-if="loadingFolders" class="py-12 text-center">
-      <p>Loading folders...</p>
+      <p>{{ $strings.MessageLoadingFolders }}</p>
     </div>
-    <div v-else class="py-12 text-center">
-      <p class="text-lg mb-2">No Folders Available</p>
-      <p class="text-gray-300">Note: folders already mapped will not be shown</p>
+    <div v-else class="py-12 text-center max-w-sm mx-auto">
+      <p class="text-lg mb-2">{{ $strings.MessageNoFoldersAvailable }}</p>
+      <p class="text-gray-300 mb-2">{{ $strings.NoteFolderPicker }}</p>
+      <p v-if="isDebian" class="text-red-400">{{ $strings.NoteFolderPickerDebian }}</p>
     </div>
 
     <div class="w-full py-2">
-      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">Select Folder Path</ui-btn>
+      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">{{ $strings.ButtonSelectFolderPath }}</ui-btn>
     </div>
   </div>
 </template>
@@ -88,6 +89,12 @@ export default {
           ...d
         }
       })
+    },
+    isDebian() {
+      return this.Source == 'debian'
+    },
+    Source() {
+      return this.$store.state.Source
     }
   },
   methods: {

client/components/modals/libraries/LibrarySettings.vue

@@ -1,23 +1,32 @@
 <template>
-  <div class="w-full h-full px-4 py-1 mb-4">
+  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
+    <div class="flex items-center py-2">
+      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
+      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
+        <p class="pl-4 text-base">
+          {{ $strings.LabelSettingsSquareBookCovers }}
+          <span class="material-icons icon-text text-sm">info_outlined</span>
+        </p>
+      </ui-tooltip>
+    </div>
     <div class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
         <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-lg">Disable folder watcher for library</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsDisableWatcherForLibrary }}</p>
       </div>
-      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*Watcher is disabled globally in server settings</p>
+      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
     </div>
     <div v-if="mediaType == 'book'" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
-        <p class="pl-4 text-lg">Skip matching books that already have an ASIN</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
       </div>
     </div>
     <div v-if="mediaType == 'book'" class="py-3">
       <div class="flex items-center">
         <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
-        <p class="pl-4 text-lg">Skip matching books that already have an ISBN</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
       </div>
     </div>
   </div>
@@ -35,6 +44,7 @@ export default {
   data() {
     return {
       provider: null,
+      useSquareBookCovers: false,
       disableWatcher: false,
       skipMatchingMediaWithAsin: false,
       skipMatchingMediaWithIsbn: false
@@ -59,6 +69,7 @@ export default {
     getLibraryData() {
       return {
         settings: {
+          coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
           disableWatcher: !!this.disableWatcher,
           skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
           skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
@@ -69,6 +80,7 @@ export default {
       this.$emit('update', this.getLibraryData())
     },
     init() {
+      this.useSquareBookCovers = this.librarySettings.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
       this.disableWatcher = !!this.librarySettings.disableWatcher
       this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
       this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn

client/components/modals/libraries/ScheduleScan.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
+    <div class="flex items-center justify-between mb-4">
+      <p class="text-base md:text-xl font-semibold">{{ $strings.HeaderScheduleLibraryScans }}</p>
+      <ui-checkbox v-model="enableAutoScan" @input="toggleEnableAutoScan" :label="$strings.LabelEnable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+    </div>
+    <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoScan" v-model="cronExpression" @input="updatedCron" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    library: {
+      type: Object,
+      default: () => null
+    },
+    processing: Boolean
+  },
+  data() {
+    return {
+      cronExpression: null,
+      enableAutoScan: false
+    }
+  },
+  computed: {},
+  methods: {
+    checkBlurExpressionInput() {
+      // returns true if advanced cron input is focused
+      if (!this.$refs.cronExpressionBuilder) return false
+      return this.$refs.cronExpressionBuilder.checkBlurExpressionInput()
+    },
+    toggleEnableAutoScan(v) {
+      if (!v) this.updatedCron(null)
+      else if (!this.cronExpression) {
+        this.cronExpression = '0 0 * * 1'
+        this.updatedCron(this.cronExpression)
+      }
+    },
+    updatedCron(expression) {
+      this.$emit('update', {
+        settings: {
+          autoScanCronExpression: expression
+        }
+      })
+    },
+    init() {
+      this.cronExpression = this.library.settings.autoScanCronExpression
+      this.enableAutoScan = !!this.cronExpression
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/modals/notification/NotificationEditModal.vue

@@ -0,0 +1,190 @@
+<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="$strings.LabelNotificationEvent" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
+
+          <ui-multi-select v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />
+
+          <ui-text-input-with-label v-model="newNotification.titleTemplate" :label="$strings.LabelNotificationTitleTemplate" class="mb-2" />
+
+          <ui-textarea-with-label v-model="newNotification.bodyTemplate" :label="$strings.LabelNotificationBodyTemplate" :rows="4" class="mb-2" />
+
+          <p v-if="availableVariables" class="text-sm text-gray-300">
+            <strong>{{ $strings.LabelNotificationAvailableVariables }}:</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">{{ $strings.LabelEnable }}</p>
+            </div>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    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>

client/components/modals/player/QueueItemRow.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-if="item" class="w-full flex items-center px-4 py-2" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
+    <covers-preview-cover :src="coverUrl" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
+    <div class="flex-grow px-2 py-1 queue-item-row-content truncate">
+      <p class="text-gray-200 text-sm truncate">{{ title }}</p>
+      <p class="text-gray-300 text-sm">{{ subtitle }}</p>
+      <p v-if="caption" class="text-gray-400 text-xs">{{ caption }}</p>
+    </div>
+    <div class="w-28">
+      <p v-if="isOpenInPlayer" class="text-sm text-right text-gray-400">{{ $strings.ButtonPlaying }}</p>
+      <div v-else-if="isHovering" class="flex items-center justify-end -mx-1">
+        <button class="outline-none mx-1 flex items-center" @click.stop="playClick">
+          <span class="material-icons text-success">play_arrow</span>
+        </button>
+        <button class="outline-none mx-1 flex items-center" @click.stop="removeClick">
+          <span class="material-icons text-error">close</span>
+        </button>
+      </div>
+      <p v-else class="text-gray-400 text-sm text-right">{{ durationPretty }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    index: Number
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    title() {
+      return this.item.title || ''
+    },
+    subtitle() {
+      return this.item.subtitle || ''
+    },
+    caption() {
+      return this.item.caption
+    },
+    libraryItemId() {
+      return this.item.libraryItemId
+    },
+    episodeId() {
+      return this.item.episodeId
+    },
+    coverPath() {
+      return this.item.coverPath
+    },
+    coverUrl() {
+      if (!this.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    duration() {
+      return this.item.duration
+    },
+    durationPretty() {
+      if (!this.duration) return 'N/A'
+      return this.$elapsedPretty(this.duration)
+    },
+    isOpenInPlayer() {
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
+    },
+    wrapperClass() {
+      if (this.isOpenInPlayer) return 'bg-yellow-400 bg-opacity-10'
+      if (this.index % 2 === 0) return 'bg-gray-300 bg-opacity-5 hover:bg-opacity-10'
+      return 'bg-bg hover:bg-gray-300 hover:bg-opacity-10'
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    playClick() {
+      this.$emit('play', this.item)
+    },
+    removeClick() {
+      this.$emit('remove', this.item)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.queue-item-row-content {
+  max-width: calc(100% - 48px - 128px);
+}
+</style>

client/components/modals/player/QueueItemsModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <modals-modal v-model="show" name="queue-items" :width="800" :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">{{ $strings.HeaderPlayerQueue }}</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden py-4" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
+        <div class="pb-4 px-4 flex items-center">
+          <p class="text-base text-gray-200">{{ $strings.HeaderPlayerQueue }}</p>
+          <p class="text-base text-gray-400 px-4">{{ playerQueueItems.length }} Items</p>
+          <div class="flex-grow" />
+          <ui-checkbox v-model="playerQueueAutoPlay" label="Auto Play" medium checkbox-bg="primary" border-color="gray-600" label-class="pl-2 mb-px" />
+        </div>
+        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem" @remove="removeItem" />
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItemId: String
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    playerQueueAutoPlay: {
+      get() {
+        return this.$store.state.playerQueueAutoPlay
+      },
+      set(val) {
+        this.$store.commit('setPlayerQueueAutoPlay', val)
+      }
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
+    }
+  },
+  methods: {
+    playItem(item) {
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: item.libraryItemId,
+        episodeId: item.episodeId || null,
+        queueItems: this.playerQueueItems
+      })
+      this.show = false
+    },
+    removeItem(item) {
+      this.$store.commit('removeItemFromQueue', item)
+    }
+  }
+}
+</script>

client/components/modals/podcast/EditEpisode.vue

@@ -26,12 +26,12 @@ export default {
       tabs: [
         {
           id: 'details',
-          title: 'Details',
+          title: this.$strings.HeaderDetails,
           component: 'modals-podcast-tabs-episode-details'
         },
         {
           id: 'match',
-          title: 'Match',
+          title: this.$strings.HeaderMatch,
           component: 'modals-podcast-tabs-episode-match'
         }
       ]

client/components/modals/podcast/EpisodeFeed.vue

@@ -11,11 +11,11 @@
           v-for="(episode, index) in episodes"
           :key="index"
           class="relative"
-          :class="episode.enclosure && itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
-          @click="toggleSelectEpisode(index)"
+          :class="itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          @click="toggleSelectEpisode(index, episode)"
         >
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="episode.enclosure && itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
+            <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
             <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
@@ -23,20 +23,13 @@
             <p class="break-words mb-1">{{ episode.title }}</p>
             <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
-            <!-- <span class="material-icons cursor-pointer text-lg hover:text-success" @click="saveEpisode(episode)">save</span> -->
           </div>
         </div>
       </div>
       <div class="flex justify-end pt-4">
-        <div class="relative">
-          <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <ui-checkbox v-model="selectAll" small checkbox-bg="primary" border-color="gray-600" :disabled="allDownloaded" />
-          </div>
-          <div class="px-8 py-2">
-            <p :class="!allDownloaded ? 'font-semibold text-gray-200' : 'text-gray-400'">Select all episodes</p>
-          </div>
-        </div>
-        <ui-btn :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
+        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" label="Select all episodes" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
+        <ui-btn v-if="!allDownloaded" :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
+        <p v-else class="text-success text-base px-2 py-4">All episodes are downloaded</p>
       </div>
     </div>
   </modals-modal>
@@ -58,7 +51,8 @@ export default {
   data() {
     return {
       processing: false,
-      selectedEpisodes: {}
+      selectedEpisodes: {},
+      selectAll: false
     }
   },
   watch: {
@@ -78,22 +72,12 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectAll: {
-      get() {
-        return this.episodesSelected.length == this.episodes.filter((_, index) => !(this.episodes[index].enclosure && this.itemEpisodeMap[this.episodes[index].enclosure.url])).length
-      },
-      set(val) {
-        for (const key in this.selectedEpisodes) {
-          this.selectedEpisodes[key] = val
-        }
-      }
-    },
     title() {
       if (!this.libraryItem) return ''
       return this.libraryItem.media.metadata.title || 'Unknown'
     },
     allDownloaded() {
-      return Object.values(this.episodes).filter((episode) => !(episode.enclosure && this.itemEpisodeMap[episode.enclosure.url])).length === 0
+      return !this.episodes.some((episode) => !this.itemEpisodeMap[episode.enclosure.url])
     },
     episodesSelected() {
       return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
@@ -115,8 +99,27 @@ export default {
     }
   },
   methods: {
-    toggleSelectEpisode(index) {
+    toggleSelectAll(val) {
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (this.itemEpisodeMap[episode.enclosure.url]) this.selectedEpisodes[String(i)] = false
+        else this.$set(this.selectedEpisodes, String(i), val)
+      }
+    },
+    checkSetIsSelectedAll() {
+      for (let i = 0; i < this.episodes.length; i++) {
+        const episode = this.episodes[i]
+        if (!this.itemEpisodeMap[episode.enclosure.url] && !this.selectedEpisodes[String(i)]) {
+          this.selectAll = false
+          return
+        }
+      }
+      this.selectAll = true
+    },
+    toggleSelectEpisode(index, episode) {
+      if (this.itemEpisodeMap[episode.enclosure.url]) return
       this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
+      this.checkSetIsSelectedAll()
     },
     submit() {
       var episodesToDownload = []
@@ -145,17 +148,15 @@ export default {
           console.error('Failed to download episodes', error)
           this.processing = false
           this.$toast.error(errorMsg)
+
+          this.selectedEpisodes = {}
+          this.selectAll = false
         })
     },
     init() {
-      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt) ? 1 : -1)
-      for (let i = 0; i < this.episodes.length; i++) {
-        var episode = this.episodes[i]
-        if (episode.enclosure && !this.itemEpisodeMap[episode.enclosure.url]) {
-          // Do not include episodes already downloaded
-          this.$set(this.selectedEpisodes, String(i), false)
-        }
-      }
+      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
+      this.selectAll = false
+      this.selectedEpisodes = {}
     }
   },
   mounted() {}
@@ -170,4 +171,4 @@ export default {
 #episodes-scroll {
   max-height: calc(80vh - 200px);
 }
-</style>
+</style>

client/components/modals/podcast/NewModal.vue

@@ -1,51 +1,51 @@
 <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">{{ $strings.HeaderDetails }}</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" />
+            <ui-text-input-with-label v-model="podcast.title" :label="$strings.LabelTitle" @input="titleUpdated" />
           </div>
           <div class="w-full md:w-1/2 p-2">
-            <ui-text-input-with-label v-model="podcast.author" label="Author" />
+            <ui-text-input-with-label v-model="podcast.author" :label="$strings.LabelAuthor" />
           </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 />
+            <ui-text-input-with-label v-model="podcast.feedUrl" :label="$strings.LabelFeedURL" readonly />
           </div>
           <div class="w-full md:w-1/2 p-2">
-            <ui-multi-select v-model="podcast.genres" :items="podcast.genres" label="Genres" />
+            <ui-multi-select v-model="podcast.genres" :items="podcast.genres" :label="$strings.LabelGenres" />
           </div>
         </div>
         <div class="p-2 w-full">
-          <ui-textarea-with-label v-model="podcast.description" label="Description" :rows="3" />
+          <ui-textarea-with-label v-model="podcast.description" :label="$strings.LabelDescription" :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" />
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" :label="$strings.LabelFolder" @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="`${$strings.LabelPodcast} ${$strings.LabelPath}`" 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="$strings.LabelAutoDownloadEpisodes" 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>
+        <ui-btn color="success" @click="submit">{{ $strings.ButtonSubmit }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -182,12 +182,12 @@ export default {
         .$post('/api/podcasts', podcastPayload)
         .then((libraryItem) => {
           this.processing = false
-          this.$toast.success('Podcast created successfully')
+          this.$toast.success(this.$strings.ToastPodcastCreateSuccess)
           this.show = false
           this.$router.push(`/item/${libraryItem.id}`)
         })
         .catch((error) => {
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
+          var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastPodcastCreateFailed
           console.error('Failed to create podcast', error)
           this.processing = false
           this.$toast.error(errorMsg)

client/components/modals/podcast/OpmlFeedsModal.vue

@@ -9,14 +9,14 @@
       <div class="w-full p-4">
         <div class="flex items-center -mx-2 mb-2">
           <div class="w-full md:w-2/3 p-2">
-            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" />
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" :label="$strings.LabelFolder" />
           </div>
           <div class="w-full md:w-1/3 p-2 pt-6">
-            <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="text-sm font-semibold pl-2" />
+            <ui-checkbox v-model="autoDownloadEpisodes" :label="$strings.LabelAutoDownloadEpisodes" checkbox-bg="primary" border-color="gray-600" label-class="text-sm font-semibold pl-2" />
           </div>
         </div>
 
-        <p class="text-lg font-semibold mb-2">Podcasts to Add</p>
+        <p class="text-lg font-semibold mb-2">{{ $strings.HeaderPodcastsToAdd }}</p>
 
         <div class="w-full overflow-y-auto" style="max-height: 50vh">
           <template v-for="(feed, index) in feedMetadata">
@@ -26,7 +26,7 @@
       </div>
       <div class="flex items-center py-4">
         <div class="flex-grow" />
-        <ui-btn color="success" @click="submit">Add Podcasts</ui-btn>
+        <ui-btn color="success" @click="submit">{{ $strings.ButtonAddPodcasts }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -141,10 +141,10 @@ export default {
         await this.$axios
           .$post('/api/podcasts', podcastPayload)
           .then(() => {
-            this.$toast.success(`${podcastPayload.media.metadata.title}: Podcast created successfully`)
+            this.$toast.success(`${podcastPayload.media.metadata.title}: ${this.$strings.ToastPodcastCreateSuccess}`)
           })
           .catch((error) => {
-            var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
+            var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastPodcastCreateFailed
             console.error('Failed to create podcast', podcastPayload, error)
             this.$toast.error(`${podcastPayload.media.metadata.title}: ${errorMsg}`)
           })

client/components/modals/podcast/RemoveEpisode.vue

@@ -7,16 +7,16 @@
     </template>
     <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
       <div class="mb-4">
-        <p class="text-lg text-gray-200 mb-4">
-          Are you sure you want to remove episode<br /><span class="text-base">{{ episodeTitle }}</span
-          >?
+        <p v-if="episode" class="text-lg text-gray-200 mb-4">
+          {{ $getString('MessageConfirmRemoveEpisode', [episodeTitle]) }}
         </p>
+        <p v-else class="text-lg text-gray-200 mb-4">{{ $getString('MessageConfirmRemoveEpisodes', [episodes.length]) }}</p>
         <p class="text-xs font-semibold text-warning text-opacity-90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
       </div>
       <div class="flex justify-between items-center pt-4">
-        <ui-checkbox v-model="hardDeleteFile" label="Hard delete file" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
+        <ui-checkbox v-model="hardDeleteFile" :label="$strings.LabelHardDeleteFile" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
 
-        <ui-btn @click="submit">{{ hardDeleteFile ? 'Delete episode' : 'Remove episode' }}</ui-btn>
+        <ui-btn @click="submit">{{ btnText }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -30,9 +30,9 @@ export default {
       type: Object,
       default: () => {}
     },
-    episode: {
-      type: Object,
-      default: () => {}
+    episodes: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -55,34 +55,48 @@ export default {
         this.$emit('input', val)
       }
     },
-    title() {
-      return 'Remove Episode'
+    episode() {
+      if (this.episodes.length === 1) return this.episodes[0]
+      return null
     },
-    episodeId() {
-      return this.episode ? this.episode.id : null
+    title() {
+      if (this.episodes.length > 1) return this.$getString('HeaderRemoveEpisodes', [this.episodes.length])
+      return this.$strings.HeaderRemoveEpisode
+    },
+    btnText() {
+      return this.hardDeleteFile ? this.$strings.ButtonDelete : this.$strings.ButtonRemove
     },
     episodeTitle() {
       return this.episode ? this.episode.title : null
     }
   },
   methods: {
-    submit() {
+    async submit() {
       this.processing = true
 
       var queryString = this.hardDeleteFile ? '?hard=1' : ''
-      this.$axios
-        .$delete(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}${queryString}`)
-        .then(() => {
+      for (const episode of this.episodes) {
+        const success = await this.$axios
+          .$delete(`/api/podcasts/${this.libraryItem.id}/episode/${episode.id}${queryString}`)
+          .then(() => true)
+          .catch((error) => {
+            var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to remove episode'
+            console.error('Failed to remove episode', error)
+            this.$toast.error(errorMsg)
+            return false
+          })
+        if (!success) {
           this.processing = false
-          this.$toast.success('Podcast episode removed')
           this.show = false
-        })
-        .catch((error) => {
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed remove episode'
-          console.error('Failed update episode', error)
-          this.processing = false
-          this.$toast.error(errorMsg)
-        })
+          this.$emit('clearSelected')
+          return
+        }
+      }
+
+      this.processing = false
+      this.$toast.success(`${this.episodes.length} episode${this.episodes.length > 1 ? 's' : ''} removed`)
+      this.show = false
+      this.$emit('clearSelected')
     }
   },
   mounted() {}

client/components/modals/podcast/ViewEpisode.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="podcast-episode-view-modal" :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">Episode</p>
+        <p class="font-book text-3xl text-white truncate">{{ $strings.LabelEpisode }}</p>
       </div>
     </template>
     <div ref="wrapper" class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
@@ -17,7 +17,7 @@
       </div>
       <p class="text-lg font-semibold mb-6">{{ title }}</p>
       <div v-if="description" class="default-style" v-html="description" />
-      <p v-else class="mb-2">No description</p>
+      <p v-else class="mb-2">{{ $strings.MessageNoDescription }}</p>
     </div>
   </modals-modal>
 </template>
@@ -66,7 +66,7 @@ export default {
       return this.mediaMetadata.author
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     }
   },
   methods: {},

client/components/modals/podcast/tabs/EpisodeDetails.vue

@@ -2,29 +2,36 @@
   <div>
     <div class="flex flex-wrap">
       <div class="w-1/5 p-1">
-        <ui-text-input-with-label v-model="newEpisode.season" label="Season" />
+        <ui-text-input-with-label v-model="newEpisode.season" :label="$strings.LabelSeason" />
       </div>
       <div class="w-1/5 p-1">
-        <ui-text-input-with-label v-model="newEpisode.episode" label="Episode" />
+        <ui-text-input-with-label v-model="newEpisode.episode" :label="$strings.LabelEpisode" />
       </div>
       <div class="w-1/5 p-1">
-        <ui-text-input-with-label v-model="newEpisode.episodeType" label="Episode Type" />
+        <ui-text-input-with-label v-model="newEpisode.episodeType" :label="$strings.LabelEpisodeType" />
       </div>
       <div class="w-2/5 p-1">
-        <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" label="Pub Date" />
+        <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" :label="$strings.LabelPubDate" />
       </div>
       <div class="w-full p-1">
-        <ui-text-input-with-label v-model="newEpisode.title" label="Title" />
+        <ui-text-input-with-label v-model="newEpisode.title" :label="$strings.LabelTitle" />
       </div>
       <div class="w-full p-1">
-        <ui-textarea-with-label v-model="newEpisode.subtitle" label="Subtitle" :rows="3" />
+        <ui-textarea-with-label v-model="newEpisode.subtitle" :label="$strings.LabelSubtitle" :rows="3" />
       </div>
       <div class="w-full p-1 default-style">
-        <ui-rich-text-editor label="Description" v-model="newEpisode.description" />
+        <ui-rich-text-editor :label="$strings.LabelDescription" v-model="newEpisode.description" />
       </div>
     </div>
-    <div class="flex justify-end pt-4">
-      <ui-btn @click="submit">Submit</ui-btn>
+    <div class="flex items-center justify-end pt-4">
+      <ui-btn @click="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+    </div>
+    <div v-if="enclosureUrl" class="py-4">
+      <p class="text-xs text-gray-300 font-semibold">Episode URL from RSS feed</p>
+      <a :href="enclosureUrl" target="_blank" class="text-xs text-blue-400 hover:text-blue-500 hover:underline">{{ enclosureUrl }}</a>
+    </div>
+    <div v-else class="py-4">
+      <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>
     </div>
   </div>
 </template>
@@ -76,6 +83,12 @@ export default {
     },
     episodeId() {
       return this.episode ? this.episode.id : null
+    },
+    enclosure() {
+      return this.episode ? this.episode.enclosure || {} : {}
+    },
+    enclosureUrl() {
+      return this.enclosure.url
     }
   },
   methods: {

client/components/modals/podcast/tabs/EpisodeMatch.vue

@@ -2,18 +2,18 @@
   <div style="min-height: 200px">
     <template v-if="!podcastFeedUrl">
       <div class="py-8">
-        <widgets-alert type="error">Podcast has no RSS feed url to use for matching</widgets-alert>
+        <widgets-alert type="error">{{ $strings.MessagePodcastHasNoRSSFeedForMatching }}</widgets-alert>
       </div>
     </template>
     <template v-else>
       <form @submit.prevent="submitForm">
         <div class="flex mb-2">
-          <ui-text-input-with-label v-model="episodeTitle" :disabled="isProcessing" label="Episode Title" class="pr-1" />
-          <ui-btn class="mt-5 ml-1" :loading="isProcessing" type="submit">Search</ui-btn>
+          <ui-text-input-with-label v-model="episodeTitle" :disabled="isProcessing" :label="$strings.LabelEpisodeTitle" class="pr-1" />
+          <ui-btn class="mt-5 ml-1" :loading="isProcessing" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
         </div>
       </form>
       <div v-if="!isProcessing && searchedTitle && !episodesFound.length" class="w-full py-8">
-        <p class="text-center text-lg">No episode matches found</p>
+        <p class="text-center text-lg">{{ $strings.MessageNoEpisodeMatchesFound }}</p>
       </div>
       <div v-for="(episode, index) in episodesFound" :key="index" class="w-full py-4 border-b border-white border-opacity-5 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer px-2" @click.stop="selectEpisode(episode)">
         <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>

client/components/modals/rssfeed/ViewModal.vue

@@ -7,7 +7,7 @@
     </template>
     <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
       <div v-if="currentFeedUrl" class="w-full">
-        <p class="text-lg font-semibold mb-4">Podcast RSS Feed is Open</p>
+        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</p>
 
         <div class="w-full relative">
           <ui-text-input v-model="currentFeedUrl" readonly />
@@ -16,20 +16,20 @@
         </div>
       </div>
       <div v-else class="w-full">
-        <p class="text-lg font-semibold mb-4">Open RSS Feed</p>
+        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderOpenRSSFeed }}</p>
 
         <div class="w-full relative mb-2">
-          <ui-text-input-with-label v-model="newFeedSlug" label="RSS Feed Slug" />
-          <p class="text-xs text-gray-400 py-0.5 px-1">Feed will be {{ demoFeedUrl }}</p>
+          <ui-text-input-with-label v-model="newFeedSlug" :label="$strings.LabelRSSFeedSlug" />
+          <p class="text-xs text-gray-400 py-0.5 px-1">{{ $getString('MessageFeedURLWillBe', [demoFeedUrl]) }}</p>
         </div>
 
-        <p v-if="isHttp" class="w-full pt-2 text-warning text-xs">Warning: Most podcast apps will require the RSS feed URL is using HTTPS</p>
-        <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">Warning: 1 or more of your episodes do not have a Pub Date. Some podcast apps require this.</p>
+        <p v-if="isHttp" class="w-full pt-2 text-warning text-xs">{{ $strings.NoteRSSFeedPodcastAppsHttps }}</p>
+        <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">{{ $strings.NoteRSSFeedPodcastAppsPubDate }}</p>
       </div>
       <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
         <div class="flex-grow" />
-        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
-        <ui-btn v-else color="success" small @click="openFeed">Open RSS Feed</ui-btn>
+        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
+        <ui-btn v-else color="success" small @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -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
@@ -144,14 +144,14 @@ export default {
       this.$axios
         .$post(`/api/items/${this.libraryItem.id}/close-feed`)
         .then(() => {
-          this.$toast.success('RSS Feed Closed')
+          this.$toast.success(this.$strings.ToastRSSFeedCloseSuccess)
           this.show = false
           this.processing = false
         })
         .catch((error) => {
           console.error('Failed to close RSS feed', error)
           this.processing = false
-          this.$toast.error()
+          this.$toast.error(this.$strings.ToastRSSFeedCloseFailed)
         })
     },
     init() {

client/components/player/PlayerUi.vue

@@ -7,7 +7,7 @@
         <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
 
         <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
-          <span v-if="!sleepTimerSet" class="material-icons text-2xl sm:text-2.5xl">snooze</span>
+          <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
           <div v-else class="flex items-center">
             <span class="material-icons text-lg text-warning">snooze</span>
             <p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
@@ -15,14 +15,18 @@
         </div>
 
         <div v-if="!isPodcast" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
-          <span class="material-icons text-2xl sm:text-2.5xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
+          <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
         </div>
 
         <div v-if="chapters.length" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
-          <span class="material-icons text-2xl sm:text-3xl">format_list_bulleted</span>
+          <span class="material-icons text-2xl">format_list_bulleted</span>
         </div>
 
-        <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? 'Use full track' : 'Use chapter track'">
+        <button v-if="playerQueueItems.length" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
+          <span class="material-icons text-2.5xl sm:text-3xl">queue_music</span>
+        </button>
+
+        <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
           <div class="cursor-pointer text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
             <span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
           </div>
@@ -138,6 +142,9 @@ export default {
     hasNextChapter() {
       if (!this.chapters.length) return false
       return this.currentChapterIndex < this.chapters.length - 1
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
     }
   },
   methods: {

client/components/prompt/Confirm.vue

@@ -3,12 +3,12 @@
     <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>
+          <ui-btn v-if="isYesNo" color="primary" @click="nevermind">{{ $strings.ButtonCancel }}</ui-btn>
           <div class="flex-grow" />
-          <ui-btn v-if="isYesNo" color="success" @click="confirm">Yes</ui-btn>
-          <ui-btn v-else color="primary" @click="confirm">Ok</ui-btn>
+          <ui-btn v-if="isYesNo" color="success" @click="confirm">{{ $strings.ButtonYes }}</ui-btn>
+          <ui-btn v-else color="primary" @click="confirm">{{ $strings.ButtonOk }}</ui-btn>
         </div>
       </div>
     </div>

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,

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']

client/components/stats/DailyListeningChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-96 my-6 mx-auto">
-    <h1 class="text-2xl mb-4 font-book">Minutes Listening <span class="text-white text-opacity-60 text-lg">(Last 7 days)</span></h1>
+    <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsMinutesListeningChart }}</h1>
     <div class="relative w-96 h-72">
       <div class="absolute top-0 left-0">
         <template v-for="lbl in yAxisLabels">
@@ -34,24 +34,24 @@
     </div>
     <div class="flex justify-between pt-12">
       <div>
-        <p class="text-sm text-center">Week Listening</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsWeekListening }}</p>
         <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ totalMinutesListeningThisWeek }}</p>
-        <p class="text-sm text-center">minutes</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
-        <p class="text-sm text-center">Daily Average</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsDailyAverage }}</p>
         <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ averageMinutesPerDay }}</p>
-        <p class="text-sm text-center">minutes</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
-        <p class="text-sm text-center">Best Day</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsBestDay }}</p>
         <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ mostListenedDay }}</p>
-        <p class="text-sm text-center">minutes</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsMinutes }}</p>
       </div>
       <div>
-        <p class="text-sm text-center">Days</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsDays }}</p>
         <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ daysInARow }}</p>
-        <p class="text-sm text-center">in a row</p>
+        <p class="text-sm text-center">{{ $strings.LabelStatsInARow }}</p>
       </div>
     </div>
   </div>

client/components/stats/Heatmap.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="heatmap" class="w-full">
     <div class="mx-auto" :style="{ height: innerHeight + 160 + 'px', width: innerWidth + 52 + 'px' }" style="background-color: rgba(13, 17, 23, 0)">
-      <p class="mb-2 px-1 text-sm text-gray-200">{{ Object.values(daysListening).length }} listening sessions in the last year</p>
+      <p class="mb-2 px-1 text-sm text-gray-200">{{ $getString('MessageListeningSessionsInTheLastYear', [Object.values(daysListening).length]) }}</p>
       <div class="border border-white border-opacity-25 rounded py-2 w-full" style="background-color: #232323" :style="{ height: innerHeight + 80 + 'px' }">
         <div :style="{ width: innerWidth + 'px', height: innerHeight + 'px' }" class="ml-10 mt-5 absolute" @mouseover="mouseover" @mouseout="mouseout">
           <div v-for="dayLabel in dayLabels" :key="dayLabel.label" :style="dayLabel.style" class="absolute top-0 left-0 text-gray-300">{{ dayLabel.label }}</div>
@@ -12,9 +12,9 @@
 
           <div class="flex py-2 px-4" :style="{ marginTop: innerHeight + 'px' }">
             <div class="flex-grow" />
-            <p style="font-size: 10px; line-height: 10px" class="text-gray-400 px-1">Less</p>
+            <p style="font-size: 10px; line-height: 10px" class="text-gray-400 px-1">{{ $strings.LabelLess }}</p>
             <div v-for="block in legendBlocks" :key="block.id" :style="block.style" class="h-2.5 w-2.5 rounded-sm" style="margin-left: 1.5px; margin-right: 1.5px" />
-            <p style="font-size: 10px; line-height: 10px" class="text-gray-400 px-1">More</p>
+            <p style="font-size: 10px; line-height: 10px" class="text-gray-400 px-1">{{ $strings.LabelMore }}</p>
           </div>
         </div>
       </div>

client/components/stats/PreviewIcons.vue

@@ -6,7 +6,7 @@
       </svg>
       <div class="px-2">
         <p class="text-4xl md:text-5xl font-bold">{{ totalItems }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items in Library</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsInLibrary }}</p>
       </div>
     </div>
 
@@ -14,7 +14,7 @@
       <span class="material-icons text-7xl">show_chart</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalTime }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Overall {{ useOverallHours ? 'Hours' : 'Days' }}</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ useOverallHours ? $strings.LabelStatsOverallHours : $strings.LabelStatsOverallDays }}</p>
       </div>
     </div>
 
@@ -24,7 +24,7 @@
       </svg>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalAuthors }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Authors</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAuthors }}</p>
       </div>
     </div>
 
@@ -32,7 +32,7 @@
       <span class="material-icons-outlined text-6xl pt-1">insert_drive_file</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalSizeNum }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Size ({{ totalSizeMod }})</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelSize }} ({{ totalSizeMod }})</p>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
       <span class="material-icons-outlined text-6xl pt-1">audio_file</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ numAudioTracks }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Audio Tracks</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAudioTracks }}</p>
       </div>
     </div>
   </div>

client/components/tables/AudioFilesTable.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="w-full my-2">
-    <div class="w-full bg-primary px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
-      <p class="pr-4">Other Audio Files</p>
-      <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ files.length }}</span>
-      <div class="flex-grow" />
-      <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobookId}/edit`" class="mr-4">
-        <ui-btn small color="primary">Manage Tracks</ui-btn>
-      </nuxt-link>
-      <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
-        <span class="material-icons text-4xl">expand_more</span>
-      </div>
-    </div>
-    <transition name="slide">
-      <div class="w-full" v-show="showTracks">
-        <table class="text-sm tracksTable">
-          <tr class="font-book">
-            <th class="text-left">Filename</th>
-            <th class="text-left">Size</th>
-            <th class="text-left">Duration</th>
-            <th class="text-left">Notes</th>
-          </tr>
-          <template v-for="track in files">
-            <tr :key="track.path">
-              <td class="font-book pl-2">
-                {{ track.filename }}
-              </td>
-              <td class="font-mono">
-                {{ $bytesPretty(track.size) }}
-              </td>
-              <td class="font-mono">
-                {{ $secondsToTimestamp(track.duration) }}
-              </td>
-              <td class="text-xs">
-                <p>{{ track.error || '' }}</p>
-              </td>
-            </tr>
-          </template>
-        </table>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    files: {
-      type: Array,
-      default: () => []
-    },
-    audiobookId: String
-  },
-  data() {
-    return {
-      showTracks: false
-    }
-  },
-  computed: {
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    }
-  },
-  methods: {
-    clickBar() {
-      this.showTracks = !this.showTracks
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/tables/BackupsTable.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="text-center mt-4">
     <div class="flex py-4">
-      <ui-file-input ref="fileInput" class="mr-2" accept=".audiobookshelf" @change="backupUploaded">Upload Backup</ui-file-input>
+      <ui-file-input ref="fileInput" class="mr-2" accept=".audiobookshelf" @change="backupUploaded">{{ $strings.ButtonUploadBackup }}</ui-file-input>
       <div class="flex-grow" />
-      <ui-btn :loading="isBackingUp" @click="clickCreateBackup">Create Backup</ui-btn>
+      <ui-btn :loading="isBackingUp" @click="clickCreateBackup">{{ $strings.ButtonCreateBackup }}</ui-btn>
     </div>
     <div class="relative">
       <table id="backups">
         <tr>
-          <th>File</th>
-          <th class="hidden sm:table-cell w-32 md:w-56">Datetime</th>
-          <th class="hidden sm:table-cell w-20 md:w-28">Size</th>
+          <th>{{ $strings.LabelFile }}</th>
+          <th class="hidden sm:table-cell w-32 md:w-56">{{ $strings.LabelDatetime }}</th>
+          <th class="hidden sm:table-cell w-20 md:w-28">{{ $strings.LabelSize }}</th>
           <th class="w-36"></th>
         </tr>
         <tr v-for="backup in backups" :key="backup.id" :class="!backup.serverVersion ? 'bg-error bg-opacity-10' : ''">
@@ -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)">{{ $strings.ButtonRestore }}</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">
@@ -33,7 +33,7 @@
           </td>
         </tr>
         <tr v-if="!backups.length" class="staticrow">
-          <td colspan="4" class="text-lg">No Backups</td>
+          <td colspan="4" class="text-lg">{{ $strings.MessageNoBackups }}</td>
         </tr>
       </table>
       <div v-show="processing" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-25 flex items-center justify-center">
@@ -43,16 +43,14 @@
 
     <prompt-dialog v-model="showConfirmApply" :width="675">
       <div v-if="selectedBackup" class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-error text-lg font-semibold">Important Notice!</p>
-        <p class="text-base py-1">Applying a backup will overwrite users, user progress, book details, settings, and covers stored in metadata with the backed up data.</p>
-        <p class="text-base py-1">Backups <strong>do not</strong> modify any files in your library folders, only data in the audiobookshelf created <span class="font-mono">/config</span> and <span class="font-mono">/metadata</span> directories. If you have enabled server settings to store cover art and metadata in your library folders then those are not backup up or overwritten.</p>
-        <p class="text-base py-1">All clients using your server will be automatically refreshed.</p>
+        <p class="text-error text-lg font-semibold">{{ $strings.MessageImportantNotice }}</p>
+        <p class="text-base py-1" v-html="$strings.MessageRestoreBackupWarning" />
 
-        <p class="text-lg text-center my-8">Are you sure you want to apply the backup created on {{ selectedBackup.datePretty }}?</p>
+        <p class="text-lg text-center my-8">{{ $strings.MessageRestoreBackupConfirm }} {{ selectedBackup.datePretty }}?</p>
         <div class="flex px-1 items-center">
-          <ui-btn color="primary" @click="showConfirmApply = false">Nevermind</ui-btn>
+          <ui-btn color="primary" @click="showConfirmApply = false">{{ $strings.ButtonNevermind }}</ui-btn>
           <div class="flex-grow" />
-          <ui-btn color="success" @click="confirm">Apply Backup</ui-btn>
+          <ui-btn color="success" @click="confirm">{{ $strings.ButtonRestore }}</ui-btn>
         </div>
       </div>
     </prompt-dialog>
@@ -90,23 +88,23 @@ export default {
         .catch((error) => {
           this.isBackingUp = false
           console.error('Failed', error)
-          this.$toast.error('Failed to apply backup')
+          this.$toast.error(this.$strings.ToastBackupRestoreFailed)
         })
     },
     deleteBackupClick(backup) {
-      if (confirm(`Are you sure you want to delete backup for ${backup.datePretty}?`)) {
+      if (confirm(this.$getString('MessageConfirmDeleteBackup', [backup.datePretty]))) {
         this.processing = true
         this.$axios
           .$delete(`/api/backups/${backup.id}`)
           .then((backups) => {
             console.log('Backup deleted', backups)
             this.$store.commit('setBackups', backups)
-            this.$toast.success(`Backup deleted`)
+            this.$toast.success(this.$strings.ToastBackupDeleteSuccess)
             this.processing = false
           })
           .catch((error) => {
             console.error(error)
-            this.$toast.error('Failed to delete backup')
+            this.$toast.error(this.$strings.ToastBackupDeleteFailed)
             this.processing = false
           })
       }
@@ -121,13 +119,13 @@ export default {
         .$post('/api/backups')
         .then((backups) => {
           this.isBackingUp = false
-          this.$toast.success('Backup Successful')
+          this.$toast.success(this.$strings.ToastBackupCreateSuccess)
           this.$store.commit('setBackups', backups)
         })
         .catch((error) => {
           this.isBackingUp = false
           console.error('Failed', error)
-          this.$toast.error('Backup Failed')
+          this.$toast.error(this.$strings.ToastBackupCreateFailed)
         })
     },
     backupUploaded(file) {
@@ -141,12 +139,12 @@ export default {
         .then((result) => {
           console.log('Upload backup result', result)
           this.$store.commit('setBackups', result)
-          this.$toast.success('Backup upload success')
+          this.$toast.success(this.$strings.ToastBackupUploadSuccess)
           this.processing = false
         })
         .catch((error) => {
           console.error(error)
-          var errorMessage = error.response && error.response.data ? error.response.data : 'Failed to upload backup'
+          var errorMessage = error.response && error.response.data ? error.response.data : this.$strings.ToastBackupUploadFailed
           this.$toast.error(errorMessage)
           this.processing = false
         })

client/components/tables/ChaptersTable.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full my-2">
     <div class="w-full bg-primary px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
-      <p class="pr-4">Chapters</p>
+      <p class="pr-4">{{ $strings.HeaderChapters }}</p>
       <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ chapters.length }}</span>
       <div class="flex-grow" />
-      <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2">Edit Chapters</ui-btn>
+      <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2">{{ $strings.ButtonEditChapters }}</ui-btn>
       <div v-if="!keepOpen" class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
         <span class="material-icons text-4xl">expand_more</span>
       </div>
@@ -13,9 +13,9 @@
       <table class="text-sm tracksTable" v-show="expanded || keepOpen">
         <tr class="font-book">
           <th class="text-left w-16"><span class="px-4">Id</span></th>
-          <th class="text-left">Title</th>
-          <th class="text-center">Start</th>
-          <th class="text-center">End</th>
+          <th class="text-left">{{ $strings.LabelTitle }}</th>
+          <th class="text-center">{{ $strings.LabelStart }}</th>
+          <th class="text-center">{{ $strings.LabelEnd }}</th>
         </tr>
         <tr v-for="chapter in chapters" :key="chapter.id">
           <td class="text-left">
@@ -72,11 +72,23 @@ export default {
       this.expanded = !this.expanded
     },
     goToTimestamp(time) {
+      const queueItem = {
+        libraryItemId: this.libraryItemId,
+        libraryId: this.libraryItem.libraryId,
+        episodeId: null,
+        title: this.metadata.title,
+        subtitle: this.metadata.authors.map((au) => au.name).join(', '),
+        caption: '',
+        duration: this.media.duration || null,
+        coverPath: this.media.coverPath || null
+      }
+
       if (this.$store.getters['getIsMediaStreaming'](this.libraryItemId)) {
         this.$eventBus.$emit('play-item', {
           libraryItemId: this.libraryItemId,
           episodeId: null,
-          startTime: time
+          startTime: time,
+          queueItems: [queueItem]
         })
       } else {
         const payload = {
@@ -86,7 +98,8 @@ export default {
               this.$eventBus.$emit('play-item', {
                 libraryItemId: this.libraryItemId,
                 episodeId: null,
-                startTime: time
+                startTime: time,
+                queueItems: [queueItem]
               })
             }
           },

client/components/tables/CollectionBooksTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full bg-primary bg-opacity-40">
     <div class="w-full h-14 flex items-center px-4 md:px-6 py-2 bg-primary">
-      <p class="pr-4">Collection List</p>
+      <p class="pr-4">{{ $strings.HeaderCollectionItems }}</p>
 
       <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
         <span class="text-xs md:text-sm font-mono leading-none">{{ books.length }}</span>
@@ -52,11 +52,8 @@ export default {
     }
   },
   computed: {
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
     bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     totalDuration() {
       var _total = 0

client/components/tables/LibraryFilesTable.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="w-full my-2">
     <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
-      <p class="pr-2 md:pr-4">Library Files</p>
+      <p class="pr-2 md:pr-4">{{ $strings.HeaderLibraryFiles }}</p>
       <div class="h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
         <span class="text-sm font-mono">{{ files.length }}</span>
       </div>
       <div class="flex-grow" />
-      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
+      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
       <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
         <span class="material-icons text-4xl">expand_more</span>
       </div>
@@ -15,10 +15,10 @@
       <div class="w-full" v-show="showFiles">
         <table class="text-sm tracksTable">
           <tr class="font-book">
-            <th class="text-left px-4">Path</th>
-            <th class="text-left w-24 min-w-24">Size</th>
-            <th class="text-left px-4 w-24">Filetype</th>
-            <th v-if="userCanDownload && !isMissing" class="text-center w-20">Download</th>
+            <th class="text-left px-4">{{ $strings.LabelPath }}</th>
+            <th class="text-left w-24 min-w-24">{{ $strings.LabelSize }}</th>
+            <th class="text-left px-4 w-24">{{ $strings.LabelType }}</th>
+            <th v-if="userCanDownload && !isMissing" class="text-center w-20">{{ $strings.LabelDownload }}</th>
           </tr>
           <template v-for="file in files">
             <tr :key="file.path">
@@ -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>

client/components/tables/TracksTable.vue

@@ -7,9 +7,9 @@
       </div>
       <!-- <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ tracks.length }}</span> -->
       <div class="flex-grow" />
-      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
+      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
       <nuxt-link v-if="userCanUpdate && !isFile" :to="`/audiobook/${libraryItemId}/edit`" class="mr-2 md:mr-4" @mousedown.prevent>
-        <ui-btn small color="primary">Manage Tracks</ui-btn>
+        <ui-btn small color="primary">{{ $strings.ButtonManageTracks }}</ui-btn>
       </nuxt-link>
       <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
         <span class="material-icons text-4xl">expand_more</span>
@@ -20,10 +20,18 @@
         <table class="text-sm tracksTable">
           <tr class="font-book">
             <th class="w-10">#</th>
-            <th class="text-left">Filename</th>
-            <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 class="text-left">{{ $strings.LabelFilename }}</th>
+            <th class="text-left w-20">{{ $strings.LabelSize }}</th>
+            <th class="text-left w-20">{{ $strings.LabelDuration }}</th>
+            <th v-if="userCanDownload" class="text-center w-20">{{ $strings.LabelDownload }}</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() {}

client/components/tables/UploadedFilesTable.vue

@@ -12,9 +12,9 @@
       <div class="w-full" v-show="expand">
         <table class="text-sm tracksTable">
           <tr class="font-book">
-            <th class="text-left">Filename</th>
-            <th class="text-left">Size</th>
-            <th class="text-left">Type</th>
+            <th class="text-left">{{ $strings.LabelFilename }}</th>
+            <th class="text-left">{{ $strings.LabelSize }}</th>
+            <th class="text-left">{{ $strings.LabelType }}</th>
           </tr>
           <template v-for="file in files">
             <tr :key="file.path">

client/components/tables/UsersTable.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
-      <h1 class="text-xl">Users</h1>
+      <h1 class="text-xl">{{ $strings.HeaderUsers }}</h1>
       <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
     </div>
-    <!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> -->
+
     <div class="text-center">
       <table id="accounts">
         <tr>
-          <th>Username</th>
-          <th class="w-20">Type</th>
-          <th class="hidden lg:table-cell">Activity</th>
-          <th class="w-32 hidden sm:table-cell">Last Seen</th>
-          <th class="w-32 hidden sm:table-cell">Created</th>
+          <th>{{ $strings.LabelUsername }}</th>
+          <th class="w-20">{{ $strings.LabelAccountType }}</th>
+          <th class="hidden lg:table-cell">{{ $strings.LabelActivity }}</th>
+          <th class="w-32 hidden sm:table-cell">{{ $strings.LabelLastSeen }}</th>
+          <th class="w-32 hidden sm:table-cell">{{ $strings.LabelCreatedAt }}</th>
           <th class="w-32"></th>
         </tr>
         <tr v-for="user in users" :key="user.id" class="cursor-pointer" :class="user.isActive ? '' : 'bg-error bg-opacity-20'" @click="$router.push(`/config/users/${user.id}`)">
@@ -88,7 +88,7 @@ export default {
   methods: {
     deleteUserClick(user) {
       if (this.isDeletingUser) return
-      if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
+      if (confirm(this.$getString('MessageRemoveUserWarning', [user.username]))) {
         this.isDeletingUser = true
         this.$axios
           .$delete(`/api/users/${user.id}`)
@@ -97,12 +97,12 @@ export default {
             if (data.error) {
               this.$toast.error(data.error)
             } else {
-              this.$toast.success('User deleted')
+              this.$toast.success(this.$strings.ToastUserDeleteSuccess)
             }
           })
           .catch((error) => {
             console.error('Failed to delete user', error)
-            this.$toast.error('Failed to delete user')
+            this.$toast.error(this.$strings.ToastUserDeleteFailed)
             this.isDeletingUser = false
           })
       }
@@ -164,8 +164,8 @@ export default {
     }
 
     if (this.$root.socket) {
-      this.$root.socket.off('user_added', this.newUserAdded)
-      this.$root.socket.off('user_updated', this.userUpdated)
+      this.$root.socket.off('user_added', this.addUpdateUser)
+      this.$root.socket.off('user_updated', this.addUpdateUser)
       this.$root.socket.off('user_removed', this.userRemoved)
     }
   }
@@ -208,6 +208,6 @@ export default {
   font-weight: 600;
   padding-top: 5px;
   padding-bottom: 5px;
-  background-color: #272727
+  background-color: #272727;
 }
 </style>

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,28 +14,30 @@
           </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' : '-translate-x-24'">
+    <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">
-        <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
+        <ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
           <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
         </ui-tooltip>
-        <div class="mx-1" :class="isHovering ? '' : 'ml-6'">
+        <div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
           <ui-icon-btn icon="edit" borderless @click="clickEdit" />
         </div>
-        <div class="mx-1">
+        <div v-if="userCanDelete" class="mx-1">
           <ui-icon-btn icon="close" borderless @click="removeClick" />
         </div>
       </div>
@@ -71,6 +73,11 @@ export default {
     }
   },
   computed: {
+    translateDistance() {
+      if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
+      else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
+      return '-translate-x-24'
+    },
     media() {
       return this.book.media || {}
     },
@@ -83,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
@@ -108,11 +115,17 @@ 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
       return this.coverSize
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {
@@ -124,8 +137,22 @@ export default {
       this.isHovering = false
     },
     playClick() {
+      const queueItems = [
+        {
+          libraryItemId: this.book.id,
+          libraryId: this.book.libraryId,
+          episodeId: null,
+          title: this.bookTitle,
+          subtitle: this.bookAuthors.map((au) => au.name).join(', '),
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      ]
+
       this.$eventBus.$emit('play-item', {
-        libraryItemId: this.book.id
+        libraryItemId: this.book.id,
+        queueItems
       })
     },
     clickEdit() {
@@ -140,12 +167,12 @@ export default {
         .$patch(`/api/me/progress/${this.book.id}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
           this.isProcessingReadUpdate = false
-          this.$toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
         })
     },
     removeClick() {
@@ -155,12 +182,12 @@ export default {
         .$delete(`/api/collections/${this.collectionId}/book/${this.book.id}`)
         .then((updatedCollection) => {
           console.log(`Book removed from collection`, updatedCollection)
-          this.$toast.success('Book removed from collection')
+          this.$toast.success(this.$strings.ToastRemoveItemFromCollectionSuccess)
           this.processingRemove = false
         })
         .catch((error) => {
           console.error('Failed to remove book from collection', error)
-          this.$toast.error('Failed to remove book from collection')
+          this.$toast.error(this.$strings.ToastRemoveItemFromCollectionFailed)
           this.processingRemove = false
         })
     }

client/components/tables/library/LibrariesTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="librariesTable" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
-      <h1 class="text-xl">Libraries</h1>
+      <h1 class="text-xl">{{ $strings.HeaderLibraries }}</h1>
       <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
@@ -14,12 +14,16 @@
       </template>
     </draggable>
     <div v-if="!libraries.length" class="pb-4">
-      <ui-btn @click="clickAddLibrary">Add your first library</ui-btn>
+      <ui-btn @click="clickAddLibrary">{{ $strings.ButtonAddYourFirstLibrary }}</ui-btn>
     </div>
 
-    <p v-if="libraries.length" class="text-xs mt-4 text-gray-200">*<strong>Force Re-Scan</strong> will scan all files again like a fresh scan. Audio file ID3 tags, OPF files, and text files will be probed/parsed and used for book details.</p>
+    <p v-if="libraries.length" class="text-xs mt-4 text-gray-200">
+      *<strong>{{ $strings.ButtonForceReScan }}</strong> {{ $strings.MessageForceReScanDescription }}
+    </p>
 
-    <p v-if="libraries.length && libraries.some((li) => li.mediaType === 'book')" class="text-xs mt-4 text-gray-200">**<strong>Match Books</strong> will attempt to match books in library with a book from the selected search provider and fill in empty details and cover art. Does not overwrite details.</p>
+    <p v-if="libraries.length && libraries.some((li) => li.mediaType === 'book')" class="text-xs mt-4 text-gray-200">
+      **<strong>{{ $strings.ButtonMatchBooks }}</strong> {{ $strings.MessageMatchBooksDescription }}
+    </p>
   </div>
 </template>
 

client/components/tables/library/LibraryItem.vue

@@ -1,16 +1,16 @@
 <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>
     <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
     <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan" class="hidden md:block" small color="success" @click.stop="scan">Scan</ui-btn>
-    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2 hidden md:block" @click.stop="forceScan">Force Re-Scan</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan" class="hidden md:block" small color="success" @click.stop="scan">{{ $strings.ButtonScan }}</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2 hidden md:block" @click.stop="forceScan">{{ $strings.ButtonForceReScan }}</ui-btn>
 
-    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2 hidden md:block" @click.stop="matchAll">Match Books</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2 hidden md:block" @click.stop="matchAll">{{ $strings.ButtonMatchBooks }}</ui-btn>
 
     <span v-if="isHovering && !libraryScan" class="!hidden md:!block material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
     <span v-if="!libraryScan && isHovering && !isDeleting" class="!hidden md:!block material-icons text-xl text-gray-300 ml-3 hover:text-gray-50 cursor-pointer" @click.stop="deleteClick">delete</span>
@@ -66,22 +66,22 @@ export default {
     mobileMenuItems() {
       const items = [
         {
-          text: 'Scan',
+          text: this.$strings.ButtonScan,
           value: 'scan'
         },
         {
-          text: 'Force Re-Scan',
+          text: this.$strings.ButtonForceReScan,
           value: 'force-scan'
         }
       ]
       if (this.isBookLibrary) {
         items.push({
-          text: 'Match Books',
+          text: this.$strings.ButtonMatchBooks,
           value: 'match-books'
         })
       }
       items.push({
-        text: 'Delete',
+        text: this.$strings.ButtonDelete,
         value: 'delete'
       })
       return items
@@ -122,28 +122,28 @@ export default {
       this.$store
         .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id })
         .then(() => {
-          this.$toast.success('Library scan started')
+          this.$toast.success(this.$strings.ToastLibraryScanStarted)
         })
         .catch((error) => {
           console.error('Failed to start scan', error)
-          this.$toast.error('Failed to start scan')
+          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
         })
     },
     forceScan() {
-      if (confirm(`Force Re-Scan will scan all files again like a fresh scan. Audio file ID3 tags, OPF files, and text files will be probed/parsed to be used for the library item.\n\nAre you sure you want to force re-scan?`)) {
+      if (confirm(this.$strings.MessageConfirmForceReScan)) {
         this.$store
           .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
           .then(() => {
-            this.$toast.success('Library scan started')
+            this.$toast.success(this.$strings.ToastLibraryScanStarted)
           })
           .catch((error) => {
             console.error('Failed to start scan', error)
-            this.$toast.error('Failed to start scan')
+            this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
           })
       }
     },
     deleteClick() {
-      if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {
+      if (confirm(this.$getString('MessageConfirmDeleteLibrary', [this.library.name]))) {
         this.isDeleting = true
         this.$axios
           .$delete(`/api/libraries/${this.library.id}`)
@@ -152,12 +152,12 @@ export default {
             if (data.error) {
               this.$toast.error(data.error)
             } else {
-              this.$toast.success('Library deleted')
+              this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
             }
           })
           .catch((error) => {
             console.error('Failed to delete library', error)
-            this.$toast.error('Failed to delete library')
+            this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
             this.isDeleting = false
           })
       }

client/components/tables/podcast/EpisodeTableRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center h-24 cursor-pointer" @click="$emit('view', episode)">
+    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
       <div class="flex-grow px-2">
         <p class="text-sm font-semibold">
           {{ title }}
@@ -8,29 +8,37 @@
 
         <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
 
+        <div class="flex justify-between pt-2 max-w-xl">
+          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+        </div>
+
         <div class="flex items-center pt-2">
           <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
             <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
           </button>
 
-          <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
+          <button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="isQueued ? 'text-success' : ''" @click.stop="queueBtnClick">
+            <span class="material-icons-outlined">{{ isQueued ? 'playlist_add_check' : 'playlist_add' }}</span>
+          </button>
+
+          <ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
             <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
           </ui-tooltip>
-          <p v-if="episode.season" class="px-4 text-sm text-gray-300">Season #{{ episode.season }}</p>
-          <p v-if="episode.episode" class="px-4 text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="publishedAt" class="px-4 text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+
+          <ui-icon-btn v-if="userCanUpdate" icon="edit" borderless @click="clickEdit" />
+          <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
         </div>
       </div>
-      <div class="w-24 min-w-24" />
+      <div v-if="isHovering || isSelected || selectionMode" class="hidden md:block w-12 min-w-12" />
     </div>
-    <div class="w-24 min-w-24 -right-0 absolute top-0 h-full transform transition-transform" :class="!isHovering ? 'translate-x-32' : 'translate-x-0'">
+    <div v-if="isSelected || selectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
+    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !selectionMode ? 'translate-x-24' : 'translate-x-0'">
       <div class="flex h-full items-center">
         <div class="mx-1">
-          <ui-icon-btn v-if="userCanUpdate" icon="edit" borderless @click="clickEdit" />
-        </div>
-        <div class="mx-1">
-          <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
+          <ui-checkbox v-model="isSelected" @input="selectedUpdated" checkbox-bg="bg" />
         </div>
       </div>
     </div>
@@ -46,13 +54,15 @@ export default {
     episode: {
       type: Object,
       default: () => {}
-    }
+    },
+    selectionMode: Boolean
   },
   data() {
     return {
       isProcessingReadUpdate: false,
       processingRemove: false,
-      isHovering: false
+      isHovering: false,
+      isSelected: false
     }
   },
   computed: {
@@ -77,9 +87,18 @@ export default {
     duration() {
       return this.$secondsToTimestamp(this.episode.duration)
     },
+    libraryItemIdStreaming() {
+      return this.$store.getters['getLibraryItemIdStreaming']
+    },
+    isStreamingFromDifferentLibrary() {
+      return this.$store.getters['getIsStreamingFromDifferentLibrary']
+    },
     isStreaming() {
       return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
     },
+    isQueued() {
+      return this.$store.getters['getIsMediaQueued'](this.libraryItemId, this.episode.id)
+    },
     streamIsPlaying() {
       return this.$store.state.streamIsPlaying && this.isStreaming
     },
@@ -104,8 +123,17 @@ export default {
     }
   },
   methods: {
+    clickedEpisode() {
+      this.$emit('view', this.episode)
+    },
+    clickedSelectionBg() {
+      this.isSelected = !this.isSelected
+      this.selectedUpdated(this.isSelected)
+    },
+    selectedUpdated(value) {
+      this.$emit('selected', { isSelected: value, episode: this.episode })
+    },
     mouseover() {
-      // if (this.isDragging) return
       this.isHovering = true
     },
     mouseleave() {
@@ -118,10 +146,7 @@ export default {
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
-        this.$eventBus.$emit('play-item', {
-          libraryItemId: this.libraryItemId,
-          episodeId: this.episode.id
-        })
+        this.$emit('play', this.episode)
       }
     },
     toggleFinished(confirmed = false) {
@@ -147,16 +172,25 @@ export default {
         .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
         .then(() => {
           this.isProcessingReadUpdate = false
-          this.$toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
           this.isProcessingReadUpdate = false
-          this.$toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
         })
     },
     removeClick() {
       this.$emit('remove', this.episode)
+    },
+    queueBtnClick() {
+      if (this.isQueued) {
+        // Remove from queue
+        this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
+      } else {
+        // Add to queue
+        this.$emit('addToQueue', this.episode)
+      }
     }
   }
 }

client/components/tables/podcast/EpisodesTable.vue

@@ -1,16 +1,26 @@
 <template>
   <div class="w-full py-6">
     <div class="flex items-center mb-4">
-      <p class="text-lg mb-0 font-semibold">Episodes</p>
+      <p class="text-lg mb-0 font-semibold">{{ $strings.HeaderEpisodes }}</p>
       <div class="flex-grow" />
-      <controls-episode-sort-select v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+      <template v-if="isSelectionMode">
+        <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+          <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">{{ $getString('MessageRemoveEpisodes', [selectedEpisodes.length]) }}</ui-btn>
+        <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
+      </template>
+      <template v-else>
+        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-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>
+    <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
     <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-table-row :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" class="item" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" />
+      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" @addToQueue="addEpisodeToQueue" />
     </template>
 
-    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" :library-item="libraryItem" :episode="selectedEpisode" />
+    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
   </div>
 </template>
 
@@ -25,10 +35,14 @@ export default {
   data() {
     return {
       episodesCopy: [],
+      filterKey: 'incomplete',
       sortKey: 'publishedAt',
       sortDesc: true,
       selectedEpisode: null,
-      showPodcastRemoveModal: false
+      showPodcastRemoveModal: false,
+      selectedEpisodes: [],
+      episodesToRemove: [],
+      processing: false
     }
   },
   watch: {
@@ -37,6 +51,49 @@ export default {
     }
   },
   computed: {
+    sortItems() {
+      return [
+        {
+          text: this.$strings.LabelPubDate,
+          value: 'publishedAt'
+        },
+        {
+          text: this.$strings.LabelTitle,
+          value: 'title'
+        },
+        {
+          text: this.$strings.LabelSeason,
+          value: 'season'
+        },
+        {
+          text: this.$strings.LabelEpisode,
+          value: 'episode'
+        }
+      ]
+    },
+    filterItems() {
+      return [
+        {
+          value: 'all',
+          text: this.$strings.LabelShowAll
+        },
+        {
+          value: 'incomplete',
+          text: this.$strings.LabelIncomplete
+        },
+        {
+          value: 'complete',
+          text: this.$strings.LabelComplete
+        },
+        {
+          value: 'in_progress',
+          text: this.$strings.LabelInProgress
+        }
+      ]
+    },
+    isSelectionMode() {
+      return this.selectedEpisodes.length > 0
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -50,17 +107,120 @@ 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
+      return !this.selectedEpisodes.find((episode) => {
+        var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        return !itemProgress || !itemProgress.isFinished
       })
     }
   },
   methods: {
+    addEpisodeToQueue(episode) {
+      const queueItem = {
+        libraryItemId: this.libraryItem.id,
+        libraryId: this.libraryItem.libraryId,
+        episodeId: episode.id,
+        title: episode.title,
+        subtitle: this.mediaMetadata.title,
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+        duration: episode.audioFile.duration || null,
+        coverPath: this.media.coverPath || null
+      }
+      this.$store.commit('addItemToQueue', queueItem)
+    },
+    toggleBatchFinished() {
+      this.processing = true
+      var newIsFinished = !this.selectedIsFinished
+      var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
+        return {
+          libraryItemId: this.libraryItem.id,
+          episodeId: episode.id,
+          isFinished: newIsFinished
+        }
+      })
+
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.processing = false
+          this.clearSelected()
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          console.error('Failed to batch update read/not read', error)
+          this.processing = false
+        })
+    },
+    removeEpisodeModalToggled(val) {
+      if (!val) this.episodesToRemove = []
+    },
+    clearSelected() {
+      const episodeRows = this.$refs.episodeRow
+      if (episodeRows && episodeRows.length) {
+        for (const epRow of episodeRows) {
+          if (epRow) epRow.isSelected = false
+        }
+      }
+      this.selectedEpisodes = []
+    },
+    removeSelectedEpisodes() {
+      this.episodesToRemove = this.selectedEpisodes
+      this.showPodcastRemoveModal = true
+    },
+    episodeSelected({ isSelected, episode }) {
+      if (isSelected) {
+        this.selectedEpisodes.push(episode)
+      } else {
+        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
+      }
+    },
+    playEpisode(episode) {
+      const queueItems = []
+
+      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
+      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
+        const episode = episodesInListeningOrder[i]
+        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        if (!podcastProgress || !podcastProgress.isFinished) {
+          queueItems.push({
+            libraryItemId: this.libraryItem.id,
+            libraryId: this.libraryItem.libraryId,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: this.mediaMetadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            duration: episode.audioFile.duration || null,
+            coverPath: this.media.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItem.id,
+        episodeId: episode.id,
+        queueItems
+      })
+    },
     removeEpisode(episode) {
-      this.selectedEpisode = episode
+      this.episodesToRemove = [episode]
       this.showPodcastRemoveModal = true
     },
     editEpisode(episode) {