From 005a938261bf67950df08db810d4136b8dc17261 Mon Sep 17 00:00:00 2001
From: Alin <ai6@tuta.io>
Date: Thu, 16 Feb 2023 17:26:14 +0000
Subject: [PATCH 1/2] add watch progress bar

---
 src/components/VideoItem.vue | 26 +++++++++++++++++++-------
 src/main.js                  |  1 +
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 44235b23..9a87f526 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -10,13 +10,24 @@
                 },
             }"
         >
-            <img
-                class="w-full aspect-video"
-                :src="item.thumbnail"
-                :alt="item.title"
-                :class="{ 'shorts-img': item.isShort }"
-                loading="lazy"
-            />
+            <div class="w-full">
+                <img
+                    class="w-full aspect-video"
+                    :src="item.thumbnail"
+                    :alt="item.title"
+                    :class="{ 'shorts-img': item.isShort }"
+                    loading="lazy"
+                />
+                <!-- progress bar -->
+                <div class="relative w-full h-1">
+                    <div
+                        class="absolute bottom-0 left-0 h-1 bg-red-600"
+                        v-if="item.watched && item.duration > 0"
+                        :style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
+                    />
+                </div>
+            </div>
+
             <div class="relative text-sm">
                 <span
                     class="thumbnail-overlay thumbnail-right"
@@ -148,6 +159,7 @@ export default {
         };
     },
     mounted() {
+        this.updateWatched([this.item]);
         this.shouldShowVideo();
     },
     methods: {
diff --git a/src/main.js b/src/main.js
index e27ff57b..341a24c8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -213,6 +213,7 @@ const mixin = {
                     request.onsuccess = function (event) {
                         if (event.target.result) {
                             video.watched = true;
+                            video.currentTime = event.target.result.currentTime;
                         }
                     };
                 });

From 949527ed43ba38132216ec9d48d34d8fa73c513a Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Sun, 19 Feb 2023 13:41:13 +0000
Subject: [PATCH 2/2] update watched videos in each separate component

---
 src/components/HistoryPage.vue    | 2 ++
 src/components/PlaylistPage.vue   | 5 ++++-
 src/components/PlaylistVideos.vue | 1 +
 src/components/SearchResults.vue  | 5 ++++-
 src/components/VideoItem.vue      | 1 -
 src/components/WatchVideo.vue     | 1 +
 6 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 3c650b8e..8b592cb5 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -54,6 +54,8 @@ export default {
                             duration: video.duration,
                             thumbnail: video.thumbnail,
                             watchedAt: video.watchedAt,
+                            watched: true,
+                            currentTime: video.currentTime,
                         });
                         if (this.videos.length < 1000) cursor.continue();
                     }
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 26d2c5db..fac2c420 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -106,7 +106,10 @@ export default {
         async getPlaylistData() {
             this.fetchPlaylist()
                 .then(data => (this.playlist = data))
-                .then(() => this.updateTitle());
+                .then(() => {
+                    this.updateTitle();
+                    this.updateWatched(this.playlist.relatedStreams);
+                });
         },
         async updateTitle() {
             document.title = this.playlist.name + " - Piped";
diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index f8a118e2..b054662b 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -32,6 +32,7 @@ export default {
     },
     mounted() {
         this.updateScroll();
+        this.updateWatched(this.playlist.relatedStreams);
     },
     methods: {
         updateScroll() {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 8e0c38ea..b059cbe9 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -72,7 +72,10 @@ export default {
         },
         async updateResults() {
             document.title = this.$route.query.search_query + " - Piped";
-            this.results = this.fetchResults().then(json => (this.results = json));
+            this.results = this.fetchResults().then(json => {
+                this.results = json;
+                this.updateWatched(this.results.items);
+            });
         },
         updateFilter() {
             this.$router.replace({
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 9a87f526..bc2e48ba 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -159,7 +159,6 @@ export default {
         };
     },
     mounted() {
-        this.updateWatched([this.item]);
         this.shouldShowVideo();
     },
     methods: {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 0f7c5d6a..f9852b14 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -422,6 +422,7 @@ export default {
                         });
                         xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
                         this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
+                        this.updateWatched(this.video.relatedStreams);
                     }
                 });
         },