Filtering by unwatched videos

src/components/VideoItem.vue

@@ -49,15 +49,11 @@ export default {
   },
 
   methods: {
-    calcProgress (prog, dur) {
-      return Math.min((prog / dur) * 100, 100)
-    },
-
     async findIfVideoWatched () {
       // if it has source progress, it's already seen
       if (this.srcProgress) {
         this.alreadyWatched = true
-        this.progress = this.calcProgress(this.srcProgress, this.video.duration)
+        this.progress = this.srcProgress
         return
       }
 
@@ -72,7 +68,7 @@ export default {
         const lastVideo = await findLastWatch(videoId)
         if (lastVideo != null) {
           this.alreadyWatched = true
-          this.progress = lastVideo.progress != null ? this.calcProgress(lastVideo.progress, lastVideo.video.duration) : 100
+          this.progress = lastVideo.progressPcnt
         } else {
           this.alreadyWatched = false
         }

src/routes/WatchHistory.vue

@@ -1,14 +1,17 @@
 <template>
   <v-progress-linear height="1vh" indeterminate v-if="loaded === false" />
   <v-container fluid v-else>
-    <v-row>
-      <v-col md="2">
+    <v-row align="center">
+      <v-col md="auto">
         <v-btn outlined @click="deleteWatchHistory" x-large>Delete History</v-btn>
       </v-col>
+      <v-col md="auto">
+        <v-switch dense label="Only display videos not completely finished" v-model="unfinishedVideosSwitch" />
+      </v-col>
     </v-row>
     <v-row v-for="(chunk, chunkId) in chunkedByFour" :key="chunkId">
       <v-col md="3" v-for="doc in chunk" :key="doc._id">
-        <VideoItem :video="doc.video" :src-progress="doc.progress" max-height>
+        <VideoItem :video="doc.video" :src-progress="doc.progressPcnt" max-height>
           <ExpandableDate :date="doc.timestamp">
             Watched
           </ExpandableDate>
@@ -22,7 +25,7 @@
 <script>
 import _chunk from 'lodash-es/chunk'
 
-import { deleteWatchedVideos, getWatchedVideos } from '@/store/watched-videos-db'
+import { deleteWatchedVideos, getUnfinishedVideos, getWatchedVideos } from '@/store/watched-videos-db'
 import VideoItem from '@/components/VideoItem'
 import ExpandableDate from '@/components/ExpandableDate'
 
@@ -33,7 +36,8 @@ export default {
   },
   data: () => ({
     loaded: false,
-    data: null
+    data: null,
+    unfinishedVideosSwitch: false
   }),
 
   metaInfo () {
@@ -43,8 +47,12 @@ export default {
   },
 
   methods: {
-    async loadData () {
-      this.data = await getWatchedVideos()
+    async loadData (onlyUnfinished = false) {
+      if (!onlyUnfinished) {
+        this.data = await getWatchedVideos()
+      } else {
+        this.data = await getUnfinishedVideos()
+      }
       this.loaded = true
     },
 
@@ -54,6 +62,12 @@ export default {
     }
   },
 
+  watch: {
+    unfinishedVideosSwitch () {
+      this.loadData(this.unfinishedVideosSwitch)
+    }
+  },
+
   computed: {
     chunkedByFour () {
       return _chunk(this.data, 4)

src/routes/WatchVideo.vue

@@ -293,7 +293,7 @@ export default {
       if (this.dbID == null || !this.$refs.player) {
         return
       }
-      return updateWatchedVideoProgress(this.dbID, this.$refs.player.getCurrentTime())
+      return updateWatchedVideoProgress(this.dbID, this.$refs.player.getCurrentTime(), this.video.duration)
     }, 500)
   },
   computed: {

src/store/watched-videos-db.js

@@ -2,8 +2,8 @@ import Dexie from 'dexie'
 
 export const PMDB = new Dexie('PipedMaterialDB')
 
-PMDB.version(2).stores({
-  watchedVideos: '++id,videoId,timestamp'
+PMDB.version(3).stores({
+  watchedVideos: '++id,videoId,progressPcnt,timestamp'
 })
 
 export async function addWatchedVideo (videoObj) {
@@ -11,13 +11,15 @@ export async function addWatchedVideo (videoObj) {
     videoId: videoObj.videoId,
     video: videoObj,
     progress: 0,
+    progressPcnt: 0,
     timestamp: new Date()
   })
 }
 
-export function updateWatchedVideoProgress (videoID, currentDuration) {
+export function updateWatchedVideoProgress (videoID, prog, dur) {
   return PMDB.watchedVideos.update(videoID, {
-    progress: currentDuration
+    progress: prog,
+    progressPcnt: Math.min((prog / dur) * 100, 100)
   })
 }
 
@@ -29,6 +31,11 @@ export function getWatchedVideos () {
   return PMDB.watchedVideos.orderBy('timestamp').reverse().toArray()
 }
 
+export function getUnfinishedVideos () {
+  // Shaka never fires the last event, thus the last percent turns out to be around 99.95 or 99.98
+  return PMDB.watchedVideos.where('progressPcnt').below(99.9).reverse().sortBy('timestamp')
+}
+
 export function deleteWatchedVideos () {
   return PMDB.watchedVideos.clear()
 }