@hyperframes/studio 0.8.73 → 0.8.75

package/src/player/hooks/useShadowPreviewReload.ts

@@ -14,6 +14,7 @@ import {
 } from "./useTimelineSyncCallbacks";
 import type { PlaybackAdapter } from "../lib/playbackTypes";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
+import { usePlayerStore } from "../store/playerStore";
 
 // One wait budget for a shadow: the player's 8s asset cap plus its 0.42s loader fade
 // leaves about 6.5s for the document load and runtime boot. Nothing shorter may fail the swap.
@@ -35,6 +36,8 @@ type UseShadowPreviewReloadParams = Omit<
   onPromoted?: () => void;
   /** A shadow that never became ready was dropped; the live preview is unchanged. */
   onReloadFailed?: (message: string) => void;
+  /** Puts the promoted document at the live frame's time, playing if the live frame was. */
+  handOverPlayback: (time: number, playing: boolean) => void;
 };
 
 export function useShadowPreviewReload({
@@ -51,6 +54,7 @@ export function useShadowPreviewReload({
   applyPreviewAudioState,
   onPromoted,
   onReloadFailed,
+  handOverPlayback,
 }: UseShadowPreviewReloadParams) {
   const shadowIframeRef = useRef<HTMLIFrameElement | null>(null);
   const shadowProbeIntervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
@@ -62,6 +66,8 @@ export function useShadowPreviewReload({
   onPromotedRef.current = onPromoted;
   const onReloadFailedRef = useRef(onReloadFailed);
   onReloadFailedRef.current = onReloadFailed;
+  const handOverPlaybackRef = useRef(handOverPlayback);
+  handOverPlaybackRef.current = handOverPlayback;
   const readyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const budgetsSpentRef = useRef(0);
   // The shadow still owed a wait budget, so a hidden tab can resume it when it becomes visible.
@@ -102,6 +108,11 @@ export function useShadowPreviewReload({
       const ready = pending?.gen === gen && visuallyReadyGenRef.current === gen;
       if (!shadow || !pending || !ready || gen !== shadowGenRef.current) return;
       stopPendingShadow();
+      // The live frame kept playing, stopped at the end or was seeked while the shadow loaded.
+      const live = getAdapter();
+      const liveTime = live?.getTime();
+      const playing = usePlayerStore.getState().isPlaying;
+      live?.pause();
       // The store takes the new document's timeline only now that it is the one on screen.
       pending.commit();
       iframeRef.current = shadow;
@@ -109,10 +120,17 @@ export function useShadowPreviewReload({
       attachIframeShortcutListeners();
       applyPreviewAudioState();
       setPreviewSlots((prev) => planShadowPromotion(prev, gen));
+      if (liveTime != null) handOverPlaybackRef.current(liveTime, playing);
       onPromotedRef.current?.();
       thumbnailScheduler.setPreviewReloading(false);
     },
-    [stopPendingShadow, iframeRef, attachIframeShortcutListeners, applyPreviewAudioState],
+    [
+      stopPendingShadow,
+      getAdapter,
+      iframeRef,
+      attachIframeShortcutListeners,
+      applyPreviewAudioState,
+    ],
   );
 
   const getShadowAdapter = useCallback(() => getAdapter(shadowIframeRef.current), [getAdapter]);

package/src/player/hooks/useTimelinePlayer.shadowReload.test.ts

@@ -224,6 +224,91 @@ describe("shadow reload readiness and failure", () => {
     unmount(root);
   });
 
+  it("keeps a playing film playing through a reload, from where the live frame had reached", () => {
+    const { getApi, root } = renderTimelinePlayerHarness();
+    const { adapter: liveAdapter, win } = makeAdapterWindow();
+    act(() => {
+      getApi().iframeRef.current = makeFakeIframe(win);
+      getApi().onIframeLoad();
+    });
+    usePlayerStore.setState({ timelineReady: true });
+    act(() => getApi().play());
+    liveAdapter.pause.mockClear();
+    liveAdapter.seek(4.2);
+
+    act(() => getApi().refreshPlayer());
+    expect(usePlayerStore.getState().isPlaying).toBe(true);
+    expect(liveAdapter.pause).not.toHaveBeenCalled();
+
+    liveAdapter.seek(5.5);
+    const gen = getApi().previewSlots.find((s) => s.role === "shadow")!.gen;
+    const shadow = makeShadowWithSpies();
+    act(() => {
+      getApi().setShadowIframeNode(shadow.iframe);
+      getApi().onShadowIframeLoad(gen);
+      getApi().onShadowReadyChange(gen, true);
+    });
+    expect(getApi().iframeRef.current).toBe(shadow.iframe);
+    expect(liveAdapter.pause).toHaveBeenCalled();
+    expect(shadow.adapter.getTime()).toBe(5.5);
+    expect(shadow.adapter.isPlaying()).toBe(true);
+    expect(usePlayerStore.getState().isPlaying).toBe(true);
+    unmount(root);
+  });
+
+  it("keeps where a film was paused while the reload loaded", () => {
+    const { getApi, root } = renderTimelinePlayerHarness();
+    const { adapter: liveAdapter, win } = makeAdapterWindow();
+    act(() => {
+      getApi().iframeRef.current = makeFakeIframe(win);
+      getApi().onIframeLoad();
+    });
+    usePlayerStore.setState({ timelineReady: true });
+    act(() => getApi().play());
+    liveAdapter.seek(4.2);
+    act(() => getApi().refreshPlayer());
+
+    liveAdapter.seek(7);
+    act(() => getApi().pause());
+    const gen = getApi().previewSlots.find((s) => s.role === "shadow")!.gen;
+    const shadow = makeShadowWithSpies();
+    act(() => {
+      getApi().setShadowIframeNode(shadow.iframe);
+      getApi().onShadowIframeLoad(gen);
+      getApi().onShadowReadyChange(gen, true);
+    });
+    expect(getApi().iframeRef.current).toBe(shadow.iframe);
+    expect(shadow.adapter.getTime()).toBe(7);
+    expect(shadow.adapter.isPlaying()).toBe(false);
+    expect(usePlayerStore.getState().isPlaying).toBe(false);
+    unmount(root);
+  });
+
+  it("stops a playing film at the new end when the edit cut it short of the live time", () => {
+    const { getApi, root } = renderTimelinePlayerHarness();
+    const { adapter: liveAdapter, win } = makeAdapterWindow();
+    act(() => {
+      getApi().iframeRef.current = makeFakeIframe(win);
+      getApi().onIframeLoad();
+    });
+    usePlayerStore.setState({ timelineReady: true });
+    act(() => getApi().play());
+    act(() => getApi().refreshPlayer());
+
+    liveAdapter.seek(12);
+    const gen = getApi().previewSlots.find((s) => s.role === "shadow")!.gen;
+    const shorter = makeAdapterWindow({ duration: 10 });
+    act(() => {
+      getApi().setShadowIframeNode(makeFakeIframe(shorter.win));
+      getApi().onShadowIframeLoad(gen);
+      getApi().onShadowReadyChange(gen, true);
+    });
+    expect(shorter.adapter.getTime()).toBe(10);
+    expect(shorter.adapter.isPlaying()).toBe(false);
+    expect(usePlayerStore.getState().isPlaying).toBe(false);
+    unmount(root);
+  });
+
   it("does not promote a shadow whose loader is still up, and promotes once it clears", () => {
     const { getApi, live, gen, root } = beginReload();
     const shadow = makeShadowWithSpies();

package/src/player/hooks/useTimelinePlayer.ts

@@ -400,6 +400,13 @@ export function useTimelinePlayer({
     applyPreviewAudioState,
     onPromoted: onShadowPromoted,
     onReloadFailed: onPreviewReloadFailed,
+    handOverPlayback: (time, playing) => {
+      // keepPlaying: move the playhead without the paused-seek audio scrub.
+      seek(time, { keepPlaying: true });
+      const adapter = getAdapter();
+      // An edit that cut the film short of the live time stops it at the new end, as playback does.
+      if (playing && adapter && adapter.getTime() < adapter.getDuration()) play();
+    },
   });
 
   const saveSeekPosition = useCallback(() => {
@@ -422,17 +429,21 @@ export function useTimelinePlayer({
       }
     }
     isRefreshingRef.current = true;
-    stopRAFLoop();
+    // Forward playback runs on in the live frame; the promotion hands it to the new document.
+    const keepPlaying =
+      usePlayerStore.getState().isPlaying && shuttleDirectionRef.current !== "backward";
     stopReverseLoop();
+    if (keepPlaying) return true;
+    stopRAFLoop();
     setIsPlaying(false);
+    return false;
   }, [getAdapter, stopRAFLoop, setIsPlaying, stopReverseLoop]);
   const refreshPlayer = useCallback(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
     logReload("refreshPlayer", () => ({ stack: new Error("refreshPlayer").stack }));
-    saveSeekPosition();
     // The old iframe is no longer navigated away, so stop its playback (and audio) here.
-    getAdapter()?.pause();
+    if (!saveSeekPosition()) getAdapter()?.pause();
     // The live iframe is never hidden; the reload loads in a shadow and is promoted once painted.
     const src = iframe.src;
     const url = new URL(src, window.location.origin);