From c8442138287e4e2d228950b3ce2396d2bd317be7 Mon Sep 17 00:00:00 2001
From: David <david.cec@proton.me>
Date: Mon, 10 Aug 2026 11:22:58 +0200
Subject: [PATCH 1/4] feat: add message on top of playlist with local api to
 explain hidden videos

---
 src/renderer/views/Playlist/Playlist.scss | 31 +++++++++++++++++++++++
 src/renderer/views/Playlist/Playlist.vue  | 26 +++++++++++++++++++
 static/locales/en-US.yaml                 |  1 +
 3 files changed, 58 insertions(+)

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index e784d7782493c..0ef2e60a3b6c8 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -1,5 +1,36 @@
 @use '../../scss-partials/utils';
 
+.alertBox {
+  justify-content: space-between;
+  padding-inline: 24px 8px;
+  padding-block: 8px;
+  background-color: var(--secondary-card-bg-color);
+}
+
+.alertLabel {
+  align-self: center;
+}
+
+.alertButton {
+  padding: 10px;
+  border-radius: 100%;
+  border-style: none;
+  background-color: transparent;
+  color: var(--primary-text-color);
+  font-size: 1em;
+  line-height: 1em;
+  transition: background 0.2s ease-in;
+}
+
+.alertButton:hover {
+  background-color: var(--card-bg-color);
+  cursor: pointer;
+}
+
+.alertButtonIcon {
+  inline-size: 1em;
+}
+
 .playlistItemsCard {
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 100d1cca7b670..2c2f08ef8824f 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -55,6 +55,25 @@
       v-if="!isLoading"
       class="playlistItemsCard"
     >
+      <FtFlexBox
+        v-if="showUnavailableVideosAlert"
+        class="alertBox"
+      >
+        <p class="alertLabel">
+          {{ t("Playlist.Unavailable videos are hidden") }}
+        </p>
+        <button
+          class="alertButton"
+          :aria-label="t('Close')"
+          :title="t('Close')"
+          @click="handleCloseAlert"
+        >
+          <FontAwesomeIcon
+            class="alertButtonIcon"
+            :icon="['fas', 'times-circle']"
+          />
+        </button>
+      </FtFlexBox>
       <template
         v-if="shownPlaylistItems.length > 0"
       >
@@ -229,6 +248,7 @@ const channelName = ref('')
 const channelThumbnail = ref('')
 const channelId = ref('')
 const infoSource = ref('local')
+const showUnavailableVideosAlert = ref(false)
 const playlistItems = ref([])
 /** @type {import('vue').ComputedRef<any[] | null>} */
 const tempShownPlaylistItems = ref(null)
@@ -466,6 +486,7 @@ function resetState() {
   channelThumbnail.value = ''
   channelId.value = ''
   infoSource.value = 'local'
+  showUnavailableVideosAlert.value = false
   playlistItems.value = []
   continuationData.value = null
 }
@@ -501,6 +522,7 @@ async function getPlaylistLocal() {
     channelThumbnail.value = result.info.author?.best_thumbnail?.url ?? ''
     channelId.value = result.info.author?.id
     infoSource.value = 'local'
+    showUnavailableVideosAlert.value = result.menu?.items?.some((item) => item.text === 'Show unavailable videos')
 
     store.dispatch('updateSubscriptionDetails', {
       channelThumbnailUrl: channelThumbnail.value,
@@ -1084,6 +1106,10 @@ function handleResize() {
   forceListView.value = window.innerWidth <= MOBILE_WIDTH_THRESHOLD || window.innerHeight <= PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD
 }
 
+function handleCloseAlert() {
+  showUnavailableVideosAlert.value = false
+}
+
 onMounted(() => {
   getPlaylistInfoDebounce()
   handleResize()
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 6dafdfcf6bbb3..e45170727a138 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -968,6 +968,7 @@ Playlist:
   Playlist: Playlist
   View Full Playlist: View Full Playlist
   Last Updated On: Last Updated On
+  Unavailable videos are hidden: Unavailable videos are hidden
   Sort By:
     DateAddedNewest: Date added (Newest)
     DateAddedOldest: Date added (Oldest)

From 2b577e5fab2fbf7c24d3b05371368b8aa77fac2c Mon Sep 17 00:00:00 2001
From: David <david.cec@proton.me>
Date: Sat, 15 Aug 2026 16:25:06 +0200
Subject: [PATCH 2/4] feat: display how many unavailable videos are being
 hidden at the end of watch video playlist

---
 .../WatchVideoPlaylist/WatchVideoPlaylist.vue       | 13 ++++++++++++-
 src/renderer/views/Playlist/Playlist.vue            |  1 +
 static/locales/en-US.yaml                           |  2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.vue b/src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.vue
index 56dd8a3e6ed91..e915ec903757f 100644
--- a/src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.vue
+++ b/src/renderer/components/WatchVideoPlaylist/WatchVideoPlaylist.vue
@@ -150,6 +150,11 @@
           :initial-visible-state="index < (currentVideoIndexZeroBased + 4) && index > (currentVideoIndexZeroBased - 4)"
           @pause-player="pausePlayer"
         />
+        <p
+          v-if="playlistUnavailableVideoCount > 0"
+        >
+          {{ t('Video.Playlist.Unavailable videos are hidden', { count: playlistUnavailableVideoCount }, playlistUnavailableVideoCount) }}
+        </p>
       </div>
     </div>
   </FtCard>
@@ -167,7 +172,7 @@ import FtListVideoNumbered from '../FtListVideoNumbered/FtListVideoNumbered.vue'
 
 import store from '../../store/index'
 
-import { copyToClipboard, showToast } from '../../helpers/utils'
+import { copyToClipboard, showToast, extractNumberFromString } from '../../helpers/utils'
 import {
   getLocalCachedFeedContinuation,
   getLocalPlaylist,
@@ -212,6 +217,7 @@ const reversePlaylist = ref(false)
 const channelId = ref('')
 const channelName = ref('')
 const playlistTitle = ref('')
+const playlistTotalVideoCount = ref(0)
 const playlistItems = shallowRef([])
 const randomizedPlaylistItems = shallowRef([])
 const showProgressBarPreview = ref(false)
@@ -258,6 +264,8 @@ const currentVideo = computed(() => playlistItems.value[currentVideoIndexZeroBas
 
 const playlistVideoCount = computed(() => playlistItems.value.length)
 
+const playlistUnavailableVideoCount = computed(() => playlistTotalVideoCount.value - playlistVideoCount.value)
+
 const videoIndexInPlaylistItems = computed(() => {
   const items = shuffleEnabled.value ? randomizedPlaylistItems.value : playlistItems.value
   return findIndexOfCurrentVideoInPlaylist(items)
@@ -578,6 +586,7 @@ async function loadCachedPlaylistInformation(cachedPlaylist) {
   store.commit('setCachedPlaylist', null)
 
   playlistTitle.value = cachedPlaylist.title
+  playlistTotalVideoCount.value = cachedPlaylist.totalVideoCount
   channelName.value = cachedPlaylist.channelName
   channelId.value = cachedPlaylist.channelId
 
@@ -617,6 +626,7 @@ async function getPlaylistInformationLocal() {
     }
 
     playlistTitle.value = playlist.info.title
+    playlistTotalVideoCount.value = extractNumberFromString(playlist.info.total_items)
     channelName.value = channelName_
     channelId.value = playlist.info.author?.id
 
@@ -650,6 +660,7 @@ async function getPlaylistInformationInvidious() {
     const result = await invidiousGetPlaylistInfo(props.playlistId)
 
     playlistTitle.value = result.title
+    playlistTotalVideoCount.value = result.videoCount
     channelName.value = result.author
     channelId.value = result.authorId
 
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 2c2f08ef8824f..375b8f0227c3c 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -1125,6 +1125,7 @@ onBeforeRouteLeave((to) => {
     store.commit('setCachedPlaylist', {
       id: playlistId.value,
       title: playlistTitle.value,
+      totalVideoCount: videoCount,
       channelName: channelName.value,
       channelId: channelId.value,
       items: sortedPlaylistItems.value,
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index e45170727a138..532ffac5bbf3a 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -962,6 +962,8 @@ Video:
   Watch:
     'Remaining preroll-ad time: {remindingTimeSeconds}s': 'Remaining preroll-ad time: {remindingTimeSeconds}s'
     'Remaining SABR backoff time: {remindingTimeSeconds}s': 'Remaining SABR backoff time: {remindingTimeSeconds}s'
+  Playlist:
+    Unavailable videos are hidden: 1 unavailable video is hidden | {count} unavailable videos are hidden
 #& Playlists
 Playlist:
   #& About

From 3ab0ae612ee09810e8848f6c91710363310742a2 Mon Sep 17 00:00:00 2001
From: David <david.cec@proton.me>
Date: Tue, 18 Aug 2026 16:46:22 +0200
Subject: [PATCH 3/4] Change icon and adapt CSS accordingly

---
 src/renderer/views/Playlist/Playlist.scss | 7 +------
 src/renderer/views/Playlist/Playlist.vue  | 3 +--
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 0ef2e60a3b6c8..7e5bb0350f0b7 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -12,13 +12,12 @@
 }
 
 .alertButton {
-  padding: 10px;
+  padding-inline: 1em;
   border-radius: 100%;
   border-style: none;
   background-color: transparent;
   color: var(--primary-text-color);
   font-size: 1em;
-  line-height: 1em;
   transition: background 0.2s ease-in;
 }
 
@@ -27,10 +26,6 @@
   cursor: pointer;
 }
 
-.alertButtonIcon {
-  inline-size: 1em;
-}
-
 .playlistItemsCard {
   display: flex;
   flex-direction: column;
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 375b8f0227c3c..f7c76e9a6b13f 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -69,8 +69,7 @@
           @click="handleCloseAlert"
         >
           <FontAwesomeIcon
-            class="alertButtonIcon"
-            :icon="['fas', 'times-circle']"
+            :icon="['fas', 'times']"
           />
         </button>
       </FtFlexBox>

From a19757ae7f55a5fe4b1ad17c8276dc0e500cf0fa Mon Sep 17 00:00:00 2001
From: David <david.cec@proton.me>
Date: Wed, 19 Aug 2026 14:43:37 +0200
Subject: [PATCH 4/4] change(ui): change banner background color to 'bg-color'

---
 src/renderer/views/Playlist/Playlist.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
index 7e5bb0350f0b7..efabe83f60598 100644
--- a/src/renderer/views/Playlist/Playlist.scss
+++ b/src/renderer/views/Playlist/Playlist.scss
@@ -4,7 +4,7 @@
   justify-content: space-between;
   padding-inline: 24px 8px;
   padding-block: 8px;
-  background-color: var(--secondary-card-bg-color);
+  background-color: var(--bg-color);
 }
 
 .alertLabel {