@hyperframes/studio 0.8.72 → 0.8.73

package/src/player/lib/timelineDOM.test.ts

@@ -7,6 +7,7 @@ import {
   mergeTimelineElementsPreservingDowngrades,
 } from "./timelineDOM";
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
+import { computeResizePreview } from "../components/timelineClipDragPreview";
 import { invalidateGroupInfoCache } from "./timelineGroupInfo";
 import type { TimelineElement } from "../store/playerStore";
 
@@ -392,3 +393,88 @@ describe("audio FX attributes on parsed elements", () => {
     expect(bgm?.automation).toBeUndefined();
   });
 });
+
+// A composition clip trimmed by 30 px collapsed to its first nested video's 1.77 s: that length capped the trim.
+describe("a composition clip's source length", () => {
+  const scene = `
+    <div data-composition-id="root">
+      <div id="host" data-composition-id="scene" data-composition-src="scene.html"
+        data-start="0" data-duration="18" data-track-index="1">
+        <div data-composition-id="scene">
+          <video id="bg" src="bg.mp4" data-source-duration="1.77" data-start="2" data-duration="1.75"></video>
+        </div>
+      </div>
+      <div id="wrapper" class="clip" data-start="0" data-duration="3" data-track-index="2">
+        <video src="talk.mp4" data-source-duration="4"></video>
+      </div>
+    </div>
+  `;
+
+  it("is not taken from media inside the composition, parsed from the DOM", () => {
+    const parsed = parseTimelineFromDOM(makeDoc(scene), 18);
+    const host = parsed.find((entry) => entry.domId === "host");
+    expect(host?.sourceDuration).toBeUndefined();
+    expect(host?.tag).not.toBe("video");
+    expect(parsed.find((entry) => entry.domId === "wrapper")?.sourceDuration).toBe(4);
+  });
+
+  it("does not cap trimming the composition's end at that media's length", () => {
+    const host = parseTimelineFromDOM(makeDoc(scene), 18).find((entry) => entry.domId === "host");
+    const trimmed = computeResizePreview(
+      {
+        element: host!,
+        edge: "end",
+        originClientX: 360,
+        previewStart: 0,
+        previewDuration: 18,
+        started: true,
+      },
+      330,
+      { scroll: null, pps: 20, buildSnapTargets: () => [] },
+    );
+    expect(trimmed.previewDuration).toBeCloseTo(16.5, 3);
+  });
+
+  it("is not taken from media inside the composition, from the runtime manifest", () => {
+    const doc = makeDoc(scene);
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "host",
+        label: "Scene",
+        kind: "composition",
+        tagName: "div",
+        start: 0,
+        duration: 18,
+        track: 1,
+        compositionId: "scene",
+        parentCompositionId: "root",
+        compositionSrc: "scene.html",
+        playbackStart: null,
+        playbackRate: null,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl: doc.getElementById("host"),
+    });
+    expect(element.sourceDuration).toBeUndefined();
+    expect(element.src).toBeUndefined();
+  });
+
+  it("still shows an inline composition's image as its thumbnail", () => {
+    const parsed = parseTimelineFromDOM(
+      makeDoc(`
+        <div data-composition-id="root">
+          <div id="card" data-composition-id="card" data-start="0" data-duration="5" data-track-index="1">
+            <img src="card.png" />
+          </div>
+        </div>
+      `),
+      5,
+    );
+    const card = parsed.find((entry) => entry.domId === "card");
+    expect(card?.tag).toBe("img");
+    expect(card?.src).toBe("card.png");
+    expect(card?.sourceDuration).toBeUndefined();
+  });
+});

package/src/player/lib/timelineDOM.ts

@@ -346,11 +346,11 @@ export function parseTimelineFromDOM(
     if (compSrc) {
       entry.compositionSrc = compSrc;
     } else if (compId && compId !== rootComp?.getAttribute("data-composition-id")) {
-      // Inline composition — expose inner video for thumbnails
-      const innerVideo = el.querySelector("video[src]");
-      if (innerVideo) {
-        entry.src = innerVideo.getAttribute("src") || undefined;
-        entry.tag = "video";
+      // Inline composition — expose inner video or image for thumbnails
+      const innerMedia = el.querySelector("video[src], img[src]");
+      if (innerMedia) {
+        entry.src = innerMedia.getAttribute("src") || undefined;
+        entry.tag = innerMedia.tagName === "IMG" ? "img" : "video";
       }
     }
     if (entry.kind === "composition") {

package/src/player/lib/timelineElementHelpers.ts

@@ -146,11 +146,21 @@ function isHtmlElement(el: Element): el is HTMLElement {
   return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
 }
 
+function isCompositionHost(el: Element): boolean {
+  return (
+    el.hasAttribute("data-composition-id") ||
+    el.hasAttribute("data-composition-src") ||
+    el.hasAttribute("data-composition-file")
+  );
+}
+
 export function resolveMediaElement(el: Element): HTMLMediaElement | HTMLImageElement | null {
   const win = el.ownerDocument.defaultView ?? window;
   const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
   const ImageElementCtor = win.HTMLImageElement ?? globalThis.HTMLImageElement;
   if (el instanceof MediaElementCtor || el instanceof ImageElementCtor) return el;
+  // A composition's media belongs to its own timeline, not the clip's: its length would cap a trim.
+  if (isCompositionHost(el)) return null;
   const candidate = el.querySelector("video, audio, img");
   return candidate instanceof MediaElementCtor || candidate instanceof ImageElementCtor
     ? candidate