heygen-com · miguel-heygen · May 23, 2026 · May 23, 2026 · May 23, 2026
diff --git a/packages/engine/src/services/videoFrameExtractor.test.ts b/packages/engine/src/services/videoFrameExtractor.test.ts
@@ -17,6 +17,7 @@ import {
   parseImageElements,
   extractAllVideoFrames,
   createFrameLookupTable,
+  getFrameAtTime,
   resolveProjectRelativeSrc,
   codecMayHaveAlpha,
   decoderForCodec,
@@ -239,7 +240,7 @@ describe("FrameLookupTable", () => {
     expect(table.getActiveFramePayloads(4.5).get("hero")?.frameIndex).toBe(15);
   });
 
-  it("does not hold stale frames for non-looping clips after extracted frames end", () => {
+  it("holds last frame for non-looping clips when source is shorter than data-duration", () => {
     const table = createFrameLookupTable(
       [
         {
@@ -256,7 +257,20 @@ describe("FrameLookupTable", () => {
     );
 
     expect(table.getActiveFramePayloads(0.5).has("hero")).toBe(true);
-    expect(table.getActiveFramePayloads(1.5).has("hero")).toBe(false);
+    const pastEnd = table.getActiveFramePayloads(1.5);
+    expect(pastEnd.has("hero")).toBe(true);
+    expect(pastEnd.get("hero")!.frameIndex).toBe(29);
+    const nearTimelineEnd = table.getActiveFramePayloads(4.9);
+    expect(nearTimelineEnd.has("hero")).toBe(true);
+    expect(nearTimelineEnd.get("hero")!.frameIndex).toBe(29);
+  });
+
+  it("getFrameAtTime returns last frame for non-looping video past source end", () => {
+    const extracted = fakeExtracted(90, 30); // 3s @ 30fps
+    expect(getFrameAtTime(extracted, 1.0, 0, false, 0)).toBe("frame-30.jpg");
+    expect(getFrameAtTime(extracted, 5.0, 0, false, 0)).toBe("frame-89.jpg");
+    expect(getFrameAtTime(extracted, 10.0, 0, false, 0)).toBe("frame-89.jpg");
+    expect(getFrameAtTime(extracted, -1.0, 0, false, 0)).toBeNull();
   });
 });
 

diff --git a/packages/engine/src/services/videoFrameExtractor.ts b/packages/engine/src/services/videoFrameExtractor.ts
@@ -925,10 +925,10 @@ export function getFrameAtTime(
     localTime %= loopDuration;
   }
   const frameIndex = Math.floor(localTime * extracted.fps);
-  if (loop && frameIndex >= extracted.totalFrames && extracted.totalFrames > 0) {
+  if (frameIndex >= extracted.totalFrames && extracted.totalFrames > 0) {
     return extracted.framePaths.get(extracted.totalFrames - 1) || null;
   }
-  if (frameIndex < 0 || frameIndex >= extracted.totalFrames) return null;
+  if (frameIndex < 0) return null;
   return extracted.framePaths.get(frameIndex) || null;
 }
 
@@ -1035,7 +1035,7 @@ export class FrameLookupTable {
         localTime %= loopDuration;
       }
       const frameIndex = Math.floor(localTime * video.extracted.fps);
-      if (video.loop && frameIndex >= video.extracted.totalFrames) {
+      if (frameIndex >= video.extracted.totalFrames && video.extracted.totalFrames > 0) {
         const framePath = video.extracted.framePaths.get(video.extracted.totalFrames - 1);
         if (framePath) {
           frames.set(videoId, { framePath, frameIndex: video.extracted.totalFrames - 1 });

diff --git a/packages/producer/tests/video-hold-last-frame/meta.json b/packages/producer/tests/video-hold-last-frame/meta.json
@@ -0,0 +1,13 @@
+{
+  "name": "video-hold-last-frame",
+  "description": "Regression: non-looping video source shorter than data-duration must hold the last frame instead of going black. Source is 2s, data-duration is 4s.",
+  "tags": ["regression", "video", "hold-last-frame"],
+  "minPsnr": 30,
+  "maxFrameFailures": 0,
+  "minAudioCorrelation": 0,
+  "maxAudioLagWindows": 1,
+  "renderConfig": {
+    "fps": 30,
+    "workers": 1
+  }
+}
diff --git a/packages/producer/tests/video-hold-last-frame/output/compiled.html b/packages/producer/tests/video-hold-last-frame/output/compiled.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
+<style>
+  body { margin: 0; background: #1a1a2e; width: 320px; height: 240px; overflow: hidden; }
+  .label { position: absolute; top: 10px; left: 10px; color: #fff; font: bold 16px system-ui, sans-serif; }
+</style>
+</head>
+<body>
+  <div id="root" data-composition-id="video-hold-last-frame" data-width="320" data-height="240" data-start="0" data-duration="4">
+    <video id="hero" src="assets/short-clip.mp4" data-start="0" data-duration="2" data-has-audio="false" autoplay muted style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;" data-end="2"></video>
+    <div class="label" data-start="0" data-duration="4">hold-last-frame test</div>
+  </div>
+
+<script>window.__timelines = window.__timelines || {};</script></body>
+</html>
diff --git a/packages/producer/tests/video-hold-last-frame/output/output.mp4 b/packages/producer/tests/video-hold-last-frame/output/output.mp4
diff --git a/packages/producer/tests/video-hold-last-frame/src/assets/short-clip.mp4 b/packages/producer/tests/video-hold-last-frame/src/assets/short-clip.mp4
diff --git a/packages/producer/tests/video-hold-last-frame/src/index.html b/packages/producer/tests/video-hold-last-frame/src/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  body { margin: 0; background: #1a1a2e; width: 320px; height: 240px; overflow: hidden; }
+  .label { position: absolute; top: 10px; left: 10px; color: #fff; font: bold 16px system-ui, sans-serif; }
+</style>
+</head>
+<body>
+  <div id="root" data-composition-id="video-hold-last-frame" data-width="320" data-height="240" data-start="0" data-duration="4">
+    <video
+      id="hero"
+      src="assets/short-clip.mp4"
+      data-start="0"
+      data-duration="4"
+      data-has-audio="false"
+      autoplay
+      muted
+      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"
+    ></video>
+    <div class="label" data-start="0" data-duration="4">hold-last-frame test</div>
+  </div>
+  <script>window.__timelines = window.__timelines || {};</script>
+</body>
+</html>