Merge branch 'refs/heads/master' into mf/rssInboundManager

# Conflicts:
#	client/components/widgets/PodcastDetailsEdit.vue
#	client/pages/config/rss-feeds.vue
#	client/strings/en-us.json
#	server/controllers/PodcastController.js
#	server/models/Podcast.js
#	server/routers/ApiRouter.js
#	server/utils/queries/libraryItemsPodcastFilters.js

.devcontainer/Dockerfile

@@ -10,6 +10,3 @@ RUN apt-get update && \
   DEBIAN_FRONTEND=noninteractive apt-get -y install --no-install-recommends \
     curl tzdata ffmpeg && \
   rm -rf /var/lib/apt/lists/*
-
-# Move tone executable to appropriate directory
-COPY --from=sandreas/tone:v0.1.5 /usr/local/bin/tone /usr/local/bin/

.devcontainer/dev.js

@@ -6,5 +6,5 @@ module.exports.config = {
   MetadataPath: Path.resolve('metadata'),
   FFmpegPath: '/usr/bin/ffmpeg',
   FFProbePath: '/usr/bin/ffprobe',
-  SkipBinariesCheck: true
-}
+  SkipBinariesCheck: false
+}

.github/ISSUE_TEMPLATE/config.yml

@@ -3,6 +3,3 @@ contact_links:
   - name: Discord
     url: https://discord.gg/HQgCbd6E75
     about: Ask questions, get help troubleshooting, and join the Abs community here.
-  - name: Matrix
-    url: https://matrix.to/#/#audiobookshelf:matrix.org
-    about: Ask questions, get help troubleshooting, and join the Abs community here.

.github/workflows/apply_comments.yaml

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

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

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

.github/workflows/docker-build.yml

@@ -70,6 +70,7 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
           context: .
           platforms: linux/amd64,linux/arm64
           push: true

.github/workflows/i18n-integration.yml

@@ -20,11 +20,11 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: '20'
 
       # The only argument is the `directory`, which is where the i18n files are
       # stored.
       - name: Run Update JSON Files action
-        uses: audiobookshelf/audiobookshelf-i18n-updater@v1.2.0
+        uses: audiobookshelf/audiobookshelf-i18n-updater@v1.3.0
         with:
-          directory: "client/strings/" # Adjust the directory path as needed
+          directory: 'client/strings/' # Adjust the directory path as needed

.github/workflows/integration-test.yml

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

.github/workflows/lint-openapi.yml

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

.gitignore

@@ -15,8 +15,10 @@
 /.nyc_output/
 /ffmpeg*
 /ffprobe*
+/unicode*
+/libnusqlite3*
 
 sw.*
 .DS_STORE
 .idea/*
-tailwind.compiled.css
+tailwind.compiled.css

Dockerfile

@@ -6,26 +6,40 @@ RUN npm ci && npm cache clean --force
 RUN npm run generate
 
 ### STAGE 1: Build server ###
-FROM sandreas/tone:v0.1.5 AS tone
 FROM node:20-alpine
 
 ENV NODE_ENV=production
 
 RUN apk update && \
-    apk add --no-cache --update \
-    curl \
-    tzdata \
-    ffmpeg \
-    make \
-    python3 \
-    g++ \
-    tini
+  apk add --no-cache --update \
+  curl \
+  tzdata \
+  ffmpeg \
+  make \
+  python3 \
+  g++ \
+  tini \
+  unzip
 
-COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
 COPY index.js package* /
 COPY server server
 
+ARG TARGETPLATFORM
+
+ENV NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
+ENV NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
+
+RUN case "$TARGETPLATFORM" in \
+  "linux/amd64") \
+  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-x64.zip" ;; \
+  "linux/arm64") \
+  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-arm64.zip" ;; \
+  *) echo "Unsupported platform: $TARGETPLATFORM" && exit 1 ;; \
+  esac && \
+  unzip /tmp/library.zip -d $NUSQLITE3_DIR && \
+  rm /tmp/library.zip
+
 RUN npm ci --only=production
 
 RUN apk del make python3 g++

build/debian/DEBIAN/preinst

@@ -2,7 +2,6 @@
 set -e
 set -o pipefail
 
-FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg"
 DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
 CONFIG_PATH="/etc/default/audiobookshelf"
 DEFAULT_PORT=13378
@@ -46,43 +45,11 @@ add_group() {
   fi
 }
 
-install_ffmpeg() {
-  echo "Starting FFMPEG Install"
-
-  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz --output-document=ffmpeg-git-amd64-static.tar.xz"
-  WGET_TONE="wget https://github.com/sandreas/tone/releases/download/v0.1.5/tone-0.1.5-linux-x64.tar.gz --output-document=tone-0.1.5-linux-x64.tar.gz"
-
-  if ! cd "$FFMPEG_INSTALL_DIR"; then
-    echo "Creating ffmpeg install dir at $FFMPEG_INSTALL_DIR"
-    mkdir "$FFMPEG_INSTALL_DIR"
-    chown -R 'audiobookshelf:audiobookshelf' "$FFMPEG_INSTALL_DIR"
-    cd "$FFMPEG_INSTALL_DIR"
-  fi
-
-  $WGET
-  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1 --no-same-owner
-  rm ffmpeg-git-amd64-static.tar.xz
-
-  # Temp downloading tone library to the ffmpeg dir
-  echo "Getting tone.."
-  $WGET_TONE
-  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1 --no-same-owner
-  rm tone-0.1.5-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
@@ -96,9 +63,6 @@ setup_config() {
 
     config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
 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"
 
@@ -115,5 +79,3 @@ add_group 'audiobookshelf' ''
 add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
 
 setup_config
-
-install_ffmpeg

build/linuxpackager

@@ -48,7 +48,7 @@ Description: $DESCRIPTION"
 echo "$controlfile" > dist/debian/DEBIAN/control;
 
 # Package debian
-pkg -t node18-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+pkg -t node20-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
 
 fakeroot dpkg-deb -Zxz --build dist/debian
 

client/assets/fonts.css

@@ -1,19 +1,12 @@
 @font-face {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
-  src: url(~static/fonts/MaterialIcons.woff2) format('woff2');
+  src: url(~static/fonts/MaterialSymbolsRounded.woff2) format('woff2');
 }
 
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(~static/fonts/MaterialIconsOutlined.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
+.material-symbols {
+  font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
   line-height: 1;
@@ -27,26 +20,9 @@
   vertical-align: top;
 }
 
-.material-icons:not([class*="text-"]) {
-  font-size: 1.5rem;
-}
-
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-outlined:not([class*="text-"]) {
-  font-size: 1.5rem;
+.material-symbols.fill {
+  font-variation-settings:
+    'FILL' 1
 }
 
 /* cyrillic-ext */
@@ -317,4 +293,4 @@
   font-display: swap;
   src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}

client/components/app/Appbar.vue

@@ -16,7 +16,7 @@
         <div class="flex-grow" />
 
         <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
-          <span class="material-icons-outlined text-2xl text-warning text-opacity-50"> cast </span>
+          <span class="material-symbols text-2xl text-warning text-opacity-50"> cast </span>
         </ui-tooltip>
         <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
           <google-cast-launcher></google-cast-launcher>
@@ -26,19 +26,19 @@
 
         <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
-            <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
+            <span class="material-symbols text-2xl" aria-label="User Stats" role="button">&#xe01d;</span>
           </ui-tooltip>
         </nuxt-link>
 
         <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.ButtonUpload" direction="bottom" class="flex items-center">
-            <span class="material-icons text-2xl" aria-label="Upload Media" role="button">upload</span>
+            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">&#xf09b;</span>
           </ui-tooltip>
         </nuxt-link>
 
         <nuxt-link v-if="userIsAdminOrUp" to="/config" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderSettings" direction="bottom" class="flex items-center">
-            <span class="material-icons text-2xl" aria-label="System Settings" role="button">settings</span>
+            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">&#xe8b8;</span>
           </ui-tooltip>
         </nuxt-link>
 
@@ -47,7 +47,7 @@
             <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-xl text-gray-100">person</span>
+            <span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
           </span>
         </nuxt-link>
       </div>
@@ -55,7 +55,7 @@
         <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}</h1>
         <div class="flex-grow" />
         <ui-btn v-if="!isPodcastLibrary && selectedMediaItemsArePlayable" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playSelectedItems">
-          <span class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+          <span class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
           {{ $strings.ButtonPlay }}
         </ui-btn>
         <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
@@ -76,7 +76,7 @@
         <ui-context-menu-dropdown v-if="contextMenuItems.length && !processingBatch" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
 
         <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom" class="flex items-center">
-          <span class="material-icons text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+          <span class="material-symbols text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
         </ui-tooltip>
       </div>
     </div>
@@ -170,13 +170,13 @@ export default {
 
       if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
         options.push({
-          text: 'Quick Embed Metadata',
+          text: this.$strings.ButtonQuickEmbedMetadata,
           action: 'quick-embed'
         })
       }
 
       options.push({
-        text: 'Re-Scan',
+        text: this.$strings.ButtonReScan,
         action: 'rescan'
       })
 
@@ -264,7 +264,6 @@ export default {
       libraryItems.forEach((item) => {
         let subtitle = ''
         if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
-        else if (item.mediaType === 'music') subtitle = item.media.metadata.artists.join(', ')
         queueItems.push({
           libraryItemId: item.id,
           libraryId: item.libraryId,
@@ -332,13 +331,13 @@ export default {
                 libraryItemIds: this.selectedMediaItems.map((i) => i.id)
               })
               .then(() => {
-                this.$toast.success('Batch delete success')
+                this.$toast.success(this.$strings.ToastBatchDeleteSuccess)
                 this.$store.commit('globals/resetSelectedMediaItems', [])
                 this.$eventBus.$emit('bookshelf_clear_selection')
               })
               .catch((error) => {
                 console.error('Batch delete failed', error)
-                this.$toast.error('Batch delete failed')
+                this.$toast.error(this.$strings.ToastBatchDeleteFailed)
               })
               .finally(() => {
                 this.$store.commit('setProcessingBatch', false)

client/components/app/BookShelfCategorized.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
+  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <!-- Cover size widget -->
     <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
 
@@ -11,31 +11,19 @@
       </div>
     </div>
     <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
-      <p class="text-center text-xl py-4">No results for query</p>
+      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
     </div>
     <!-- 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'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :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>
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
+      <template v-for="(shelf, index) in supportedShelves">
+        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
-        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-episode-slider>
-        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-series-slider>
-        <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-authors-slider>
-        <widgets-narrators-slider v-else-if="shelf.type === 'narrators'" :key="index + '.'" :items="shelf.entities" :height="100 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-narrators-slider>
       </template>
     </div>
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
-      <template v-for="(shelf, index) in shelves">
+      <template v-for="(shelf, index) in supportedShelves">
         <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" @selectEntity="(payload) => selectEntity(payload, index)" />
       </template>
     </div>
@@ -63,6 +51,9 @@ export default {
     }
   },
   computed: {
+    supportedShelves() {
+      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
+    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
@@ -90,8 +81,7 @@ export default {
       return this.coverAspectRatio == 1
     },
     sizeMultiplier() {
-      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.bookCoverWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
@@ -177,8 +167,19 @@ export default {
       this.loaded = true
     },
     async fetchCategories() {
+      // Sets the limit for the number of items to be displayed based on the viewport width.
+      const viewportWidth = window.innerWidth
+      let limit
+      if (viewportWidth >= 3240) {
+        limit = 15
+      } else if (viewportWidth >= 2880 && viewportWidth < 3240) {
+        limit = 12
+      }
+
+      const limitQuery = limit ? `&limit=${limit}` : ''
+
       const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete`)
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share${limitQuery}`)
         .then((data) => {
           return data
         })
@@ -346,6 +347,13 @@ export default {
     libraryItemsAdded(libraryItems) {
       console.log('libraryItems added', libraryItems)
 
+      // First items added to library
+      const isThisLibrary = libraryItems.some((li) => li.libraryId === this.currentLibraryId)
+      if (!this.shelves.length && !this.search && isThisLibrary) {
+        this.fetchCategories()
+        return
+      }
+
       const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
       if (!recentlyAddedShelf) return
 
@@ -418,6 +426,36 @@ export default {
         }
       })
     },
+    shareOpen(mediaItemShare) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.media.id === mediaItemShare.mediaItemId) {
+              return {
+                ...ent,
+                mediaItemShare
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
+    shareClosed(mediaItemShare) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.media.id === mediaItemShare.mediaItemId) {
+              return {
+                ...ent,
+                mediaItemShare: null
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
     initListeners() {
       if (this.$root.socket) {
         this.$root.socket.on('user_updated', this.userUpdated)
@@ -429,6 +467,8 @@ export default {
         this.$root.socket.on('items_updated', this.libraryItemsUpdated)
         this.$root.socket.on('items_added', this.libraryItemsAdded)
         this.$root.socket.on('episode_added', this.episodeAdded)
+        this.$root.socket.on('share_open', this.shareOpen)
+        this.$root.socket.on('share_closed', this.shareClosed)
       } else {
         console.error('Error socket not initialized')
       }
@@ -444,6 +484,8 @@ export default {
         this.$root.socket.off('items_updated', this.libraryItemsUpdated)
         this.$root.socket.off('items_added', this.libraryItemsAdded)
         this.$root.socket.off('episode_added', this.episodeAdded)
+        this.$root.socket.off('share_open', this.shareOpen)
+        this.$root.socket.off('share_closed', this.shareClosed)
       } else {
         console.error('Error socket not initialized')
       }

client/components/app/BookShelfRow.vue

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

client/components/app/BookShelfToolbar.vue

@@ -24,13 +24,13 @@
       </nuxt-link>
       <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="flex-grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
-        <span v-else class="material-icons-outlined text-lg">queue_music</span>
+        <span v-else class="material-symbols text-lg">&#xe03d;</span>
       </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
-        <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
+        <span v-else class="material-symbols text-lg">&#xe431;</span>
       </nuxt-link>
-      <nuxt-link v-if="isBookLibrary" :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'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/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
@@ -50,10 +50,9 @@
           {{ 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>
+          <span class="font-mono">{{ $formatNumber(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" />
 
         <!-- RSS feed -->
         <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
@@ -63,14 +62,11 @@
         <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
       </template>
       <!-- library & collections page -->
-      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
-        <p class="hidden md:block">{{ numShowing }} {{ entityName }}</p>
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
 
         <div class="flex-grow hidden sm:inline-block" />
 
-        <!-- collapse series checkbox -->
-        <ui-checkbox v-if="isLibraryPage && isBookLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
-
         <!-- library filter select -->
         <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
 
@@ -84,7 +80,7 @@
         <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
 
         <!-- issues page remove all button -->
-        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
+        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ $formatNumber(numShowing) }} {{ entityName }}</ui-btn>
 
         <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
@@ -93,14 +89,22 @@
         <div class="flex-grow" />
         <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
         <div class="flex-grow" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- authors page -->
-      <template v-else-if="page === 'authors'">
-        <div class="flex-grow" />
-        <ui-btn v-if="userCanUpdate && authors && authors.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+      <template v-else-if="isAuthorsPage">
+        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
+
+        <div class="flex-grow hidden sm:inline-block" />
+        <ui-btn v-if="userCanUpdate && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
 
         <!-- author sort select -->
-        <controls-sort-select v-if="authors && authors.length" v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
+        <controls-sort-select v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
+      </template>
+      <!-- home page -->
+      <template v-else-if="isHome">
+        <div class="flex-grow" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
     </div>
   </div>
@@ -115,11 +119,7 @@ export default {
       type: Object,
       default: () => null
     },
-    searchQuery: String,
-    authors: {
-      type: Array,
-      default: () => []
-    }
+    searchQuery: String
   },
   data() {
     return {
@@ -151,11 +151,14 @@ export default {
 
       if (this.isSeriesRemovedFromContinueListening) {
         items.push({
-          text: 'Re-Add Series to Continue Listening',
+          text: this.$strings.LabelReAddSeriesToContinueListening,
           action: 're-add-to-continue-listening'
         })
       }
 
+      this.addSubtitlesMenuItem(items)
+      this.addCollapseSubSeriesMenuItem(items)
+
       return items
     },
     seriesSortItems() {
@@ -183,6 +186,10 @@ export default {
         {
           text: this.$strings.LabelTotalDuration,
           value: 'totalDuration'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
         }
       ]
     },
@@ -237,9 +244,6 @@ export default {
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
-    isMusicLibrary() {
-      return this.currentLibraryMediaType === 'music'
-    },
     isLibraryPage() {
       return this.page === ''
     },
@@ -262,7 +266,7 @@ export default {
       return this.$route.name === 'library-library-podcast-latest'
     },
     isAuthorsPage() {
-      return this.$route.name === 'library-library-authors'
+      return this.page === 'authors'
     },
     isAlbumsPage() {
       return this.page === 'albums'
@@ -272,13 +276,13 @@ export default {
     },
     entityName() {
       if (this.isAlbumsPage) return 'Albums'
-      if (this.isMusicLibrary) return 'Tracks'
 
       if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
       if (!this.page) return this.$strings.LabelBooks
       if (this.isSeriesPage) return this.$strings.LabelSeries
       if (this.isCollectionsPage) return this.$strings.LabelCollections
       if (this.isPlaylistsPage) return this.$strings.LabelPlaylists
+      if (this.isAuthorsPage) return this.$strings.LabelAuthors
       return ''
     },
     seriesId() {
@@ -318,11 +322,14 @@ export default {
 
       if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
         items.push({
-          text: 'Export OPML',
+          text: this.$strings.LabelExportOPML,
           action: 'export-opml'
         })
       }
 
+      this.addSubtitlesMenuItem(items)
+      this.addCollapseSeriesMenuItem(items)
+
       return items
     },
     showPlaylists() {
@@ -330,9 +337,98 @@ export default {
     }
   },
   methods: {
+    addSubtitlesMenuItem(items) {
+      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
+        if (this.settings.showSubtitles) {
+          items.push({
+            text: this.$strings.LabelHideSubtitles,
+            action: 'hide-subtitles'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelShowSubtitles,
+            action: 'show-subtitles'
+          })
+        }
+      }
+    },
+    addCollapseSeriesMenuItem(items) {
+      if (this.isLibraryPage && this.isBookLibrary && !this.isBatchSelecting) {
+        if (this.settings.collapseSeries) {
+          items.push({
+            text: this.$strings.LabelExpandSeries,
+            action: 'expand-series'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelCollapseSeries,
+            action: 'collapse-series'
+          })
+        }
+      }
+    },
+    addCollapseSubSeriesMenuItem(items) {
+      if (this.selectedSeries && this.isBookLibrary && !this.isBatchSelecting) {
+        if (this.settings.collapseBookSeries) {
+          items.push({
+            text: this.$strings.LabelExpandSubSeries,
+            action: 'expand-sub-series'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelCollapseSubSeries,
+            action: 'collapse-sub-series'
+          })
+        }
+      }
+    },
+    handleSubtitlesAction(action) {
+      if (action === 'show-subtitles') {
+        this.settings.showSubtitles = true
+        this.updateShowSubtitles()
+        return true
+      }
+      if (action === 'hide-subtitles') {
+        this.settings.showSubtitles = false
+        this.updateShowSubtitles()
+        return true
+      }
+      return false
+    },
+    handleCollapseSeriesAction(action) {
+      if (action === 'collapse-series') {
+        this.settings.collapseSeries = true
+        this.updateCollapseSeries()
+        return true
+      }
+      if (action === 'expand-series') {
+        this.settings.collapseSeries = false
+        this.updateCollapseSeries()
+        return true
+      }
+      return false
+    },
+    handleCollapseSubSeriesAction(action) {
+      if (action === 'collapse-sub-series') {
+        this.settings.collapseBookSeries = true
+        this.updateCollapseSubSeries()
+        return true
+      }
+      if (action === 'expand-sub-series') {
+        this.settings.collapseBookSeries = false
+        this.updateCollapseSubSeries()
+        return true
+      }
+      return false
+    },
     contextMenuAction({ action }) {
       if (action === 'export-opml') {
         this.exportOPML()
+        return
+      } else if (this.handleSubtitlesAction(action)) {
+        return
+      } else if (this.handleCollapseSeriesAction(action)) {
+        return
       }
     },
     exportOPML() {
@@ -353,6 +449,10 @@ export default {
           return
         }
         this.markSeriesFinished()
+      } else if (this.handleSubtitlesAction(action)) {
+        return
+      } else if (this.handleCollapseSubSeriesAction(action)) {
+        return
       }
     },
     showOpenSeriesRSSFeed() {
@@ -368,46 +468,58 @@ export default {
       this.$axios
         .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
         .then(() => {
-          this.$toast.success('Series re-added to continue listening')
+          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
         })
         .catch((error) => {
           console.error('Failed to re-add series to continue listening', error)
-          this.$toast.error('Failed to re-add series to continue listening')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processingSeries = false
         })
     },
+    async fetchAllAuthors() {
+      // fetch all authors from the server, in the order that they are currently displayed
+      const response = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors?sort=${this.settings.authorSortBy}&desc=${this.settings.authorSortDesc}`)
+      return response.authors
+    },
     async matchAllAuthors() {
       this.processingAuthors = true
 
-      for (const author of this.authors) {
-        const payload = {}
-        if (author.asin) payload.asin = author.asin
-        else payload.q = author.name
+      try {
+        const authors = await this.fetchAllAuthors()
 
-        payload.region = 'us'
-        if (this.libraryProvider.startsWith('audible.')) {
-          payload.region = this.libraryProvider.split('.').pop() || 'us'
+        for (const author of authors) {
+          const payload = {}
+          if (author.asin) payload.asin = author.asin
+          else payload.q = author.name
+
+          payload.region = 'us'
+          if (this.libraryProvider.startsWith('audible.')) {
+            payload.region = this.libraryProvider.split('.').pop() || 'us'
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, true)
+
+          var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
+            console.error('Failed', error)
+            return null
+          })
+          if (!response) {
+            console.error(`Author ${author.name} not found`)
+            this.$toast.error(this.$getString('ToastAuthorNotFound', [author.name]))
+          } else if (response.updated) {
+            if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
+            else console.log(`Author ${response.author.name} was updated (no image found)`)
+          } else {
+            console.log(`No updates were made for Author ${response.author.name}`)
+          }
+
+          this.$eventBus.$emit(`searching-author-${author.id}`, false)
         }
-
-        this.$eventBus.$emit(`searching-author-${author.id}`, true)
-
-        var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
-          console.error('Failed', error)
-          return null
-        })
-        if (!response) {
-          console.error(`Author ${author.name} not found`)
-          this.$toast.error(`Author ${author.name} not found`)
-        } else if (response.updated) {
-          if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
-          else console.log(`Author ${response.author.name} was updated (no image found)`)
-        } else {
-          console.log(`No updates were made for Author ${response.author.name}`)
-        }
-
-        this.$eventBus.$emit(`searching-author-${author.id}`, false)
+      } catch (error) {
+        console.error('Failed to match all authors', error)
+        this.$toast.error(this.$strings.ToastMatchAllAuthorsFailed)
       }
       this.processingAuthors = false
     },
@@ -417,13 +529,13 @@ export default {
         this.$axios
           .$delete(`/api/libraries/${this.currentLibraryId}/issues`)
           .then(() => {
-            this.$toast.success('Removed library items with issues')
+            this.$toast.success(this.$strings.ToastRemoveItemsWithIssuesSuccess)
             this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
             this.$store.dispatch('libraries/fetch', this.currentLibraryId)
           })
           .catch((error) => {
             console.error('Failed to remove library items with issues', error)
-            this.$toast.error('Failed to remove library items with issues')
+            this.$toast.error(this.$strings.ToastRemoveItemsWithIssuesFailed)
           })
           .finally(() => {
             this.processingIssues = false
@@ -479,7 +591,10 @@ export default {
     updateCollapseSeries() {
       this.saveSettings()
     },
-    updateCollapseBookSeries() {
+    updateCollapseSubSeries() {
+      this.saveSettings()
+    },
+    updateShowSubtitles() {
       this.saveSettings()
     },
     updateAuthorSort() {

client/components/app/ConfigSideNav.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="w-44 fixed left-0 top-16 bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
       <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
-        <span class="material-icons text-2xl">arrow_back</span>
+        <span class="material-symbols text-2xl">arrow_back</span>
       </div>
 
       <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-3 h-12 border-b border-primary border-opacity-30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
@@ -10,7 +10,7 @@
         <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
+      <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
     </div>
 
     <div class="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
@@ -19,7 +19,7 @@
 
         <p class="text-xs text-gray-300 italic">{{ Source }}</p>
       </div>
-      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ versionData.latestVersion }}</a>
     </div>
   </div>
 </template>
@@ -114,9 +114,9 @@ export default {
 
       if (this.currentLibraryId) {
         configRoutes.push({
-          id: 'config-library-stats',
+          id: 'library-stats',
           title: this.$strings.HeaderLibraryStats,
-          path: '/config/library-stats'
+          path: `/library/${this.currentLibraryId}/stats`
         })
         configRoutes.push({
           id: 'config-stats',
@@ -156,15 +156,9 @@ export default {
     hasUpdate() {
       return !!this.versionData.hasUpdate
     },
-    latestVersion() {
-      return this.versionData.latestVersion
-    },
     githubTagUrl() {
       return this.versionData.githubTagUrl
     },
-    currentVersionChangelog() {
-      return this.versionData.currentVersionChangelog || 'No Changelog Available'
-    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     }
@@ -182,4 +176,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/app/LazyBookshelf.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="bookshelf" class="w-full overflow-y-auto">
+  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
       </div>
     </template>
 
@@ -49,10 +49,9 @@ export default {
       entityIndexesMounted: [],
       entityComponentRefs: {},
       currentBookWidth: 0,
-      pageLoadQueue: [],
       isFetchingEntities: false,
       scrollTimeout: null,
-      booksPerFetch: 100,
+      booksPerFetch: 0,
       totalShelves: 0,
       bookshelfMarginLeft: 0,
       isSelectionMode: false,
@@ -63,7 +62,10 @@ export default {
       resizeTimeout: null,
       mountWindowWidth: 0,
       lastItemIndexSelected: -1,
-      tempIsScanning: false
+      tempIsScanning: false,
+      cardWidth: 0,
+      cardHeight: 0,
+      resizeObserver: null
     }
   },
   watch: {
@@ -89,6 +91,7 @@ export default {
       if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
       if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
       if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylists
+      if (this.page === 'authors') return this.$strings.MessageNoAuthors
       if (this.hasFilter) {
         if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
         else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
@@ -109,6 +112,12 @@ export default {
     seriesFilterBy() {
       return this.$store.getters['user/getUserSetting']('seriesFilterBy')
     },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy')
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
     orderBy() {
       return this.$store.getters['user/getUserSetting']('orderBy')
     },
@@ -160,52 +169,40 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
     bookWidth() {
-      const coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
-      return coverSize
+      return this.cardWidth
     },
     bookHeight() {
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
-      return this.bookWidth * 1.6
+      return this.cardHeight
     },
     shelfPadding() {
-      if (this.bookshelfWidth < 640) return 32
-      return 64
+      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
+      return 64 * this.sizeMultiplier
     },
     totalPadding() {
       return this.shelfPadding * 2
     },
     entityWidth() {
-      if (this.entityName === 'series' || this.entityName === 'collections') {
-        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
-        return this.bookWidth * 2
-      }
-      return this.bookWidth
+      return this.cardWidth
     },
     entityHeight() {
-      return this.bookHeight
+      return this.cardHeight
     },
-    shelfDividerHeightIndex() {
-      return 6
+    shelfPaddingHeight() {
+      return 16
     },
     shelfHeight() {
-      if (this.isAlternativeBookshelfView) {
-        const isItemEntity = this.entityName === 'series-books' || this.entityName === 'items'
-        const extraTitleSpace = isItemEntity ? 80 : this.entityName === 'albums' ? 60 : 40
-        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
-      }
-      return this.entityHeight + 40
+      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
+      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
     },
     totalEntityCardWidth() {
       // Includes margin
-      return this.entityWidth + 24
+      return this.entityWidth + 24 * this.sizeMultiplier
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
     },
     sizeMultiplier() {
-      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.entityWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
     },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
@@ -227,6 +224,8 @@ export default {
         this.$store.commit('globals/setEditCollection', entity)
       } else if (this.entityName === 'playlists') {
         this.$store.commit('globals/setEditPlaylist', entity)
+      } else if (this.entityName === 'authors') {
+        this.$store.commit('globals/showEditAuthorModal', entity)
       }
     },
     clearSelectedEntities() {
@@ -322,7 +321,7 @@ export default {
 
       let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
       const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete,share`
 
       const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
         console.error('failed to fetch items', error)
@@ -436,10 +435,14 @@ export default {
     rebuild() {
       this.initSizeData()
 
-      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
       this.entityIndexesMounted = []
       for (let i = 0; i < lastBookIndex; i++) {
         this.entityIndexesMounted.push(i)
+        if (!this.entities[i]) {
+          const page = Math.floor(i / this.booksPerFetch)
+          this.loadPage(page)
+        }
       }
       var bookshelfEl = document.getElementById('bookshelf')
       if (bookshelfEl) {
@@ -463,6 +466,9 @@ export default {
         if (this.collapseBookSeries) {
           searchParams.set('collapseseries', 1)
         }
+      } else if (this.page === 'authors') {
+        searchParams.set('sort', this.authorSortBy)
+        searchParams.set('desc', this.authorSortDesc ? 1 : 0)
       } else {
         if (this.filterBy && this.filterBy !== 'all') {
           searchParams.set('filter', this.filterBy)
@@ -501,7 +507,8 @@ export default {
         this.resetEntities()
       }
     },
-    settingsUpdated(settings) {
+    async settingsUpdated(settings) {
+      await this.cardsHelpers.setCardSize()
       const wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
         this.resetEntities()
@@ -606,6 +613,72 @@ export default {
         this.executeRebuild()
       }
     },
+    authorAdded(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorAdded ${author.id}`, author)
+      this.resetEntities()
+    },
+    authorUpdated(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorUpdated ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = author
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(author)
+        }
+      }
+    },
+    authorRemoved(author) {
+      if (this.entityName !== 'authors') return
+      console.log(`[LazyBookshelf] authorRemoved ${author.id}`, author)
+      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== author.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+
+    shareOpen(mediaItemShare) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
+        if (indexOf >= 0) {
+          if (this.entityComponentRefs[indexOf]) {
+            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
+            libraryItem.mediaItemShare = mediaItemShare
+            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
+          }
+        }
+      }
+    },
+    shareClosed(mediaItemShare) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
+        if (indexOf >= 0) {
+          if (this.entityComponentRefs[indexOf]) {
+            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
+            libraryItem.mediaItemShare = null
+            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
+          }
+        }
+      }
+    },
+    updatePagesLoaded() {
+      let numPages = Math.ceil(this.totalEntities / this.booksPerFetch)
+      for (let page = 0; page < numPages; page++) {
+        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
+        this.pagesLoaded[page] = true
+        for (let i = 0; i < numEntities; i++) {
+          const index = page * this.booksPerFetch + i
+          if (!this.entities[index]) {
+            this.pagesLoaded[page] = false
+            break
+          }
+        }
+      }
+    },
     initSizeData(_bookshelf) {
       var bookshelf = _bookshelf || document.getElementById('bookshelf')
       if (!bookshelf) {
@@ -622,6 +695,13 @@ export default {
       this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
       this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
       this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
+      const booksPerFetch = this.entitiesPerShelf * this.shelvesPerPage
+      if (booksPerFetch !== this.booksPerFetch) {
+        this.booksPerFetch = booksPerFetch
+        if (this.totalEntities) {
+          this.updatePagesLoaded()
+        }
+      }
 
       this.currentBookWidth = this.bookWidth
       if (this.totalEntities) {
@@ -630,13 +710,8 @@ export default {
       return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
     },
     async init(bookshelf) {
-      if (this.entityName === 'series') {
-        this.booksPerFetch = 50
-      } else {
-        this.booksPerFetch = 100
-      }
-      this.checkUpdateSearchParams()
       this.initSizeData(bookshelf)
+      this.checkUpdateSearchParams()
 
       this.pagesLoaded[0] = true
       await this.fetchEntites(0)
@@ -692,6 +767,11 @@ export default {
         this.$root.socket.on('playlist_added', this.playlistAdded)
         this.$root.socket.on('playlist_updated', this.playlistUpdated)
         this.$root.socket.on('playlist_removed', this.playlistRemoved)
+        this.$root.socket.on('author_added', this.authorAdded)
+        this.$root.socket.on('author_updated', this.authorUpdated)
+        this.$root.socket.on('author_removed', this.authorRemoved)
+        this.$root.socket.on('share_open', this.shareOpen)
+        this.$root.socket.on('share_closed', this.shareClosed)
       } else {
         console.error('Bookshelf - Socket not initialized')
       }
@@ -719,6 +799,11 @@ export default {
         this.$root.socket.off('playlist_added', this.playlistAdded)
         this.$root.socket.off('playlist_updated', this.playlistUpdated)
         this.$root.socket.off('playlist_removed', this.playlistRemoved)
+        this.$root.socket.off('author_added', this.authorAdded)
+        this.$root.socket.off('author_updated', this.authorUpdated)
+        this.$root.socket.off('author_removed', this.authorRemoved)
+        this.$root.socket.off('share_open', this.shareOpen)
+        this.$root.socket.off('share_closed', this.shareClosed)
       } else {
         console.error('Bookshelf - Socket not initialized')
       }
@@ -743,7 +828,8 @@ export default {
         })
     }
   },
-  mounted() {
+  async mounted() {
+    await this.cardsHelpers.setCardSize()
     this.initListeners()
 
     this.routeFullPath = window.location.pathname + (window.location.search || '')
@@ -778,6 +864,6 @@ export default {
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: var(--bookshelf-divider-bg);
-  box-shadow: 2px 14px 8px #111111aa;
+  box-shadow: 0.125em 0.875em 0.5em #111111aa;
 }
 </style>

client/components/app/MediaPlayerContainer.vue

@@ -1,65 +1,68 @@
 <template>
   <div v-if="streamLibraryItem" id="mediaPlayerContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
-    <div id="videoDock" />
     <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
       <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </div>
-    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0">
+    <div class="flex items-start mb-6 lg:mb-0" :class="isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
+      <div class="min-w-0 w-full">
         <div class="flex items-center">
           <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
             {{ title }}
           </nuxt-link>
           <widgets-explicit-indicator v-if="isExplicit" />
         </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
-          <span class="material-icons text-sm">person</span>
-          <div class="flex items-center">
-            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
-            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
-            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-            </div>
-            <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
+        <div class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
+          <span class="material-symbols text-sm">person</span>
+          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
+            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
           </div>
+          <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
         </div>
 
         <div class="text-gray-400 flex items-center">
-          <span class="material-icons text-xs">schedule</span>
+          <span class="material-symbols text-xs">schedule</span>
           <p class="font-mono text-xs sm:text-sm pl-1 sm:pl-1.5 pb-px">{{ totalDurationPretty }}</p>
         </div>
       </div>
       <div class="flex-grow" />
       <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
-        <button :aria-label="$strings.LabelClosePlayer" class="material-icons sm:px-2 py-1 lg:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
+        <button :aria-label="$strings.LabelClosePlayer" class="material-symbols sm:px-2 py-1 lg:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
       </ui-tooltip>
     </div>
     <player-ui
       ref="audioPlayer"
       :chapters="chapters"
+      :current-chapter="currentChapter"
       :paused="!isPlaying"
       :loading="playerLoading"
       :bookmarks="bookmarks"
       :sleep-timer-set="sleepTimerSet"
       :sleep-timer-remaining="sleepTimerRemaining"
+      :sleep-timer-type="sleepTimerType"
       :is-podcast="isPodcast"
+      :hasNextItemInQueue="hasNextItemInQueue"
       @playPause="playPause"
       @jumpForward="jumpForward"
       @jumpBackward="jumpBackward"
       @setVolume="setVolume"
       @setPlaybackRate="setPlaybackRate"
       @seek="seek"
+      @nextItemInQueue="playNextItemInQueue"
       @close="closePlayer"
       @showBookmarks="showBookmarks"
       @showSleepTimer="showSleepTimerModal = true"
       @showPlayerQueueItems="showPlayerQueueItemsModal = true"
+      @showPlayerSettings="showPlayerSettingsModal = 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-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
 
-    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />
+    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" />
+
+    <modals-player-settings-modal v-model="showPlayerSettingsModal" />
   </div>
 </template>
 
@@ -78,9 +81,10 @@ export default {
       currentTime: 0,
       showSleepTimerModal: false,
       showPlayerQueueItemsModal: false,
+      showPlayerSettingsModal: false,
       sleepTimerSet: false,
-      sleepTimerTime: 0,
       sleepTimerRemaining: 0,
+      sleepTimerType: null,
       sleepTimer: null,
       displayTitle: null,
       currentPlaybackRate: 1,
@@ -134,9 +138,6 @@ export default {
     isPodcast() {
       return this.streamLibraryItem?.mediaType === 'podcast'
     },
-    isMusic() {
-      return this.streamLibraryItem?.mediaType === 'music'
-    },
     isExplicit() {
       return !!this.mediaMetadata.explicit
     },
@@ -147,6 +148,9 @@ export default {
       if (this.streamEpisode) return this.streamEpisode.chapters || []
       return this.media.chapters || []
     },
+    currentChapter() {
+      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
+    },
     title() {
       if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
       return this.mediaMetadata.title || 'No Title'
@@ -163,11 +167,17 @@ export default {
     },
     podcastAuthor() {
       if (!this.isPodcast) return null
-      return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.author || this.$strings.LabelUnknown
     },
-    musicArtists() {
-      if (!this.isMusic) return null
-      return this.mediaMetadata.artists.join(', ')
+    hasNextItemInQueue() {
+      return this.currentPlayerQueueIndex < this.playerQueueItems.length - 1
+    },
+    currentPlayerQueueIndex() {
+      if (!this.libraryItemId) return -1
+      return this.playerQueueItems.findIndex((i) => {
+        if (this.streamEpisode?.id) return i.episodeId === this.streamEpisode.id
+        return i.libraryItemId === this.libraryItemId
+      })
     },
     playerQueueItems() {
       return this.$store.state.playerQueueItems || []
@@ -206,14 +216,18 @@ export default {
       this.$store.commit('setIsPlaying', isPlaying)
       this.updateMediaSessionPlaybackState()
     },
-    setSleepTimer(seconds) {
+    setSleepTimer(time) {
       this.sleepTimerSet = true
-      this.sleepTimerTime = seconds
-      this.sleepTimerRemaining = seconds
-      this.runSleepTimer()
       this.showSleepTimerModal = false
+
+      this.sleepTimerType = time.timerType
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.COUNTDOWN) {
+        this.runSleepTimer(time)
+      }
     },
-    runSleepTimer() {
+    runSleepTimer(time) {
+      this.sleepTimerRemaining = time.seconds
+
       var lastTick = Date.now()
       clearInterval(this.sleepTimer)
       this.sleepTimer = setInterval(() => {
@@ -222,12 +236,23 @@ export default {
         this.sleepTimerRemaining -= elapsed / 1000
 
         if (this.sleepTimerRemaining <= 0) {
-          this.clearSleepTimer()
-          this.playerHandler.pause()
-          this.$toast.info('Sleep Timer Done.. zZzzZz')
+          this.sleepTimerEnd()
         }
       }, 1000)
     },
+    checkChapterEnd(time) {
+      if (!this.currentChapter) return
+      const chapterEndTime = this.currentChapter.end
+      const tolerance = 0.75
+      if (time >= chapterEndTime - tolerance) {
+        this.sleepTimerEnd()
+      }
+    },
+    sleepTimerEnd() {
+      this.clearSleepTimer()
+      this.playerHandler.pause()
+      this.$toast.info(this.$strings.ToastSleepTimerDone)
+    },
     cancelSleepTimer() {
       this.showSleepTimerModal = false
       this.clearSleepTimer()
@@ -237,6 +262,7 @@ export default {
       this.sleepTimerRemaining = 0
       this.sleepTimer = null
       this.sleepTimerSet = false
+      this.sleepTimerType = null
     },
     incrementSleepTimer(amount) {
       if (!this.sleepTimerSet) return
@@ -277,6 +303,10 @@ export default {
       if (this.$refs.audioPlayer) {
         this.$refs.audioPlayer.setCurrentTime(time)
       }
+
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
+        this.checkChapterEnd(time)
+      }
     },
     setDuration(duration) {
       this.totalDuration = duration
@@ -433,6 +463,30 @@ export default {
         this.playerHandler.switchPlayer()
       }
     },
+    playNextItemInQueue() {
+      if (this.hasNextItemInQueue) {
+        this.playQueueItem({ index: this.currentPlayerQueueIndex + 1 })
+      }
+    },
+    /**
+     * @param {{ index: number }} payload
+     */
+    playQueueItem(payload) {
+      if (payload?.index === undefined) {
+        console.error('playQueueItem: No index provided')
+        return
+      }
+      if (!this.playerQueueItems[payload.index]) {
+        console.error('playQueueItem: No item found at index', payload.index)
+        return
+      }
+      const item = this.playerQueueItems[payload.index]
+      this.playLibraryItem({
+        libraryItemId: item.libraryItemId,
+        episodeId: item.episodeId || null,
+        queueItems: this.playerQueueItems
+      })
+    },
     async playLibraryItem(payload) {
       const libraryItemId = payload.libraryItemId
       const episodeId = payload.episodeId || null
@@ -471,7 +525,7 @@ export default {
     },
     showFailedProgressSyncs() {
       if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
-      this.syncFailedToast = this.$toast('Progress is not being synced. Restart playback', { timeout: false, type: 'error' })
+      this.syncFailedToast = this.$toast(this.$strings.ToastProgressIsNotBeingSynced, { timeout: false, type: 'error' })
     },
     sessionClosedEvent(sessionId) {
       if (this.playerHandler.currentSessionId === sessionId) {
@@ -485,6 +539,7 @@ export default {
     this.$eventBus.$on('cast-session-active', this.castSessionActive)
     this.$eventBus.$on('playback-seek', this.seek)
     this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
+    this.$eventBus.$on('play-queue-item', this.playQueueItem)
     this.$eventBus.$on('play-item', this.playLibraryItem)
     this.$eventBus.$on('pause-item', this.pauseItem)
   },
@@ -492,6 +547,7 @@ export default {
     this.$eventBus.$off('cast-session-active', this.castSessionActive)
     this.$eventBus.$off('playback-seek', this.seek)
     this.$eventBus.$off('playback-time-update', this.playbackTimeUpdate)
+    this.$eventBus.$off('play-queue-item', this.playQueueItem)
     this.$eventBus.$off('play-item', this.playLibraryItem)
     this.$eventBus.$off('pause-item', this.pauseItem)
   }

client/components/app/SideRail.vue

@@ -15,7 +15,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">format_list_bulleted</span>
+        <span class="material-symbols text-2xl">&#xe241;</span>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
@@ -43,7 +43,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-2xl">collections_bookmark</span>
+        <span class="material-symbols text-2xl">&#xe431;</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
@@ -51,14 +51,14 @@
       </nuxt-link>
 
       <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2.5xl">queue_music</span>
+        <span class="material-symbols text-2.5xl">&#xe03d;</span>
 
         <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
 
         <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <svg class="w-6 h-6" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -72,13 +72,21 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">record_voice_over</span>
+        <span class="material-symbols text-2xl">&#xe91f;</span>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
 
         <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
+      <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">&#xf190;</span>
+
+        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
+
+        <div v-show="isStatsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <span class="abs-icons icon-podcast text-xl"></span>
 
@@ -87,24 +95,16 @@
         <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-xl">album</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
-
-        <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">file_download</span>
+        <span class="material-symbols text-2xl">&#xf090;</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
 
         <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
-      <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white 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>
+      <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-symbols text-2xl">warning</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
@@ -121,7 +121,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" :versionData="versionData" />
   </div>
 </template>
 
@@ -164,9 +164,6 @@ export default {
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
-    isMusicLibrary() {
-      return this.currentLibraryMediaType === 'music'
-    },
     isPodcastDownloadQueuePage() {
       return this.$route.name === 'library-library-podcast-download-queue'
     },
@@ -176,9 +173,6 @@ export default {
     isPodcastLatestPage() {
       return this.$route.name === 'library-library-podcast-latest'
     },
-    isMusicAlbumsPage() {
-      return this.paramId === 'albums'
-    },
     homePage() {
       return this.$route.name === 'library-library'
     },
@@ -186,7 +180,7 @@ export default {
       return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
     },
     isAuthorsPage() {
-      return this.$route.name === 'library-library-authors'
+      return this.libraryBookshelfPage && this.paramId === 'authors'
     },
     isNarratorsPage() {
       return this.$route.name === 'library-library-narrators'
@@ -194,6 +188,9 @@ export default {
     isPlaylistsPage() {
       return this.paramId === 'playlists'
     },
+    isStatsPage() {
+      return this.$route.name === 'library-library-stats'
+    },
     libraryBookshelfPage() {
       return this.$route.name === 'library-library-bookshelf-id'
     },
@@ -219,9 +216,6 @@ export default {
     githubTagUrl() {
       return this.versionData.githubTagUrl
     },
-    currentVersionChangelog() {
-      return this.versionData.currentVersionChangelog || 'No Changelog Available'
-    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
@@ -245,4 +239,4 @@ export default {
 #siderail-buttons-container.player-open {
   max-height: calc(100vh - 64px - 48px - 160px);
 }
-</style>
+</style>

client/components/cards/AuthorCard.vue

@@ -1,88 +1,105 @@
 <template>
-  <nuxt-link :to="`/author/${author?.id}`">
-    <div cy-id="card" :style="{ width: width + 'px'}" @mouseover="mouseover" @mouseleave="mouseleave">
-      <div cy-id="imageArea" :style="{ height: height + 'px' }" class=" bg-primary box-shadow-book rounded-md relative overflow-hidden">
-        <!-- Image or placeholder -->
-        <covers-author-image :author="author"/>
+  <div class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+    <nuxt-link :to="`/author/${author?.id}`">
+      <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
+        <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+          <!-- Image or placeholder -->
+          <covers-author-image :author="author" />
 
-        <!-- Author name & num books overlay -->
-        <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
-        </div>
+          <!-- Author name & num books overlay -->
+          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
+          </div>
 
-        <!-- Search icon btn -->
-        <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
-          <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
-            <span class="material-icons text-lg">search</span>
-          </ui-tooltip>
-        </div>
-        <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
-          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-            <span class="material-icons text-lg">edit</span>
-          </ui-tooltip>
-        </div>
+          <!-- Search icon btn -->
+          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+            <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
+              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">search</span>
+            </ui-tooltip>
+          </div>
+          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+            <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
+              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">edit</span>
+            </ui-tooltip>
+          </div>
 
-        <!-- Loading spinner -->
-        <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
-          <widgets-loading-spinner size="" />
+          <!-- Loading spinner -->
+          <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+            <widgets-loading-spinner size="" />
+          </div>
+        </div>
+        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
+          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
         </div>
       </div>
-      <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1 px-2">
-          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-      </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
-    author: {
+    authorMount: {
       type: Object,
       default: () => {}
     },
     width: Number,
-    height: Number,
-    sizeMultiplier: {
+    height: {
       type: Number,
-      default: 1
+      default: 192
     },
-    nameBelow: Boolean
+    nameBelow: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
       searching: false,
-      isHovering: false
+      isHovering: false,
+      author: null
     }
   },
   computed: {
+    cardWidth() {
+      return this.width || this.cardHeight * 0.8
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
     userToken() {
-      return this.$store.getters['user/getToken']
+      return this.store.getters['user/getToken']
     },
     _author() {
       return this.author || {}
     },
     authorId() {
-      return this._author.id
+      return this._author?.id || ''
     },
     name() {
-      return this._author.name || ''
+      return this._author?.name || ''
     },
     asin() {
-      return this._author.asin || ''
+      return this._author?.asin || ''
     },
     numBooks() {
-      return this._author.numBooks || 0
+      return this._author?.numBooks || 0
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
     },
     userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+      return this.store.getters['user/getUserCanUpdate']
     },
     currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
+      return this.store.state.libraries.currentLibraryId
     },
     libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+      return this.store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    },
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
     }
   },
   methods: {
@@ -108,24 +125,54 @@ export default {
         return null
       })
       if (!response) {
-        this.$toast.error(`Author ${this.name} not found`)
+        this.$toast.error(this.$getString('ToastAuthorNotFound', [this.name]))
       } else if (response.updated) {
-        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)`)
+        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 ${response.author.name}`)
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
       }
       this.searching = false
     },
     setSearching(isSearching) {
       this.searching = isSearching
-    }
+    },
+    setEntity(author) {
+      this.removeListeners()
+      this.author = author
+      this.addListeners()
+    },
+    addListeners() {
+      if (this.author) {
+        this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    removeListeners() {
+      if (this.author) {
+        this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+      }
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    },
+    setSelectionMode(val) {}
   },
   mounted() {
-    this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+    if (this.authorMount) this.setEntity(this.authorMount)
   },
   beforeDestroy() {
-    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+    this.removeListeners()
   }
 }
-</script>
+</script>

client/components/cards/AuthorSearchCard.vue

@@ -5,6 +5,7 @@
     </div>
     <div class="flex-grow px-2 authorSearchCardContent h-full">
       <p class="truncate text-sm">{{ name }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
     </div>
   </div>
 </template>
@@ -23,6 +24,9 @@ export default {
   computed: {
     name() {
       return this.author.name
+    },
+    numBooks() {
+      return this.author.numBooks
     }
   },
   methods: {},
@@ -33,9 +37,9 @@ export default {
 <style>
 .authorSearchCardContent {
   width: calc(100% - 80px);
-  height: 40px;
+  height: 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-</style>
+</style>

client/components/cards/Book3d.vue

@@ -1,254 +0,0 @@
-<template>
-  <div ref="wrapper" class="relative pointer-events-none" :style="{ width: standardWidth * 0.8 * 1.1 * scale + 'px', height: standardHeight * 1.1 * scale + 'px', marginBottom: 20 + 'px', marginTop: 15 + 'px' }">
-    <div ref="card" class="wrap absolute origin-center transform duration-200" :style="{ transform: `scale(${scale * scaleMultiplier}) translateY(${hover2 ? '-40%' : '-50%'})` }">
-      <div class="perspective">
-        <div class="book-wrap transform duration-100 pointer-events-auto" :class="hover2 ? 'z-80' : 'rotate'" @mouseover="hover = true" @mouseout="hover = false">
-          <div class="book book-1 box-shadow-book3d" ref="front"></div>
-          <div class="title book-1 pointer-events-none" ref="left"></div>
-          <div class="bottom book-1 pointer-events-none" ref="bottom"></div>
-          <div class="book-back book-1 pointer-events-none">
-            <div class="text pointer-events-none">
-              <h3 class="mb-4">Book Back</h3>
-              <p>
-                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt earum doloremque aliquam culpa dolor nostrum consequatur quas dicta? Molestias repellendus minima pariatur libero vel, reiciendis optio magnam rerum, labore corporis.</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    src: String,
-    width: {
-      type: Number,
-      default: 200
-    }
-  },
-  data() {
-    return {
-      hover: false,
-      hover2: false,
-      standardWidth: 200,
-      standardHeight: 320,
-      isAttached: true,
-      pageX: 0,
-      pageY: 0
-    }
-  },
-  watch: {
-    src(newVal) {
-      this.setCover()
-    },
-    width(newVal) {
-      this.init()
-    },
-    hover(newVal) {
-      if (newVal) {
-        this.unattach()
-      } else {
-        this.attach()
-      }
-      setTimeout(() => {
-        this.hover2 = newVal
-      }, 100)
-    }
-  },
-  computed: {
-    scaleMultiplier() {
-      return this.hover2 ? 1.25 : 1
-    },
-    scale() {
-      var scale = this.width / this.standardWidth
-      return scale
-    }
-  },
-  methods: {
-    unattach() {
-      if (this.$refs.card && this.isAttached) {
-        var bookshelf = document.getElementById('bookshelf')
-        if (bookshelf) {
-          var pos = this.$refs.wrapper.getBoundingClientRect()
-
-          this.pageX = pos.x
-          this.pageY = pos.y
-          document.body.appendChild(this.$refs.card)
-          this.$refs.card.style.left = this.pageX + 'px'
-          this.$refs.card.style.top = this.pageY + 'px'
-          this.$refs.card.style.zIndex = 50
-          this.isAttached = false
-        } else if (bookshelf) {
-          console.log(this.pageX, this.pageY)
-          this.isAttached = false
-        }
-      }
-    },
-    attach() {
-      if (this.$refs.card && !this.isAttached) {
-        if (this.$refs.wrapper) {
-          this.isAttached = true
-
-          this.$refs.wrapper.appendChild(this.$refs.card)
-          this.$refs.card.style.left = '0px'
-          this.$refs.card.style.top = '0px'
-        }
-      } else {
-        console.log('Is attached already', this.isAttached)
-      }
-    },
-    init() {
-      var standardWidth = this.standardWidth
-      document.documentElement.style.setProperty('--book-w', standardWidth + 'px')
-      document.documentElement.style.setProperty('--book-wx', standardWidth + 1 + 'px')
-      document.documentElement.style.setProperty('--book-h', standardWidth * 1.6 + 'px')
-      document.documentElement.style.setProperty('--book-d', 40 + 'px')
-    },
-    setElBg(el) {
-      el.style.backgroundImage = `url("${this.src}")`
-      el.style.backgroundSize = 'cover'
-      el.style.backgroundPosition = 'center center'
-      el.style.backgroundRepeat = 'no-repeat'
-    },
-    setCover() {
-      if (this.$refs.front) {
-        this.setElBg(this.$refs.front)
-      }
-      if (this.$refs.bottom) {
-        this.setElBg(this.$refs.bottom)
-        this.$refs.bottom.style.backgroundSize = '2000%'
-        this.$refs.bottom.style.filter = 'blur(1px)'
-      }
-      if (this.$refs.left) {
-        this.setElBg(this.$refs.left)
-        this.$refs.left.style.backgroundSize = '2000%'
-        this.$refs.left.style.filter = 'blur(1px)'
-      }
-    }
-  },
-  mounted() {
-    this.setCover()
-    this.init()
-  }
-}
-</script>
-
-<style>
-/* :root {
-  --book-w: 200px;
-  --book-h: 320px;
-  --book-d: 30px;
-  --book-wx: 201px;
-} */
-/* 
-.wrap {
-  width: calc(1.1 * var(--book-w));
-  height: calc(1.1 * var(--book-h));
-  margin: 0 auto;
-}
-.perspective {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  perspective: 600px;
-  transform-style: preserve-3d;
-  overflow: hidden;
-}
-
-.book-wrap {
-  height: 100%;
-  width: 100%;
-  transform-style: preserve-3d;
-  transition: 'all ease-out 0.6s';
-}
-
-.book {
-  width: var(--book-w);
-  height: var(--book-h);
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: cover;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  cursor: pointer;
-}
-.title {
-  content: '';
-  height: var(--book-h);
-  width: var(--book-d);
-  position: absolute;
-  right: 0;
-  left: calc(var(--book-wx) * -1);
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  background: #444;
-  transform: rotateY(-80deg) translateX(-14px);
-
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: 5000%;
-  filter: blur(1px);
-}
-
-.bottom {
-  content: '';
-  height: var(--book-d);
-  width: var(--book-w);
-  position: absolute;
-  right: 0;
-  bottom: var(--book-h);
-  top: 0;
-  left: 0;
-  margin: auto;
-  background: #444;
-  transform: rotateY(0deg) rotateX(90deg) translateY(-15px) translateX(-2.5px) skewX(10deg);
-
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: 5000%;
-  filter: blur(1px);
-}
-
-.book-back {
-  width: var(--book-w);
-  height: var(--book-h);
-  background-color: #444;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  cursor: pointer;
-  transform: rotate(180deg) translateZ(-30px) translateX(5px);
-}
-.book-back .text {
-  transform: rotateX(180deg);
-  position: absolute;
-  bottom: 0px;
-  padding: 20px;
-  text-align: left;
-  font-size: 12px;
-}
-.book-back .text h3 {
-  color: #fff;
-}
-.book-back .text span {
-  display: block;
-  margin-bottom: 20px;
-  color: #fff;
-}
-
-.book-wrap.rotate {
-  transform: rotateY(30deg) rotateX(0deg);
-}
-.book-wrap.flip {
-  transform: rotateY(180deg);
-} */
-</style>

client/components/cards/GenreSearchCard.vue

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

client/components/cards/GroupCard.vue

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

client/components/cards/ItemSearchCard.vue

@@ -2,15 +2,9 @@
   <div class="flex items-center h-full px-1 overflow-hidden">
     <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     <div class="flex-grow px-2 audiobookSearchCardContent">
-      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
-      <p v-else class="truncate text-sm" v-html="matchHtml" />
-
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300" v-html="matchHtml" />
-
-      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
-      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
-
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <p class="truncate text-sm">{{ title }}</p>
+      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
     </div>
   </div>
 </template>
@@ -21,10 +15,7 @@ export default {
     libraryItem: {
       type: Object,
       default: () => {}
-    },
-    search: String,
-    matchKey: String,
-    matchText: String
+    }
   },
   data() {
     return {}
@@ -58,23 +49,6 @@ export default {
     authorName() {
       if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
       return this.mediaMetadata.authorName || 'Unknown'
-    },
-    matchHtml() {
-      if (!this.matchText || !this.search) return ''
-
-      // This used to highlight the part of the search found
-      //        but with removing commas periods etc this is no longer plausible
-      const html = this.matchText
-
-      if (this.matchKey === 'episode') return `<p class="truncate">${this.$strings.LabelEpisode}: ${html}</p>`
-      if (this.matchKey === 'tags') return `<p class="truncate">${this.$strings.LabelTags}: ${html}</p>`
-      if (this.matchKey === 'subtitle') return `<p class="truncate">${html}</p>`
-      if (this.matchKey === 'authors') this.$getString('LabelByAuthor', [html])
-      if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
-      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
-      if (this.matchKey === 'series') return `<p class="truncate">${this.$strings.LabelSeries}: ${html}</p>`
-      if (this.matchKey === 'narrators') return `<p class="truncate">${this.$strings.LabelNarrator}: ${html}</p>`
-      return `${html}`
     }
   },
   methods: {},

client/components/cards/ItemTaskRunningCard.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="flex items-center px-1 overflow-hidden">
     <div class="w-8 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
+      <span v-if="isFinished" :class="taskIconStatus" class="material-symbols text-base">{{ actionIcon }}</span>
       <widgets-loading-spinner v-else />
     </div>
     <div class="flex-grow px-2 taskRunningCardContent">
       <p class="truncate text-sm">{{ title }}</p>
 
       <p class="truncate text-xs text-gray-300">{{ description }}</p>
+      <p v-if="specialMessage" class="truncate text-xs text-gray-300">{{ specialMessage }}</p>
 
       <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
       <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
@@ -26,7 +27,16 @@ export default {
   },
   data() {
     return {
-      cancelingScan: false
+      cancelingScan: false,
+      specialMessage: ''
+    }
+  },
+  watch: {
+    task: {
+      immediate: true,
+      handler() {
+        this.initTask()
+      }
     }
   },
   computed: {
@@ -34,14 +44,17 @@ export default {
       return this.$store.getters['user/getIsAdminOrUp']
     },
     title() {
+      if (this.task.titleKey && this.$strings[this.task.titleKey]) {
+        return this.$getString(this.task.titleKey, this.task.titleSubs)
+      }
       return this.task.title || 'No Title'
     },
     description() {
+      if (this.task.descriptionKey && this.$strings[this.task.descriptionKey]) {
+        return this.$getString(this.task.descriptionKey, this.task.descriptionSubs)
+      }
       return this.task.description || ''
     },
-    details() {
-      return this.task.details || 'Unknown'
-    },
     isFinished() {
       return !!this.task.isFinished
     },
@@ -52,6 +65,9 @@ export default {
       return this.isFinished && !this.isFailed
     },
     failedMessage() {
+      if (this.task.errorKey && this.$strings[this.task.errorKey]) {
+        return this.$getString(this.task.errorKey, this.task.errorSubs)
+      }
       return this.task.error || ''
     },
     action() {
@@ -87,6 +103,21 @@ export default {
     }
   },
   methods: {
+    initTask() {
+      // special message for library scan tasks
+      if (this.task?.data?.scanResults) {
+        const scanResults = this.task.data.scanResults
+        const strs = []
+        if (scanResults.added) strs.push(this.$getString('MessageTaskScanItemsAdded', [scanResults.added]))
+        if (scanResults.updated) strs.push(this.$getString('MessageTaskScanItemsUpdated', [scanResults.updated]))
+        if (scanResults.missing) strs.push(this.$getString('MessageTaskScanItemsMissing', [scanResults.missing]))
+        const changesDetected = strs.length > 0 ? strs.join(', ') : this.$strings.MessageTaskScanNoChangesNeeded
+        const timeElapsed = scanResults.elapsed ? ` (${this.$elapsedPretty(scanResults.elapsed / 1000, false, true)})` : ''
+        this.specialMessage = `${changesDetected}${timeElapsed}`
+      } else {
+        this.specialMessage = ''
+      }
+    },
     cancelScan() {
       const libraryId = this.task?.data?.libraryId
       if (!libraryId) {

client/components/cards/ItemUploadCard.vue

@@ -5,7 +5,7 @@
     </div>
 
     <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
-      <span class="text-base text-white text-opacity-80 font-mono material-icons">close</span>
+      <span class="text-base text-white text-opacity-80 font-mono material-symbols">close</span>
     </div>
 
     <template v-if="!uploadSuccess && !uploadFailed">
@@ -22,7 +22,7 @@
             <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
             <ui-tooltip :text="$strings.LabelUploaderItemFetchMetadataHelp">
               <div class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer" @click="fetchMetadata">
-                <span class="text-base text-white text-opacity-80 font-mono material-icons">sync</span>
+                <span class="text-base text-white text-opacity-80 font-mono material-symbols">sync</span>
               </div>
             </ui-tooltip>
           </div>

client/components/cards/LazyAlbumCard.vue

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

client/components/cards/LazyBookCard.vue

@@ -1,125 +1,142 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <!-- When cover image does not fill -->
-    <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
-      <div class="absolute cover-bg" ref="coverBg" />
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
+      <!-- When cover image does not fill -->
+      <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+
+      <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
+        <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+      </div>
+      <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+      </div>
+
+      <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
+        </div>
+
+        <!-- Cover Image -->
+        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+
+        <!-- Placeholder Cover Title & Author -->
+        <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em' }">
+          <div>
+            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
+          </div>
+        </div>
+        <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
+          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+        </div>
+
+        <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+        </div>
+        <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #cd9d49dd">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+        </div>
+
+        <!-- No progress shown for podcasts (unless showing podcast episode) -->
+        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
+
+        <!-- Overlay is not shown if collapsing series in library -->
+        <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
+          <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+              <span class="material-symbols fill" :style="{ fontSize: playIconFontSize + 'em' }">play_arrow</span>
+            </div>
+          </div>
+
+          <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+              <span class="material-symbols" :style="{ fontSize: playIconFontSize + 'em' }">auto_stories</span>
+            </div>
+          </div>
+
+          <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 + 'em' }" @click.stop.prevent="editClick">
+            <span class="material-symbols" :style="{ fontSize: 1 + 'em' }">edit</span>
+          </div>
+
+          <!-- Radio button -->
+          <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 + 'em', left: 0.375 + 'em' }" @click.stop.prevent="selectBtnClick">
+            <span class="material-symbols" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+          </div>
+
+          <!-- More Menu Icon -->
+          <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 + 'em', right: 0.375 + 'em' }" @click.stop.prevent="clickShowMore">
+            <span class="material-symbols" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
+          </div>
+
+          <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 + 'em', left: 0.375 + 'em' }">
+            <span class="text-white/80" :style="{ fontSize: 0.8 + 'em' }">{{ ebookFormat }}</span>
+          </div>
+        </div>
+
+        <!-- Processing/loading spinner overlay -->
+        <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+          <widgets-loading-spinner size="la-lg" />
+        </div>
+
+        <!-- Series name overlay -->
+        <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: 1 + 'em' }">
+          <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 + 'em' }">{{ seriesName }}</p>
+        </div>
+
+        <!-- Error widget -->
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
+          <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+            <span class="material-symbols text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
+          </div>
+        </ui-tooltip>
+
+        <!-- rss feed icon -->
+        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+        </div>
+        <!-- media item shared icon -->
+        <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">public</span>
+        </div>
+
+        <!-- Series sequence -->
+        <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequence }}</p>
+        </div>
+
+        <!-- Podcast Episode # -->
+        <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">
+            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+          </p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodesIncomplete }}</p>
+        </div>
+      </div>
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div cy-id="detailBottom" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
-      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
+      <div :style="{ fontSize: 0.9 + 'em' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
-      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-    </div>
-
-    <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * 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 cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * 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 cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
-      </div>
-
-      <!-- Cover Image -->
-      <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
-
-      <!-- Placeholder Cover Title & Author -->
-      <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
-        <div>
-          <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
-        </div>
-      </div>
-      <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
-      </div>
-    </div>
-
-    <!-- No progress shown for podcasts (unless showing podcast episode) -->
-    <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-    <!-- Overlay is not shown if collapsing series in library -->
-    <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
-      <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
-        </div>
-      </div>
-
-      <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
-        </div>
-      </div>
-
-      <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
-        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
-      </div>
-
-      <!-- Radio button -->
-      <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-      </div>
-
-      <!-- More Menu Icon -->
-      <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
-        <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
-      </div>
-
-      <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }">
-        <span class="text-white/80" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ ebookFormat }}</span>
-      </div>
-    </div>
-
-    <!-- Processing/loading spinner overlay -->
-    <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
-      <widgets-loading-spinner size="la-lg" />
-    </div>
-
-    <!-- Series name overlay -->
-    <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
-      <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ seriesName }}</p>
-    </div>
-
-    <!-- Error widget -->
-    <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
-      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-        <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-      </div>
-    </ui-tooltip>
-
-    <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
-      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
-    </div>
-
-    <!-- Series sequence -->
-    <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
-    </div>
-
-    <!-- Podcast Episode # -->
-    <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
-        Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
-      </p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
+      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <p cy-id="subtitle" class="truncate" ref="displaySubtitle" :style="{ fontSize: 0.6 + 'em' }">{{ displaySubtitle }}</p>
+      </ui-tooltip>
+      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -131,15 +148,11 @@ import MoreMenu from '@/components/widgets/MoreMenu'
 export default {
   props: {
     index: Number,
-    width: {
-      type: Number,
-      default: 120
-    },
+    width: Number,
     height: {
       type: Number,
       default: 192
     },
-    bookCoverAspectRatio: Number,
     bookshelfView: Number,
     bookMount: {
       // Book can be passed as prop or set with setEntity()
@@ -161,6 +174,7 @@ export default {
       selected: false,
       isSelectionMode: false,
       displayTitleTruncated: false,
+      displaySubtitleTruncated: false,
       showCoverBg: false
     }
   },
@@ -174,6 +188,22 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      return this.width || this.coverHeight / this.bookCoverAspectRatio
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    cardWidth() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverWidth
+    },
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
@@ -194,10 +224,7 @@ export default {
       return this._libraryItem.mediaType
     },
     isPodcast() {
-      return this.mediaType === 'podcast'
-    },
-    isMusic() {
-      return this.mediaType === 'music'
+      return this.mediaType === 'podcast' || this.store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
     },
     isExplicit() {
       return this.mediaMetadata.explicit || false
@@ -273,10 +300,6 @@ export default {
     squareAspectRatio() {
       return this.bookCoverAspectRatio === 1
     },
-    sizeMultiplier() {
-      const baseSize = this.squareAspectRatio ? 192 : 120
-      return this.width / baseSize
-    },
     title() {
       return this.mediaMetadata.title || ''
     },
@@ -298,12 +321,18 @@ export default {
       if (this.recentEpisode) return this.recentEpisode.title
       const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
       if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
-      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix || '\u00A0' : this.title || '\u00A0'
+    },
+    displaySubtitle() {
+      if (!this.libraryItem) return '\u00A0'
+      if (this.collapsedSeries) return `${this.collapsedSeries.numBooks} ${this.$strings.LabelBooks}`
+      if (this.mediaMetadata.subtitle) return this.mediaMetadata.subtitle
+      if (this.mediaMetadata.seriesName) return this.mediaMetadata.seriesName
+      return ''
     },
     displayLineTwo() {
       if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
-      if (this.isMusic) return this.artist
       if (this.collapsedSeries) return ''
       if (this.isAuthorBookshelfView) {
         return this.mediaMetadata.publishedYear || ''
@@ -313,13 +342,16 @@ export default {
     },
     displaySortLine() {
       if (this.collapsedSeries) return null
-      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)
-      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)
-      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt, this.dateFormat)
-      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
-      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
-      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
-      if (this.orderBy === 'media.metadata.publishedYear' && this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
+      if (this.orderBy === 'mtimeMs') return this.$getString('LabelFileModifiedDate', [this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)])
+      if (this.orderBy === 'birthtimeMs') return this.$getString('LabelFileBornDate', [this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)])
+      if (this.orderBy === 'addedAt') return this.$getString('LabelAddedDate', [this.$formatDate(this._libraryItem.addedAt, this.dateFormat)])
+      if (this.orderBy === 'media.duration') return this.$strings.LabelDuration + ': ' + this.$elapsedPrettyExtended(this.media.duration, false)
+      if (this.orderBy === 'size') return this.$strings.LabelSize + ': ' + this.$bytesPretty(this._libraryItem.size)
+      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} ` + this.$strings.LabelEpisodes
+      if (this.orderBy === 'media.metadata.publishedYear') {
+        if (this.mediaMetadata.publishedYear) return this.$getString('LabelPublishedDate', [this.mediaMetadata.publishedYear])
+        return '\u00A0'
+      }
       return null
     },
     episodeProgress() {
@@ -328,7 +360,6 @@ export default {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.recentEpisode.id)
     },
     userProgress() {
-      if (this.isMusic) return null
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
@@ -384,7 +415,7 @@ export default {
       return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
     },
     showPlayButton() {
-      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
+      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode)
     },
     showSmallEBookIcon() {
       return !this.isSelectionMode && this.ebookFormat
@@ -428,8 +459,6 @@ export default {
       return this.store.getters['user/getIsAdminOrUp']
     },
     moreMenuItems() {
-      if (this.isMusic) return []
-
       if (this.recentEpisode) {
         const items = [
           {
@@ -486,6 +515,12 @@ export default {
             func: 'openPlaylists',
             text: this.$strings.LabelAddToPlaylist
           })
+          if (this.userIsAdminOrUp) {
+            items.push({
+              func: 'openShare',
+              text: this.$strings.LabelShare
+            })
+          }
         }
         if (this.ebookFormat && this.store.state.libraries.ereaderDevices?.length) {
           items.push({
@@ -557,16 +592,16 @@ export default {
       return this.$root.socket || this.$nuxt.$root.socket
     },
     titleFontSize() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
     },
     authorFontSize() {
-      return 0.6 * this.sizeMultiplier
+      return 0.6
     },
     placeholderCoverPadding() {
-      return 0.8 * this.sizeMultiplier
+      return 0.8
     },
     authorBottom() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
     },
     titleCleaned() {
       if (!this.title) return ''
@@ -590,14 +625,15 @@ export default {
       const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.AUTHOR
     },
-    titleDisplayBottomOffset() {
-      if (!this.isAlternativeBookshelfView && !this.isAuthorBookshelfView) return 0
-      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
-      return 4.25 * this.sizeMultiplier
-    },
     rssFeed() {
       if (this.booksInSeries) return null
       return this._libraryItem.rssFeed || null
+    },
+    mediaItemShare() {
+      return this._libraryItem.mediaItemShare || null
+    },
+    showSubtitles() {
+      return !this.isPodcast && this.store.getters['user/getUserSetting']('showSubtitles')
     }
   },
   methods: {
@@ -639,6 +675,9 @@ export default {
         if (this.$refs.displayTitle) {
           this.displayTitleTruncated = this.$refs.displayTitle.scrollWidth > this.$refs.displayTitle.clientWidth
         }
+        if (this.$refs.displaySubtitle) {
+          this.displaySubtitleTruncated = this.$refs.displaySubtitle.scrollWidth > this.$refs.displaySubtitle.clientWidth
+        }
       })
     },
     clickCard(e) {
@@ -664,7 +703,7 @@ export default {
     toggleFinished(confirmed = false) {
       if (!this.itemIsFinished && this.userProgressPercent > 0 && !confirmed) {
         const payload = {
-          message: `Are you sure you want to mark "${this.displayTitle}" as finished?`,
+          message: this.$getString('MessageConfirmMarkItemFinished', [this.displayTitle]),
           callback: (confirmed) => {
             if (confirmed) {
               this.toggleFinished(true)
@@ -709,18 +748,18 @@ export default {
         .then((data) => {
           var result = data.result
           if (!result) {
-            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
+            this.$toast.error(this.$getString('ToastRescanFailed', [this.displayTitle]))
           } else if (result === 'UPDATED') {
-            this.$toast.success(`Re-Scan complete item was updated`)
+            this.$toast.success(this.$strings.ToastRescanUpdated)
           } else if (result === 'UPTODATE') {
-            this.$toast.success(`Re-Scan complete item was up to date`)
+            this.$toast.success(this.$strings.ToastRescanUpToDate)
           } else if (result === 'REMOVED') {
-            this.$toast.error(`Re-Scan complete item was removed`)
+            this.$toast.error(this.$strings.ToastRescanRemoved)
           }
         })
         .catch((error) => {
           console.error('Failed to scan library item', error)
-          this.$toast.error('Failed to scan library item')
+          this.$toast.error(this.$strings.ToastScanFailed)
         })
         .finally(() => {
           this.processing = false
@@ -777,7 +816,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to remove series from home', error)
-          this.$toast.error('Failed to update user')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false
@@ -795,7 +834,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to hide item from home', error)
-          this.$toast.error('Failed to update user')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false
@@ -810,7 +849,7 @@ export default {
           episodeId: this.recentEpisode.id,
           title: this.recentEpisode.title,
           subtitle: this.mediaMetadata.title,
-          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+          caption: this.recentEpisode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
           duration: this.recentEpisode.audioFile.duration || null,
           coverPath: this.media.coverPath || null
         }
@@ -840,6 +879,10 @@ export default {
       this.store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.recentEpisode }])
       this.store.commit('globals/setShowPlaylistsModal', true)
     },
+    openShare() {
+      this.store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.store.commit('globals/setShareModal', this.mediaItemShare)
+    },
     deleteLibraryItem() {
       const payload = {
         message: this.$strings.MessageConfirmDeleteLibraryItem,
@@ -856,11 +899,11 @@ export default {
             axios
               .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
               .then(() => {
-                this.$toast.success('Item deleted')
+                this.$toast.success(this.$strings.ToastItemDeletedSuccess)
               })
               .catch((error) => {
                 console.error('Failed to delete item', error)
-                this.$toast.error('Failed to delete item')
+                this.$toast.error(this.$strings.ToastItemDeletedFailed)
               })
               .finally(() => {
                 this.processing = false
@@ -966,7 +1009,7 @@ export default {
                   episodeId: episode.id,
                   title: episode.title,
                   subtitle: this.mediaMetadata.title,
-                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+                  caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
                   duration: episode.audioFile.duration || null,
                   coverPath: this.media.coverPath || null
                 })

client/components/cards/LazyCollectionCard.vue

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

client/components/cards/LazyPlaylistCard.vue

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

client/components/cards/LazySeriesCard.vue

@@ -1,28 +1,32 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
-      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div cy-id="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+        <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+
+      <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
+      </div>
+
+      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+
+      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
+        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
+      </div>
+
+      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div cy-id="seriesLengthMarker" class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
-
-    <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
-
-    <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-    </div>
-
-    <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
-
-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       </div>
     </div>
-    <div cy-id="detailBottomText" v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
+      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -32,13 +36,14 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
     bookshelfView: {
       type: Number,
       default: 0
     },
-    isCategorized: Boolean,
     seriesMount: {
       type: Object,
       default: () => null
@@ -56,34 +61,42 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.store.getters['user/getSizeMultiplier']
     },
     seriesId() {
-      return this.series ? this.series.id : ''
+      return this.series?.id || ''
     },
     title() {
-      return this.series ? this.series.name : ''
+      return this.series?.name || ''
     },
     nameIgnorePrefix() {
-      return this.series ? this.series.nameIgnorePrefix : ''
+      return this.series?.nameIgnorePrefix || ''
     },
     displayTitle() {
-      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
-      return this.title
+      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title || '\u00A0'
+      return this.title || '\u00A0'
     },
     displaySortLine() {
       switch (this.orderBy) {
         case 'addedAt':
-          return `${this.$strings.LabelAdded} ${this.$formatDate(this.addedAt, this.dateFormat)}`
+          return this.$getString('LabelAddedDate', [this.$formatDate(this.addedAt, this.dateFormat)])
         case 'totalDuration':
           return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}`
         case 'lastBookUpdated':
@@ -97,13 +110,13 @@ export default {
       }
     },
     books() {
-      return this.series ? this.series.books || [] : []
+      return this.series?.books || []
     },
     addedAt() {
-      return this.series ? this.series.addedAt : 0
+      return this.series?.addedAt || 0
     },
     totalDuration() {
-      return this.series ? this.series.totalDuration : 0
+      return this.series?.totalDuration || 0
     },
     seriesBookProgress() {
       return this.books
@@ -148,7 +161,7 @@ export default {
       return this.bookshelfView == constants.BookshelfView.DETAIL
     },
     rssFeed() {
-      return this.series ? this.series.rssFeed : null
+      return this.series?.rssFeed
     }
   },
   methods: {

client/components/cards/NarratorCard.vue

@@ -1,17 +1,19 @@
 <template>
-  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-    <div cy-id="card" :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
-        <span class="material-icons-outlined text-[10rem]">record_voice_over</span>
-      </div>
+  <div>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
+      <div cy-id="card" :style="{ width: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
+          <span class="material-symbols text-[10em]">&#xe91f;</span>
+        </div>
 
-      <!-- Narrator name & num books overlay -->
-      <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-        <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-        <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        <!-- Narrator name & num books overlay -->
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+          <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+          <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        </div>
       </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>
 
 <script>
@@ -21,23 +23,22 @@ export default {
       type: Object,
       default: () => {}
     },
-    width:  {
-      type: Number,
-      default: 150
-    },
-    height: { 
+    width: Number,
+    height: {
       type: Number,
       default: 100
-    },
-    sizeMultiplier: {
-      type: Number,
-      default: 1
     }
   },
   data() {
     return {}
   },
   computed: {
+    cardWidth() {
+      return this.cardHeight * 1.5
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
     name() {
       return this.narrator?.name || ''
     },
@@ -49,8 +50,11 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {}
 }
-</script>
+</script>

client/components/cards/NarratorSearchCard.vue

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

client/components/cards/NotificationCard.vue

@@ -4,11 +4,11 @@
       <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="fireTestEventAndSucceed">{{ this.$strings.ButtonFireOnTest }}</ui-btn>
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="red-600" @click.stop="fireTestEventAndFail">{{ this.$strings.ButtonFireAndFail }}</ui-btn>
       <!-- <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="rapidFireTestEvents">Rapid Fire</ui-btn> -->
-      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
-      <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</ui-btn>
+      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">{{ this.$strings.ButtonTest }}</ui-btn>
+      <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">{{ this.$strings.ButtonEnable }}</ui-btn>
 
       <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
       <ui-icon-btn bg-color="error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
@@ -65,12 +65,12 @@ export default {
       this.$axios
         .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
         .then(() => {
-          this.$toast.success('Triggered onTest Event')
+          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
           const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger onTest event')
+          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
         })
         .finally(() => {
           this.testing = false
@@ -91,7 +91,7 @@ export default {
     // End testing functions
     sendTestClick() {
       const payload = {
-        message: `Trigger this notification with test data?`,
+        message: this.$strings.MessageConfirmNotificationTestTrigger,
         callback: (confirmed) => {
           if (confirmed) {
             this.sendTest()
@@ -106,12 +106,12 @@ export default {
       this.$axios
         .$get(`/api/notifications/${this.notification.id}/test`)
         .then(() => {
-          this.$toast.success('Triggered test notification')
+          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
         })
         .catch((error) => {
           console.error('Failed', error)
           const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger test notification')
+          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
         })
         .finally(() => {
           this.sendingTest = false
@@ -127,11 +127,10 @@ export default {
         .$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')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.enabling = false
@@ -139,7 +138,7 @@ export default {
     },
     deleteNotificationClick() {
       const payload = {
-        message: `Are you sure you want to delete this notification?`,
+        message: this.$strings.MessageConfirmDeleteNotification,
         callback: (confirmed) => {
           if (confirmed) {
             this.deleteNotification()
@@ -155,11 +154,10 @@ export default {
         .$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')
+          this.$toast.error(this.$strings.ToastNotificationDeleteFailed)
         })
         .finally(() => {
           this.deleting = false
@@ -171,4 +169,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/cards/TagSearchCard.vue

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

client/components/content/LibraryItemDetails.vue

@@ -27,38 +27,6 @@
         <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=publishers.${$encode(publisher)}`" class="hover:underline">{{ publisher }}</nuxt-link>
       </div>
     </div>
-    <div v-if="musicAlbum" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
-      </div>
-      <div>
-        {{ musicAlbum }}
-      </div>
-    </div>
-    <div v-if="musicAlbumArtist" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
-      </div>
-      <div>
-        {{ musicAlbumArtist }}
-      </div>
-    </div>
-    <div v-if="musicTrackPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
-      </div>
-      <div>
-        {{ musicTrackPretty }}
-      </div>
-    </div>
-    <div v-if="musicDiscPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-      </div>
-      <div>
-        {{ musicDiscPretty }}
-      </div>
-    </div>
     <div v-if="podcastType" class="flex py-0.5">
       <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
         <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPodcastType }}</span>
@@ -97,7 +65,7 @@
         <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=languages.${$encode(language)}`" class="hover:underline">{{ language }}</nuxt-link>
       </div>
     </div>
-    <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
+    <div v-if="tracks.length || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
       <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
         <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
       </div>
@@ -134,10 +102,6 @@ export default {
     isPodcast() {
       return this.libraryItem.mediaType === 'podcast'
     },
-    audioFile() {
-      // Music track
-      return this.media.audioFile
-    },
     media() {
       return this.libraryItem.media || {}
     },
@@ -168,25 +132,6 @@ export default {
     publisher() {
       return this.mediaMetadata.publisher || ''
     },
-    musicArtists() {
-      return this.mediaMetadata.artists || []
-    },
-    musicAlbum() {
-      return this.mediaMetadata.album || ''
-    },
-    musicAlbumArtist() {
-      return this.mediaMetadata.albumArtist || ''
-    },
-    musicTrackPretty() {
-      if (!this.mediaMetadata.trackNumber) return null
-      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
-      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
-    },
-    musicDiscPretty() {
-      if (!this.mediaMetadata.discNumber) return null
-      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
-      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
-    },
     narrators() {
       return this.mediaMetadata.narrators || []
     },
@@ -220,4 +165,4 @@ export default {
   methods: {},
   mounted() {}
 }
-</script>
+</script>

client/components/controls/FilterSelect.vue

@@ -10,7 +10,7 @@
         </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>
+        <span class="material-symbols" style="font-size: 1.1rem">close</span>
       </div>
     </button>
 
@@ -24,7 +24,7 @@
 
             <!-- selected checkmark icon -->
             <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
+              <span class="material-symbols text-base text-yellow-400">check</span>
             </div>
           </li>
         </template>

client/components/controls/GlobalSearch.vue

@@ -5,11 +5,11 @@
         <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
       </form>
       <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-        <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
-        <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
+        <span v-if="!search" class="material-symbols" style="font-size: 1.2rem">&#xe8b6;</span>
+        <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
       </div>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu" @mousedown.stop.prevent>
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
           <p>{{ $strings.MessageThinking }}</p>
@@ -25,7 +25,7 @@
           <template v-for="item in bookResults">
             <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+                <cards-item-search-card :library-item="item.libraryItem" />
               </nuxt-link>
             </li>
           </template>
@@ -34,7 +34,7 @@
           <template v-for="item in podcastResults">
             <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+                <cards-item-search-card :library-item="item.libraryItem" />
               </nuxt-link>
             </li>
           </template>
@@ -42,7 +42,7 @@
           <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)}`">
+              <nuxt-link :to="`/author/${item.id}`">
                 <cards-author-search-card :author="item" />
               </nuxt-link>
             </li>
@@ -59,9 +59,18 @@
 
           <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">
+            <li :key="`tag.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
-                <cards-tag-search-card :tag="item.name" />
+                <cards-tag-search-card :tag="item.name" :num-items="item.numItems" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="genreResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelGenres }}</p>
+          <template v-for="item in genreResults">
+            <li :key="`genre.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(item.name)}`">
+                <cards-genre-search-card :genre="item.name" :num-items="item.numItems" />
               </nuxt-link>
             </li>
           </template>
@@ -70,7 +79,7 @@
           <template v-for="narrator in narratorResults">
             <li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
-                <cards-narrator-search-card :narrator="narrator.name" />
+                <cards-narrator-search-card :narrator="narrator.name" :num-books="narrator.numBooks" />
               </nuxt-link>
             </li>
           </template>
@@ -95,6 +104,7 @@ export default {
       authorResults: [],
       seriesResults: [],
       tagResults: [],
+      genreResults: [],
       narratorResults: [],
       searchTimeout: null,
       lastSearch: null
@@ -105,7 +115,7 @@ export default {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length
     }
   },
   methods: {
@@ -116,7 +126,7 @@ export default {
       if (!this.search) return
       var search = this.search
       this.clearResults()
-      this.$router.push(`/library/${this.currentLibraryId}/search?q=${search}`)
+      this.$router.push(`/library/${this.currentLibraryId}/search?q=${encodeURIComponent(search)}`)
     },
     clearResults() {
       this.search = null
@@ -126,6 +136,7 @@ export default {
       this.authorResults = []
       this.seriesResults = []
       this.tagResults = []
+      this.genreResults = []
       this.narratorResults = []
       this.showMenu = false
       this.isFetching = false
@@ -146,7 +157,7 @@ export default {
       clearTimeout(this.focusTimeout)
       this.focusTimeout = setTimeout(() => {
         this.showMenu = false
-      }, 200)
+      }, 100)
     },
     async runSearch(value) {
       this.lastSearch = value
@@ -155,7 +166,7 @@ export default {
       }
       this.isFetching = true
 
-      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
+      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${encodeURIComponent(value)}&limit=3`).catch((error) => {
         console.error('Search error', error)
         return []
       })
@@ -168,6 +179,7 @@ export default {
       this.authorResults = searchResults.authors || []
       this.seriesResults = searchResults.series || []
       this.tagResults = searchResults.tags || []
+      this.genreResults = searchResults.genres || []
       this.narratorResults = searchResults.narrators || []
 
       this.isFetching = false
@@ -203,4 +215,4 @@ export default {
 .globalSearchMenu {
   max-height: calc(100vh - 75px);
 }
-</style>
+</style>

client/components/controls/LibraryFilterSelect.vue

@@ -10,7 +10,7 @@
         </svg>
       </span>
       <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
-        <span class="material-icons" style="font-size: 1.1rem">close</span>
+        <span class="material-symbols" style="font-size: 1.1rem">close</span>
       </div>
     </button>
 
@@ -22,11 +22,11 @@
               <span class="font-normal ml-3 block truncate text-sm">{{ item.text }}</span>
             </div>
             <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-icons text-2xl">arrow_right</span>
+              <span class="material-symbols text-2xl">arrow_right</span>
             </div>
             <!-- selected checkmark icon -->
             <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
+              <span class="material-symbols text-base text-yellow-400">check</span>
             </div>
           </li>
         </template>
@@ -34,15 +34,15 @@
       <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="option" @click="sublist = null">
           <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
-            <span class="material-icons text-2xl">arrow_left</span>
+            <span class="material-symbols text-2xl">arrow_left</span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">Back</span>
+            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
           </div>
         </li>
         <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
           <div class="flex items-center justify-center">
-            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+            <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
           </div>
         </li>
         <template v-for="item in sublistItems">
@@ -52,7 +52,7 @@
             </div>
             <!-- selected checkmark icon -->
             <div v-if="`${sublist}.${item.value}` === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
+              <span class="material-symbols text-base text-yellow-400">check</span>
             </div>
           </li>
         </template>
@@ -89,15 +89,15 @@ export default {
         this.$emit('input', val)
       }
     },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     libraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
     isPodcast() {
       return this.libraryMediaType === 'podcast'
     },
-    isMusic() {
-      return this.libraryMediaType === 'music'
-    },
     seriesItems() {
       return [
         {
@@ -106,31 +106,37 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
           value: 'authors',
           sublist: true
         },
         {
           text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
           value: 'narrators',
           sublist: true
         },
         {
           text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
           value: 'publishers',
           sublist: true
         },
         {
           text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
           value: 'languages',
           sublist: true
         },
@@ -142,43 +148,56 @@ export default {
       ]
     },
     bookItems() {
-      return [
+      const items = [
         {
           text: this.$strings.LabelAll,
           value: 'all'
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.LabelSeries,
+          textPlural: this.$strings.LabelSeries,
           value: 'series',
           sublist: true
         },
         {
           text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
           value: 'authors',
           sublist: true
         },
         {
           text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
           value: 'narrators',
           sublist: true
         },
         {
           text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
           value: 'publishers',
           sublist: true
         },
+        {
+          text: this.$strings.LabelPublishedDecade,
+          textPlural: this.$strings.LabelPublishedDecades,
+          value: 'publishedDecades',
+          sublist: true
+        },
         {
           text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
           value: 'languages',
           sublist: true
         },
@@ -218,6 +237,14 @@ export default {
           sublist: false
         }
       ]
+      if (this.userIsAdminOrUp) {
+        items.push({
+          text: this.$strings.LabelShareOpen,
+          value: 'share-open',
+          sublist: false
+        })
+      }
+      return items
     },
     podcastItems() {
       return [
@@ -227,16 +254,19 @@ export default {
         },
         {
           text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
           value: 'genres',
           sublist: true
         },
         {
           text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
           value: 'tags',
           sublist: true
         },
         {
           text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
           value: 'languages',
           sublist: true
         },
@@ -247,38 +277,21 @@ export default {
         }
       ]
     },
-    musicItems() {
-      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
-      if (this.isMusic) return this.musicItems
       return this.bookItems
     },
     selectedItemSublist() {
       return this.selected?.includes('.') ? this.selected.split('.')[0] : null
     },
+    selectedSublistText() {
+      if (!this.sublist) {
+        return ''
+      }
+      const sublistItem = this.selectItems.find((i) => i.value === this.sublist)
+      return sublistItem?.textPlural || sublistItem?.text || ''
+    },
     selectedText() {
       if (!this.selected) return ''
       const parts = this.selected.split('.')
@@ -331,6 +344,9 @@ export default {
     publishers() {
       return this.filterData.publishers || []
     },
+    publishedDecades() {
+      return this.filterData.publishedDecades || []
+    },
     progress() {
       return [
         {
@@ -397,21 +413,17 @@ export default {
           id: 'isbn',
           name: 'ISBN'
         },
-        {
-          id: 'subtitle',
-          name: this.$strings.LabelSubtitle
-        },
         {
           id: 'authors',
           name: this.$strings.LabelAuthor
         },
         {
-          id: 'publishedYear',
-          name: this.$strings.LabelPublishYear
+          id: 'chapters',
+          name: this.$strings.LabelChapters
         },
         {
-          id: 'series',
-          name: this.$strings.LabelSeries
+          id: 'cover',
+          name: this.$strings.LabelCover
         },
         {
           id: 'description',
@@ -422,24 +434,32 @@ export default {
           name: this.$strings.LabelGenres
         },
         {
-          id: 'tags',
-          name: this.$strings.LabelTags
+          id: 'language',
+          name: this.$strings.LabelLanguage
         },
         {
           id: 'narrators',
           name: this.$strings.LabelNarrator
         },
+        {
+          id: 'publishedYear',
+          name: this.$strings.LabelPublishYear
+        },
         {
           id: 'publisher',
           name: this.$strings.LabelPublisher
         },
         {
-          id: 'language',
-          name: this.$strings.LabelLanguage
+          id: 'series',
+          name: this.$strings.LabelSeries
         },
         {
-          id: 'cover',
-          name: this.$strings.LabelCover
+          id: 'subtitle',
+          name: this.$strings.LabelSubtitle
+        },
+        {
+          id: 'tags',
+          name: this.$strings.LabelTags
         }
       ]
     },
@@ -505,4 +525,4 @@ export default {
 .libraryFilterMenu {
   max-height: calc(100vh - 125px);
 }
-</style>
+</style>

client/components/controls/LibrarySortSelect.vue

@@ -3,7 +3,7 @@
     <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="material-symbols text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
@@ -14,7 +14,7 @@
             <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            <span class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
           </span>
         </li>
       </template>
@@ -56,9 +56,6 @@ export default {
     isPodcast() {
       return this.libraryMediaType === 'podcast'
     },
-    isMusic() {
-      return this.libraryMediaType === 'music'
-    },
     podcastItems() {
       return [
         {
@@ -88,6 +85,10 @@ export default {
         {
           text: this.$strings.LabelFileModified,
           value: 'mtimeMs'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
         }
       ]
     },
@@ -128,6 +129,10 @@ export default {
         {
           text: this.$strings.LabelFileModified,
           value: 'mtimeMs'
+        },
+        {
+          text: this.$strings.LabelRandomly,
+          value: 'random'
         }
       ]
     },
@@ -140,40 +145,10 @@ export default {
         }
       ]
     },
-    musicItems() {
-      return [
-        {
-          text: this.$strings.LabelTitle,
-          value: 'media.metadata.title'
-        },
-        {
-          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'
-        }
-      ]
-    },
     selectItems() {
       let items = null
       if (this.isPodcast) {
         items = this.podcastItems
-      } else if (this.isMusic) {
-        items = this.musicItems
       } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
         items = this.seriesItems
       } else {
@@ -215,4 +190,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/controls/PlaybackSpeedControl.vue

@@ -1,9 +1,9 @@
 <template>
   <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
     <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
+      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-20 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
+    <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
       <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
@@ -11,12 +11,12 @@
         <template v-for="rate in rates">
           <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">x</span></p>
+              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
             </div>
           </div>
         </template>
       </div>
-      <div class="w-full py-1 px-4">
+      <div class="w-full py-1 px-1">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
           <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">x</span></p>
@@ -41,7 +41,7 @@ export default {
       currentPlaybackRate: 0,
       MIN_SPEED: 0.5,
       MAX_SPEED: 10,
-      menuLeft: -92,
+      menuLeft: -96,
       arrowLeft: 0
     }
   },
@@ -89,9 +89,9 @@ export default {
       if (boundingBox.left + 110 > window.innerWidth - 10) {
         this.menuLeft = window.innerWidth - 230 - boundingBox.left
 
-        this.arrowLeft = Math.abs(this.menuLeft) - 92
+        this.arrowLeft = Math.abs(this.menuLeft) - 96
       } else {
-        this.menuLeft = -92
+        this.menuLeft = -96
         this.arrowLeft = 0
       }
     },
@@ -109,4 +109,4 @@ export default {
     this.currentPlaybackRate = this.playbackRate
   }
 }
-</script>
+</script>

client/components/controls/SortSelect.vue

@@ -3,7 +3,7 @@
     <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="material-symbols text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
@@ -14,7 +14,7 @@
             <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            <span class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
           </span>
         </li>
       </template>

client/components/controls/VolumeControl.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
     <button :aria-label="$strings.LabelVolume" class="text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
-      <span class="material-icons text-2xl sm:text-3xl">{{ volumeIcon }}</span>
+      <span class="material-symbols text-2xl sm:text-3xl">{{ volumeIcon }}</span>
     </button>
     <transition name="menux">
-      <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
-        <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
-          <div class="bg-gray-100 h-full absolute left-0 top-0 pointer-events-none rounded-full" :style="{ width: volume * trackWidth + 'px' }" />
-          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ left: cursorLeft + 'px', top: '-3px' }" />
+      <div v-show="isOpen" class="volumeMenu h-28 absolute bottom-2 w-6 py-2 bg-bg shadow-sm rounded-lg" style="top: -116px">
+        <div ref="volumeTrack" class="w-1 h-full bg-gray-500 mx-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
+          <div class="bg-gray-100 w-full absolute left-0 bottom-0 pointer-events-none rounded-full" :style="{ height: volume * trackHeight + 'px' }" />
+          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ bottom: cursorBottom + 'px', left: '-3px' }" />
         </div>
       </div>
     </transition>
@@ -24,10 +24,10 @@ export default {
       isOpen: false,
       isDragging: false,
       isHovering: false,
-      posX: 0,
+      posY: 0,
       lastValue: 0.5,
       isMute: false,
-      trackWidth: 112 - 20,
+      trackHeight: 112 - 20,
       openTimeout: null
     }
   },
@@ -45,9 +45,9 @@ export default {
         this.$emit('input', val)
       }
     },
-    cursorLeft() {
-      var left = this.trackWidth * this.volume
-      return left - 3
+    cursorBottom() {
+      var bottom = this.trackHeight * this.volume
+      return bottom - 3
     },
     volumeIcon() {
       if (this.volume <= 0) return 'volume_mute'
@@ -89,17 +89,10 @@ export default {
       }, 600)
     },
     mousemove(e) {
-      var diff = this.posX - e.x
-      this.posX = e.x
-      var volShift = 0
-      if (diff < 0) {
-        // Volume up
-        volShift = diff / this.trackWidth
-      } else {
-        // volume down
-        volShift = diff / this.trackWidth
-      }
-      var newVol = this.volume - volShift
+      var diff = this.posY - e.y
+      this.posY = e.y
+      var volShift = diff / this.trackHeight
+      var newVol = this.volume + volShift
       newVol = Math.min(Math.max(0, newVol), 1)
       this.volume = newVol
       e.preventDefault()
@@ -113,8 +106,8 @@ export default {
     },
     mousedownTrack(e) {
       this.isDragging = true
-      this.posX = e.x
-      var vol = e.offsetX / this.trackWidth
+      this.posY = e.y
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
       document.body.addEventListener('mousemove', this.mousemove)
@@ -137,7 +130,7 @@ export default {
       this.clickVolumeIcon()
     },
     clickVolumeTrack(e) {
-      var vol = e.offsetX / this.trackWidth
+      var vol = 1 - e.offsetY / this.trackHeight
       vol = Math.min(Math.max(vol, 0), 1)
       this.volume = vol
     }
@@ -147,7 +140,7 @@ export default {
       this.isMute = true
     }
     const storageVolume = localStorage.getItem('volume')
-    if (storageVolume) {
+    if (storageVolume && !isNaN(storageVolume)) {
       this.volume = parseFloat(storageVolume)
     }
   },
@@ -157,4 +150,4 @@ export default {
     document.body.removeEventListener('mouseup', this.mouseup)
   }
 }
-</script>
+</script>

client/components/covers/AuthorImage.vue

@@ -56,24 +56,15 @@ export default {
     },
     imgSrc() {
       if (!this.imagePath) return null
-      if (process.env.NODE_ENV !== 'production') {
-        // Testing
-        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}`
+      return `${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
     }
   },
   methods: {
     imageLoaded() {
-      var aspectRatio = 1.25
-      if (this.$refs.wrapper) {
-        aspectRatio = this.$refs.wrapper.clientHeight / this.$refs.wrapper.clientWidth
-      }
       if (this.$refs.img) {
         var { naturalWidth, naturalHeight } = this.$refs.img
         var imgAr = naturalHeight / naturalWidth
-        var arDiff = Math.abs(imgAr - aspectRatio)
-        if (arDiff > 0.15) {
+        if (imgAr < 0.5 || imgAr > 2) {
           this.showCoverBg = true
         } else {
           this.showCoverBg = false

client/components/covers/PreviewCover.vue

@@ -7,7 +7,7 @@
       <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>
+        <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
       </a>
     </div>
 

client/components/modals/AccountModal.vue

@@ -69,6 +69,15 @@
               </div>
             </div>
 
+            <div class="flex items-center my-2 max-w-md">
+              <div class="w-1/2">
+                <p id="ereader-permissions-toggle">{{ $strings.LabelPermissionsCreateEreader }}</p>
+              </div>
+              <div class="w-1/2">
+                <ui-toggle-switch labeledBy="ereader-permissions-toggle" v-model="newUser.permissions.createEreader" />
+              </div>
+            </div>
+
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
                 <p id="explicit-content-permissions-toggle">{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
@@ -111,7 +120,7 @@
           </div>
 
           <div class="flex pt-4 px-2">
-            <ui-btn v-if="hasOpenIDLink" small :loading="unlinkingFromOpenID" color="primary" type="button" class="mr-2" @click.stop="unlinkOpenID">Unlink OpenID</ui-btn>
+            <ui-btn v-if="hasOpenIDLink" small :loading="unlinkingFromOpenID" color="primary" type="button" class="mr-2" @click.stop="unlinkOpenID">{{ $strings.ButtonUnlinkOpenId }}</ui-btn>
             <ui-btn v-if="isEditingRoot" small class="flex items-center" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
@@ -212,19 +221,19 @@ export default {
     },
     unlinkOpenID() {
       const payload = {
-        message: 'Are you sure you want to unlink this user from OpenID?',
+        message: this.$strings.MessageConfirmUnlinkOpenId,
         callback: (confirmed) => {
           if (confirmed) {
             this.unlinkingFromOpenID = true
             this.$axios
               .$patch(`/api/users/${this.account.id}/openid-unlink`)
               .then(() => {
-                this.$toast.success('User unlinked from OpenID')
+                this.$toast.success(this.$strings.ToastUnlinkOpenIdSuccess)
                 this.show = false
               })
               .catch((error) => {
                 console.error('Failed to unlink user from OpenID', error)
-                this.$toast.error('Failed to unlink user from OpenID')
+                this.$toast.error(this.$strings.ToastUnlinkOpenIdFailed)
               })
               .finally(() => {
                 this.unlinkingFromOpenID = false
@@ -265,15 +274,15 @@ export default {
     },
     submitForm() {
       if (!this.newUser.username) {
-        this.$toast.error('Enter a username')
+        this.$toast.error(this.$strings.ToastNewUserUsernameError)
         return
       }
       if (!this.newUser.permissions.accessAllLibraries && !this.newUser.librariesAccessible.length) {
-        this.$toast.error('Must select at least one library')
+        this.$toast.error(this.$strings.ToastNewUserLibraryError)
         return
       }
       if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsSelected.length) {
-        this.$toast.error('Must select at least one tag')
+        this.$toast.error(this.$strings.ToastNewUserTagError)
         return
       }
 
@@ -296,7 +305,7 @@ export default {
         .then((data) => {
           this.processing = false
           if (data.error) {
-            this.$toast.error(`${this.$strings.ToastAccountUpdateFailed}: ${data.error}`)
+            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
 
@@ -313,12 +322,12 @@ export default {
           this.processing = false
           console.error('Failed to update account', error)
           var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || 'Failed to update account')
+          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
         })
     },
     submitCreateAccount() {
       if (!this.newUser.password) {
-        this.$toast.error('Must have a password, only root user can have an empty password')
+        this.$toast.error(this.$strings.ToastNewUserPasswordError)
         return
       }
 
@@ -329,9 +338,9 @@ export default {
         .then((data) => {
           this.processing = false
           if (data.error) {
-            this.$toast.error(`Failed to create account: ${data.error}`)
+            this.$toast.error(this.$strings.ToastNewUserCreatedFailed + ': ' + data.error)
           } else {
-            this.$toast.success('New account created')
+            this.$toast.success(this.$strings.ToastNewUserCreatedSuccess)
             this.show = false
           }
         })
@@ -351,9 +360,11 @@ export default {
         update: type === 'admin',
         delete: type === 'admin',
         upload: type === 'admin',
+        accessExplicitContent: type === 'admin',
         accessAllLibraries: true,
         accessAllTags: true,
-        selectedTagsNotAccessible: false
+        selectedTagsNotAccessible: false,
+        createEreader: type === 'admin'
       }
     },
     init() {
@@ -385,7 +396,9 @@ export default {
             upload: false,
             accessAllLibraries: true,
             accessAllTags: true,
-            selectedTagsNotAccessible: false
+            accessExplicitContent: false,
+            selectedTagsNotAccessible: false,
+            createEreader: false
           },
           librariesAccessible: [],
           itemTagsSelected: []

client/components/modals/AddCustomMetadataProviderModal.vue

@@ -2,7 +2,7 @@
   <modals-modal ref="modal" v-model="show" name="custom-metadata-provider" :width="600" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">Add custom metadata provider</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderAddCustomMetadataProvider }}</p>
       </div>
     </template>
     <form @submit.prevent="submitForm">
@@ -20,7 +20,7 @@
             <ui-text-input-with-label v-model="newUrl" label="URL" />
           </div>
           <div class="w-full mb-2 p-1">
-            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="'Authorization Header Value'" type="password" />
+            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="$strings.LabelProviderAuthorizationValue" type="password" />
           </div>
           <div class="flex px-1 pt-4">
             <div class="flex-grow" />
@@ -67,7 +67,7 @@ export default {
   methods: {
     submitForm() {
       if (!this.newName || !this.newUrl) {
-        this.$toast.error('Must add name and url')
+        this.$toast.error(this.$strings.ToastProviderNameAndUrlRequired)
         return
       }
 
@@ -81,13 +81,13 @@ export default {
         })
         .then((data) => {
           this.$emit('added', data.provider)
-          this.$toast.success('New provider added')
+          this.$toast.success(this.$strings.ToastProviderCreatedSuccess)
           this.show = false
         })
         .catch((error) => {
           const errorMsg = error.response?.data || 'Unknown error'
           console.error('Failed to add provider', error)
-          this.$toast.error('Failed to add provider: ' + errorMsg)
+          this.$toast.error(this.$strings.ToastProviderCreatedFailed + ': ' + errorMsg)
         })
         .finally(() => {
           this.processing = false

client/components/modals/AudioFileDataModal.vue

@@ -4,7 +4,7 @@
       <div class="flex items-center justify-between">
         <p class="text-base text-gray-200 truncate">{{ metadata.filename }}</p>
         <ui-btn v-if="ffprobeData" small class="ml-2" @click="ffprobeData = null">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">Probe Audio File</ui-btn>
+        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">{{ $strings.ButtonProbeAudioFile }}</ui-btn>
       </div>
 
       <div class="w-full h-px bg-white bg-opacity-10 my-4" />
@@ -91,7 +91,7 @@
           <ui-textarea-with-label :value="prettyFfprobeData" readonly :rows="30" class="text-xs" />
 
           <button class="absolute top-4 right-4" :class="copiedToClipboard ? 'text-success' : 'text-white/50 hover:text-white/80'" @click.stop="copyFfprobeData">
-            <span class="material-icons">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
+            <span class="material-symbols">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
           </button>
         </div>
       </div>
@@ -159,7 +159,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to get ffprobe data', error)
-          this.$toast.error('FFProbe failed')
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
         })
         .finally(() => {
           this.probingFile = false

client/components/modals/BackupScheduleModal.vue

@@ -9,7 +9,7 @@
       <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>
+        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdatesWereNecessary }}</ui-btn>
       </div>
     </div>
   </modals-modal>

client/components/modals/BatchQuickMatchModel.vue

@@ -19,7 +19,7 @@
             <ui-tooltip :text="$strings.LabelUpdateCoverHelp">
               <p class="pl-4">
                 {{ $strings.LabelUpdateCover }}
-                <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-symbols icon-text">info</span>
               </p>
             </ui-tooltip>
           </div>
@@ -28,7 +28,7 @@
             <ui-tooltip :text="$strings.LabelUpdateDetailsHelp">
               <p class="pl-4">
                 {{ $strings.LabelUpdateDetails }}
-                <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-symbols icon-text">info</span>
               </p>
             </ui-tooltip>
           </div>
@@ -116,10 +116,10 @@ export default {
           libraryItemIds: this.selectedBookIds
         })
         .then(() => {
-          this.$toast.info('Batch quick match of ' + this.selectedBookIds.length + ' books started!')
+          this.$toast.info(this.$getString('ToastBatchQuickMatchStarted', [this.selectedBookIds.length]))
         })
         .catch((error) => {
-          this.$toast.error('Batch quick match failed')
+          this.$toast.error(this.$strings.ToastBatchQuickMatchFailed)
           console.error('Failed to batch quick match', error)
         })
         .finally(() => {

client/components/modals/BookmarksModal.vue

@@ -24,7 +24,7 @@
             <div class="flex-grow px-2">
               <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
             </div>
-            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons text-2xl -mt-px">add</span></ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">add</span></ui-btn>
           </div>
         </form>
       </div>
@@ -94,7 +94,7 @@ export default {
           this.$toast.success(this.$strings.ToastBookmarkRemoveSuccess)
         })
         .catch((error) => {
-          this.$toast.error(this.$strings.ToastBookmarkRemoveFailed)
+          this.$toast.error(this.$strings.ToastRemoveFailed)
           console.error(error)
         })
       this.show = false
@@ -110,7 +110,7 @@ export default {
           this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
         })
         .catch((error) => {
-          this.$toast.error(this.$strings.ToastBookmarkUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           console.error(error)
         })
       this.show = false

client/components/modals/ChaptersModal.vue

@@ -1,8 +1,8 @@
 <template>
   <modals-modal v-model="show" name="chapters" :width="600" :height="'unset'">
-    <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+    <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <template v-for="chap in chapters">
-        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end / _playbackRate <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
+        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer relative" :class="chap.id === currentChapterId ? 'bg-yellow-400/20 hover:bg-yellow-400/10' : chap.end / _playbackRate <= currentChapterStart ? 'bg-success/10 hover:bg-success/5' : 'hover:bg-primary/10'" @click="clickChapter(chap)">
           <p class="chapter-title truncate text-sm md:text-base">
             {{ chap.title }}
           </p>
@@ -87,4 +87,4 @@ export default {
     max-width: calc(100% - 150px);
   }
 }
-</style>
+</style>

client/components/modals/EditSeriesInputInnerModal.vue

@@ -1,14 +1,14 @@
 <template>
   <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 61" @click="clickClose">
     <div class="absolute top-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
-      <span class="material-icons text-2xl md:text-4xl">close</span>
+      <span class="material-symbols text-2xl md:text-4xl">close</span>
     </div>
     <div ref="content" class="text-white">
       <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
         <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="$strings.LabelSeriesName" />
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" @input="seriesNameInputHandler" />
             </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="$strings.LabelSequence" />
@@ -66,6 +66,11 @@ export default {
     }
   },
   methods: {
+    seriesNameInputHandler() {
+      if (this.$refs.sequenceInput) {
+        this.$refs.sequenceInput.setFocus()
+      }
+    },
     setInputFocus() {
       if (this.isNewSeries) {
         // Focus on series input if new series
@@ -134,4 +139,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/modals/ListeningSessionModal.vue

@@ -80,8 +80,8 @@
           </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">{{ $strings.LabelUser }}</p>
-          <p class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
+          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
 
           <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
           <p class="mb-1">{{ playMethodName }}</p>
@@ -99,8 +99,8 @@
       </div>
 
       <div class="flex items-center">
-        <ui-btn v-if="!isOpenSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-else small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
+        <ui-btn v-if="!isOpenSession && !isMediaItemShareSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-else-if="!isMediaItemShareSession" small color="error" @click.stop="closeSessionClick">{{ $strings.ButtonCloseSession }}</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -166,6 +166,9 @@ export default {
     },
     isOpenSession() {
       return !!this._session.open
+    },
+    isMediaItemShareSession() {
+      return this._session.mediaPlayer === 'web-share'
     }
   },
   methods: {
@@ -203,14 +206,13 @@ export default {
       this.$axios
         .$post(`/api/session/${this._session.id}/close`)
         .then(() => {
-          this.$toast.success('Session closed')
           this.show = false
           this.$emit('closedSession')
         })
         .catch((error) => {
           console.error('Failed to close session', error)
           const errMsg = error.response?.data || ''
-          this.$toast.error(errMsg || 'Failed to close open session')
+          this.$toast.error(errMsg || this.$strings.ToastSessionCloseFailed)
         })
         .finally(() => {
           this.processing = false

client/components/modals/Modal.vue

@@ -3,7 +3,7 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
-      <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
+      <span class="material-symbols text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
     </button>
     <slot name="outer" />
     <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">

client/components/modals/PlayerSettingsModal.vue

@@ -0,0 +1,70 @@
+<template>
+  <modals-modal v-model="show" name="player-settings" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh; min-height: 40vh">
+      <h3 class="text-xl font-semibold mb-8">{{ $strings.HeaderPlayerSettings }}</h3>
+      <div class="flex items-center mb-4">
+        <ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" />
+        <div class="pl-4">
+          <span>{{ $strings.LabelUseChapterTrack }}</span>
+        </div>
+      </div>
+      <div class="flex items-center mb-4">
+        <ui-select-input v-model="jumpForwardAmount" :label="$strings.LabelJumpForwardAmount" menuMaxHeight="250px" :items="jumpValues" @input="setJumpForwardAmount" />
+      </div>
+      <div class="flex items-center">
+        <ui-select-input v-model="jumpBackwardAmount" :label="$strings.LabelJumpBackwardAmount" menuMaxHeight="250px" :items="jumpValues" @input="setJumpBackwardAmount" />
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  data() {
+    return {
+      useChapterTrack: false,
+      jumpValues: [
+        { text: this.$getString('LabelTimeDurationXSeconds', ['10']), value: 10 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['15']), value: 15 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['30']), value: 30 },
+        { text: this.$getString('LabelTimeDurationXSeconds', ['60']), value: 60 },
+        { text: this.$getString('LabelTimeDurationXMinutes', ['2']), value: 120 },
+        { text: this.$getString('LabelTimeDurationXMinutes', ['5']), value: 300 }
+      ],
+      jumpForwardAmount: 10,
+      jumpBackwardAmount: 10
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    setUseChapterTrack() {
+      this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
+    },
+    setJumpForwardAmount(val) {
+      this.jumpForwardAmount = val
+      this.$store.dispatch('user/updateUserSettings', { jumpForwardAmount: val })
+    },
+    setJumpBackwardAmount(val) {
+      this.jumpBackwardAmount = val
+      this.$store.dispatch('user/updateUserSettings', { jumpBackwardAmount: val })
+    }
+  },
+  mounted() {
+    this.useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack')
+    this.jumpForwardAmount = this.$store.getters['user/getUserSetting']('jumpForwardAmount')
+    this.jumpBackwardAmount = this.$store.getters['user/getUserSetting']('jumpBackwardAmount')
+  }
+}
+</script>

client/components/modals/ShareModal.vue

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

client/components/modals/SleepTimerModal.vue

@@ -6,34 +6,36 @@
       </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="!timerSet" class="w-full">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="w-full">
         <template v-for="time in sleepTimes">
-          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time.seconds)">
-            <p class="text-xl text-center">{{ time.text }}</p>
+          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-primary/25 relative" @click="setTime(time)">
+            <p class="text-lg text-center">{{ time.text }}</p>
           </div>
         </template>
         <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
-          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
-          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
+          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" :placeholder="$strings.LabelTimeInMinutes" class="w-48" />
+          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-18 flex items-center justify-center ml-1">{{ $strings.ButtonSubmit }}</ui-btn>
         </form>
       </div>
-      <div v-else class="w-full p-4">
-        <div class="mb-4 flex items-center justify-center">
-          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center mr-4" @click="decrement(30 * 60)">
-            <span class="material-icons text-lg">remove</span>
-            <span class="pl-1 text-base font-mono">30m</span>
+      <div v-if="timerSet" class="w-full p-4">
+        <div class="mb-4 h-px w-full bg-white/10" />
+
+        <div v-if="timerType === $constants.SleepTimerTypes.COUNTDOWN" class="mb-4 flex items-center justify-center space-x-4">
+          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center h-9" @click="decrement(30 * 60)">
+            <span class="material-symbols text-lg">remove</span>
+            <span class="pl-1 text-sm">30m</span>
           </ui-btn>
 
-          <ui-icon-btn icon="remove" @click="decrement(60 * 5)" />
+          <ui-icon-btn icon="remove" class="min-w-9" @click="decrement(60 * 5)" />
 
-          <p class="mx-6 text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>
+          <p class="text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>
 
-          <ui-icon-btn icon="add" @click="increment(60 * 5)" />
+          <ui-icon-btn icon="add" class="min-w-9" @click="increment(60 * 5)" />
 
-          <ui-btn :padding-x="2" small class="flex items-center ml-4" @click="increment(30 * 60)">
-            <span class="material-icons text-lg">add</span>
-            <span class="pl-1 text-base font-mono">30m</span>
+          <ui-btn :padding-x="2" small class="flex items-center h-9" @click="increment(30 * 60)">
+            <span class="material-symbols text-lg">add</span>
+            <span class="pl-1 text-sm">30m</span>
           </ui-btn>
         </div>
         <ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
@@ -47,52 +49,13 @@ export default {
   props: {
     value: Boolean,
     timerSet: Boolean,
-    timerTime: Number,
-    remaining: Number
+    timerType: String,
+    remaining: Number,
+    hasChapters: Boolean
   },
   data() {
     return {
-      customTime: null,
-      sleepTimes: [
-        {
-          seconds: 60 * 5,
-          text: '5 minutes'
-        },
-        {
-          seconds: 60 * 15,
-          text: '15 minutes'
-        },
-        {
-          seconds: 60 * 20,
-          text: '20 minutes'
-        },
-        {
-          seconds: 60 * 30,
-          text: '30 minutes'
-        },
-        {
-          seconds: 60 * 45,
-          text: '45 minutes'
-        },
-        {
-          seconds: 60 * 60,
-          text: '60 minutes'
-        },
-        {
-          seconds: 60 * 90,
-          text: '90 minutes'
-        },
-        {
-          seconds: 60 * 120,
-          text: '2 hours'
-        }
-      ]
-    }
-  },
-  watch: {
-    show(newVal) {
-      if (newVal) {
-      }
+      customTime: null
     }
   },
   computed: {
@@ -103,6 +66,54 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    sleepTimes() {
+      const times = [
+        {
+          seconds: 60 * 5,
+          text: this.$getString('LabelTimeDurationXMinutes', ['5']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 15,
+          text: this.$getString('LabelTimeDurationXMinutes', ['15']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 20,
+          text: this.$getString('LabelTimeDurationXMinutes', ['20']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 30,
+          text: this.$getString('LabelTimeDurationXMinutes', ['30']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 45,
+          text: this.$getString('LabelTimeDurationXMinutes', ['45']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 60,
+          text: this.$getString('LabelTimeDurationXMinutes', ['60']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 90,
+          text: this.$getString('LabelTimeDurationXMinutes', ['90']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        },
+        {
+          seconds: 60 * 120,
+          text: this.$getString('LabelTimeDurationXHours', ['2']),
+          timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+        }
+      ]
+      if (this.hasChapters) {
+        times.push({ seconds: -1, text: this.$strings.LabelEndOfChapter, timerType: this.$constants.SleepTimerTypes.CHAPTER })
+      }
+      return times
     }
   },
   methods: {
@@ -113,10 +124,14 @@ export default {
       }
 
       const timeInSeconds = Math.round(Number(this.customTime) * 60)
-      this.setTime(timeInSeconds)
+      const time = {
+        seconds: timeInSeconds,
+        timerType: this.$constants.SleepTimerTypes.COUNTDOWN
+      }
+      this.setTime(time)
     },
-    setTime(seconds) {
-      this.$emit('set', seconds)
+    setTime(time) {
+      this.$emit('set', time)
     },
     increment(amount) {
       this.$emit('increment', amount)
@@ -130,4 +145,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/UploadImageModal.vue

@@ -12,7 +12,7 @@
       </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>
-        <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+        <span class="absolute top-4 right-4 material-symbols text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
         <div class="flex justify-center py-4">
           <covers-preview-cover :src="previewUpload" :width="240" />
         </div>
@@ -78,14 +78,13 @@ export default {
           if (data.error) {
             this.$toast.error(data.error)
           } else {
-            this.$toast.success('Cover Uploaded')
             this.resetCoverPreview()
           }
           this.processingUpload = false
         })
         .catch((error) => {
           console.error('Failed', error)
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+          var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastUnknownError
           this.$toast.error(errorMsg)
           this.processingUpload = false
         })
@@ -95,7 +94,7 @@ export default {
 
       var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
         console.error('Failed to download cover from url', error)
-        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+        var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastUnknownError
         this.$toast.error(errorMsg)
         return false
       })
@@ -104,4 +103,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/authors/EditModal.vue

@@ -11,7 +11,7 @@
           <div class="w-full h-45 relative">
             <covers-author-image :author="authorCopy" />
             <div v-if="userCanDelete && !processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
-              <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+              <span class="absolute top-2 right-2 material-symbols text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
             </div>
           </div>
         </div>
@@ -116,12 +116,12 @@ export default {
             this.$axios
               .$delete(`/api/authors/${this.authorId}`)
               .then(() => {
-                this.$toast.success('Author removed')
+                this.$toast.success(this.$strings.ToastAuthorRemoveSuccess)
                 this.show = false
               })
               .catch((error) => {
                 console.error('Failed to remove author', error)
-                this.$toast.error('Failed to remove author')
+                this.$toast.error(this.$strings.ToastRemoveFailed)
               })
               .finally(() => {
                 this.processing = false
@@ -141,14 +141,14 @@ export default {
         }
       })
       if (!Object.keys(updatePayload).length) {
-        this.$toast.info(this.$strings.MessageNoUpdateNecessary)
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return
       }
       this.processing = true
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
         console.error('Failed', error)
         const errorMsg = error.response ? error.response.data : null
-        this.$toast.error(errorMsg || this.$strings.ToastAuthorUpdateFailed)
+        this.$toast.error(errorMsg || this.$strings.ToastFailedToUpdate)
         return null
       })
       if (result) {
@@ -158,7 +158,7 @@ export default {
         } else if (result.merged) {
           this.$toast.success(this.$strings.ToastAuthorUpdateMerged)
           this.show = false
-        } else this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        } else this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
       }
       this.processing = false
     },
@@ -174,7 +174,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
+          this.$toast.error(this.$strings.ToastRemoveFailed)
         })
         .finally(() => {
           this.processing = false
@@ -182,7 +182,7 @@ export default {
     },
     submitUploadCover() {
       if (!this.imageUrl?.startsWith('http:') && !this.imageUrl?.startsWith('https:')) {
-        this.$toast.error('Invalid image url')
+        this.$toast.error(this.$strings.ToastInvalidImageUrl)
         return
       }
 
@@ -194,14 +194,14 @@ export default {
         .$post(`/api/authors/${this.authorId}/image`, updatePayload)
         .then((data) => {
           this.imageUrl = ''
-          this.$toast.success('Author image updated')
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
 
           this.authorCopy.updatedAt = data.author.updatedAt
           this.authorCopy.imagePath = data.author.imagePath
         })
         .catch((error) => {
           console.error('Failed', error)
-          this.$toast.error(error.response.data || 'Failed to remove author image')
+          this.$toast.error(error.response.data || this.$strings.ToastRemoveFailed)
         })
         .finally(() => {
           this.processing = false
@@ -209,7 +209,7 @@ export default {
     },
     async searchAuthor() {
       if (!this.authorCopy.name && !this.authorCopy.asin) {
-        this.$toast.error('Must enter an author name')
+        this.$toast.error(this.$strings.ToastNameRequired)
         return
       }
       this.processing = true
@@ -228,17 +228,19 @@ export default {
         return null
       })
       if (!response) {
-        this.$toast.error('Author not found')
+        this.$toast.error(this.$strings.ToastAuthorSearchNotFound)
       } else if (response.updated) {
         if (response.author.imagePath) {
           this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
-        } else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+        } else {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+        }
 
         this.authorCopy = {
           ...response.author
         }
       } else {
-        this.$toast.info('No updates were made for Author')
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
       }
       this.processing = false
     }

client/components/modals/bookmarks/BookmarkItem.vue

@@ -12,9 +12,9 @@
             <div class="flex-grow pr-2">
               <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
             </div>
-            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons text-2xl -mt-px">forward</span></ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">forward</span></ui-btn>
             <div class="pl-2 flex items-center">
-              <span class="material-icons text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
+              <span class="material-symbols text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
             </div>
           </div>
         </form>
@@ -22,8 +22,8 @@
       <p v-else class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
     </div>
     <div v-if="!isEditing" class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <span class="material-icons text-xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
+      <span class="material-symbols text-xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-symbols text-xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>

client/components/modals/changelog/ViewModal.vue

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

client/components/modals/collections/AddCreateModal.vue

@@ -143,7 +143,7 @@ export default {
           })
           .catch((error) => {
             console.error('Failed to remove books from collection', error)
-            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
+            this.$toast.error(this.$strings.ToastRemoveFailed)
             this.processing = false
           })
       } else {
@@ -157,7 +157,7 @@ export default {
           })
           .catch((error) => {
             console.error('Failed to remove book from collection', error)
-            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
+            this.$toast.error(this.$strings.ToastRemoveFailed)
             this.processing = false
           })
       }
@@ -172,12 +172,12 @@ export default {
           .$post(`/api/collections/${collection.id}/batch/add`, { books: this.selectedBookIds })
           .then((updatedCollection) => {
             console.log(`Books added to collection`, updatedCollection)
-            this.$toast.success('Books added to collection')
+            this.$toast.success(this.$strings.ToastCollectionItemsAddSuccess)
             this.processing = false
           })
           .catch((error) => {
             console.error('Failed to add books to collection', error)
-            this.$toast.error('Failed to add books to collection')
+            this.$toast.error(this.$strings.ToastCollectionItemsAddFailed)
             this.processing = false
           })
       } else {
@@ -187,12 +187,12 @@ export default {
           .$post(`/api/collections/${collection.id}/book`, { id: this.selectedLibraryItemId })
           .then((updatedCollection) => {
             console.log(`Book added to collection`, updatedCollection)
-            this.$toast.success('Book added to collection')
+            this.$toast.success(this.$strings.ToastCollectionItemsAddSuccess)
             this.processing = false
           })
           .catch((error) => {
             console.error('Failed to add book to collection', error)
-            this.$toast.error('Failed to add book to collection')
+            this.$toast.error(this.$strings.ToastCollectionItemsAddFailed)
             this.processing = false
           })
       }
@@ -221,7 +221,7 @@ export default {
         .catch((error) => {
           console.error('Failed to create collection', error)
           var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(`Failed to create collection: ${errMsg}`)
+          this.$toast.error(this.$strings.ToastCollectionCreateFailed + ': ' + errMsg)
           this.processing = false
         })
     }

client/components/modals/collections/CollectionItem.vue

@@ -8,8 +8,8 @@
       <nuxt-link :to="`/collection/${collection.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ collection.name }}</nuxt-link>
     </div>
     <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons text-2xl pt-px">add</span></ui-btn>
-      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-icons text-2xl pt-px">remove</span></ui-btn>
+      <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
+      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
     </div>
   </div>
 </template>

client/components/modals/collections/EditModal.vue

@@ -28,7 +28,7 @@
       <template v-else>
         <div class="flex items-center mb-3">
           <div class="hover:bg-white hover:bg-opacity-10 cursor-pointer h-11 w-11 flex items-center justify-center rounded-full" @click="showImageUploader = false">
-            <span class="material-icons text-4xl">arrow_back</span>
+            <span class="material-symbols text-4xl">arrow_back</span>
           </div>
           <p class="ml-2 text-xl mb-1">Collection Cover Image</p>
         </div>
@@ -106,7 +106,7 @@ export default {
           .catch((error) => {
             console.error('Failed to remove collection', error)
             this.processing = false
-            this.$toast.error(this.$strings.ToastCollectionRemoveFailed)
+            this.$toast.error(this.$strings.ToastRemoveFailed)
           })
       }
     },
@@ -115,7 +115,7 @@ export default {
         return
       }
       if (!this.newCollectionName) {
-        return this.$toast.error('Collection must have a name')
+        return this.$toast.error(this.$strings.ToastNameRequired)
       }
 
       this.processing = true
@@ -135,7 +135,7 @@ export default {
         .catch((error) => {
           console.error('Failed to update collection', error)
           this.processing = false
-          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     }
   },

client/components/modals/emails/EReaderDeviceModal.vue

@@ -125,12 +125,12 @@ export default {
       this.$refs.ereaderEmailInput.blur()
 
       if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
-        this.$toast.error('Name and email required')
+        this.$toast.error(this.$strings.ToastNameEmailRequired)
         return
       }
 
       if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
-        this.$toast.error('Must select at least one user')
+        this.$toast.error(this.$strings.ToastSelectAtLeastOneUser)
         return
       }
       if (this.newDevice.availabilityOption !== 'specificUsers') {
@@ -142,14 +142,14 @@ export default {
 
       if (!this.ereaderDevice) {
         if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
           return
         }
 
         this.submitCreate()
       } else {
         if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
           return
         }
 
@@ -174,12 +174,11 @@ export default {
         .$post(`/api/emails/ereader-devices`, payload)
         .then((data) => {
           this.$emit('update', data.ereaderDevices)
-          this.$toast.success('Device updated')
           this.show = false
         })
         .catch((error) => {
           console.error('Failed to update device', error)
-          this.$toast.error('Failed to update device')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false
@@ -201,12 +200,11 @@ export default {
         .$post('/api/emails/ereader-devices', payload)
         .then((data) => {
           this.$emit('update', data.ereaderDevices || [])
-          this.$toast.success('Device added')
           this.show = false
         })
         .catch((error) => {
           console.error('Failed to add device', error)
-          this.$toast.error('Failed to add device')
+          this.$toast.error(this.$strings.ToastDeviceAddFailed)
         })
         .finally(() => {
           this.processing = false

client/components/modals/emails/UserEReaderDeviceModal.vue

@@ -0,0 +1,188 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="ereader-device-edit" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <form @submit.prevent="submitForm">
+      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full px-3 py-5 md:p-12">
+          <div class="flex items-center -mx-1 mb-4">
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
+            </div>
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
+            </div>
+          </div>
+
+          <div class="flex items-center pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    existingDevices: {
+      type: Array,
+      default: () => []
+    },
+    ereaderDevice: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newDevice: {
+        name: '',
+        email: '',
+        availabilityOption: 'adminAndUp',
+        users: []
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    title() {
+      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ereaderNameInput.blur()
+      this.$refs.ereaderEmailInput.blur()
+
+      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
+        this.$toast.error(this.$strings.ToastNameEmailRequired)
+        return
+      }
+
+      this.newDevice.name = this.newDevice.name.trim()
+      this.newDevice.email = this.newDevice.email.trim()
+
+      // Only catches duplicate names for the current user
+      // Duplicates with other users caught on server side
+      if (!this.ereaderDevice) {
+        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          return
+        }
+
+        this.submitCreate()
+      } else {
+        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          return
+        }
+
+        this.submitUpdate()
+      }
+    },
+    submitUpdate() {
+      this.processing = true
+
+      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
+
+      const payload = {
+        ereaderDevices: [
+          ...existingDevicesWithoutThisOne,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post(`/api/me/ereader-devices`, payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices)
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to update device', error)
+          if (error.response?.data?.toLowerCase().includes('duplicate')) {
+            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          } else {
+            this.$toast.error(this.$strings.ToastDeviceAddFailed)
+          }
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    submitCreate() {
+      this.processing = true
+
+      const payload = {
+        ereaderDevices: [
+          ...this.existingDevices,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post('/api/me/ereader-devices', payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices || [])
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to add device', error)
+          if (error.response?.data?.toLowerCase().includes('duplicate')) {
+            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          } else {
+            this.$toast.error(this.$strings.ToastDeviceAddFailed)
+          }
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      if (this.ereaderDevice) {
+        this.newDevice.name = this.ereaderDevice.name
+        this.newDevice.email = this.ereaderDevice.email
+        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'specificUsers'
+        this.newDevice.users = this.ereaderDevice.users || [this.user.id]
+      } else {
+        this.newDevice.name = ''
+        this.newDevice.email = ''
+        this.newDevice.availabilityOption = 'specificUsers'
+        this.newDevice.users = [this.user.id]
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/item/EditModal.vue

@@ -12,10 +12,10 @@
     </div>
 
     <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</div>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</div>
     </div>
     <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</div>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</div>
     </div>
 
     <div class="w-full h-full max-h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative">

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

@@ -9,7 +9,7 @@
           <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
           <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
             <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
-              <span class="material-icons text-2xl">delete</span>
+              <span class="material-symbols text-2xl">delete</span>
             </ui-tooltip>
           </div>
         </div>
@@ -19,7 +19,7 @@
           <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
             <ui-file-input ref="fileInput" @change="fileUploadSelected">
               <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
-              <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
+              <span class="material-symbols text-2xl inline-block md:!hidden">upload</span>
             </ui-file-input>
           </div>
 
@@ -73,7 +73,7 @@
 
     <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
       <p class="text-lg">{{ $strings.HeaderPreviewCover }}</p>
-      <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+      <span class="absolute top-4 right-4 material-symbols 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>
@@ -194,7 +194,6 @@ export default {
           if (data.error) {
             this.$toast.error(data.error)
           } else {
-            this.$toast.success('Cover Uploaded')
             this.resetCoverPreview()
           }
           this.processingUpload = false
@@ -204,7 +203,7 @@ export default {
           if (error.response && error.response.data) {
             this.$toast.error(error.response.data)
           } else {
-            this.$toast.error('Oops, something went wrong...')
+            this.$toast.error(this.$strings.ToastUnknownError)
           }
           this.processingUpload = false
         })
@@ -255,7 +254,7 @@ export default {
     },
     async updateCover(cover) {
       if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
-        this.$toast.error('Invalid URL')
+        this.$toast.error(this.$strings.ToastInvalidUrl)
         return
       }
 
@@ -264,11 +263,10 @@ export default {
         .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
         .then(() => {
           this.imageUrl = ''
-          this.$toast.success('Update Successful')
         })
         .catch((error) => {
           console.error('Failed to update cover', error)
-          this.$toast.error(error.response?.data || 'Failed to update cover')
+          this.$toast.error(error.response?.data || this.$strings.ToastCoverUpdateFailed)
         })
         .finally(() => {
           this.isProcessing = false
@@ -308,12 +306,9 @@ export default {
       this.isProcessing = true
       this.$axios
         .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
-        .then(() => {
-          this.$toast.success('Update Successful')
-        })
         .catch((error) => {
           console.error('Failed to set local cover', error)
-          this.$toast.error(error.response?.data || 'Failed to set cover')
+          this.$toast.error(error.response?.data || this.$strings.ToastCoverUpdateFailed)
         })
         .finally(() => {
           this.isProcessing = false
@@ -321,4 +316,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -92,7 +92,7 @@ export default {
 
       var { title, author } = this.$refs.itemDetailsEdit.getTitleAndAuthorName()
       if (!title) {
-        this.$toast.error('Must have a title for quick match')
+        this.$toast.error(this.$strings.ToastTitleRequired)
         return
       }
       this.quickMatching = true
@@ -108,9 +108,9 @@ export default {
           if (res.warning) {
             this.$toast.warning(res.warning)
           } else if (res.updated) {
-            this.$toast.success('Item details updated')
+            this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
           } else {
-            this.$toast.info('No updates were made')
+            this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
           }
         })
         .catch((error) => {
@@ -128,18 +128,18 @@ export default {
           this.rescanning = false
           var result = data.result
           if (!result) {
-            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
+            this.$toast.error(this.$getString('ToastRescanFailed', [this.title]))
           } else if (result === 'UPDATED') {
-            this.$toast.success(`Re-Scan complete item was updated`)
+            this.$toast.success(this.$strings.ToastRescanUpdated)
           } else if (result === 'UPTODATE') {
-            this.$toast.success(`Re-Scan complete item was up to date`)
+            this.$toast.success(this.$strings.ToastRescanUpToDate)
           } else if (result === 'REMOVED') {
-            this.$toast.error(`Re-Scan complete item was removed`)
+            this.$toast.error(this.$strings.ToastRescanRemoved)
           }
         })
         .catch((error) => {
           console.error('Failed to scan library item', error)
-          this.$toast.error('Failed to scan library item')
+          this.$toast.error(this.$strings.ToastScanFailed)
           this.rescanning = false
         })
     },
@@ -156,7 +156,7 @@ export default {
       }
       var updatedDetails = this.$refs.itemDetailsEdit.getDetails()
       if (!updatedDetails.hasChanges) {
-        this.$toast.info('No changes were made')
+        this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
         return false
       }
       return this.updateDetails(updatedDetails)
@@ -170,7 +170,7 @@ export default {
       this.isProcessing = false
       if (updateResult) {
         if (updateResult.updated) {
-          this.$toast.success('Item details updated')
+          this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
           return true
         } else {
           this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
@@ -217,4 +217,4 @@ export default {
   height: calc(100% - 80px);
   max-height: calc(100% - 80px);
 }
-</style>
+</style>

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

@@ -6,8 +6,8 @@
         <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 direction="top" :text="$strings.LabelMaxEpisodesToDownload">
+              <span class="material-symbols text-base">info</span>
             </ui-tooltip>
           </div>
         </ui-text-input-with-label>
@@ -99,7 +99,7 @@ export default {
 
       if (this.maxEpisodesToDownload < 0) {
         this.maxEpisodesToDownload = 3
-        this.$toast.error('Invalid max episodes to download')
+        this.$toast.error(this.$strings.ToastInvalidMaxEpisodesToDownload)
         return
       }
 
@@ -120,9 +120,9 @@ export default {
         .then((response) => {
           if (response.episodes && response.episodes.length) {
             console.log('New episodes', response.episodes.length)
-            this.$toast.success(`${response.episodes.length} new episodes found!`)
+            this.$toast.success(this.$getString('ToastNewEpisodesFound', [response.episodes.length]))
           } else {
-            this.$toast.info('No new episodes found')
+            this.$toast.info(this.$strings.ToastNoNewEpisodesFound)
           }
           this.checkingNewEpisodes = false
         })
@@ -141,4 +141,4 @@ export default {
     this.setLastEpisodeCheckInput()
   }
 }
-</script>
+</script>

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

@@ -28,7 +28,7 @@
     <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>
+          <span class="material-symbols text-3xl">arrow_back</span>
         </div>
         <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</p>
       </div>
@@ -59,49 +59,63 @@
           <ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
-            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.title || '' }}</p>
+            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('title', mediaMetadata.title)">{{ mediaMetadata.title || '' }}</a>
+            </p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.subtitle" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
-            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.subtitle || '' }}</p>
+            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('subtitle', mediaMetadata.subtitle)">{{ mediaMetadata.subtitle }}</a>
+            </p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.author" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
-            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.authorName || '' }}</p>
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', mediaMetadata.authorName)">{{ mediaMetadata.authorName }}</a>
+            </p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
-            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
+            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('narrator', mediaMetadata.narrators)">{{ mediaMetadata.narratorName }}</a>
+            </p>
           </div>
         </div>
         <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-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>
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</a>
+            </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>
+            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publisher', mediaMetadata.publisher)">{{ mediaMetadata.publisher }}</a>
+            </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>
+            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publishedYear', mediaMetadata.publishedYear)">{{ mediaMetadata.publishedYear }}</a>
+            </p>
           </div>
         </div>
 
@@ -109,42 +123,54 @@
           <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" :disabled="!selectedMatchUsage.series" />
-            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.seriesName || '' }}</p>
+            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('series', mediaMetadata.series)">{{ mediaMetadata.seriesName }}</a>
+            </p>
           </div>
         </div>
-        <div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2">
+        <div v-if="selectedMatchOrig.genres?.length" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
-            <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p>
+            <p v-if="mediaMetadata.genres?.length" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('genres', mediaMetadata.genres)">{{ mediaMetadata.genres.join(', ') }}</a>
+            </p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
-            <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p>
+            <p v-if="media.tags?.length" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('tags', media.tags)">{{ media.tags.join(', ') }}</a>
+            </p>
           </div>
         </div>
         <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="$strings.LabelLanguage" />
-            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.language || '' }}</p>
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('language', mediaMetadata.language)">{{ mediaMetadata.language }}</a>
+            </p>
           </div>
         </div>
         <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.isbn || '' }}</p>
+            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('isbn', mediaMetadata.isbn)">{{ mediaMetadata.isbn }}</a>
+            </p>
           </div>
         </div>
         <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.asin || '' }}</p>
+            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('asin', mediaMetadata.asin)">{{ mediaMetadata.asin }}</a>
+            </p>
           </div>
         </div>
 
@@ -152,28 +178,36 @@
           <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesId || '' }}</p>
+            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesId', mediaMetadata.itunesId)">{{ mediaMetadata.itunesId }}</a>
+            </p>
           </div>
         </div>
         <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.feedUrl || '' }}</p>
+            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('feedUrl', mediaMetadata.feedUrl)">{{ mediaMetadata.feedUrl }}</a>
+            </p>
           </div>
         </div>
         <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">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesPageUrl || '' }}</p>
+            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesPageUrl', mediaMetadata.itunesPageUrl)">{{ mediaMetadata.itunesPageUrl }}</a>
+            </p>
           </div>
         </div>
         <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="$strings.LabelReleaseDate" />
-            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
+            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('releaseDate', mediaMetadata.releaseDate)">{{ mediaMetadata.releaseDate }}</a>
+            </p>
           </div>
         </div>
         <div v-if="selectedMatchOrig.explicit != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.explicit == null }">
@@ -281,7 +315,7 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     filterData() {
-      return this.$store.state.libraries.filterData
+      return this.$store.state.libraries.filterData || {}
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
@@ -321,6 +355,13 @@ export default {
     }
   },
   methods: {
+    setMatchFieldValue(field, value) {
+      if (Array.isArray(value)) {
+        this.selectedMatch[field] = [...value]
+      } else {
+        this.selectedMatch[field] = value
+      }
+    },
     selectAllToggled(val) {
       for (const key in this.selectedMatchUsage) {
         this.selectedMatchUsage[key] = val
@@ -356,7 +397,7 @@ export default {
     },
     submitSearch() {
       if (!this.searchTitle) {
-        this.$toast.warning('Search title is required')
+        this.$toast.warning(this.$strings.ToastTitleRequired)
         return
       }
       this.persistProvider()
@@ -577,12 +618,12 @@ export default {
           if (updateResult.updated) {
             this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
           } else {
-            this.$toast.info(this.$strings.ToastItemDetailsUpdateUnneeded)
+            this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
           }
           this.clearSelectedMatch()
           this.$emit('selectTab', 'details')
         } else {
-          this.$toast.error(this.$strings.ToastItemDetailsUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         }
       } else {
         this.clearSelectedMatch()

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

@@ -2,29 +2,29 @@
   <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>
+        <widgets-alert type="warning" class="text-base mb-4">{{ $strings.ToastPodcastNoRssFeed }}</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" />
+          <p class="text-base md:text-xl font-semibold">{{ $strings.HeaderScheduleEpisodeDownloads }}</p>
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" :label="$strings.LabelEnable" 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.">
+          <ui-tooltip :text="$strings.LabelMaxEpisodesToKeepHelp">
             <p class="pl-4 text-base">
-              Max episodes to keep
-              <span class="material-icons icon-text">info_outlined</span>
+              {{ $strings.LabelMaxEpisodesToKeep }}
+              <span class="material-symbols icon-text">info</span>
             </p>
           </ui-tooltip>
         </div>
         <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
           <ui-text-input ref="maxEpisodesToDownloadInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
-          <ui-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.">
+          <ui-tooltip :text="$strings.LabelUseZeroForUnlimited">
             <p class="pl-4 text-base">
-              Max new episodes to download per check
-              <span class="material-icons icon-text">info_outlined</span>
+              {{ $strings.LabelMaxEpisodesToDownloadPerCheck }}
+              <span class="material-symbols icon-text">info</span>
             </p>
           </ui-tooltip>
         </div>
@@ -36,7 +36,7 @@
     <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>
+        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdatesWereNecessary }}</ui-btn>
       </div>
     </div>
   </div>
@@ -163,7 +163,7 @@ export default {
       this.isProcessing = false
       if (updateResult) {
         if (updateResult.updated) {
-          this.$toast.success('Item details updated')
+          this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
           return true
         } else {
           this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)

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

@@ -2,11 +2,8 @@
   <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>
 
-    <!-- alert for windows install -->
-    <widgets-alert v-if="isWindowsInstall" type="warning" class="my-8 text-base">Not supported for the Windows install yet</widgets-alert>
-
     <!-- Merge to m4b -->
-    <div v-if="showM4bDownload && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
+    <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>
@@ -16,14 +13,14 @@
         <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>
+            <span class="material-symbols text-lg ml-2">launch</span>
           </ui-btn>
         </div>
       </div>
     </div>
 
     <!-- Embed Metadata -->
-    <div v-if="mediaTracks.length && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
+    <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>
@@ -33,21 +30,21 @@
         <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>
+            <span class="material-symbols text-lg ml-2">launch</span>
           </ui-btn>
 
-          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
+          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">{{ $strings.ButtonQuickEmbed }}</ui-btn>
         </div>
       </div>
 
       <!-- queued alert -->
       <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
-        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+        <p class="text-lg">{{ $getString('MessageQuickEmbedQueue', [queuedEmbedLIds.length]) }}</p>
       </widgets-alert>
 
       <!-- processing alert -->
       <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
-        <p class="text-lg">Currently embedding metadata</p>
+        <p class="text-lg">{{ $strings.MessageQuickEmbedInProgress }}</p>
       </widgets-alert>
     </div>
 
@@ -111,18 +108,12 @@ export default {
     },
     isEncodeTaskRunning() {
       return this.encodeTask && !this.encodeTask?.isFinished
-    },
-    isWindowsInstall() {
-      return this.Source == 'windows'
-    },
-    Source() {
-      return this.$store.state.Source
     }
   },
   methods: {
     quickEmbed() {
       const payload = {
-        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        message: this.$strings.MessageConfirmQuickEmbed,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
@@ -141,4 +132,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/libraries/EditLibrary.vue

@@ -19,12 +19,12 @@
       <div class="folders-container overflow-y-auto w-full py-2 mb-2">
         <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>
+          <span class="material-symbols fill bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <ui-editable-text ref="folderInput" v-model="folder.fullPath" :readonly="!!folder.id" type="text" class="w-full" @blur="existingFolderInputBlurred(folder)" />
-          <span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
+          <span v-show="folders.length > 1" class="material-symbols text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
         </div>
         <div class="flex py-1 px-2 items-center w-full">
-          <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <ui-editable-text ref="newFolderInput" v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
         </div>
 
@@ -169,4 +169,4 @@ export default {
     max-height: calc(80vh - 292px);
   }
 }
-</style>
+</style>

client/components/modals/libraries/EditModal.vue

@@ -111,7 +111,6 @@ export default {
     },
     updateLibrary(library) {
       this.mapLibraryToCopy(library)
-      console.log('Updated library', this.libraryCopy)
     },
     getNewLibraryData() {
       return {
@@ -128,7 +127,9 @@ export default {
           autoScanCronExpression: null,
           hideSingleBookSeries: false,
           onlyShowLaterBooksInContinueSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
+          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata'],
+          markAsFinishedPercentComplete: null,
+          markAsFinishedTimeRemaining: 10
         }
       }
     },
@@ -156,11 +157,11 @@ export default {
     },
     validate() {
       if (!this.libraryCopy.name) {
-        this.$toast.error('Library must have a name')
+        this.$toast.error(this.$strings.ToastNameRequired)
         return false
       }
       if (!this.libraryCopy.folders.length) {
-        this.$toast.error('Library must have at least 1 path')
+        this.$toast.error(this.$strings.ToastMustHaveAtLeastOnePath)
         return false
       }
 
@@ -205,7 +206,7 @@ export default {
     submitUpdateLibrary() {
       var newLibraryPayload = this.getLibraryUpdatePayload()
       if (!Object.keys(newLibraryPayload).length) {
-        this.$toast.info('No updates are necessary')
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return
       }
 
@@ -222,7 +223,7 @@ export default {
           if (error.response && error.response.data) {
             this.$toast.error(error.response.data)
           } else {
-            this.$toast.error(this.$strings.ToastLibraryUpdateFailed)
+            this.$toast.error(this.$strings.ToastFailedToUpdate)
           }
           this.processing = false
         })
@@ -236,7 +237,6 @@ export default {
           this.show = false
           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
             this.$store.dispatch('libraries/fetch', res.id)
           }
@@ -264,4 +264,4 @@ export default {
 .tab.tab-selected {
   height: 41px;
 }
-</style>
+</style>

client/components/modals/libraries/LazyFolderChooser.vue

@@ -1,7 +1,7 @@
 <template>
   <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>
+      <span class="material-symbols text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
       <p class="px-4 text-xl">{{ $strings.HeaderChooseAFolder }}</p>
     </div>
     <div v-if="rootDirs.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
@@ -10,18 +10,18 @@
     <div v-if="rootDirs.length" class="relative flex bg-primary bg-opacity-50 p-4 folder-container">
       <div class="w-1/2 border-r border-bg h-full overflow-y-auto">
         <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center hover:bg-white/10" @click="goBack">
-          <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2">..</p>
         </div>
         <div v-for="dir in _directories" :key="dir.path" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" :class="dir.className" @click="selectDir(dir)">
-          <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
-          <span v-if="dir.path === selectedPath" class="material-icons" style="font-size: 1.1rem">arrow_right</span>
+          <span v-if="dir.path === selectedPath" class="material-symbols" style="font-size: 1.1rem">arrow_right</span>
         </div>
       </div>
       <div class="w-1/2 h-full overflow-y-auto">
         <div v-for="dir in _subdirs" :key="dir.path" :class="dir.className" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" @click="selectSubDir(dir)">
-          <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
         </div>
       </div>
@@ -162,7 +162,7 @@ export default {
         })
         .catch((error) => {
           console.error('Failed to get filesystem paths', error)
-          this.$toast.error('Failed to get filesystem paths')
+          this.$toast.error(this.$strings.ToastFailedToLoadData)
           return []
         })
         .finally(() => {
@@ -199,4 +199,4 @@ export default {
   height: calc(100% - 130px);
   min-height: calc(100% - 130px);
 }
-</style>
+</style>

client/components/modals/libraries/LibraryScannerSettings.vue

@@ -9,7 +9,7 @@
       <p class="text-sm text-gray-300 pr-2">{{ $strings.LabelMetadataOrderOfPrecedenceDescription }}</p>
       <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex">
         <a href="https://www.audiobookshelf.org/guides/book-scanner" target="_blank" class="inline-flex">
-          <span class="material-icons text-xl w-5">help_outline</span>
+          <span class="material-symbols text-xl w-5">help_outline</span>
         </a>
       </ui-tooltip>
     </div>
@@ -17,7 +17,7 @@
     <draggable v-model="metadataSourceMapped" v-bind="dragOptions" class="list-group" draggable=".item" handle=".drag-handle" tag="ul" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'flip-list' : null">
         <li v-for="(source, index) in metadataSourceMapped" :key="source.id" :class="source.include ? 'item' : 'opacity-50'" class="w-full px-2 flex items-center relative border border-white/10">
-          <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 mr-2 md:mr-4">reorder</span>
+          <span class="material-symbols drag-handle text-xl text-gray-400 hover:text-gray-50 mr-2 md:mr-4">reorder</span>
           <div class="text-center py-1 w-8 min-w-8">
             {{ source.include ? getSourceIndex(source.id) : '' }}
           </div>

client/components/modals/libraries/LibrarySettings.vue

@@ -1,78 +1,94 @@
 <template>
   <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-3">
-      <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="enableWatcher" @input="formUpdated" />
-        <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
-      </div>
-      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
-    </div>
-    <div v-if="isBookLibrary" class="flex items-center py-3">
-      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsAudiobooksOnly }}
-          <span class="material-icons icon-text text-sm">info_outlined</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
-      </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsHideSingleBookSeries }}
-            <span class="material-icons icon-text text-sm">info_outlined</span>
+    <div class="flex flex-wrap">
+      <div class="flex items-center p-2 w-full md:w-1/2">
+        <ui-toggle-switch v-model="useSquareBookCovers" size="sm" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
+          <p class="pl-4 text-sm">
+            {{ $strings.LabelSettingsSquareBookCovers }}
+            <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
-            <span class="material-icons icon-text text-sm">info_outlined</span>
+      <div class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" size="sm" @input="formUpdated" />
+          <ui-toggle-switch v-else disabled size="sm" :value="false" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
+        </div>
+        <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
+      </div>
+      <div v-if="isBookLibrary" class="flex items-center p-2 w-full md:w-1/2">
+        <ui-toggle-switch v-model="audiobooksOnly" size="sm" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
+          <p class="pl-4 text-sm">
+            {{ $strings.LabelSettingsAudiobooksOnly }}
+            <span class="material-symbols icon-text text-sm">info</span>
           </p>
         </ui-tooltip>
       </div>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="epubsAllowScriptedContent" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
-            <span class="material-icons icon-text text-sm">info_outlined</span>
-          </p>
-        </ui-tooltip>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="skipMatchingMediaWithAsin" size="sm" @input="formUpdated" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" size="sm" @input="formUpdated" />
+          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="hideSingleBookSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsHideSingleBookSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
+        <div class="flex items-center">
+          <ui-toggle-switch v-model="epubsAllowScriptedContent" size="sm" @input="formUpdated" />
+          <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+            <p class="pl-4 text-sm">
+              {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
+      </div>
+      <div v-if="isPodcastLibrary" class="p-2 w-full md:w-1/2">
+        <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
+      </div>
+      <div class="p-2 w-full flex items-center space-x-2 flex-wrap">
+        <div>
+          <ui-dropdown v-model="markAsFinishedWhen" :items="maskAsFinishedWhenItems" :label="$strings.LabelSettingsLibraryMarkAsFinishedWhen" small class="w-72 min-w-72 text-sm" menu-max-height="200px" @input="markAsFinishedWhenChanged" />
+        </div>
+        <div class="w-16">
+          <div>
+            <label class="px-1 text-sm font-semibold"></label>
+            <div class="relative">
+              <ui-text-input v-model="markAsFinishedValue" type="number" label="" no-spinner custom-input-class="pr-5" @input="markAsFinishedChanged" />
+              <div class="absolute top-0 bottom-0 right-4 flex items-center">{{ markAsFinishedWhen === 'timeRemaining' ? '' : '%' }}</div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div v-if="isPodcastLibrary" class="py-3">
-      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
     </div>
   </div>
 </template>
@@ -97,7 +113,9 @@ export default {
       epubsAllowScriptedContent: false,
       hideSingleBookSeries: false,
       onlyShowLaterBooksInContinueSeries: false,
-      podcastSearchRegion: 'us'
+      podcastSearchRegion: 'us',
+      markAsFinishedWhen: 'timeRemaining',
+      markAsFinishedValue: 10
     }
   },
   computed: {
@@ -119,10 +137,34 @@ export default {
     providers() {
       if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
       return this.$store.state.scanners.providers
+    },
+    maskAsFinishedWhenItems() {
+      return [
+        {
+          text: this.$strings.LabelSettingsLibraryMarkAsFinishedTimeRemaining,
+          value: 'timeRemaining'
+        },
+        {
+          text: this.$strings.LabelSettingsLibraryMarkAsFinishedPercentComplete,
+          value: 'percentComplete'
+        }
+      ]
     }
   },
   methods: {
+    markAsFinishedWhenChanged(val) {
+      if (val === 'percentComplete' && this.markAsFinishedValue > 100) {
+        this.markAsFinishedValue = 100
+      }
+      this.formUpdated()
+    },
+    markAsFinishedChanged(val) {
+      this.formUpdated()
+    },
     getLibraryData() {
+      let markAsFinishedTimeRemaining = this.markAsFinishedWhen === 'timeRemaining' ? Number(this.markAsFinishedValue) : null
+      let markAsFinishedPercentComplete = this.markAsFinishedWhen === 'percentComplete' ? Number(this.markAsFinishedValue) : null
+
       return {
         settings: {
           coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
@@ -133,7 +175,9 @@ export default {
           epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
           hideSingleBookSeries: !!this.hideSingleBookSeries,
           onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
-          podcastSearchRegion: this.podcastSearchRegion
+          podcastSearchRegion: this.podcastSearchRegion,
+          markAsFinishedTimeRemaining: markAsFinishedTimeRemaining,
+          markAsFinishedPercentComplete: markAsFinishedPercentComplete
         }
       }
     },
@@ -150,6 +194,11 @@ export default {
       this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
       this.onlyShowLaterBooksInContinueSeries = !!this.librarySettings.onlyShowLaterBooksInContinueSeries
       this.podcastSearchRegion = this.librarySettings.podcastSearchRegion || 'us'
+      this.markAsFinishedWhen = this.librarySettings.markAsFinishedTimeRemaining ? 'timeRemaining' : 'percentComplete'
+      if (!this.librarySettings.markAsFinishedTimeRemaining && !this.librarySettings.markAsFinishedPercentComplete) {
+        this.markAsFinishedWhen = 'timeRemaining'
+      }
+      this.markAsFinishedValue = this.librarySettings.markAsFinishedTimeRemaining || this.librarySettings.markAsFinishedPercentComplete || 10
     }
   },
   mounted() {

client/components/modals/libraries/LibraryTools.vue

@@ -3,13 +3,13 @@
     <div class="w-full border border-black-200 p-4 my-8">
       <div class="flex flex-wrap items-center">
         <div>
-          <p class="text-lg">Remove metadata files in library item folders</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
+          <p class="text-lg">{{ $strings.LabelRemoveMetadataFile }}</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $getString('LabelRemoveMetadataFileHelp', [mediaType]) }}</p>
         </div>
         <div class="flex-grow" />
         <div>
-          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
-          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
+          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">{{ $strings.LabelRemoveAllMetadataJson }}</ui-btn>
+          <ui-btn @click.stop="removeAllMetadataClick('abs')">{{ $strings.LabelRemoveAllMetadataAbs }}</ui-btn>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@ export default {
   methods: {
     removeAllMetadataClick(ext) {
       const payload = {
-        message: `Are you sure you want to remove all metadata.${ext} files in your library item folders?`,
+        message: this.$getString('MessageConfirmRemoveMetadataFiles', [ext]),
         persistent: true,
         callback: (confirmed) => {
           if (confirmed) {
@@ -60,16 +60,16 @@ export default {
         .$post(`/api/libraries/${this.libraryId}/remove-metadata?ext=${ext}`)
         .then((data) => {
           if (!data.found) {
-            this.$toast.info(`No metadata.${ext} files were found in library`)
+            this.$toast.info(this.$getString('ToastMetadataFilesRemovedNoneFound', [ext]))
           } else if (!data.removed) {
-            this.$toast.success(`No metadata.${ext} files removed`)
+            this.$toast.success(this.$getString('ToastMetadataFilesRemovedNoneRemoved', [ext]))
           } else {
-            this.$toast.success(`Successfully removed ${data.removed} metadata.${ext} files`)
+            this.$toast.success(this.$getString('ToastMetadataFilesRemovedSuccess', [data.removed, ext]))
           }
         })
         .catch((error) => {
           console.error('Failed to remove metadata files', error)
-          this.$toast.error('Failed to remove metadata files')
+          this.$toast.error(this.$getString('ToastMetadataFilesRemovedError', [ext]))
         })
         .finally(() => {
           this.$emit('update:processing', false)
@@ -78,4 +78,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/modals/notification/NotificationEditModal.vue

@@ -77,7 +77,13 @@ export default {
       return this.notificationData.events || []
     },
     eventOptions() {
-      return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
+      return this.notificationEvents.map((e) => {
+        return {
+          value: e.name,
+          text: e.name,
+          subtext: this.$strings[e.descriptionKey] || e.description
+        }
+      })
     },
     selectedEventData() {
       return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
@@ -86,7 +92,7 @@ export default {
       return this.selectedEventData && this.selectedEventData.requiresLibrary
     },
     title() {
-      return this.isNew ? 'Create Notification' : 'Update Notification'
+      return this.isNew ? this.$strings.HeaderNotificationCreate : this.$strings.HeaderNotificationUpdate
     },
     availableVariables() {
       return this.selectedEventData ? this.selectedEventData.variables || null : null
@@ -104,9 +110,9 @@ export default {
     },
     submitForm() {
       this.$refs.urlsInput?.forceBlur()
-      
+
       if (!this.newNotification.urls.length) {
-        this.$toast.error('Must enter an Apprise URL')
+        this.$toast.error(this.$strings.ToastAppriseUrlRequired)
         return
       }
 
@@ -127,12 +133,12 @@ export default {
         .$patch(`/api/notifications/${payload.id}`, payload)
         .then((updatedSettings) => {
           this.$emit('update', updatedSettings)
-          this.$toast.success('Notification updated')
+          this.$toast.success(this.$strings.ToastNotificationUpdateSuccess)
           this.show = false
         })
         .catch((error) => {
           console.error('Failed to update notification', error)
-          this.$toast.error('Failed to update notification')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
         .finally(() => {
           this.processing = false
@@ -149,12 +155,11 @@ export default {
         .$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')
+          this.$toast.error(this.$strings.ToastNotificationCreateFailed)
         })
         .finally(() => {
           this.processing = false

client/components/modals/player/QueueItemRow.vue

@@ -10,10 +10,10 @@
       <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-2xl text-success">play_arrow</span>
+          <span class="material-symbols fill text-2xl text-success">play_arrow</span>
         </button>
         <button class="outline-none mx-1 flex items-center" @click.stop="removeClick">
-          <span class="material-icons text-2xl text-error">close</span>
+          <span class="material-symbols text-2xl text-error">close</span>
         </button>
       </div>
       <p v-else class="text-gray-400 text-sm text-right">{{ durationPretty }}</p>

client/components/modals/player/QueueItemsModal.vue

@@ -13,7 +13,7 @@
           <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" />
+        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem(index)" @remove="removeItem" />
       </div>
     </div>
   </modals-modal>
@@ -22,8 +22,7 @@
 <script>
 export default {
   props: {
-    value: Boolean,
-    libraryItemId: String
+    value: Boolean
   },
   data() {
     return {}
@@ -50,11 +49,9 @@ export default {
     }
   },
   methods: {
-    playItem(item) {
-      this.$eventBus.$emit('play-item', {
-        libraryItemId: item.libraryItemId,
-        episodeId: item.episodeId || null,
-        queueItems: this.playerQueueItems
+    playItem(index) {
+      this.$eventBus.$emit('play-queue-item', {
+        index
       })
       this.show = false
     },
@@ -63,4 +60,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/playlists/AddCreateModal.vue

@@ -130,12 +130,12 @@ export default {
         .$post(`/api/playlists/${playlist.id}/batch/remove`, { items: itemObjects })
         .then((updatedPlaylist) => {
           console.log(`Items removed from playlist`, updatedPlaylist)
-          this.$toast.success('Playlist item(s) removed')
+          this.$toast.success(this.$strings.ToastPlaylistUpdateSuccess)
           this.processing = false
         })
         .catch((error) => {
           console.error('Failed to remove items from playlist', error)
-          this.$toast.error('Failed to remove playlist item(s)')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           this.processing = false
         })
     },
@@ -148,12 +148,12 @@ export default {
         .$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects })
         .then((updatedPlaylist) => {
           console.log(`Items added to playlist`, updatedPlaylist)
-          this.$toast.success('Items added to playlist')
+          this.$toast.success(this.$strings.ToastPlaylistUpdateSuccess)
           this.processing = false
         })
         .catch((error) => {
           console.error('Failed to add items to playlist', error)
-          this.$toast.error('Failed to add items to playlist')
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
           this.processing = false
         })
     },
@@ -174,14 +174,14 @@ export default {
         .$post('/api/playlists', newPlaylist)
         .then((data) => {
           console.log('New playlist created', data)
-          this.$toast.success(`Playlist "${data.name}" created`)
+          this.$toast.success(this.$strings.ToastPlaylistCreateSuccess + ': ' + data.name)
           this.processing = false
           this.newPlaylistName = ''
         })
         .catch((error) => {
           console.error('Failed to create playlist', error)
           var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(`Failed to create playlist: ${errMsg}`)
+          this.$toast.error(this.$strings.ToastPlaylistCreateFailed + ': ' + errMsg)
           this.processing = false
         })
     }

client/components/modals/playlists/EditModal.vue

@@ -86,7 +86,7 @@ export default {
           .catch((error) => {
             console.error('Failed to remove playlist', error)
             this.processing = false
-            this.$toast.error(this.$strings.ToastPlaylistRemoveFailed)
+            this.$toast.error(this.$strings.ToastRemoveFailed)
           })
       }
     },
@@ -95,7 +95,7 @@ export default {
         return
       }
       if (!this.newPlaylistName) {
-        return this.$toast.error('Playlist must have a name')
+        return this.$toast.error(this.$strings.ToastNameRequired)
       }
 
       this.processing = true
@@ -115,7 +115,7 @@ export default {
         .catch((error) => {
           console.error('Failed to update playlist', error)
           this.processing = false
-          this.$toast.error(this.$strings.ToastPlaylistUpdateFailed)
+          this.$toast.error(this.$strings.ToastFailedToUpdate)
         })
     }
   },

client/components/modals/playlists/UserPlaylistItem.vue

@@ -8,8 +8,8 @@
       <nuxt-link :to="`/playlist/${playlist.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ playlist.name }}</nuxt-link>
     </div>
     <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <ui-btn v-if="!isItemIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons text-2xl pt-px">add</span></ui-btn>
-      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-icons text-2xl pt-px">remove</span></ui-btn>
+      <ui-btn v-if="!isItemIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
+      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
     </div>
   </div>
 </template>

client/components/modals/podcast/EditEpisode.vue

@@ -12,10 +12,10 @@
     </div>
 
     <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevEpisode" @mousedown.prevent>arrow_back_ios</div>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevEpisode" @mousedown.prevent>arrow_back_ios</div>
     </div>
     <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextEpisode" @mousedown.prevent>arrow_forward_ios</div>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextEpisode" @mousedown.prevent>arrow_forward_ios</div>
     </div>
 
     <div ref="wrapper" class="p-4 w-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">

client/components/modals/podcast/EpisodeFeed.vue

@@ -20,7 +20,7 @@
           @click="toggleSelectEpisode(episode)"
         >
           <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="getIsEpisodeDownloaded(episode)" class="material-icons text-success text-xl">download_done</span>
+            <span v-if="getIsEpisodeDownloaded(episode)" class="material-symbols text-success text-xl">download_done</span>
             <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">

client/components/modals/podcast/NewModal.vue

@@ -156,7 +156,12 @@ export default {
       return this.selectedFolder.fullPath
     },
     podcastTypes() {
-      return this.$store.state.globals.podcastTypes || []
+      return this.$store.state.globals.podcastTypes.map((e) => {
+        return {
+          text: this.$strings[e.descriptionKey] || e.text,
+          value: e.value
+        }
+      })
     }
   },
   methods: {

client/components/modals/podcast/OpmlFeedsModal.vue

@@ -16,11 +16,18 @@
           </div>
         </div>
 
-        <p class="text-lg font-semibold mb-2">{{ $strings.HeaderPodcastsToAdd }}</p>
+        <p class="text-lg font-semibold mb-1">{{ $strings.HeaderPodcastsToAdd }}</p>
+        <p class="text-sm text-gray-300 mb-4">{{ $strings.MessageOpmlPreviewNote }}</p>
 
         <div class="w-full overflow-y-auto" style="max-height: 50vh">
-          <template v-for="(feed, index) in feedMetadata">
-            <cards-podcast-feed-summary-card :key="index" :feed="feed" :library-folder-path="selectedFolderPath" class="my-1" />
+          <template v-for="(feed, index) in feeds">
+            <div :key="index" class="py-1 flex items-center">
+              <p class="text-lg font-semibold">{{ index + 1 }}.</p>
+              <div class="pl-2">
+                <p v-if="feed.title" class="text-sm font-semibold">{{ feed.title }}</p>
+                <p class="text-xs text-gray-400">{{ feed.feedUrl }}</p>
+              </div>
+            </div>
           </template>
         </div>
       </div>
@@ -45,9 +52,7 @@ export default {
     return {
       processing: false,
       selectedFolderId: null,
-      fullPath: null,
-      autoDownloadEpisodes: false,
-      feedMetadata: []
+      autoDownloadEpisodes: false
     }
   },
   watch: {
@@ -96,73 +101,36 @@ export default {
     }
   },
   methods: {
-    toFeedMetadata(feed) {
-      const metadata = feed.metadata
-      return {
-        title: metadata.title,
-        author: metadata.author,
-        description: metadata.description,
-        releaseDate: '',
-        genres: [...metadata.categories],
-        feedUrl: metadata.feedUrl,
-        imageUrl: metadata.image,
-        itunesPageUrl: '',
-        itunesId: '',
-        itunesArtistId: '',
-        language: '',
-        numEpisodes: feed.numEpisodes
-      }
-    },
     init() {
-      this.feedMetadata = this.feeds.map(this.toFeedMetadata)
-
       if (this.folderItems[0]) {
         this.selectedFolderId = this.folderItems[0].value
       }
     },
     async submit() {
       this.processing = true
-      const newFeedPayloads = this.feedMetadata.map((metadata) => {
-        return {
-          path: `${this.selectedFolderPath}/${this.$sanitizeFilename(metadata.title)}`,
-          folderId: this.selectedFolderId,
-          libraryId: this.currentLibrary.id,
-          media: {
-            metadata: {
-              ...metadata
-            },
-            autoDownloadEpisodes: this.autoDownloadEpisodes
-          }
-        }
-      })
-      console.log('New feed payloads', newFeedPayloads)
 
-      for (const podcastPayload of newFeedPayloads) {
-        await this.$axios
-          .$post('/api/podcasts', podcastPayload)
-          .then(() => {
-            this.$toast.success(`${podcastPayload.media.metadata.title}: ${this.$strings.ToastPodcastCreateSuccess}`)
-          })
-          .catch((error) => {
-            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}`)
-          })
+      const payload = {
+        feeds: this.feeds.map((f) => f.feedUrl),
+        folderId: this.selectedFolderId,
+        libraryId: this.currentLibrary.id,
+        autoDownloadEpisodes: this.autoDownloadEpisodes
       }
-      this.processing = false
-      this.show = false
+      this.$axios
+        .$post('/api/podcasts/opml/create', payload)
+        .then(() => {
+          this.show = false
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || this.$strings.ToastPodcastCreateFailed
+          console.error('Failed to create podcast', payload, error)
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
     }
   },
   mounted() {}
 }
 </script>
 
-<style scoped>
-#podcast-wrapper {
-  min-height: 400px;
-  max-height: 80vh;
-}
-#episodes-scroll {
-  max-height: calc(80vh - 200px);
-}
-</style>

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

@@ -33,11 +33,11 @@
     </div>
     <div v-if="enclosureUrl" class="pb-4 pt-6">
       <ui-text-input-with-label :value="enclosureUrl" readonly class="text-xs">
-        <label class="px-1 text-xs text-gray-200 font-semibold">Episode URL from RSS feed</label>
+        <label class="px-1 text-xs text-gray-200 font-semibold">{{ $strings.LabelEpisodeUrlFromRssFeed }}</label>
       </ui-text-input-with-label>
     </div>
     <div v-else class="py-4">
-      <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>
+      <p class="text-xs text-gray-300 font-semibold">{{ $strings.LabelEpisodeNotLinkedToRssFeed }}</p>
     </div>
   </div>
 </template>
@@ -97,7 +97,12 @@ export default {
       return this.enclosure.url
     },
     episodeTypes() {
-      return this.$store.state.globals.episodeTypes || []
+      return this.$store.state.globals.episodeTypes.map((e) => {
+        return {
+          text: this.$strings[e.descriptionKey] || e.text,
+          value: e.value
+        }
+      })
     }
   },
   methods: {
@@ -142,7 +147,7 @@ export default {
 
       const updatedDetails = this.getUpdatePayload()
       if (!Object.keys(updatedDetails).length) {
-        this.$toast.info('No changes were made')
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return false
       }
       return this.updateDetails(updatedDetails)
@@ -152,14 +157,14 @@ export default {
       const updateResult = await this.$axios.$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatedDetails).catch((error) => {
         console.error('Failed update episode', error)
         this.isProcessing = false
-        this.$toast.error(error?.response?.data || 'Failed to update episode')
+        this.$toast.error(error?.response?.data || this.$strings.ToastFailedToUpdate)
         return false
       })
 
       this.isProcessing = false
       if (updateResult) {
         if (updateResult) {
-          this.$toast.success('Podcast episode updated')
+          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
           return true
         } else {
           this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)

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

@@ -105,7 +105,7 @@ export default {
       }
       const updatePayload = this.getUpdatePayload(episodeData)
       if (!Object.keys(updatePayload).length) {
-        return this.$toast.info('No updates are necessary')
+        return this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
       }
       console.log('Episode update payload', updatePayload)
 
@@ -126,13 +126,13 @@ export default {
     },
     submitForm() {
       if (!this.episodeTitle || !this.episodeTitle.length) {
-        this.$toast.error('Must enter an episode title')
+        this.$toast.error(this.$strings.ToastTitleRequired)
         return
       }
       this.searchedTitle = this.episodeTitle
       this.isProcessing = true
       this.$axios
-        .$get(`/api/podcasts/${this.libraryItem.id}/search-episode?title=${this.$encodeUriPath(this.episodeTitle)}`)
+        .$get(`/api/podcasts/${this.libraryItem.id}/search-episode?title=${encodeURIComponent(this.episodeTitle)}`)
         .then((results) => {
           this.episodesFound = results.episodes.map((ep) => ep.episode)
           console.log('Episodes found', this.episodesFound)
@@ -153,4 +153,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -12,7 +12,7 @@
         <div class="w-full relative">
           <ui-text-input v-model="currentFeed.feedUrl" readonly />
 
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeed.feedUrl)">content_copy</span>
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeed.feedUrl)">content_copy</span>
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">
@@ -121,14 +121,14 @@ export default {
   methods: {
     openFeed() {
       if (!this.newFeedSlug) {
-        this.$toast.error('Must set a feed slug')
+        this.$toast.error(this.$strings.ToastSlugRequired)
         return
       }
 
       const sanitized = this.$sanitizeSlug(this.newFeedSlug)
       if (this.newFeedSlug !== sanitized) {
         this.newFeedSlug = sanitized
-        this.$toast.warning('Slug had to be modified - Run again')
+        this.$toast.warning(this.$strings.ToastSlugMustChange)
         return
       }
 
@@ -139,7 +139,7 @@ export default {
         slug: this.newFeedSlug,
         metadataDetails: this.metadataDetails
       }
-      if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`
+      if (this.$isDev) payload.serverAddress = process.env.serverUrl
 
       console.log('Payload', payload)
       this.$axios

client/components/modals/rssfeed/ViewFeedModal.vue

@@ -6,7 +6,7 @@
 
         <div class="w-full relative">
           <ui-text-input v-model="feed.feedUrl" readonly />
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feed.feedUrl)">content_copy</span>
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feed.feedUrl)">content_copy</span>
         </div>
 
         <div v-if="feed.meta" class="mt-5">

client/components/player/PlayerPlaybackControls.vue

@@ -1,38 +1,37 @@
 <template>
-  <div class="flex items-center pt-4 pb-2 lg:pt-0 lg:pb-2">
-    <div class="flex-grow" />
-    <template v-if="!loading">
-      <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
-        <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
-          <span class="material-icons text-2xl sm:text-3xl">first_page</span>
+  <div class="flex justify-center pt-4 pb-2 lg:pt-0 lg:pb-2">
+    <div class="flex items-center justify-center flex-grow">
+      <template v-if="!loading">
+        <ui-tooltip direction="top" :text="$strings.ButtonPreviousChapter" class="mr-4 lg:mr-8">
+          <button :aria-label="$strings.ButtonPreviousChapter" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+            <span class="material-symbols text-2xl sm:text-3xl">first_page</span>
+          </button>
+        </ui-tooltip>
+        <ui-tooltip direction="top" :text="jumpBackwardText">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+            <span class="material-symbols text-2xl sm:text-3xl">replay</span>
+          </button>
+        </ui-tooltip>
+        <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+          <span class="material-symbols fill text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
         </button>
-      </ui-tooltip>
-      <ui-tooltip direction="top" :text="$strings.ButtonJumpBackward">
-        <button :aria-label="$strings.ButtonJumpBackward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
-          <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
-        </button>
-      </ui-tooltip>
-      <button :aria-label="paused ? $strings.ButtonPlay : $strings.ButtonPause" class="p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 lg:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
-        <span class="material-icons text-2xl">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-      </button>
-      <ui-tooltip direction="top" :text="$strings.ButtonJumpForward">
-        <button :aria-label="$strings.ButtonJumpForward" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-          <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
-        </button>
-      </ui-tooltip>
-      <ui-tooltip direction="top" :text="$strings.ButtonNextChapter" class="ml-4 lg:ml-8">
-        <button :aria-label="$strings.ButtonNextChapter" :disabled="!hasNextChapter" :class="hasNextChapter ? 'text-gray-300' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
-          <span class="material-icons text-2xl sm:text-3xl">last_page</span>
-        </button>
-      </ui-tooltip>
-      <controls-playback-speed-control v-model="playbackRateInput" @input="playbackRateUpdated" @change="playbackRateChanged" />
-    </template>
-    <template v-else>
-      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-        <span class="material-icons">autorenew</span>
-      </div>
-    </template>
-    <div class="flex-grow" />
+        <ui-tooltip direction="top" :text="jumpForwardText">
+          <button :aria-label="jumpForwardText" class="text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+            <span class="material-symbols text-2xl sm:text-3xl">forward_media</span>
+          </button>
+        </ui-tooltip>
+        <ui-tooltip direction="top" :text="hasNextLabel" class="ml-4 lg:ml-8">
+          <button :aria-label="hasNextLabel" :disabled="!hasNext" class="text-gray-300 disabled:text-gray-500" @mousedown.prevent @mouseup.prevent @click.stop="next">
+            <span class="material-symbols text-2xl sm:text-3xl">last_page</span>
+          </button>
+        </ui-tooltip>
+      </template>
+      <template v-else>
+        <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
+          <span class="material-symbols text-2xl">autorenew</span>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -41,21 +40,26 @@ export default {
   props: {
     loading: Boolean,
     seekLoading: Boolean,
-    playbackRate: Number,
     paused: Boolean,
-    hasNextChapter: Boolean
+    hasNextChapter: Boolean,
+    hasNextItemInQueue: Boolean
   },
   data() {
     return {}
   },
   computed: {
-    playbackRateInput: {
-      get() {
-        return this.playbackRate
-      },
-      set(val) {
-        this.$emit('update:playbackRate', val)
-      }
+    jumpForwardText() {
+      return this.getJumpText('jumpForwardAmount', this.$strings.ButtonJumpForward)
+    },
+    jumpBackwardText() {
+      return this.getJumpText('jumpBackwardAmount', this.$strings.ButtonJumpBackward)
+    },
+    hasNextLabel() {
+      if (this.hasNextItemInQueue && !this.hasNextChapter) return this.$strings.ButtonNextItemInQueue
+      return this.$strings.ButtonNextChapter
+    },
+    hasNext() {
+      return this.hasNextItemInQueue || this.hasNextChapter
     }
   },
   methods: {
@@ -65,9 +69,9 @@ export default {
     prevChapter() {
       this.$emit('prevChapter')
     },
-    nextChapter() {
-      if (!this.hasNextChapter) return
-      this.$emit('nextChapter')
+    next() {
+      if (!this.hasNext) return
+      this.$emit('next')
     },
     jumpBackward() {
       this.$emit('jumpBackward')
@@ -75,16 +79,21 @@ export default {
     jumpForward() {
       this.$emit('jumpForward')
     },
-    playbackRateUpdated(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-    },
-    playbackRateChanged(playbackRate) {
-      this.$emit('setPlaybackRate', playbackRate)
-      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
+    getJumpText(setting, prefix) {
+      const amount = this.$store.getters['user/getUserSetting'](setting)
+      if (!amount) return prefix
+
+      let formattedTime = ''
+      if (amount <= 60) {
+        formattedTime = this.$getString('LabelTimeDurationXSeconds', [amount])
+      } else {
+        const minutes = Math.floor(amount / 60)
+        formattedTime = this.$getString('LabelTimeDurationXMinutes', [minutes])
+      }
+
+      return `${prefix} - ${formattedTime}`
     }
   },
   mounted() {}
 }
-</script>
+</script>

client/components/player/PlayerUi.vue

@@ -2,61 +2,65 @@
   <div class="w-full -mt-6">
     <div class="w-full relative mb-1">
       <div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
-        <!-- <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
+        <controls-playback-speed-control v-model="playbackRate" @input="setPlaybackRate" @change="playbackRateChanged" class="mx-2 block" />
 
-        <ui-tooltip direction="top" :text="$strings.LabelVolume">
+        <ui-tooltip direction="left" :text="$strings.LabelVolume">
           <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
         </ui-tooltip>
 
-        <ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
+        <ui-tooltip v-if="!hideSleepTimer" direction="top" :text="$strings.LabelSleepTimer">
           <button :aria-label="$strings.LabelSleepTimer" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
-            <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
+            <span v-if="!sleepTimerSet" class="material-symbols 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>
+              <span class="material-symbols text-lg text-warning">snooze</span>
+              <p class="text-sm sm:text-lg text-warning font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
             </div>
           </button>
         </ui-tooltip>
 
-        <ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
+        <ui-tooltip v-if="!isPodcast && !hideBookmarks" direction="top" :text="$strings.LabelViewBookmarks">
           <button :aria-label="$strings.LabelViewBookmarks" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
-            <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
+            <span class="material-symbols text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
           </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewChapters">
           <button :aria-label="$strings.LabelViewChapters" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
-            <span class="material-icons text-2xl">format_list_bulleted</span>
+            <span class="material-symbols text-2xl">format_list_bulleted</span>
           </button>
         </ui-tooltip>
 
         <ui-tooltip v-if="playerQueueItems.length" direction="top" :text="$strings.LabelViewQueue">
           <button :aria-label="$strings.LabelViewQueue" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
-            <span class="material-icons text-2.5xl sm:text-3xl">playlist_play</span>
+            <span class="material-symbols text-2.5xl sm:text-3xl">playlist_play</span>
           </button>
         </ui-tooltip>
 
-        <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
-          <button :aria-label="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack" class="text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
-            <span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
+        <ui-tooltip direction="top" :text="$strings.LabelViewPlayerSettings">
+          <button :aria-label="$strings.LabelViewPlayerSettings" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerSettings')">
+            <span class="material-symbols text-2xl sm:text-2.5xl">settings_slow_motion</span>
           </button>
         </ui-tooltip>
       </div>
 
-      <player-playback-controls :loading="loading" :seek-loading="seekLoading" :playback-rate.sync="playbackRate" :paused="paused" :has-next-chapter="hasNextChapter" @prevChapter="prevChapter" @nextChapter="nextChapter" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setPlaybackRate="setPlaybackRate" @playPause="playPause" />
+      <player-playback-controls :loading="loading" :seek-loading="seekLoading" :playback-rate.sync="playbackRate" :paused="paused" :hasNextChapter="hasNextChapter" :hasNextItemInQueue="hasNextItemInQueue" @prevChapter="prevChapter" @next="goToNext" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setPlaybackRate="setPlaybackRate" @playPause="playPause" />
     </div>
 
     <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" :current-chapter="currentChapter" :playback-rate="playbackRate" @seek="seek" />
 
-    <div class="flex">
-      <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
-      <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
-      <div class="flex-grow" />
-      <p class="text-xs sm:text-sm text-gray-300 pt-0.5">
-        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ currentChapterIndex + 1 }} of {{ chapters.length }})</span>
-      </p>
-      <div class="flex-grow" />
-      <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+    <div class="relative flex items-center justify-between">
+      <div class="flex-grow flex items-center">
+        <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
+        <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
+      </div>
+      <div class="absolute left-1/2 transform -translate-x-1/2">
+        <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
+          {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
+        </p>
+      </div>
+      <div class="flex-grow flex items-center justify-end">
+        <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+      </div>
     </div>
 
     <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :playback-rate="playbackRate" :chapters="chapters" @select="selectChapter" />
@@ -72,13 +76,18 @@ export default {
       type: Array,
       default: () => []
     },
+    currentChapter: Object,
     bookmarks: {
       type: Array,
       default: () => []
     },
     sleepTimerSet: Boolean,
     sleepTimerRemaining: Number,
-    isPodcast: Boolean
+    sleepTimerType: String,
+    isPodcast: Boolean,
+    hideBookmarks: Boolean,
+    hideSleepTimer: Boolean,
+    hasNextItemInQueue: Boolean
   },
   data() {
     return {
@@ -88,27 +97,34 @@ export default {
       seekLoading: false,
       showChaptersModal: false,
       currentTime: 0,
-      duration: 0,
-      useChapterTrack: false
+      duration: 0
     }
   },
   watch: {
     playbackRate() {
       this.updateTimestamp()
+    },
+    useChapterTrack() {
+      if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
+      this.updateTimestamp()
     }
   },
   computed: {
     sleepTimerRemainingString() {
-      var rounded = Math.round(this.sleepTimerRemaining)
-      if (rounded < 90) {
-        return `${rounded}s`
+      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER) {
+        return 'EoC'
+      } else {
+        var rounded = Math.round(this.sleepTimerRemaining)
+        if (rounded < 90) {
+          return `${rounded}s`
+        }
+        var minutesRounded = Math.round(rounded / 60)
+        if (minutesRounded <= 90) {
+          return `${minutesRounded}m`
+        }
+        var hoursRounded = Math.round(minutesRounded / 60)
+        return `${hoursRounded}h`
       }
-      var minutesRounded = Math.round(rounded / 60)
-      if (minutesRounded < 90) {
-        return `${minutesRounded}m`
-      }
-      var hoursRounded = Math.round(minutesRounded / 60)
-      return `${hoursRounded}h`
     },
     token() {
       return this.$store.getters['user/getToken']
@@ -133,11 +149,8 @@ export default {
       if (!duration) return 0
       return Math.round((100 * time) / duration)
     },
-    currentChapter() {
-      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
-    },
     currentChapterName() {
-      return this.currentChapter ? this.currentChapter.title : ''
+      return this.currentChapter?.title || ''
     },
     currentChapterDuration() {
       if (!this.currentChapter) return 0
@@ -160,27 +173,15 @@ export default {
     },
     playerQueueItems() {
       return this.$store.state.playerQueueItems || []
+    },
+    useChapterTrack() {
+      const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
+      return this.chapters.length ? _useChapterTrack : false
     }
   },
   methods: {
     toggleFullscreen(isFullscreen) {
       this.$store.commit('setPlayerIsFullscreen', isFullscreen)
-
-      var videoPlayerEl = document.getElementById('video-player')
-      if (videoPlayerEl) {
-        if (isFullscreen) {
-          videoPlayerEl.style.width = '100vw'
-          videoPlayerEl.style.height = '100vh'
-          videoPlayerEl.style.top = '0px'
-          videoPlayerEl.style.left = '0px'
-        } else {
-          videoPlayerEl.style.width = '384px'
-          videoPlayerEl.style.height = '216px'
-          videoPlayerEl.style.top = 'unset'
-          videoPlayerEl.style.bottom = '80px'
-          videoPlayerEl.style.left = '16px'
-        }
-      }
     },
     setDuration(duration) {
       this.duration = duration
@@ -227,6 +228,12 @@ export default {
       this.playbackRate = Number((this.playbackRate - 0.1).toFixed(1))
       this.setPlaybackRate(this.playbackRate)
     },
+    playbackRateChanged(playbackRate) {
+      this.setPlaybackRate(playbackRate)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+    },
     setPlaybackRate(playbackRate) {
       this.$emit('setPlaybackRate', playbackRate)
     },
@@ -266,10 +273,13 @@ export default {
         this.seek(this.currentChapter.start)
       }
     },
-    nextChapter() {
-      if (!this.currentChapter || !this.hasNextChapter) return
-      var nextChapter = this.chapters[this.currentChapterIndex + 1]
-      this.seek(nextChapter.start)
+    goToNext() {
+      if (this.hasNextChapter) {
+        const nextChapter = this.chapters[this.currentChapterIndex + 1]
+        this.seek(nextChapter.start)
+      } else if (this.hasNextItemInQueue) {
+        this.$emit('nextItemInQueue')
+      }
     },
     setStreamReady() {
       if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(1)
@@ -308,9 +318,6 @@ export default {
     init() {
       this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
 
-      const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
-      this.useChapterTrack = this.chapters.length ? _useChapterTrack : false
-
       if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
       this.setPlaybackRate(this.playbackRate)
     },
@@ -368,4 +375,4 @@ export default {
     left: 100%;
   }
 }
-</style>
+</style>