@hyperframes/studio 0.8.92 → 0.8.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.92",
+  "version": "0.8.93",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.92",
-    "@hyperframes/sdk": "0.8.92",
-    "@hyperframes/parsers": "0.8.92",
-    "@hyperframes/shader-transitions": "0.8.92",
-    "@hyperframes/player": "0.8.92",
-    "@hyperframes/studio-server": "0.8.92"
+    "@hyperframes/core": "0.8.93",
+    "@hyperframes/shader-transitions": "0.8.93",
+    "@hyperframes/studio-server": "0.8.93",
+    "@hyperframes/parsers": "0.8.93",
+    "@hyperframes/player": "0.8.93",
+    "@hyperframes/sdk": "0.8.93"
   },
   "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.92"
+    "@hyperframes/producer": "0.8.93"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -353,7 +353,11 @@ describe("useTimelinePlayer seek keepPlaying option (#834)", () => {
 describe("useTimelinePlayer RAF loop wrap-around", () => {
   type SeekCall = { time: number; options?: { keepPlaying?: boolean } };
 
-  function attachInstrumentedAdapter(api: ReturnType<typeof useTimelinePlayer>, duration = 30) {
+  function attachInstrumentedAdapter(
+    api: ReturnType<typeof useTimelinePlayer>,
+    duration = 30,
+    hooks: object = {},
+  ) {
     let currentTime = 0;
     let playing = false;
     const seekCalls: SeekCall[] = [];
@@ -377,6 +381,7 @@ describe("useTimelinePlayer RAF loop wrap-around", () => {
     };
     attachIframeWindow(api, {
       __player: adapter,
+      __hf: hooks,
       postMessage: () => {},
       scrollTo: () => {},
       addEventListener: () => {},
@@ -446,6 +451,29 @@ describe("useTimelinePlayer RAF loop wrap-around", () => {
     }
   });
 
+  it("tells the preview where the loop wraps to while it plays, and that it stopped looping", () => {
+    const raf = installRafCapture();
+    try {
+      const { api, root } = renderTimelinePlayerHarness();
+      const setLoopStart = vi.fn();
+      const { adapter } = attachInstrumentedAdapter(api, 30, { setLoopStart });
+      act(() => {
+        usePlayerStore.getState().setInPoint(2);
+        usePlayerStore.getState().setOutPoint(5);
+        api.play();
+      });
+      adapter.setTime(3);
+      act(() => void raf.flushOne());
+      expect(setLoopStart).toHaveBeenLastCalledWith(2);
+      act(() => usePlayerStore.getState().setLoopEnabled(false));
+      act(() => void raf.flushOne());
+      expect(setLoopStart).toHaveBeenLastCalledWith(null);
+      unmountWithAct(root);
+    } finally {
+      raf.restore();
+    }
+  });
+
   it("does not seek and pauses cleanly when forward playback reaches the end without loop", () => {
     const raf = installRafCapture();
     try {

package/src/player/hooks/useTimelinePlayer.ts

@@ -152,12 +152,18 @@ export function useTimelinePlayer({
     [],
   );
 
+  const setLoopStart = useCallback((seconds: number | null) => {
+    try {
+      (iframeRef.current?.contentWindow as IframeWindow | null)?.__hf?.setLoopStart?.(seconds);
+    } catch {}
+  }, []);
   const { startRAFLoop, stopRAFLoop, stopReverseLoop } = useTimelinePlayerLoop({
     rafRef,
     reverseRafRef,
     getAdapter,
     setCurrentTime,
     setIsPlaying,
+    setLoopStart,
   });
 
   const applyPlaybackRate = useCallback((rate: number) => {

package/src/player/hooks/useTimelinePlayerLoop.ts

@@ -22,6 +22,7 @@ interface UseTimelinePlayerLoopParams {
   getAdapter: () => PlaybackAdapter | null;
   setCurrentTime: (v: number) => void;
   setIsPlaying: (v: boolean) => void;
+  setLoopStart: (seconds: number | null) => void;
 }
 
 interface UseTimelinePlayerLoopResult {
@@ -36,6 +37,7 @@ export function useTimelinePlayerLoop({
   getAdapter,
   setCurrentTime,
   setIsPlaying,
+  setLoopStart,
 }: UseTimelinePlayerLoopParams): UseTimelinePlayerLoopResult {
   const stopReverseLoop = useCallback(() => {
     cancelAnimationFrame(reverseRafRef.current);
@@ -55,8 +57,10 @@ export function useTimelinePlayerLoop({
         const rawLoopStart = inPoint !== null ? inPoint : 0;
         const loopEnd = rawLoopStart < rawLoopEnd ? rawLoopEnd : dur;
         const loopStart = rawLoopStart < rawLoopEnd ? rawLoopStart : 0;
+        const looping = usePlayerStore.getState().loopEnabled && dur > 0;
+        setLoopStart(looping ? loopStart : null);
         if (time >= loopEnd) {
-          if (usePlayerStore.getState().loopEnabled && dur > 0) {
+          if (looping) {
             // keepPlaying skips the adapter's implicit pause; play() below is then a no-op.
             adapter.seek(loopStart, { keepPlaying: true });
             liveTime.notify(loopStart);
@@ -75,7 +79,7 @@ export function useTimelinePlayerLoop({
       rafRef.current = requestAnimationFrame(tick);
     };
     rafRef.current = requestAnimationFrame(tick);
-  }, [rafRef, getAdapter, setCurrentTime, setIsPlaying]);
+  }, [rafRef, getAdapter, setCurrentTime, setIsPlaying, setLoopStart]);
 
   const stopRAFLoop = useCallback(() => {
     cancelAnimationFrame(rafRef.current);

package/src/player/lib/playbackTypes.ts

@@ -69,5 +69,6 @@ export type IframeWindow = Window & {
   __hf?: {
     leasePausedMedia?: (el: HTMLMediaElement) => void;
     releasePausedMedia?: (el: HTMLMediaElement) => void;
+    setLoopStart?: (seconds: number | null) => void;
   };
 };