Hiding Watched Videos on Channel View

src/renderer/components/SubscriptionSettings/SubscriptionSettings.vue

@@ -26,12 +26,6 @@
         />
       </div>
       <div class="switchColumn">
-        <FtToggleSwitch
-          :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
-          :default-value="hideWatchedSubs"
-          compact
-          @change="updateHideWatchedSubs"
-        />
         <FtToggleSwitch
           :label="$t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
           :default-value="onlyShowLatestFromChannel"
@@ -93,16 +87,6 @@ function updateUnsubscriptionPopupStatus(value) {
   store.dispatch('updateUnsubscriptionPopupStatus', value)
 }
 
-/** @type {import('vue').ComputedRef<boolean>} */
-const hideWatchedSubs = computed(() => store.getters.getHideWatchedSubs)
-
-/**
- * @param {boolean} value
- */
-function updateHideWatchedSubs(value) {
-  store.dispatch('updateHideWatchedSubs', value)
-}
-
 /** @type {import('vue').ComputedRef<boolean>} */
 const onlyShowLatestFromChannel = computed(() => store.getters.getOnlyShowLatestFromChannel)
 

src/renderer/components/distraction-settings/distraction-settings.js

@@ -142,6 +142,9 @@ export default defineComponent({
         settingsSection: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
       })
     },
+    hideWatchedSubs: function () {
+      return this.$store.getters.getHideWatchedSubs
+    },
   },
   mounted: function () {
     this.verifyChannelsHidden()
@@ -245,6 +248,7 @@ export default defineComponent({
       'updateHideSubscriptionsCommunity',
       'updateShowAddedChannelsHidden',
       'updateShowAddedForbiddenTitles',
-    ])
-  }
+      'updateHideWatchedSubs',
+    ]),
+  },
 })

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -217,6 +217,13 @@
           :default-value="hideSharingActions"
           @change="updateHideSharingActions"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Videos on Watch')"
+          :default-value="hideWatchedSubs"
+          :compact="true"
+          :tooltip="$t('Tooltips.Distraction Free Settings.Hide Videos on Watch')"
+          @change="updateHideWatchedSubs"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/views/Channel/Channel.vue

@@ -41,7 +41,7 @@
       <div class="select-container">
         <FtSelect
           v-if="showVideoSortBy"
-          v-show="currentTab === 'videos' && latestVideos.length > 0"
+          v-show="currentTab === 'videos' && (hideWatchedSubs ? filteredVideos.length > 1 : filteredVideos.length > 0)"
           :value="videoSortBy"
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
@@ -51,7 +51,7 @@
         />
         <FtSelect
           v-if="!hideChannelShorts && showShortSortBy"
-          v-show="currentTab === 'shorts' && latestShorts.length > 0"
+          v-show="currentTab === 'shorts' && (hideWatchedSubs ? filteredShorts.length > 1 : filteredShorts.length > 0)"
           :value="shortSortBy"
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
@@ -61,7 +61,7 @@
         />
         <FtSelect
           v-if="!hideLiveStreams && showLiveSortBy"
-          v-show="currentTab === 'live' && latestLive.length > 0"
+          v-show="currentTab === 'live' && (hideWatchedSubs ? filteredShorts.length > 1 : filteredShorts.length > 0)"
           :value="liveSortBy"
           :select-names="videoLiveShortSelectNames"
           :select-values="videoLiveShortSelectValues"
@@ -97,7 +97,7 @@
         <FtElementList
           v-show="currentTab === 'videos'"
           id="videoPanel"
-          :data="latestVideos"
+          :data="filteredVideos"
           :use-channels-hidden-preference="false"
           role="tabpanel"
           aria-labelledby="videosTab"
@@ -112,7 +112,7 @@
         <FtElementList
           v-if="!hideChannelShorts && currentTab === 'shorts'"
           id="shortPanel"
-          :data="latestShorts"
+          :data="filteredShorts"
           :use-channels-hidden-preference="false"
           role="tabpanel"
           aria-labelledby="shortsTab"
@@ -128,7 +128,7 @@
           v-if="!hideLiveStreams"
           v-show="currentTab === 'live'"
           id="livePanel"
-          :data="latestLive"
+          :data="filteredLive"
           :use-channels-hidden-preference="false"
           role="tabpanel"
           aria-labelledby="liveTab"
@@ -469,6 +469,9 @@ const hideChannelPlaylists = computed(() => store.getters.getHideChannelPlaylist
 /** @type {import('vue').ComputedRef<boolean>} */
 const hideChannelCommunity = computed(() => store.getters.getHideChannelCommunity)
 
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideWatchedSubs = computed(() => store.getters.getHideWatchedSubs)
+
 /**
  * @template T
  * @param {T[]} array
@@ -1048,6 +1051,30 @@ const videoContinuationData = shallowRef(null)
 const showVideoSortBy = ref(true)
 const videoSortBy = ref('newest')
 
+const filteredVideos = computed(() => {
+  if (hideWatchedSubs.value) {
+    return filterWatchedArray(latestVideos.value)
+  } else {
+    return latestVideos.value
+  }
+})
+
+const filteredShorts = computed(() => {
+  if (hideWatchedSubs.value) {
+    return filterWatchedArray(latestShorts.value)
+  } else {
+    return latestShorts.value
+  }
+})
+
+const filteredLive = computed(() => {
+  if (hideWatchedSubs.value) {
+    return filterWatchedArray(latestLive.value)
+  } else {
+    return latestLive.value
+  }
+})
+
 watch(videoSortBy, () => {
   if (!autoRefreshOnSortByChangeEnabled) { return }
 
@@ -2315,6 +2342,11 @@ function handleSubscription() {
     posts: latestCommunityPosts.value
   })
 }
+
+function filterWatchedArray(videos) {
+  const historyCache = store.getters.getHistoryCacheById
+  return videos.filter(video => !Object.hasOwn(historyCache, video.videoId))
+}
 </script>
 
 <style scoped src="./Channel.css" />

static/locales/en-US.yaml

@@ -528,7 +528,6 @@ Settings:
     Are you sure you want to remove all your playlists?: Are you sure you want to remove all your playlists?
   Subscription Settings:
     Subscription Settings: Subscription
-    Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Fetch Automatically: Fetch Feed Automatically
     'Limit the number of videos displayed for each channel': 'Limit the number of videos displayed for each channel'
@@ -559,6 +558,7 @@ Settings:
     Hide Live Streams: Hide Live Streams
     Hide Upcoming Premieres: Hide Upcoming Premieres
     Hide Sharing Actions: Hide Sharing Actions
+    Hide Videos on Watch: Hide Videos on Watch
     Hide Chapters: Hide Chapters
     Hide Channels: Hide Videos From Channels
     Hide Channels Disabled Message: Some channels were blocked using ID and weren't processed. Feature is blocked while those IDs are updating
@@ -1086,6 +1086,7 @@ Tooltips:
        The channel ID entered must be a complete match and is case sensitive.
     Hide Subscriptions Live: 'This setting is overridden by the app-wide "{appWideSetting}" setting, in the "{subsection}" section of the "{settingsSection}"'
     Hide Videos and Playlists Containing Text: Enter a word, word fragment, or phrase (case insensitive) to hide all videos & playlists whose original titles contain it throughout all of FreeTube, excluding only History, Your Playlists, and videos inside of playlists.
+    Hide Videos on Watch: 'This option hides watched videos, lives and shorts from the Subscriptions and Channels Pages. It does not affect the Home tab on the Channels page"'
   Subscription Settings:
     Fetch Feeds from RSS: When enabled, FreeTube will use RSS instead of its default
       method for grabbing your subscription feed. RSS is faster and prevents IP blocking,