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

@@ -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;
 

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>

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() {

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",