Order watched recommended videos last (#4394)

* Implement change * Update to use local variable to potentially improve performance in non-first load case
FreeTubeApp · Dec 2, 2023 · fc210aa · fc210aa
1 parent a67541e
commit fc210aa
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -277,10 +277,16 @@ export default defineComponent({
 
         this.isFamilyFriendly = result.basic_info.is_family_safe
 
-        this.recommendedVideos = result.watch_next_feed
+        const recommendedVideos = result.watch_next_feed
           ?.filter((item) => item.type === 'CompactVideo')
           .map(parseLocalWatchNextVideo) ?? []
 
+        // place watched recommended videos last
+        this.recommendedVideos = [
+          ...recommendedVideos.filter((video) => !this.isRecommendedVideoWatched(video.videoId)),
+          ...recommendedVideos.filter((video) => this.isRecommendedVideoWatched(video.videoId))
+        ]
+
         if (this.showFamilyFriendlyOnly && !this.isFamilyFriendly) {
           this.isLoading = false
           this.handleVideoEnded()
@@ -699,7 +705,12 @@ export default defineComponent({
 
           this.videoPublished = result.published * 1000
           this.videoDescriptionHtml = result.descriptionHtml
-          this.recommendedVideos = result.recommendedVideos
+          const recommendedVideos = result.recommendedVideos
+          // place watched recommended videos last
+          this.recommendedVideos = [
+            ...recommendedVideos.filter((video) => !this.isRecommendedVideoWatched(video.videoId)),
+            ...recommendedVideos.filter((video) => this.isRecommendedVideoWatched(video.videoId))
+          ]
           this.adaptiveFormats = await this.getAdaptiveFormatsInvidious(result)
           this.isLive = result.liveNow
           this.isFamilyFriendly = result.isFamilyFriendly
@@ -1067,6 +1078,10 @@ export default defineComponent({
       this.checkIfWatched()
     },
 
+    isRecommendedVideoWatched: function (videoId) {
+      return !!this.$store.getters.getHistoryCacheById[videoId]
+    },
+
     checkIfWatched: function () {
       if (!this.isLive) {
         if (this.timestamp) {