Cleanup inconsistencies with ExplicitIndicator component by removing prop

client/components/app/MediaPlayerContainer.vue

@@ -6,9 +6,12 @@
     </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">
-        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
+        <div class="flex items-center">
-          {{ title }}
+          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
-        </nuxt-link>
+            {{ title }}
+          </nuxt-link>
+          <widgets-explicit-indicator v-if="isExplicit" />
+        </div>
         <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
           <span class="material-icons text-sm">person</span>
           <div class="flex items-center">
@@ -18,7 +21,6 @@
               <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>
-            <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator>
           </div>
         </div>
 
@@ -136,7 +138,7 @@ export default {
       return this.streamLibraryItem?.mediaType === 'music'
     },
     isExplicit() {
-      return this.mediaMetadata.explicit || false
+      return !!this.mediaMetadata.explicit
     },
     mediaMetadata() {
       return this.media.metadata || {}

client/components/cards/BookMatchCard.vue

@@ -29,7 +29,7 @@
       </div>
       <div v-else class="px-4 flex-grow">
         <h1>
-          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" /></div>
+          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator v-if="book.explicit" /></div>
         </h1>
         <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
         <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>

client/components/cards/LazyBookCard.vue

@@ -10,7 +10,7 @@
       <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
-          <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" :explicit="isExplicit" />
+          <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>

client/components/tables/podcast/DownloadQueueTable.vue

@@ -20,7 +20,7 @@
               <td class="px-4">
                 <div class="flex items-center">
                   <nuxt-link :to="`/item/${downloadQueued.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ downloadQueued.podcastTitle }}</nuxt-link>
-                  <widgets-explicit-indicator :explicit="downloadQueued.podcastExplicit" />
+                  <widgets-explicit-indicator v-if="downloadQueued.podcastExplicit" />
                 </div>
               </td>
               <td>

client/components/widgets/ExplicitIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-tooltip v-if="explicit" :text="$strings.LabelExplicit" direction="top">
+  <ui-tooltip :text="$strings.LabelExplicit" direction="top">
     <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 512 512" class="ml-1">
       <path
         fill="white"
@@ -40,9 +40,7 @@
 
 <script>
 export default {
-  props: {
+  props: {},
-    explicit: Boolean
-  },
   data() {
     return {}
   },

client/pages/item/_id/index.vue

@@ -27,7 +27,7 @@
               <h1 class="text-2xl md:text-3xl font-semibold">
                 <div class="flex items-center">
                   {{ title }}
-                  <widgets-explicit-indicator :explicit="isExplicit" />
+                  <widgets-explicit-indicator v-if="isExplicit" />
                   <widgets-abridged-indicator v-if="isAbridged" />
                 </div>
               </h1>
@@ -807,4 +807,4 @@ export default {
   -webkit-line-clamp: unset;
   max-height: 999rem;
 }
-</style>
+</style>

client/pages/library/_library/podcast/download-queue.vue

@@ -16,7 +16,7 @@
                 <div class="flex-grow px-2">
                   <div class="flex items-center">
                     <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcastTitle }}</nuxt-link>
-                    <widgets-explicit-indicator :explicit="episode.podcastExplicit" />
+                    <widgets-explicit-indicator v-if="episode.podcastExplicit" />
                   </div>
                   <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
                 </div>
@@ -25,7 +25,7 @@
               <div class="hidden md:block">
                 <div class="flex items-center">
                   <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcastTitle }}</nuxt-link>
-                  <widgets-explicit-indicator :explicit="episode.podcastExplicit" />
+                  <widgets-explicit-indicator v-if="episode.podcastExplicit" />
                 </div>
                 <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
               </div>

client/pages/library/_library/podcast/latest.vue

@@ -18,7 +18,7 @@
                     <div class="flex" @click.stop>
                       <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
                     </div>
-                    <widgets-explicit-indicator :explicit="episode.podcast.metadata.explicit" />
+                    <widgets-explicit-indicator v-if="episode.podcast.metadata.explicit" />
                   </div>
                   <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
                 </div>
@@ -29,7 +29,7 @@
                   <div class="flex" @click.stop>
                     <nuxt-link :to="`/item/${episode.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ episode.podcast.metadata.title }}</nuxt-link>
                   </div>
-                  <widgets-explicit-indicator :explicit="episode.podcast.metadata.explicit" />
+                  <widgets-explicit-indicator v-if="episode.podcast.metadata.explicit" />
                 </div>
                 <p class="text-xs text-gray-300 mb-1">{{ $dateDistanceFromNow(episode.publishedAt) }}</p>
               </div>

client/pages/library/_library/podcast/search.vue

@@ -21,7 +21,7 @@
             <div class="flex-grow pl-4 max-w-2xl">
               <div class="flex items-center">
                 <a :href="podcast.pageUrl" class="text-base md:text-lg text-gray-200 hover:underline" target="_blank" @click.stop>{{ podcast.title }}</a>
-                <widgets-explicit-indicator :explicit="podcast.explicit" />
+                <widgets-explicit-indicator v-if="podcast.explicit" />
                 <widgets-already-in-library-indicator :already-in-library="podcast.alreadyInLibrary" />
               </div>
               <p class="text-sm md:text-base text-gray-300 whitespace-nowrap truncate">by {{ podcast.artistName }}</p>