Implement video watched progress tracking

src/components/VideoItem.vue

@@ -7,7 +7,7 @@
         alt="thumbnail"
         loading="lazy"
       />
-      <v-progress-linear value="100" v-if="alreadyWatched" />
+      <v-progress-linear :value="progress" v-if="alreadyWatched" />
       <v-card-title class="text-subtitle-1">{{ video.title }}</v-card-title>
       <v-card-text>
         <router-link :to="video.uploaderUrl" class="text-subtitle-1 text-decoration-none" v-if="video.uploaderUrl && (video.uploaderName || video.uploader) && !hideChannel" custom v-slot="{ navigate }">
@@ -23,7 +23,7 @@
 
 <script>
 import { LibPiped } from '@/tools/libpiped'
-import { isVideoWatched } from '@/store/watched-videos-db'
+import { findLastWatch } from '@/store/watched-videos-db'
 
 export default {
   name: 'VideoItem',
@@ -35,7 +35,8 @@ export default {
     maxHeight: Boolean
   },
   data: () => ({
-    alreadyWatched: false
+    alreadyWatched: false,
+    progress: 0
   }),
   mounted () {
     this.findIfVideoWatched()
@@ -55,7 +56,11 @@ export default {
       }
 
       if (videoId) {
-        this.alreadyWatched = await isVideoWatched(videoId)
+        const lastVideo = await findLastWatch(videoId)
+        if (lastVideo != null) {
+          this.alreadyWatched = true
+          this.progress = Math.min((lastVideo.progress / lastVideo.video.duration) * 100, 100)
+        }
       }
     },
 

src/routes/WatchVideo.vue

@@ -9,6 +9,7 @@
       :sponsors="sponsors"
       :selectedAutoLoop="selectedAutoLoop"
       @videoEnded="videoEnded"
+      @timeupdate="onTimeUpdate"
     />
 
     <v-row dense class="my-2">
@@ -86,13 +87,14 @@
 </template>
 
 <script>
+import { debounce } from 'lodash-es'
 import { LibPiped } from '@/tools/libpiped'
 
 import Player from '@/components/Player.vue'
 import VideoItem from '@/components/VideoItem.vue'
 import ErrorHandler from '@/components/ErrorHandler.vue'
 import VideoComment from '@/components/VideoComment'
-import { addWatchedVideo } from '@/store/watched-videos-db'
+import { addWatchedVideo, updateWatchedVideoProgress } from '@/store/watched-videos-db'
 import SubscriptionButton from '@/components/SubscriptionButton'
 
 export default {
@@ -107,7 +109,9 @@ export default {
       selectedAutoLoop: false,
       showDesc: true,
       comments: null,
-      channelId: null
+      channelId: null,
+
+      dbID: null
     }
   },
   metaInfo () {
@@ -265,10 +269,7 @@ export default {
           .replaceAll('https://www.youtube.com', '')
           .replaceAll('\n', '<br>')
       )
-
-      await Promise.all([
-        addWatchedVideo(this.video)
-      ])
+      this.dbID = await addWatchedVideo(this.video)
     },
     getComments () {
       this.fetchComments().then(data => (this.comments = data))
@@ -276,7 +277,14 @@ export default {
 
     getVideoId () {
       return this.$route.query.v || this.$route.params.v
-    }
+    },
+
+    onTimeUpdate: debounce(function onTimeUpdate (e) {
+      if (this.dbID == null || !this.$refs.player) {
+        return
+      }
+      return updateWatchedVideoProgress(this.dbID, this.$refs.player.getCurrentTime())
+    }, 500)
   },
   computed: {
     isAutoplayEnabled () {

src/store/watched-videos-db.js

@@ -2,7 +2,7 @@ import Dexie from 'dexie'
 
 export const PMDB = new Dexie('PipedMaterialDB')
 
-PMDB.version(1).stores({
+PMDB.version(2).stores({
   watchedVideos: '++id,videoId,timestamp'
 })
 
@@ -10,19 +10,25 @@ export async function addWatchedVideo (videoObj) {
   return PMDB.watchedVideos.add({
     videoId: videoObj.videoId,
     video: videoObj,
+    progress: 0,
     timestamp: new Date()
   })
 }
 
-export async function isVideoWatched (videoId) {
-  const cnt = await PMDB.watchedVideos.where('videoId').equals(videoId).count()
-  return cnt !== 0
+export function updateWatchedVideoProgress (videoID, currentDuration) {
+  return PMDB.watchedVideos.update(videoID, {
+    progress: currentDuration
+  })
 }
 
-export async function getWatchedVideos () {
+export function findLastWatch (videoId) {
+  return PMDB.watchedVideos.where('videoId').equals(videoId).last()
+}
+
+export function getWatchedVideos () {
   return PMDB.watchedVideos.orderBy('timestamp').reverse().toArray()
 }
 
-export async function deleteWatchedVideos () {
+export function deleteWatchedVideos () {
   return PMDB.watchedVideos.clear()
 }