@rendiv/core 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,10 +1,10 @@
-import G, { createContext as P, useContext as p, useEffect as N, forwardRef as ie, useId as se, useMemo as H, Children as J, useRef as F, useCallback as V, useState as ae } from "react";
-import { jsx as E, Fragment as ce } from "react/jsx-runtime";
-const x = P({
+import G, { createContext as O, useContext as p, useEffect as M, forwardRef as le, useId as ae, useMemo as H, Children as J, useRef as R, useCallback as $, useState as ee } from "react";
+import { jsx as I, Fragment as se } from "react/jsx-runtime";
+const F = O({
   frame: 0,
   playing: !1,
   playingRef: { current: !1 }
-}), R = P({
+}), x = O({
   id: null,
   from: 0,
   durationInFrames: 1 / 0,
@@ -12,13 +12,13 @@ const x = P({
   accumulatedOffset: 0,
   localOffset: 0
 });
-function Ne() {
-  const e = p(x), n = p(R);
+function Re() {
+  const e = p(F), n = p(x);
   return e.frame - n.accumulatedOffset;
 }
-const z = P(null);
-function _e() {
-  const e = p(z);
+const D = O(null);
+function Fe() {
+  const e = p(D);
   if (!e)
     throw new Error(
       "useCompositionConfig() must be called inside a <Composition>, <Player>, or during rendering."
@@ -26,17 +26,17 @@ function _e() {
   return e;
 }
 const X = () => {
-}, ee = P({
+}, ne = O({
   compositions: [],
   registerComposition: X,
   unregisterComposition: X,
   currentCompositionId: null,
   setCurrentCompositionId: X,
   inputProps: {}
-}), A = P(null);
-function Fe(e) {
-  const { registerComposition: n, unregisterComposition: t } = p(ee), o = p(A);
-  return N(() => (n({
+}), j = O(null);
+function xe(e) {
+  const { registerComposition: n, unregisterComposition: t } = p(ne), o = p(j);
+  return M(() => (n({
     id: e.id,
     component: e.component,
     durationInFrames: e.durationInFrames,
@@ -49,7 +49,7 @@ function Fe(e) {
     type: "composition"
   }), () => t(e.id)), [e.id]), null;
 }
-const le = {
+const ue = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -59,18 +59,18 @@ const le = {
   height: "100%",
   display: "flex",
   flexDirection: "column"
-}, U = ie(
-  ({ style: e, ...n }, t) => /* @__PURE__ */ E(
+}, W = le(
+  ({ style: e, ...n }, t) => /* @__PURE__ */ I(
     "div",
     {
       ref: t,
-      style: { ...le, ...e },
+      style: { ...ue, ...e },
       ...n
     }
   )
 );
-U.displayName = "Fill";
-const ne = ({
+W.displayName = "Fill";
+const te = ({
   from: e = 0,
   durationInFrames: n = 1 / 0,
   name: t,
@@ -78,35 +78,35 @@ const ne = ({
   style: r,
   children: i
 }) => {
-  const s = p(R), a = p(x), l = se(), d = s.accumulatedOffset + e, g = a.frame;
-  N(() => {
+  const c = p(x), l = p(F), u = ae(), a = c.accumulatedOffset + e, m = l.frame;
+  M(() => {
     if (typeof window > "u") return;
-    const y = window;
-    y.__RENDIV_TIMELINE_ENTRIES__ || (y.__RENDIV_TIMELINE_ENTRIES__ = /* @__PURE__ */ new Map());
-    const u = y.__RENDIV_TIMELINE_ENTRIES__, c = s.id, f = { id: l, name: t ?? "Sequence", from: d, durationInFrames: n, parentId: c };
-    return u.set(l, f), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync")), () => {
-      u.delete(l), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync"));
+    const w = window;
+    w.__RENDIV_TIMELINE_ENTRIES__ || (w.__RENDIV_TIMELINE_ENTRIES__ = /* @__PURE__ */ new Map());
+    const f = w.__RENDIV_TIMELINE_ENTRIES__, s = c.id, d = { id: u, name: t ?? "Sequence", from: a, durationInFrames: n, parentId: s };
+    return f.set(u, d), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync")), () => {
+      f.delete(u), document.dispatchEvent(new CustomEvent("rendiv:timeline-sync"));
     };
-  }, [l, t, d, n]);
-  const m = H(
+  }, [u, t, a, n]);
+  const h = H(
     () => ({
-      id: l,
-      from: d,
+      id: u,
+      from: a,
       durationInFrames: n,
-      parentOffset: s.accumulatedOffset,
-      accumulatedOffset: d,
+      parentOffset: c.accumulatedOffset,
+      accumulatedOffset: a,
       localOffset: e
     }),
-    [l, d, n, s.accumulatedOffset, e]
+    [u, a, n, c.accumulatedOffset, e]
   );
-  if (g < d || g >= d + n) return null;
-  const b = /* @__PURE__ */ E(R.Provider, { value: m, children: i });
-  return o === "none" ? b : /* @__PURE__ */ E(U, { style: r, children: b });
+  if (m < a || m >= a + n) return null;
+  const b = /* @__PURE__ */ I(x.Provider, { value: h, children: i });
+  return o === "none" ? b : /* @__PURE__ */ I(W, { style: r, children: b });
 };
-ne.displayName = "Sequence";
-function xe(e) {
-  const { registerComposition: n, unregisterComposition: t } = p(ee), o = p(A);
-  return N(() => (n({
+te.displayName = "Sequence";
+function $e(e) {
+  const { registerComposition: n, unregisterComposition: t } = p(ne), o = p(j);
+  return M(() => (n({
     id: e.id,
     component: e.component,
     durationInFrames: 1,
@@ -118,99 +118,99 @@ function xe(e) {
     type: "still"
   }), () => t(e.id)), [e.id]), null;
 }
-const ue = ({ name: e, children: n }) => {
-  const t = p(A), o = t ? `${t}/${e}` : e;
-  return /* @__PURE__ */ E(A.Provider, { value: o, children: n });
+const fe = ({ name: e, children: n }) => {
+  const t = p(j), o = t ? `${t}/${e}` : e;
+  return /* @__PURE__ */ I(j.Provider, { value: o, children: n });
 };
-ue.displayName = "Folder";
-function j(e) {
+fe.displayName = "Folder";
+function Y(e) {
   throw new Error(
     "<Series.Sequence> can only be used as a direct child of <Series>."
   );
 }
-j.displayName = "Series.Sequence";
-function te({ children: e }) {
+Y.displayName = "Series.Sequence";
+function re({ children: e }) {
   const n = J.toArray(e);
   let t = 0;
   const o = [];
   for (const r of n) {
     if (!G.isValidElement(r)) continue;
-    if (r.type !== j)
+    if (r.type !== Y)
       throw new Error(
         "Only <Series.Sequence> elements are allowed as children of <Series>."
       );
     const {
       durationInFrames: i,
-      offset: s = 0,
-      name: a,
-      layout: l,
-      style: d,
-      children: g
-    } = r.props, m = t + s;
-    let b = a;
+      offset: c = 0,
+      name: l,
+      layout: u,
+      style: a,
+      children: m
+    } = r.props, h = t + c;
+    let b = l;
     if (!b) {
-      const y = J.toArray(g);
-      if (y.length > 0) {
-        const u = y[0];
-        if (G.isValidElement(u) && typeof u.type != "string") {
-          const c = u.type;
-          b = c.displayName || c.name;
+      const w = J.toArray(m);
+      if (w.length > 0) {
+        const f = w[0];
+        if (G.isValidElement(f) && typeof f.type != "string") {
+          const s = f.type;
+          b = s.displayName || s.name;
         }
       }
     }
     o.push(
-      /* @__PURE__ */ E(
-        ne,
+      /* @__PURE__ */ I(
+        te,
         {
-          from: m,
+          from: h,
           durationInFrames: i,
           name: b,
-          layout: l,
-          style: d,
-          children: g
+          layout: u,
+          style: a,
+          children: m
         },
         r.key ?? o.length
       )
-    ), t = m + i;
+    ), t = h + i;
   }
-  return /* @__PURE__ */ E(ce, { children: o });
+  return /* @__PURE__ */ I(se, { children: o });
 }
-te.displayName = "Series";
-const Re = Object.assign(te, {
-  Sequence: j
+re.displayName = "Series";
+const Pe = Object.assign(re, {
+  Sequence: Y
 });
-function fe({
+function de({
   durationInFrames: e,
   times: n = 1 / 0,
   layout: t = "absolute-fill",
   style: o,
   children: r
 }) {
-  const i = p(x), s = p(R), a = i.frame - s.accumulatedOffset;
-  if (a < 0 || n !== 1 / 0 && a >= e * n) return null;
-  const l = a % e, d = H(
+  const i = p(F), c = p(x), l = i.frame - c.accumulatedOffset;
+  if (l < 0 || n !== 1 / 0 && l >= e * n) return null;
+  const u = l % e, a = H(
     () => ({
-      frame: l + s.accumulatedOffset,
+      frame: u + c.accumulatedOffset,
       playing: i.playing,
       playingRef: i.playingRef
     }),
-    [l, s.accumulatedOffset, i.playing, i.playingRef]
-  ), g = H(
+    [u, c.accumulatedOffset, i.playing, i.playingRef]
+  ), m = H(
     () => ({
       id: null,
-      from: s.accumulatedOffset,
+      from: c.accumulatedOffset,
       durationInFrames: e,
-      parentOffset: s.accumulatedOffset,
-      accumulatedOffset: s.accumulatedOffset,
+      parentOffset: c.accumulatedOffset,
+      accumulatedOffset: c.accumulatedOffset,
       localOffset: 0
     }),
-    [s.accumulatedOffset, e]
-  ), m = /* @__PURE__ */ E(x.Provider, { value: d, children: /* @__PURE__ */ E(R.Provider, { value: g, children: r }) });
-  return t === "none" ? m : /* @__PURE__ */ E(U, { style: o, children: m });
+    [c.accumulatedOffset, e]
+  ), h = /* @__PURE__ */ I(F.Provider, { value: a, children: /* @__PURE__ */ I(x.Provider, { value: m, children: r }) });
+  return t === "none" ? h : /* @__PURE__ */ I(W, { style: o, children: h });
 }
-fe.displayName = "Loop";
-function de({ frame: e, children: n }) {
-  const t = p(x), o = H(
+de.displayName = "Loop";
+function me({ frame: e, children: n }) {
+  const t = p(F), o = H(
     () => ({
       frame: e,
       playing: t.playing,
@@ -218,149 +218,149 @@ function de({ frame: e, children: n }) {
     }),
     [e, t.playing, t.playingRef]
   );
-  return /* @__PURE__ */ E(x.Provider, { value: o, children: n });
+  return /* @__PURE__ */ I(F.Provider, { value: o, children: n });
 }
-de.displayName = "Freeze";
-let me = 0;
-const $ = /* @__PURE__ */ new Map();
-function D(e, n) {
-  const t = ++me, o = e ?? `Handle ${t}`, { timeoutInMilliseconds: r } = n ?? {};
+me.displayName = "Freeze";
+let he = 0;
+const L = /* @__PURE__ */ new Map();
+function k(e, n) {
+  const t = ++he, o = e ?? `Handle ${t}`, { timeoutInMilliseconds: r } = n ?? {};
   let i = null;
   return r !== void 0 && r > 0 && (i = setTimeout(() => {
-    if ($.has(t))
-      throw $.delete(t), new Error(
+    if (L.has(t))
+      throw L.delete(t), new Error(
         `holdRender() timed out after ${r}ms (label: "${o}"). You can increase the timeout by passing a larger timeoutInMilliseconds to holdRender().`
       );
-  }, r)), $.set(t, { label: o, timeoutId: i }), t;
+  }, r)), L.set(t, { label: o, timeoutId: i }), t;
 }
-function _(e) {
-  const n = $.get(e);
+function S(e) {
+  const n = L.get(e);
   if (!n)
     throw new Error(
       `releaseRender() was called with handle ${e}, but no corresponding holdRender() exists.`
     );
-  n.timeoutId !== null && clearTimeout(n.timeoutId), $.delete(e);
+  n.timeoutId !== null && clearTimeout(n.timeoutId), L.delete(e);
 }
-function Te(e) {
+function Le(e) {
   throw new Error(`Render cancelled: ${e}`);
 }
-function $e() {
-  return $.size;
+function Oe() {
+  return L.size;
 }
-function Pe() {
-  return Array.from($.values()).map((e) => e.label);
+function Te() {
+  return Array.from(L.values()).map((e) => e.label);
 }
-function he({
+function ge({
   holdRenderTimeout: e = 3e4,
   onLoad: n,
   onError: t,
   ...o
 }) {
-  const r = F(null);
-  N(() => {
-    const a = D(
+  const r = R(null);
+  M(() => {
+    const l = k(
       `Loading <Img> with src="${o.src}"`,
       { timeoutInMilliseconds: e }
     );
-    return r.current = a, () => {
-      r.current !== null && (_(r.current), r.current = null);
+    return r.current = l, () => {
+      r.current !== null && (S(r.current), r.current = null);
     };
   }, [o.src, e]);
-  const i = V(
-    (a) => {
-      r.current !== null && (_(r.current), r.current = null), n == null || n(a);
+  const i = $(
+    (l) => {
+      r.current !== null && (S(r.current), r.current = null), n == null || n(l);
     },
     [n]
-  ), s = V(
-    (a) => {
-      r.current !== null && (_(r.current), r.current = null), t == null || t(a);
+  ), c = $(
+    (l) => {
+      r.current !== null && (S(r.current), r.current = null), t == null || t(l);
     },
     [t]
   );
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ I(
     "img",
     {
       ...o,
       onLoad: i,
-      onError: s
+      onError: c
     }
   );
 }
-he.displayName = "Img";
-const Y = P({
+ge.displayName = "Img";
+const z = O({
   environment: "studio"
 });
-function ge({
+function oe({
   src: e,
   startFrom: n = 0,
   endAt: t,
   volume: o = 1,
   playbackRate: r = 1,
   muted: i = !1,
-  style: s,
-  className: a,
-  holdRenderTimeout: l = 3e4,
-  ...d
+  style: c,
+  className: l,
+  holdRenderTimeout: u = 3e4,
+  ...a
 }) {
-  const g = F(null), m = p(x), b = p(R), y = p(z), { environment: u } = p(Y), c = F(null), f = F(null), w = u === "rendering", v = (y == null ? void 0 : y.fps) ?? 30, M = m.frame - b.accumulatedOffset, I = M + n, C = I / v;
-  N(() => {
-    const h = D(
+  const m = R(null), h = p(F), b = p(x), w = p(D), { environment: f } = p(z), s = R(null), d = R(null), y = f === "rendering", v = (w == null ? void 0 : w.fps) ?? 30, _ = h.frame - b.accumulatedOffset, C = _ + n, E = C / v;
+  M(() => {
+    const g = k(
       `Loading <Video> metadata for src="${e}"`,
-      { timeoutInMilliseconds: l }
+      { timeoutInMilliseconds: u }
     );
-    return c.current = h, () => {
-      c.current !== null && (_(c.current), c.current = null);
+    return s.current = g, () => {
+      s.current !== null && (S(s.current), s.current = null);
     };
-  }, [e, l]);
-  const T = V(() => {
-    c.current !== null && (_(c.current), c.current = null);
-  }, []), q = V(() => {
-    c.current !== null && (_(c.current), c.current = null);
+  }, [e, u]);
+  const P = $(() => {
+    s.current !== null && (S(s.current), s.current = null);
+  }, []), T = $(() => {
+    s.current !== null && (S(s.current), s.current = null);
   }, []);
-  return N(() => {
-    const h = g.current;
-    h && (h.volume = o, h.muted = i);
-  }, [o, i]), N(() => {
-    const h = g.current;
-    h && (h.playbackRate = r);
-  }, [r]), N(() => {
-    const h = g.current;
-    if (h) {
-      if (t !== void 0 && I >= t) {
-        h.pause();
+  return M(() => {
+    const g = m.current;
+    g && (g.volume = o, g.muted = i);
+  }, [o, i]), M(() => {
+    const g = m.current;
+    g && (g.playbackRate = r);
+  }, [r]), M(() => {
+    const g = m.current;
+    if (g) {
+      if (t !== void 0 && C >= t) {
+        g.pause();
         return;
       }
-      if (w) {
-        if (h.pause(), f.current !== C) {
-          f.current = C;
-          const S = D(
-            `Seeking <Video> to ${C.toFixed(3)}s`,
-            { timeoutInMilliseconds: l }
-          ), k = () => {
-            _(S), h.removeEventListener("seeked", k);
+      if (y) {
+        if (g.pause(), d.current !== E) {
+          d.current = E;
+          const N = k(
+            `Seeking <Video> to ${E.toFixed(3)}s`,
+            { timeoutInMilliseconds: u }
+          ), V = () => {
+            S(N), g.removeEventListener("seeked", V);
           };
-          h.addEventListener("seeked", k), h.currentTime = C;
+          g.addEventListener("seeked", V), g.currentTime = E;
         }
       } else
-        Math.abs(h.currentTime - C) > 0.1 && (h.currentTime = C), m.playing && h.paused ? h.play().catch(() => {
-        }) : !m.playing && !h.paused && h.pause();
+        Math.abs(g.currentTime - E) > 0.1 && (g.currentTime = E), h.playing && g.paused ? g.play().catch(() => {
+        }) : !h.playing && !g.paused && g.pause();
     }
-  }, [M, w, C, m.playing, t, I, l]), /* @__PURE__ */ E(
+  }, [_, y, E, h.playing, t, C, u]), /* @__PURE__ */ I(
     "video",
     {
-      ref: g,
+      ref: m,
       src: e,
       preload: "auto",
       playsInline: !0,
-      style: s,
-      className: a,
-      onLoadedMetadata: T,
-      onError: q,
-      ...d
+      style: c,
+      className: l,
+      onLoadedMetadata: P,
+      onError: T,
+      ...a
     }
   );
 }
-ge.displayName = "Video";
+oe.displayName = "Video";
 function pe({
   src: e,
   startFrom: n = 0,
@@ -369,21 +369,21 @@ function pe({
   playbackRate: r = 1,
   muted: i = !1
 }) {
-  const s = F(null), a = p(x), l = p(R), d = p(z), { environment: g } = p(Y), m = g === "rendering", b = (d == null ? void 0 : d.fps) ?? 30, y = a.frame - l.accumulatedOffset, u = y + n, c = u / b;
-  return N(() => {
-    if (m) return;
-    const f = s.current;
-    if (!f) return;
-    if (f.volume = o, f.muted = i, f.playbackRate = r, t !== void 0 && u >= t) {
-      f.pause();
+  const c = R(null), l = p(F), u = p(x), a = p(D), { environment: m } = p(z), h = m === "rendering", b = (a == null ? void 0 : a.fps) ?? 30, w = l.frame - u.accumulatedOffset, f = w + n, s = f / b;
+  return M(() => {
+    if (h) return;
+    const d = c.current;
+    if (!d) return;
+    if (d.volume = o, d.muted = i, d.playbackRate = r, t !== void 0 && f >= t) {
+      d.pause();
       return;
     }
-    Math.abs(f.currentTime - c) > 0.1 && (f.currentTime = c), a.playing && f.paused ? f.play().catch(() => {
-    }) : !a.playing && !f.paused && f.pause();
-  }, [y, m, c, a.playing, o, i, r, t, u]), m ? null : /* @__PURE__ */ E(
+    Math.abs(d.currentTime - s) > 0.1 && (d.currentTime = s), l.playing && d.paused ? d.play().catch(() => {
+    }) : !l.playing && !d.paused && d.pause();
+  }, [w, h, s, l.playing, o, i, r, t, f]), h ? null : /* @__PURE__ */ I(
     "audio",
     {
-      ref: s,
+      ref: c,
       src: e,
       preload: "auto"
     }
@@ -398,68 +398,68 @@ function ye({
   className: r,
   holdRenderTimeout: i = 3e4
 }) {
-  const s = F(null), a = p(x), l = p(R), d = p(z), g = F([]), m = F(null), [b, y] = ae(!1), u = (d == null ? void 0 : d.fps) ?? 30, c = a.frame - l.accumulatedOffset;
-  return N(() => {
-    const f = D(
+  const c = R(null), l = p(F), u = p(x), a = p(D), m = R([]), h = R(null), [b, w] = ee(!1), f = (a == null ? void 0 : a.fps) ?? 30, s = l.frame - u.accumulatedOffset;
+  return M(() => {
+    const d = k(
       `Loading <AnimatedImage> frames from "${e}"`,
       { timeoutInMilliseconds: i }
     );
-    m.current = f;
-    let w = !1;
+    h.current = d;
+    let y = !1;
     async function v() {
       try {
-        const I = await (await fetch(e)).blob();
+        const C = await (await fetch(e)).blob();
         if (typeof ImageDecoder < "u") {
-          const C = new ImageDecoder({
-            data: await I.arrayBuffer(),
-            type: I.type
+          const E = new ImageDecoder({
+            data: await C.arrayBuffer(),
+            type: C.type
           });
-          await C.tracks.ready;
-          const T = C.tracks.selectedTrack;
-          if (!T) throw new Error("No image track found");
-          const q = T.frameCount, h = [];
-          for (let S = 0; S < q; S++) {
-            const k = await C.decode({ frameIndex: S }), re = await createImageBitmap(k.image), oe = (k.image.duration ?? 1e5) / 1e3;
-            h.push({ image: re, duration: oe }), k.image.close();
+          await E.tracks.ready;
+          const P = E.tracks.selectedTrack;
+          if (!P) throw new Error("No image track found");
+          const T = P.frameCount, g = [];
+          for (let N = 0; N < T; N++) {
+            const V = await E.decode({ frameIndex: N }), ie = await createImageBitmap(V.image), ce = (V.image.duration ?? 1e5) / 1e3;
+            g.push({ image: ie, duration: ce }), V.image.close();
           }
-          C.close(), w || (g.current = h, y(!0));
+          E.close(), y || (m.current = g, w(!0));
         } else {
-          const C = await createImageBitmap(I);
-          w || (g.current = [{ image: C, duration: 1 / 0 }], y(!0));
+          const E = await createImageBitmap(C);
+          y || (m.current = [{ image: E, duration: 1 / 0 }], w(!0));
         }
-      } catch (M) {
-        console.error("AnimatedImage: failed to decode frames", M);
+      } catch (_) {
+        console.error("AnimatedImage: failed to decode frames", _);
       } finally {
-        m.current !== null && (_(m.current), m.current = null);
+        h.current !== null && (S(h.current), h.current = null);
       }
     }
     return v(), () => {
-      w = !0, m.current !== null && (_(m.current), m.current = null);
+      y = !0, h.current !== null && (S(h.current), h.current = null);
     };
-  }, [e, i]), N(() => {
-    if (!b || g.current.length === 0) return;
-    const f = s.current;
-    if (!f) return;
-    const w = f.getContext("2d");
-    if (!w) return;
-    const v = g.current, M = c / u * 1e3;
-    let I = 0;
-    for (const S of v)
-      I += S.duration;
-    if (I <= 0) return;
-    const C = (M % I + I) % I;
-    let T = 0, q = 0;
-    for (let S = 0; S < v.length; S++)
-      if (T += v[S].duration, C < T) {
-        q = S;
+  }, [e, i]), M(() => {
+    if (!b || m.current.length === 0) return;
+    const d = c.current;
+    if (!d) return;
+    const y = d.getContext("2d");
+    if (!y) return;
+    const v = m.current, _ = s / f * 1e3;
+    let C = 0;
+    for (const N of v)
+      C += N.duration;
+    if (C <= 0) return;
+    const E = (_ % C + C) % C;
+    let P = 0, T = 0;
+    for (let N = 0; N < v.length; N++)
+      if (P += v[N].duration, E < P) {
+        T = N;
         break;
       }
-    const h = v[q];
-    h && (f.width = n ?? h.image.width, f.height = t ?? h.image.height, w.clearRect(0, 0, f.width, f.height), w.drawImage(h.image, 0, 0, f.width, f.height));
-  }, [c, u, b, n, t]), /* @__PURE__ */ E(
+    const g = v[T];
+    g && (d.width = n ?? g.image.width, d.height = t ?? g.image.height, y.clearRect(0, 0, d.width, d.height), y.drawImage(g.image, 0, 0, d.width, d.height));
+  }, [s, f, b, n, t]), /* @__PURE__ */ I(
     "canvas",
     {
-      ref: s,
+      ref: c,
       width: n,
       height: t,
       style: o,
@@ -474,63 +474,159 @@ function we({
   onError: t,
   ...o
 }) {
-  const r = F(null);
-  N(() => {
-    const a = D(
+  const r = R(null);
+  M(() => {
+    const l = k(
       `Loading <IFrame> with src="${o.src}"`,
       { timeoutInMilliseconds: e }
     );
-    return r.current = a, () => {
-      r.current !== null && (_(r.current), r.current = null);
+    return r.current = l, () => {
+      r.current !== null && (S(r.current), r.current = null);
     };
   }, [o.src, e]);
-  const i = V(
-    (a) => {
-      r.current !== null && (_(r.current), r.current = null), n == null || n(a);
+  const i = $(
+    (l) => {
+      r.current !== null && (S(r.current), r.current = null), n == null || n(l);
     },
     [n]
-  ), s = V(
-    (a) => {
-      r.current !== null && (_(r.current), r.current = null), t == null || t(a);
+  ), c = $(
+    (l) => {
+      r.current !== null && (S(r.current), r.current = null), t == null || t(l);
     },
     [t]
   );
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ I(
     "iframe",
     {
       ...o,
       onLoad: i,
-      onError: s
+      onError: c
     }
   );
 }
 we.displayName = "IFrame";
-function be(e, n) {
+function be({
+  src: e,
+  startFrom: n = 0,
+  endAt: t,
+  volume: o = 1,
+  playbackRate: r = 1,
+  muted: i = !1,
+  style: c,
+  className: l,
+  holdRenderTimeout: u = 3e4
+}) {
+  const a = p(F), m = p(x), h = p(D), { environment: b } = p(z), w = b === "rendering", f = (h == null ? void 0 : h.fps) ?? 30, d = a.frame - m.accumulatedOffset + n, y = d / f;
+  return w ? /* @__PURE__ */ I(
+    ve,
+    {
+      src: e,
+      currentTime: y,
+      videoFrame: d,
+      endAt: t,
+      style: c,
+      className: l,
+      holdRenderTimeout: u
+    }
+  ) : /* @__PURE__ */ I(
+    oe,
+    {
+      src: e,
+      startFrom: n,
+      endAt: t,
+      volume: o,
+      playbackRate: r,
+      muted: i,
+      style: c,
+      className: l,
+      holdRenderTimeout: u
+    }
+  );
+}
+be.displayName = "OffthreadVideo";
+function ve({
+  src: e,
+  currentTime: n,
+  videoFrame: t,
+  endAt: o,
+  style: r,
+  className: i,
+  holdRenderTimeout: c
+}) {
+  const [l, u] = ee(null), a = R(null), m = R(null);
+  if (o !== void 0 && t >= o)
+    return null;
+  M(() => {
+    const w = k(
+      `Extracting <OffthreadVideo> frame at ${n.toFixed(3)}s from "${e}"`,
+      { timeoutInMilliseconds: c }
+    );
+    a.current = w;
+    const f = new URLSearchParams({
+      src: e,
+      time: String(n)
+    }), s = `${window.location.origin}/__offthread_video__?${f.toString()}`;
+    let d = !1;
+    return fetch(s).then((y) => {
+      if (!y.ok)
+        throw new Error(`OffthreadVideo: Failed to extract frame (HTTP ${y.status})`);
+      return y.blob();
+    }).then((y) => {
+      if (d) return;
+      m.current && URL.revokeObjectURL(m.current);
+      const v = URL.createObjectURL(y);
+      m.current = v, u(v);
+    }).catch((y) => {
+      console.error("OffthreadVideo frame extraction error:", y), a.current !== null && (S(a.current), a.current = null);
+    }), () => {
+      d = !0, a.current !== null && (S(a.current), a.current = null);
+    };
+  }, [n, e, c]), M(() => () => {
+    m.current && (URL.revokeObjectURL(m.current), m.current = null);
+  }, []);
+  const h = $(() => {
+    a.current !== null && (S(a.current), a.current = null);
+  }, []), b = $(() => {
+    a.current !== null && (S(a.current), a.current = null);
+  }, []);
+  return l ? /* @__PURE__ */ I(
+    "img",
+    {
+      src: l,
+      style: r,
+      className: i,
+      onLoad: h,
+      onError: b,
+      alt: ""
+    }
+  ) : null;
+}
+function Ie(e, n) {
   for (let t = 1; t < n.length; t++)
     if (e <= n[t]) return t - 1;
   return n.length - 2;
 }
-function B(e, n, t, o, r, i) {
-  let s;
-  return n === t ? s = 0 : s = (e - n) / (t - n), i && (s = i(s)), o + s * (r - o);
+function A(e, n, t, o, r, i) {
+  let c;
+  return n === t ? c = 0 : c = (e - n) / (t - n), i && (c = i(c)), o + c * (r - o);
 }
-function O(e, n, t, o) {
+function U(e, n, t, o) {
   if (n.length !== t.length)
     throw new Error(
       `inputRange (${n.length}) and outputRange (${t.length}) must have the same length.`
     );
   if (n.length < 2)
     throw new Error("inputRange and outputRange must have at least 2 elements.");
-  for (let l = 1; l < n.length; l++)
-    if (n[l] < n[l - 1])
+  for (let u = 1; u < n.length; u++)
+    if (n[u] < n[u - 1])
       throw new Error("inputRange must be monotonically non-decreasing.");
   const {
     easing: r,
     extrapolateLeft: i = "extend",
-    extrapolateRight: s = "extend"
+    extrapolateRight: c = "extend"
   } = o ?? {};
   if (e < n[0])
-    return i === "clamp" ? t[0] : i === "identity" ? e : B(
+    return i === "clamp" ? t[0] : i === "identity" ? e : A(
       e,
       n[0],
       n[1],
@@ -539,123 +635,123 @@ function O(e, n, t, o) {
       r
     );
   if (e > n[n.length - 1]) {
-    if (s === "clamp")
+    if (c === "clamp")
       return t[t.length - 1];
-    if (s === "identity")
+    if (c === "identity")
       return e;
-    const l = n.length - 1;
-    return B(
+    const u = n.length - 1;
+    return A(
       e,
-      n[l - 1],
-      n[l],
-      t[l - 1],
-      t[l],
+      n[u - 1],
+      n[u],
+      t[u - 1],
+      t[u],
       r
     );
   }
-  const a = be(e, n);
-  return B(
+  const l = Ie(e, n);
+  return A(
     e,
-    n[a],
-    n[a + 1],
-    t[a],
-    t[a + 1],
+    n[l],
+    n[l + 1],
+    t[l],
+    t[l + 1],
     r
   );
 }
-function ve(e, n, t, o, r, i, s) {
-  const a = -o * (e - t), l = -r * n, d = (a + l) / i, g = n + d * s;
-  return { position: e + g * s, velocity: g };
+function Ce(e, n, t, o, r, i, c) {
+  const l = -o * (e - t), u = -r * n, a = (l + u) / i, m = n + a * c;
+  return { position: e + m * c, velocity: m };
 }
-function Ie(e) {
+function Ee(e) {
   const {
     frame: n,
     fps: t,
     config: o = {},
     from: r = 0,
     to: i = 1,
-    durationInFrames: s,
-    durationRestThreshold: a = 5e-3
+    durationInFrames: c,
+    durationRestThreshold: l = 5e-3
   } = e, {
-    damping: l = 10,
-    mass: d = 1,
-    stiffness: g = 100,
-    clampOvershoot: m = !1
+    damping: u = 10,
+    mass: a = 1,
+    stiffness: m = 100,
+    clampOvershoot: h = !1
   } = o;
   if (n < 0) return r;
-  if (s !== void 0 && n >= s)
+  if (c !== void 0 && n >= c)
     return i;
-  const b = 1 / t, y = 4, u = b / y;
-  let c = r, f = 0;
-  for (let w = 0; w < n; w++) {
-    for (let v = 0; v < y; v++) {
-      const M = ve(c, f, i, g, l, d, u);
-      c = M.position, f = M.velocity;
+  const b = 1 / t, w = 4, f = b / w;
+  let s = r, d = 0;
+  for (let y = 0; y < n; y++) {
+    for (let v = 0; v < w; v++) {
+      const _ = Ce(s, d, i, m, u, a, f);
+      s = _.position, d = _.velocity;
     }
-    if (m && (r < i ? c = Math.min(c, i) : c = Math.max(c, i), c === i && (f = 0)), Math.abs(c - i) < a && Math.abs(f) < a)
+    if (h && (r < i ? s = Math.min(s, i) : s = Math.max(s, i), s === i && (d = 0)), Math.abs(s - i) < l && Math.abs(d) < l)
       return i;
   }
-  return c;
+  return s;
 }
-function qe(e) {
+function Ve(e) {
   const {
     fps: n,
     config: t,
     from: o = 0,
     to: r = 1,
     threshold: i = 5e-3
-  } = e, s = n * 60;
-  for (let a = 0; a < s; a++) {
-    const l = Ie({
-      frame: a,
+  } = e, c = n * 60;
+  for (let l = 0; l < c; l++) {
+    const u = Ee({
+      frame: l,
       fps: n,
       config: t,
       from: o,
       to: r,
       durationRestThreshold: i
     });
-    if (Math.abs(l - r) < i)
-      return a;
+    if (Math.abs(u - r) < i)
+      return l;
   }
-  return s;
+  return c;
 }
-function L(e, n, t, o) {
-  const r = 3 * e, i = 3 * (t - e) - r, s = 1 - r - i, a = 3 * n, l = 3 * (o - n) - a, d = 1 - a - l;
-  function g(u) {
-    return ((s * u + i) * u + r) * u;
+function q(e, n, t, o) {
+  const r = 3 * e, i = 3 * (t - e) - r, c = 1 - r - i, l = 3 * n, u = 3 * (o - n) - l, a = 1 - l - u;
+  function m(f) {
+    return ((c * f + i) * f + r) * f;
   }
-  function m(u) {
-    return ((d * u + l) * u + a) * u;
+  function h(f) {
+    return ((a * f + u) * f + l) * f;
   }
-  function b(u) {
-    return (3 * s * u + 2 * i) * u + r;
+  function b(f) {
+    return (3 * c * f + 2 * i) * f + r;
   }
-  function y(u) {
-    let c = u;
+  function w(f) {
+    let s = f;
     for (let v = 0; v < 8; v++) {
-      const M = g(c) - u;
-      if (Math.abs(M) < 1e-7) return c;
-      const I = b(c);
-      if (Math.abs(I) < 1e-7) break;
-      c -= M / I;
+      const _ = m(s) - f;
+      if (Math.abs(_) < 1e-7) return s;
+      const C = b(s);
+      if (Math.abs(C) < 1e-7) break;
+      s -= _ / C;
     }
-    let f = 0, w = 1;
-    for (c = u; f < w; ) {
-      const v = g(c);
-      if (Math.abs(v - u) < 1e-7) return c;
-      u > v ? f = c : w = c, c = (f + w) / 2;
+    let d = 0, y = 1;
+    for (s = f; d < y; ) {
+      const v = m(s);
+      if (Math.abs(v - f) < 1e-7) return s;
+      f > v ? d = s : y = s, s = (d + y) / 2;
     }
-    return c;
+    return s;
   }
-  return (u) => u <= 0 ? 0 : u >= 1 ? 1 : m(y(u));
+  return (f) => f <= 0 ? 0 : f >= 1 ? 1 : h(w(f));
 }
 const ke = {
   linear: ((e) => e),
-  ease: L(0.25, 0.1, 0.25, 1),
-  easeIn: L(0.42, 0, 1, 1),
-  easeOut: L(0, 0, 0.58, 1),
-  easeInOut: L(0.42, 0, 0.58, 1),
-  bezier: L,
+  ease: q(0.25, 0.1, 0.25, 1),
+  easeIn: q(0.42, 0, 1, 1),
+  easeOut: q(0, 0, 0.58, 1),
+  easeInOut: q(0.42, 0, 0.58, 1),
+  bezier: q,
   bounce: ((e) => e < 1 / 2.75 ? 7.5625 * e * e : e < 2 / 2.75 ? 7.5625 * (e -= 1.5 / 2.75) * e + 0.75 : e < 2.5 / 2.75 ? 7.5625 * (e -= 2.25 / 2.75) * e + 0.9375 : 7.5625 * (e -= 2.625 / 2.75) * e + 0.984375),
   elastic: (e = 1) => {
     const n = 0.3 / Math.max(e, 1e-3);
@@ -705,7 +801,7 @@ const Z = {
   grey: "#808080",
   transparent: "rgba(0,0,0,0)"
 };
-function Ce(e) {
+function Se(e) {
   const n = e.trim().toLowerCase();
   if (Z[n]) {
     const t = Z[n];
@@ -717,65 +813,65 @@ function Ce(e) {
     return Q(n);
   throw new Error(`Unsupported color format: ${e}`);
 }
-function Ee(e) {
+function Me(e) {
   const [n, t, o, r] = e;
   return r === 1 ? `rgb(${Math.round(n)}, ${Math.round(t)}, ${Math.round(o)})` : `rgba(${Math.round(n)}, ${Math.round(t)}, ${Math.round(o)}, ${Number(r.toFixed(3))})`;
 }
-function Ve(e, n, t, o) {
+function qe(e, n, t, o) {
   if (n.length !== t.length)
     throw new Error("inputRange and outputRange must have the same length.");
-  const r = t.map(Ce), i = O(
+  const r = t.map(Se), i = U(
     e,
     n,
-    r.map((d) => d[0]),
+    r.map((a) => a[0]),
     o
-  ), s = O(
+  ), c = U(
     e,
     n,
-    r.map((d) => d[1]),
+    r.map((a) => a[1]),
     o
-  ), a = O(
+  ), l = U(
     e,
     n,
-    r.map((d) => d[2]),
+    r.map((a) => a[2]),
     o
-  ), l = O(
+  ), u = U(
     e,
     n,
-    r.map((d) => d[3]),
+    r.map((a) => a[3]),
     o
   );
-  return Ee([
+  return Me([
     Math.max(0, Math.min(255, i)),
-    Math.max(0, Math.min(255, s)),
-    Math.max(0, Math.min(255, a)),
-    Math.max(0, Math.min(1, l))
+    Math.max(0, Math.min(255, c)),
+    Math.max(0, Math.min(255, l)),
+    Math.max(0, Math.min(1, u))
   ]);
 }
-let W = null;
-function Le(e) {
-  if (W !== null)
+let B = null;
+function De(e) {
+  if (B !== null)
     throw new Error("setRootComponent() can only be called once.");
-  W = e;
+  B = e;
 }
-function De() {
-  return W;
+function Ue() {
+  return B;
 }
-function Oe(e) {
+function He(e) {
   return `/${e.startsWith("/") ? e.slice(1) : e}`;
 }
-function He() {
+function je() {
   return typeof window < "u" && window.__RENDIV_INPUT_PROPS__ ? window.__RENDIV_INPUT_PROPS__ : {};
 }
-function Ae() {
-  const { environment: e } = p(Y);
+function ze() {
+  const { environment: e } = p(z);
   return {
     isStudio: e === "studio",
     isRendering: e === "rendering",
     isPlayer: e === "player"
   };
 }
-function ze() {
+function Xe() {
   if (typeof window < "u") {
     const e = window.__RENDIV_ENVIRONMENT__;
     return {
@@ -786,44 +882,45 @@ function ze() {
   }
   return { isStudio: !1, isRendering: !1, isPlayer: !1 };
 }
-const Xe = P(null);
+const Ae = O(null);
 export {
   ye as AnimatedImage,
   pe as Audio,
-  Fe as Composition,
-  z as CompositionContext,
-  ee as CompositionManagerContext,
+  xe as Composition,
+  D as CompositionContext,
+  ne as CompositionManagerContext,
   ke as Easing,
-  U as Fill,
-  ue as Folder,
-  A as FolderContext,
-  de as Freeze,
+  W as Fill,
+  fe as Folder,
+  j as FolderContext,
+  me as Freeze,
   we as IFrame,
-  he as Img,
-  fe as Loop,
-  Y as RendivEnvironmentContext,
-  ne as Sequence,
-  R as SequenceContext,
-  Re as Series,
-  xe as Still,
-  x as TimelineContext,
-  Xe as TimelineRegistryContext,
-  ge as Video,
-  Te as abortRender,
-  Ve as blendColors,
-  He as getInputProps,
-  $e as getPendingHoldCount,
-  Pe as getPendingHoldLabels,
-  ze as getRendivEnvironment,
-  De as getRootComponent,
-  qe as getSpringDuration,
-  D as holdRender,
-  O as interpolate,
-  _ as releaseRender,
-  Le as setRootComponent,
-  Ie as spring,
-  Oe as staticFile,
-  _e as useCompositionConfig,
-  Ne as useFrame,
-  Ae as useRendivEnvironment
+  ge as Img,
+  de as Loop,
+  be as OffthreadVideo,
+  z as RendivEnvironmentContext,
+  te as Sequence,
+  x as SequenceContext,
+  Pe as Series,
+  $e as Still,
+  F as TimelineContext,
+  Ae as TimelineRegistryContext,
+  oe as Video,
+  Le as abortRender,
+  qe as blendColors,
+  je as getInputProps,
+  Oe as getPendingHoldCount,
+  Te as getPendingHoldLabels,
+  Xe as getRendivEnvironment,
+  Ue as getRootComponent,
+  Ve as getSpringDuration,
+  k as holdRender,
+  U as interpolate,
+  S as releaseRender,
+  De as setRootComponent,
+  Ee as spring,
+  He as staticFile,
+  Fe as useCompositionConfig,
+  Re as useFrame,
+  ze as useRendivEnvironment
 };