fix: offset nested template video timing

Author: miguel-heygen

packages/cli/src/commands/snapshot.test.ts

@@ -5,6 +5,7 @@ import {
   formatSnapshotTimestamp,
   parseZoomScale,
   requireSnapshotFfmpeg,
+  resolveSnapshotVideoClipStart,
   resolveSnapshotVideoFrameTime,
   tailFrameTime,
 } from "./snapshot.js";
@@ -154,6 +155,26 @@ describe("resolveSnapshotVideoFrameTime", () => {
   });
 });
 
+describe("resolveSnapshotVideoClipStart", () => {
+  it("offsets a scene-local video start by its later template host", () => {
+    expect(
+      resolveSnapshotVideoClipStart({
+        authoredStart: 0,
+        templateHostStart: 3,
+      }),
+    ).toBe(3);
+  });
+
+  it("keeps top-level video starts unchanged", () => {
+    expect(
+      resolveSnapshotVideoClipStart({
+        authoredStart: 3,
+        templateHostStart: null,
+      }),
+    ).toBe(3);
+  });
+});
+
 describe("computeSnapshotTimes (FINDING [7]: tail is always captured)", () => {
   it("default frames: last point is the readable tail, never exact duration", () => {
     const { times, appendedTail } = computeSnapshotTimes(8, { frames: 5 });

packages/cli/src/commands/snapshot.ts

@@ -93,6 +93,16 @@ export function resolveSnapshotVideoFrameTime(input: {
   return Math.max(0, Math.min(relativeTime, sourceEnd - 1 / 30));
 }
 
+/** Convert a video's scene-local authored start into root timeline time when
+ * it lives inside a template-mounted composition host. Top-level videos have
+ * no template host and therefore retain their authored start unchanged. */
+export function resolveSnapshotVideoClipStart(input: {
+  authoredStart: number;
+  templateHostStart: number | null;
+}): number {
+  return input.authoredStart + (input.templateHostStart ?? 0);
+}
+
 export function requireSnapshotFfmpeg(ffmpegPath: string | undefined): string {
   if (ffmpegPath) return ffmpegPath;
   throw new Error(
@@ -399,10 +409,16 @@ async function captureSnapshots(
         if (cameraExpr) await page.evaluate(cameraExpr);
 
         if (injectVideoFramesBatch && syncVideoFrameVisibility) {
-          const candidates = await page.evaluate((t: number) => {
+          const candidates = await page.evaluate(() => {
             return Array.from(document.querySelectorAll("video[data-start]")).map((el) => {
               const v = el as HTMLVideoElement;
-              const start = parseFloat(v.dataset.start ?? "0") || 0;
+              const authoredStart = parseFloat(v.dataset.start ?? "0") || 0;
+              const templateHost = v.closest<HTMLElement>(
+                "[data-composition-src], [data-composition-file]",
+              );
+              const templateHostStart = templateHost
+                ? parseFloat(templateHost.dataset.start ?? "0") || 0
+                : null;
               const rawRate = v.defaultPlaybackRate;
               const playbackRate =
                 Number.isFinite(rawRate) && rawRate > 0 ? Math.max(0.1, Math.min(5, rawRate)) : 1;
@@ -416,30 +432,40 @@ async function captureSnapshots(
                   : srcDur > 0
                     ? Math.max(0, (srcDur - mediaStart) / playbackRate)
                     : Number.POSITIVE_INFINITY;
-              let relTime = (t - start) * playbackRate + mediaStart;
-              if (v.loop && srcDur > mediaStart && relTime >= srcDur) {
-                relTime = mediaStart + ((relTime - mediaStart) % (srcDur - mediaStart));
-              }
               return {
                 id: v.id,
                 src: v.currentSrc || v.src,
-                start,
+                authoredStart,
+                templateHostStart,
                 duration,
                 srcDuration: srcDur,
-                relTime,
+                playbackRate,
+                mediaStart,
+                loop: v.loop,
               };
             });
-          }, time);
+          });
           const active = candidates.flatMap((candidate) => {
+            const start = resolveSnapshotVideoClipStart(candidate);
+            let relTime = (time - start) * candidate.playbackRate + candidate.mediaStart;
+            if (
+              candidate.loop &&
+              candidate.srcDuration > candidate.mediaStart &&
+              relTime >= candidate.srcDuration
+            ) {
+              relTime =
+                candidate.mediaStart +
+                ((relTime - candidate.mediaStart) % (candidate.srcDuration - candidate.mediaStart));
+            }
             if (!candidate.id || !candidate.src) return [];
             const frameTime = resolveSnapshotVideoFrameTime({
               globalTime: time,
-              clipStart: candidate.start,
+              clipStart: start,
               clipDuration: candidate.duration,
-              relativeTime: candidate.relTime,
+              relativeTime: relTime,
               sourceDuration: candidate.srcDuration,
             });
-            return frameTime === null ? [] : [{ ...candidate, relTime: frameTime }];
+            return frameTime === null ? [] : [{ ...candidate, start, relTime: frameTime }];
           });
 
           const updates: Array<{ videoId: string; dataUri: string }> = [];

packages/core/src/runtime/init.test.ts

@@ -915,6 +915,55 @@ describe("initSandboxRuntimeModular", () => {
     expect(video.currentTime).toBe(5);
   });
 
+  it("keeps a scene-local video visible inside a later template-mounted host", () => {
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "main");
+    root.setAttribute("data-root", "true");
+    root.setAttribute("data-start", "0");
+    root.setAttribute("data-duration", "6");
+    root.setAttribute("data-width", "360");
+    root.setAttribute("data-height", "640");
+    document.body.appendChild(root);
+
+    const firstHost = document.createElement("div");
+    firstHost.setAttribute("data-composition-id", "first");
+    firstHost.setAttribute("data-composition-file", "compositions/first.html");
+    firstHost.setAttribute("data-start", "0");
+    firstHost.setAttribute("data-duration", "3");
+    root.appendChild(firstHost);
+
+    const firstVideo = document.createElement("video");
+    firstVideo.setAttribute("data-start", "0");
+    firstVideo.setAttribute("data-duration", "3");
+    firstHost.appendChild(firstVideo);
+
+    const secondHost = document.createElement("div");
+    secondHost.setAttribute("data-composition-id", "second");
+    secondHost.setAttribute("data-composition-file", "compositions/second.html");
+    secondHost.setAttribute("data-start", "3");
+    secondHost.setAttribute("data-duration", "3");
+    root.appendChild(secondHost);
+
+    const secondVideo = document.createElement("video");
+    secondVideo.setAttribute("data-start", "0");
+    secondVideo.setAttribute("data-duration", "3");
+    secondHost.appendChild(secondVideo);
+
+    window.__timelines = {
+      main: createMockTimeline(6),
+      first: createMockTimeline(3),
+      second: createMockTimeline(3),
+    };
+
+    initSandboxRuntimeModular();
+    window.__player?.renderSeek(4);
+
+    expect(firstHost.style.visibility).toBe("hidden");
+    expect(firstVideo.style.visibility).toBe("hidden");
+    expect(secondHost.style.visibility).toBe("visible");
+    expect(secondVideo.style.visibility).toBe("visible");
+  });
+
   it("updates visibility for timed elements inside nested compositions", () => {
     const root = document.createElement("div");
     root.setAttribute("data-composition-id", "main");

packages/core/src/runtime/init.ts

@@ -628,10 +628,16 @@ export function initSandboxRuntimeModular(): void {
       return false;
     }
 
-    const start =
-      tag === "video" || tag === "audio"
-        ? resolveMediaStartSeconds(rawNode, 0)
-        : resolveStartForElement(rawNode, 0);
+    const isMedia = tag === "video" || tag === "audio";
+    const mediaCompositionHost = isMedia
+      ? rawNode.closest("[data-composition-src], [data-composition-file]")
+      : null;
+    const mediaCompositionStart = mediaCompositionHost
+      ? resolveStartForElement(mediaCompositionHost, 0)
+      : 0;
+    const start = isMedia
+      ? resolveMediaStartSeconds(rawNode, mediaCompositionStart)
+      : resolveStartForElement(rawNode, 0);
     let duration = resolveDurationForElement(rawNode);
     const compId = rawNode.getAttribute("data-composition-id");
     if (compId) {