@hyperframes/studio 0.8.90 → 0.8.91

package/src/player/lib/timelineDOM.ts

@@ -12,6 +12,7 @@ import type { TimelineElement } from "../store/playerStore";
 import type { ClipManifestClip, IframeWindow, TimelineLike } from "./playbackTypes";
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
 import { readClipTiming } from "@hyperframes/core/composition-contract";
+import { createRuntimeStartTimeResolver } from "@hyperframes/core/runtime/start-resolver";
 import { groupInfoFor } from "./timelineGroupInfo";
 import { transitionLabelsForDocument } from "./timelineTransitionMetadata";
 import {
@@ -228,10 +229,13 @@ export function parseTimelineFromDOM(
   const nodes = doc.querySelectorAll("[data-start]");
   const els: TimelineElement[] = [];
   let trackCounter = 0;
-  const transitionLabels = transitionLabelsForDocument(
-    doc,
-    timelines ?? (doc.defaultView as IframeWindow | null)?.__timelines,
-  );
+  const timelineRegistry = timelines ?? (doc.defaultView as IframeWindow | null)?.__timelines;
+  const transitionLabels = transitionLabelsForDocument(doc, timelineRegistry);
+  const masterStart = createRuntimeStartTimeResolver({
+    timelineRegistry,
+    includeAuthoredTimingAttrs: true,
+    documentRef: doc,
+  });
 
   // fallow-ignore-next-line complexity
   nodes.forEach((node) => {
@@ -239,11 +243,14 @@ export function parseTimelineFromDOM(
     if (isTimelineIgnoredElement(node)) return;
     const el = node as HTMLElement;
     const timing = readClipTiming(el);
-    const start = timing.start;
-    if (start == null) return;
+    if (timing.start == null) return;
+    const tagLower = el.tagName.toLowerCase();
+    const start =
+      tagLower === "video" || tagLower === "audio"
+        ? masterStart.resolveMediaStartForElement(el)
+        : masterStart.resolveStartForElement(el);
     if (Number.isFinite(rootDuration) && rootDuration > 0 && start >= rootDuration) return;
 
-    const tagLower = el.tagName.toLowerCase();
     let dur = timing.duration ?? 0;
     if (dur <= 0) dur = Math.max(0, rootDuration - start);
     if (Number.isFinite(rootDuration) && rootDuration > 0) {
@@ -287,6 +294,8 @@ export function parseTimelineFromDOM(
               : "element",
       tag: tagLower,
       start,
+      parentCompositionStart: masterStart.resolveHostStartForElement(el),
+      ...(masterStart.isRootGlobalMediaStartForElement(el) && { authoredStartIsMasterTime: true }),
       duration: dur,
       track,
       domId: el.id || undefined,

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

@@ -103,6 +103,42 @@ describe("buildMissingCompositionElements — hfId (R7)", () => {
   });
 });
 
+describe("buildMissingCompositionElements — nested master time", () => {
+  it("places hosts two and three levels deep at their master time", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="main" data-start="0" data-duration="20">
+        <div id="intro" data-composition-id="intro" data-start="2" data-duration="10">
+          <div data-composition-id="intro">
+            <div id="logo" data-composition-id="logo" data-start="3" data-duration="5">
+              <div data-composition-id="logo">
+                <div id="badge" data-composition-id="badge" data-start="1" data-duration="2"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+    const { missing } = buildMissingCompositionElements(doc, window as IframeWindow, [], 20);
+    expect(missing.map((e) => [e.domId, e.start, e.duration, e.parentCompositionStart])).toEqual([
+      ["intro", 2, 10, 0],
+      ["logo", 5, 5, 2],
+      ["badge", 6, 2, 5],
+    ]);
+  });
+
+  it("starts a host after a referenced scene's authored length", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="main" data-start="0" data-duration="20">
+        <div id="s1" data-composition-id="s1" data-start="0" data-hf-authored-duration="8"></div>
+        <div id="s2" data-composition-id="s2" data-start="s1 + 1" data-duration="4"></div>
+      </div>
+    `);
+    const win = { __timelines: { s1: { duration: () => 6 } } } as unknown as IframeWindow;
+    const { missing } = buildMissingCompositionElements(doc, win, [], 20);
+    expect(missing.find((e) => e.domId === "s2")?.start).toBe(9);
+  });
+});
+
 describe("setPreviewMediaVolume", () => {
   it("sends a clamped runtime volume to a direct preview iframe", () => {
     const iframe = document.createElement("iframe");

package/src/player/lib/timelineIframeHelpers.ts

@@ -13,6 +13,7 @@
 import type { TimelineElement } from "../store/playerStore";
 import type { IframeWindow } from "./playbackTypes";
 import { readClipTiming } from "@hyperframes/core/composition-contract";
+import { createRuntimeStartTimeResolver } from "@hyperframes/core/runtime/start-resolver";
 import {
   getTimelineElementSelector,
   getTimelineElementSourceFile,
@@ -414,15 +415,16 @@ function buildMissingCompositionEntry(params: {
   rootDuration: number;
   fallbackIndex: number;
   resolveEnd: (refId: string, visiting: ReadonlySet<string>) => number | null;
+  masterTime: ReturnType<typeof createRuntimeStartTimeResolver>;
 }): TimelineElement | null {
-  const { doc, iframeWin, element, compositionId, rootDuration, fallbackIndex, resolveEnd } =
-    params;
+  const { doc, iframeWin, element, compositionId, rootDuration, fallbackIndex } = params;
+  const { resolveEnd, masterTime } = params;
   const transitionLabels = transitionLabelsForDocument(doc, iframeWin.__timelines);
   const timing = readClipTiming(element, {
     resolveReferenceEnd: (refId) => resolveEnd(refId, new Set([compositionId])),
   });
   const window = clampCompositionWindow(
-    timing.start ?? 0,
+    masterTime.resolveStartForElement(element),
     timing.duration ?? timelineDuration(iframeWin, compositionId),
     rootDuration,
   );
@@ -456,6 +458,7 @@ function buildMissingCompositionEntry(params: {
     key: identity.key,
     tag: element.tagName.toLowerCase(),
     start: window.start,
+    parentCompositionStart: masterTime.resolveHostStartForElement(element),
     duration: window.duration,
     track: timing.trackIndex,
     authoredTrack: timing.trackIndex,
@@ -494,6 +497,11 @@ export function buildMissingCompositionElements(
   const missing: TimelineElement[] = [];
 
   const resolveEnd = createReferenceEndResolver(createTimedElementLookup(doc), iframeWin);
+  const masterTime = createRuntimeStartTimeResolver({
+    timelineRegistry: iframeWin.__timelines,
+    includeAuthoredTimingAttrs: true,
+    documentRef: doc,
+  });
 
   for (const host of hosts) {
     const el = host as HTMLElement;
@@ -508,6 +516,7 @@ export function buildMissingCompositionElements(
       rootDuration,
       fallbackIndex: missing.length,
       resolveEnd,
+      masterTime,
     });
     if (entry) missing.push(entry);
   }

package/src/player/store/liveTime.ts

@@ -2,12 +2,18 @@
 type TimeListener = (time: number) => void;
 const timeListeners = new Set<TimeListener>();
 let latestTime = 0;
+let seekCount = 0;
 
 export const liveTime = {
   notify: (time: number) => {
     latestTime = time;
     timeListeners.forEach((listener) => listener(time));
   },
+  notifySeek: (time: number) => {
+    seekCount += 1;
+    liveTime.notify(time);
+  },
+  seekCount: () => seekCount,
   latest: () => latestTime,
   subscribe: (listener: TimeListener) => {
     timeListeners.add(listener);

package/src/player/store/playerStore.ts

@@ -83,6 +83,7 @@ interface PlayerState extends PlayerStoreSlices {
   zoomMode: ZoomMode;
   /** Timeline zoom percent relative to the fit width when in manual mode */
   manualZoomPercent: number;
+  userZoomCount: number;
   /**
    * Bumped on every live z-index edit (handleDomZIndexReorderCommit apply AND
    * rollback). Flashless z commits (skipReload) never reload the iframe or
@@ -279,6 +280,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   loopEnabled: false,
   zoomMode: "fit",
   manualZoomPercent: 100,
+  userZoomCount: 0,
   zEditVersion: 0,
   timelinePps: 100,
   timelineFitPps: 100,

package/src/player/store/timelineElement.ts

@@ -84,13 +84,38 @@ export interface TimelineElement {
   audioGroupFxChain?: string;
   audioGroupAutomation?: string;
   /**
-   * Legacy source-coordinate marker for an inline sub-composition child. The
-   * current timeline keeps sub-compositions as single rows.
+   * Master start of the composition this row runs in, which its tweens and its
+   * `data-start` are local to; 0 at the root. Writes go through toAuthoredStart.
    */
-  expandedParentStart?: number;
+  parentCompositionStart?: number;
+  /** A legacy root-global media start: its `data-start` is already master time. */
+  authoredStartIsMasterTime?: boolean;
+  /** Legacy marker for an inline sub-composition child; current rows never set it. */
   expandedHostKey?: string;
 }
 
+type RowClock = Pick<
+  TimelineElement,
+  "start" | "parentCompositionStart" | "authoredStartIsMasterTime"
+>;
+const authoredOffset = (element: RowClock) =>
+  element.authoredStartIsMasterTime ? 0 : (element.parentCompositionStart ?? 0);
+
+/** The earliest master start this row can take: its host's start, or its own if already earlier. */
+export function clampToHostStart(element: RowClock, masterTime: number): number {
+  return Math.max(Math.min(authoredOffset(element), element.start), masterTime);
+}
+
+/** A master-time position on this row, as the `data-start` its source file stores. */
+export function toAuthoredStart(element: RowClock, masterTime: number): number {
+  return Math.max(0, clampToHostStart(element, masterTime) - authoredOffset(element));
+}
+
+/** A master-time position on the clock this row's tweens run on. */
+export function toCompositionTime(element: RowClock, masterTime: number): number {
+  return masterTime - (element.parentCompositionStart ?? 0);
+}
+
 /**
  * The fields `updateElement` may write.
  *

package/src/utils/razorSplitTransaction.test.ts

@@ -48,7 +48,7 @@ describe("buildAtomicCutIntents", () => {
 
   it("rebases each nested target into its own source-file coordinates", () => {
     const intents = buildAtomicCutIntents(
-      [element({ start: 8, duration: 4, expandedParentStart: 6, sourceFile: "scene.html" })],
+      [element({ start: 8, duration: 4, parentCompositionStart: 6, sourceFile: "scene.html" })],
       10,
       "index.html",
     );

package/src/utils/razorSplitTransaction.ts

@@ -1,4 +1,5 @@
 import type { TimelineElement } from "../player";
+import { toAuthoredStart } from "../player/store/timelineElement";
 import type { RecordEditInput } from "../hooks/timelineEditingHelpers";
 import { buildPatchTarget } from "./timelineElementSplit";
 import { serializeStudioFileMutations } from "./studioFileMutationCoordinator";
@@ -61,12 +62,11 @@ function buildCutTarget(
   target: CutTarget["target"],
   splitTime: number,
 ): CutTarget {
-  const basis = element.expandedParentStart;
   return {
     target,
     ...(element.domId ? { originalId: element.domId } : {}),
-    splitTime: basis === undefined ? splitTime : Math.max(0, splitTime - basis),
-    elementStart: basis === undefined ? element.start : element.start - basis,
+    splitTime: Math.max(0, toAuthoredStart(element, splitTime)),
+    elementStart: toAuthoredStart(element, element.start),
     elementDuration: element.duration,
     ...(element.playbackStart != null ? { playbackStart: element.playbackStart } : {}),
     ...(element.playbackRate != null ? { playbackRate: element.playbackRate } : {}),