From 66888bf868156f2a21cc74b89ce3aa070dae38ec Mon Sep 17 00:00:00 2001
From: covidisahoax <OothecaPickle@users.noreply.github.com>
Date: Sat, 12 Oct 2024 12:25:52 -0700
Subject: [PATCH 1/2] Add badge to watch page indicating whether video is
 unlisted (#1475)

---
 .../components/watch-video-info/watch-video-info.js   |  4 ++++
 .../components/watch-video-info/watch-video-info.scss | 11 +++++++++++
 .../components/watch-video-info/watch-video-info.vue  |  6 ++++++
 src/renderer/views/Watch/Watch.js                     |  3 +++
 src/renderer/views/Watch/Watch.vue                    |  1 +
 static/locales/en-US.yaml                             |  1 +
 6 files changed, 26 insertions(+)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index ef5cf85c6f7d0..1076ef9be94dd 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/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'],
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 00a79fba8d7b7..a87a9470fe746 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/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;
+  white-space: nowrap;
+  font-size: 0.8rem;
+  line-height: 0.5rem;
+  font-weight: 500;
+}
+
 .videoButtons {
   .profileRow {
     display: flex;
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index c49c3a1f65446..165f9c33e59d1 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/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">
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 71f0c454c2ca2..e5c599ccc160d 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/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'} */
@@ -439,6 +440,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
 
@@ -774,6 +776,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 {
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index e9c60192c8322..1ed1a34a65a80 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 88f9725a5f183..2ee4add4f2021 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -809,6 +809,7 @@ Video:
   Premieres on: Premieres on
   Premieres: Premieres
   Upcoming: Upcoming
+  Unlisted: Unlisted
   Live: Live
   Live Now: Live Now
   Live Chat: Live Chat

From 95fd51d31c5a4be7366fbe4a2ca95e5f512b7756 Mon Sep 17 00:00:00 2001
From: covidisahoax <OothecaPickle@users.noreply.github.com>
Date: Mon, 14 Oct 2024 22:18:38 -0700
Subject: [PATCH 2/2] 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
---
 .../components/watch-video-info/watch-video-info.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index a87a9470fe746..a35aa7aa2934d 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -27,9 +27,9 @@
   border-radius: 5px;
   display: inline;
   padding-inline: 5px;
+  padding-block: 2px;
   white-space: nowrap;
-  font-size: 0.8rem;
-  line-height: 0.5rem;
+  font-size: 13px;
   font-weight: 500;
 }