From ed45cba4c3a10c64e8b491af48698d30a39a5a88 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Mon, 17 Oct 2022 19:44:32 -0400
Subject: [PATCH 1/9] Add watched/unwatched button.

- Separate watchHistory and hideWatched preferences.
- Create db when hideWatched is on but watchHistory is off.
- Add english translations.
---
 src/App.vue                        |  7 +++-
 src/components/PreferencesPage.vue |  2 +-
 src/components/VideoItem.vue       | 59 +++++++++++++++++++++++++++++-
 src/locales/en.json                |  4 +-
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c5dce7a2..8346bd15 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@ export default {
         darkModePreference.addEventListener("change", () => {
             this.setTheme();
         });
-        if (this.getPreferenceBoolean("watchHistory", false))
+        if (this.getPreferenceBoolean("watchHistory", false) || this.getPreferenceBoolean("hideWatched", false)) {
             if ("indexedDB" in window) {
                 const request = indexedDB.open("piped-db", 1);
                 request.onupgradeneeded = function () {
@@ -55,7 +55,10 @@ export default {
                 request.onsuccess = e => {
                     window.db = e.target.result;
                 };
-            } else console.log("This browser doesn't support IndexedDB");
+            } else {
+                console.log("This browser doesn't support IndexedDB");
+            }
+        }
 
         const App = this;
 
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 3a857369..c2dee8d6 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -116,7 +116,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>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index d71cd724..cb7a6d5f 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -73,6 +73,22 @@
             >
                 <font-awesome-icon icon="circle-minus" />
             </button>
+            <button
+                v-if="
+                    isFeed &&
+                    (this.getPreferenceBoolean('watchHistory', false) ||
+                        this.getPreferenceBoolean('hideWatched', false))
+                "
+                @click="toggleWatched(video.url.substr(-11))"
+                ref="watchButton"
+            >
+                <font-awesome-icon
+                    v-if="video.watched"
+                    :title="$t('actions.mark_as_unwatched')"
+                    icon="fa-regular fa-eye-slash"
+                />
+                <font-awesome-icon v-else :title="$t('actions.mark_as_watched')" icon="eye" />
+            </button>
             <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
         </div>
 
@@ -177,12 +193,53 @@ export default {
             const request = objectStore.get(this.video.url.substr(-11));
             request.onsuccess = event => {
                 const video = event.target.result;
-                if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
+                if (
+                    video &&
+                    (!this.getPreferenceBoolean("watchHistory", false) ||
+                        (video.currentTime ?? 0) > video.duration * 0.9)
+                ) {
                     this.showVideo = false;
                     return;
                 }
             };
         },
+        toggleWatched(videoId) {
+            // Copied from WatchVideo.vue
+            if (window.db) {
+                var tx = window.db.transaction("watch_history", "readwrite");
+                var store = tx.objectStore("watch_history");
+                var request = store.get(videoId);
+                var instance = this;
+                request.onsuccess = function (event) {
+                    var video = event.target.result;
+                    if (video) {
+                        if (!instance.video.watched) {
+                            video.watchedAt = Date.now();
+                        } else {
+                            // #todo: remove
+                        }
+                    } else {
+                        video = {
+                            videoId: videoId,
+                            title: instance.video.title,
+                            duration: instance.video.duration,
+                            thumbnail: instance.video.thumbnailUrl,
+                            uploaderUrl: instance.video.uploaderUrl,
+                            uploaderName: instance.video.uploader,
+                            watchedAt: Date.now(),
+                        };
+                    }
+
+                    // Save to db
+                    store.put(video);
+
+                    // Disappear?
+                    if (instance.getPreferenceBoolean("hideWatched", false)) {
+                        instance.shouldShowVideo();
+                    }
+                };
+            }
+        },
     },
     computed: {
         short() {
diff --git a/src/locales/en.json b/src/locales/en.json
index a6645154..777385f1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -112,7 +112,9 @@
         "documentation": "Documentation",
         "status_page": "Status",
         "source_code": "Source code",
-        "instance_donations": "Instance donations"
+        "instance_donations": "Instance donations",
+        "mark_as_watched": "Mark as Watched",
+        "mark_as_unwatched": "Mark as Unwatched"
     },
     "comment": {
         "pinned_by": "Pinned by",

From 1d1d9d583e8bfd3337c488ae1da7fef8a5951139 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Mon, 17 Oct 2022 21:43:51 -0400
Subject: [PATCH 2/9] Simplify icon appearance.

---
 src/components/VideoItem.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index cb7a6d5f..9e304412 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -74,20 +74,11 @@
                 <font-awesome-icon icon="circle-minus" />
             </button>
             <button
-                v-if="
-                    isFeed &&
-                    (this.getPreferenceBoolean('watchHistory', false) ||
-                        this.getPreferenceBoolean('hideWatched', false))
-                "
+                v-if="isFeed && this.getPreferenceBoolean('hideWatched', false)"
                 @click="toggleWatched(video.url.substr(-11))"
                 ref="watchButton"
             >
-                <font-awesome-icon
-                    v-if="video.watched"
-                    :title="$t('actions.mark_as_unwatched')"
-                    icon="fa-regular fa-eye-slash"
-                />
-                <font-awesome-icon v-else :title="$t('actions.mark_as_watched')" icon="eye" />
+                <font-awesome-icon icon="eye" :title="$t('actions.mark_as_watched')" />
             </button>
             <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
         </div>

From 4d827baf3be7e8a19aa63e520af1a06698020589 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Mon, 17 Oct 2022 21:58:50 -0400
Subject: [PATCH 3/9] Change toggle to markAsWatched only.

---
 src/components/VideoItem.vue | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 9e304412..ccf247dd 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -75,7 +75,7 @@
             </button>
             <button
                 v-if="isFeed && this.getPreferenceBoolean('hideWatched', false)"
-                @click="toggleWatched(video.url.substr(-11))"
+                @click="markAsWatched(video.url.substr(-11))"
                 ref="watchButton"
             >
                 <font-awesome-icon icon="eye" :title="$t('actions.mark_as_watched')" />
@@ -194,9 +194,9 @@ export default {
                 }
             };
         },
-        toggleWatched(videoId) {
-            // Copied from WatchVideo.vue
+        markAsWatched(videoId) {
             if (window.db) {
+                // Should match WatchVideo.vue
                 var tx = window.db.transaction("watch_history", "readwrite");
                 var store = tx.objectStore("watch_history");
                 var request = store.get(videoId);
@@ -204,11 +204,7 @@ export default {
                 request.onsuccess = function (event) {
                     var video = event.target.result;
                     if (video) {
-                        if (!instance.video.watched) {
-                            video.watchedAt = Date.now();
-                        } else {
-                            // #todo: remove
-                        }
+                        video.watchedAt = Date.now();
                     } else {
                         video = {
                             videoId: videoId,
@@ -220,14 +216,12 @@ export default {
                             watchedAt: Date.now(),
                         };
                     }
-
-                    // Save to db
+                    // Set time to end for shouldShowVideo
+                    video.currentTime = instance.video.duration;
+                    // Save
                     store.put(video);
-
-                    // Disappear?
-                    if (instance.getPreferenceBoolean("hideWatched", false)) {
-                        instance.shouldShowVideo();
-                    }
+                    // Disappear
+                    instance.shouldShowVideo();
                 };
             }
         },

From df4cbbdf18ae07d9ea4ffd17bfeb6e77628db0d1 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Mon, 17 Oct 2022 21:58:50 -0400
Subject: [PATCH 4/9] Change toggle to markAsWatched only.

---
 src/components/VideoItem.vue | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 9e304412..ec89e677 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -75,7 +75,7 @@
             </button>
             <button
                 v-if="isFeed && this.getPreferenceBoolean('hideWatched', false)"
-                @click="toggleWatched(video.url.substr(-11))"
+                @click="markAsWatched(video.url.substr(-11))"
                 ref="watchButton"
             >
                 <font-awesome-icon icon="eye" :title="$t('actions.mark_as_watched')" />
@@ -194,8 +194,7 @@ export default {
                 }
             };
         },
-        toggleWatched(videoId) {
-            // Copied from WatchVideo.vue
+        markAsWatched(videoId) {
             if (window.db) {
                 var tx = window.db.transaction("watch_history", "readwrite");
                 var store = tx.objectStore("watch_history");
@@ -204,12 +203,9 @@ export default {
                 request.onsuccess = function (event) {
                     var video = event.target.result;
                     if (video) {
-                        if (!instance.video.watched) {
-                            video.watchedAt = Date.now();
-                        } else {
-                            // #todo: remove
-                        }
+                        video.watchedAt = Date.now();
                     } else {
+                        // Should match WatchVideo.vue
                         video = {
                             videoId: videoId,
                             title: instance.video.title,
@@ -220,14 +216,12 @@ export default {
                             watchedAt: Date.now(),
                         };
                     }
-
-                    // Save to db
+                    // Set time to end for shouldShowVideo
+                    video.currentTime = instance.video.duration;
+                    // Save
                     store.put(video);
-
-                    // Disappear?
-                    if (instance.getPreferenceBoolean("hideWatched", false)) {
-                        instance.shouldShowVideo();
-                    }
+                    // Disappear
+                    instance.shouldShowVideo();
                 };
             }
         },

From 0674a70624794382a949e7ba28e2191ae733156d Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Fri, 21 Oct 2022 16:32:13 -0400
Subject: [PATCH 5/9] Remove redundant check.

---
 src/components/VideoItem.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index dc81d841..136edfb3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -184,11 +184,7 @@ export default {
             const request = objectStore.get(this.video.url.substr(-11));
             request.onsuccess = event => {
                 const video = event.target.result;
-                if (
-                    video &&
-                    (!this.getPreferenceBoolean("watchHistory", false) ||
-                        (video.currentTime ?? 0) > video.duration * 0.9)
-                ) {
+                if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
                     this.showVideo = false;
                     return;
                 }

From ae460bbcde67fb2f86733d1cfdd82d51e8fba8dc Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Fri, 21 Oct 2022 16:32:58 -0400
Subject: [PATCH 6/9] Switch to toggle watch.

---
 src/components/FeedPage.vue  | 11 ++++++++++-
 src/components/VideoItem.vue | 28 ++++++++++++++++++++++------
 src/main.js                  |  6 +++---
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 882196a6..e6e5e4b8 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -18,7 +18,13 @@
     <hr />
 
     <div class="video-grid">
-        <VideoItem :is-feed="true" v-for="video in videos" :key="video.url" :video="video" />
+        <VideoItem
+            :is-feed="true"
+            v-for="video in videos"
+            :key="video.url"
+            :video="video"
+            @update:watched="onUpdateWatched"
+        />
     </div>
 </template>
 
@@ -85,6 +91,9 @@ export default {
                 this.loadMoreVideos();
             }
         },
+        onUpdateWatched() {
+            if (this.videos.length > 0) this.updateWatched(this.videos);
+        },
     },
 };
 </script>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 136edfb3..ed4e5383 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -74,11 +74,16 @@
                 <font-awesome-icon icon="circle-minus" />
             </button>
             <button
-                v-if="isFeed && this.getPreferenceBoolean('hideWatched', false)"
-                @click="markAsWatched(video.url.substr(-11))"
+                v-if="
+                    isFeed &&
+                    (this.getPreferenceBoolean('watchHistory', false) ||
+                        this.getPreferenceBoolean('hideWatched', false))
+                "
+                @click="toggleWatched(video.url.substr(-11))"
                 ref="watchButton"
             >
-                <font-awesome-icon icon="eye" :title="$t('actions.mark_as_watched')" />
+                <font-awesome-icon icon="eye-slash" :title="$t('actions.mark_as_unwatched')" v-if="video.watched" />
+                <font-awesome-icon icon="eye" :title="$t('actions.mark_as_watched')" v-else />
             </button>
             <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
         </div>
@@ -148,6 +153,7 @@ export default {
         playlistId: { type: String, default: null },
         admin: { type: Boolean, default: false },
     },
+    emits: ["update:watched"],
     data() {
         return {
             showModal: false,
@@ -190,13 +196,22 @@ export default {
                 }
             };
         },
-        markAsWatched(videoId) {
+        toggleWatched(videoId) {
             if (window.db) {
                 // Should match WatchVideo.vue
                 var tx = window.db.transaction("watch_history", "readwrite");
                 var store = tx.objectStore("watch_history");
-                var request = store.get(videoId);
                 var instance = this;
+
+                if (this.video.watched) {
+                    let request = store.delete(videoId);
+                    request.onsuccess = function () {
+                        instance.$emit("update:watched");
+                    };
+                    return;
+                }
+
+                var request = store.get(videoId);
                 request.onsuccess = function (event) {
                     var video = event.target.result;
                     if (video) {
@@ -217,7 +232,8 @@ export default {
                     video.currentTime = instance.video.duration;
                     // Save
                     store.put(video);
-                    // Disappear
+                    // Disappear if hideWatched is on
+                    instance.$emit("update:watched");
                     instance.shouldShowVideo();
                 };
             }
diff --git a/src/main.js b/src/main.js
index 9ea9cf48..c938a472 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faEye,
+    faEyeSlash,
     faThumbtack,
     faCheck,
     faHeart,
@@ -25,6 +26,7 @@ import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 library.add(
     faEye,
+    faEyeSlash,
     faGithub,
     faBitcoin,
     faThumbtack,
@@ -197,9 +199,7 @@ const mixin = {
                 videos.map(async video => {
                     var request = store.get(video.url.substr(-11));
                     request.onsuccess = function (event) {
-                        if (event.target.result) {
-                            video.watched = true;
-                        }
+                        video.watched = Boolean(event.target.result);
                     };
                 });
             }

From c4d3e4a7a21541e52c2b3e25da9fcea2eedcf6c1 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Sat, 22 Oct 2022 16:24:56 -0400
Subject: [PATCH 7/9] Update onUpdateWatched to update a subset of videos.

---
 src/components/FeedPage.vue  | 10 ++++++++--
 src/components/VideoItem.vue |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index e6e5e4b8..cb339156 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -91,8 +91,14 @@ export default {
                 this.loadMoreVideos();
             }
         },
-        onUpdateWatched() {
-            if (this.videos.length > 0) this.updateWatched(this.videos);
+        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);
         },
     },
 };
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index ed4e5383..cf05f554 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -206,7 +206,7 @@ export default {
                 if (this.video.watched) {
                     let request = store.delete(videoId);
                     request.onsuccess = function () {
-                        instance.$emit("update:watched");
+                        instance.$emit("update:watched", [instance.video.url]);
                     };
                     return;
                 }
@@ -233,7 +233,7 @@ export default {
                     // Save
                     store.put(video);
                     // Disappear if hideWatched is on
-                    instance.$emit("update:watched");
+                    instance.$emit("update:watched", [instance.video.url]);
                     instance.shouldShowVideo();
                 };
             }

From 5e3d8e84018a478089218946f30bd5b391f012f4 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 10 Nov 2022 19:21:46 +0100
Subject: [PATCH 8/9] fix some issues caused by merging with upstream

---
 src/components/VideoItem.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index eb78134d..d7e9dbde 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -79,7 +79,7 @@
                     (this.getPreferenceBoolean('watchHistory', false) ||
                         this.getPreferenceBoolean('hideWatched', false))
                 "
-                @click="toggleWatched(video.url.substr(-11))"
+                @click="toggleWatched(item.url.substr(-11))"
                 ref="watchButton"
             >
                 <font-awesome-icon icon="eye-slash" :title="$t('actions.mark_as_unwatched')" v-if="item.watched" />
@@ -220,16 +220,16 @@ export default {
                         // Should match WatchVideo.vue
                         video = {
                             videoId: videoId,
-                            title: instance.video.title,
-                            duration: instance.video.duration,
-                            thumbnail: instance.video.thumbnailUrl,
-                            uploaderUrl: instance.video.uploaderUrl,
-                            uploaderName: instance.video.uploader,
+                            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.video.duration;
+                    video.currentTime = instance.item.duration;
                     // Save
                     store.put(video);
                     // Disappear if hideWatched is on

From 5567b3c417419d22f18f9a0f04929c99ced2839a Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 4 May 2023 10:58:29 -0400
Subject: [PATCH 9/9] style: minimize diffs.

---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.vue b/src/App.vue
index 9ba74c5c..c02d2271 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,6 +53,7 @@ export default {
         darkModePreference.addEventListener("change", () => {
             this.setTheme();
         });
+
         if ("indexedDB" in window) {
             const request = indexedDB.open("piped-db", 3);
             request.onupgradeneeded = ev => {