Feat: Add message on top and at the end of playlist to explain hidden videos

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
 

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;

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()
@@ -1099,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,

static/locales/en-US.yaml

@@ -962,12 +962,15 @@ 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
   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)