fix(core): a scene's media plays past a shorter root animation again

Author: miguel-heygen

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

@@ -304,6 +304,23 @@ describe("runtime sub-composition placement", () => {
     expect(sourceTimeOf("scene-split-split", "v3")).toBe(4);
   });
 
+  it("lets a scene's video play past a shorter root animation when the root authors no length", () => {
+    document.body.innerHTML =
+      `<div data-composition-id="main" data-root="true">` +
+      `<div class="clip" data-composition-id="scene" data-composition-file="compositions/scene.html" data-start="0" data-duration="10">` +
+      `<video id="long" data-start="0" data-duration="10"></video></div></div>`;
+    stubDuration(video("long"), 10);
+    Object.defineProperty(video("long"), "currentTime", { value: -1, writable: true });
+    video("long").play = vi.fn(() => Promise.resolve());
+    video("long").pause = vi.fn();
+    // The root's own timeline is a 2 s title fade.
+    window.__timelines = { main: createMockTimeline(2) };
+    initSandboxRuntimeModular();
+
+    const at = (t: number) => (window.__player?.renderSeek(t), video("long").currentTime);
+    expect([at(1), at(5), at(8)]).toEqual([1, 5, 8]);
+  });
+
   it("keeps a video in a composition nested inside the half silent until the half starts", () => {
     loadSecondHalf(
       `<div data-composition-id="inner" data-composition-file="compositions/inner.html" data-start="0" data-duration="12">` +

packages/core/src/runtime/startResolver.ts

@@ -53,60 +53,51 @@ export function createRuntimeStartTimeResolver(params: {
     );
   };
 
-  const resolveDurationForElement = (element: Element): number | null => {
-    const cached = durationCache.get(element);
-    if (cached !== undefined) return cached;
-    let resolved: number | null = null;
-    const durationTiming = resolveAuthoredTimingWindow({
+  const authoredAttr = (element: Element, name: string) =>
+    includeAuthoredTimingAttrs ? element.getAttribute(name) : null;
+
+  const resolveAuthoredDuration = (element: Element): number | null =>
+    resolveAuthoredTimingWindow({
       start: 0,
       duration: element.getAttribute("data-duration"),
-      authoredDuration: includeAuthoredTimingAttrs
-        ? element.getAttribute("data-hf-authored-duration")
-        : null,
-    });
-    if (durationTiming?.duration != null && durationTiming.duration > 0) {
-      resolved = durationTiming.duration;
+      authoredDuration: authoredAttr(element, "data-hf-authored-duration"),
+    })?.duration ??
+    resolveAuthoredTimingWindow({
+      start: resolveStartForElementInternal(element, 0),
+      end: element.getAttribute("data-end"),
+      authoredEnd: authoredAttr(element, "data-hf-authored-end"),
+    })?.duration ??
+    null;
+
+  const positive = (value: number | null | undefined): number | null =>
+    value != null && Number.isFinite(value) && value > 0 ? value : null;
+
+  const resolveRegisteredTimelineDuration = (element: Element): number | null => {
+    const timeline = timelineRegistry[element.getAttribute("data-composition-id") ?? ""];
+    if (!timeline || typeof timeline.duration !== "function") return null;
+    try {
+      return positive(Number(timeline.duration()));
+    } catch (err) {
+      // ignore broken timeline impls
+      swallow("runtime.startResolver.site1", err);
+      return null;
     }
-    if (resolved == null || resolved <= 0) {
-      const start = resolveStartForElementInternal(element, 0);
-      const endTiming = resolveAuthoredTimingWindow({
-        start,
-        end: element.getAttribute("data-end"),
-        authoredEnd: includeAuthoredTimingAttrs
-          ? element.getAttribute("data-hf-authored-end")
+  };
+
+  const resolveDurationForElement = (element: Element): number | null => {
+    const cached = durationCache.get(element);
+    if (cached !== undefined) return cached;
+    const resolved =
+      resolveAuthoredDuration(element) ??
+      positive(
+        isMediaElement(element)
+          ? resolveNaturalMediaTimelineDuration(element, element.duration)
           : null,
-      });
-      if (endTiming?.duration != null && endTiming.duration > 0) {
-        resolved = endTiming.duration;
-      }
-    }
-    if ((resolved == null || resolved <= 0) && isMediaElement(element)) {
-      resolved = resolveNaturalMediaTimelineDuration(element, element.duration);
-    }
-    if (resolved == null || resolved <= 0) resolved = resolveTimedImageDurationSeconds(element);
-    if (resolved == null || resolved <= 0) {
-      const compositionId = element.getAttribute("data-composition-id");
-      if (compositionId) {
-        const timeline = timelineRegistry[compositionId] ?? null;
-        if (timeline && typeof timeline.duration === "function") {
-          try {
-            const timelineDuration = Number(timeline.duration());
-            if (Number.isFinite(timelineDuration) && timelineDuration > 0) {
-              resolved = timelineDuration;
-            }
-          } catch (err) {
-            // ignore broken timeline impls
-            swallow("runtime.startResolver.site1", err);
-          }
-        }
-      }
-    }
-    if (resolved != null && Number.isFinite(resolved) && resolved > 0) {
-      durationCache.set(element, resolved);
-      return resolved;
-    }
-    durationCache.set(element, null);
-    return null;
+      ) ??
+      positive(resolveTimedImageDurationSeconds(element)) ??
+      resolveRegisteredTimelineDuration(element);
+    durationCache.set(element, resolved);
+    return resolved;
   };
 
   // A mounted composition root without its own `data-start` takes its timing from the host it was
@@ -201,12 +192,13 @@ export function createRuntimeStartTimeResolver(params: {
     });
   };
 
+  // Only an authored length cuts, as in the render; a GSAP length would cut what still plays.
   const resolveHostSlotsForElement = (element: Element): HostSlot[] => {
     const slots: HostSlot[] = [];
     let root = element.closest("[data-composition-id]");
     for (; root; root = root.parentElement?.closest("[data-composition-id]") ?? null) {
       const start = resolveStartForElementInternal(root, 0);
-      const duration = resolveDurationForElement(root);
+      const duration = resolveAuthoredDuration(root);
       slots.push({
         start,
         end: duration ? start + duration : Infinity,