From c4a6c31fe39229a20fc7c9f73fba536a9dc2da8a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 8 Mar 2024 15:38:02 -0700
Subject: [PATCH] Don't jump when player first starts

---
 web/src/components/player/DynamicVideoPlayer.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index 01d826d47..5a90fd65e 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -289,6 +289,7 @@ export class DynamicVideoController {
   private recordings: Recording[] = [];
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
+  private canPlay: boolean = false;
 
   // listeners
   private playerProgressListener: (() => void) | null = null;
@@ -315,11 +316,11 @@ export class DynamicVideoController {
 
   newPlayback(newPlayback: DynamicPlayback) {
     this.recordings = newPlayback.recordings;
-
     this.playerController.src({
       src: newPlayback.playbackUri,
       type: "application/vnd.apple.mpegurl",
     });
+    this.canPlay = false;
 
     if (this.timeToStart) {
       this.seekToTimestamp(this.timeToStart);
@@ -393,7 +394,10 @@ export class DynamicVideoController {
     }
 
     if (listener) {
-      this.canPlayListener = listener;
+      this.canPlayListener = () => {
+        this.canPlay = true;
+        listener();
+      };
       this.playerController.on("canplay", this.canPlayListener);
     }
   }
@@ -405,8 +409,11 @@ export class DynamicVideoController {
     }
 
     if (listener) {
-      this.playerProgressListener = () =>
-        listener(this.getProgress(this.playerController.currentTime() || 0));
+      this.playerProgressListener = () => {
+        if (this.canPlay) {
+          listener(this.getProgress(this.playerController.currentTime() || 0));
+        }
+      };
       this.playerController.on("timeupdate", this.playerProgressListener);
     }
   }