@hyperframes/studio 0.8.188 → 0.8.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.188",
+  "version": "0.8.190",
   "description": "",
   "repository": {
     "type": "git",
@@ -59,12 +59,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.188",
-    "@hyperframes/core": "0.8.188",
-    "@hyperframes/shader-transitions": "0.8.188",
-    "@hyperframes/studio-server": "0.8.188",
-    "@hyperframes/parsers": "0.8.188",
-    "@hyperframes/sdk": "0.8.188"
+    "@hyperframes/core": "0.8.190",
+    "@hyperframes/parsers": "0.8.190",
+    "@hyperframes/sdk": "0.8.190",
+    "@hyperframes/player": "0.8.190",
+    "@hyperframes/shader-transitions": "0.8.190",
+    "@hyperframes/studio-server": "0.8.190"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.188"
+    "@hyperframes/producer": "0.8.190"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/overlayFrameLoop.test.ts

@@ -121,6 +121,48 @@ describe("overlay frame loop", () => {
     expect(runs).toBeLessThanOrEqual(Math.ceil(1000 / IDLE_POLL_MS) + 1);
   });
 
+  it("polls less often the longer nothing happens, and fast again after a wake", () => {
+    let runs = 0;
+    subscribeOverlayFrame(() => {
+      runs += 1;
+    });
+    framesOver(10_000);
+    runs = 0;
+    // Backed off: a 4 s wait between polls, where a steady quarter-second poll would run 48 times.
+    framesOver(12_000);
+    expect(runs).toBeLessThanOrEqual(4);
+
+    window.dispatchEvent(new Event("pointermove"));
+    framesOver(500);
+    runs = 0;
+    framesOver(IDLE_POLL_MS * 2);
+    expect(runs).toBeGreaterThan(0);
+  });
+
+  it("does not poll while the page is hidden, and wakes when it shows", () => {
+    let hidden = false;
+    Object.defineProperty(document, "hidden", { configurable: true, get: () => hidden });
+    try {
+      let runs = 0;
+      subscribeOverlayFrame(() => {
+        runs += 1;
+      });
+      framesOver(500);
+      hidden = true;
+      runs = 0;
+      framesOver(8_000);
+      // At most the one poll armed before the page hid; none is armed after it.
+      expect(runs).toBeLessThanOrEqual(1);
+
+      hidden = false;
+      window.dispatchEvent(new Event("visibilitychange"));
+      framesOver(200);
+      expect(runs).toBeGreaterThan(5);
+    } finally {
+      delete (document as { hidden?: boolean }).hidden;
+    }
+  });
+
   it("wakes to full rate on a pointer event", () => {
     let runs = 0;
     subscribeOverlayFrame(() => {

package/src/components/editor/overlayFrameLoop.ts

@@ -30,11 +30,14 @@ import { usePlayerStore } from "../../player/store/playerStore";
 const AWAKE_MS = 400;
 /** How often a parked loop runs one frame anyway, in case a wake was missed. */
 export const IDLE_POLL_MS = 250;
+/** The longest a parked loop waits between polls; each idle poll doubles the wait up to this. */
+export const MAX_IDLE_POLL_MS = 4000;
 
 const subscribers = new Set<() => void>();
 
 let frameId: number | null = null;
 let idleTimerId: ReturnType<typeof setTimeout> | null = null;
+let idlePollMs = IDLE_POLL_MS;
 let awakeUntil = 0;
 let listenersAttached = false;
 let stopBootWake: (() => void) | null = null;
@@ -137,10 +140,13 @@ function schedule(): void {
     frameId = requestAnimationFrame(runFrame);
     return;
   }
+  if (typeof document !== "undefined" && document.hidden) return;
+  const wait = idlePollMs;
+  idlePollMs = Math.min(idlePollMs * 2, MAX_IDLE_POLL_MS);
   idleTimerId = setTimeout(() => {
     idleTimerId = null;
     frameId = requestAnimationFrame(runFrame);
-  }, IDLE_POLL_MS);
+  }, wait);
 }
 
 /** Longest idle slice, so input that arrives during one waits at most this long for its frame. */
@@ -167,6 +173,7 @@ export function runWhenInputIdle(step: (timeLeft: () => number) => boolean): voi
 /** Something moved, or might have. Run frames at full rate for a moment. */
 export function requestOverlayFrames(): void {
   awakeUntil = performance.now() + AWAKE_MS;
+  idlePollMs = IDLE_POLL_MS;
   if (idleTimerId != null) {
     clearTimeout(idleTimerId);
     idleTimerId = null;
@@ -199,8 +206,8 @@ function detachListeners(): void {
 
 /**
  * Run `update` on the shared loop. The subscriber must be a pure poll: it is
- * called on an ordinary animation frame while the editor is active and roughly
- * four times a second while it is not.
+ * called on an ordinary animation frame while the editor is active, then
+ * less often the longer it stays idle, down to once every four seconds.
  */
 export function subscribeOverlayFrame(update: () => void): () => void {
   subscribers.add(update);
@@ -230,6 +237,7 @@ export function resetOverlayFrameLoopForTests(): void {
   frameId = null;
   idleTimerId = null;
   awakeUntil = 0;
+  idlePollMs = IDLE_POLL_MS;
   lastPreviewFrame = null;
   lastPreviewPlaying = null;
   detachListeners();

package/src/components/renders/useRenderQueue.ts

@@ -1,4 +1,3 @@
-import { htmlInCanvasForm } from "@hyperframes/core/html-in-canvas";
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import type { CanvasResolution } from "@hyperframes/parsers";
@@ -11,11 +10,6 @@ import { ffmpegInstallMessage, useFfmpegStatus } from "./useFfmpegStatus";
 import { requestStudioFeedback, type FeedbackContext } from "../feedback/feedbackTrigger";
 import { studioApiFetch } from "../../utils/studioApiFetch";
 
-// WYSIWYG: the preview iframe runs in this browser, so a render blurs only if this one can.
-function canPreviewMotionBlur(): boolean {
-  return typeof document !== "undefined" && htmlInCanvasForm() !== null;
-}
-
 export interface RenderJob {
   id: string;
   status: "rendering" | "complete" | "failed" | "cancelled";
@@ -244,12 +238,10 @@ export function useRenderQueue(
         gpu?: boolean;
         telemetryDistinctId?: string;
         telemetryOptOut?: boolean;
-        previewMotionBlur: boolean;
       } = {
         fps,
         quality,
         format,
-        previewMotionBlur: canPreviewMotionBlur(),
       };
       // The id is MINTED by getAnonymousId(), so calling it unconditionally
       // created a telemetry identity for a profile that had opted out — and

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

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { liveTime, usePlayerStore } from "../store/playerStore";
 import { PlayerControls } from "./PlayerControls";
 
@@ -10,22 +10,87 @@ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
 let host: HTMLDivElement;
 let root: Root;
+const onSeek = vi.fn();
+
+function seekBar(): HTMLInputElement {
+  const input = host.querySelector('input[aria-label="Seek preview"]');
+  if (!(input instanceof HTMLInputElement)) throw new Error("Preview seek bar is missing");
+  return input;
+}
 
 beforeEach(async () => {
+  onSeek.mockClear();
   usePlayerStore.setState({
     isPlaying: true,
     currentTime: 2,
     duration: 30,
     timeDisplayMode: "time",
+    timelineReady: true,
   });
   host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
   await act(async () =>
-    root.render(React.createElement(PlayerControls, { onTogglePlay: () => {}, onSeek: () => {} })),
+    root.render(React.createElement(PlayerControls, { onTogglePlay: () => {}, onSeek })),
   );
 });
 
+describe("PlayerControls preview seeking", () => {
+  it("shows the current position and follows the playback clock", () => {
+    const input = seekBar();
+    expect(input.type).toBe("range");
+    expect(input.valueAsNumber).toBe(2);
+    expect(input.max).toBe("30");
+    expect(input.disabled).toBe(false);
+
+    liveTime.notify(12.5);
+    expect(input.valueAsNumber).toBe(12.5);
+    expect(input.getAttribute("aria-valuetext")).toBe("00:12 of 00:30");
+  });
+
+  it("seeks continuously and reaches both ends of the preview", () => {
+    const input = seekBar();
+    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    if (!setValue) throw new Error("Native range value setter is missing");
+    for (const time of [8.25, 15.5, 30, 0]) {
+      act(() => {
+        setValue.call(input, String(time));
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      expect(onSeek).toHaveBeenLastCalledWith(time);
+    }
+    expect(onSeek).toHaveBeenCalledTimes(4);
+  });
+
+  it("updates its duration and resets its position for a new composition", async () => {
+    await act(async () => usePlayerStore.setState({ duration: 5, currentTime: 0 }));
+    expect(seekBar().max).toBe("5");
+    expect(seekBar().valueAsNumber).toBe(0);
+    expect(seekBar().getAttribute("aria-valuetext")).toBe("00:00 of 00:05");
+  });
+
+  it("disables seeking until the preview is ready or has a duration", async () => {
+    await act(async () => usePlayerStore.setState({ timelineReady: false }));
+    expect(seekBar().disabled).toBe(true);
+    await act(async () => usePlayerStore.setState({ timelineReady: true, duration: 0 }));
+    expect(seekBar().disabled).toBe(true);
+  });
+
+  it("respects the disabled prop in fullscreen", async () => {
+    await act(async () =>
+      root.render(
+        React.createElement(PlayerControls, {
+          onTogglePlay: () => {},
+          onSeek,
+          disabled: true,
+          isFullscreen: true,
+        }),
+      ),
+    );
+    expect(seekBar().disabled).toBe(true);
+  });
+});
+
 afterEach(async () => {
   await act(async () => root.unmount());
   host.remove();

package/src/player/components/PlayerControls.tsx

@@ -10,6 +10,7 @@ import { ShortcutsButton } from "./ShortcutsPanel";
 import type { ShortcutSection } from "./studioShortcuts";
 import { SpeedMenu } from "./SpeedMenu";
 import { VolumeControl } from "./VolumeControl";
+import { PreviewSeekBar } from "./PreviewSeekBar";
 
 /* ── Icon sub-components ─────────────────────────────────────────── */
 
@@ -221,9 +222,10 @@ export const PlayerControls = memo(function PlayerControls({
   });
 
   return (
-    <div>
+    <div className="relative z-20">
+      <PreviewSeekBar duration={duration} disabled={controlsDisabled} onSeek={onSeek} />
       <div
-        className="grid h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3"
+        className="grid h-7 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3"
         aria-disabled={disabled || undefined}
         style={{
           paddingBottom: "env(safe-area-inset-bottom)",
@@ -257,7 +259,7 @@ export const PlayerControls = memo(function PlayerControls({
               onTogglePlay();
             }}
             disabled={controlsDisabled}
-            className="flex h-8 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
+            className="flex h-7 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
           >
             <PlayPauseMorphIcon playing={isPlaying} />
           </button>

package/src/player/components/PreviewSeekBar.tsx

@@ -0,0 +1,47 @@
+import { memo, useEffect, useRef } from "react";
+import { formatTime } from "../lib/time";
+import { liveTime, usePlayerStore } from "../store/playerStore";
+
+export const PreviewSeekBar = memo(function PreviewSeekBar({
+  duration,
+  disabled,
+  onSeek,
+}: {
+  duration: number;
+  disabled: boolean;
+  onSeek: (time: number) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const updateTime = (time: number) => {
+      input.value = String(time);
+      const text = `${formatTime(time)} of ${formatTime(duration)}`;
+      if (input.getAttribute("aria-valuetext") !== text) input.setAttribute("aria-valuetext", text);
+    };
+    updateTime(usePlayerStore.getState().currentTime);
+    const unsubscribe = liveTime.subscribe(updateTime);
+    return () => {
+      unsubscribe();
+    };
+  }, [duration]);
+
+  return (
+    <div className="flex h-3 items-center px-3">
+      <input
+        ref={inputRef}
+        type="range"
+        min="0"
+        max={duration}
+        step="any"
+        defaultValue={0}
+        disabled={disabled || duration <= 0}
+        aria-label="Seek preview"
+        onChange={(event) => onSeek(event.currentTarget.valueAsNumber)}
+        className="h-6 w-full cursor-pointer accent-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-ink disabled:cursor-default disabled:opacity-30"
+      />
+    </div>
+  );
+});

package/src/components/renders/useRenderQueueMotionBlur.test.tsx

@@ -1,61 +0,0 @@
-// @vitest-environment happy-dom
-
-// WYSIWYG: a render only blurs what the Studio preview could show, and only the browser knows
-// whether it has html-in-canvas. The request body is how it tells the server.
-
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { startRenderAndReadBody, type MountedQueue } from "./renderQueueTestHarness";
-
-vi.mock("../../telemetry/events", () => ({ trackStudioRenderStart: vi.fn() }));
-
-const { useRenderQueue } = await import("./useRenderQueue");
-
-let queue: MountedQueue | null = null;
-
-async function startRenderBody(): Promise<Record<string, unknown>> {
-  const started = await startRenderAndReadBody(useRenderQueue, {
-    opts: { fps: 30, quality: "standard", format: "mp4" },
-  });
-  queue = started.queue;
-  return started.body;
-}
-
-function stubHtmlInCanvas(members: string[]): void {
-  vi.stubGlobal(
-    "CanvasRenderingContext2D",
-    class {
-      drawElementImage(): void {}
-    },
-  );
-  const proto = HTMLCanvasElement.prototype as unknown as Record<string, unknown>;
-  for (const name of ["requestPaint", ...members]) proto[name] = () => {};
-}
-
-afterEach(() => {
-  queue?.unmount();
-  queue = null;
-  document.body.innerHTML = "";
-  for (const name of ["requestPaint", "layoutSubtree", "updateElementGeometry"]) {
-    delete (HTMLCanvasElement.prototype as unknown as Record<string, unknown>)[name];
-  }
-  vi.unstubAllGlobals();
-});
-
-describe("render request previewMotionBlur", () => {
-  it("is false in a browser without html-in-canvas", async () => {
-    expect((await startRenderBody())["previewMotionBlur"]).toBe(false);
-  });
-
-  it.each([
-    ["the layoutsubtree form", "layoutSubtree"],
-    ["the content=drawable form", "updateElementGeometry"],
-  ])("is true in a browser with html-in-canvas in %s", async (_name, member) => {
-    stubHtmlInCanvas([member]);
-    expect((await startRenderBody())["previewMotionBlur"]).toBe(true);
-  });
-
-  it("is false when html-in-canvas has neither known form", async () => {
-    stubHtmlInCanvas([]);
-    expect((await startRenderBody())["previewMotionBlur"]).toBe(false);
-  });
-});