From 3055143cf14316c1cf7b83e35177b0166d83b7dd Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sun, 8 Feb 2026 00:24:22 +1300
Subject: [PATCH] fix: apply loopCount in videoStitch regenerateNode path

The loopCount (1x/2x/3x) feature was only applied in executeWorkflow()
but not in regenerateNode(), which is the code path triggered by
clicking the "Stitch" button. This adds the blob duplication logic to
both code paths and includes the UI controls and type definitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/VideoStitchNode.tsx | 52 +++++++++++++++++-------
 src/store/utils/nodeDefaults.ts          |  1 +
 src/store/workflowStore.ts               | 21 +++++++++-
 src/types/nodes.ts                       |  1 +
 4 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/nodes/VideoStitchNode.tsx b/src/components/nodes/VideoStitchNode.tsx
index 2f3ef73d..9ae54545 100644
--- a/src/components/nodes/VideoStitchNode.tsx
+++ b/src/components/nodes/VideoStitchNode.tsx
@@ -431,16 +431,16 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
       {renderHandles()}
 
       <div className="flex-1 flex flex-col min-h-0 gap-2">
-        {/* Filmstrip UI */}
-        <div className="flex-1 flex flex-col min-h-0 gap-2">
+        {/* Filmstrip + controls area (shrink-0: only takes space it needs) */}
+        <div className="shrink-0 flex flex-col gap-2">
           {orderedClips.length === 0 ? (
-            <div className="flex-1 flex items-center justify-center border border-dashed border-neutral-600 rounded">
+            <div className="h-16 flex items-center justify-center border border-dashed border-neutral-600 rounded">
               <span className="text-[10px] text-neutral-500">Connect videos to stitch</span>
             </div>
           ) : (
             <>
               {/* Filmstrip */}
-              <div className="flex-1 overflow-y-auto nowheel grid grid-cols-4 content-start gap-2 p-2 bg-neutral-900/50 rounded">
+              <div className="overflow-y-auto nowheel grid grid-cols-4 content-start gap-2 p-2 bg-neutral-900/50 rounded">
                 {orderedClips.map((clip) => {
                   const thumbnail = thumbnails.get(clip.edgeId);
                   return (
@@ -511,14 +511,6 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
                 })}
               </div>
 
-              {/* Stitch button */}
-              <button
-                onClick={handleStitch}
-                disabled={orderedClips.length < 2 || nodeData.status === "loading" || isRunning}
-                className="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:bg-neutral-700 disabled:text-neutral-500 disabled:cursor-not-allowed rounded text-white text-xs font-medium transition-colors"
-              >
-                {nodeData.status === "loading" ? "Processing..." : "Stitch"}
-              </button>
             </>
           )}
         </div>
@@ -549,16 +541,16 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
           </div>
         )}
 
-        {/* Output preview */}
+        {/* Output preview (flex-1: grows with node) */}
         {nodeData.outputVideo && nodeData.status !== "loading" && (
-          <div className="relative w-full">
+          <div className="relative flex-1 min-h-0">
             <video
               src={nodeData.outputVideo}
               controls
               autoPlay
               loop
               muted
-              className="w-full h-auto max-h-40 object-contain rounded"
+              className="w-full h-full object-contain rounded"
               playsInline
             />
             <button
@@ -572,6 +564,36 @@ export function VideoStitchNode({ id, data, selected }: NodeProps<VideoStitchNod
             </button>
           </div>
         )}
+
+        {/* Controls row: Loop selector + Stitch button (below video, right-aligned) */}
+        {orderedClips.length > 0 && (
+          <div className="shrink-0 flex items-center justify-end gap-2">
+            <div className="flex items-center gap-1">
+              <span className="text-[10px] text-neutral-400">Loop</span>
+              {([1, 2, 3] as const).map((count) => (
+                <button
+                  key={count}
+                  onClick={() => updateNodeData(id, { loopCount: count })}
+                  className={`nodrag px-1.5 py-0.5 rounded text-[10px] font-medium transition-colors ${
+                    (nodeData.loopCount || 1) === count
+                      ? "bg-blue-600 text-white"
+                      : "bg-neutral-700 text-neutral-400 hover:bg-neutral-600 hover:text-neutral-300"
+                  }`}
+                >
+                  {count}x
+                </button>
+              ))}
+            </div>
+
+            <button
+              onClick={handleStitch}
+              disabled={orderedClips.length < 2 || nodeData.status === "loading" || isRunning}
+              className="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:bg-neutral-700 disabled:text-neutral-500 disabled:cursor-not-allowed rounded text-white text-xs font-medium transition-colors"
+            >
+              {nodeData.status === "loading" ? "Processing..." : "Stitch"}
+            </button>
+          </div>
+        )}
       </div>
     </BaseNode>
   );
diff --git a/src/store/utils/nodeDefaults.ts b/src/store/utils/nodeDefaults.ts
index 96133b82..f5657549 100644
--- a/src/store/utils/nodeDefaults.ts
+++ b/src/store/utils/nodeDefaults.ts
@@ -195,6 +195,7 @@ export const createDefaultNodeData = (type: NodeType): WorkflowNodeData => {
         clips: [],
         clipOrder: [],
         outputVideo: null,
+        loopCount: 1,
         status: "idle",
         error: null,
         progress: 0,
diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts
index f7acc5b0..a8db1854 100644
--- a/src/store/workflowStore.ts
+++ b/src/store/workflowStore.ts
@@ -2036,6 +2036,15 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
                 inputs.videos.map((v) => fetch(v).then((r) => r.blob()))
               );
 
+              // Duplicate blobs based on loopCount (2x or 3x repeats the sequence)
+              // Each copy must be a new Blob so BlobSource can read it independently
+              const loopCount = nodeData.loopCount || 1;
+              const loopedBlobs = loopCount > 1
+                ? Array.from({ length: loopCount }, () =>
+                    videoBlobs.map((b) => new Blob([b], { type: b.type }))
+                  ).flat()
+                : videoBlobs;
+
               // Prepare audio if connected
               let audioData = null;
               if (inputs.audio.length > 0 && inputs.audio[0]) {
@@ -2053,7 +2062,7 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
               // Stitch videos
               const { stitchVideosAsync } = await import('@/hooks/useStitchVideos');
               const outputBlob = await stitchVideosAsync(
-                videoBlobs,
+                loopedBlobs,
                 audioData,
                 (progress) => {
                   updateNodeData(node.id, { progress: progress.progress });
@@ -2962,6 +2971,14 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
             inputs.videos.map((v) => fetch(v).then((r) => r.blob()))
           );
 
+          // Duplicate blobs based on loopCount (2x or 3x repeats the sequence)
+          const loopCount = nodeData.loopCount || 1;
+          const loopedBlobs = loopCount > 1
+            ? Array.from({ length: loopCount }, () =>
+                videoBlobs.map((b) => new Blob([b], { type: b.type }))
+              ).flat()
+            : videoBlobs;
+
           let audioData = null;
           if (inputs.audio.length > 0 && inputs.audio[0]) {
             const { prepareAudioAsync } = await import('@/hooks/useAudioMixing');
@@ -2976,7 +2993,7 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
 
           const { stitchVideosAsync } = await import('@/hooks/useStitchVideos');
           const outputBlob = await stitchVideosAsync(
-            videoBlobs,
+            loopedBlobs,
             audioData,
             (progress) => {
               updateNodeData(nodeId, { progress: progress.progress });
diff --git a/src/types/nodes.ts b/src/types/nodes.ts
index 9cf5b111..cf02c5b9 100644
--- a/src/types/nodes.ts
+++ b/src/types/nodes.ts
@@ -233,6 +233,7 @@ export interface VideoStitchNodeData extends BaseNodeData {
   clips: VideoStitchClip[];       // Ordered clip sequence for filmstrip
   clipOrder: string[];            // Edge IDs in user-defined order (drag reorder)
   outputVideo: string | null;     // Stitched video blob URL or data URL
+  loopCount: 1 | 2 | 3;          // How many times to repeat the clip sequence (1 = no loop)
   status: NodeStatus;
   error: string | null;
   progress: number;               // 0-100 processing progress