fixed now testing (#43)

src/KonvaApp/Engine.ts

@@ -245,11 +245,13 @@ export class Engine {
       }
       const node = nodes.values().next().value;
       try {
-        const nodeChromaProps = node.getChroma();
-        uiAccess.dialogChromakey.show({
-          isChromakeyEnabled: nodeChromaProps.isChromakeyEnabled,
-          chromakeyColor: nodeChromaProps.chromakeyColor,
-        });
+        if (node instanceof VideoNode) {
+          const nodeChromaProps = node.getChroma();
+          uiAccess.dialogChromakey.show({
+            isChromakeyEnabled: nodeChromaProps.isChromakeyEnabled,
+            chromakeyColor: nodeChromaProps.chromakeyColor,
+          });
+        }
       } catch {
         uiAccess.dialogError.show({
           title: "Error: Chroma Key",
@@ -275,12 +277,18 @@ export class Engine {
         .getSelectedNodes()
         .values()
         .next().value;
-      node.setChroma(chromakeyProps.isChromakeyEnabled);
-      node.setChromaColor(
-        chromakeyProps.chromakeyColor?.red || 120,
-        chromakeyProps.chromakeyColor?.blue || 150,
-        chromakeyProps.chromakeyColor?.green || 120,
-      );
+      if (!node) {
+        console.log("Node was not returned.");
+        return;
+      }
+      if (node instanceof VideoNode) {
+        node.setChroma(chromakeyProps.isChromakeyEnabled);
+        node.setChromaColor(
+          chromakeyProps.chromakeyColor?.red || 120,
+          chromakeyProps.chromakeyColor?.blue || 150,
+          chromakeyProps.chromakeyColor?.green || 120,
+        );
+      }
     });
     uiEvents.aiStylize.onRequest(async (data) => {
       console.log("Engine heard AI Stylize request: ", data);
@@ -374,7 +382,9 @@ export class Engine {
       imageFile: imageFile,
       selectionManagerRef: this.selectionManager,
     });
+
     this.createNode(imageNode);
+    this.renderEngine.addNodes(imageNode);
   }
 
   public addVideo(url: string) {
@@ -430,6 +440,10 @@ export class Engine {
   toggleLockNodes() {
     const nodes = this.selectionManager.getSelectedNodes();
     const node = nodes.values().next().value;
+    if (!node) {
+      console.log("Node Not Found for Locking");
+      return;
+    }
     if (node.isLocked()) {
       const command = new UnlockNodesCommand({
         nodes: this.selectionManager.getSelectedNodes(),

src/KonvaApp/Nodes/VideoNode.ts

@@ -50,7 +50,6 @@ export class VideoNode extends NetworkedNodeContext {
   ];
 
   private frameDidFinishSeeking: Promise<void>;
-  private finishedLoadingOnStart: Promise<void>;
 
   async setProcessing() {
     this.isProcessing = true;

src/KonvaApp/RenderingPrimitives/RenderEngine.ts

@@ -55,6 +55,7 @@ export class RenderEngine {
 
   public videoLoadingCanvas: VideoNode | undefined;
 
+  public fps: number = 24;
   constructor({
     width,
     height,
@@ -99,6 +100,8 @@ export class RenderEngine {
     this.mediaLayerRef = mediaLayerRef;
 
     this.port = undefined;
+
+    this.fps = 24;
     this.captureCanvas = new Konva.Rect({
       x: this.positionX,
       y: this.positionY,
@@ -111,7 +114,7 @@ export class RenderEngine {
     });
     this.captureCanvas.addName("CaptureCanvas");
 
-    this.upperMaxFrames = 7 * 24;
+    this.upperMaxFrames = 7 * this.fps; // seconds by fps
 
     this.bgLayerRef.add(this.captureCanvas);
     // send back
@@ -289,6 +292,11 @@ export class RenderEngine {
 
   private findLongestVideoLength(): number {
     let maxLength = 0;
+    // could simplify this logic to ensure that imageNodes has number of frames.
+    if (this.imageNodes.length > 0 && this.videoNodes.length === 0) {
+      return this.fps * 3; // three seconds determine whether to change this
+    }
+
     this.videoNodes.forEach((node) => {
       const videoLength = node.getNumberFrames();
       if (videoLength > maxLength) {
@@ -334,6 +342,8 @@ export class RenderEngine {
       // error out if nodes are not all loaded.
       // todo remove when we have error handling + and ui
       var failed = false;
+
+      // if there are atleast 1 video node images are all covered.
       for (let i = 0; i < this.videoNodes.length; i++) {
         const item = this.videoNodes[i];
         if (!item.kNode) {
@@ -348,7 +358,6 @@ export class RenderEngine {
           setTimeout(this.startProcessing.bind(this), 1000);
           break;
         }
-
         item.setProcessing();
       }