@hyperframes/studio 0.8.90 → 0.8.92

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 } : {}),

package/src/utils/timelineDropTrackInsert.test.ts

@@ -99,6 +99,54 @@ describe("applyTrackRenumbers", () => {
 });
 
 describe("resolveDropTrack", () => {
+  // Title shows on row 0; Music is written on track 0 too but shows on audio row 1.
+  const shown = (
+    id: string,
+    tag: string,
+    row: number,
+    track: number,
+    start: number,
+    length: number,
+  ) => ({
+    ...clip(id, row, start),
+    tag,
+    duration: length,
+    authoredTrack: track,
+  });
+  const title = shown("title", "div", 0, 0, 0, 10);
+  const music = shown("music", "audio", 1, 0, 2, 3);
+  const song = { id: "song", tag: "audio", start: 2, duration: 3 };
+  const drop = (elements: TimelineElement[], row: number, dropped = song) =>
+    resolveDropTrack({ source, elements, placement: { track: row }, dropped });
+
+  it("joins an audio row's file track at the nearest free time, not a new track", () => {
+    expect(drop([title, music], 1)).toMatchObject({ track: 0, start: 5 });
+  });
+
+  it("keeps an audio file dropped on a visual row off the audio clip on the track it is written to", () => {
+    expect(drop([title, music], 0)).toMatchObject({ track: 0, start: 5 });
+  });
+
+  it("writes a drop on a shown row to that row's file track and checks the clips there", () => {
+    const top = shown("top", "div", 0, 0, 0, 4);
+    const lower = shown("lower", "div", 1, 2, 0, 4); // file track 2, shown as row 1
+    const image = { id: "image", tag: "img", start: 1, duration: 3 };
+    expect(drop([top, lower], 1, image)).toMatchObject({ track: 2, start: 4 });
+  });
+
+  it("lets only clips of the dropped file's kind block it on the row", () => {
+    const title = clip("title", 0, 0);
+    const music = { ...clip("music", 0, 0), tag: "audio" };
+    const song = { id: "song", tag: "audio", start: 1, duration: 3 };
+    // An audio file shows in the audio rows wherever it is written, so a visual clip never blocks it.
+    expect(
+      resolveDropTrack({ source, elements: [title], placement: { track: 0 }, dropped: song }).start,
+    ).toBe(1);
+    expect(
+      resolveDropTrack({ source, elements: [music], placement: { track: 0 }, dropped: song }).start,
+    ).toBe(2);
+  });
+
   it("keeps the aimed lane and the source when no insert is asked for", () => {
     const out = resolveDropTrack({
       source,
@@ -106,7 +154,17 @@ describe("resolveDropTrack", () => {
       placement: { track: 2 },
       dropped,
     });
-    expect(out).toEqual({ source, track: 2 });
+    expect(out).toEqual({ source, track: 2, start: 5 });
+  });
+
+  it("moves a drop on an occupied row to that row's nearest free time, with no new track", () => {
+    const out = resolveDropTrack({
+      source,
+      elements,
+      placement: { track: 1 },
+      dropped: { ...dropped, start: 1 },
+    });
+    expect(out).toEqual({ source, track: 1, start: 2 });
   });
 
   it("returns the new lane and the source with the lanes below pushed down", () => {
@@ -117,6 +175,7 @@ describe("resolveDropTrack", () => {
       dropped,
     });
     expect(out.track).toBe(1);
+    expect(out.start).toBe(5);
     expect(out.source).toContain('id="b" data-start="0" data-track-index="2"');
   });
 

package/src/utils/timelineDropTrackInsert.ts

@@ -1,6 +1,9 @@
 import type { TimelineElement } from "../player";
 import { layoutAfterTrackInsert } from "../player/components/timelineDragLanding";
 import { canMoveTimelineElement } from "../player/components/timelineAuthoredMoveTarget";
+import { resolveNearestFreeStart } from "../player/components/timelineCollision";
+import { authoredTrackForLane } from "../player/components/timelineAuthoredTrack";
+import { isAudioTimelineElement } from "./timelineInspector";
 import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
 import { applyPatchByTarget, readAttributeByTarget } from "./sourcePatcher";
 import { buildPatchTarget } from "../hooks/timelineEditingHelpers";
@@ -67,17 +70,45 @@ export function applyTrackRenumbers(source: string, plan: DropTrackInsertPlan):
   return out;
 }
 
-/** The lane a dropped clip is written on and the source with any lanes pushed down to make room. */
+type DroppedClip = Pick<TimelineElement, "id" | "tag" | "start" | "duration">;
+
+/** The file track a drop on display row `lane` is written to, and its nearest free start there.
+ *  The timeline's own clips decide the track; `placed` clips only block, like same-kind clips there. */
+function resolveRowDrop(
+  elements: TimelineElement[],
+  placed: readonly TimelineElement[],
+  lane: number,
+  dropped: DroppedClip,
+): { track: number; start: number } {
+  const audio = isAudioTimelineElement(dropped);
+  const row = elements.filter((e) => e.track === lane);
+  const otherKindRow = row.length > 0 && !row.some((e) => isAudioTimelineElement(e) === audio);
+  const asClip = { ...dropped, key: dropped.id, track: lane, sourceFile: elements[0]?.sourceFile };
+  const track = otherKindRow ? lane : authoredTrackForLane(lane, elements, asClip);
+  const onTrack = [...elements, ...placed]
+    .filter((e) => isAudioTimelineElement(e) === audio && (e.authoredTrack ?? e.track) === track)
+    .map((e) => ({ ...e, track }));
+  return {
+    track,
+    start: resolveNearestFreeStart(onTrack, track, dropped.start, dropped.duration, null),
+  };
+}
+
+/** Where a dropped clip is written: the aimed row's file track at its nearest free time, or a new track. */
 export function resolveDropTrack(input: {
   source: string;
   elements: TimelineElement[];
+  /** Clips this drop gesture already wrote, which `elements` does not hold yet. */
+  placed?: readonly TimelineElement[];
   placement: TimelineDropPlacement;
-  dropped: Pick<TimelineElement, "id" | "tag" | "start" | "duration">;
-}): { source: string; track: number } {
+  dropped: DroppedClip;
+}): { source: string; track: number; start: number } {
   const { source, elements, placement, dropped } = input;
-  if (placement.insertRow == null) return { source, track: placement.track };
+  if (placement.insertRow == null) {
+    return { source, ...resolveRowDrop(elements, input.placed ?? [], placement.track, dropped) };
+  }
   const { insertRow, trackOrder } = placement;
   const plan = planDropTrackInsert({ elements, trackOrder, insertRow, dropped });
   if (!plan) throw new Error("Cannot open a new track here: a locked clip would have to move.");
-  return { source: applyTrackRenumbers(source, plan), track: plan.track };
+  return { source: applyTrackRenumbers(source, plan), track: plan.track, start: dropped.start };
 }