Feature: Mark as Watched button in Feed

src/components/FeedPage.vue

@@ -26,7 +26,7 @@
 
     <LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
         <template v-for="video in videos" :key="video.url">
-            <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
+            <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" @update:watched="onUpdateWatched" />
         </template>
     </LoadingIndicatorPage>
 </template>
@@ -100,6 +100,15 @@ export default {
                 this.loadMoreVideos();
             }
         },
+        onUpdateWatched(urls = null) {
+            if (urls === null) {
+                if (this.videos.length > 0) this.updateWatched(this.videos);
+                return;
+            }
+
+            const subset = this.videos.filter(({ url }) => urls.includes(url));
+            if (subset.length > 0) this.updateWatched(subset);
+        },
         shouldShowVideo(video) {
             switch (this.selectedFilter.toLowerCase()) {
                 case "shorts":

src/components/PreferencesPage.vue

@@ -146,7 +146,7 @@
             @change="onChange($event)"
         />
     </label>
-    <label v-if="watchHistory" class="pref" for="chkHideWatched">
+    <label class="pref" for="chkHideWatched">
         <strong v-t="'actions.hide_watched'" />
         <input id="chkHideWatched" v-model="hideWatched" class="checkbox" type="checkbox" @change="onChange($event)" />
     </label>

src/components/VideoItem.vue

@@ -118,6 +118,18 @@
                 >
                     <font-awesome-icon icon="circle-minus" />
                 </button>
+                <button
+                    v-if="
+                        isFeed &&
+                        (this.getPreferenceBoolean('watchHistory', false) ||
+                            this.getPreferenceBoolean('hideWatched', false))
+                    "
+                    @click="toggleWatched(item.url.substr(-11))"
+                    ref="watchButton"
+                >
+                    <font-awesome-icon icon="eye-slash" v-if="item.watched" :title="$t('actions.mark_as_unwatched')" />
+                    <font-awesome-icon icon="eye" v-else :title="$t('actions.mark_as_watched')" />
+                </button>
                 <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
             </div>
         </div>
@@ -152,6 +164,7 @@ export default {
         playlistId: { type: String, default: null },
         admin: { type: Boolean, default: false },
     },
+    emits: ["update:watched"],
     data() {
         return {
             showModal: false,
@@ -194,6 +207,48 @@ export default {
                 }
             };
         },
+        toggleWatched(videoId) {
+            if (window.db) {
+                // Should match WatchVideo.vue
+                var tx = window.db.transaction("watch_history", "readwrite");
+                var store = tx.objectStore("watch_history");
+                var instance = this;
+
+                if (this.item.watched) {
+                    let request = store.delete(videoId);
+                    request.onsuccess = function () {
+                        instance.$emit("update:watched", [instance.item.url]);
+                    };
+                    return;
+                }
+
+                var request = store.get(videoId);
+                request.onsuccess = function (event) {
+                    var video = event.target.result;
+                    if (video) {
+                        video.watchedAt = Date.now();
+                    } else {
+                        // Should match WatchVideo.vue
+                        video = {
+                            videoId: videoId,
+                            title: instance.item.title,
+                            duration: instance.item.duration,
+                            thumbnail: instance.item.thumbnailUrl,
+                            uploaderUrl: instance.item.uploaderUrl,
+                            uploaderName: instance.item.uploader,
+                            watchedAt: Date.now(),
+                        };
+                    }
+                    // Set time to end for shouldShowVideo
+                    video.currentTime = instance.item.duration;
+                    // Save
+                    store.put(video);
+                    // Disappear if hideWatched is on
+                    instance.$emit("update:watched", [instance.item.url]);
+                    instance.shouldShowVideo();
+                };
+            }
+        },
     },
     components: { PlaylistAddModal },
 };

src/locales/en.json

@@ -120,6 +120,8 @@
         "show_chapters": "Chapters",
         "store_search_history": "Store Search history",
         "hide_watched": "Hide watched videos in the feed",
+        "mark_as_watched": "Mark as Watched",
+        "mark_as_unwatched": "Mark as Unwatched",
         "documentation": "Documentation",
         "status_page": "Status",
         "source_code": "Source code",

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faEye,
+    faEyeSlash,
     faThumbtack,
     faCheck,
     faHeart,
@@ -26,6 +27,7 @@ import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-ico
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 library.add(
     faEye,
+    faEyeSlash,
     faGithub,
     faBitcoin,
     faThumbtack,