Version bump 2.1.5

Pass lib ID to toolbar so it can refresh state when clearing issues.

.github/ISSUE_TEMPLATE/bug.yaml

@@ -9,6 +9,12 @@ body:
   - type: markdown
     attributes:
       value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
+  - type: markdown
+    attributes:
+      value: "### Join the [discord server](https://discord.gg/pJsjuNCKRq) for questions or if you are not sure about a bug."
+  - type: markdown
+    attributes:
+      value: "## Be as descriptive as you can. Include screenshots, error logs, browser, file types, everything you can think of that might be relevant."
   - type: textarea
     id: what-happened
     attributes:
@@ -27,6 +33,7 @@ body:
     id: version
     attributes:
       label: Audiobookshelf version
+      description: Do not put 'Latest version', please put the actual version here
       placeholder: "e.g. v1.6.60"
     validations:
       required: true

.github/workflows/docker-build.yml

@@ -3,8 +3,15 @@
 name: Build and Push Docker Image
 
 on:
+  # Allows you to run workflow manually from Actions tab
+  workflow_dispatch:
+    inputs:
+      tags:
+        description: 'Docker Tag'
+        required: true
+        default: 'latest'
   push:
-    branches: [master]
+    branches: [main,master]
     tags:
       - 'v*.*.*'
     # Only build when files in these directories have been changed
@@ -13,8 +20,6 @@ on:
       - server/**
       - index.js
       - package.json
-  # Allows you to run workflow manually from Actions tab
-  workflow_dispatch:
 
 jobs:
   build:
@@ -23,24 +28,25 @@ jobs:
 
     steps:
       - name: Check out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
           tags: |
             type=edge,branch=master
             type=semver,pattern={{version}}
+
       - name: Setup QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-        
+        uses: docker/setup-buildx-action@v2
+
       - name: Cache Docker layers
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
@@ -48,28 +54,28 @@ jobs:
             ${{ runner.os }}-buildx-
 
       - name: Login to Dockerhub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
+
       - name: Login to ghcr
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GHCR_PASSWORD }}
 
       - name: Build image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
-          tags: ${{ steps.meta.outputs.tags }}
+          tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
           context: .
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           push: true
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-          
+
       - name: Move cache
         run: |
           rm -rf /tmp/.buildx-cache

.gitignore

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

Dockerfile

@@ -7,13 +7,23 @@ RUN npm run generate
 
 ### STAGE 1: Build server ###
 FROM node:16-alpine
-RUN apk update && apk add --no-cache --update ffmpeg
 ENV NODE_ENV=production
+RUN apk update && \
+    apk add --no-cache --update \
+    curl \
+    tzdata \
+    ffmpeg
+
 COPY --from=build /client/dist /client/dist
-COPY index.js index.js
-COPY package-lock.json package-lock.json
-COPY package.json package.json
+COPY index.js package* /
 COPY server server
+
 RUN npm ci --only=production
+
 EXPOSE 80
+HEALTHCHECK \
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/healthcheck || exit 1
 CMD ["npm", "start"]

build/debian/DEBIAN/preinst

@@ -5,7 +5,7 @@ set -o pipefail
 FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg"
 DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
 CONFIG_PATH="/etc/default/audiobookshelf"
-DEFAULT_PORT=7331
+DEFAULT_PORT=13378
 DEFAULT_HOST="0.0.0.0"
 
 

client/assets/app.css

@@ -22,6 +22,10 @@
 #bookshelf {
   height: calc(100% - 40px);
   background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
+
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #855620 rgba(0, 0, 0, 0);
 }
 
 .bookshelf-row {
@@ -225,4 +229,18 @@ Bookshelf Label
   -webkit-line-clamp: 2;
   /* number of lines to show */
   -webkit-box-orient: vertical;
+}
+
+
+/* Padding for toastification toasts in the top right to not cover appbar/toolbar */
+.app-bar-and-toolbar .Vue-Toastification__container.top-right {
+  padding-top: 104px;
+}
+
+.app-bar .Vue-Toastification__container.top-right {
+  padding-top: 64px;
+}
+
+.no-bars .Vue-Toastification__container.top-right {
+  padding-top: 8px;
 }

client/assets/draggable.css

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

client/assets/fonts.css

@@ -74,7 +74,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -84,7 +84,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -94,7 +94,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 
@@ -104,7 +104,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0370-03FF;
 }
 
@@ -114,7 +114,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 
@@ -124,7 +124,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -134,7 +134,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -154,7 +154,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -164,7 +164,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 
@@ -174,7 +174,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+0370-03FF;
 }
 
@@ -184,7 +184,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 
@@ -194,7 +194,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -204,7 +204,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -214,7 +214,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -224,7 +224,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -234,7 +234,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 
@@ -244,7 +244,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0370-03FF;
 }
 
@@ -254,7 +254,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 
@@ -264,7 +264,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -274,7 +274,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -284,7 +284,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
@@ -294,7 +294,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
@@ -304,7 +304,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+1F00-1FFF;
 }
 
@@ -314,7 +314,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0370-03FF;
 }
 
@@ -324,7 +324,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -334,6 +334,6 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

client/components/app/Appbar.vue

@@ -3,28 +3,28 @@
     <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
         <nuxt-link to="/">
-          <img src="/icon48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
+          <img src="/icon.svg" class="w-8 min-w-8 h-8 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
         </nuxt-link>
 
         <nuxt-link to="/">
           <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
         </nuxt-link>
 
-        <ui-libraries-dropdown />
+        <ui-libraries-dropdown class="mr-2" />
 
-        <controls-global-search v-if="currentLibrary" class="hidden md:block" />
+        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
         <div class="flex-grow" />
 
-        <span v-if="showExperimentalFeatures" class="material-icons text-4xl text-warning pr-0 sm:pr-2 md:pr-4">logo_dev</span>
+        <span v-if="showExperimentalFeatures" class="material-icons text-2xl md:text-4xl text-warning pr-0 sm:pr-2 md:pr-4">logo_dev</span>
 
         <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
           <span class="material-icons-outlined text-warning text-opacity-50"> cast </span>
         </ui-tooltip>
-        <div v-if="isChromecastInitialized" class="w-6 h-6 mr-2 cursor-pointer">
+        <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
           <google-cast-launcher></google-cast-launcher>
         </div>
 
-        <nuxt-link v-if="currentLibrary" to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+        <nuxt-link v-if="currentLibrary" to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
           <span class="material-icons" aria-label="User Stats" role="button">equalizer</span>
         </nuxt-link>
 
@@ -158,7 +158,7 @@ export default {
       var newIsFinished = !this.selectedIsFinished
       var updateProgressPayloads = this.selectedLibraryItems.map((lid) => {
         return {
-          id: lid,
+          libraryItemId: lid,
           isFinished: newIsFinished
         }
       })

client/components/app/BookShelfCategorized.vue

@@ -33,7 +33,7 @@
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
       <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
       </template>
     </div>
   </div>
@@ -70,11 +70,8 @@ export default {
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
-    bookshelfView() {
-      return this.$store.getters['getServerSetting']('bookshelfView')
-    },
     isAlternativeBookshelfView() {
-      return this.bookshelfView === this.$constants.BookshelfView.TITLES
+      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.TITLES
     },
     bookCoverWidth() {
       var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
@@ -82,13 +79,10 @@ export default {
       return coverSize
     },
     coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-    },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
+      return this.coverAspectRatio == 1
     },
     sizeMultiplier() {
       var baseSize = this.isCoverSquareAspectRatio ? 192 : 120

client/components/app/BookShelfRow.vue

@@ -17,6 +17,11 @@
             <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
           </template>
         </div>
+        <div v-if="shelf.type === 'tags'" class="flex items-center">
+          <template v-for="entity in shelf.entities">
+            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+          </template>
+        </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
             <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
@@ -25,7 +30,7 @@
       </div>
     </div>
 
-    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 22px">
+    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
         <p class="transform text-sm">{{ shelf.label }}</p>
       </div>

client/components/app/BookShelfToolbar.vue

@@ -2,13 +2,19 @@
   <div class="w-full h-20 md:h-10 relative">
     <div class="flex md:hidden h-10 items-center">
       <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p>Home</p>
+        <p class="text-sm">Home</p>
       </nuxt-link>
       <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p>Library</p>
+        <p class="text-sm">Library</p>
       </nuxt-link>
-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p>Series</p>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">Series</p>
+      </nuxt-link>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">Collections</p>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">Search</p>
       </nuxt-link>
     </div>
     <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
@@ -83,7 +89,7 @@ export default {
     authors: {
       type: Array,
       default: () => []
-    }
+    },
   },
   data() {
     return {
@@ -98,6 +104,9 @@ export default {
     }
   },
   computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     userCanDelete() {
       return this.$store.getters['user/getUserCanDelete']
     },
@@ -129,6 +138,12 @@ export default {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcast'
+    },
     homePage() {
       return this.$route.name === 'library-library'
     },
@@ -156,6 +171,9 @@ export default {
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
     }
   },
   methods: {
@@ -197,6 +215,7 @@ export default {
             this.$toast.success('Removed library items with issues')
             this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
             this.processingIssues = false
+            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
           })
           .catch((error) => {
             console.error('Failed to remove library items with issues', error)
@@ -210,7 +229,7 @@ export default {
       this.processingSeries = true
       var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
         return {
-          id: lid,
+          libraryItemId: lid,
           isFinished: newIsFinished
         }
       })
@@ -284,4 +303,4 @@ export default {
 #toolbar {
   box-shadow: 0px 8px 6px #111111aa;
 }
-</style>
+</style>

client/components/app/ConfigSideNav.vue

@@ -4,19 +4,21 @@
       <span class="material-icons text-2xl">arrow_back</span>
     </div>
 
-    <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
+    <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 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'">
       <p>{{ route.title }}</p>
       <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
     <div class="w-full h-12 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamLibraryItem && isMobileLandscape ? '300px' : '65px' }">
       <div class="flex justify-between">
-        <p class="font-mono text-sm">v{{ $config.version }}</p>
+        <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>
 
         <p class="font-mono text-xs text-gray-300 italic">{{ Source }}</p>
       </div>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </div>
+
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version"/>
   </div>
 </template>
 
@@ -26,7 +28,9 @@ export default {
     isOpen: Boolean
   },
   data() {
-    return {}
+    return {
+      showChangelogModal: false
+    }
   },
   computed: {
     Source() {
@@ -64,6 +68,11 @@ export default {
           title: 'Users',
           path: '/config/users'
         },
+        {
+          id: 'config-sessions',
+          title: 'Listening Sessions',
+          path: '/config/sessions'
+        },
         {
           id: 'config-backups',
           title: 'Backups',
@@ -71,7 +80,7 @@ export default {
         },
         {
           id: 'config-log',
-          title: 'Log',
+          title: 'Logs',
           path: '/config/log'
         }
       ]
@@ -124,18 +133,24 @@ export default {
     githubTagUrl() {
       return this.versionData.githubTagUrl
     },
+    currentVersionChangelog() {
+      return this.versionData.currentVersionChangelog || 'No Changelog Available'
+    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     }
   },
   methods: {
+    clickChangelog(){
+      this.showChangelogModal = true
+    },
     clickOutside() {
       if (!this.isOpen) return
       this.closeDrawer()
     },
     closeDrawer() {
       this.$emit('update:isOpen', false)
-    }
+    },
   }
 }
 </script>

client/components/app/LazyBookshelf.vue

@@ -88,6 +88,7 @@ export default {
       if (this.page === 'collections') return "You haven't made any collections yet"
       if (this.hasFilter) {
         if (this.filterName === 'Issues') return 'No Issues'
+        else if (this.filterName === 'Feed-open') return 'No RSS feeds are open'
         return `No Results for filter "${this.filterName}: ${this.filterValue}"`
       }
       return 'No results'
@@ -109,24 +110,20 @@ export default {
       return this.$store.getters['user/getUserSetting']('collapseSeries')
     },
     coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
-    bookshelfView() {
-      return this.$store.getters['getServerSetting']('bookshelfView')
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     sortingIgnorePrefix() {
       return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
     },
     isCoverSquareAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+      return this.coverAspectRatio == 1
+    },
+    bookshelfView() {
+      return this.$store.getters['getBookshelfView']
     },
     isAlternativeBookshelfView() {
-      // if (!this.isEntityBook) return false // Only used for bookshelf showing books
       return this.bookshelfView === this.$constants.BookshelfView.TITLES
     },
-    bookCoverAspectRatio() {
-      return this.isCoverSquareAspectRatio ? 1 : 1.6
-    },
     hasFilter() {
       return this.filterBy && this.filterBy !== 'all'
     },

client/components/app/SideRail.vue

@@ -75,17 +75,21 @@
     </nuxt-link>
 
     <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
-      <p class="font-mono text-xs text-center text-gray-300 leading-3 mb-1">v{{ $config.version }}</p>
+      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>
+
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version"/>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      showChangelogModal: false
+    }
   },
   computed: {
     Source() {
@@ -150,17 +154,21 @@ 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
     }
   },
-  methods: {},
+  methods: {
+    clickChangelog(){
+      this.showChangelogModal = true
+    } 
+  },
   mounted() {}
 }
 </script>

client/components/app/StreamContainer.vue

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

client/components/cards/BookMatchCard.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="w-full border-b border-gray-700 pb-2">
+  <div v-if="book" class="w-full border-b border-gray-700 pb-2">
     <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
-      <div class="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
-        <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
-      </div>
-      <div v-if="!isPodcast" class="px-4 flex-grow">
-        <div class="flex items-center">
-          <h1>{{ book.title }}</h1>
-          <div class="flex-grow" />
-          <p>{{ book.publishedYear }}</p>
+      <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
+        <div class="w-full bg-primary">
+          <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
+        </div>
+      </div>
+      <div v-if="!isPodcast" class="px-2 md:px-4 flex-grow">
+        <div class="flex items-center">
+          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
+          <div class="flex-grow" />
+          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
+        </div>
+        <p class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
+        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
+        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
+        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
+          <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
+            <p class="leading-3 text-xs text-gray-400">
+              {{ series.series }}<span v-if="series.volumeNumber">&nbsp;#{{ series.volumeNumber }}</span>
+            </p>
+          </div>
         </div>
-        <p class="text-gray-400">{{ book.author }}</p>
         <div class="w-full max-h-12 overflow-hidden">
           <p class="text-gray-500 text-xs">{{ book.description }}</p>
         </div>
@@ -18,7 +29,7 @@
       <div v-else class="px-4 flex-grow">
         <h1>{{ book.title }}</h1>
         <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
-        <p class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
+        <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
         <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
       </div>
     </div>
@@ -56,7 +67,7 @@ export default {
     selectMatch() {
       var book = { ...this.book }
       book.cover = this.selectedCover
-      this.$emit('select', this.book)
+      this.$emit('select', book)
     },
     clickCover(cover) {
       this.selectedCover = cover

client/components/cards/GroupCard.vue

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

client/components/cards/ItemSearchCard.vue

@@ -31,7 +31,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     coverWidth() {
       if (this.bookCoverAspectRatio === 1) return 50 * 1.2
@@ -62,21 +62,10 @@ export default {
     matchHtml() {
       if (!this.matchText || !this.search) return ''
       if (this.matchKey === 'subtitle') return ''
-      var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
-      if (matchSplit.length < 2) return ''
 
-      var html = ''
-      var totalLenSoFar = 0
-      for (let i = 0; i < matchSplit.length - 1; i++) {
-        var indexOf = matchSplit[i].length
-        var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
-        var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
-        totalLenSoFar += indexOf + this.search.length
-
-        html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
-      }
-      var lastPart = this.matchText.substr(totalLenSoFar)
-      html += lastPart
+      // 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 === 'tags') return `<p class="truncate">Tags: ${html}</p>`
       if (this.matchKey === 'authors') return `by ${html}`

client/components/cards/LazyBookCard.vue

@@ -39,7 +39,7 @@
     <div v-if="!booksInSeries && (!isPodcast || episodeProgress)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
     <!-- Overlay is not shown if collapsing series in library -->
-    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen)" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
+    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
       <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
@@ -66,6 +66,11 @@
       </div>
     </div>
 
+    <!-- Processing/loading spinner overlay -->
+    <div v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+      <widgets-loading-spinner size="la-lg" />
+    </div>
+
     <!-- Series name overlay -->
     <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
       <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
@@ -78,13 +83,17 @@
       </div>
     </ui-tooltip>
 
+    <div v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
+      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
+    </div>
+
     <!-- Series sequence -->
     <div v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">Episode #{{ recentEpisodeNumber }}</p>
     </div>
 
@@ -125,10 +134,9 @@ export default {
     return {
       isHovering: false,
       isMoreMenuOpen: false,
-      isProcessingReadUpdate: false,
+      processing: false,
       libraryItem: null,
       imageReady: false,
-      rescanning: false,
       selected: false,
       isSelectionMode: false,
       showCoverBg: false
@@ -144,6 +152,9 @@ export default {
     }
   },
   computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
     showExperimentalFeatures() {
       return this.store.state.showExperimentalFeatures
     },
@@ -245,13 +256,15 @@ export default {
       return this.mediaMetadata.authorNameLF
     },
     displayTitle() {
-      if (this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix) {
-        return this.mediaMetadata.titleIgnorePrefix
-      }
-      return this.title
+      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
     },
     displayLineTwo() {
+      if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
+      if (this.collapsedSeries) return ''
       if (this.isAuthorBookshelfView) {
         return this.mediaMetadata.publishedYear || ''
       }
@@ -259,9 +272,10 @@ export default {
       return this.author
     },
     displaySortLine() {
-      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs)
-      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs)
-      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt)
+      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`
@@ -372,12 +386,14 @@ export default {
           {
             func: 'toggleFinished',
             text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
-          },
-          {
-            func: 'openCollections',
-            text: 'Add to Collection'
           }
         ]
+        if (this.userCanUpdate) {
+          items.push({
+            func: 'openCollections',
+            text: 'Add to Collection'
+          })
+        }
       }
       if (this.userCanUpdate) {
         items.push({
@@ -438,6 +454,10 @@ export default {
       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.store.getters['feeds/getFeedForItem'](this.libraryItemId)
     }
   },
   methods: {
@@ -476,6 +496,7 @@ export default {
       this.libraryItem = libraryItem
     },
     clickCard(e) {
+      if (this.processing) return
       if (this.isSelectionMode) {
         e.stopPropagation()
         e.preventDefault()
@@ -494,11 +515,25 @@ export default {
       }
       this.$emit('edit', this.libraryItem)
     },
-    toggleFinished() {
+    toggleFinished(confirmed = false) {
+      if (!this.itemIsFinished && this.userProgressPercent > 0 && !confirmed) {
+        const payload = {
+          message: `Are you sure you want to mark "${this.displayTitle}" as finished?`,
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.toggleFinished(true)
+            }
+          },
+          type: 'yesNo'
+        }
+        this.store.commit('globals/setConfirmPrompt', payload)
+        return
+      }
+
       var updatePayload = {
         isFinished: !this.itemIsFinished
       }
-      this.isProcessingReadUpdate = true
+      this.processing = true
 
       var apiEndpoint = `/api/me/progress/${this.libraryItemId}`
       if (this.recentEpisode) apiEndpoint += `/${this.recentEpisode.id}`
@@ -508,12 +543,12 @@ export default {
       axios
         .$patch(apiEndpoint, updatePayload)
         .then(() => {
-          this.isProcessingReadUpdate = false
+          this.processing = false
           toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
         })
         .catch((error) => {
           console.error('Failed', error)
-          this.isProcessingReadUpdate = false
+          this.processing = false
           toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
         })
     },
@@ -521,11 +556,12 @@ export default {
       this.$emit('editPodcast', this.libraryItem)
     },
     rescan() {
-      this.rescanning = true
-      this.$axios
+      if (this.processing) return
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
         .$get(`/api/items/${this.libraryItemId}/scan`)
         .then((data) => {
-          this.rescanning = false
           var result = data.result
           if (!result) {
             this.$toast.error(`Re-Scan Failed for "${this.title}"`)
@@ -536,11 +572,12 @@ export default {
           } else if (result === 'REMOVED') {
             this.$toast.error(`Re-Scan complete item was removed`)
           }
+          this.processing = false
         })
         .catch((error) => {
           console.error('Failed to scan library item', error)
           this.$toast.error('Failed to scan library item')
-          this.rescanning = false
+          this.processing = false
         })
     },
     showEditModalFiles() {
@@ -619,11 +656,50 @@ export default {
       this.selected = !this.selected
       this.$emit('select', this.libraryItem)
     },
-    play() {
+    async play() {
       var eventBus = this.$eventBus || this.$nuxt.$eventBus
+
+      const queueItems = []
+      // Podcast episode load queue items
+      if (this.recentEpisode) {
+        const axios = this.$axios || this.$nuxt.$axios
+        this.processing = true
+        const fullLibraryItem = await axios.$get(`/api/items/${this.libraryItemId}`).catch((err) => {
+          console.error('Failed to fetch library item', err)
+          return null
+        })
+        this.processing = false
+
+        if (fullLibraryItem && fullLibraryItem.media.episodes) {
+          const episodes = fullLibraryItem.media.episodes || []
+          // Sort from least recent to most recent
+          episodes.sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+
+          const episodeIndex = episodes.findIndex((ep) => ep.id === this.recentEpisode.id)
+          if (episodeIndex >= 0) {
+            for (let i = episodeIndex; i < episodes.length; i++) {
+              const episode = episodes[i]
+              const podcastProgress = this.store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+              if (!podcastProgress || !podcastProgress.isFinished) {
+                queueItems.push({
+                  libraryItemId: this.libraryItemId,
+                  episodeId: episode.id,
+                  title: episode.title,
+                  subtitle: this.mediaMetadata.title,
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  duration: episode.audioFile.duration || null,
+                  coverPath: this.media.coverPath || null
+                })
+              }
+            }
+          }
+        }
+      }
+
       eventBus.$emit('play-item', {
         libraryItemId: this.libraryItemId,
-        episodeId: this.recentEpisode ? this.recentEpisode.id : null
+        episodeId: this.recentEpisode ? this.recentEpisode.id : null,
+        queueItems
       })
     },
     mouseover() {

client/components/cards/LazyCollectionCard.vue

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

client/components/cards/LazySeriesCard.vue

@@ -2,7 +2,7 @@
   <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
     <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
-      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" :group-to="seriesBooksRoute" />
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
     <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
@@ -10,16 +10,16 @@
     <div v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />
 
     <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ title }}</p>
+      <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
     </div>
 
     <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, 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>
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
       </div>
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
     </div>
   </div>
 </template>
@@ -39,7 +39,8 @@ export default {
     seriesMount: {
       type: Object,
       default: () => null
-    }
+    },
+    sortingIgnorePrefix: Boolean
   },
   data() {
     return {
@@ -65,6 +66,13 @@ export default {
     title() {
       return this.series ? this.series.name : ''
     },
+    nameIgnorePrefix() {
+      return this.series ? this.series.nameIgnorePrefix : ''
+    },
+    displayTitle() {
+      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
+      return this.title
+    },
     books() {
       return this.series ? this.series.books || [] : []
     },

client/components/cards/SeriesSearchCard.vue

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

client/components/controls/FilterSelect.vue

@@ -116,6 +116,11 @@ export default {
           text: 'Issues',
           value: 'issues',
           sublist: false
+        },
+        {
+          text: 'RSS Feed Open',
+          value: 'feed-open',
+          sublist: false
         }
       ],
       podcastItems: [
@@ -214,7 +219,7 @@ export default {
       return this.filterData.languages || []
     },
     progress() {
-      return ['Finished', 'In Progress', 'Not Started']
+      return ['Finished', 'In Progress', 'Not Started', 'Not Finished']
     },
     missing() {
       return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']

client/components/controls/GlobalSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-80 ml-6 relative">
+  <div class="sm:w-80 w-full relative">
     <form @submit.prevent="submitSearch">
       <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
     </form>
@@ -7,7 +7,7 @@
       <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
       <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
           <p>Thinking...</p>
@@ -21,7 +21,7 @@
         <template v-else>
           <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Books</p>
           <template v-for="item in bookResults">
-            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
+            <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" />
               </nuxt-link>
@@ -30,7 +30,7 @@
 
           <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Podcasts</p>
           <template v-for="item in podcastResults">
-            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
+            <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" />
               </nuxt-link>
@@ -39,7 +39,7 @@
 
           <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Authors</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">
+            <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)}`">
                 <cards-author-search-card :author="item" />
               </nuxt-link>
@@ -48,7 +48,7 @@
 
           <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Series</p>
           <template v-for="item in seriesResults">
-            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
+            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/series/${item.series.id}`">
                 <cards-series-search-card :series="item.series" :book-items="item.books" />
               </nuxt-link>
@@ -57,7 +57,7 @@
 
           <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Tags</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">
+            <li :key="item.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
               <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
                 <cards-tag-search-card :tag="item.name" />
               </nuxt-link>
@@ -97,6 +97,9 @@ export default {
     }
   },
   methods: {
+    clickOption() {
+      this.clearResults()
+    },
     submitSearch() {
       if (!this.search) return
       var search = this.search

client/components/controls/OrderSelect.vue

@@ -44,6 +44,10 @@ export default {
           text: 'Author (Last, First)',
           value: 'media.metadata.authorNameLF'
         },
+        {
+          text: 'Published Year',
+          value: 'media.metadata.publishedYear'
+        },
         {
           text: 'Added At',
           value: 'addedAt'

client/components/controls/PlaybackSpeedControl.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="relative ml-8" v-click-outside="clickOutside">
+  <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">{{ playbackRate.toFixed(1) }}<span class="text-lg">⨯</span></span>
+      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base sm:text-lg">⨯</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-20 left-0 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -92px">
-      <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
+    <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 class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
       <div class="flex items-center h-9 relative overflow-hidden rounded-lg" style="width: 220px">
@@ -19,7 +19,7 @@
       <div class="w-full py-1 px-4">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
-          <p class="px-2 text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
+          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
           <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
@@ -40,7 +40,9 @@ export default {
       showMenu: false,
       currentPlaybackRate: 0,
       MIN_SPEED: 0.5,
-      MAX_SPEED: 3
+      MAX_SPEED: 3,
+      menuLeft: -92,
+      arrowLeft: 0
     }
   },
   computed: {
@@ -80,8 +82,22 @@ export default {
       var newPlaybackRate = this.playbackRate - 0.1
       this.playbackRate = Number(newPlaybackRate.toFixed(1))
     },
+    updateMenuPositions() {
+      if (!this.$refs.wrapper) return
+      const boundingBox = this.$refs.wrapper.getBoundingClientRect()
+
+      if (boundingBox.left + 110 > window.innerWidth - 10) {
+        this.menuLeft = window.innerWidth - 230 - boundingBox.left
+
+        this.arrowLeft = Math.abs(this.menuLeft) - 92
+      } else {
+        this.menuLeft = -92
+        this.arrowLeft = 0
+      }
+    },
     setShowMenu(val) {
       if (val) {
+        this.updateMenuPositions()
         this.currentPlaybackRate = this.playbackRate
       } else if (this.currentPlaybackRate !== this.playbackRate) {
         this.$emit('change', this.playbackRate)

client/components/controls/VolumeControl.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div class="cursor-pointer" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
-      <span class="material-icons text-3xl">{{ volumeIcon }}</span>
+    <div class="cursor-pointer text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
+      <span class="material-icons text-2xl sm:text-3xl">{{ volumeIcon }}</span>
     </div>
     <transition name="menux">
       <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">

client/components/covers/BookCover.vue

@@ -125,6 +125,9 @@ export default {
     },
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {

client/components/covers/GroupCover.vue

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

client/components/covers/PreviewCover.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-    <div class="w-full h-full relative">
+  <div class="relative rounded-sm" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+    <div class="w-full h-full relative overflow-hidden">
       <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
@@ -17,6 +17,8 @@
         <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </div>
     </div>
+
+    <p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
   </div>
 </template>
 
@@ -29,7 +31,11 @@ export default {
       default: 120
     },
     showOpenNewTab: Boolean,
-    bookCoverAspectRatio: Number
+    bookCoverAspectRatio: Number,
+    showResolution: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -54,6 +60,9 @@ export default {
     },
     placeholderCoverPadding() {
       return 0.8 * this.sizeMultiplier
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {

client/components/modals/AccountModal.vue

@@ -146,7 +146,6 @@ export default {
   watch: {
     show: {
       handler(newVal) {
-        console.log('accoutn modal show change', newVal)
         if (newVal) {
           this.init()
         }
@@ -162,6 +161,9 @@ export default {
         this.$emit('input', val)
       }
     },
+    user() {
+      return this.$store.state.user.user
+    },
     title() {
       return this.isNew ? 'Add New Account' : `Update ${(this.account || {}).username}`
     },
@@ -250,6 +252,12 @@ export default {
             this.$toast.error(`Failed to update account: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
+
+            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
+              console.log('Current user token was updated')
+              this.$store.commit('user/setUserToken', data.user.token)
+            }
+
             this.$toast.success('Account updated')
             this.show = false
           }
@@ -305,7 +313,6 @@ export default {
 
       this.isNew = !this.account
       if (this.account) {
-        console.log(this.account)
         this.newUser = {
           username: this.account.username,
           password: this.account.password,

client/components/modals/BackupScheduleModal.vue

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

client/components/modals/BookmarksModal.vue

@@ -1,6 +1,11 @@
 <template>
   <modals-modal v-model="show" name="bookmarks" :width="500" :height="'unset'">
-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Your Bookmarks</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <div v-if="show" class="w-full h-full">
         <template v-for="bookmark in bookmarks">
           <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
@@ -8,8 +13,8 @@
         <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
           <p class="text-xl">No Bookmarks</p>
         </div>
-        <div class="w-full h-px bg-white bg-opacity-10" />
-        <form @submit.prevent="submitCreateBookmark">
+        <div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
+        <form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
           <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
             <div class="w-16 max-w-16 text-center">
               <p class="text-sm font-mono text-gray-400">
@@ -39,7 +44,8 @@ export default {
       type: Number,
       default: 0
     },
-    libraryItemId: String
+    libraryItemId: String,
+    hideCreate: Boolean
   },
   data() {
     return {

client/components/modals/ChaptersModal.vue

@@ -1,11 +1,14 @@
 <template>
-  <modals-modal v-model="show" name="chapters" :width="500" :height="'unset'">
-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+  <modals-modal v-model="show" name="chapters" :width="600" :height="'unset'">
+    <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <template v-for="chap in chapters">
         <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
-          {{ chap.title }}
+          <p class="chapter-title truncate text-sm md:text-base">
+            {{ chap.title }}
+          </p>
+          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended(chap.end - chap.start) }}</span>
           <span class="flex-grow" />
-          <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
+          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
 
           <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
         </div>
@@ -70,4 +73,15 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+#chapter-modal-wrapper .chapter-title {
+  max-width: calc(100% - 120px);
+}
+@media (min-width: 640px) {
+  #chapter-modal-wrapper .chapter-title {
+    max-width: calc(100% - 150px);
+  }
+}
+</style>

client/components/modals/Dialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="title" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
+              <div class="relative flex items-center px-3">
+                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    title: String,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    selected: String // optional
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(action) {
+      this.$emit('action', action)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/EditCollectionModal.vue

@@ -20,7 +20,7 @@
             </div>
           </div>
           <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
-            <ui-btn small color="error" type="button" @click.stop="removeClick">Remove</ui-btn>
+            <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">Remove</ui-btn>
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">Save</ui-btn>
           </div>
@@ -75,7 +75,7 @@ export default {
       }
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     collection() {
       return this.$store.state.globals.selectedCollection || {}
@@ -85,6 +85,9 @@ export default {
     },
     books() {
       return this.collection.books || []
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {

client/components/modals/EditSeriesInputInnerModal.vue

@@ -1,17 +1,17 @@
 <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: 51" @click="clickClose">
-    <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
-      <span class="material-icons text-4xl">close</span>
+    <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>
     </div>
     <div ref="content" class="text-white">
       <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
-        <div class="bg-bg rounded-lg p-8" @click.stop>
+        <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-80">
-              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!selectedSeries.id.startsWith('new')" label="Series Name" />
+            <div class="flex-grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" label="Series Name" />
             </div>
-            <div class="w-40 p-1">
-              <ui-text-input-with-label v-model="selectedSeries.sequence" label="Sequence" />
+            <div class="w-24 sm:w-28 md:w-40 p-1">
+              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" label="Sequence" />
             </div>
           </div>
           <div class="flex justify-end mt-2 p-1">
@@ -59,9 +59,26 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    isNewSeries() {
+      if (!this.selectedSeries || !this.selectedSeries.id) return false
+      return this.selectedSeries.id.startsWith('new')
     }
   },
   methods: {
+    setInputFocus() {
+      if (this.isNewSeries) {
+        // Focus on series input if new series
+        if (this.$refs.newSeriesSelect) {
+          this.$refs.newSeriesSelect.setFocus()
+        }
+      } else {
+        // Focus on sequence input if existing series
+        if (this.$refs.sequenceInput) {
+          this.$refs.sequenceInput.setFocus()
+        }
+      }
+    },
     submitSeriesForm() {
       if (this.$refs.newSeriesSelect) {
         this.$refs.newSeriesSelect.blur()
@@ -89,15 +106,15 @@ export default {
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
       }, 10)
-      document.documentElement.classList.add('modal-open')
 
       this.$store.commit('setInnerModalOpen', true)
       this.$eventBus.$on('modal-hotkey', this.hotkey)
+
+      this.setInputFocus()
     },
     setHide() {
       if (this.content) this.content.style.transform = 'scale(0)'
       if (this.el) this.el.remove()
-      document.documentElement.classList.remove('modal-open')
 
       this.$store.commit('setInnerModalOpen', false)
       this.$eventBus.$off('modal-hotkey', this.hotkey)

client/components/modals/ListeningSessionModal.vue

@@ -1,11 +1,11 @@
 <template>
-  <modals-modal v-model="show" name="listening-session-modal" :width="700" :height="'unset'">
+  <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="font-book text-3xl text-white truncate">Session {{ _session.id }}</p>
       </div>
     </template>
-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
       <div class="flex items-center">
         <p class="text-base text-gray-200">{{ _session.displayTitle }}</p>
         <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">by {{ _session.displayAuthor }}</p>
@@ -87,7 +87,7 @@
           <p class="mb-1">{{ playMethodName }}</p>
           <p class="mb-1">{{ _session.mediaPlayer }}</p>
 
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
+          <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
           <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
           <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
           <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
@@ -96,6 +96,10 @@
           <p v-if="deviceInfo.deviceType" class="mb-1">Type: {{ deviceInfo.deviceType }}</p>
         </div>
       </div>
+
+      <div class="flex items-center">
+        <ui-btn small color="error" @click.stop="deleteSessionClick">Delete</ui-btn>
+      </div>
     </div>
   </modals-modal>
 </template>
@@ -110,7 +114,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      processing: false
+    }
   },
   computed: {
     show: {
@@ -127,6 +133,9 @@ export default {
     deviceInfo() {
       return this._session.deviceInfo || {}
     },
+    hasDeviceInfo() {
+      return Object.keys(this.deviceInfo).length
+    },
     osDisplayName() {
       if (!this.deviceInfo.osName) return null
       return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
@@ -144,7 +153,37 @@ export default {
       return 'Unknown'
     }
   },
-  methods: {},
+  methods: {
+    deleteSessionClick() {
+      const payload = {
+        message: `Are you sure you want to delete this session?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteSession()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteSession() {
+      this.processing = true
+      this.$axios
+        .$delete(`/api/sessions/${this._session.id}`)
+        .then(() => {
+          this.processing = false
+          this.$toast.success('Session deleted successfully')
+          this.$emit('removedSession')
+          this.show = false
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to delete session', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || 'Failed to delete session')
+        })
+    }
+  },
   mounted() {}
 }
 </script>

client/components/modals/Modal.vue

@@ -2,11 +2,11 @@
   <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
-    <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
-      <span class="material-icons text-4xl">close</span>
+    <div class="absolute top-3 right-3 landscape:top-2 landscape:right-2 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 h-8 w-8 landscape:h-8 landscape:w-8 md:portrait:h-12 md:portrait:w-12 lg:w-12 lg:h-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
+      <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
     </div>
     <slot name="outer" />
-    <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />
@@ -50,7 +50,8 @@ export default {
     return {
       el: null,
       content: null,
-      preventClickoutside: false
+      preventClickoutside: false,
+      isShowingPrompt: false
     }
   },
   watch: {
@@ -93,7 +94,7 @@ export default {
       this.show = false
     },
     clickBg(ev) {
-      if (!this.show) return
+      if (!this.show || this.isShowingPrompt) return
       if (this.preventClickoutside) {
         this.preventClickoutside = false
         return
@@ -147,8 +148,16 @@ export default {
       } else {
         console.warn('Invalid modal init', this.name)
       }
+    },
+    showingPrompt(isShowing) {
+      this.isShowingPrompt = isShowing
     }
   },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on('showing-prompt', this.showingPrompt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('showing-prompt', this.showingPrompt)
+  }
 }
 </script>

client/components/modals/UserCollectionsModal.vue

@@ -70,7 +70,7 @@ export default {
       return this.selectedLibraryItem ? this.selectedLibraryItem.media.metadata.title : ''
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     selectedLibraryItem() {
       return this.$store.state.selectedLibraryItem

client/components/modals/authors/EditModal.vue

@@ -25,6 +25,9 @@
                 <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
               </div>
             </div>
+            <div class="p-2">
+              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" label="Photo Path/URL" />
+            </div>
             <div class="p-2">
               <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" label="Description" :rows="8" />
             </div>
@@ -43,19 +46,13 @@
 
 <script>
 export default {
-  // props: {
-  //   value: Boolean,
-  //   author: {
-  //     type: Object,
-  //     default: () => {}
-  //   }
-  // },
   data() {
     return {
       authorCopy: {
         name: '',
         asin: '',
-        description: ''
+        description: '',
+        imagePath: ''
       },
       processing: false
     }
@@ -95,9 +92,10 @@ export default {
       this.authorCopy.name = this.author.name
       this.authorCopy.asin = this.author.asin
       this.authorCopy.description = this.author.description
+      this.authorCopy.imagePath = this.author.imagePath
     },
     async submitForm() {
-      var keysToCheck = ['name', 'asin', 'description']
+      var keysToCheck = ['name', 'asin', 'description', 'imagePath']
       var updatePayload = {}
       keysToCheck.forEach((key) => {
         if (this.authorCopy[key] !== this.author[key]) {
@@ -118,6 +116,9 @@ export default {
         if (result.updated) {
           this.$toast.success('Author updated')
           this.show = false
+        } else if (result.merged) {
+          this.$toast.success('Author merged')
+          this.show = false
         } else this.$toast.info('No updates were needed')
       }
       this.processing = false
@@ -167,4 +168,4 @@ export default {
   mounted() {},
   beforeDestroy() {}
 }
-</script>
+</script>

client/components/modals/bookmarks/BookmarkItem.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
-    <!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
+  <div class="flex items-center px-4 py-4 justify-start relative bg-primary hover:bg-opacity-25" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
     <div class="w-16 max-w-16 text-center">
       <p class="text-sm font-mono text-gray-400">
         {{ this.$secondsToTimestamp(bookmark.time) }}

client/components/modals/changelog/ViewModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <modals-modal v-model="show" name="changelog" :width="800" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Changelog</p>
+      </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" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+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()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    compiledMarkedown() {
+      return marked.parse(this.changelog, { gfm: true, breaks: true })
+    },
+    currentVersionNumber() {
+      return this.currentVersion
+    }
+  },
+  methods: {
+    init() {}
+  },
+  mounted() {}
+}
+</script>
+
+<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 
+
+2. v-deep allows these to take effect on the content passed in to the v-html in the div above
+*/
+.custom-text ::v-deep > h2 {
+  @apply text-lg font-bold;
+}
+.custom-text ::v-deep > h3 {
+  @apply text-lg font-bold;
+}
+.custom-text ::v-deep > ul {
+  @apply list-disc list-inside pb-4;
+}
+</style>

client/components/modals/item/EditModal.vue

@@ -1,13 +1,13 @@
 <template>
-  <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="75">
+  <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="marginTop">
     <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-3xl text-white truncate pointer-events-none">{{ title }}</p>
+      <div class="absolute top-0 left-0 p-4 landscape:px-4 landscape:py-2 md:portrait:p-5 lg:p-5 w-2/3 overflow-hidden pointer-events-none">
+        <p class="font-book text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
       <template v-for="tab in availableTabs">
-        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
       </template>
     </div>
 
@@ -30,6 +30,8 @@ export default {
     return {
       processing: false,
       libraryItem: null,
+      availableHeight: 0,
+      marginTop: 0,
       tabs: [
         {
           id: 'details',
@@ -44,12 +46,14 @@ export default {
         {
           id: 'chapters',
           title: 'Chapters',
-          component: 'modals-item-tabs-chapters'
+          component: 'modals-item-tabs-chapters',
+          mediaType: 'book'
         },
         {
           id: 'episodes',
           title: 'Episodes',
-          component: 'modals-item-tabs-episodes'
+          component: 'modals-item-tabs-episodes',
+          mediaType: 'podcast'
         },
         {
           id: 'files',
@@ -64,7 +68,16 @@ export default {
         {
           id: 'manage',
           title: 'Manage',
-          component: 'modals-item-tabs-manage'
+          component: 'modals-item-tabs-manage',
+          mediaType: 'book',
+          admin: true
+        },
+        {
+          id: 'schedule',
+          title: 'Schedule',
+          component: 'modals-item-tabs-schedule',
+          mediaType: 'podcast',
+          admin: true
         }
       ]
     }
@@ -118,13 +131,17 @@ export default {
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
         if (tab.experimental && !this.showExperimentalFeatures) return false
-        if (tab.id === 'manage' && (this.isMissing || this.mediaType !== 'book')) return false
-        if (this.mediaType == 'podcast' && tab.id == 'chapters') return false
-        if (this.mediaType == 'book' && tab.id == 'episodes') return false
+        if (tab.mediaType && this.mediaType !== tab.mediaType) return false
+        if (tab.admin && !this.userIsAdminOrUp) return false
+
+        if (tab.id === 'manage' && this.isMissing) return false
 
         if ((tab.id === 'manage' || tab.id === 'files') && this.userCanDownload) return true
         if (tab.id !== 'manage' && tab.id !== 'files' && this.userCanUpdate) return true
@@ -133,8 +150,7 @@ export default {
       })
     },
     height() {
-      var maxHeightAllowed = window.innerHeight - 150
-      return Math.min(maxHeightAllowed, 650)
+      return Math.min(this.availableHeight, 650)
     },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
@@ -189,7 +205,6 @@ export default {
       if (prevBook) {
         this.unregisterListeners()
         this.libraryItem = prevBook
-        this.selectedTab = 'details'
         this.$store.commit('setSelectedLibraryItem', prevBook)
         this.$nextTick(this.registerListeners)
       } else {
@@ -209,7 +224,6 @@ export default {
       if (nextBook) {
         this.unregisterListeners()
         this.libraryItem = nextBook
-        this.selectedTab = 'details'
         this.$store.commit('setSelectedLibraryItem', nextBook)
         this.$nextTick(this.registerListeners)
       } else {
@@ -246,15 +260,29 @@ export default {
       }
     },
     registerListeners() {
+      window.addEventListener('orientationchange', this.orientationChange)
       this.$eventBus.$on('modal-hotkey', this.hotkey)
       this.$eventBus.$on(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
     },
     unregisterListeners() {
+      window.removeEventListener('orientationchange', this.orientationChange)
       this.$eventBus.$off('modal-hotkey', this.hotkey)
       this.$eventBus.$off(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
+    },
+    orientationChange() {
+      setTimeout(this.setHeight, 50)
+    },
+    setHeight() {
+      const smAndBelow = window.innerWidth < 1024 && window.innerWidth > window.innerHeight
+
+      this.marginTop = smAndBelow ? 90 : 75
+      const heightModifier = smAndBelow ? 95 : 150
+      this.availableHeight = window.innerHeight - heightModifier
     }
   },
-  mounted() {},
+  mounted() {
+    this.setHeight()
+  },
   beforeDestroy() {
     this.unregisterListeners()
   }

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6 relative">
-    <div class="flex">
+  <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
+    <div class="flex flex-wrap">
       <div class="relative">
         <covers-book-cover :library-item="libraryItem" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         <!-- book cover overlay -->
@@ -11,14 +11,14 @@
           </div>
         </div>
       </div>
-      <div class="flex-grow pl-6 pr-2">
+      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
         <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-40 pr-2 pt-4" style="min-width: 160px">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"><span class="hidden md:inline-block">Upload Cover</span><span class="material-icons inline-block md:!hidden">upload</span></ui-file-input>
           </div>
           <form @submit.prevent="submitForm" class="flex flex-grow">
             <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
-            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">Update</ui-btn>
           </form>
         </div>
 
@@ -31,9 +31,9 @@
 
           <div v-if="showLocalCovers" class="flex items-center justify-center">
             <template v-for="cover in localCovers">
-              <div :key="cover.path" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
+              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
                 <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
-                  <img :src="`${cover.localPath}?token=${userToken}`" class="h-full w-full object-contain" />
+                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                 </div>
               </div>
             </template>
@@ -58,7 +58,7 @@
     <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
       <p v-if="!coversFound.length">No Covers Found</p>
       <template v-for="cover in coversFound">
-        <div :key="cover" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
           <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
         </div>
       </template>
@@ -129,11 +129,8 @@ export default {
       else if (this.provider == 'itunes') return 'Search Term'
       return 'Search Title'
     },
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
     bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     libraryItemId() {
       return this.libraryItem ? this.libraryItem.id : null

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

@@ -5,23 +5,24 @@
       <widgets-podcast-details-edit v-else ref="itemDetailsEdit" :library-item="libraryItem" @submit="saveAndClose" />
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
+    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
       <div class="flex items-center px-4">
-        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8" :padding-x="3" small @click.stop.prevent="removeItem">Remove</ui-btn>
+        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">Remove</ui-btn>
+        <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
 
         <div class="flex-grow" />
 
-        <ui-tooltip v-if="mediaType == 'book'" :disabled="!!quickMatching" :text="`(Root User Only) Populate empty book details & cover with first book result from '${libraryProvider}'. Does not overwrite details.`" direction="bottom" class="mr-4">
+        <ui-tooltip :disabled="!!quickMatching" :text="`Populate empty ${mediaType} details & cover with first ${mediaType} result from '${libraryProvider}'. Does not overwrite details unless 'Prefer matched metadata' server setting is enabled.`" direction="bottom" class="mr-2 md:mr-4">
           <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">Quick Match</ui-btn>
         </ui-tooltip>
 
-        <ui-tooltip :disabled="!!libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="mr-4">
+        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
           <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
         </ui-tooltip>
 
-        <ui-btn @click="save" class="mx-2">Save</ui-btn>
+        <ui-btn @click="save" class="mx-2 hidden md:block">Save</ui-btn>
 
-        <ui-btn @click="saveAndClose">Save & Close</ui-btn>
+        <ui-btn @click="saveAndClose">Save<span class="hidden md:inline-block">&nbsp;& Close</span></ui-btn>
       </div>
     </div>
   </div>

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

@@ -2,8 +2,15 @@
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
     <div class="w-full mb-4">
       <div v-if="userIsAdminOrUp" class="flex items-end justify-end mb-4">
-        <!-- <p v-if="autoDownloadEpisodes">Last new episode check {{ $formatDate(lastEpisodeCheck) }}</p> -->
         <ui-text-input-with-label ref="lastCheckInput" v-model="lastEpisodeCheckInput" :disabled="checkingNewEpisodes" type="datetime-local" label="Look for new episodes after this date" class="max-w-xs mr-2" />
+        <ui-text-input-with-label ref="maxEpisodesInput" v-model="maxEpisodesToDownload" :disabled="checkingNewEpisodes" type="number" label="Max episodes" 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 }">Limit</p>
+            <ui-tooltip direction="top" text="Max # of episodes to download. Use 0 for unlimited.">
+              <span class="material-icons text-base">info_outlined</span>
+            </ui-tooltip>
+          </div>
+        </ui-text-input-with-label>
         <ui-btn :loading="checkingNewEpisodes" @click="checkForNewEpisodes">Check & Download New Episodes</ui-btn>
       </div>
 
@@ -52,7 +59,8 @@ export default {
   data() {
     return {
       checkingNewEpisodes: false,
-      lastEpisodeCheckInput: null
+      lastEpisodeCheckInput: null,
+      maxEpisodesToDownload: 3
     }
   },
   watch: {
@@ -89,6 +97,16 @@ export default {
       if (this.$refs.lastCheckInput) {
         this.$refs.lastCheckInput.blur()
       }
+      if (this.$refs.maxEpisodesInput) {
+        this.$refs.maxEpisodesInput.blur()
+      }
+
+      if (this.maxEpisodesToDownload < 0) {
+        this.maxEpisodesToDownload = 3
+        this.$toast.error('Invalid max episodes to download')
+        return
+      }
+
       this.checkingNewEpisodes = true
       const lastEpisodeCheck = new Date(this.lastEpisodeCheckInput).valueOf()
 
@@ -102,7 +120,7 @@ export default {
       }
 
       this.$axios
-        .$get(`/api/podcasts/${this.libraryItemId}/checknew`)
+        .$get(`/api/podcasts/${this.libraryItemId}/checknew?limit=${this.maxEpisodesToDownload}`)
         .then((response) => {
           if (response.episodes && response.episodes.length) {
             console.log('New episodes', response.episodes.length)

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

@@ -2,13 +2,13 @@
   <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
     <!-- Merge to m4b -->
     <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
-      <div class="flex items-center">
+      <div class="flex flex-wrap items-center">
         <div>
           <p class="text-lg">Make M4B Audiobook File <span class="text-error">*</span></p>
           <p class="max-w-sm text-sm pt-2 text-gray-300">Generate a .M4B audiobook file with embedded metadata, cover image, and chapters. <br /><span class="text-warning">*</span> Does not delete existing audio files.</p>
         </div>
         <div class="flex-grow" />
-        <div>
+        <div class="mt-2 md:mt-0">
           <p v-if="abmergeStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
           <p v-if="abmergeStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
           <p v-if="abmergeStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
@@ -69,7 +69,7 @@
 
     <p v-if="showM4bDownload" class="text-left text-base mb-4 py-4">
       <span class="text-error">* <strong>Experimental</strong></span
-      >&nbsp;-&nbsp;M4b merge can take several minutes and will be stored in <span class="bg-primary bg-opacity-75 font-mono p-1 text-base">/metadata/downloads</span>. After the download is ready, it will remain available for 60 minutes, then be deleted. Download will timeout after 20 minutes.
+      >&nbsp;-&nbsp;M4b merge can take several minutes and will be stored in <span class="bg-primary bg-opacity-75 font-mono p-1 text-base">/metadata/downloads</span>. After the download is ready, it will remain available for 60 minutes, then be deleted. Download will timeout after 30 minutes.
     </p>
 
     <!-- <p v-if="isSingleM4b" class="text-lg text-center my-8">Audiobook is already a single m4b!</p> -->

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

@@ -1,14 +1,14 @@
 <template>
-  <div id="match-wrapper" class="w-full h-full overflow-hidden px-4 py-6 relative">
+  <div id="match-wrapper" class="w-full h-full overflow-hidden px-2 md:px-4 py-4 md:py-6 relative">
     <form @submit.prevent="submitSearch">
-      <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-40 px-1">
+      <div class="flex flex-wrap md:flex-nowrap items-center justify-start -mx-1">
+        <div class="w-36 px-1">
           <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
         </div>
-        <div class="w-72 px-1">
+        <div class="flex-grow md:w-72 px-1">
           <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
         </div>
-        <div v-show="provider != 'itunes'" class="w-72 px-1">
+        <div v-show="provider != 'itunes'" class="w-60 md:w-72 px-1">
           <ui-text-input-with-label v-model="searchAuthor" label="Author" />
         </div>
         <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
@@ -20,64 +20,70 @@
     <div v-show="!processing && !searchResults.length && hasSearched" class="flex h-full items-center justify-center">
       <p>No Results</p>
     </div>
-    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper">
+    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
         <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
       </template>
     </div>
-    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full p-8 max-h-full overflow-y-auto overflow-x-hidden">
-      <div class="flex mb-2">
+    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
+      <div class="flex mb-4">
         <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="selectedMatch = null">
           <span class="material-icons text-3xl">arrow_back</span>
         </div>
         <p class="text-xl pl-3">Update Book Details</p>
       </div>
+      <ui-checkbox v-model="selectAll" checkbox-bg="bg" @input="selectAllToggled" />
       <form @submit.prevent="submitMatchUpdate">
         <div v-if="selectedMatch.cover" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.cover" />
-          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" label="Cover" class="flex-grow ml-4" />
+          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly label="Cover" class="flex-grow mx-4" />
+          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
+            <a :href="selectedMatch.cover" target="_blank" class="w-full bg-primary">
+              <img :src="selectedMatch.cover" class="h-full w-full object-contain" />
+            </a>
+          </div>
         </div>
         <div v-if="selectedMatch.title" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.title" />
+          <ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" label="Title" />
             <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.title || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.subtitle" />
+          <ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" label="Subtitle" />
             <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.subtitle || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.author" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.author" />
+          <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" label="Author" />
             <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.authorName || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.narrator" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.narrator" />
+          <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" label="Narrator" />
             <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.narratorName || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.description" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.description" />
+          <ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
           <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
         </div>
         <div v-if="selectedMatch.publisher" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.publisher" />
+          <ui-checkbox v-model="selectedMatchUsage.publisher" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" label="Publisher" />
             <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publisher || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.publishedYear" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.publishedYear" />
+          <ui-checkbox v-model="selectedMatchUsage.publishedYear" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" label="Published Year" />
             <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publishedYear || '' }}</p>
@@ -85,46 +91,46 @@
         </div>
 
         <div v-if="selectedMatch.series" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.series" />
+          <ui-checkbox v-model="selectedMatchUsage.series" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <widgets-series-input-widget v-model="selectedMatch.series" />
             <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.volumeNumber" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" />
+          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" @input="checkboxToggled" />
           <ui-text-input-with-label v-model="selectedMatch.volumeNumber" :disabled="!selectedMatchUsage.volumeNumber" label="Volume Number" class="flex-grow ml-4" />
         </div>
         <div v-if="selectedMatch.genres" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.genres" />
+          <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" label="Genres" />
             <p v-if="mediaMetadata.genresList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.genresList || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.tags" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.tags" />
+          <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" label="Tags" />
             <p v-if="mediaMetadata.tagsList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.tagsList || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.language" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.language" />
+          <ui-checkbox v-model="selectedMatchUsage.language" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" label="Language" />
             <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.language || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.isbn" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+          <ui-checkbox v-model="selectedMatchUsage.isbn" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
             <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.isbn || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.asin" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.asin" />
+          <ui-checkbox v-model="selectedMatchUsage.asin" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
             <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.asin || '' }}</p>
@@ -132,28 +138,28 @@
         </div>
 
         <div v-if="selectedMatch.itunesId" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.itunesId" />
+          <ui-checkbox v-model="selectedMatchUsage.itunesId" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
             <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.itunesId || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.feedUrl" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.feedUrl" />
+          <ui-checkbox v-model="selectedMatchUsage.feedUrl" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
             <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.feedUrl || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.itunesPageUrl" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" />
+          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
             <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.itunesPageUrl || '' }}</p>
           </div>
         </div>
         <div v-if="selectedMatch.releaseDate" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.releaseDate" />
+          <ui-checkbox v-model="selectedMatchUsage.releaseDate" checkbox-bg="bg" @input="checkboxToggled" />
           <div class="flex-grow ml-4">
             <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" label="Release Date" />
             <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.releaseDate || '' }}</p>
@@ -209,7 +215,8 @@ export default {
         itunesId: true,
         feedUrl: true,
         releaseDate: true
-      }
+      },
+      selectAll: true
     }
   },
   watch: {
@@ -246,7 +253,7 @@ export default {
       }
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     providers() {
       if (this.isPodcast) return this.$store.state.scanners.podcastProviders
@@ -271,6 +278,14 @@ export default {
     }
   },
   methods: {
+    selectAllToggled(val) {
+      for (const key in this.selectedMatchUsage) {
+        this.selectedMatchUsage[key] = val
+      }
+    },
+    checkboxToggled() {
+      this.selectAll = Object.values(this.selectedMatchUsage).findIndex((v) => v == false) < 0
+    },
     persistProvider() {
       try {
         localStorage.setItem('book-provider', this.provider)
@@ -299,7 +314,7 @@ export default {
       this.isProcessing = true
       this.lastSearch = searchQuery
       var searchEntity = this.isPodcast ? 'podcast' : 'books'
-      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`).catch((error) => {
+      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 10000 }).catch((error) => {
         console.error('Failed', error)
         return []
       })
@@ -363,19 +378,33 @@ export default {
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
       else this.provider = localStorage.getItem('book-provider') || 'google'
+
+      if (this.searchTitle) {
+        this.submitSearch()
+      }
     },
     selectMatch(match) {
-      if (match && match.series) {
-        match.series = match.series.map((se) => {
-          return {
-            id: `new-${Math.floor(Math.random() * 10000)}`,
-            displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
-            name: se.series,
-            sequence: se.volumeNumber || ''
+      if (match) {
+        if (match.series) {
+          if (!match.series.length) {
+            delete match.series
+          } else {
+            match.series = match.series.map((se) => {
+              return {
+                id: `new-${Math.floor(Math.random() * 10000)}`,
+                displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+                name: se.series,
+                sequence: se.volumeNumber || ''
+              }
+            })
           }
-        })
+        }
+        if (match.genres && Array.isArray(match.genres)) {
+          match.genres = match.genres.join(',')
+        }
       }
 
+      console.log('Select Match', match)
       this.selectedMatch = match
     },
     buildMatchUpdatePayload() {
@@ -405,9 +434,12 @@ export default {
 
             updatePayload.metadata.series = seriesPayload
           } else if (key === 'author' && !this.isPodcast) {
-            if (!Array.isArray(this.selectedMatch[key])) this.selectedMatch[key] = [this.selectedMatch[key]]
+            var authors = this.selectedMatch[key]
+            if (!Array.isArray(authors)) {
+              authors = authors.split(',').map((au) => au.trim())
+            }
             var authorPayload = []
-            this.selectedMatch[key].forEach((authorName) =>
+            authors.forEach((authorName) =>
               authorPayload.push({
                 id: `new-${Math.floor(Math.random() * 10000)}`,
                 name: authorName
@@ -415,11 +447,11 @@ export default {
             )
             updatePayload.metadata.authors = authorPayload
           } else if (key === 'narrator') {
-            updatePayload.metadata.narrators = [this.selectedMatch[key]]
+            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
           } else if (key === 'genres') {
-            updatePayload.metadata.genres = this.selectedMatch[key].split(',')
+            updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
           } else if (key === 'tags') {
-            updatePayload.tags = this.selectedMatch[key].split(',')
+            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
           } else if (key === 'itunesId') {
             updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
           } else {
@@ -435,6 +467,8 @@ export default {
       if (!Object.keys(updatePayload).length) {
         return
       }
+
+      console.log('Match payload', updatePayload)
       this.isProcessing = true
 
       if (updatePayload.metadata.cover) {
@@ -482,6 +516,11 @@ export default {
 
 <style>
 .matchListWrapper {
-  height: calc(100% - 80px);
+  height: calc(100% - 124px);
+}
+@media (min-width: 768px) {
+  .matchListWrapper {
+    height: calc(100% - 80px);
+  }
 }
 </style>

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

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

client/components/modals/libraries/EditLibrary.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full px-4 py-2 mb-4">
+  <div class="w-full h-full px-1 md:px-4 py-2 mb-4">
     <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
       <div class="flex flex-wrap md:flex-nowrap -mx-1">
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">

client/components/modals/libraries/EditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="font-book text-xl md:text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
@@ -11,10 +11,10 @@
       </template>
     </div>
 
-    <div class="px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <component v-if="libraryCopy && show" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
+    <div class="px-2 md:px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
 
-      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-opacity-10">
+      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
         <div class="flex justify-end">
           <ui-btn @click="submit">{{ buttonText }}</ui-btn>
         </div>
@@ -46,6 +46,11 @@ export default {
           id: 'settings',
           title: 'Settings',
           component: 'modals-libraries-library-settings'
+        },
+        {
+          id: 'schedule',
+          title: 'Schedule',
+          component: 'modals-libraries-schedule-scan'
         }
       ],
       libraryCopy: null
@@ -84,6 +89,7 @@ export default {
     },
     updateLibrary(library) {
       this.mapLibraryToCopy(library)
+      console.log('Updated library', this.libraryCopy)
     },
     getNewLibraryData() {
       return {
@@ -93,9 +99,11 @@ export default {
         icon: 'database',
         mediaType: 'book',
         settings: {
+          coverAspectRatio: this.$constants.BookCoverAspectRatio.SQUARE,
           disableWatcher: false,
           skipMatchingMediaWithAsin: false,
-          skipMatchingMediaWithIsbn: false
+          skipMatchingMediaWithIsbn: false,
+          autoScanCronExpression: null
         }
       }
     },
@@ -112,7 +120,9 @@ export default {
           if (key === 'folders') {
             this.libraryCopy.folders = library.folders.map((f) => ({ ...f }))
           } else if (key === 'settings') {
-            this.libraryCopy.settings = { ...library.settings }
+            for (const settingKey in library.settings) {
+              this.libraryCopy.settings[settingKey] = library.settings[settingKey]
+            }
           } else {
             this.libraryCopy[key] = library[key]
           }
@@ -134,6 +144,13 @@ export default {
     submit() {
       if (!this.validate()) return
 
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) {
+        if (this.$refs.tabComponent.checkBlurExpressionInput()) {
+          return
+        }
+      }
+
       if (this.library) {
         this.submitUpdateLibrary()
       } else {

client/components/modals/libraries/LibrarySettings.vue

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

client/components/modals/libraries/ScheduleScan.vue

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

client/components/modals/player/QueueItemRow.vue

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

client/components/modals/player/QueueItemsModal.vue

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

client/components/modals/podcast/EditEpisode.vue

@@ -5,33 +5,14 @@
         <p class="font-book text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
-    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
-      <div class="flex flex-wrap">
-        <div class="w-1/5 p-1">
-          <ui-text-input-with-label v-model="newEpisode.season" label="Season" />
-        </div>
-        <div class="w-1/5 p-1">
-          <ui-text-input-with-label v-model="newEpisode.episode" label="Episode" />
-        </div>
-        <div class="w-1/5 p-1">
-          <ui-text-input-with-label v-model="newEpisode.episodeType" label="Episode Type" />
-        </div>
-        <div class="w-2/5 p-1">
-          <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" label="Pub Date" />
-        </div>
-        <div class="w-full p-1">
-          <ui-text-input-with-label v-model="newEpisode.title" label="Title" />
-        </div>
-        <div class="w-full p-1">
-          <ui-textarea-with-label v-model="newEpisode.subtitle" label="Subtitle" :rows="3" />
-        </div>
-        <div class="w-full p-1 default-style">
-          <ui-rich-text-editor v-if="show" label="Description" v-model="newEpisode.description" />
-        </div>
-      </div>
-      <div class="flex justify-end pt-4">
-        <ui-btn @click="submit">Submit</ui-btn>
-      </div>
+    <div class="absolute -top-10 left-0 z-10 w-full flex">
+      <template v-for="tab in tabs">
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+      </template>
+    </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">
+      <component v-if="libraryItem && show" :is="tabComponentName" :library-item="libraryItem" :episode="episode" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
     </div>
   </modals-modal>
 </template>
@@ -41,25 +22,19 @@ export default {
   data() {
     return {
       processing: false,
-      newEpisode: {
-        season: null,
-        episode: null,
-        episodeType: null,
-        title: null,
-        subtitle: null,
-        description: null,
-        pubDate: null,
-        publishedAt: null
-      },
-      pubDateInput: null
-    }
-  },
-  watch: {
-    episode: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.init()
-      }
+      selectedTab: 'details',
+      tabs: [
+        {
+          id: 'details',
+          title: 'Details',
+          component: 'modals-podcast-tabs-episode-details'
+        },
+        {
+          id: 'match',
+          title: 'Match',
+          component: 'modals-podcast-tabs-episode-match'
+        }
+      ]
     }
   },
   computed: {
@@ -77,67 +52,29 @@ export default {
     episode() {
       return this.$store.state.globals.selectedEpisode
     },
-    episodeId() {
-      return this.episode ? this.episode.id : null
-    },
     title() {
       if (!this.libraryItem) return ''
       return this.libraryItem.media.metadata.title || 'Unknown'
+    },
+    tabComponentName() {
+      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
+      return _tab ? _tab.component : ''
     }
   },
   methods: {
-    updatePubDate(val) {
-      if (val) {
-        this.newEpisode.pubDate = this.$formatJsDate(new Date(val), 'E, d MMM yyyy HH:mm:ssxx')
-        this.newEpisode.publishedAt = new Date(val).valueOf()
-      } else {
-        this.newEpisode.pubDate = null
-        this.newEpisode.publishedAt = null
-      }
-    },
-    init() {
-      this.newEpisode.season = this.episode.season || ''
-      this.newEpisode.episode = this.episode.episode || ''
-      this.newEpisode.episodeType = this.episode.episodeType || ''
-      this.newEpisode.title = this.episode.title || ''
-      this.newEpisode.subtitle = this.episode.subtitle || ''
-      this.newEpisode.description = this.episode.description || ''
-      this.newEpisode.pubDate = this.episode.pubDate || ''
-      this.newEpisode.publishedAt = this.episode.publishedAt
-
-      this.pubDateInput = this.episode.pubDate ? this.$formatJsDate(new Date(this.episode.pubDate), "yyyy-MM-dd'T'HH:mm") : null
-    },
-    getUpdatePayload() {
-      var updatePayload = {}
-      for (const key in this.newEpisode) {
-        if (this.newEpisode[key] != this.episode[key]) {
-          updatePayload[key] = this.newEpisode[key]
-        }
-      }
-      return updatePayload
-    },
-    submit() {
-      const payload = this.getUpdatePayload()
-      if (!Object.keys(payload).length) {
-        return this.$toast.info('No updates were made')
-      }
-
-      this.processing = true
-      this.$axios
-        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, payload)
-        .then(() => {
-          this.processing = false
-          this.$toast.success('Podcast episode updated')
-          this.show = false
-        })
-        .catch((error) => {
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed update episode'
-          console.error('Failed update episode', error)
-          this.processing = false
-          this.$toast.error(errorMsg)
-        })
+    selectTab(tab) {
+      this.selectedTab = tab
     }
   },
   mounted() {}
 }
 </script>
+
+<style scoped>
+.tab {
+  height: 40px;
+}
+.tab.tab-selected {
+  height: 41px;
+}
+</style>

client/components/modals/podcast/EpisodeFeed.vue

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

client/components/modals/podcast/RemoveEpisode.vue

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

client/components/modals/podcast/ViewEpisode.vue

@@ -66,7 +66,7 @@ export default {
       return this.mediaMetadata.author
     },
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     }
   },
   methods: {},

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

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div class="flex flex-wrap">
+      <div class="w-1/5 p-1">
+        <ui-text-input-with-label v-model="newEpisode.season" label="Season" />
+      </div>
+      <div class="w-1/5 p-1">
+        <ui-text-input-with-label v-model="newEpisode.episode" label="Episode" />
+      </div>
+      <div class="w-1/5 p-1">
+        <ui-text-input-with-label v-model="newEpisode.episodeType" label="Episode Type" />
+      </div>
+      <div class="w-2/5 p-1">
+        <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" label="Pub Date" />
+      </div>
+      <div class="w-full p-1">
+        <ui-text-input-with-label v-model="newEpisode.title" label="Title" />
+      </div>
+      <div class="w-full p-1">
+        <ui-textarea-with-label v-model="newEpisode.subtitle" label="Subtitle" :rows="3" />
+      </div>
+      <div class="w-full p-1 default-style">
+        <ui-rich-text-editor label="Description" v-model="newEpisode.description" />
+      </div>
+    </div>
+    <div class="flex items-center justify-end pt-4">
+      <ui-btn @click="submit">Submit</ui-btn>
+    </div>
+    <div v-if="enclosureUrl" class="py-4">
+      <p class="text-xs text-gray-300 font-semibold">Episode URL from RSS feed</p>
+      <a :href="enclosureUrl" target="_blank" class="text-xs text-blue-400 hover:text-blue-500 hover:underline">{{ enclosureUrl }}</a>
+    </div>
+    <div v-else class="py-4">
+      <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episode: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      newEpisode: {
+        season: null,
+        episode: null,
+        episodeType: null,
+        title: null,
+        subtitle: null,
+        description: null,
+        pubDate: null,
+        publishedAt: null
+      },
+      pubDateInput: null
+    }
+  },
+  watch: {
+    episode: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    enclosure() {
+      return this.episode ? this.episode.enclosure || {} : {}
+    },
+    enclosureUrl() {
+      return this.enclosure.url
+    }
+  },
+  methods: {
+    updatePubDate(val) {
+      if (val) {
+        this.newEpisode.pubDate = this.$formatJsDate(new Date(val), 'E, d MMM yyyy HH:mm:ssxx')
+        this.newEpisode.publishedAt = new Date(val).valueOf()
+      } else {
+        this.newEpisode.pubDate = null
+        this.newEpisode.publishedAt = null
+      }
+    },
+    init() {
+      this.newEpisode.season = this.episode.season || ''
+      this.newEpisode.episode = this.episode.episode || ''
+      this.newEpisode.episodeType = this.episode.episodeType || ''
+      this.newEpisode.title = this.episode.title || ''
+      this.newEpisode.subtitle = this.episode.subtitle || ''
+      this.newEpisode.description = this.episode.description || ''
+      this.newEpisode.pubDate = this.episode.pubDate || ''
+      this.newEpisode.publishedAt = this.episode.publishedAt
+
+      this.pubDateInput = this.episode.pubDate ? this.$formatJsDate(new Date(this.episode.pubDate), "yyyy-MM-dd'T'HH:mm") : null
+    },
+    getUpdatePayload() {
+      var updatePayload = {}
+      for (const key in this.newEpisode) {
+        if (this.newEpisode[key] != this.episode[key]) {
+          updatePayload[key] = this.newEpisode[key]
+        }
+      }
+      return updatePayload
+    },
+    submit() {
+      const payload = this.getUpdatePayload()
+      if (!Object.keys(payload).length) {
+        return this.$toast.info('No updates were made')
+      }
+
+      this.isProcessing = true
+      this.$axios
+        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, payload)
+        .then(() => {
+          this.isProcessing = false
+          this.$toast.success('Podcast episode updated')
+          this.$emit('close')
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to update episode'
+          console.error('Failed update episode', error)
+          this.isProcessing = false
+          this.$toast.error(errorMsg)
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <div style="min-height: 200px">
+    <template v-if="!podcastFeedUrl">
+      <div class="py-8">
+        <widgets-alert type="error">Podcast has no RSS feed url to use for matching</widgets-alert>
+      </div>
+    </template>
+    <template v-else>
+      <form @submit.prevent="submitForm">
+        <div class="flex mb-2">
+          <ui-text-input-with-label v-model="episodeTitle" :disabled="isProcessing" label="Episode Title" class="pr-1" />
+          <ui-btn class="mt-5 ml-1" :loading="isProcessing" type="submit">Search</ui-btn>
+        </div>
+      </form>
+      <div v-if="!isProcessing && searchedTitle && !episodesFound.length" class="w-full py-8">
+        <p class="text-center text-lg">No episode matches found</p>
+      </div>
+      <div v-for="(episode, index) in episodesFound" :key="index" class="w-full py-4 border-b border-white border-opacity-5 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer px-2" @click.stop="selectEpisode(episode)">
+        <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
+        <p class="break-words mb-1">{{ episode.title }}</p>
+        <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+        <p class="text-xs text-gray-400">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episode: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      episodeTitle: '',
+      searchedTitle: '',
+      episodesFound: []
+    }
+  },
+  watch: {
+    episode: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    podcastFeedUrl() {
+      return this.mediaMetadata.feedUrl
+    }
+  },
+  methods: {
+    getUpdatePayload(episodeData) {
+      var updatePayload = {}
+      for (const key in episodeData) {
+        if (key === 'enclosure') {
+          if (!this.episode.enclosure || JSON.stringify(this.episode.enclosure) !== JSON.stringify(episodeData.enclosure)) {
+            updatePayload[key] = {
+              ...episodeData.enclosure
+            }
+          }
+        } else if (episodeData[key] != this.episode[key]) {
+          updatePayload[key] = episodeData[key]
+        }
+      }
+      return updatePayload
+    },
+    selectEpisode(episode) {
+      const episodeData = {
+        title: episode.title || '',
+        subtitle: episode.subtitle || '',
+        description: episode.description || '',
+        enclosure: episode.enclosure || null,
+        episode: episode.episode || '',
+        episodeType: episode.episodeType || '',
+        season: episode.season || '',
+        pubDate: episode.pubDate || '',
+        publishedAt: episode.publishedAt
+      }
+      const updatePayload = this.getUpdatePayload(episodeData)
+      if (!Object.keys(updatePayload).length) {
+        return this.$toast.info('No updates are necessary')
+      }
+      console.log('Episode update payload', updatePayload)
+
+      this.isProcessing = true
+      this.$axios
+        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatePayload)
+        .then(() => {
+          this.isProcessing = false
+          this.$toast.success('Podcast episode updated')
+          this.$emit('selectTab', 'details')
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to update episode'
+          console.error('Failed update episode', error)
+          this.isProcessing = false
+          this.$toast.error(errorMsg)
+        })
+    },
+    submitForm() {
+      if (!this.episodeTitle || !this.episodeTitle.length) {
+        this.$toast.error('Must enter an episode title')
+        return
+      }
+      this.searchedTitle = this.episodeTitle
+      this.isProcessing = true
+      this.$axios
+        .$get(`/api/podcasts/${this.libraryItem.id}/search-episode?title=${this.$encodeUriPath(this.episodeTitle)}`)
+        .then((results) => {
+          this.episodesFound = results.episodes.map((ep) => ep.episode)
+          console.log('Episodes found', this.episodesFound)
+          this.isProcessing = false
+        })
+        .catch((error) => {
+          console.error('Failed to search for episode', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || 'Failed to search for episode')
+          this.isProcessing = false
+        })
+    },
+    init() {
+      this.searchedTitle = null
+      this.episodesFound = []
+      this.episodeTitle = this.episode ? this.episode.title || '' : ''
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/rssfeed/ViewModal.vue

@@ -27,7 +27,6 @@
         <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">Warning: 1 or more of your episodes do not have a Pub Date. Some podcast apps require this.</p>
       </div>
       <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
-        <p class="text-xs text-gray-300">Note: RSS feed URLs are not authenticated</p>
         <div class="flex-grow" />
         <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
         <ui-btn v-else color="success" small @click="openFeed">Open RSS Feed</ui-btn>

client/components/player/PlayerPlaybackControls.vue

@@ -2,19 +2,22 @@
   <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
     <div class="flex-grow" />
     <template v-if="!loading">
-      <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-8" @mousedown.prevent @mouseup.prevent @click.stop="restart">
-        <span class="material-icons text-3xl">first_page</span>
+      <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-4 md:mr-8" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+        <span class="material-icons text-2xl sm:text-3xl">first_page</span>
       </div>
       <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
-        <span class="material-icons text-3xl">replay_10</span>
+        <span class="material-icons text-2xl sm:text-3xl">replay_10</span>
       </div>
-      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 md:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
         <span class="material-icons">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
       </div>
       <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-        <span class="material-icons text-3xl">forward_10</span>
+        <span class="material-icons text-2xl sm:text-3xl">forward_10</span>
       </div>
-      <controls-playback-speed-control v-model="playbackRate" @input="playbackRateUpdated" @change="playbackRateChanged" />
+      <div class="flex items-center justify-center ml-4 md:ml-8" :class="hasNextChapter ? 'text-gray-300 cursor-pointer' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
+        <span class="material-icons text-2xl sm:text-3xl">last_page</span>
+      </div>
+      <controls-playback-speed-control v-model="playbackRateInput" @input="playbackRateUpdated" @change="playbackRateChanged" />
     </template>
     <template v-else>
       <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
@@ -31,18 +34,32 @@ export default {
     loading: Boolean,
     seekLoading: Boolean,
     playbackRate: Number,
-    paused: Boolean
+    paused: Boolean,
+    hasNextChapter: Boolean
   },
   data() {
     return {}
   },
-  computed: {},
+  computed: {
+    playbackRateInput: {
+      get() {
+        return this.playbackRate
+      },
+      set(val) {
+        this.$emit('update:playbackRate', val)
+      }
+    }
+  },
   methods: {
     playPause() {
       this.$emit('playPause')
     },
-    restart() {
-      this.$emit('restart')
+    prevChapter() {
+      this.$emit('prevChapter')
+    },
+    nextChapter() {
+      if (!this.hasNextChapter) return
+      this.$emit('nextChapter')
     },
     jumpBackward() {
       this.$emit('jumpBackward')

client/components/player/PlayerTrackBar.vue

@@ -8,7 +8,7 @@
       <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
       <div v-if="loading" class="h-full w-1/4 absolute left-0 top-0 loadingTrack pointer-events-none bg-white bg-opacity-25" />
     </div>
-    <div ref="track" class="w-full h-2 relative overflow-hidden">
+    <div class="w-full h-2 relative overflow-hidden" :class="useChapterTrack ? 'opacity-0' : ''">
       <template v-for="(tick, index) in chapterTicks">
         <div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-30 h-1 pointer-events-none" />
       </template>
@@ -34,6 +34,10 @@ export default {
     chapters: {
       type: Array,
       default: () => []
+    },
+    currentChapter: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -46,7 +50,8 @@ export default {
       trackOffsetLeft: 16, // Track is 16px from edge
       playedTrackWidth: 0,
       readyTrackWidth: 0,
-      bufferTrackWidth: 0
+      bufferTrackWidth: 0,
+      useChapterTrack: false
     }
   },
   watch: {
@@ -57,14 +62,30 @@ export default {
       }
     }
   },
-  computed: {},
+  computed: {
+    currentChapterDuration() {
+      if (!this.currentChapter) return 0
+      return this.currentChapter.end - this.currentChapter.start
+    },
+    currentChapterStart() {
+      if (!this.currentChapter) return 0
+      return this.currentChapter.start
+    }
+  },
   methods: {
+    setUseChapterTrack(useChapterTrack) {
+      this.useChapterTrack = useChapterTrack
+      this.updateBufferTrack()
+      this.updatePlayedTrackWidth()
+    },
     clickTrack(e) {
       if (this.loading) return
 
       var offsetX = e.offsetX
       var perc = offsetX / this.trackWidth
-      var time = perc * this.duration
+      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0;
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration;
+      const time = baseTime + (perc * duration);
       if (isNaN(time) || time === null) {
         console.error('Invalid time', perc, time)
         return
@@ -76,7 +97,10 @@ export default {
       this.updateBufferTrack()
     },
     updateBufferTrack() {
-      var bufferlen = (this.bufferTime / this.duration) * this.trackWidth
+      const time = this.useChapterTrack ? Math.max(0, this.bufferTime - this.currentChapterStart) : this.bufferTime
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
+
+      var bufferlen = (time / duration) * this.trackWidth
       bufferlen = Math.round(bufferlen)
       if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return
       if (this.$refs.bufferTrack) this.$refs.bufferTrack.style.width = bufferlen + 'px'
@@ -97,8 +121,10 @@ export default {
       this.updatePlayedTrackWidth()
     },
     updatePlayedTrackWidth() {
-      var perc = this.currentTime / this.duration
-      var ptWidth = Math.round(perc * this.trackWidth)
+      const time = this.useChapterTrack ? Math.max(0, this.currentTime - this.currentChapterStart) : this.currentTime
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
+
+      var ptWidth = Math.round((time / duration) * this.trackWidth)
       if (this.playedTrackWidth === ptWidth) {
         return
       }
@@ -116,9 +142,11 @@ export default {
     },
     mousemoveTrack(e) {
       var offsetX = e.offsetX
-      var time = (offsetX / this.trackWidth) * this.duration
 
-      console.log('Mousemove track', this.trackWidth, this.duration)
+      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0;
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration;
+      const progressTime = (offsetX / this.trackWidth) * duration;
+      const totalTime = baseTime + progressTime;
 
       if (this.$refs.hoverTimestamp) {
         var width = this.$refs.hoverTimestamp.clientWidth
@@ -139,9 +167,9 @@ export default {
         this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
       }
       if (this.$refs.hoverTimestampText) {
-        var hoverText = this.$secondsToTimestamp(time)
+        var hoverText = this.$secondsToTimestamp(progressTime)
 
-        var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end)
+        var chapter = this.chapters.find((chapter) => chapter.start <= totalTime && totalTime < chapter.end)
         if (chapter && chapter.title) {
           hoverText += ` - ${chapter.title}`
         }

client/components/player/PlayerUi.vue

@@ -1,40 +1,52 @@
 <template>
   <div class="w-full -mt-6">
     <div class="w-full relative mb-1">
-      <div class="absolute -top-10 md:top-0 right-0 md:right-2 flex items-center h-full">
-        <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span>
+      <div class="absolute -top-10 md: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-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
 
-        <div class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
-          <span v-if="!sleepTimerSet" class="material-icons" style="font-size: 1.7rem">snooze</span>
+        <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
+          <span v-if="!sleepTimerSet" class="material-icons text-2xl sm:text-2.5xl">snooze</span>
           <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>
           </div>
         </div>
 
-        <div v-if="!isPodcast" class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
-          <span class="material-icons" style="font-size: 1.7rem">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
+        <div v-if="!isPodcast" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
+          <span class="material-icons text-2xl sm:text-2.5xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
         </div>
 
-        <div v-if="chapters.length" class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
-          <span class="material-icons text-3xl">format_list_bulleted</span>
+        <div v-if="chapters.length" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
+          <span class="material-icons text-2xl sm:text-3xl">format_list_bulleted</span>
         </div>
+
+        <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? 'Use full track' : 'Use chapter track'">
+          <div class="cursor-pointer text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
+            <span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
+          </div>
+        </ui-tooltip>
+
+        <button v-if="playerQueueItems.length" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
+          <span class="material-icons text-2xl sm:text-3xl">playlist_play</span>
+        </button>
       </div>
 
-      <player-playback-controls :loading="loading" :seek-loading="seekLoading" :playback-rate="playbackRate" :paused="paused" @restart="restart" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setPlaybackRate="setPlaybackRate" @playPause="playPause" />
+      <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" />
     </div>
 
-    <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" @seek="seek" />
+    <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" :current-chapter="currentChapter" @seek="seek" />
 
     <div class="flex">
-      <p ref="currentTimestamp" class="font-mono text-sm text-gray-100 pointer-events-auto">00:00:00</p>
-      <p class="font-mono text-sm text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
+      <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-sm text-gray-300 pt-0.5">{{ currentChapterName }}</p>
+      <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-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+      <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
     </div>
 
     <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
@@ -66,7 +78,8 @@ export default {
       seekLoading: false,
       showChaptersModal: false,
       currentTime: 0,
-      duration: 0
+      duration: 0,
+      useChapterTrack: false
     }
   },
   computed: {
@@ -86,6 +99,10 @@ export default {
       return this.$store.getters['user/getToken']
     },
     timeRemaining() {
+      if (this.useChapterTrack && this.currentChapter) {
+        var currChapTime = this.currentTime - this.currentChapter.start
+        return (this.currentChapterDuration - currChapTime) / this.playbackRate
+      }
       return (this.duration - this.currentTime) / this.playbackRate
     },
     timeRemainingPretty() {
@@ -95,8 +112,11 @@ export default {
       return '-' + this.$secondsToTimestamp(this.timeRemaining)
     },
     progressPercent() {
-      if (!this.duration) return 0
-      return Math.round((100 * this.currentTime) / this.duration)
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
+      const time = this.useChapterTrack ? Math.max(this.currentTime - this.currentChapterStart) : this.currentTime
+
+      if (!duration) return 0
+      return Math.round((100 * time) / duration)
     },
     currentChapter() {
       return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
@@ -104,8 +124,27 @@ export default {
     currentChapterName() {
       return this.currentChapter ? this.currentChapter.title : ''
     },
+    currentChapterDuration() {
+      if (!this.currentChapter) return 0
+      return this.currentChapter.end - this.currentChapter.start
+    },
+    currentChapterStart() {
+      if (!this.currentChapter) return 0
+      return this.currentChapter.start
+    },
     isFullscreen() {
       return this.$store.state.playerIsFullscreen
+    },
+    currentChapterIndex() {
+      if (!this.currentChapter) return 0
+      return this.chapters.findIndex((ch) => ch.id === this.currentChapter.id)
+    },
+    hasNextChapter() {
+      if (!this.chapters.length) return false
+      return this.currentChapterIndex < this.chapters.length - 1
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
     }
   },
   methods: {
@@ -184,12 +223,46 @@ export default {
       this.seek(chapter.start)
       this.showChaptersModal = false
     },
+    setUseChapterTrack() {
+      var useChapterTrack = !this.useChapterTrack
+      this.useChapterTrack = useChapterTrack
+      if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(useChapterTrack)
+
+      this.$store.dispatch('user/updateUserSettings', { useChapterTrack }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+      this.updateTimestamp()
+    },
+    checkUpdateChapterTrack() {
+      // Changing media in player may not have chapters
+      if (!this.chapters.length && this.useChapterTrack) {
+        this.useChapterTrack = false
+        if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
+      }
+    },
     seek(time) {
       this.$emit('seek', time)
     },
     restart() {
       this.seek(0)
     },
+    prevChapter() {
+      if (!this.currentChapter || this.currentChapterIndex === 0) {
+        return this.restart()
+      }
+      var timeInCurrentChapter = this.currentTime - this.currentChapter.start
+      if (timeInCurrentChapter <= 3 && this.chapters[this.currentChapterIndex - 1]) {
+        var prevChapter = this.chapters[this.currentChapterIndex - 1]
+        this.seek(prevChapter.start)
+      } else {
+        this.seek(this.currentChapter.start)
+      }
+    },
+    nextChapter() {
+      if (!this.currentChapter || !this.hasNextChapter) return
+      var nextChapter = this.chapters[this.currentChapterIndex + 1]
+      this.seek(nextChapter.start)
+    },
     setStreamReady() {
       if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(1)
     },
@@ -214,10 +287,10 @@ export default {
         console.error('No timestamp el')
         return
       }
-      var currTimeClean = this.$secondsToTimestamp(this.currentTime)
+      const time = this.useChapterTrack ? Math.max(0, this.currentTime - this.currentChapterStart) : this.currentTime
+      var currTimeClean = this.$secondsToTimestamp(time)
       ts.innerText = currTimeClean
     },
-
     setBufferTime(bufferTime) {
       if (this.$refs.trackbar) this.$refs.trackbar.setBufferTime(bufferTime)
     },
@@ -227,6 +300,11 @@ export default {
     },
     init() {
       this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
+
+      var _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.$emit('setPlaybackRate', this.playbackRate)
     },
     settingsUpdated(settings) {

client/components/prompt/Confirm.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-60 opacity-0">
+    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
+    <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
+        <p class="text-base mb-8 mt-2 px-1">{{ message }}</p>
+        <div class="flex px-1 items-center">
+          <ui-btn v-if="isYesNo" color="primary" @click="nevermind">Cancel</ui-btn>
+          <div class="flex-grow" />
+          <ui-btn v-if="isYesNo" color="success" @click="confirm">Yes</ui-btn>
+          <ui-btn v-else color="primary" @click="confirm">Ok</ui-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      el: null,
+      content: null
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.setShow()
+      } else {
+        this.setHide()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showConfirmPrompt
+      },
+      set(val) {
+        this.$store.commit('globals/setShowConfirmPrompt', val)
+      }
+    },
+    confirmPromptOptions() {
+      return this.$store.state.globals.confirmPromptOptions || {}
+    },
+    message() {
+      return this.confirmPromptOptions.message || ''
+    },
+    callback() {
+      return this.confirmPromptOptions.callback
+    },
+    type() {
+      return this.confirmPromptOptions.type || 'ok'
+    },
+    persistent() {
+      return !!this.confirmPromptOptions.persistent
+    },
+    isYesNo() {
+      return this.type === 'yesNo'
+    },
+    modalHeight() {
+      return 'unset'
+    },
+    modalWidth() {
+      return '500px'
+    }
+  },
+  methods: {
+    clickedOutside(evt) {
+      if (!this.show) return
+      if (evt) {
+        evt.stopPropagation()
+        evt.preventDefault()
+      }
+
+      if (this.persistent) return
+      if (this.callback) this.callback(false)
+      this.show = false
+    },
+    nevermind() {
+      if (this.callback) this.callback(false)
+      this.show = false
+    },
+    confirm() {
+      if (this.callback) this.callback(true)
+      this.show = false
+    },
+    setShow() {
+      this.$eventBus.$emit('showing-prompt', true)
+      document.body.appendChild(this.el)
+      setTimeout(() => {
+        this.content.style.transform = 'scale(1)'
+      }, 10)
+    },
+    setHide() {
+      this.$eventBus.$emit('showing-prompt', false)
+      this.content.style.transform = 'scale(0)'
+      this.el.remove()
+    }
+  },
+  mounted() {
+    this.el = this.$refs.wrapper
+    this.content = this.$refs.content
+    this.content.style.transform = 'scale(0)'
+    this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
+    this.el.style.opacity = 1
+    this.el.remove()
+  },
+  beforeDestroy() {
+    if (this.show) {
+      this.$eventBus.$emit('showing-prompt', false)
+    }
+  }
+}
+</script>

client/components/prompt/Dialog.vue

@@ -65,12 +65,10 @@ export default {
       setTimeout(() => {
         this.content.style.transform = 'scale(1)'
       }, 10)
-      document.documentElement.classList.add('modal-open')
     },
     setHide() {
       this.content.style.transform = 'scale(0)'
       this.el.remove()
-      document.documentElement.classList.remove('modal-open')
     }
   },
   mounted() {

client/components/stats/Heatmap.vue

@@ -2,7 +2,7 @@
   <div id="heatmap" class="w-full">
     <div class="mx-auto" :style="{ height: innerHeight + 160 + 'px', width: innerWidth + 52 + 'px' }" style="background-color: rgba(13, 17, 23, 0)">
       <p class="mb-2 px-1 text-sm text-gray-200">{{ Object.values(daysListening).length }} listening sessions in the last year</p>
-      <div class="border border-opacity-25 rounded py-2 w-full" style="background-color: #232323" :style="{ height: innerHeight + 80 + 'px' }">
+      <div class="border border-white border-opacity-25 rounded py-2 w-full" style="background-color: #232323" :style="{ height: innerHeight + 80 + 'px' }">
         <div :style="{ width: innerWidth + 'px', height: innerHeight + 'px' }" class="ml-10 mt-5 absolute" @mouseover="mouseover" @mouseout="mouseout">
           <div v-for="dayLabel in dayLabels" :key="dayLabel.label" :style="dayLabel.style" class="absolute top-0 left-0 text-gray-300">{{ dayLabel.label }}</div>
 

client/components/tables/BackupsTable.vue

@@ -45,7 +45,7 @@
       <div v-if="selectedBackup" class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
         <p class="text-error text-lg font-semibold">Important Notice!</p>
         <p class="text-base py-1">Applying a backup will overwrite users, user progress, book details, settings, and covers stored in metadata with the backed up data.</p>
-        <p class="text-base py-1">Backups <strong>do not</strong> modify any files in your library folders, only data in the audiobookshelf created <span class="font-mono">/config</span> and <span class="font-mono">/metadata</span> directories. If you have enabled server settings to store cover art and metadata in your library folders then those are not backup up or overwritten.</p>
+        <p class="text-base py-1">Backups <strong>do not</strong> modify any files in your library folders, only data in the audiobookshelf created <span class="font-mono">/config</span> and <span class="font-mono">/metadata</span> directories. If you have enabled server settings to store cover art and metadata in your library folders then those are not backed up or overwritten.</p>
         <p class="text-base py-1">All clients using your server will be automatically refreshed.</p>
 
         <p class="text-lg text-center my-8">Are you sure you want to apply the backup created on {{ selectedBackup.datePretty }}?</p>

client/components/tables/ChaptersTable.vue

@@ -24,10 +24,10 @@
           <td class="font-book">
             {{ chapter.title }}
           </td>
-          <td class="font-mono text-center">
+          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
             {{ $secondsToTimestamp(chapter.start) }}
           </td>
-          <td class="font-mono text-center">
+          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
             {{ $secondsToTimestamp(chapter.end) }}
           </td>
         </tr>
@@ -57,6 +57,9 @@ export default {
     media() {
       return this.libraryItem ? this.libraryItem.media || {} : {}
     },
+    metadata() {
+      return this.media.metadata || {}
+    },
     chapters() {
       return this.media.chapters || []
     },
@@ -67,6 +70,30 @@ export default {
   methods: {
     clickBar() {
       this.expanded = !this.expanded
+    },
+    goToTimestamp(time) {
+      if (this.$store.getters['getIsMediaStreaming'](this.libraryItemId)) {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.libraryItemId,
+          episodeId: null,
+          startTime: time
+        })
+      } else {
+        const payload = {
+          message: `Start playback for "${this.metadata.title}" at ${this.$secondsToTimestamp(time)}?`,
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.$eventBus.$emit('play-item', {
+                libraryItemId: this.libraryItemId,
+                episodeId: null,
+                startTime: time
+              })
+            }
+          },
+          type: 'yesNo'
+        }
+        this.$store.commit('globals/setConfirmPrompt', payload)
+      }
     }
   },
   mounted() {}

client/components/tables/CollectionBooksTable.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="w-full bg-primary bg-opacity-40">
-    <div class="w-full h-14 flex items-center px-4 bg-primary">
-      <p>Collection List</p>
-      <div class="w-6 h-6 bg-white bg-opacity-10 flex items-center justify-center rounded-full ml-2">
-        <p class="font-mono text-sm">{{ books.length }}</p>
+    <div class="w-full h-14 flex items-center px-4 md:px-6 py-2 bg-primary">
+      <p class="pr-4">Collection List</p>
+
+      <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
+        <span class="text-xs md:text-sm font-mono leading-none">{{ books.length }}</span>
       </div>
       <div class="flex-grow" />
-      <!-- <p v-if="totalDuration">{{ totalDurationPretty }}</p> -->
+      <p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
     </div>
     <draggable v-model="booksCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'collection-book' : null">
@@ -51,11 +52,18 @@ export default {
     }
   },
   computed: {
-    coverAspectRatio() {
-      return this.$store.getters['getServerSetting']('coverAspectRatio')
-    },
     bookCoverAspectRatio() {
-      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    totalDuration() {
+      var _total = 0
+      this.books.forEach((book) => {
+        _total += book.media.duration
+      })
+      return _total
+    },
+    totalDurationPretty() {
+      return this.$elapsedPrettyExtended(this.totalDuration)
     }
   },
   methods: {

client/components/tables/UsersTable.vue

@@ -164,8 +164,8 @@ export default {
     }
 
     if (this.$root.socket) {
-      this.$root.socket.off('user_added', this.newUserAdded)
-      this.$root.socket.off('user_updated', this.userUpdated)
+      this.$root.socket.off('user_added', this.addUpdateUser)
+      this.$root.socket.off('user_updated', this.addUpdateUser)
       this.$root.socket.off('user_removed', this.userRemoved)
     }
   }
@@ -192,7 +192,11 @@ export default {
 }
 
 #accounts tr:nth-child(even) {
-  background-color: #3a3a3a;
+  background-color: #373838;
+}
+
+#accounts tr:nth-child(odd) {
+  background-color: #2f2f2f;
 }
 
 #accounts tr:hover {
@@ -204,6 +208,6 @@ export default {
   font-weight: 600;
   padding-top: 5px;
   padding-bottom: 5px;
-  background-color: #333;
+  background-color: #272727;
 }
 </style>

client/components/tables/collection/BookTableRow.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="w-full px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
-    <div v-if="book" class="flex h-20">
-      <div class="w-16 max-w-16 h-full">
+  <div class="w-full px-1 md:px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
+    <div v-if="book" class="flex h-16 md:h-20">
+      <div class="w-10 min-w-10 md:w-16 md:max-w-16 h-full">
         <div class="flex h-full items-center justify-center">
-          <span class="material-icons drag-handle text-xl">menu</span>
+          <span class="material-icons drag-handle text-lg md:text-xl">menu</span>
         </div>
       </div>
-      <div class="h-full relative" :style="{ width: coverWidth + 'px' }">
+      <div class="h-full relative" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
         <covers-book-cover :library-item="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         <div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
           <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
@@ -27,15 +27,15 @@
         <span class="material-icons text-lg text-white text-opacity-70 hover:text-opacity-100 cursor-pointer">radio_button_unchecked</span>
       </div> -->
     </div>
-    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : '-translate-x-24'">
+    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
       <div class="flex h-full items-center">
         <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
           <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
         </ui-tooltip>
-        <div class="mx-1" :class="isHovering ? '' : 'ml-6'">
+        <div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
           <ui-icon-btn icon="edit" borderless @click="clickEdit" />
         </div>
-        <div class="mx-1">
+        <div v-if="userCanDelete" class="mx-1">
           <ui-icon-btn icon="close" borderless @click="removeClick" />
         </div>
       </div>
@@ -71,6 +71,11 @@ export default {
     }
   },
   computed: {
+    translateDistance() {
+      if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
+      else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
+      return '-translate-x-24'
+    },
     media() {
       return this.book.media || {}
     },
@@ -107,9 +112,18 @@ export default {
     userIsFinished() {
       return this.itemProgress ? !!this.itemProgress.isFinished : false
     },
+    coverSize() {
+      return this.$store.state.globals.isMobile ? 40 : 50
+    },
     coverWidth() {
-      if (this.bookCoverAspectRatio === 1) return 50 * 1.6
-      return 50
+      if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
+      return this.coverSize
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
     }
   },
   methods: {

client/components/tables/library/LibrariesTable.vue

@@ -6,10 +6,10 @@
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
     </div>
-    <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
+    <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
-          <tables-library-item :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
+          <tables-library-item :library="library" :selected="currentLibraryId === library.id" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
         </div>
       </template>
     </draggable>

client/components/tables/library/LibraryItem.vue

@@ -7,18 +7,26 @@
     </svg>
     <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
     <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan" small color="success" @click.stop="scan">Scan</ui-btn>
-    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2" @click.stop="forceScan">Force Re-Scan</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan" class="hidden md:block" small color="success" @click.stop="scan">Scan</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2 hidden md:block" @click.stop="forceScan">Force Re-Scan</ui-btn>
 
-    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2" @click.stop="matchAll">Match Books</ui-btn>
+    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2 hidden md:block" @click.stop="matchAll">Match Books</ui-btn>
 
-    <span v-show="isHovering && !libraryScan && showEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-show="!libraryScan && isHovering && showEdit && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50 cursor-pointer'" @click.stop="deleteClick">delete</span>
+    <span v-if="isHovering && !libraryScan" class="!hidden md:!block material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
+    <span v-if="!libraryScan && isHovering && !isDeleting" class="!hidden md:!block material-icons text-xl text-gray-300 ml-3 hover:text-gray-50 cursor-pointer" @click.stop="deleteClick">delete</span>
+
+    <!-- For mobile -->
+    <span v-if="!libraryScan" class="!block md:!hidden material-icons text-xl text-gray-300 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
+    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-2xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
     <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
       <svg viewBox="0 0 24 24" class="w-6 h-6">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
+    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
+
+    <!-- For mobile -->
+    <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" />
   </div>
 </template>
 
@@ -30,22 +38,19 @@ export default {
       default: () => {}
     },
     selected: Boolean,
-    showEdit: Boolean,
     dragging: Boolean
   },
   data() {
     return {
       mouseover: false,
-      isDeleting: false
+      isDeleting: false,
+      showMobileMenu: false
     }
   },
   computed: {
     isHovering() {
       return this.mouseover && !this.dragging
     },
-    isMain() {
-      return this.library.id === 'main'
-    },
     libraryScan() {
       return this.$store.getters['scanners/getLibraryScan'](this.library.id)
     },
@@ -54,12 +59,53 @@ export default {
     },
     isBookLibrary() {
       return this.mediaType === 'book'
+    },
+    menuTitle() {
+      return this.library.name
+    },
+    mobileMenuItems() {
+      const items = [
+        {
+          text: 'Scan',
+          value: 'scan'
+        },
+        {
+          text: 'Force Re-Scan',
+          value: 'force-scan'
+        }
+      ]
+      if (this.isBookLibrary) {
+        items.push({
+          text: 'Match Books',
+          value: 'match-books'
+        })
+      }
+      items.push({
+        text: 'Delete',
+        value: 'delete'
+      })
+      return items
     }
   },
   methods: {
+    mobileMenuAction(action) {
+      this.showMobileMenu = false
+      if (action === 'scan') {
+        this.scan()
+      } else if (action === 'force-scan') {
+        this.forceScan()
+      } else if (action === 'match-books') {
+        this.matchAll()
+      } else if (action === 'delete') {
+        this.deleteClick()
+      }
+    },
+    showMenu() {
+      this.showMobileMenu = true
+    },
     matchAll() {
       this.$axios
-        .$post(`/api/libraries/${this.library.id}/matchall`)
+        .$get(`/api/libraries/${this.library.id}/matchall`)
         .then(() => {
           console.log('Starting scan for matches')
         })
@@ -97,7 +143,6 @@ export default {
       }
     },
     deleteClick() {
-      if (this.isMain) return
       if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {
         this.isDeleting = true
         this.$axios

client/components/tables/podcast/EpisodeTableRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center h-24 cursor-pointer" @click="$emit('view', episode)">
+    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
       <div class="flex-grow px-2">
         <p class="text-sm font-semibold">
           {{ title }}
@@ -8,6 +8,12 @@
 
         <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
 
+        <div class="flex justify-between pt-2 max-w-xl">
+          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+        </div>
+
         <div class="flex items-center pt-2">
           <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
             <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
@@ -17,20 +23,18 @@
           <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
             <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
           </ui-tooltip>
-          <p v-if="episode.season" class="px-4 text-sm text-gray-300">Season #{{ episode.season }}</p>
-          <p v-if="episode.episode" class="px-4 text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="publishedAt" class="px-4 text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+
+          <ui-icon-btn v-if="userCanUpdate" icon="edit" borderless @click="clickEdit" />
+          <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
         </div>
       </div>
-      <div class="w-24 min-w-24" />
+      <div v-if="isHovering || isSelected || selectionMode" class="hidden md:block w-12 min-w-12" />
     </div>
-    <div class="w-24 min-w-24 -right-0 absolute top-0 h-full transform transition-transform" :class="!isHovering ? 'translate-x-32' : 'translate-x-0'">
+    <div v-if="isSelected || selectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
+    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !selectionMode ? 'translate-x-24' : 'translate-x-0'">
       <div class="flex h-full items-center">
         <div class="mx-1">
-          <ui-icon-btn v-if="userCanUpdate" icon="edit" borderless @click="clickEdit" />
-        </div>
-        <div class="mx-1">
-          <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
+          <ui-checkbox v-model="isSelected" @input="selectedUpdated" checkbox-bg="bg" />
         </div>
       </div>
     </div>
@@ -46,13 +50,15 @@ export default {
     episode: {
       type: Object,
       default: () => {}
-    }
+    },
+    selectionMode: Boolean
   },
   data() {
     return {
       isProcessingReadUpdate: false,
       processingRemove: false,
-      isHovering: false
+      isHovering: false,
+      isSelected: false
     }
   },
   computed: {
@@ -78,7 +84,7 @@ export default {
       return this.$secondsToTimestamp(this.episode.duration)
     },
     isStreaming() {
-      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
     },
     streamIsPlaying() {
       return this.$store.state.streamIsPlaying && this.isStreaming
@@ -104,8 +110,17 @@ export default {
     }
   },
   methods: {
+    clickedEpisode() {
+      this.$emit('view', this.episode)
+    },
+    clickedSelectionBg() {
+      this.isSelected = !this.isSelected
+      this.selectedUpdated(this.isSelected)
+    },
+    selectedUpdated(value) {
+      this.$emit('selected', { isSelected: value, episode: this.episode })
+    },
     mouseover() {
-      // if (this.isDragging) return
       this.isHovering = true
     },
     mouseleave() {
@@ -118,13 +133,24 @@ export default {
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
-        this.$eventBus.$emit('play-item', {
-          libraryItemId: this.libraryItemId,
-          episodeId: this.episode.id
-        })
+        this.$emit('play', this.episode)
       }
     },
-    toggleFinished() {
+    toggleFinished(confirmed = false) {
+      if (!this.userIsFinished && this.itemProgressPercent > 0 && !confirmed) {
+        const payload = {
+          message: `Are you sure you want to mark "${this.title}" as finished?`,
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.toggleFinished(true)
+            }
+          },
+          type: 'yesNo'
+        }
+        this.$store.commit('globals/setConfirmPrompt', payload)
+        return
+      }
+
       var updatePayload = {
         isFinished: !this.userIsFinished
       }

client/components/tables/podcast/EpisodesTable.vue

@@ -3,14 +3,21 @@
     <div class="flex items-center mb-4">
       <p class="text-lg mb-0 font-semibold">Episodes</p>
       <div class="flex-grow" />
-      <controls-episode-sort-select v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+      <template v-if="isSelectionMode">
+        <ui-tooltip :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
+          <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">Remove {{ selectedEpisodes.length }} episode{{ selectedEpisodes.length > 1 ? 's' : '' }}</ui-btn>
+        <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">Cancel</ui-btn>
+      </template>
+      <controls-episode-sort-select v-else v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
     </div>
     <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
     <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-table-row :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" class="item" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" />
+      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" />
     </template>
 
-    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" :library-item="libraryItem" :episode="selectedEpisode" />
+    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
   </div>
 </template>
 
@@ -28,7 +35,10 @@ export default {
       sortKey: 'publishedAt',
       sortDesc: true,
       selectedEpisode: null,
-      showPodcastRemoveModal: false
+      showPodcastRemoveModal: false,
+      selectedEpisodes: [],
+      episodesToRemove: [],
+      processing: false
     }
   },
   watch: {
@@ -37,6 +47,9 @@ export default {
     }
   },
   computed: {
+    isSelectionMode() {
+      return this.selectedEpisodes.length > 0
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -56,11 +69,92 @@ export default {
         }
         return String(a[this.sortKey]).localeCompare(String(b[this.sortKey]), undefined, { numeric: true, sensitivity: 'base' })
       })
+    },
+    selectedIsFinished() {
+      // Find an item that is not finished, if none then all items finished
+      return !this.selectedEpisodes.find((episode) => {
+        var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        return !itemProgress || !itemProgress.isFinished
+      })
     }
   },
   methods: {
+    toggleBatchFinished() {
+      this.processing = true
+      var newIsFinished = !this.selectedIsFinished
+      var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
+        return {
+          libraryItemId: this.libraryItem.id,
+          episodeId: episode.id,
+          isFinished: newIsFinished
+        }
+      })
+
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success('Batch update success!')
+          this.processing = false
+          this.clearSelected()
+        })
+        .catch((error) => {
+          this.$toast.error('Batch update failed')
+          console.error('Failed to batch update read/not read', error)
+          this.processing = false
+        })
+    },
+    removeEpisodeModalToggled(val) {
+      if (!val) this.episodesToRemove = []
+    },
+    clearSelected() {
+      const episodeRows = this.$refs.episodeRow
+      if (episodeRows && episodeRows.length) {
+        for (const epRow of episodeRows) {
+          if (epRow) epRow.isSelected = false
+        }
+      }
+      this.selectedEpisodes = []
+    },
+    removeSelectedEpisodes() {
+      this.episodesToRemove = this.selectedEpisodes
+      this.showPodcastRemoveModal = true
+    },
+    episodeSelected({ isSelected, episode }) {
+      if (isSelected) {
+        this.selectedEpisodes.push(episode)
+      } else {
+        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
+      }
+    },
+    playEpisode(episode) {
+      const queueItems = []
+
+      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
+      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
+        const episode = episodesInListeningOrder[i]
+        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        if (!podcastProgress || !podcastProgress.isFinished) {
+          queueItems.push({
+            libraryItemId: this.libraryItem.id,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: this.mediaMetadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            duration: episode.audioFile.duration || null,
+            coverPath: this.media.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItem.id,
+        episodeId: episode.id,
+        queueItems
+      })
+    },
     removeEpisode(episode) {
-      this.selectedEpisode = episode
+      this.episodesToRemove = [episode]
       this.showPodcastRemoveModal = true
     },
     editEpisode(episode) {

client/components/ui/Checkbox.vue

@@ -14,6 +14,7 @@ export default {
     value: Boolean,
     label: String,
     small: Boolean,
+    medium: Boolean,
     checkboxBg: {
       type: String,
       default: 'white'
@@ -47,19 +48,23 @@ export default {
     wrapperClass() {
       var classes = [`bg-${this.checkboxBg} border-${this.borderColor}`]
       if (this.small) classes.push('w-4 h-4')
+      else if (this.medium) classes.push('w-5 h-5')
       else classes.push('w-6 h-6')
 
       return classes.join(' ')
     },
     labelClassname() {
       if (this.labelClass) return this.labelClass
-      var classes = ['pl-1']
-      if (this.small) classes.push('text-xs md:text-sm')
+      var classes = []
+      if (this.small) classes.push('text-xs md:text-sm pl-1')
+      else if (this.medium) classes.push('text-base md:text-lg pl-2')
+      else classes.push('pl-2')
       return classes.join(' ')
     },
     svgClass() {
       var classes = [`text-${this.checkColor}`]
       if (this.small) classes.push('w-3 h-3')
+      else if (this.medium) classes.push('w-3.5 h-3.5')
       else classes.push('w-4 h-4')
 
       return classes.join(' ')

client/components/ui/FileInput.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <input ref="fileInput" type="file" :accept="accept" class="hidden" @change="inputChanged" />
-    <ui-btn @click="clickUpload" color="primary" type="text"><slot /></ui-btn>
+    <ui-btn @click="clickUpload" color="primary" class="hidden md:block" type="text"><slot /></ui-btn>
+    <ui-icon-btn @click="clickUpload" icon="upload" class="block md:hidden" />
   </div>
 </template>
 

client/components/ui/IconBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
+  <button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
@@ -20,20 +20,29 @@ export default {
     },
     outlined: Boolean,
     borderless: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    iconFontSize: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: Number,
+      default: 9
+    }
   },
   data() {
     return {}
   },
   computed: {
     className() {
-      var classes = []
+      var classes = [`h-${this.size} w-${this.size}`]
       if (!this.borderless) {
         classes.push(`bg-${this.bgColor} border border-gray-600`)
       }
       return classes.join(' ')
     },
     fontSize() {
+      if (this.iconFontSize) return this.iconFontSize
       if (this.icon === 'edit') return '1.25rem'
       return '1.4rem'
     }

client/components/ui/InputDropdown.vue

@@ -42,7 +42,8 @@ export default {
     editable: {
       type: Boolean,
       default: true
-    }
+    },
+    showAllWhenEmpty: Boolean
   },
   data() {
     return {
@@ -72,6 +73,7 @@ export default {
     itemsToShow() {
       if (!this.editable) return this.items
       if (!this.textInput || this.textInput === this.input) {
+        if (this.showAllWhenEmpty) return this.items
         return []
       }
       return this.items.filter((i) => {
@@ -87,6 +89,9 @@ export default {
         // this.currentSearch = this.textInput
       }, 100)
     },
+    setFocus() {
+      if (this.$refs.input && this.editable) this.$refs.input.focus()
+    },
     inputFocus() {
       this.isFocused = true
     },

client/components/ui/LibrariesDropdown.vue

@@ -1,18 +1,18 @@
 <template>
-  <div v-if="currentLibrary" class="relative w-36 h-8" v-click-outside="clickOutsideObj">
-    <button type="button" :disabled="disabled" class="relative h-full w-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
-      <span class="flex items-center">
-        <widgets-library-icon :icon="currentLibraryIcon" class="mr-2" />
-        <span class="block truncate text-sm">{{ currentLibrary.name }}</span>
-      </span>
+  <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
+    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+      <div class="flex items-center justify-center sm:justify-start">
+        <widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
+        <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
+      </div>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="library in librariesFiltered">
           <li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
-            <div class="flex items-center px-3">
-              <widgets-library-icon :icon="library.icon" class="mr-2" />
+            <div class="flex items-center px-2">
+              <widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
               <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
             </div>
           </li>

client/components/ui/MultiSelect.vue

@@ -4,7 +4,7 @@
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
-          <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 text-xs bg-bg flex flex-nowrap whitespace-nowrap items-center relative">
+          <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
             <div class="w-full h-full rounded-full absolute top-0 left-0 opacity-0 hover:opacity-100 px-1 bg-bg bg-opacity-75 flex items-center justify-end cursor-pointer">
               <span v-if="showEdit" class="material-icons text-white hover:text-warning" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
               <span class="material-icons text-white hover:text-error" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>

client/components/ui/TextInput.vue

@@ -36,7 +36,8 @@ export default {
   data() {
     return {
       showPassword: false,
-      isHovering: false
+      isHovering: false,
+      isFocused: false
     }
   },
   computed: {
@@ -66,9 +67,11 @@ export default {
       this.inputValue = ''
     },
     focused() {
+      this.isFocused = true
       this.$emit('focus')
     },
     blurred() {
+      this.isFocused = false
       this.$emit('blur')
     },
     change(e) {
@@ -80,6 +83,9 @@ export default {
     blur() {
       if (this.$refs.input) this.$refs.input.blur()
     },
+    setFocus() {
+      if (this.$refs.input) this.$refs.input.focus()
+    },
     mouseover() {
       this.isHovering = true
     },

client/components/ui/TextInputWithLabel.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
-      {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
-    </p>
-    <ui-text-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" @blur="inputBlurred" />
+    <slot>
+      <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
+        {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
+      </p>
+    </slot>
+    <ui-text-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
   </div>
 </template>
 
@@ -18,7 +20,8 @@ export default {
       default: 'text'
     },
     readonly: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    inputClass: String
   },
   data() {
     return {}
@@ -34,6 +37,11 @@ export default {
     }
   },
   methods: {
+    setFocus() {
+      if (this.$refs.input && this.$refs.input.setFocus) {
+        this.$refs.input.setFocus()
+      }
+    },
     blur() {
       if (this.$refs.input && this.$refs.input.blur) {
         this.$refs.input.blur()

client/components/ui/TimePicker.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="relative">
+    <div class="rounded text-gray-200 border w-full px-3 py-2" :class="focusedDigit ? 'bg-primary bg-opacity-50 border-gray-300' : 'bg-primary border-gray-600'" @click="clickInput" v-click-outside="clickOutsideObj">
+      <div class="flex items-center">
+        <template v-for="(digit, index) in digitDisplay">
+          <div v-if="digit == ':'" :key="index" class="px-px" @click.stop="clickMedian(index)">:</div>
+          <div v-else :key="index" class="px-px" :class="{ 'digit-focused': focusedDigit == digit }" @click.stop="focusDigit(digit)">{{ digits[digit] }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: [String, Number],
+    showThreeDigitHour: Boolean
+  },
+  data() {
+    return {
+      clickOutsideObj: {
+        handler: this.clickOutside,
+        events: ['mousedown'],
+        isActive: true
+      },
+      digitDisplay: ['hour1', 'hour0', ':', 'minute1', 'minute0', ':', 'second1', 'second0'],
+      focusedDigit: null,
+      digits: {
+        hour2: 0,
+        hour1: 0,
+        hour0: 0,
+        minute1: 0,
+        minute0: 0,
+        second1: 0,
+        second0: 0
+      },
+      isOver99Hours: false
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.initDigits()
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    initDigits() {
+      var totalSeconds = !this.value || isNaN(this.value) ? 0 : Number(this.value)
+      totalSeconds = Math.round(totalSeconds)
+
+      var minutes = Math.floor(totalSeconds / 60)
+      var seconds = totalSeconds - minutes * 60
+      var hours = Math.floor(minutes / 60)
+      minutes -= hours * 60
+
+      this.digits.second1 = seconds <= 9 ? 0 : Number(String(seconds)[0])
+      this.digits.second0 = seconds <= 9 ? seconds : Number(String(seconds)[1])
+
+      this.digits.minute1 = minutes <= 9 ? 0 : Number(String(minutes)[0])
+      this.digits.minute0 = minutes <= 9 ? minutes : Number(String(minutes)[1])
+
+      if (hours > 99) {
+        this.digits.hour2 = Number(String(hours)[0])
+        this.digits.hour1 = Number(String(hours)[1])
+        this.digits.hour0 = Number(String(hours)[2])
+        this.isOver99Hours = true
+      } else {
+        this.digits.hour1 = hours <= 9 ? 0 : Number(String(hours)[0])
+        this.digits.hour0 = hours <= 9 ? hours : Number(String(hours)[1])
+        this.isOver99Hours = this.showThreeDigitHour
+      }
+
+      if (this.isOver99Hours) {
+        this.digitDisplay = ['hour2', 'hour1', 'hour0', ':', 'minute1', 'minute0', ':', 'second1', 'second0']
+      } else {
+        this.digitDisplay = ['hour1', 'hour0', ':', 'minute1', 'minute0', ':', 'second1', 'second0']
+      }
+    },
+    updateSeconds() {
+      var seconds = this.digits.second0 + this.digits.second1 * 10
+      seconds += this.digits.minute0 * 60 + this.digits.minute1 * 600
+      seconds += this.digits.hour0 * 3600 + this.digits.hour1 * 36000
+      if (this.isOver99Hours) seconds += this.digits.hour2 * 360000
+
+      if (Number(this.value) !== seconds) {
+        this.$emit('input', seconds)
+        this.$emit('change', seconds)
+      }
+    },
+    clickMedian(index) {
+      // Click colon select digit to right
+      if (index >= 5) {
+        this.focusedDigit = 'second1'
+      } else {
+        this.focusedDigit = 'minute1'
+      }
+    },
+    clickOutside() {
+      this.removeFocus()
+    },
+    removeFocus() {
+      this.focusedDigit = null
+      this.removeListeners()
+    },
+    focusDigit(digit) {
+      if (this.focusedDigit == null || isNaN(this.focusedDigit)) this.initListeners()
+      this.focusedDigit = digit
+    },
+    clickInput() {
+      if (this.focusedDigit) return
+      this.focusDigit('second0')
+    },
+    shiftFocusLeft() {
+      if (!this.focusedDigit) return
+      if (this.focusedDigit.endsWith('2')) return
+
+      const isDigit1 = this.focusedDigit.endsWith('1')
+      if (!isDigit1) {
+        const digit1Key = this.focusedDigit.replace('0', '1')
+        this.focusedDigit = digit1Key
+      } else if (this.focusedDigit.startsWith('second')) {
+        this.focusedDigit = 'minute0'
+      } else if (this.focusedDigit.startsWith('minute')) {
+        this.focusedDigit = 'hour0'
+      } else if (this.isOver99Hours && this.focusedDigit.startsWith('hour')) {
+        this.focusedDigit = 'hour2'
+      }
+    },
+    shiftFocusRight() {
+      if (!this.focusedDigit) return
+      if (this.focusedDigit.endsWith('2')) {
+        // Must be hour2
+        this.focusedDigit = 'hour1'
+        return
+      }
+      const isDigit1 = this.focusedDigit.endsWith('1')
+      if (isDigit1) {
+        const digit0Key = this.focusedDigit.replace('1', '0')
+        this.focusedDigit = digit0Key
+      } else if (this.focusedDigit.startsWith('hour')) {
+        this.focusedDigit = 'minute1'
+      } else if (this.focusedDigit.startsWith('minute')) {
+        this.focusedDigit = 'second1'
+      }
+    },
+    increaseFocused() {
+      if (!this.focusedDigit) return
+      const isDigit1 = this.focusedDigit.endsWith('1')
+      const digit = Number(this.digits[this.focusedDigit])
+      if (isDigit1 && !this.focusedDigit.startsWith('hour')) this.digits[this.focusedDigit] = (digit + 1) % 6
+      else this.digits[this.focusedDigit] = (digit + 1) % 10
+      this.updateSeconds()
+    },
+    decreaseFocused() {
+      if (!this.focusedDigit) return
+      const isDigit1 = this.focusedDigit.endsWith('1')
+      const digit = Number(this.digits[this.focusedDigit])
+      if (isDigit1 && !this.focusedDigit.startsWith('hour')) this.digits[this.focusedDigit] = digit - 1 < 0 ? 5 : digit - 1
+      else this.digits[this.focusedDigit] = digit - 1 < 0 ? 9 : digit - 1
+      this.updateSeconds()
+    },
+    keydown(evt) {
+      if (!this.focusedDigit || !evt.key) return
+
+      if (evt.key === 'ArrowLeft') {
+        return this.shiftFocusLeft()
+      } else if (evt.key === 'ArrowRight') {
+        return this.shiftFocusRight()
+      } else if (evt.key === 'ArrowUp') {
+        return this.increaseFocused()
+      } else if (evt.key === 'ArrowDown') {
+        return this.decreaseFocused()
+      } else if (evt.key === 'Enter' || evt.key === 'Escape') {
+        return this.removeFocus()
+      }
+
+      if (isNaN(evt.key)) return
+
+      var digit = Number(evt.key)
+      const isDigit1 = this.focusedDigit.endsWith('1')
+      if (isDigit1 && !this.focusedDigit.startsWith('hour') && digit >= 6) {
+        digit = 5
+      }
+
+      this.digits[this.focusedDigit] = digit
+
+      this.updateSeconds()
+      this.shiftFocusRight()
+    },
+    initListeners() {
+      window.addEventListener('keydown', this.keydown)
+    },
+    removeListeners() {
+      window.removeEventListener('keydown', this.keydown)
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    this.removeListeners()
+  }
+}
+</script>
+
+<style scoped>
+.digit-focused {
+  background-color: #555;
+}
+</style>

client/components/ui/Tooltip.vue

@@ -41,19 +41,12 @@ export default {
         this.setTooltipPosition(this.tooltip)
       }
     },
-    getTextWidth() {
-      var styles = {
-        'font-size': '0.75rem'
-      }
-      var size = this.$calculateTextSize(this.text, styles)
-      return size.width
-    },
     createTooltip() {
       if (!this.$refs.box) return
       var tooltip = document.createElement('div')
       this.tooltipId = String(Math.floor(Math.random() * 10000))
       tooltip.id = this.tooltipId
-      tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs'
+      tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs text-center hidden sm:block'
       tooltip.style.zIndex = 100
       tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
       tooltip.innerHTML = this.text

client/components/widgets/AuthorsSlider.vue

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     cardScaleMulitiplier() {
       return this.height / 192

client/components/widgets/BookDetailsEdit.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="w-full h-full relative">
-    <form class="w-full h-full px-4 py-6" @submit.prevent="submitForm">
-      <div class="flex -mx-1">
-        <div class="w-1/2 px-1">
+    <form class="w-full h-full px-2 md:px-4 py-6" @submit.prevent="submitForm">
+      <div class="flex flex-wrap -mx-1">
+        <div class="w-full md:w-1/2 px-1">
           <ui-text-input-with-label ref="titleInput" v-model="details.title" label="Title" />
         </div>
-        <div class="flex-grow px-1">
+        <div class="flex-grow px-1 mt-2 md:mt-0">
           <ui-text-input-with-label ref="subtitleInput" v-model="details.subtitle" label="Subtitle" />
         </div>
       </div>
 
-      <div class="flex mt-2 -mx-1">
-        <div class="w-3/4 px-1">
+      <div class="flex flex-wrap mt-2 -mx-1">
+        <div class="w-full md:w-3/4 px-1">
           <!-- Authors filter only contains authors in this library, use query input to query all authors -->
           <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" label="Authors" endpoint="authors/search" />
         </div>
-        <div class="flex-grow px-1">
+        <div class="flex-grow px-1 mt-2 md:mt-0">
           <ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" label="Publish Year" />
         </div>
       </div>
@@ -28,35 +28,35 @@
 
       <ui-textarea-with-label ref="descriptionInput" v-model="details.description" :rows="3" label="Description" class="mt-2" />
 
-      <div class="flex mt-2 -mx-1">
-        <div class="w-1/2 px-1">
+      <div class="flex flex-wrap mt-2 -mx-1">
+        <div class="w-full md:w-1/2 px-1">
           <ui-multi-select ref="genresSelect" v-model="details.genres" label="Genres" :items="genres" />
         </div>
-        <div class="flex-grow px-1">
+        <div class="flex-grow px-1 mt-2 md:mt-0">
           <ui-multi-select ref="tagsSelect" v-model="newTags" label="Tags" :items="tags" />
         </div>
       </div>
 
-      <div class="flex mt-2 -mx-1">
-        <div class="w-1/2 px-1">
+      <div class="flex flex-wrap mt-2 -mx-1">
+        <div class="w-full md:w-1/2 px-1">
           <ui-multi-select ref="narratorsSelect" v-model="details.narrators" label="Narrators" :items="narrators" />
         </div>
-        <div class="w-1/4 px-1">
+        <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
           <ui-text-input-with-label ref="isbnInput" v-model="details.isbn" label="ISBN" />
         </div>
-        <div class="w-1/4 px-1">
+        <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
           <ui-text-input-with-label ref="asinInput" v-model="details.asin" label="ASIN" />
         </div>
       </div>
 
-      <div class="flex mt-2 -mx-1">
-        <div class="w-1/2 px-1">
+      <div class="flex flex-wrap mt-2 -mx-1">
+        <div class="w-full md:w-1/2 px-1">
           <ui-text-input-with-label ref="publisherInput" v-model="details.publisher" label="Publisher" />
         </div>
-        <div class="w-1/4 px-1">
+        <div class="w-1/2 md:w-1/4 px-1 mt-2 md:mt-0">
           <ui-text-input-with-label ref="languageInput" v-model="details.language" label="Language" />
         </div>
-        <div class="flex-grow px-1 pt-6">
+        <div class="flex-grow px-1 pt-6 mt-2 md:mt-0">
           <div class="flex justify-center">
             <ui-checkbox v-model="details.explicit" label="Explicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
           </div>

client/components/widgets/CronExpressionBuilder.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="w-full py-2">
+    <div class="flex -mb-px">
+      <div class="w-1/2 h-8 rounded-tl-md relative border border-black-200 flex items-center justify-center cursor-pointer" :class="!showAdvancedView ? 'text-white bg-bg hover:bg-opacity-60 border-b-bg' : 'text-gray-400 hover:text-gray-300 bg-primary bg-opacity-70 hover:bg-opacity-60'" @click="showAdvancedView = false">
+        <p class="text-sm">Scheduler</p>
+      </div>
+      <div class="w-1/2 h-8 rounded-tr-md relative border border-black-200 flex items-center justify-center -ml-px cursor-pointer" :class="showAdvancedView ? 'text-white bg-bg hover:bg-opacity-60 border-b-bg' : 'text-gray-400 hover:text-gray-300 bg-primary bg-opacity-70 hover:bg-opacity-60'" @click="showAdvancedView = true">
+        <p class="text-sm">Advanced</p>
+      </div>
+    </div>
+    <div class="px-2 py-4 md:p-4 border border-black-200 rounded-b-md mr-px" style="min-height: 280px">
+      <template v-if="!showAdvancedView">
+        <ui-dropdown v-model="selectedInterval" @input="updateCron" label="Interval" :items="intervalOptions" class="mb-2" />
+
+        <ui-multi-select-dropdown v-if="selectedInterval === 'custom'" v-model="selectedWeekdays" @input="updateCron" label="Weekdays to run" :items="weekdays" />
+
+        <div v-if="(selectedWeekdays.length && selectedInterval === 'custom') || selectedInterval === 'daily'" class="flex items-center py-2">
+          <ui-text-input-with-label v-model="selectedHour" @input="updateCron" @blur="hourBlur" type="number" label="Hour" class="max-w-20" />
+          <p class="text-xl px-2 mt-4">:</p>
+          <ui-text-input-with-label v-model="selectedMinute" @input="updateCron" @blur="minuteBlur" type="number" label="Minute" class="max-w-20" />
+        </div>
+
+        <div v-if="description" class="w-full bg-primary bg-opacity-75 rounded-xl p-2 md:p-4 text-center mt-2">
+          <p class="text-base md:text-lg text-gray-200" v-html="description" />
+        </div>
+      </template>
+      <template v-else>
+        <p class="px-1 text-sm font-semibold">Cron Expression</p>
+        <ui-text-input ref="customExpressionInput" v-model="customCronExpression" @blur="cronExpressionBlur" label="Cron Expression" :padding-y="2" text-center class="w-full text-2xl md:text-4xl -tracking-widest mb-4 font-mono" />
+
+        <div class="flex items-center justify-center">
+          <widgets-loading-spinner v-if="isValidating" class="mr-2" />
+          <span v-else class="material-icons-outlined mr-2 text-xl" :class="isValid ? 'text-success' : 'text-error'">{{ isValid ? 'check_circle_outline' : 'error_outline' }}</span>
+          <p v-if="isValidating" class="text-gray-300 text-base md:text-lg text-center">Checking cron...</p>
+          <p v-else-if="customCronError" class="text-error text-base md:text-lg text-center">{{ customCronError }}</p>
+          <p v-else class="text-success text-base md:text-lg text-center">Valid cron expression</p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectedInterval: 'custom',
+      showAdvancedView: false,
+      selectedHour: 0,
+      selectedMinute: 0,
+      selectedWeekdays: [],
+      cronExpression: '0 0 * * *',
+      customCronExpression: '0 0 * * *',
+      customCronError: '',
+      isValidating: false,
+      validatedCron: null,
+      isValid: true
+    }
+  },
+  computed: {
+    minuteIsValid() {
+      return !(isNaN(this.selectedMinute) || this.selectedMinute === '' || this.selectedMinute < 0 || this.selectedMinute > 59)
+    },
+    hourIsValid() {
+      return !(isNaN(this.selectedHour) || this.selectedHour === '' || this.selectedHour < 0 || this.selectedHour > 23)
+    },
+    description() {
+      if ((this.selectedInterval !== 'custom' || !this.selectedWeekdays.length) && this.selectedInterval !== 'daily') return ''
+
+      if (!this.hourIsValid) {
+        return `<span class="text-error">Invalid hour must be 0-23 | ${this.selectedHour < 0 || this.selectedHour > 23}</span>`
+      }
+      if (!this.minuteIsValid) {
+        return `<span class="text-error">Invalid minute must be 0-59</span>`
+      }
+
+      var description = 'Run every '
+      var weekdayTexts = ''
+      if (this.selectedWeekdays.length === 7 || this.selectedInterval === 'daily') {
+        weekdayTexts = 'day'
+      } else {
+        weekdayTexts = this.selectedWeekdays
+          .map((weekday) => {
+            return this.weekdays.find((w) => w.value === weekday).text
+          })
+          .join(', ')
+      }
+      description += `<span class="font-bold text-white">${weekdayTexts}</span>`
+
+      const hourString = this.selectedHour.toString()
+      const minuteString = this.selectedMinute.toString().padStart(2, '0')
+      description += ` at <span class="font-bold text-white">${hourString}:${minuteString}</span>`
+      return description
+    },
+    intervalOptions() {
+      return [
+        {
+          text: 'Custom daily/weekly',
+          value: 'custom'
+        },
+        {
+          text: 'Every day',
+          value: 'daily'
+        },
+        {
+          text: 'Every 12 hours',
+          value: '0 */12 * * *'
+        },
+        {
+          text: 'Every 6 hours',
+          value: '0 */6 * * *'
+        },
+        {
+          text: 'Every 2 hours',
+          value: '0 */2 * * *'
+        },
+        {
+          text: 'Every hour',
+          value: '0 * * * *'
+        },
+        {
+          text: 'Every 30 minutes',
+          value: '*/30 * * * *'
+        },
+        {
+          text: 'Every 15 minutes',
+          value: '*/15 * * * *'
+        }
+      ]
+    },
+    weekdays() {
+      return [
+        {
+          text: 'Sunday',
+          value: 0
+        },
+        {
+          text: 'Monday',
+          value: 1
+        },
+        {
+          text: 'Tuesday',
+          value: 2
+        },
+        {
+          text: 'Wednesday',
+          value: 3
+        },
+        {
+          text: 'Thursday',
+          value: 4
+        },
+        {
+          text: 'Friday',
+          value: 5
+        },
+        {
+          text: 'Saturday',
+          value: 6
+        }
+      ]
+    }
+  },
+  methods: {
+    checkBlurExpressionInput() {
+      if (!this.showAdvancedView || !this.$refs.customExpressionInput) return false
+      if (this.$refs.customExpressionInput.isFocused) {
+        this.$refs.customExpressionInput.blur()
+        return true
+      }
+      return false
+    },
+    updateCron() {
+      if (this.selectedInterval === 'custom') {
+        if (!this.minuteIsValid || !this.hourIsValid || !this.selectedWeekdays.length) {
+          this.cronExpression = null
+          return
+        }
+        this.selectedWeekdays.sort()
+
+        const daysOfWeekPiece = this.selectedWeekdays.length === 7 ? '*' : this.selectedWeekdays.join(',')
+        this.cronExpression = `${this.selectedMinute} ${this.selectedHour} * * ${daysOfWeekPiece}`
+      } else if (this.selectedInterval === 'daily') {
+        if (!this.minuteIsValid || !this.hourIsValid) {
+          this.cronExpression = null
+          return
+        }
+        this.cronExpression = `${this.selectedMinute} ${this.selectedHour} * * *`
+      } else {
+        this.cronExpression = this.selectedInterval
+      }
+
+      this.customCronExpression = this.cronExpression
+      this.validatedCron = this.cronExpression
+      this.isValid = true
+      this.customCronError = ''
+      this.$emit('input', this.cronExpression)
+    },
+    minuteBlur() {
+      const v = this.selectedMinute
+      if (v === '' || v === null || isNaN(v) || v < 0) {
+        this.selectedMinute = 0
+      } else if (v > 59) {
+        this.selectedMinute = 59
+      } else {
+        this.selectedMinute = Number(v)
+      }
+      this.updateCron()
+    },
+    hourBlur() {
+      const v = this.selectedHour
+      if (v === '' || v === null || isNaN(v) || v < 0) {
+        this.selectedHour = 0
+      } else if (v > 23) {
+        this.selectedHour = 23
+      } else {
+        this.selectedHour = Number(v)
+      }
+      this.updateCron()
+    },
+    async cronExpressionBlur() {
+      this.customCronError = ''
+      if (!this.customCronExpression || this.customCronExpression.split(' ').length !== 5) {
+        this.customCronError = 'Invalid cron expression'
+        this.isValid = false
+        return
+      }
+
+      if (this.customCronExpression !== this.cronExpression) {
+        this.selectedWeekdays = []
+        this.selectedHour = 0
+        this.selectedMinute = 0
+        this.cronExpression = this.customCronExpression
+      }
+
+      if (!this.validatedCron || this.validatedCron !== this.cronExpression) {
+        const validationPayload = await this.validateCron()
+        this.isValid = validationPayload.isValid
+        this.validatedCron = this.cronExpression
+        this.customCronError = validationPayload.error || ''
+      }
+
+      if (this.isValid) {
+        this.$emit('input', this.cronExpression)
+      }
+    },
+    validateCron() {
+      this.isValidating = true
+      return this.$axios
+        .$post('/api/validate-cron', { expression: this.customCronExpression })
+        .then(() => {
+          this.isValidating = false
+          return {
+            isValid: true
+          }
+        })
+        .catch((error) => {
+          console.error('Invalid cron', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.isValidating = false
+          return {
+            isValid: false,
+            error: errMsg || 'Invalid cron expression'
+          }
+        })
+    },
+    init() {
+      if (!this.value) return
+      const pieces = this.value.split(' ')
+      if (pieces.length !== 5) {
+        console.error('Invalid cron expression input', this.value)
+        return
+      }
+
+      const intervalMatch = this.intervalOptions.find((opt) => opt.value === this.value)
+      if (intervalMatch) {
+        this.selectedInterval = this.value
+      } else {
+        var isCustomCron = false
+        if (isNaN(pieces[0]) || isNaN(pieces[1])) {
+          isCustomCron = true
+        } else if (pieces[2] !== '*' || pieces[3] !== '*') {
+          isCustomCron = true
+        } else if (pieces[4] !== '*' && pieces[4].split(',').some((num) => isNaN(num))) {
+          isCustomCron = true
+        }
+
+        if (isCustomCron) {
+          this.showAdvancedView = true
+        } else {
+          if (pieces[4] === '*') this.selectedInterval = 'daily'
+
+          this.selectedWeekdays = pieces[4] === '*' ? [0, 1, 2, 3, 4, 5, 6] : pieces[4].split(',').map((num) => Number(num))
+          this.selectedHour = pieces[1]
+          this.selectedMinute = pieces[0]
+        }
+      }
+      this.cronExpression = this.value
+      this.customCronExpression = this.value
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/widgets/EpisodeSlider.vue

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     cardScaleMulitiplier() {
       return this.height / 192

client/components/widgets/ItemSlider.vue

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     cardScaleMulitiplier() {
       return this.height / 192

client/components/widgets/LibraryIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`h-${size} w-${size}`">
+  <div :class="`h-${size} w-${size} min-w-${size}`">
     <component :is="iconComponentName" />
   </div>
 </template>

client/components/widgets/LoadingSpinner.vue

@@ -147,6 +147,16 @@ export default {
   margin-top: -2px;
   margin-left: -2px;
 }
+.la-ball-spin-clockwise.la-lg {
+  width: 32px;
+  height: 32px;
+}
+.la-ball-spin-clockwise.la-lg > div {
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  margin-left: -4px;
+}
 .la-ball-spin-clockwise.la-2x {
   width: 64px;
   height: 64px;

client/components/widgets/MoreMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" style="top: 0; left: 0">
     <template v-for="(item, index) in items">
-      <div :key="index" class="flex h-7 items-center px-2 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click="clickAction(item.func)">
+      <div :key="index" class="flex h-7 items-center px-2 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.func)">
         <p>{{ item.text }}</p>
       </div>
     </template>

client/components/widgets/PodcastDetailsEdit.vue

@@ -39,10 +39,6 @@
           </div>
         </div>
       </div>
-
-      <div class="flex-grow px-1 pt-6">
-        <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-      </div>
     </form>
   </div>
 </template>
@@ -71,7 +67,6 @@ export default {
         explicit: false,
         language: null
       },
-      autoDownloadEpisodes: false,
       newTags: []
     }
   },
@@ -196,10 +191,6 @@ export default {
         updatePayload.tags = [...this.newTags]
       }
 
-      if (this.media.autoDownloadEpisodes !== this.autoDownloadEpisodes) {
-        updatePayload.autoDownloadEpisodes = !!this.autoDownloadEpisodes
-      }
-
       return {
         updatePayload,
         hasChanges: !!Object.keys(updatePayload).length
@@ -219,7 +210,6 @@ export default {
       this.details.language = this.mediaMetadata.language || ''
       this.details.explicit = !!this.mediaMetadata.explicit
 
-      this.autoDownloadEpisodes = !!this.media.autoDownloadEpisodes
       this.newTags = [...(this.media.tags || [])]
     },
     submitForm() {

client/components/widgets/SeriesSlider.vue

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     bookCoverAspectRatio() {
-      return this.$store.getters['getBookCoverAspectRatio']
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     cardScaleMulitiplier() {
       return this.height / 192

client/layouts/blank.vue

@@ -5,5 +5,10 @@
 </template>
 
 <script>
-export default {}
+export default {
+  mounted() {
+    document.body.classList.remove('app-bar', 'app-bar-and-toolbar')
+    document.body.classList.add('no-bars')
+  }
+}
 </script>