Merge branch 'master' of github.com:advplyr/audiobookshelf

# Conflicts: # client/components/app/BookShelfCategorized.vue # client/components/cards/LazySeriesCard.vue
2026-03-04 06:59:41 +00:00 · 2024-07-09 15:06:08 +02:00 · 2024-07-09 15:06:08 +02:00 · 2896e32f4e
commit 2896e32f4e
parent fbed92dacf 93114b2181
147 changed files with 8627 additions and 5171 deletions
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
+  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
    <!-- Cover size widget -->
    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />

@ -14,28 +14,16 @@
      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
    </div>
    <!-- Alternate plain view -->
-    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
-      <template v-for="(shelf, index) in shelves">
-        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
+      <template v-for="(shelf, index) in supportedShelves">
+        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
        </widgets-item-slider>
-        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-episode-slider>
-        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-series-slider>
-        <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-authors-slider>
-        <widgets-narrators-slider v-else-if="shelf.type === 'narrators'" :key="index + '.'" :items="shelf.entities" :height="100 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-narrators-slider>
      </template>
    </div>
    <!-- Regular bookshelf view -->
    <div v-else class="w-full">
-      <template v-for="(shelf, index) in shelves">
+      <template v-for="(shelf, index) in supportedShelves">
        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" @selectEntity="(payload) => selectEntity(payload, index)" />
      </template>
    </div>
@ -63,6 +51,9 @@ export default {
    }
  },
  computed: {
+    supportedShelves() {
+      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
+    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
@ -90,8 +81,7 @@ export default {
      return this.coverAspectRatio == 1
    },
    sizeMultiplier() {
-      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.bookCoverWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
    },
    selectedMediaItems() {
      return this.$store.state.globals.selectedMediaItems || []
@ -178,7 +168,7 @@ export default {
    },
    async fetchCategories() {
      const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete`)
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share`)
        .then((data) => {
          return data
        })
@ -418,6 +408,36 @@ export default {
        }
      })
    },
+    shareOpen(mediaItemShare) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.media.id === mediaItemShare.mediaItemId) {
+              return {
+                ...ent,
+                mediaItemShare
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
+    shareClosed(mediaItemShare) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.media.id === mediaItemShare.mediaItemId) {
+              return {
+                ...ent,
+                mediaItemShare: null
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
    initListeners() {
      if (this.$root.socket) {
        this.$root.socket.on('user_updated', this.userUpdated)
@ -429,6 +449,8 @@ export default {
        this.$root.socket.on('items_updated', this.libraryItemsUpdated)
        this.$root.socket.on('items_added', this.libraryItemsAdded)
        this.$root.socket.on('episode_added', this.episodeAdded)
+        this.$root.socket.on('share_open', this.shareOpen)
+        this.$root.socket.on('share_closed', this.shareClosed)
      } else {
        console.error('Error socket not initialized')
      }
@ -444,6 +466,8 @@ export default {
        this.$root.socket.off('items_updated', this.libraryItemsUpdated)
        this.$root.socket.off('items_added', this.libraryItemsAdded)
        this.$root.socket.off('episode_added', this.episodeAdded)
+        this.$root.socket.off('share_open', this.shareOpen)
+        this.$root.socket.off('share_closed', this.shareClosed)
      } else {
        console.error('Error socket not initialized')
      }
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@ -1,67 +1,53 @@
 <template>
  <div class="relative">
-    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
-      <div class="w-full h-full pt-6">
+    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll no-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft + 'em' }" @scroll="scrolled">
+      <div class="w-full h-full pt-6e">
        <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="`${entity.id}-${index}`" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
          </template>
        </div>
        <div v-if="shelf.type === 'episode'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card
-              :key="entity.recentEpisode.id"
-              :ref="`shelf-episode-${entity.recentEpisode.id}`"
-              :index="index"
-              :width="bookCoverWidth"
-              :height="bookCoverHeight"
-              :book-cover-aspect-ratio="bookCoverAspectRatio"
-              :book-mount="entity"
-              :continue-listening-shelf="continueListeningShelf"
-              class="relative mx-2"
-              @hook:updated="updatedBookCard"
-              @select="selectItem"
-              @editPodcast="editItem"
-              @edit="editEpisode"
-            />
+            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
          </template>
        </div>
        <div v-if="shelf.type === 'series'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
          </template>
        </div>
        <div v-if="shelf.type === 'tags'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
          </template>
        </div>
        <div v-if="shelf.type === 'authors'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
+            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
          </template>
        </div>
        <div v-if="shelf.type === 'narrators'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-narrator-card :key="entity.name" :width="150" :height="100" :narrator="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" />
+            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2e" />
          </template>
        </div>
      </div>
    </div>
-
-    <div class="absolute text-center categoryPlacard transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
-        <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
+    <div class="relative">
+      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
+        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+          <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </div>
      </div>
-    </div>

-    <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
-
-    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
-      <span class="material-icons text-6xl text-white">chevron_left</span>
+      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
    </div>
-    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
-      <span class="material-icons text-6xl text-white">chevron_right</span>
+    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
+    </div>
+    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
    </div>
  </div>
 </template>
@ -74,9 +60,6 @@ export default {
      type: Object,
      default: () => {}
    },
-    sizeMultiplier: Number,
-    bookCoverWidth: Number,
-    bookCoverAspectRatio: Number,
    continueListeningShelf: Boolean
  },
  data() {
@ -89,12 +72,8 @@ export default {
    }
  },
  computed: {
-    bookCoverHeight() {
-      return this.bookCoverWidth * this.bookCoverAspectRatio
-    },
-    shelfHeight() {
-      if (this.shelf.type === 'narrators') return 148
-      return this.bookCoverHeight + 48
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
    },
    paddingLeft() {
      if (window.innerWidth < 768) return 1
@ -218,13 +197,13 @@ export default {
 }

 .book-shelf-arrow-right {
-  height: calc(100% - 24px);
+  height: calc(100% - 1.5em);
  background: rgb(48, 48, 48);
  background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
 .book-shelf-arrow-left {
-  height: calc(100% - 24px);
+  height: calc(100% - 1.5em);
  background: rgb(48, 48, 48);
  background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
-</style>
+</style>
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -1,8 +1,8 @@
 <template>
-  <div id="bookshelf" class="w-full overflow-y-auto">
+  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
    <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
      </div>
    </template>

@ -49,10 +49,9 @@ export default {
      entityIndexesMounted: [],
      entityComponentRefs: {},
      currentBookWidth: 0,
-      pageLoadQueue: [],
      isFetchingEntities: false,
      scrollTimeout: null,
-      booksPerFetch: 100,
+      booksPerFetch: 0,
      totalShelves: 0,
      bookshelfMarginLeft: 0,
      isSelectionMode: false,
@ -63,7 +62,10 @@ export default {
      resizeTimeout: null,
      mountWindowWidth: 0,
      lastItemIndexSelected: -1,
-      tempIsScanning: false
+      tempIsScanning: false,
+      cardWidth: 0,
+      cardHeight: 0,
+      resizeObserver: null
    }
  },
  watch: {
@ -160,52 +162,40 @@ export default {
      return this.$store.getters['libraries/getCurrentLibraryName']
    },
    bookWidth() {
-      const coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
-      return coverSize
+      return this.cardWidth
    },
    bookHeight() {
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
-      return this.bookWidth * 1.6
+      return this.cardHeight
    },
    shelfPadding() {
-      if (this.bookshelfWidth < 640) return 32
-      return 64
+      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
+      return 64 * this.sizeMultiplier
    },
    totalPadding() {
      return this.shelfPadding * 2
    },
    entityWidth() {
-      if (this.entityName === 'series' || this.entityName === 'collections') {
-        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
-        return this.bookWidth * 2
-      }
-      return this.bookWidth
+      return this.cardWidth
    },
    entityHeight() {
-      return this.bookHeight
+      return this.cardHeight
    },
-    shelfDividerHeightIndex() {
-      return 6
+    shelfPaddingHeight() {
+      return 16
    },
    shelfHeight() {
-      if (this.isAlternativeBookshelfView) {
-        const isItemEntity = this.entityName === 'series-books' || this.entityName === 'items'
-        const extraTitleSpace = isItemEntity ? 80 : this.entityName === 'albums' ? 60 : 40
-        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
-      }
-      return this.entityHeight + 40
+      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
+      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
    },
    totalEntityCardWidth() {
      // Includes margin
-      return this.entityWidth + 24
+      return this.entityWidth + 24 * this.sizeMultiplier
    },
    selectedMediaItems() {
      return this.$store.state.globals.selectedMediaItems || []
    },
    sizeMultiplier() {
-      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.entityWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
    },
    streamLibraryItem() {
      return this.$store.state.streamLibraryItem
@ -322,7 +312,7 @@ export default {

      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete,share`

      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
        console.error('failed to fetch items', error)
@ -436,10 +426,14 @@ export default {
    rebuild() {
      this.initSizeData()

-      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
      this.entityIndexesMounted = []
      for (let i = 0; i < lastBookIndex; i++) {
        this.entityIndexesMounted.push(i)
+        if (!this.entities[i]) {
+          const page = Math.floor(i / this.booksPerFetch)
+          this.loadPage(page)
+        }
      }
      var bookshelfEl = document.getElementById('bookshelf')
      if (bookshelfEl) {
@ -501,7 +495,8 @@ export default {
        this.resetEntities()
      }
    },
-    settingsUpdated(settings) {
+    async settingsUpdated(settings) {
+      await this.cardsHelpers.setCardSize()
      const wasUpdated = this.checkUpdateSearchParams()
      if (wasUpdated) {
        this.resetEntities()
@ -606,6 +601,44 @@ export default {
        this.executeRebuild()
      }
    },
+    shareOpen(mediaItemShare) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
+        if (indexOf >= 0) {
+          if (this.entityComponentRefs[indexOf]) {
+            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
+            libraryItem.mediaItemShare = mediaItemShare
+            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
+          }
+        }
+      }
+    },
+    shareClosed(mediaItemShare) {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
+        if (indexOf >= 0) {
+          if (this.entityComponentRefs[indexOf]) {
+            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
+            libraryItem.mediaItemShare = null
+            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
+          }
+        }
+      }
+    },
+    updatePagesLoaded() {
+      let numPages = Math.ceil(this.totalEntities / this.booksPerFetch)
+      for (let page = 0; page < numPages; page++) {
+        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
+        this.pagesLoaded[page] = true
+        for (let i = 0; i < numEntities; i++) {
+          const index = page * this.booksPerFetch + i
+          if (!this.entities[index]) {
+            this.pagesLoaded[page] = false
+            break
+          }
+        }
+      }
+    },
    initSizeData(_bookshelf) {
      var bookshelf = _bookshelf || document.getElementById('bookshelf')
      if (!bookshelf) {
@ -622,6 +655,13 @@ export default {
      this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
      this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
      this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
+      const booksPerFetch = this.entitiesPerShelf * this.shelvesPerPage
+      if (booksPerFetch !== this.booksPerFetch) {
+        this.booksPerFetch = booksPerFetch
+        if (this.totalEntities) {
+          this.updatePagesLoaded()
+        }
+      }

      this.currentBookWidth = this.bookWidth
      if (this.totalEntities) {
@ -630,13 +670,8 @@ export default {
      return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
    },
    async init(bookshelf) {
-      if (this.entityName === 'series') {
-        this.booksPerFetch = 50
-      } else {
-        this.booksPerFetch = 100
-      }
-      this.checkUpdateSearchParams()
      this.initSizeData(bookshelf)
+      this.checkUpdateSearchParams()

      this.pagesLoaded[0] = true
      await this.fetchEntites(0)
@ -692,6 +727,8 @@ export default {
        this.$root.socket.on('playlist_added', this.playlistAdded)
        this.$root.socket.on('playlist_updated', this.playlistUpdated)
        this.$root.socket.on('playlist_removed', this.playlistRemoved)
+        this.$root.socket.on('share_open', this.shareOpen)
+        this.$root.socket.on('share_closed', this.shareClosed)
      } else {
        console.error('Bookshelf - Socket not initialized')
      }
@ -719,6 +756,8 @@ export default {
        this.$root.socket.off('playlist_added', this.playlistAdded)
        this.$root.socket.off('playlist_updated', this.playlistUpdated)
        this.$root.socket.off('playlist_removed', this.playlistRemoved)
+        this.$root.socket.off('share_open', this.shareOpen)
+        this.$root.socket.off('share_closed', this.shareClosed)
      } else {
        console.error('Bookshelf - Socket not initialized')
      }
@ -743,7 +782,8 @@ export default {
        })
    }
  },
-  mounted() {
+  async mounted() {
+    await this.cardsHelpers.setCardSize()
    this.initListeners()

    this.routeFullPath = window.location.pathname + (window.location.search || '')
@ -778,6 +818,6 @@ export default {
 .bookshelfDivider {
  background: rgb(149, 119, 90);
  background: var(--bookshelf-divider-bg);
-  box-shadow: 2px 14px 8px #111111aa;
+  box-shadow: 0.125em 0.875em 0.5em #111111aa;
 }
 </style>
--- a/client/components/app/MediaPlayerContainer.vue
+++ b/client/components/app/MediaPlayerContainer.vue
@ -5,23 +5,21 @@
      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
    </div>
    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0">
+      <div class="min-w-0 w-full">
        <div class="flex items-center">
          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
            {{ title }}
          </nuxt-link>
          <widgets-explicit-indicator v-if="isExplicit" />
        </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
          <span class="material-icons text-sm">person</span>
-          <div class="flex items-center">
-            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
-            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
-            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-            </div>
-            <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
+          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+          <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
+            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
          </div>
+          <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
        </div>

        <div class="text-gray-400 flex items-center">
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@ -121,7 +121,7 @@
      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
    </div>

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

@ -219,9 +219,6 @@ export default {
    githubTagUrl() {
      return this.versionData.githubTagUrl
    },
-    currentVersionChangelog() {
-      return this.versionData.currentVersionChangelog || 'No Changelog Available'
-    },
    streamLibraryItem() {
      return this.$store.state.streamLibraryItem
    },
@ -245,4 +242,4 @@ export default {
 #siderail-buttons-container.player-open {
  max-height: calc(100vh - 64px - 48px - 160px);
 }
-</style>
+</style>
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@ -1,38 +1,40 @@
 <template>
-  <nuxt-link :to="`/author/${author?.id}`">
-    <div cy-id="card" :style="{ width: width + 'px'}" @mouseover="mouseover" @mouseleave="mouseleave">
-      <div cy-id="imageArea" :style="{ height: height + 'px' }" class=" bg-primary box-shadow-book rounded-md relative overflow-hidden">
-        <!-- Image or placeholder -->
-        <covers-author-image :author="author"/>
+  <div :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+    <nuxt-link :to="`/author/${author.id}`">
+      <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
+        <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+          <!-- Image or placeholder -->
+          <covers-author-image :author="author" />

-        <!-- Author name & num books overlay -->
-        <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
-        </div>
+          <!-- Author name & num books overlay -->
+          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
+          </div>

-        <!-- Search icon btn -->
-        <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
-          <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
-            <span class="material-icons text-lg">search</span>
-          </ui-tooltip>
-        </div>
-        <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
-          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-            <span class="material-icons text-lg">edit</span>
-          </ui-tooltip>
-        </div>
+          <!-- Search icon btn -->
+          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+            <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">search</span>
+            </ui-tooltip>
+          </div>
+          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+            <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">edit</span>
+            </ui-tooltip>
+          </div>

-        <!-- Loading spinner -->
-        <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
-          <widgets-loading-spinner size="" />
+          <!-- Loading spinner -->
+          <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+            <widgets-loading-spinner size="" />
+          </div>
+        </div>
+        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
+          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
        </div>
      </div>
-      <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1 px-2">
-          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-      </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>

 <script>
@ -43,12 +45,14 @@ export default {
      default: () => {}
    },
    width: Number,
-    height: Number,
-    sizeMultiplier: {
+    height: {
      type: Number,
-      default: 1
+      default: 192
    },
-    nameBelow: Boolean
+    nameBelow: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
@ -57,6 +61,12 @@ export default {
    }
  },
  computed: {
+    cardWidth() {
+      return this.width || this.cardHeight * 0.8
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
    userToken() {
      return this.$store.getters['user/getToken']
    },
@ -83,6 +93,9 @@ export default {
    },
    libraryProvider() {
      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
    }
  },
  methods: {
@ -128,4 +141,4 @@ export default {
    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
  }
 }
-</script>
+</script>
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@ -1,15 +1,15 @@
 <template>
  <div class="relative">
-    <div class="rounded-sm h-full relative" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
+    <div class="rounded-sm h-full relative" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
      <nuxt-link :to="groupTo" class="cursor-pointer">
        <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'">
-          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="cardWidth" :height="cardHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />

          <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
            <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
          </div>

-          <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
+          <div class="absolute z-10 top-1.5e right-1.5e rounded-md leading-3e p-1e font-semibold text-white flex items-center justify-center" :style="{ fontSize: 0.8 + 'em' }" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
        </div>
      </nuxt-link>
    </div>
@ -24,8 +24,10 @@ export default {
      default: () => null
    },
    width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number
+    height: {
+      type: Number,
+      default: 192
+    }
  },
  data() {
    return {
@ -33,6 +35,15 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.cardHeight * 2
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
@ -46,8 +57,7 @@ export default {
      return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
    },
    sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.$store.getters['user/getSizeMultiplier']
    },
    bookItems() {
      return this._group.books || []
@ -78,4 +88,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazyAlbumCard.vue
+++ b/client/components/cards/LazyAlbumCard.vue
@ -1,18 +1,22 @@
 <template>
-  <div ref="card" :id="`album-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-preview-cover ref="cover" :src="coverSrc" :width="width" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    </div>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+  <div ref="card" :id="`album-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-preview-cover ref="cover" :src="coverSrc" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
      </div>
    </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ artist || '&nbsp;' }}</p>
+
+    <div class="relative w-full">
+      <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+          <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+        </div>
+      </div>
+      <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8e h-8e py-1e rounded-md text-center">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+        <p class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ artist || '&nbsp;' }}</p>
+      </div>
    </div>
  </div>
 </template>
@ -22,8 +26,10 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
    bookshelfView: {
      type: Number,
      default: 0
@ -42,6 +48,29 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    /*
+    cardHeight() {
+      return this.coverHeight + this.bottomTextHeight
+    },
+    bottomTextHeight() {
+      if (!this.isAlternativeBookshelfView) return 0
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = this.labelFontSize * baseHeight
+      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
+      return titleHeight + paddingHeight
+    },
+    */
    coverSrc() {
      const config = this.$config || this.$nuxt.$config
      if (!this.album || !this.album.libraryItemId) return `${config.routerBasePath}/book_placeholder.jpg`
@ -49,11 +78,10 @@ export default {
    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
    },
    sizeMultiplier() {
-      const baseSize = this.bookCoverAspectRatio === 1 ? 192 : 120
-      return this.width / baseSize
+      return this.store.getters['user/getSizeMultiplier']
    },
    title() {
      return this.album ? this.album.title : ''
@ -111,4 +139,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -1,125 +1,139 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <!-- When cover image does not fill -->
-    <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
-      <div class="absolute cover-bg" ref="coverBg" />
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
+      <!-- When cover image does not fill -->
+      <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+
+      <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
+        <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+      </div>
+      <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+      </div>
+
+      <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
+        </div>
+
+        <!-- Cover Image -->
+        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+
+        <!-- Placeholder Cover Title & Author -->
+        <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em' }">
+          <div>
+            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
+          </div>
+        </div>
+        <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
+          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+        </div>
+
+        <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+        </div>
+        <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #cd9d49dd">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+        </div>
+
+        <!-- No progress shown for podcasts (unless showing podcast episode) -->
+        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
+
+        <!-- Overlay is not shown if collapsing series in library -->
+        <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
+          <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'em' }">play_circle_filled</span>
+            </div>
+          </div>
+
+          <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'em' }">auto_stories</span>
+            </div>
+          </div>
+
+          <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 + 'em' }" @click.stop.prevent="editClick">
+            <span class="material-icons" :style="{ fontSize: 1 + 'em' }">edit</span>
+          </div>
+
+          <!-- Radio button -->
+          <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 + 'em', left: 0.375 + 'em' }" @click.stop.prevent="selectBtnClick">
+            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+          </div>
+
+          <!-- More Menu Icon -->
+          <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 + 'em', right: 0.375 + 'em' }" @click.stop.prevent="clickShowMore">
+            <span class="material-icons" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
+          </div>
+
+          <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 + 'em', left: 0.375 + 'em' }">
+            <span class="text-white/80" :style="{ fontSize: 0.8 + 'em' }">{{ ebookFormat }}</span>
+          </div>
+        </div>
+
+        <!-- Processing/loading spinner overlay -->
+        <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+          <widgets-loading-spinner size="la-lg" />
+        </div>
+
+        <!-- Series name overlay -->
+        <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: 1 + 'em' }">
+          <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 + 'em' }">{{ seriesName }}</p>
+        </div>
+
+        <!-- Error widget -->
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
+          <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+            <span class="material-icons text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
+          </div>
+        </ui-tooltip>
+
+        <!-- rss feed icon -->
+        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
+          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+        </div>
+        <!-- media item shared icon -->
+        <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
+          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">public</span>
+        </div>
+
+        <!-- Series sequence -->
+        <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequence }}</p>
+        </div>
+
+        <!-- Podcast Episode # -->
+        <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">
+            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+          </p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodesIncomplete }}</p>
+        </div>
+      </div>
    </div>

    <!-- Alternative bookshelf title/author/sort -->
-    <div cy-id="detailBottom" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
-      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
+      <div :style="{ fontSize: 0.9 + 'em' }">
        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
          <p cy-id="title" ref="displayTitle" role="heading" aria-level="3" class="truncate">{{ displayTitle }}</p>
          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
        </ui-tooltip>
      </div>
-      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-    </div>
-
-    <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
-    </div>
-    <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
-    </div>
-
-    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-      <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
-      </div>
-
-      <!-- Cover Image -->
-      <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
-
-      <!-- Placeholder Cover Title & Author -->
-      <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
-        <div>
-          <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
-        </div>
-      </div>
-      <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
-      </div>
-    </div>
-
-    <!-- No progress shown for podcasts (unless showing podcast episode) -->
-    <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-    <!-- Overlay is not shown if collapsing series in library -->
-    <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
-      <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
-        </div>
-      </div>
-
-      <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
-        </div>
-      </div>
-
-      <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
-        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
-      </div>
-
-      <!-- Radio button -->
-      <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-      </div>
-
-      <!-- More Menu Icon -->
-      <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
-        <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
-      </div>
-
-      <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }">
-        <span class="text-white/80" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ ebookFormat }}</span>
-      </div>
-    </div>
-
-    <!-- Processing/loading spinner overlay -->
-    <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
-      <widgets-loading-spinner size="la-lg" />
-    </div>
-
-    <!-- Series name overlay -->
-    <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
-      <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ seriesName }}</p>
-    </div>
-
-    <!-- Error widget -->
-    <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
-      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-        <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-      </div>
-    </ui-tooltip>
-
-    <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
-      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
-    </div>
-
-    <!-- Series sequence -->
-    <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
-    </div>
-
-    <!-- Podcast Episode # -->
-    <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
-        Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
-      </p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
+      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
    </div>
  </div>
 </template>
@ -131,15 +145,11 @@ import MoreMenu from '@/components/widgets/MoreMenu'
 export default {
  props: {
    index: Number,
-    width: {
-      type: Number,
-      default: 120
-    },
+    width: Number,
    height: {
      type: Number,
      default: 192
    },
-    bookCoverAspectRatio: Number,
    bookshelfView: Number,
    bookMount: {
      // Book can be passed as prop or set with setEntity()
@ -174,6 +184,39 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      return this.width || this.coverHeight / this.bookCoverAspectRatio
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    cardWidth() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverWidth
+    },
+    /*
+    cardHeight() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverHeight + this.detailsHeight
+    },
+    detailsHeight() {
+      if (!this.isAlternativeBookshelfView) return 0
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = 0.9 * baseHeight
+      const line2Height = 0.8 * baseHeight
+      const line3Height = this.displaySortLine ? 0.8 * baseHeight : 0
+      const marginHeight = 8 * 2 * this.sizeMultiplier // py-2
+      return titleHeight + line2Height + line3Height + marginHeight
+    },
+    */
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
    dateFormat() {
      return this.store.state.serverSettings.dateFormat
    },
@ -273,10 +316,6 @@ export default {
    squareAspectRatio() {
      return this.bookCoverAspectRatio === 1
    },
-    sizeMultiplier() {
-      const baseSize = this.squareAspectRatio ? 192 : 120
-      return this.width / baseSize
-    },
    title() {
      return this.mediaMetadata.title || ''
    },
@ -298,7 +337,7 @@ export default {
      if (this.recentEpisode) return this.recentEpisode.title
      const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
      if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
-      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix || '\u00A0' : this.title || '\u00A0'
    },
    displayLineTwo() {
      if (this.recentEpisode) return this.title
@ -319,7 +358,10 @@ export default {
      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
-      if (this.orderBy === 'media.metadata.publishedYear' && this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
+      if (this.orderBy === 'media.metadata.publishedYear') {
+        if (this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
+        return '\u00A0'
+      }
      return null
    },
    episodeProgress() {
@ -486,6 +528,12 @@ export default {
            func: 'openPlaylists',
            text: this.$strings.LabelAddToPlaylist
          })
+          if (this.userIsAdminOrUp) {
+            items.push({
+              func: 'openShare',
+              text: this.$strings.LabelShare
+            })
+          }
        }
        if (this.ebookFormat && this.store.state.libraries.ereaderDevices?.length) {
          items.push({
@ -557,16 +605,16 @@ export default {
      return this.$root.socket || this.$nuxt.$root.socket
    },
    titleFontSize() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
    },
    authorFontSize() {
-      return 0.6 * this.sizeMultiplier
+      return 0.6
    },
    placeholderCoverPadding() {
-      return 0.8 * this.sizeMultiplier
+      return 0.8
    },
    authorBottom() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
    },
    titleCleaned() {
      if (!this.title) return ''
@ -590,14 +638,12 @@ export default {
      const constants = this.$constants || this.$nuxt.$constants
      return this.bookshelfView === constants.BookshelfView.AUTHOR
    },
-    titleDisplayBottomOffset() {
-      if (!this.isAlternativeBookshelfView && !this.isAuthorBookshelfView) return 0
-      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
-      return 4.25 * this.sizeMultiplier
-    },
    rssFeed() {
      if (this.booksInSeries) return null
      return this._libraryItem.rssFeed || null
+    },
+    mediaItemShare() {
+      return this._libraryItem.mediaItemShare || null
    }
  },
  methods: {
@ -840,6 +886,10 @@ export default {
      this.store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.recentEpisode }])
      this.store.commit('globals/setShowPlaylistsModal', true)
    },
+    openShare() {
+      this.store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.store.commit('globals/setShareModal', this.mediaItemShare)
+    },
    deleteLibraryItem() {
      const payload = {
        message: this.$strings.MessageConfirmDeleteLibraryItem,
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@ -1,24 +1,26 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    </div>
-    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
-        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
      </div>
+      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
+      </div>
+
+      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
    </div>

-    <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
      </div>
    </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
    </div>
  </div>
 </template>
@ -28,8 +30,10 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
    bookshelfView: {
      type: Number,
      default: 0
@ -49,13 +53,33 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    cardHeight() {
+      return this.coverHeight + this.bottomTextHeight
+    },
+    bottomTextHeight() {
+      if (!this.isAlternativeBookshelfView) return 0 // bottom text appears on top of the divider
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = this.labelFontSize * baseHeight
+      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
+      return titleHeight + paddingHeight
+    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
    },
    sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.store.getters['user/getSizeMultiplier']
    },
    title() {
      return this.collection ? this.collection.name : ''
@ -119,4 +143,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@ -1,21 +1,24 @@
 <template>
-  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
-    </div>
-    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
-        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-playlist-cover ref="cover" :items="items" :width="cardWidth" :height="coverHeight" />
+      </div>
+      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
      </div>
    </div>
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6e left-0 right-0 mx-auto h-6e rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
      </div>
    </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
    </div>
  </div>
 </template>
@ -25,8 +28,10 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
    bookshelfView: {
      type: Number,
      default: 0
@ -45,13 +50,21 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
    },
    sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6)
-      return this.width / 120
+      return this.store.getters['user/getSizeMultiplier']
    },
    title() {
      return this.playlist ? this.playlist.name : ''
@ -112,4 +125,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -1,28 +1,32 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
-      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div cy-id="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+        <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+
+      <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
+      </div>
+
+      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+
+      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
+        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
+      </div>
+
+      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
    </div>

-    <div cy-id="seriesLengthMarker" class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
-
-    <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
-
-    <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
-    </div>
-
-    <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
-
-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }" role="heading" aria-level="3">{{ displayTitle }}</p>
      </div>
    </div>
-    <div cy-id="detailBottomText" v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
+      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }" role="heading" aria-level="3">{{ displayTitle }}</p>
+      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
    </div>
  </div>
 </template>
@ -32,13 +36,14 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
    bookshelfView: {
      type: Number,
      default: 0
    },
-    isCategorized: Boolean,
    seriesMount: {
      type: Object,
      default: () => null
@ -56,16 +61,24 @@ export default {
    }
  },
  computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
    dateFormat() {
      return this.store.state.serverSettings.dateFormat
    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
    },
    sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.store.getters['user/getSizeMultiplier']
    },
    seriesId() {
      return this.series ? this.series.id : ''
@ -78,7 +91,7 @@ export default {
    },
    displayTitle() {
      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
-      return this.title
+      return this.title || '\u00A0'
    },
    displaySortLine() {
      switch (this.orderBy) {
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@ -1,17 +1,19 @@
 <template>
-  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-    <div cy-id="card" :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
-        <span class="material-icons-outlined text-[10rem]">record_voice_over</span>
-      </div>
+  <div>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
+      <div cy-id="card" :style="{ width: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
+          <span class="material-icons-outlined text-[10em]">record_voice_over</span>
+        </div>

-      <!-- Narrator name & num books overlay -->
-      <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-        <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-        <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        <!-- Narrator name & num books overlay -->
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+          <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+          <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        </div>
      </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>

 <script>
@ -21,23 +23,22 @@ export default {
      type: Object,
      default: () => {}
    },
-    width:  {
-      type: Number,
-      default: 150
-    },
-    height: { 
+    width: Number,
+    height: {
      type: Number,
      default: 100
-    },
-    sizeMultiplier: {
-      type: Number,
-      default: 1
    }
  },
  data() {
    return {}
  },
  computed: {
+    cardWidth() {
+      return this.cardHeight * 1.5
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
    name() {
      return this.narrator?.name || ''
    },
@ -49,8 +50,11 @@ export default {
    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
    }
  },
  methods: {}
 }
-</script>
+</script>
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@ -89,6 +89,9 @@ export default {
        this.$emit('input', val)
      }
    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
    libraryMediaType() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType']
    },
@ -148,7 +151,7 @@ export default {
      ]
    },
    bookItems() {
-      return [
+      const items = [
        {
          text: this.$strings.LabelAll,
          value: 'all'
@ -231,6 +234,14 @@ export default {
          sublist: false
        }
      ]
+      if (this.userIsAdminOrUp) {
+        items.push({
+          text: this.$strings.LabelShareOpen,
+          value: 'share-open',
+          sublist: false
+        })
+      }
+      return items
    },
    podcastItems() {
      return [
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@ -80,8 +80,8 @@
          </div>
        </div>
        <div class="w-full md:w-1/3">
-          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
+          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>

          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
          <p class="mb-1">{{ playMethodName }}</p>
@ -99,8 +99,8 @@
      </div>

      <div class="flex items-center">
-        <ui-btn v-if="!isOpenSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-else small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
+        <ui-btn v-if="!isOpenSession && !isMediaItemShareSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-else-if="!isMediaItemShareSession" small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
      </div>
    </div>
  </modals-modal>
@ -166,6 +166,9 @@ export default {
    },
    isOpenSession() {
      return !!this._session.open
+    },
+    isMediaItemShareSession() {
+      return this._session.mediaPlayer === 'web-share'
    }
  },
  methods: {
--- a/client/components/modals/ShareModal.vue
+++ b/client/components/modals/ShareModal.vue
@ -0,0 +1,204 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="share" :width="600" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="text-3xl text-white truncate">{{ $strings.LabelShare }}</p>
+      </div>
+    </template>
+    <div class="px-6 py-8 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="absolute top-0 right-0 p-4">
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/media-item-shares" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+      </div>
+      <template v-if="currentShare">
+        <div class="w-full py-2">
+          <label class="px-1 text-sm font-semibold block">{{ $strings.LabelShareURL }}</label>
+          <ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
+        </div>
+        <div class="w-full py-2 px-1">
+          <p v-if="currentShare.expiresAt" class="text-base">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
+          <p v-else>{{ $strings.LabelPermanent }}</p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
+          <div class="w-full sm:w-48">
+            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelSlug }}</label>
+            <ui-text-input v-model="newShareSlug" class="text-base h-10" />
+          </div>
+          <div class="flex-grow" />
+          <div class="w-full sm:w-80">
+            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelDuration }}</label>
+            <div class="inline-flex items-center space-x-2">
+              <div>
+                <ui-icon-btn icon="remove" :size="10" @click="clickMinus" />
+              </div>
+              <ui-text-input v-model="newShareDuration" type="number" text-center no-spinner class="text-center max-w-12 min-w-12 h-10 text-base" />
+              <div>
+                <ui-icon-btn icon="add" :size="10" @click="clickPlus" />
+              </div>
+              <div class="w-28">
+                <ui-dropdown v-model="shareDurationUnit" :items="durationUnits" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareURLWillBe', [demoShareUrl])" />
+        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareExpirationWillBe', [expirationDateString])" />
+      </template>
+      <div class="flex items-center pt-6">
+        <div class="flex-grow" />
+        <ui-btn v-if="currentShare" color="error" small @click="deleteShare">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-if="!currentShare" color="success" small @click="openShare">{{ $strings.ButtonShare }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      processing: false,
+      newShareSlug: '',
+      newShareDuration: 0,
+      currentShare: null,
+      shareDurationUnit: 'minutes',
+      durationUnits: [
+        {
+          text: this.$strings.LabelMinutes,
+          value: 'minutes'
+        },
+        {
+          text: this.$strings.LabelHours,
+          value: 'hours'
+        },
+        {
+          text: this.$strings.LabelDays,
+          value: 'days'
+        }
+      ]
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showShareModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowShareModal', val)
+      }
+    },
+    mediaItemShare() {
+      return this.$store.state.globals.selectedMediaItemShare
+    },
+    libraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    demoShareUrl() {
+      return `${window.origin}/share/${this.newShareSlug}`
+    },
+    currentShareUrl() {
+      if (!this.currentShare) return ''
+      return `${window.origin}/share/${this.currentShare.slug}`
+    },
+    currentShareTimeRemaining() {
+      if (!this.currentShare) return 'Error'
+      if (!this.currentShare.expiresAt) return this.$strings.LabelPermanent
+      const msRemaining = new Date(this.currentShare.expiresAt).valueOf() - Date.now()
+      if (msRemaining <= 0) return 'Expired'
+      return this.$elapsedPrettyExtended(msRemaining / 1000, true, false)
+    },
+    expireDurationSeconds() {
+      let shareDuration = Number(this.newShareDuration)
+      if (!shareDuration || isNaN(shareDuration)) return 0
+      return this.newShareDuration * (this.shareDurationUnit === 'minutes' ? 60 : this.shareDurationUnit === 'hours' ? 3600 : 86400)
+    },
+    expirationDateString() {
+      if (!this.expireDurationSeconds) return this.$strings.LabelPermanent
+      const dateMs = Date.now() + this.expireDurationSeconds * 1000
+      return this.$formatDatetime(dateMs, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat)
+    }
+  },
+  methods: {
+    clickPlus() {
+      this.newShareDuration++
+    },
+    clickMinus() {
+      if (this.newShareDuration > 0) {
+        this.newShareDuration--
+      }
+    },
+    deleteShare() {
+      if (!this.currentShare) return
+      this.processing = true
+      this.$axios
+        .$delete(`/api/share/mediaitem/${this.currentShare.id}`)
+        .then(() => {
+          this.currentShare = null
+          this.$emit('removed')
+        })
+        .catch((error) => {
+          console.error('deleteShare', error)
+          let errorMsg = error.response?.data || 'Failed to delete share'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    openShare() {
+      if (!this.newShareSlug) {
+        this.$toast.error('Slug is required')
+        return
+      }
+      const payload = {
+        slug: this.newShareSlug,
+        mediaItemType: 'book',
+        mediaItemId: this.libraryItem.media.id,
+        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0
+      }
+      this.processing = true
+      this.$axios
+        .$post(`/api/share/mediaitem`, payload)
+        .then((data) => {
+          this.currentShare = data
+          this.$emit('opened', data)
+        })
+        .catch((error) => {
+          console.error('openShare', error)
+          let errorMsg = error.response?.data || 'Failed to share item'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      this.newShareSlug = this.$randomId(10)
+      if (this.mediaItemShare) {
+        this.currentShare = { ...this.mediaItemShare }
+      } else {
+        this.currentShare = null
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/modals/changelog/ViewModal.vue
+++ b/client/components/modals/changelog/ViewModal.vue
@ -6,7 +6,9 @@
      </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>
+      <p class="text-xl font-bold pb-4">
+        Changelog <a :href="currentTagUrl" target="_blank" class="hover:underline">v{{ currentVersionNumber }}</a> ({{ currentVersionPubDate }})
+      </p>
      <div class="custom-text" v-html="compiledMarkedown" />
    </div>
  </modals-modal>
@ -18,17 +20,9 @@ import { marked } from '@/static/libs/marked/index.js'
 export default {
  props: {
    value: Boolean,
-    changelog: String,
-    currentVersion: String
-  },
-  watch: {
-    show: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
+    versionData: {
+      type: Object,
+      default: () => {}
    }
  },
  computed: {
@ -40,16 +34,27 @@ export default {
        this.$emit('input', val)
      }
    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    changelog() {
+      return this.versionData?.currentVersionChangelog || 'No Changelog Available'
+    },
    compiledMarkedown() {
      return marked.parse(this.changelog, { gfm: true, breaks: true })
    },
+    currentVersionPubDate() {
+      if (!this.versionData?.currentVersionPubDate) return 'Unknown release date'
+      return `${this.$formatDate(this.versionData.currentVersionPubDate, this.dateFormat)}`
+    },
+    currentTagUrl() {
+      return this.versionData?.currentTagUrl
+    },
    currentVersionNumber() {
-      return this.currentVersion
+      return this.$config.version
    }
  },
-  methods: {
-    init() {}
-  },
+  methods: {},
  mounted() {}
 }
 </script>
@ -57,7 +62,7 @@ export default {
 <style scoped>
 /*
 1. we need to manually define styles to apply to the parsed markdown elements,
-since we don't have access to the actual elements in this component 
+since we don't have access to the actual elements in this component

 2. v-deep allows these to take effect on the content passed in to the v-html in the div above
 */
@ -70,4 +75,4 @@ since we don't have access to the actual elements in this component
 .custom-text ::v-deep > ul {
  @apply list-disc list-inside pb-4;
 }
-</style>
+</style>
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@ -2,11 +2,8 @@
  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
    <p class="text-xl font-semibold mb-2">{{ $strings.HeaderAudiobookTools }}</p>

-    <!-- alert for windows install -->
-    <widgets-alert v-if="isWindowsInstall" type="warning" class="my-8 text-base">Not supported for the Windows install yet</widgets-alert>
-
    <!-- Merge to m4b -->
-    <div v-if="showM4bDownload && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
+    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
      <div class="flex flex-wrap items-center">
        <div>
          <p class="text-lg">{{ $strings.LabelToolsMakeM4b }}</p>
@ -23,7 +20,7 @@
    </div>

    <!-- Embed Metadata -->
-    <div v-if="mediaTracks.length && !isWindowsInstall" class="w-full border border-black-200 p-4 my-8">
+    <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
      <div class="flex items-center">
        <div>
          <p class="text-lg">{{ $strings.LabelToolsEmbedMetadata }}</p>
@ -111,12 +108,6 @@ export default {
    },
    isEncodeTaskRunning() {
      return this.encodeTask && !this.encodeTask?.isFinished
-    },
-    isWindowsInstall() {
-      return this.Source == 'windows'
-    },
-    Source() {
-      return this.$store.state.Source
    }
  },
  methods: {
@ -141,4 +132,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/player/PlayerUi.vue
+++ b/client/components/player/PlayerUi.vue
@ -8,7 +8,7 @@
          <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
        </ui-tooltip>

-        <ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
+        <ui-tooltip v-if="!hideSleepTimer" direction="top" :text="$strings.LabelSleepTimer">
          <button :aria-label="$strings.LabelSleepTimer" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
            <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
            <div v-else class="flex items-center">
@ -18,7 +18,7 @@
          </button>
        </ui-tooltip>

-        <ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
+        <ui-tooltip v-if="!isPodcast && !hideBookmarks" direction="top" :text="$strings.LabelViewBookmarks">
          <button :aria-label="$strings.LabelViewBookmarks" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
            <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
          </button>
@ -52,7 +52,7 @@
      <p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
      <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
      <div class="flex-grow" />
-      <p class="text-xs sm:text-sm text-gray-300 pt-0.5">
+      <p class="text-xs sm:text-sm text-gray-300 pt-0.5 px-2 truncate">
        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
      </p>
      <div class="flex-grow" />
@ -78,7 +78,9 @@ export default {
    },
    sleepTimerSet: Boolean,
    sleepTimerRemaining: Number,
-    isPodcast: Boolean
+    isPodcast: Boolean,
+    hideBookmarks: Boolean,
+    hideSleepTimer: Boolean
  },
  data() {
    return {
@ -368,4 +370,4 @@ export default {
    left: 100%;
  }
 }
-</style>
+</style>
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@ -46,7 +46,8 @@ export default {
        font: 'serif',
        fontScale: 100,
        lineSpacing: 115,
-        spread: 'auto'
+        spread: 'auto',
+        textStroke: 0
      }
    }
  },
@ -109,11 +110,14 @@ export default {

      const fontScale = this.ereaderSettings.fontScale / 100

+      const textStroke = this.ereaderSettings.textStroke / 100
+
      return {
        '*': {
          color: `${fontColor}!important`,
          'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important'
+          'line-height': lineSpacing * fontScale + 'rem!important',
+          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
        },
        a: {
          color: `${fontColor}!important`
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@ -98,6 +98,12 @@
          </div>
          <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontBoldness }}:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.textStroke" :min="0" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
        <div class="flex items-center">
          <div class="w-40">
            <p class="text-lg">{{ $strings.LabelLayout }}:</p>
@ -130,7 +136,9 @@ export default {
        font: 'serif',
        fontScale: 100,
        lineSpacing: 115,
-        spread: 'auto'
+        fontBoldness: 100,
+        spread: 'auto',
+        textStroke: 0
      }
    }
  },
@ -378,7 +386,12 @@ export default {
      try {
        const settings = localStorage.getItem('ereaderSettings')
        if (settings) {
-          this.ereaderSettings = JSON.parse(settings)
+          const _ereaderSettings = JSON.parse(settings)
+          for (const key in this.ereaderSettings) {
+            if (_ereaderSettings[key] !== undefined) {
+              this.ereaderSettings[key] = _ereaderSettings[key]
+            }
+          }
          this.settingsUpdated()
        }
      } catch (error) {
@ -416,4 +429,4 @@ export default {
    height: 100%;
  }
 }
-</style>
+</style>
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@ -171,7 +171,7 @@ export default {
      this.$axios
        .$get('/api/backups')
        .then((data) => {
-          this.$emit('loaded', data.backupLocation)
+          this.$emit('loaded', data)
          this.setBackups(data.backups || [])
        })
        .catch((error) => {
--- a/client/components/tables/ChaptersTable.vue
+++ b/client/components/tables/ChaptersTable.vue
@ -15,7 +15,7 @@
          <th class="text-left w-16"><span class="px-4">Id</span></th>
          <th class="text-left">{{ $strings.LabelTitle }}</th>
          <th class="text-center">{{ $strings.LabelStart }}</th>
-          <th class="text-center">{{ $strings.LabelEnd }}</th>
+          <th class="text-center">{{ $strings.LabelDuration }}</th>
        </tr>
        <tr v-for="chapter in chapters" :key="chapter.id">
          <td class="text-left">
@ -27,8 +27,8 @@
          <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 hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
-            {{ $secondsToTimestamp(chapter.end) }}
+          <td class="font-mono text-center">
+            {{ $secondsToTimestamp(Math.max(0, chapter.end - chapter.start)) }}
          </td>
        </tr>
      </table>
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@ -1,12 +1,33 @@
 <template>
  <div ref="wrapper" class="relative">
-    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
+    <input
+      :id="inputId"
+      :name="inputName"
+      ref="input"
+      v-model="inputValue"
+      :type="actualType"
+      :step="step"
+      :min="min"
+      :readonly="readonly"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      dir="auto"
+      class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
+      :class="classList"
+      @keyup="keyup"
+      @change="change"
+      @focus="focused"
+      @blur="blurred"
+    />
    <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
      <span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
    </div>
    <div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
      <span class="material-icons-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
    </div>
+    <div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
+      <span class="material-icons-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
+    </div>
  </div>
 </template>

@ -34,6 +55,7 @@ export default {
    clearable: Boolean,
    inputId: String,
    inputName: String,
+    showCopy: Boolean,
    step: [String, Number],
    min: [String, Number]
  },
@ -41,7 +63,8 @@ export default {
    return {
      showPassword: false,
      isHovering: false,
-      isFocused: false
+      isFocused: false,
+      hasCopied: false
    }
  },
  computed: {
@ -67,6 +90,15 @@ export default {
    }
  },
  methods: {
+    copyToClipboard() {
+      if (this.hasCopied) return
+      this.$copyToClipboard(this.inputValue).then((success) => {
+        this.hasCopied = success
+        setTimeout(() => {
+          this.hasCopied = false
+        }, 2000)
+      })
+    },
    clear() {
      this.inputValue = ''
      this.$emit('clear')
--- a/client/components/widgets/AuthorsSlider.vue
+++ b/client/components/widgets/AuthorsSlider.vue
@ -1,112 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio / 1.25
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    editAuthor(author) {
-      this.$store.commit('globals/showEditAuthorModal', author)
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@ -2,7 +2,7 @@
  <div>
    <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
      <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">remove</span>
-      <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
+      <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
      <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">add</span>
    </div>
  </div>
@ -48,4 +48,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/widgets/EpisodeSlider.vue
+++ b/client/components/widgets/EpisodeSlider.vue
@ -1,161 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-book-card
-            :key="item.recentEpisode.id"
-            :ref="`slider-episode-${item.recentEpisode.id}`"
-            :index="index"
-            :book-mount="item"
-            :height="cardHeight"
-            :width="cardWidth"
-            :book-cover-aspect-ratio="bookCoverAspectRatio"
-            :bookshelf-view="bookshelfView"
-            :continue-listening-shelf="continueListeningShelf"
-            class="relative"
-            @edit="editEpisode"
-            @editPodcast="editPodcast"
-            @select="selectItem"
-            @hook:updated="setScrollVars"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    },
-    continueListeningShelf: Boolean
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    clearSelectedEntities() {
-      this.updateSelectionMode(false)
-    },
-    editEpisode({ libraryItem, episode }) {
-      this.$store.commit('setSelectedLibraryItem', libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    editPodcast(libraryItem) {
-      var itemIds = this.items.map((e) => e.id)
-      this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModal', libraryItem)
-    },
-    selectItem(payload) {
-      this.$emit('selectEntity', payload)
-    },
-    itemSelectedEvt() {
-      this.updateSelectionMode(this.isSelectionMode)
-    },
-    updateSelectionMode(val) {
-      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
-
-      this.items.forEach((ent) => {
-        let component = this.$refs[`slider-episode-${ent.recentEpisode.id}`]
-        if (!component || !component.length) return
-        component = component[0]
-        component.setSelectionMode(val)
-        component.selected = selectedMediaItems.some((i) => i.id === ent.id)
-      })
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
-  },
-  beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
-  }
-}
-</script>
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@ -1,33 +1,21 @@
 <template>
  <div class="w-full">
-    <div class="flex items-center py-3">
+    <div class="flex items-center py-3e">
      <slot />
      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
+      <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
+      <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
      </button>
    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
+    <div cy-id="slider" ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4e">
        <template v-for="(item, index) in items">
-          <cards-lazy-book-card
-            :key="item.id + '-' + shelfId + '-' + index"
-            :ref="`slider-item-${item.id}`"
-            :index="index"
-            :book-mount="item"
-            :height="cardHeight"
-            :width="cardWidth"
-            :book-cover-aspect-ratio="bookCoverAspectRatio"
-            :bookshelf-view="bookshelfView"
-            :continue-listening-shelf="continueListeningShelf"
-            class="relative"
-            @edit="editItem"
-            @select="selectItem"
-            @hook:updated="setScrollVars"
-          />
+          <div cy-id="item" ref="item" :key="itemKeyFunc(item)">
+            <component :is="componentName" :ref="itemRefFunc(item)" :index="index" :[itemPropName]="item" :bookshelf-view="bookshelfView" :continue-listening-shelf="continueListeningShelf" class="relative" @edit="editFunc" @editPodcast="editItem" @select="selectItem" @hook:updated="setScrollVars" />
+          </div>
        </template>
      </div>
    </div>
@ -41,49 +29,108 @@ export default {
      type: Array,
      default: () => []
    },
-    height: {
-      type: Number,
-      default: 192
-    },
    bookshelfView: {
      type: Number,
      default: 1
    },
-    shelfId: String,
-    continueListeningShelf: Boolean
+    shelfId: {
+      type: String,
+      default: ''
+    },
+    continueListeningShelf: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'book'
+    }
  },
  data() {
    return {
      isScrollable: false,
      canScrollLeft: false,
      canScrollRight: false,
-      clientWidth: 0
+      clientWidth: 0,
+      shelfOptionsByType: {
+        episode: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.recentEpisode.id
+        },
+        series: {
+          component: 'cards-lazy-series-card',
+          itemPropName: 'series-mount',
+          itemIdFunc: (item) => item.id
+        },
+        authors: {
+          component: 'cards-author-card',
+          itemPropName: 'author',
+          itemIdFunc: (item) => item.id
+        },
+        narrators: {
+          component: 'cards-narrator-card',
+          itemPropName: 'narrator',
+          itemIdFunc: (item) => item.name
+        },
+        book: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.id
+        },
+        podcast: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.id
+        }
+      }
    }
  },
  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
    isSelectionMode() {
      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
+    },
+    options() {
+      return this.shelfOptionsByType[this.type]
+    },
+    itemIdFunc() {
+      return this.options.itemIdFunc
+    },
+    itemKeyFunc() {
+      return (item) => this.itemIdFunc(item) + this.shelfId
+    },
+    itemRefFunc() {
+      return (item) => `slider-item-${this.itemIdFunc(item)}`
+    },
+    componentName() {
+      return this.options.component
+    },
+    itemPropName() {
+      return this.options.itemPropName
+    },
+    editFunc() {
+      switch (this.type) {
+        case 'episode':
+          return this.editEpisode
+        case 'authors':
+          return this.editAuthor
+        default:
+          return this.editItem
+      }
    }
  },
  methods: {
    clearSelectedEntities() {
      this.updateSelectionMode(false)
    },
+    editEpisode({ libraryItem, episode }) {
+      this.$store.commit('setSelectedLibraryItem', libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    editAuthor(author) {
+      this.$store.commit('globals/showEditAuthorModal', author)
+    },
    editItem(libraryItem) {
      var itemIds = this.items.map((e) => e.id)
      this.$store.commit('setBookshelfBookIds', itemIds)
@ -97,9 +144,8 @@ export default {
    },
    updateSelectionMode(val) {
      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
-
      this.items.forEach((item) => {
-        let component = this.$refs[`slider-item-${item.id}`]
+        let component = this.$refs[this.itemRefFunc(item)]
        if (!component || !component.length) return
        component = component[0]
        component.setSelectionMode(val)
@ -113,7 +159,7 @@ export default {
      if (!this.canScrollRight) return
      const slider = this.$refs.slider
      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
+      const scrollAmount = this.clientWidth
      const maxScrollLeft = slider.scrollWidth - slider.clientWidth

      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
@ -124,7 +170,7 @@ export default {
      const slider = this.$refs.slider
      if (!slider) return

-      const scrollAmount = this.booksPerPage * this.cardWidth
+      const scrollAmount = this.clientWidth

      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
      slider.scrollLeft = newScrollLeft
@ -133,11 +179,11 @@ export default {
      const slider = this.$refs.slider
      if (!slider) return
      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
+      const scrollRemaining = Math.abs(scrollLeft + clientWidth - scrollWidth)

      this.clientWidth = clientWidth
      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
+      this.canScrollRight = scrollRemaining >= 1
      this.canScrollLeft = scrollLeft > 0
    }
  },
@ -145,12 +191,17 @@ export default {
    this.setScrollVars()
  },
  mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+    this.setScrollVars()
+    if (['book', 'podcast', 'episode'].includes(this.type)) {
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+    }
  },
  beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+    if (['book', 'podcast', 'episode'].includes(this.type)) {
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+    }
  }
 }
-</script>
+</script>
--- a/client/components/widgets/NarratorsSlider.vue
+++ b/client/components/widgets/NarratorsSlider.vue
@ -1,100 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="item in items">
-          <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight * 1.5
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
--- a/client/components/widgets/SeriesSlider.vue
+++ b/client/components/widgets/SeriesSlider.vue
@ -1,109 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return 2 * (this.cardHeight / this.bookCoverAspectRatio)
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>