hide watched videos in the feed

src/components/FeedPage.vue

@@ -18,7 +18,7 @@
     <hr />
 
     <div class="video-grid">
-        <VideoItem v-for="video in videos" :key="video.url" :video="video" />
+        <VideoItem :is-feed="true" v-for="video in videos" :key="video.url" :video="video" />
     </div>
 </template>
 

src/components/PreferencesPage.vue

@@ -116,6 +116,10 @@
             @change="onChange($event)"
         />
     </label>
+    <label v-if="watchHistory" class="pref" for="chkHideWatched">
+        <strong v-t="'actions.hide_watched'" />
+        <input id="chkHideWatched" v-model="hideWatched" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
     <label class="pref" for="ddlEnabledCodecs">
         <strong v-t="'actions.enabled_codecs'" />
         <select
@@ -366,6 +370,7 @@ export default {
             minimizeRecommendations: false,
             watchHistory: false,
             searchHistory: false,
+            hideWatched: false,
             selectedLanguage: "en",
             languages: [
                 { code: "ar", name: "Arabic" },
@@ -505,6 +510,7 @@ export default {
             this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
             this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
             this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
+            this.hideWatched = this.getPreferenceBoolean("hideWatched", false);
             if (this.selectedLanguage != "en") {
                 try {
                     this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
@@ -564,6 +570,7 @@ export default {
                 localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));
                 localStorage.setItem("disableLBRY", this.disableLBRY);
                 localStorage.setItem("proxyLBRY", this.proxyLBRY);
+                localStorage.setItem("hideWatched", this.hideWatched);
 
                 if (shouldReload) window.location.reload();
             }

src/components/VideoItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="showVideo">
         <router-link
             :to="{
                 path: '/watch',
@@ -141,6 +141,10 @@ export default {
                 return {};
             },
         },
+        isFeed: {
+            type: Boolean,
+            default: false,
+        },
         height: { type: String, default: "118" },
         width: { type: String, default: "210" },
         hideChannel: { type: Boolean, default: false },
@@ -151,8 +155,12 @@ export default {
     data() {
         return {
             showModal: false,
+            showVideo: true,
         };
     },
+    mounted() {
+        this.shouldShowVideo();
+    },
     methods: {
         removeVideo() {
             if (confirm(this.$t("actions.delete_playlist_video_confirm"))) {
@@ -173,6 +181,21 @@ export default {
                 });
             }
         },
+        shouldShowVideo() {
+            if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
+
+            const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
+            objectStore.openCursor().onsuccess = event => {
+                const cursor = event.target.result;
+                if (cursor) {
+                    if (cursor.value.videoId === this.video.url.replace("/watch?v=", "")) {
+                        this.showVideo = false;
+                        return;
+                    }
+                    cursor.continue();
+                }
+            };
+        },
     },
     computed: {
         short() {

src/locales/en.json

@@ -107,7 +107,8 @@
         "copy_link": "Copy link",
         "time_code": "Time code (in seconds)",
         "show_chapters": "Chapters",
-        "store_search_history": "Store Search history"
+        "store_search_history": "Store Search history",
+        "hide_watched": "Hide watched videos in the feed"
     },
     "comment": {
         "pinned_by": "Pinned by",