@hyperframes/studio 0.8.141 → 0.8.143

package/src/player/components/useTimelinePlayhead.ts

@@ -42,6 +42,7 @@ function revealPlayheadScrollLeft(
 interface UseTimelinePlayheadInput {
   playheadRef: React.RefObject<HTMLDivElement | null>;
   scrollRef: React.RefObject<HTMLDivElement | null>;
+  syncScrollViewport: (scroll: HTMLDivElement) => void;
   ppsRef: React.RefObject<number>;
   durationRef: React.RefObject<number>;
   isDragging: React.RefObject<boolean>;
@@ -61,6 +62,7 @@ interface UseTimelinePlayheadInput {
 export function useTimelinePlayhead({
   playheadRef,
   scrollRef,
+  syncScrollViewport,
   ppsRef,
   durationRef,
   isDragging,
@@ -100,6 +102,7 @@ export function useTimelinePlayhead({
       const maxScrollLeft = Math.max(0, scroll.scrollWidth - scroll.clientWidth);
       const left = anchor.time * pps + contentOrigin - anchor.x;
       scroll.scrollLeft = Math.max(0, Math.min(maxScrollLeft, left));
+      syncScrollViewport(scroll);
       return;
     }
     const zoomed = userZoomCount !== prevZoomCount;
@@ -121,7 +124,8 @@ export function useTimelinePlayhead({
     scroll.scrollLeft = zoomed
       ? revealPlayheadScrollLeft(scroll, contentOrigin + time * pps, contentOrigin, anchored)
       : anchored;
-  }, [pps, userZoomCount, scrollRef, durationRef, contentOrigin]);
+    syncScrollViewport(scroll);
+  }, [pps, userZoomCount, scrollRef, durationRef, contentOrigin, syncScrollViewport]);
 
   const syncPlayheadPosition = useCallback(
     (time: number) => {
@@ -279,14 +283,25 @@ export function useTimelinePlayhead({
     // A press meets the zoom it sees, not the one still waiting to be laid out.
     scroll.addEventListener("pointerdown", settleTimelineZoom, { capture: true });
     scroll.addEventListener("scroll", redrawTimelineZoomPreview, { passive: true });
-    const unregisterZoomViewport = registerTimelineZoomViewport({ scroll, contentOrigin });
+    const unregisterZoomViewport = registerTimelineZoomViewport({
+      scroll,
+      contentOrigin,
+      publishScroll: syncScrollViewport,
+    });
     return () => {
       scroll.removeEventListener("wheel", handlePinchWheel, { capture: true });
       scroll.removeEventListener("pointerdown", settleTimelineZoom, { capture: true });
       scroll.removeEventListener("scroll", redrawTimelineZoomPreview);
       unregisterZoomViewport();
     };
-  }, [handlePinchWheel, scrollRef, timelineReady, elementsLength, contentOrigin]);
+  }, [
+    handlePinchWheel,
+    scrollRef,
+    timelineReady,
+    elementsLength,
+    contentOrigin,
+    syncScrollViewport,
+  ]);
 
   return { seekFromX, autoScrollDuringDrag, dragScrollRaf };
 }

package/src/player/components/useTimelineProviderState.tsx

@@ -336,6 +336,7 @@ export function useTimelineProviderState({
   const { seekFromX, autoScrollDuringDrag, dragScrollRaf } = useTimelinePlayhead({
     playheadRef,
     scrollRef,
+    syncScrollViewport,
     ppsRef,
     durationRef,
     isDragging,

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

@@ -89,6 +89,18 @@ describe("media probe registry", () => {
     expect(getDurationFromMetadata).toHaveBeenCalledTimes(2);
   });
 
+  it("probes a dropped clip's URL-spelled src at its own file", async () => {
+    await probeMissingSourceDurations(
+      [{ id: "clip", tag: "video", src: "assets/My%20clip%20%231.mp4" }],
+      "project-a",
+      vi.fn(),
+    );
+
+    expect(requestedSources).toEqual([
+      `${window.location.origin}/api/projects/project-a/preview/assets/My%20clip%20%231.mp4`,
+    ]);
+  });
+
   it("probes same-origin rooted media through the active project preview", async () => {
     const apply = vi.fn();
     await probeMissingSourceDurations(

package/src/player/lib/mediaProbe.ts

@@ -1,4 +1,4 @@
-import { resolveMediaPreviewUrl } from "../components/thumbnailUtils";
+import { authoredSrcPath, resolveMediaPreviewUrl } from "../components/thumbnailUtils";
 import { TIMELINE_VIEWPORT_BUDGETS } from "./timelineViewportBudgets";
 
 export interface MediaProbeResult {
@@ -87,7 +87,9 @@ function getCachedProbe(url: string): MediaProbeResult | undefined {
 }
 
 function resolveProbeSource(src: string, projectId: string | null): string {
-  return projectId ? resolveMediaPreviewUrl(src, projectId, window.location.origin) : src;
+  return projectId
+    ? resolveMediaPreviewUrl(authoredSrcPath(src), projectId, window.location.origin)
+    : src;
 }
 
 function evictMetadataOverflow(): void {

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

@@ -9,7 +9,7 @@ describe("timeline viewport budgets", () => {
     expect(TIMELINE_VIEWPORT_BUDGETS).toMatchObject({
       directScrollSafetyPx: 8_000_000,
       rowOverscanPerSide: 2,
-      timeOverscanViewportRatio: 0.5,
+      timeOverscanViewportRatio: 0.25,
       maxMountedRows: 64,
       maxMountedClipRoots: 512,
       maxMountedClipRootsPerRow: 128,

package/src/player/lib/timelineViewportBudgets.ts

@@ -61,7 +61,7 @@ export const MAX_VISIBLE_THUMBNAIL_FRAMES = Math.ceil(3840 / (66 * (16 / 9))); /
 export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Object.freeze({
   directScrollSafetyPx: 8_000_000,
   rowOverscanPerSide: 2,
-  timeOverscanViewportRatio: 0.5,
+  timeOverscanViewportRatio: 0.25,
   maxMountedRows: 64,
   maxMountedClipRoots: 512,
   maxMountedClipRootsPerRow: 128,

package/src/utils/sourcePatcher.test.ts

@@ -3,11 +3,43 @@ import {
   applyPatch,
   applyPatchByTarget,
   readAttributeByTarget,
+  readTagAttribute,
   readTagSnippetByTarget,
   type PatchOperation,
 } from "./sourcePatcher";
 
 describe("applyPatchByTarget", () => {
+  it("removes all duplicate boolean attributes so unmuting cannot reveal another", () => {
+    expect(
+      applyPatch(`<video id="clip" muted muted></video>`, "clip", {
+        type: "html-attribute",
+        property: "muted",
+        value: null,
+      }),
+    ).toBe(`<video id="clip"></video>`);
+  });
+
+  it("locates Unicode custom tags and respects the first duplicate attribute", () => {
+    const html = `<my-élement id="real" id="other" data-duration="1"></my-élement>`;
+    const op: PatchOperation = { type: "attribute", property: "duration", value: "2" };
+    expect(applyPatch(html, "real", op)).toContain('data-duration="2"');
+    expect(applyPatch(html, "other", op)).toBe(html);
+  });
+
+  it("reads and patches only the real source outside quoted attribute content", () => {
+    const html = `<video id="hero" title="example src='other.mp4'" data-src="lazy.mp4" src="assets/it's.mp4"></video>`;
+    expect(readTagAttribute(html, "src")).toBe("assets/it's.mp4");
+    const op: PatchOperation = { type: "html-attribute", property: "src", value: "new.mp4" };
+    const expected = `<video id="hero" title="example src='other.mp4'" data-src="lazy.mp4" src="new.mp4"></video>`;
+    expect(applyPatch(html, "hero", op)).toBe(expected);
+    expect(applyPatchByTarget(html, { id: "hero" }, op)).toBe(expected);
+  });
+
+  it("does not locate a target through a prefixed or quoted id", () => {
+    const html = `<video data-id="hero" title="id='hero'" src="other.mp4"></video><video id="hero" src="real.mp4"></video>`;
+    expect(readTagSnippetByTarget(html, { id: "hero" })).toContain('src="real.mp4"');
+  });
+
   it.each(['"', "'"])("patches long and multiline styles quoted with %s", (quote) => {
     const otherQuote = quote === '"' ? "'" : '"';
     const op: PatchOperation = { type: "inline-style", property: "opacity", value: "0.5" };
@@ -646,3 +678,106 @@ describe("T3 — hfId targeting (spec for R1)", () => {
     expect(result).toContain('<h2 class="b">B</h2>');
   });
 });
+
+describe("file names with special characters", () => {
+  const src = (value: string): PatchOperation => ({
+    type: "html-attribute",
+    property: "src",
+    value,
+  });
+
+  it("replaces a double-quoted value that holds an apostrophe instead of adding a second one", () => {
+    expect(applyPatch(`<img id="a" src="assets/it's.png">`, "a", src("assets/b.png"))).toBe(
+      `<img id="a" src="assets/b.png">`,
+    );
+    expect(applyPatch(`<img id="a" src='assets/say "hi".png'>`, "a", src("b.png"))).toBe(
+      `<img id="a" src="b.png">`,
+    );
+  });
+
+  it("writes $ sequences in a value literally", () => {
+    expect(applyPatch(`<img id="a" src="old.png">`, "a", src("assets/$100 bill.png"))).toBe(
+      `<img id="a" src="assets/$100 bill.png">`,
+    );
+    expect(applyPatch(`<img id="a">`, "a", src("$&$1.png"))).toBe(
+      `<img id="a" src="$&amp;$1.png">`,
+    );
+    expect(
+      applyPatch(`<div id="a" data-src="old">`, "a", {
+        type: "attribute",
+        property: "src",
+        value: "$' and $`",
+      }),
+    ).toBe(`<div id="a" data-src="$' and $\`">`);
+  });
+
+  it("reads a data attribute whose value holds the other quote kind", () => {
+    expect(readAttributeByTarget(`<div id="a" data-title="it's here">`, { id: "a" }, "title")).toBe(
+      "it's here",
+    );
+  });
+});
+
+describe("readTagAttribute", () => {
+  it("reads both quote kinds and decodes entities without losing the other quote", () => {
+    expect(readTagAttribute(`<video src="assets/it's&amp;ours.mp4">`, "src")).toBe(
+      "assets/it's&ours.mp4",
+    );
+    expect(readTagAttribute(`<video src='assets/say "hi".mp4'>`, "src")).toBe(
+      'assets/say "hi".mp4',
+    );
+  });
+
+  it("distinguishes an empty attribute from a missing attribute", () => {
+    expect(readTagAttribute('<video src="">', "src")).toBe("");
+    expect(readTagAttribute("<video>", "src")).toBeUndefined();
+  });
+});
+
+describe("whole attribute names", () => {
+  it.each(["data-src", "x-src", "xml:src", "srcset"])(
+    "reads and edits src without matching %s",
+    (other) => {
+      const tag = `<img id="a" ${other}="assets/other.png" src="assets/original.png">`;
+      expect(readTagAttribute(tag, "src")).toBe("assets/original.png");
+      for (const patch of [
+        (op: PatchOperation) => applyPatch(tag, "a", op),
+        (op: PatchOperation) => applyPatchByTarget(tag, { id: "a" }, op),
+      ]) {
+        expect(patch({ type: "html-attribute", property: "src", value: "assets/new.png" })).toBe(
+          `<img id="a" ${other}="assets/other.png" src="assets/new.png">`,
+        );
+        expect(patch({ type: "html-attribute", property: "src", value: null })).toBe(
+          `<img id="a" ${other}="assets/other.png">`,
+        );
+      }
+      expect(readTagAttribute(`<img ${other}="assets/other.png">`, "src")).toBeUndefined();
+    },
+  );
+
+  it("does not treat a longer data attribute as a boolean attribute to remove", () => {
+    const tag = '<div id="a" data-title-long="keep">';
+    expect(
+      applyPatchByTarget(tag, { id: "a" }, { type: "attribute", property: "title", value: null }),
+    ).toBe(tag);
+  });
+});
+
+it("removes a boolean attribute without truncating a longer attribute name", () => {
+  const tag = '<video id="a" muted-long="keep" muted>';
+  expect(
+    applyPatchByTarget(
+      tag,
+      { id: "a" },
+      { type: "html-attribute", property: "muted", value: null },
+    ),
+  ).toBe('<video id="a" muted-long="keep">');
+});
+
+it("decodes an authored apostrophe entity once", () => {
+  expect(readTagAttribute("<video src='assets/it&apos;s.mp4'>", "src")).toBe("assets/it's.mp4");
+  expect(readTagAttribute("<video src='assets/it&#39;s.mp4'>", "src")).toBe("assets/it's.mp4");
+  expect(readTagAttribute('<video src="assets/it&amp;apos;s.mp4">', "src")).toBe(
+    "assets/it&apos;s.mp4",
+  );
+});