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

# Conflicts: # client/pages/config/index.vue # client/pages/item/_id/index.vue
2026-03-03 22:49:42 +00:00 · 2024-08-12 22:15:38 +02:00 · 2024-08-12 22:15:38 +02:00 · 5c113f8d7d
commit 5c113f8d7d
parent 2896e32f4e e53ac6566b
269 changed files with 9787 additions and 9217 deletions
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@ -15,12 +15,12 @@
          <!-- 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>
+              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">search</span>
            </ui-tooltip>
          </div>
          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
            <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">edit</span>
+              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">edit</span>
            </ui-tooltip>
          </div>

--- a/client/components/cards/AuthorSearchCard.vue
+++ b/client/components/cards/AuthorSearchCard.vue
@ -5,6 +5,7 @@
    </div>
    <div class="flex-grow px-2 authorSearchCardContent h-full">
      <p class="truncate text-sm">{{ name }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
    </div>
  </div>
 </template>
@ -23,6 +24,9 @@ export default {
  computed: {
    name() {
      return this.author.name
+    },
+    numBooks() {
+      return this.author.numBooks
    }
  },
  methods: {},
@ -33,9 +37,9 @@ export default {
 <style>
 .authorSearchCardContent {
  width: calc(100% - 80px);
-  height: 40px;
+  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
-</style>
+</style>
--- a/client/components/cards/Book3d.vue
+++ b/client/components/cards/Book3d.vue
@ -1,254 +0,0 @@
-<template>
-  <div ref="wrapper" class="relative pointer-events-none" :style="{ width: standardWidth * 0.8 * 1.1 * scale + 'px', height: standardHeight * 1.1 * scale + 'px', marginBottom: 20 + 'px', marginTop: 15 + 'px' }">
-    <div ref="card" class="wrap absolute origin-center transform duration-200" :style="{ transform: `scale(${scale * scaleMultiplier}) translateY(${hover2 ? '-40%' : '-50%'})` }">
-      <div class="perspective">
-        <div class="book-wrap transform duration-100 pointer-events-auto" :class="hover2 ? 'z-80' : 'rotate'" @mouseover="hover = true" @mouseout="hover = false">
-          <div class="book book-1 box-shadow-book3d" ref="front"></div>
-          <div class="title book-1 pointer-events-none" ref="left"></div>
-          <div class="bottom book-1 pointer-events-none" ref="bottom"></div>
-          <div class="book-back book-1 pointer-events-none">
-            <div class="text pointer-events-none">
-              <h3 class="mb-4">Book Back</h3>
-              <p>
-                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt earum doloremque aliquam culpa dolor nostrum consequatur quas dicta? Molestias repellendus minima pariatur libero vel, reiciendis optio magnam rerum, labore corporis.</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    src: String,
-    width: {
-      type: Number,
-      default: 200
-    }
-  },
-  data() {
-    return {
-      hover: false,
-      hover2: false,
-      standardWidth: 200,
-      standardHeight: 320,
-      isAttached: true,
-      pageX: 0,
-      pageY: 0
-    }
-  },
-  watch: {
-    src(newVal) {
-      this.setCover()
-    },
-    width(newVal) {
-      this.init()
-    },
-    hover(newVal) {
-      if (newVal) {
-        this.unattach()
-      } else {
-        this.attach()
-      }
-      setTimeout(() => {
-        this.hover2 = newVal
-      }, 100)
-    }
-  },
-  computed: {
-    scaleMultiplier() {
-      return this.hover2 ? 1.25 : 1
-    },
-    scale() {
-      var scale = this.width / this.standardWidth
-      return scale
-    }
-  },
-  methods: {
-    unattach() {
-      if (this.$refs.card && this.isAttached) {
-        var bookshelf = document.getElementById('bookshelf')
-        if (bookshelf) {
-          var pos = this.$refs.wrapper.getBoundingClientRect()
-
-          this.pageX = pos.x
-          this.pageY = pos.y
-          document.body.appendChild(this.$refs.card)
-          this.$refs.card.style.left = this.pageX + 'px'
-          this.$refs.card.style.top = this.pageY + 'px'
-          this.$refs.card.style.zIndex = 50
-          this.isAttached = false
-        } else if (bookshelf) {
-          console.log(this.pageX, this.pageY)
-          this.isAttached = false
-        }
-      }
-    },
-    attach() {
-      if (this.$refs.card && !this.isAttached) {
-        if (this.$refs.wrapper) {
-          this.isAttached = true
-
-          this.$refs.wrapper.appendChild(this.$refs.card)
-          this.$refs.card.style.left = '0px'
-          this.$refs.card.style.top = '0px'
-        }
-      } else {
-        console.log('Is attached already', this.isAttached)
-      }
-    },
-    init() {
-      var standardWidth = this.standardWidth
-      document.documentElement.style.setProperty('--book-w', standardWidth + 'px')
-      document.documentElement.style.setProperty('--book-wx', standardWidth + 1 + 'px')
-      document.documentElement.style.setProperty('--book-h', standardWidth * 1.6 + 'px')
-      document.documentElement.style.setProperty('--book-d', 40 + 'px')
-    },
-    setElBg(el) {
-      el.style.backgroundImage = `url("${this.src}")`
-      el.style.backgroundSize = 'cover'
-      el.style.backgroundPosition = 'center center'
-      el.style.backgroundRepeat = 'no-repeat'
-    },
-    setCover() {
-      if (this.$refs.front) {
-        this.setElBg(this.$refs.front)
-      }
-      if (this.$refs.bottom) {
-        this.setElBg(this.$refs.bottom)
-        this.$refs.bottom.style.backgroundSize = '2000%'
-        this.$refs.bottom.style.filter = 'blur(1px)'
-      }
-      if (this.$refs.left) {
-        this.setElBg(this.$refs.left)
-        this.$refs.left.style.backgroundSize = '2000%'
-        this.$refs.left.style.filter = 'blur(1px)'
-      }
-    }
-  },
-  mounted() {
-    this.setCover()
-    this.init()
-  }
-}
-</script>
-
-<style>
-/* :root {
-  --book-w: 200px;
-  --book-h: 320px;
-  --book-d: 30px;
-  --book-wx: 201px;
-} */
-/* 
-.wrap {
-  width: calc(1.1 * var(--book-w));
-  height: calc(1.1 * var(--book-h));
-  margin: 0 auto;
-}
-.perspective {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  perspective: 600px;
-  transform-style: preserve-3d;
-  overflow: hidden;
-}
-
-.book-wrap {
-  height: 100%;
-  width: 100%;
-  transform-style: preserve-3d;
-  transition: 'all ease-out 0.6s';
-}
-
-.book {
-  width: var(--book-w);
-  height: var(--book-h);
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: cover;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  cursor: pointer;
-}
-.title {
-  content: '';
-  height: var(--book-h);
-  width: var(--book-d);
-  position: absolute;
-  right: 0;
-  left: calc(var(--book-wx) * -1);
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  background: #444;
-  transform: rotateY(-80deg) translateX(-14px);
-
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: 5000%;
-  filter: blur(1px);
-}
-
-.bottom {
-  content: '';
-  height: var(--book-d);
-  width: var(--book-w);
-  position: absolute;
-  right: 0;
-  bottom: var(--book-h);
-  top: 0;
-  left: 0;
-  margin: auto;
-  background: #444;
-  transform: rotateY(0deg) rotateX(90deg) translateY(-15px) translateX(-2.5px) skewX(10deg);
-
-  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
-  background-size: 5000%;
-  filter: blur(1px);
-}
-
-.book-back {
-  width: var(--book-w);
-  height: var(--book-h);
-  background-color: #444;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  cursor: pointer;
-  transform: rotate(180deg) translateZ(-30px) translateX(5px);
-}
-.book-back .text {
-  transform: rotateX(180deg);
-  position: absolute;
-  bottom: 0px;
-  padding: 20px;
-  text-align: left;
-  font-size: 12px;
-}
-.book-back .text h3 {
-  color: #fff;
-}
-.book-back .text span {
-  display: block;
-  margin-bottom: 20px;
-  color: #fff;
-}
-
-.book-wrap.rotate {
-  transform: rotateY(30deg) rotateX(0deg);
-}
-.book-wrap.flip {
-  transform: rotateY(180deg);
-} */
-</style>
--- a/client/components/cards/GenreSearchCard.vue
+++ b/client/components/cards/GenreSearchCard.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <div class="w-10 h-10 flex items-center justify-center">
+      <span class="material-symbols text-2xl text-gray-200">category</span>
+    </div>
+    <div class="flex-grow px-2 tagSearchCardContent h-full">
+      <p class="truncate text-sm">{{ genre }}</p>
+      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    genre: String,
+    numItems: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.tagSearchCardContent {
+  width: calc(100% - 40px);
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>
--- a/client/components/cards/ItemSearchCard.vue
+++ b/client/components/cards/ItemSearchCard.vue
@ -2,15 +2,9 @@
  <div class="flex items-center h-full px-1 overflow-hidden">
    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
    <div class="flex-grow px-2 audiobookSearchCardContent">
-      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
-      <p v-else class="truncate text-sm" v-html="matchHtml" />
-
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300" v-html="matchHtml" />
-
-      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
-      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
-
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <p class="truncate text-sm">{{ title }}</p>
+      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
    </div>
  </div>
 </template>
@ -21,10 +15,7 @@ export default {
    libraryItem: {
      type: Object,
      default: () => {}
-    },
-    search: String,
-    matchKey: String,
-    matchText: String
+    }
  },
  data() {
    return {}
@ -58,23 +49,6 @@ export default {
    authorName() {
      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
      return this.mediaMetadata.authorName || 'Unknown'
-    },
-    matchHtml() {
-      if (!this.matchText || !this.search) return ''
-
-      // This used to highlight the part of the search found
-      //        but with removing commas periods etc this is no longer plausible
-      const html = this.matchText
-
-      if (this.matchKey === 'episode') return `<p class="truncate">${this.$strings.LabelEpisode}: ${html}</p>`
-      if (this.matchKey === 'tags') return `<p class="truncate">${this.$strings.LabelTags}: ${html}</p>`
-      if (this.matchKey === 'subtitle') return `<p class="truncate">${html}</p>`
-      if (this.matchKey === 'authors') this.$getString('LabelByAuthor', [html])
-      if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
-      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
-      if (this.matchKey === 'series') return `<p class="truncate">${this.$strings.LabelSeries}: ${html}</p>`
-      if (this.matchKey === 'narrators') return `<p class="truncate">${this.$strings.LabelNarrator}: ${html}</p>`
-      return `${html}`
    }
  },
  methods: {},
--- a/client/components/cards/ItemTaskRunningCard.vue
+++ b/client/components/cards/ItemTaskRunningCard.vue
@ -1,7 +1,7 @@
 <template>
  <div class="flex items-center px-1 overflow-hidden">
    <div class="w-8 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
+      <span v-if="isFinished" :class="taskIconStatus" class="material-symbols text-base">{{ actionIcon }}</span>
      <widgets-loading-spinner v-else />
    </div>
    <div class="flex-grow px-2 taskRunningCardContent">
--- a/client/components/cards/ItemUploadCard.vue
+++ b/client/components/cards/ItemUploadCard.vue
@ -5,7 +5,7 @@
    </div>

    <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
-      <span class="text-base text-white text-opacity-80 font-mono material-icons">close</span>
+      <span class="text-base text-white text-opacity-80 font-mono material-symbols">close</span>
    </div>

    <template v-if="!uploadSuccess && !uploadFailed">
@ -22,7 +22,7 @@
            <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
            <ui-tooltip :text="$strings.LabelUploaderItemFetchMetadataHelp">
              <div class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer" @click="fetchMetadata">
-                <span class="text-base text-white text-opacity-80 font-mono material-icons">sync</span>
+                <span class="text-base text-white text-opacity-80 font-mono material-symbols">sync</span>
              </div>
            </ui-tooltip>
          </div>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -45,28 +45,28 @@
        <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>
+              <span class="material-symbols fill" :style="{ fontSize: playIconFontSize + 'em' }">play_arrow</span>
            </div>
          </div>

          <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
-              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'em' }">auto_stories</span>
+              <span class="material-symbols" :style="{ fontSize: playIconFontSize + 'em' }">auto_stories</span>
            </div>
          </div>

          <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 + 'em' }" @click.stop.prevent="editClick">
-            <span class="material-icons" :style="{ fontSize: 1 + 'em' }">edit</span>
+            <span class="material-symbols" :style="{ fontSize: 1 + 'em' }">edit</span>
          </div>

          <!-- Radio button -->
          <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 + 'em', left: 0.375 + 'em' }" @click.stop.prevent="selectBtnClick">
-            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+            <span class="material-symbols" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
          </div>

          <!-- More Menu Icon -->
          <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 + 'em', right: 0.375 + 'em' }" @click.stop.prevent="clickShowMore">
-            <span class="material-icons" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
+            <span class="material-symbols" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
          </div>

          <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 + 'em', left: 0.375 + 'em' }">
@ -87,17 +87,17 @@
        <!-- 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>
+            <span class="material-symbols text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
          </div>
        </ui-tooltip>

        <!-- rss feed icon -->
        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
-          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
        </div>
        <!-- media item shared icon -->
        <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
-          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">public</span>
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">public</span>
        </div>

        <!-- Series sequence -->
@ -132,6 +132,9 @@
          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
        </ui-tooltip>
      </div>
+      <ui-tooltip v-if="showSubtitles" :text="displaySubtitle" :disabled="!displaySubtitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
+        <p cy-id="subtitle" class="truncate" ref="displaySubtitle" :style="{ fontSize: 0.6 + 'em' }">{{ displaySubtitle }}</p>
+      </ui-tooltip>
      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
    </div>
@ -171,6 +174,7 @@ export default {
      selected: false,
      isSelectionMode: false,
      displayTitleTruncated: false,
+      displaySubtitleTruncated: false,
      showCoverBg: false
    }
  },
@ -237,7 +241,7 @@ export default {
      return this._libraryItem.mediaType
    },
    isPodcast() {
-      return this.mediaType === 'podcast'
+      return this.mediaType === 'podcast' || this.store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
    },
    isMusic() {
      return this.mediaType === 'music'
@ -339,6 +343,13 @@ export default {
      if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix || '\u00A0' : this.title || '\u00A0'
    },
+    displaySubtitle() {
+      if (!this.libraryItem) return '\u00A0'
+      if (this.collapsedSeries) return this.collapsedSeries.numBooks === 1 ? '1 book' : `${this.collapsedSeries.numBooks} books`
+      if (this.mediaMetadata.subtitle) return this.mediaMetadata.subtitle
+      if (this.mediaMetadata.seriesName) return this.mediaMetadata.seriesName
+      return ''
+    },
    displayLineTwo() {
      if (this.recentEpisode) return this.title
      if (this.isPodcast) return this.author
@ -644,6 +655,9 @@ export default {
    },
    mediaItemShare() {
      return this._libraryItem.mediaItemShare || null
+    },
+    showSubtitles() {
+      return !this.isPodcast && this.store.getters['user/getUserSetting']('showSubtitles')
    }
  },
  methods: {
@ -685,6 +699,9 @@ export default {
        if (this.$refs.displayTitle) {
          this.displayTitleTruncated = this.$refs.displayTitle.scrollWidth > this.$refs.displayTitle.clientWidth
        }
+        if (this.$refs.displaySubtitle) {
+          this.displaySubtitleTruncated = this.$refs.displaySubtitle.scrollWidth > this.$refs.displaySubtitle.clientWidth
+        }
      })
    },
    clickCard(e) {
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@ -7,11 +7,11 @@
      </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>
+          <span class="material-symbols text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
        </div>
      </div>

-      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
+      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
    </div>

    <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' }">
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@ -7,7 +7,7 @@
      </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>
+          <span class="material-symbols text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
        </div>
      </div>
    </div>
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -16,7 +16,7 @@
        <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>
+      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
    </div>

    <div cy-id="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' }">
@ -81,16 +81,16 @@ export default {
      return this.store.getters['user/getSizeMultiplier']
    },
    seriesId() {
-      return this.series ? this.series.id : ''
+      return this.series?.id || ''
    },
    title() {
-      return this.series ? this.series.name : ''
+      return this.series?.name || ''
    },
    nameIgnorePrefix() {
-      return this.series ? this.series.nameIgnorePrefix : ''
+      return this.series?.nameIgnorePrefix || ''
    },
    displayTitle() {
-      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
+      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title || '\u00A0'
      return this.title || '\u00A0'
    },
    displaySortLine() {
@ -110,13 +110,13 @@ export default {
      }
    },
    books() {
-      return this.series ? this.series.books || [] : []
+      return this.series?.books || []
    },
    addedAt() {
-      return this.series ? this.series.addedAt : 0
+      return this.series?.addedAt || 0
    },
    totalDuration() {
-      return this.series ? this.series.totalDuration : 0
+      return this.series?.totalDuration || 0
    },
    seriesBookProgress() {
      return this.books
@ -161,7 +161,7 @@ export default {
      return this.bookshelfView == constants.BookshelfView.DETAIL
    },
    rssFeed() {
-      return this.series ? this.series.rssFeed : null
+      return this.series?.rssFeed
    }
  },
  methods: {
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@ -3,7 +3,7 @@
    <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>
+          <span class="material-symbols-outlined text-[10em]">record_voice_over</span>
        </div>

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