@flamingo-stack/openframe-frontend-core 0.0.733 → 0.0.735

package/dist/hooks/ui/use-resumable-timeout.d.ts

@@ -0,0 +1,22 @@
+export interface UseResumableTimeoutOptions {
+    /** The wait counts down only while this is true. */
+    running: boolean;
+    /** How long the whole wait is. */
+    durationMs: number;
+    /** A new value starts the wait over from nothing (the slide changed). */
+    resetKey: string | number;
+    /** Called once the whole wait has been run. */
+    onElapsed: () => void;
+}
+/**
+ * A wait that PAUSES instead of starting over: `durationMs` of time spent
+ * `running`, however many times it is interrupted. A carousel that scrolls off
+ * screen half-way through a slide comes back with half a slide left, not a
+ * whole one, and the bar that shows the wait picks up where it stopped.
+ *
+ * Returns how much of the wait had been run at the last stop (0 after a
+ * reset), which is what a progress bar draws while it is not running and
+ * where it resumes from.
+ */
+export declare function useResumableTimeout({ running, durationMs, resetKey, onElapsed }: UseResumableTimeoutOptions): number;
+//# sourceMappingURL=use-resumable-timeout.d.ts.map

package/dist/hooks/ui/use-resumable-timeout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resumable-timeout.d.ts","sourceRoot":"","sources":["../../../src/hooks/ui/use-resumable-timeout.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,0BAA0B;IACzC,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,0BAA0B,GAAG,MAAM,CA6BpH"}

package/dist/hooks/ui/use-resumable-timeout.js

@@ -0,0 +1,26 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function useResumableTimeout({ running, durationMs, resetKey, onElapsed }) {
+  const banked = useRef({ key: resetKey, ms: 0 });
+  const [shown, setShown] = useState({ key: resetKey, ms: 0 });
+  const onElapsedRef = useRef(onElapsed);
+  useEffect(() => {
+    onElapsedRef.current = onElapsed;
+  }, [onElapsed]);
+  useEffect(() => {
+    if (banked.current.key !== resetKey) banked.current = { key: resetKey, ms: 0 };
+    if (!running) return void 0;
+    const startedAt = Date.now();
+    const timer = setTimeout(() => onElapsedRef.current(), Math.max(0, durationMs - banked.current.ms));
+    return () => {
+      clearTimeout(timer);
+      const ms = Math.min(durationMs, banked.current.ms + (Date.now() - startedAt));
+      banked.current = { key: resetKey, ms };
+      setShown({ key: resetKey, ms });
+    };
+  }, [running, durationMs, resetKey]);
+  return shown.key === resetKey ? shown.ms : 0;
+}
+export {
+  useResumableTimeout
+};

package/dist/hooks/use-scenario-player.d.ts

@@ -64,9 +64,10 @@ export interface UseScenarioPlayerResult {
  * not held by the visitor, motion allowed. Under reduced motion it parks on the last step
  * of the current scenario, and every scenario can still be read by choosing it.
  *
- * The moment it becomes playable, and at the top of every scenario (the
- * rotation moved on, or a tab was chosen), its first step follows within
- * `START_MS`, not a whole step later; from there every step takes `stepMs`.
+ * A step is `stepMs` of time spent playing: an interruption pauses it and it
+ * resumes with what was left (`useResumableTimeout`, the one clock every timed
+ * thing here runs on). At the top of a scenario whose first step is the empty
+ * stage, that step is left within `START_MS`.
  *
  * A visitor's own choice (`go`, `setStep`) moves the clock there and lets go of
  * any hold; the rotation carries on from that point.

package/dist/hooks/use-scenario-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scenario-player.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scenario-player.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,iBAAiB,EAAe,MAAM,mBAAmB,CAAC;AAUxE,MAAM,WAAW,wBAAwB;IACvC,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAClD,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,sFAAsF;IACtF,IAAI,EAAE,OAAO,CAAC;IACd,mFAAmF;IACnF,SAAS,EAAE,iBAAiB,CAAC;IAC7B,kFAAkF;IAClF,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,EAAE,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qEAAqE;IACrE,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,EACb,QAAQ,EAAE,cAAc,EACxB,MAAM,EACN,MAAM,EACN,OAAc,EACd,eAAmB,EACnB,UAAkB,EAClB,cAAqB,GACtB,EAAE,wBAAwB,GAAG,uBAAuB,CAgEpD"}
+{"version":3,"file":"use-scenario-player.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scenario-player.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,iBAAiB,EAAe,MAAM,mBAAmB,CAAC;AAWxE,MAAM,WAAW,wBAAwB;IACvC,0DAA0D;IAC1D,aAAa,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAClD,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,sFAAsF;IACtF,IAAI,EAAE,OAAO,CAAC;IACd,mFAAmF;IACnF,SAAS,EAAE,iBAAiB,CAAC;IAC7B,kFAAkF;IAClF,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,EAAE,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qEAAqE;IACrE,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,aAAa,EACb,QAAQ,EAAE,cAAc,EACxB,MAAM,EACN,MAAM,EACN,OAAc,EACd,eAAmB,EACnB,UAAkB,EAClB,cAAqB,GACtB,EAAE,wBAAwB,GAAG,uBAAuB,CA0DpD"}

package/dist/hooks/use-scenario-player.js

@@ -1,6 +1,7 @@
 "use client";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { useAutoplay } from "./ui/use-autoplay.js";
+import { useResumableTimeout } from "./ui/use-resumable-timeout.js";
 const START_MS = 300;
 function useScenarioPlayer({
   scenarioCount,
@@ -21,28 +22,21 @@ function useScenarioPlayer({
   const playing = auto.playing && scenarioCount > 0;
   const [started, setStarted] = useState(false);
   if (playing && !started) setStarted(true);
-  const starting = useRef(false);
-  const wasPlaying = useRef(false);
-  useEffect(() => {
-    if (playing && !wasPlaying.current) starting.current = true;
-    wasPlaying.current = playing;
-    if (!playing) return void 0;
-    const atEnd = rawStep >= lastStep;
-    const quickStart = emptyFirstStep && (starting.current || rawStep === 0) && !atEnd;
-    starting.current = false;
-    const timer = setTimeout(
-      () => {
-        if (atEnd) {
-          setScenario((current) => (current + 1) % scenarioCount);
-          setRawStep(0);
-        } else {
-          setRawStep((current) => Math.min(current, lastStep) + 1);
-        }
-      },
-      atEnd ? holdMs : quickStart ? Math.min(START_MS, stepMs) : stepMs
-    );
-    return () => clearTimeout(timer);
-  }, [playing, rawStep, lastStep, stepMs, holdMs, scenario, scenarioCount, emptyFirstStep]);
+  const atEnd = rawStep >= lastStep;
+  const leavesAtOnce = emptyFirstStep && rawStep === 0 && !atEnd;
+  useResumableTimeout({
+    running: playing,
+    durationMs: atEnd ? holdMs : leavesAtOnce ? Math.min(START_MS, stepMs) : stepMs,
+    resetKey: `${scenario}:${Math.min(rawStep, lastStep)}`,
+    onElapsed: () => {
+      if (atEnd) {
+        setScenario((current) => (current + 1) % scenarioCount);
+        setRawStep(0);
+      } else {
+        setRawStep((current) => Math.min(current, lastStep) + 1);
+      }
+    }
+  });
   const setStep = useCallback(
     (next) => {
       setRawStep(Math.max(0, Math.min(lastStep, next)));