Update:UI/UX: Add explicit indicator next to titles #1181

components/cards/LazyBookCard.vue

@@ -7,9 +7,12 @@
 
     <!-- Alternative bookshelf title/author/sort -->
     <div v-if="isAltViewEnabled" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }" class="flex items-center">
         <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
           {{ displayTitle }}
         </p>
+        <widgets-explicit-indicator v-if="isExplicit" />
+      </div>
       <p class="truncate text-fg-muted" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
       <p v-if="displaySortLine" class="truncate text-fg-muted" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
@@ -341,6 +344,9 @@ export default {
     isInvalid() {
       return this._libraryItem.isInvalid
     },
+    isExplicit() {
+      return !!this.mediaMetadata.explicit
+    },
     numMissingParts() {
       if (this.isPodcast) return 0
       return this.media.numMissingParts

components/tables/podcast/LatestEpisodeRow.vue

@@ -6,9 +6,12 @@
           <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)" :width="40" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
         </div>
         <div class="flex-grow px-2">
+          <div class="flex items-center">
             <div class="-mt-0.5 mb-0.5" @click.stop>
               <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-fg underline">{{ podcast.metadata.title }}</nuxt-link>
             </div>
+            <widgets-explicit-indicator v-if="podcast.metadata.explicit" />
+          </div>
           <p v-if="publishedAt" class="text-xs text-fg-muted">{{ $dateDistanceFromNow(publishedAt) }}</p>
         </div>
       </div>

components/widgets/ExplicitIndicator.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 512 512" class="ml-1">
+      <path
+        fill="white"
+        d="M 89.00,40.12
+           C 89.00,40.12 127.00,40.12 127.00,40.12
+             127.00,40.12 198.00,40.12 198.00,40.12
+             198.00,40.12 416.00,40.12 416.00,40.12
+             446.58,40.05 472.95,66.42 473.00,97.00
+             473.00,97.00 473.00,303.00 473.00,303.00
+             473.00,303.00 473.00,418.00 473.00,418.00
+             472.65,447.55 445.06,472.95 416.00,473.00
+             416.00,473.00 210.00,473.00 210.00,473.00
+             210.00,473.00 95.00,473.00 95.00,473.00
+             65.45,472.65 40.05,445.06 40.00,416.00
+             40.00,416.00 40.00,136.00 40.00,136.00
+             40.00,136.00 40.00,109.00 40.00,109.00
+             40.00,109.00 40.00,96.00 40.00,96.00
+             40.07,81.58 46.89,67.14 57.01,57.01
+             61.17,52.86 64.86,50.13 70.00,47.31
+             77.25,43.33 81.02,42.18 89.00,40.12 Z
+           M 337.00,121.00
+           C 337.00,121.00 175.00,121.00 175.00,121.00
+             175.00,121.00 175.00,392.00 175.00,392.00
+             175.00,392.00 337.00,392.00 337.00,392.00
+             337.00,392.00 337.00,349.00 337.00,349.00
+             337.00,349.00 226.00,349.00 226.00,349.00
+             226.00,349.00 226.00,274.00 226.00,274.00
+             226.00,274.00 332.00,274.00 332.00,274.00
+             332.00,274.00 332.00,232.00 332.00,232.00
+             332.00,232.00 226.00,232.00 226.00,232.00
+             226.00,232.00 226.00,164.00 226.00,164.00
+             226.00,164.00 337.00,164.00 337.00,164.00
+             337.00,164.00 337.00,121.00 337.00,121.00 Z"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

pages/item/_id/index.vue

@@ -28,7 +28,10 @@
       <div class="relative z-10 px-3 py-4">
         <!-- title -->
         <div class="text-center mb-2">
+          <div class="flex items-center justify-center">
             <h1 class="text-xl font-semibold">{{ title }}</h1>
+            <widgets-explicit-indicator v-if="isExplicit" />
+          </div>
           <p v-if="subtitle" class="text-fg text-base">{{ subtitle }}</p>
         </div>
 
@@ -436,6 +439,9 @@ export default {
     isInvalid() {
       return this.libraryItem.isInvalid
     },
+    isExplicit() {
+      return !!this.mediaMetadata.explicit
+    },
     showPlay() {
       return !this.isMissing && !this.isInvalid && (this.numTracks || this.episodes.length)
     },