Add Unlisted badge on watch page for unlisted videos (#5856)

* Add badge to watch page indicating whether video is unlisted (#1475)

* minor updates to unlistedBadge CSS

use pixels instead of rems for font-size
remove line-height
use non-fractional font-size value
add vertical padding

Author: OothecaPickle

src/renderer/components/watch-video-info/watch-video-info.js

@@ -106,6 +106,10 @@ export default defineComponent({
     inUserPlaylist: {
       type: Boolean,
       required: true
+    },
+    isUnlisted: {
+      type: Boolean,
+      required: false
     }
   },
   emits: ['change-format', 'pause-player', 'set-info-area-sticky', 'scroll-to-info-area'],

src/renderer/components/watch-video-info/watch-video-info.scss

@@ -22,6 +22,17 @@
   gap: 10px;
 }
 
+.unlistedBadge {
+  background-color: var(--secondary-card-bg-color);
+  border-radius: 5px;
+  display: inline;
+  padding-inline: 5px;
+  padding-block: 2px;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+}
+
 .videoButtons {
   .profileRow {
     display: flex;

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -6,6 +6,12 @@
       >
         {{ title }}
       </h1>
+      <div
+        v-if="isUnlisted"
+        class="unlistedBadge"
+      >
+        {{ $t('Video.Unlisted') }}
+      </div>
     </div>
     <div class="videoMetrics">
       <div class="datePublishedAndViewCount">

src/renderer/views/Watch/Watch.js

@@ -76,6 +76,7 @@ export default defineComponent({
       isLiveContent: false,
       isUpcoming: false,
       isPostLiveDvr: false,
+      isUnlisted: false,
       upcomingTimestamp: null,
       upcomingTimeLeft: null,
       /** @type {'dash' | 'audio' | 'legacy'} */
@@ -438,6 +439,7 @@ export default defineComponent({
         this.isUpcoming = !!result.basic_info.is_upcoming
         this.isLiveContent = !!result.basic_info.is_live_content
         this.isPostLiveDvr = !!result.basic_info.is_post_live_dvr
+        this.isUnlisted = !!result.basic_info.is_unlisted
 
         const subCount = !result.secondary_info.owner.subscriber_count.isEmpty() ? parseLocalSubscriberCount(result.secondary_info.owner.subscriber_count.text) : NaN
 
@@ -761,6 +763,7 @@ export default defineComponent({
           this.isLive = result.liveNow
           this.isFamilyFriendly = result.isFamilyFriendly
           this.isPostLiveDvr = !!result.isPostLiveDvr
+          this.isUnlisted = !result.isListed
 
           this.captions = result.captions.map(caption => {
             return {

src/renderer/views/Watch/Watch.vue

@@ -117,6 +117,7 @@
       <watch-video-info
         v-if="!isLoading"
         :id="videoId"
+        :is-unlisted="isUnlisted"
         :title="videoTitle"
         :channel-id="channelId"
         :channel-name="channelName"

static/locales/en-US.yaml

@@ -800,6 +800,7 @@ Video:
   Premieres on: Premieres on
   Premieres: Premieres
   Upcoming: Upcoming
+  Unlisted: Unlisted
   Live: Live
   Live Now: Live Now
   Live Chat: Live Chat