add watch progress bar

src/components/VideoItem.vue

@@ -10,6 +10,7 @@
                 },
             }"
         >
+            <div class="w-full">
                 <img
                     class="w-full aspect-video"
                     :src="item.thumbnail"
@@ -17,6 +18,16 @@
                     :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: {

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;
                         }
                     };
                 });