@hyperframes/studio 0.8.125 → 0.8.126

package/src/player/components/VideoThumbnail.test.tsx

@@ -1,10 +1,10 @@
 // @vitest-environment happy-dom
 import React, { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
+import { createHappyDomRootHarness } from "./testRootHarness";
 import { VideoThumbnail } from "./VideoThumbnail";
 
 vi.mock("../lib/thumbnailVideoDecoder", () => ({ decodeVideoThumbnail: vi.fn() }));
@@ -15,28 +15,26 @@ Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
 });
 
 let host: HTMLDivElement;
-let root: Root | null = null;
 
 beforeEach(() => {
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-  host = document.createElement("div");
-  document.body.append(host);
+  host = document.body.appendChild(document.createElement("div"));
 });
 
 afterEach(() => {
-  act(() => root?.unmount());
-  root = null;
   thumbnailScheduler.invalidateProject("p");
   vi.clearAllMocks();
-  document.body.innerHTML = "";
 });
 
+// Registered after the reset above, so each test's strip unmounts before the cache is cleared.
+const harness = createHappyDomRootHarness();
+
 async function render(width = 0, height = 40) {
   Object.defineProperty(host, "clientWidth", { configurable: true, value: width });
   Object.defineProperty(host, "clientHeight", { configurable: true, value: height });
-  root = createRoot(host);
+  const root = harness.mount(host);
   await act(async () => {
-    root!.render(
+    root.render(
       <VideoThumbnail
         videoSrc="/api/projects/p/preview/assets/clip.mp4"
         label=""
@@ -95,6 +93,115 @@ describe("VideoThumbnail", () => {
     expect(tiles).toEqual(["blob:0", "blob:2", "blob:4", "blob:5", "blob:7"]);
   });
 
+  describe("on a 10-minute clip at full zoom", () => {
+    const frames: FrameRequestCallback[] = [];
+    const originalIntersectionObserver = globalThis.IntersectionObserver;
+    let left = -432_000;
+    let scrolled = 0;
+    let reportGapNearScreen: () => void = () => {};
+
+    beforeEach(() => {
+      vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+        value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
+        weight: 256,
+      });
+      vi.spyOn(window, "requestAnimationFrame").mockImplementation((frame) => frames.push(frame));
+      globalThis.IntersectionObserver = class {
+        observed = new Set<Element>();
+        constructor(private readonly callback: IntersectionObserverCallback) {
+          reportGapNearScreen = () =>
+            callback(
+              [...this.observed].map(
+                (target) => ({ isIntersecting: true, target }) as IntersectionObserverEntry,
+              ),
+              this as unknown as IntersectionObserver,
+            );
+        }
+        observe(target: Element) {
+          this.observed.add(target);
+          queueMicrotask(() =>
+            this.callback(
+              [{ isIntersecting: true, target } as IntersectionObserverEntry],
+              this as unknown as IntersectionObserver,
+            ),
+          );
+        }
+        unobserve(target: Element) {
+          this.observed.delete(target);
+        }
+        disconnect() {
+          this.observed.clear();
+        }
+      } as unknown as typeof IntersectionObserver;
+      left = -432_000;
+      scrolled = 0;
+      host.getBoundingClientRect = () =>
+        ({ left, top: 0, width: 600 * 1440, height: 40 }) as DOMRect;
+      const scroller = document.body.appendChild(document.createElement("div"));
+      scroller.setAttribute("data-timeline-scroll-viewport", "");
+      Object.defineProperty(scroller, "scrollLeft", { configurable: true, get: () => scrolled });
+      scroller.append(host);
+    });
+
+    const scrollTo = (nextLeft: number) => {
+      scrolled += left - nextLeft;
+      left = nextLeft;
+      host.dispatchEvent(new Event("scroll"));
+    };
+
+    afterEach(() => {
+      frames.length = 0;
+      vi.restoreAllMocks();
+      globalThis.IntersectionObserver = originalIntersectionObserver;
+    });
+
+    const settle = () =>
+      act(async () => {
+        await Promise.resolve();
+        for (const frame of frames.splice(0)) frame(0);
+      });
+
+    const expectTilesCoverTheWindow = () => {
+      const tiles = host.querySelectorAll("img").length;
+      const skipped = parseFloat(
+        (host.querySelector("img")!.closest(".flex") as HTMLElement).style.paddingLeft,
+      );
+      expect(tiles).toBeLessThan(60);
+      expect(skipped).toBeLessThanOrEqual(-left);
+      expect(skipped + tiles * 71).toBeGreaterThanOrEqual(-left + window.innerWidth);
+    };
+
+    it("mounts only the tiles in view, and follows each scroll", async () => {
+      await render(600 * 1440, 40);
+      expectTilesCoverTheWindow();
+
+      for (const scrolledTo of [100_000, 300_000]) {
+        scrollTo(-scrolledTo);
+        await settle();
+        expectTilesCoverTheWindow();
+      }
+    });
+
+    it("mounts no tiles once the clip is wholly off screen", async () => {
+      await render(600 * 1440, 40);
+
+      scrollTo(-(600 * 1440 + 5_000));
+      await settle();
+
+      expect(host.querySelectorAll("img")).toHaveLength(0);
+    });
+
+    it("follows the strip when something else moves it, as a drag moves its ghost", async () => {
+      await render(600 * 1440, 40);
+
+      left = -430_500;
+      reportGapNearScreen();
+      await settle();
+
+      expectTilesCoverTheWindow();
+    });
+  });
+
   it("issues a single decode job for a narrow clip", async () => {
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "image", url: "blob:poster", aspect: 16 / 9 },

package/src/player/components/VideoThumbnail.tsx

@@ -7,6 +7,7 @@ import {
   type ThumbnailSnapshot,
 } from "../lib/thumbnailScheduler";
 import { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
+import { ThumbnailTiles } from "./ThumbnailTiles";
 import { computeThumbnailStrip, quantizeThumbnailFrameCount } from "./thumbnailUtils";
 
 interface VideoThumbnailProps {
@@ -85,7 +86,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
   sessionEpoch = 0,
   priority = "visible",
 }: VideoThumbnailProps) {
-  const [container, setContainerRef] = useThumbnailStripSize();
+  const [container, setContainerRef, watchGap] = useThumbnailStripSize();
   const requestFrameCount = quantizeThumbnailFrameCount(
     computeThumbnailStrip(container.width, 16 / 9, container.height).frameCount,
   );
@@ -122,8 +123,13 @@ export const VideoThumbnail = memo(function VideoThumbnail({
   return (
     <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
       {urls.length > 0 && (
-        <div className="absolute inset-0 flex">
-          {Array.from({ length: frameCount }, (_, index) => {
+        <ThumbnailTiles
+          strip={container}
+          frameW={frameW}
+          frameCount={frameCount}
+          watchGap={watchGap}
+        >
+          {(index) => {
             const src = urls[Math.round((index * (urls.length - 1)) / Math.max(1, frameCount - 1))];
             return (
               <div
@@ -139,8 +145,8 @@ export const VideoThumbnail = memo(function VideoThumbnail({
                 />
               </div>
             );
-          })}
-        </div>
+          }}
+        </ThumbnailTiles>
       )}
       {snapshot.status === "loading" && urls.length === 0 && (
         <div

package/src/player/lib/timelineGroupInfo.realm.test.ts

@@ -0,0 +1,20 @@
+// @vitest-environment jsdom
+import { expect, it } from "vitest";
+import { groupInfoFor } from "./timelineGroupInfo";
+
+it("sees a group the preview adds, whichever window built its node", () => {
+  const frame = document.body.appendChild(document.createElement("iframe"));
+  const doc = frame.contentDocument!;
+  const member = doc.createElement("audio");
+  member.id = "a1";
+  member.setAttribute("data-audio-group", "g1");
+  doc.body.append(member);
+  expect(groupInfoFor(doc, "g1").label).toBe("g1");
+  const group = doc.createElement("hf-audio-group");
+  group.id = "g1";
+  group.setAttribute("data-label", "Drums");
+  doc.body.append(group);
+
+  expect(groupInfoFor(doc, "g1").label).toBe("Drums");
+  frame.remove();
+});

package/src/player/lib/timelineGroupInfo.ts

@@ -6,6 +6,7 @@
  * cache, its revision counter, the observer that bumps it, and the one reader.
  */
 
+import { isElementNode } from "@hyperframes/core/runtime/dom-realm";
 import {
   HF_AUDIO_GROUP_ATTR,
   HF_AUDIO_GROUP_TAG,
@@ -52,7 +53,7 @@ function countGroupChanges(doc: Document, records: readonly MutationRecord[]): v
       record.type !== "childList" ||
       [...record.addedNodes, ...record.removedNodes].some(
         (node) =>
-          node instanceof Element &&
+          isElementNode(node) &&
           (node.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG ||
             node.hasAttribute(HF_AUDIO_GROUP_ATTR) ||
             node.querySelector?.(`${HF_AUDIO_GROUP_TAG},[${HF_AUDIO_GROUP_ATTR}]`) != null),

package/src/webmcp/webmcpTestUtils.ts

@@ -5,6 +5,7 @@
  * existing `hooks/domSelectionTestHarness.ts` convention.
  */
 
+import { isHtmlElement } from "@hyperframes/core/runtime/dom-realm";
 import { expect } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { ToolFailure, ToolResult } from "./toolResult";
@@ -31,8 +32,7 @@ export function previewDoc(html: string): Document {
 export function previewElement(html: string, id: string): HTMLElement {
   const doc = previewDoc(html);
   const element = doc.getElementById(id);
-  const HTMLElementCtor = doc.defaultView?.HTMLElement;
-  if (!HTMLElementCtor || !(element instanceof HTMLElementCtor)) {
+  if (!isHtmlElement(element)) {
     throw new Error(`expected preview element #${id}`);
   }
   return element;