Update watched videos more often.

src/components/Channel.vue

@@ -47,6 +47,7 @@ export default {
     activated() {
         if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped";
         window.addEventListener("scroll", this.handleScroll);
+        if (this.channel && !this.channel.error) this.updateWatched(this.channel.relatedStreams);
     },
     deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
@@ -78,6 +79,7 @@ export default {
                     if (!this.channel.error) {
                         document.title = this.channel.name + " - Piped";
                         if (this.authenticated) this.fetchSubscribedStatus();
+                        this.updateWatched(this.channel.relatedStreams);
                     }
                 });
         },
@@ -88,9 +90,9 @@ export default {
                 this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
                     nextpage: this.channel.nextpage,
                 }).then(json => {
-                    this.channel.relatedStreams.concat(json.relatedStreams);
                     this.channel.nextpage = json.nextpage;
                     this.loading = false;
+                    this.updateWatched(json.relatedStreams);
                     json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
                 });
             }

src/components/FeedPage.vue

@@ -46,29 +46,12 @@ export default {
     mounted() {
         this.fetchFeed().then(videos => {
             this.videos = videos;
-            (async () => {
+            this.updateWatched(this.videos);
-                if (window.db) {
-                    var tx = window.db.transaction("watch_history", "readonly");
-                    var store = tx.objectStore("watch_history");
-                    const cursorRequest = store.openCursor();
-                    cursorRequest.onsuccess = e => {
-                        const cursor = e.target.result;
-                        if (cursor) {
-                            const video = this.videos.filter(
-                                video => video.url.substr(-11) === cursor.value.videoId,
-                            )[0];
-                            if (video != null) {
-                                video.watched = true;
-                            }
-                            cursor.continue();
-                        }
-                    };
-                }
-            })();
         });
     },
     activated() {
         document.title = "Feed - Piped";
+        if (this.videos.length > 0) this.updateWatched(this.videos);
     },
     methods: {
         async fetchFeed() {

src/components/RegisterPage.vue

@@ -50,7 +50,6 @@ export default {
     },
     methods: {
         register() {
-            console.log("authToken" + this.hashCode(this.apiUrl()));
             this.fetchJson(this.apiUrl() + "/register", null, {
                 method: "POST",
                 body: JSON.stringify({

src/components/TrendingPage.vue

@@ -27,10 +27,14 @@ export default {
     mounted() {
         let region = this.getPreferenceString("region", "US");
 
-        this.fetchTrending(region).then(videos => (this.videos = videos));
+        this.fetchTrending(region).then(videos => {
+            this.videos = videos;
+            this.updateWatched(this.videos);
+        });
     },
     activated() {
         document.title = "Trending - Piped";
+        if (this.videos.length > 0) this.updateWatched(this.videos);
     },
     methods: {
         async fetchTrending(region) {

src/main.js

@@ -25,7 +25,7 @@ library.add(
     faHeadphones,
     faYoutube,
     faRss,
-    faChevronLeft
+    faChevronLeft,
 );
 
 import("uikit/dist/css/uikit-core.css");
@@ -160,11 +160,25 @@ const mixin = {
         },
         urlify(string) {
             const regex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-            if (!string) return '';
+            if (!string) return "";
-            return string.replace(regex, (url) => {
+            return string.replace(regex, url => {
-                return `<a class="uk-button uk-button-text" href="${url}" target="_blank">${url}</a>`
+                return `<a class="uk-button uk-button-text" href="${url}" target="_blank">${url}</a>`;
-            })
+            });
-        }
+        },
+        async updateWatched(videos) {
+            if (window.db) {
+                var tx = window.db.transaction("watch_history", "readonly");
+                var store = tx.objectStore("watch_history");
+                videos.map(async video => {
+                    var request = store.get(video.url.substr(-11));
+                    request.onsuccess = function(event) {
+                        if (event.target.result) {
+                            video.watched = true;
+                        }
+                    };
+                });
+            }
+        },
     },
     computed: {
         backgroundColor() {