From 90cf70cc3140984f72944960ae8116659fb0313e Mon Sep 17 00:00:00 2001
From: Ian Shehadeh <IanShehadeh2020@gmail.com>
Date: Thu, 13 Jan 2022 17:41:53 -0500
Subject: [PATCH] wait to save video ts until saved video ts is loaded (#726)

This commit introduces a new member to VideoPlayer, initialSeekComplete.
The boolean is set to true after the timestamp has been set on videoEl
from the query or IDB.
If there's no existing timestamp its set to true immediately.

Change updateProgressDatabase() to update watch_history when
initialSeekComplete is true.

This fixes a race condition where updateProgressDatabase() would run
before the saved time could be loaded.
Since the initial timestamp on the video element was 0
the saved time would be forgotten.
---
 src/components/VideoPlayer.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index b13f7340..b62b48cd 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -40,6 +40,7 @@ export default {
             $player: null,
             $ui: null,
             lastUpdate: new Date().getTime(),
+            initialSeekComplete: false,
         };
     },
     computed: {
@@ -206,6 +207,7 @@ export default {
                     }
                 }
                 videoEl.currentTime = start;
+                this.initialSeekComplete = true;
             } else if (window.db) {
                 var tx = window.db.transaction("watch_history", "readonly");
                 var store = tx.objectStore("watch_history");
@@ -216,6 +218,12 @@ export default {
                         videoEl.currentTime = video.currentTime;
                     }
                 };
+
+                tx.oncomplete = () => {
+                    this.initialSeekComplete = true;
+                };
+            } else {
+                this.initialSeekComplete = true;
             }
 
             const noPrevPlayer = !this.$player;
@@ -489,7 +497,7 @@ export default {
             if (new Date().getTime() - this.lastUpdate < 500) return;
             this.lastUpdate = new Date().getTime();
 
-            if (!this.video.id || !window.db) return;
+            if (!this.initialSeekComplete || !this.video.id || !window.db) return;
 
             var tx = window.db.transaction("watch_history", "readwrite");
             var store = tx.objectStore("watch_history");