Refactored to properly be async so there isn't a odd race condition.

src/KonvaApp/Engine.ts

@@ -50,7 +50,7 @@ export class Engine {
     this.setupStage();
   }
 
-  public setupStage() {
+  public async setupStage() {
     var textNode = new Konva.Text({
       x: 0,
       y: 0,
@@ -84,7 +84,7 @@ export class Engine {
     this.renderEngine.addNodes(videoNode);
 
     // Call this when
-    this.renderEngine.startProcessing();
+    //await this.renderEngine.startProcessing();
 
     //videoNode.simulatedLoading();
 

src/KonvaApp/Nodes/VideoNode.ts

@@ -48,7 +48,7 @@ export class VideoNode extends NetworkedNodeContext {
     "https://images-ng.pixai.art/images/orig/56dcbb5f-7a31-4328-b4ea-1312df6e77a0",
     "https://videos.pixai.art/f7df019d-79a2-4ed2-bb99-775c941f7ec6",
   ];
-  private frameDidFinishSeeking: (() => void) | undefined;
+  private frameDidFinishSeeking: Promise<void>;
   constructor(
     uuid: string = uuidv4(),
     offScreenCanvas: OffscreenCanvas,
@@ -76,7 +76,7 @@ export class VideoNode extends NetworkedNodeContext {
 
     this.videoComponent = document.createElement("video");
 
-    this.frameDidFinishSeeking = undefined;
+    this.frameDidFinishSeeking = new Promise<void>(() => {});
 
     this.videoComponent.onloadedmetadata = (event: Event) => {
       console.log("Loaded Metadata");
@@ -93,7 +93,7 @@ export class VideoNode extends NetworkedNodeContext {
       // reimplement using the function
       // ensure that this doesn't race.
       if (this.frameDidFinishSeeking) {
-        this.frameDidFinishSeeking();
+        this.frameDidFinishSeeking.then(() => {});
       }
     };
 
@@ -315,10 +315,10 @@ export class VideoNode extends NetworkedNodeContext {
   }
 
   // use sub milisecond for frames.
-  seek(second: number, doneSeeking: () => void) {
+  async seek(second: number) {
     // prevent interaction
 
-    console.log(`${this.didFinishLoading}`);
+    //console.log(`${this.didFinishLoading}`);
     if (this.didFinishLoading === false) {
       console.log("Didn't finish loading so cannot seek");
       return;
@@ -330,14 +330,22 @@ export class VideoNode extends NetworkedNodeContext {
         return;
       }
       console.log("Setting");
-      this.frameDidFinishSeeking = doneSeeking; // should trigger the next frame.
+
       this.videoComponent.currentTime = second;
-      this.videoComponent.seeking;
+
+      this.frameDidFinishSeeking = new Promise<void>((resolve, reject) => {
+        this.videoComponent.onseeked = (event: Event) => {
+          console.log("Seeked Finished");
+          // reimplement using the function
+          // ensure that this doesn't race.
+
+          resolve();
+        };
+      });
+
+      await this.frameDidFinishSeeking;
     } else {
       console.log("Video Not Seekable");
     }
   }
-
-  // grab frames
-  async render() {}
 }

src/KonvaApp/RenderEngine.ts

@@ -67,7 +67,7 @@ export class RenderEngine {
 
     // find the longest video
     const numberOfFrames = this.findLongestVideoLength();
-    this.processFrame();
+    await this.processFrame();
   }
 
   public stopProcessing() {
@@ -82,7 +82,9 @@ export class RenderEngine {
   private async processFrame() {
     if (!this.isProcessing) return;
 
-    this.videoNodes.forEach((videoNode: VideoNode) => {
+    for (let j = 0; j < this.videoNodes.length; j++) {
+      const videoNode = this.videoNodes[j];
+
       videoNode.stop();
       const numberOfFrames = videoNode.getNumberFrames();
 
@@ -94,31 +96,31 @@ export class RenderEngine {
         console.log(videoNode.duration);
 
         if (frameTime < videoNode.duration) {
-          videoNode.seek(frameTime, () => {
-            this.offScreenCanvas.width = videoNode.node.getSize().width;
-            this.offScreenCanvas.height = videoNode.node.getSize().height;
+          await videoNode.seek(frameTime);
+          this.offScreenCanvas.width = videoNode.node.getSize().width;
+          this.offScreenCanvas.height = videoNode.node.getSize().height;
 
-            if (this.context) {
-              this.context.drawImage(
-                videoNode.videoComponent,
-                0,
-                0,
-                this.offScreenCanvas.width,
-                this.offScreenCanvas.height,
-              );
-              this.frames.push(this.offScreenCanvas.transferToImageBitmap());
-              //   this.offScreenCanvas.convertToBlob().then((blob) => {
-              //     // Save or process the blob as needed
-              //     console.log("Frame saved as blob:", blob);
-              //     this.blobToFile(blob);
-              //   });
-            }
-          }); // end of seek
+          if (this.context) {
+            this.context.drawImage(
+              videoNode.videoComponent,
+              0,
+              0,
+              this.offScreenCanvas.width,
+              this.offScreenCanvas.height,
+            );
+            console.log("Pushing");
+            this.frames.push(this.offScreenCanvas.transferToImageBitmap());
+            //   this.offScreenCanvas.convertToBlob().then((blob) => {
+            //     // Save or process the blob as needed
+            //     console.log("Frame saved as blob:", blob);
+            //     this.blobToFile(blob);
+            //   });
+          }
         } // end of if
       } // end of for.
-    });
+    }
 
-    console.log(frames);
+    console.log(this.frames);
   }
 
   private blobToFile(blob: Blob) {