@rendiv/player 0.1.0

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,19 @@
+import { default as React, Component, ReactNode, ErrorInfo, ComponentType } from 'react';
+interface ErrorFallbackProps {
+    error: Error;
+}
+interface ErrorBoundaryProps {
+    fallback?: ComponentType<ErrorFallbackProps>;
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../src/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7F,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAClF,KAAK,EAAE,kBAAkB,CAAmB;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAItD,MAAM;CA0BP"}

package/dist/Player.d.ts

@@ -0,0 +1,38 @@
+import { default as React, CSSProperties, ComponentType } from 'react';
+import { PlayerEventMap } from './PlayerEmitter';
+interface ErrorFallbackProps {
+    error: Error;
+}
+export interface PlayerProps {
+    component: ComponentType<Record<string, unknown>>;
+    durationInFrames: number;
+    fps: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    style?: CSSProperties;
+    controls?: boolean;
+    loop?: boolean;
+    autoPlay?: boolean;
+    initiallyMuted?: boolean;
+    inputProps?: Record<string, unknown>;
+    playbackRate?: number;
+    errorFallback?: ComponentType<ErrorFallbackProps>;
+}
+type Listener<T> = (data: T) => void;
+export interface PlayerRef {
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seekTo: (frame: number) => void;
+    getCurrentFrame: () => number;
+    isPlaying: () => boolean;
+    getContainerNode: () => HTMLDivElement | null;
+    mute: () => void;
+    unmute: () => void;
+    setVolume: (v: number) => void;
+    addEventListener: <K extends keyof PlayerEventMap>(event: K, callback: Listener<PlayerEventMap[K]>) => void;
+    removeEventListener: <K extends keyof PlayerEventMap>(event: K, callback: Listener<PlayerEventMap[K]>) => void;
+}
+export declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<PlayerRef>>;
+export {};
+//# sourceMappingURL=Player.d.ts.map

package/dist/Player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Player.d.ts","sourceRoot":"","sources":["../src/Player.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,gBAAgB,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAED,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAErC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gBAAgB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAC9C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,cAAc,EAC/C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAClC,IAAI,CAAC;IACV,mBAAmB,EAAE,CAAC,CAAC,SAAS,MAAM,cAAc,EAClD,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAClC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,MAAM,+EA2KjB,CAAC"}

package/dist/PlayerControls.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { UsePlayerReturn } from './use-player';
+interface PlayerControlsProps {
+    player: UsePlayerReturn;
+    durationInFrames: number;
+    fps: number;
+}
+export declare const PlayerControls: React.FC<PlayerControlsProps>;
+export {};
+//# sourceMappingURL=PlayerControls.d.ts.map

package/dist/PlayerControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerControls.d.ts","sourceRoot":"","sources":["../src/PlayerControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,UAAU,mBAAmB;IAC3B,MAAM,EAAE,eAAe,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;CACb;AA2CD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmCxD,CAAC"}

package/dist/PlayerEmitter.d.ts

@@ -0,0 +1,23 @@
+export type PlayerEventMap = {
+    play: void;
+    pause: void;
+    ended: void;
+    frameupdate: {
+        frame: number;
+    };
+    error: {
+        error: Error;
+    };
+    fullscreenchange: {
+        isFullscreen: boolean;
+    };
+};
+type Listener<T> = (data: T) => void;
+export declare class PlayerEmitter {
+    private listeners;
+    addEventListener<K extends keyof PlayerEventMap>(event: K, callback: Listener<PlayerEventMap[K]>): void;
+    removeEventListener<K extends keyof PlayerEventMap>(event: K, callback: Listener<PlayerEventMap[K]>): void;
+    emit<K extends keyof PlayerEventMap>(event: K, ...args: PlayerEventMap[K] extends void ? [] : [PlayerEventMap[K]]): void;
+}
+export {};
+//# sourceMappingURL=PlayerEmitter.d.ts.map

package/dist/PlayerEmitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerEmitter.d.ts","sourceRoot":"","sources":["../src/PlayerEmitter.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,KAAK,EAAE;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;IACxB,gBAAgB,EAAE;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;CAC7C,CAAC;AAEF,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAErC,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAA6C;IAE9D,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GACpC,IAAI;IAOP,mBAAmB,CAAC,CAAC,SAAS,MAAM,cAAc,EAChD,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GACpC,IAAI;IAIP,IAAI,CAAC,CAAC,SAAS,MAAM,cAAc,EACjC,KAAK,EAAE,CAAC,EACR,GAAG,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GACjE,IAAI;CAQR"}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var H=Object.defineProperty;var V=(o,r,e)=>r in o?H(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e;var j=(o,r,e)=>V(o,typeof r!="symbol"?r+"":r,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),E=require("@rendiv/core");function W(o){const{fps:r,durationInFrames:e,loop:s,playbackRate:i,autoPlay:c}=o,[g,C]=n.useState(0),[v,h]=n.useState(c),p=n.useRef(null),d=n.useRef(0),b=n.useRef(0),R=n.useCallback(()=>h(!0),[]),k=n.useCallback(()=>h(!1),[]),u=n.useCallback(()=>h(f=>!f),[]),w=n.useCallback(f=>{const t=Math.max(0,Math.min(f,e-1));b.current=t,C(t)},[e]);return n.useEffect(()=>{if(!v){p.current=null,d.current=0;return}let f;const t=1e3/(r*i),x=y=>{p.current===null&&(p.current=y);const P=y-p.current;p.current=y,d.current+=P;let m=b.current,S=!1;for(;d.current>=t;)if(d.current-=t,m+=1,S=!0,m>=e)if(s)m=0;else{m=e-1,h(!1);break}S&&(b.current=m,C(m)),f=requestAnimationFrame(x)};return f=requestAnimationFrame(x),()=>cancelAnimationFrame(f)},[v,r,i,s,e]),{frame:g,playing:v,play:R,pause:k,toggle:u,seekTo:w}}class ${constructor(){j(this,"listeners",new Map)}addEventListener(r,e){this.listeners.has(r)||this.listeners.set(r,new Set),this.listeners.get(r).add(e)}removeEventListener(r,e){var s;(s=this.listeners.get(r))==null||s.delete(e)}emit(r,...e){const s=this.listeners.get(r);if(!s)return;const i=e[0];for(const c of s)c(i)}}const O={position:"absolute",bottom:0,left:0,right:0,display:"flex",alignItems:"center",gap:8,padding:"8px 12px",backgroundColor:"rgba(0, 0, 0, 0.7)",color:"#fff",fontFamily:"system-ui, -apple-system, sans-serif",fontSize:13,userSelect:"none"},K={background:"none",border:"none",color:"#fff",cursor:"pointer",fontSize:16,padding:"2px 6px",lineHeight:1},B={flex:1,height:4,cursor:"pointer",accentColor:"#fff"};function T(o,r){const e=o/r,s=Math.floor(e/60),i=Math.floor(e%60),c=Math.floor(e%1*100);return`${String(s).padStart(2,"0")}:${String(i).padStart(2,"0")}.${String(c).padStart(2,"0")}`}const D=({player:o,durationInFrames:r,fps:e})=>{const s=n.useCallback(i=>{o.seekTo(Number(i.target.value))},[o]);return a.jsxs("div",{style:O,children:[a.jsx("button",{type:"button",style:K,onClick:o.toggle,"aria-label":o.playing?"Pause":"Play",children:o.playing?"⏸":"▶"}),a.jsx("input",{type:"range",min:0,max:r-1,value:o.frame,onChange:s,style:B}),a.jsxs("span",{style:{minWidth:100,textAlign:"right",fontVariantNumeric:"tabular-nums"},children:[T(o.frame,e)," / ",T(r-1,e)]})]})};D.displayName="PlayerControls";class G extends n.Component{constructor(){super(...arguments);j(this,"state",{error:null})}static getDerivedStateFromError(e){return{error:e}}componentDidCatch(e,s){console.error("Rendiv Player error:",e,s)}render(){if(this.state.error){const e=this.props.fallback;return e?a.jsx(e,{error:this.state.error}):a.jsx("div",{style:{padding:20,color:"#ff4444",backgroundColor:"#1a1a1a",fontFamily:"monospace",fontSize:14,whiteSpace:"pre-wrap",overflow:"auto",width:"100%",height:"100%"},children:this.state.error.message})}return this.props.children}}const L=n.forwardRef((o,r)=>{const{component:e,durationInFrames:s,fps:i,compositionWidth:c,compositionHeight:g,controls:C=!1,loop:v=!1,autoPlay:h=!1,playbackRate:p=1,inputProps:d={},style:b,errorFallback:R}=o,k=n.useRef(null),u=n.useMemo(()=>new $,[]),[w,f]=n.useState(c),t=W({fps:i,durationInFrames:s,loop:v,playbackRate:p,autoPlay:h});n.useEffect(()=>{const l=k.current;if(!l)return;const M=new ResizeObserver(N=>{for(const z of N)f(z.contentRect.width)});return M.observe(l),()=>M.disconnect()},[]),n.useEffect(()=>{u.emit("frameupdate",{frame:t.frame})},[t.frame,u]),n.useEffect(()=>{t.playing?u.emit("play"):u.emit("pause")},[t.playing,u]);const x=n.useRef(t.frame);x.current=t.frame;const y=n.useRef(t.playing);y.current=t.playing,n.useImperativeHandle(r,()=>({play:t.play,pause:t.pause,toggle:t.toggle,seekTo:t.seekTo,getCurrentFrame:()=>x.current,isPlaying:()=>y.current,getContainerNode:()=>k.current,mute:()=>{},unmute:()=>{},setVolume:()=>{},addEventListener:u.addEventListener.bind(u),removeEventListener:u.removeEventListener.bind(u)}));const P=n.useMemo(()=>({id:"player",width:c,height:g,fps:i,durationInFrames:s,defaultProps:d}),[c,g,i,s,d]),m=n.useMemo(()=>({frame:t.frame,playing:t.playing,playingRef:{current:t.playing}}),[t.frame,t.playing]),S=n.useMemo(()=>({environment:"player"}),[]),F=w/c,A=g*F,q=n.useCallback(l=>{l.key===" "||l.key==="k"?(l.preventDefault(),t.toggle()):l.key==="ArrowLeft"?(l.preventDefault(),t.seekTo(t.frame-1)):l.key==="ArrowRight"?(l.preventDefault(),t.seekTo(t.frame+1)):l.key==="0"&&(l.preventDefault(),t.seekTo(0))},[t]),I=a.jsx(G,{fallback:R,children:a.jsx(e,{...d})});return a.jsxs("div",{ref:k,style:{position:"relative",overflow:"hidden",width:"100%",height:A,backgroundColor:"#000",...b},tabIndex:0,onKeyDown:q,children:[a.jsx("div",{style:{width:c,height:g,transform:`scale(${F})`,transformOrigin:"top left",overflow:"hidden"},children:a.jsx(E.RendivEnvironmentContext.Provider,{value:S,children:a.jsx(E.CompositionContext.Provider,{value:P,children:a.jsx(E.TimelineContext.Provider,{value:m,children:I})})})}),C&&a.jsx(D,{player:t,durationInFrames:s,fps:i})]})});L.displayName="Player";exports.Player=L;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Player, type PlayerProps, type PlayerRef } from './Player';
+export { type PlayerEventMap } from './PlayerEmitter';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,289 @@
+var q = Object.defineProperty;
+var K = (n, r, e) => r in n ? q(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
+var D = (n, r, e) => K(n, typeof r != "symbol" ? r + "" : r, e);
+import { jsxs as L, jsx as c } from "react/jsx-runtime";
+import { useState as M, useRef as v, useCallback as y, useEffect as R, Component as O, forwardRef as B, useMemo as x, useImperativeHandle as G } from "react";
+import { RendivEnvironmentContext as J, CompositionContext as Q, TimelineContext as U } from "@rendiv/core";
+function X(n) {
+  const { fps: r, durationInFrames: e, loop: o, playbackRate: a, autoPlay: i } = n, [p, P] = M(0), [b, g] = M(i), m = v(null), u = v(0), k = v(0), F = y(() => g(!0), []), w = y(() => g(!1), []), l = y(() => g((f) => !f), []), E = y(
+    (f) => {
+      const t = Math.max(0, Math.min(f, e - 1));
+      k.current = t, P(t);
+    },
+    [e]
+  );
+  return R(() => {
+    if (!b) {
+      m.current = null, u.current = 0;
+      return;
+    }
+    let f;
+    const t = 1e3 / (r * a), C = (h) => {
+      m.current === null && (m.current = h);
+      const T = h - m.current;
+      m.current = h, u.current += T;
+      let d = k.current, S = !1;
+      for (; u.current >= t; )
+        if (u.current -= t, d += 1, S = !0, d >= e)
+          if (o)
+            d = 0;
+          else {
+            d = e - 1, g(!1);
+            break;
+          }
+      S && (k.current = d, P(d)), f = requestAnimationFrame(C);
+    };
+    return f = requestAnimationFrame(C), () => cancelAnimationFrame(f);
+  }, [b, r, a, o, e]), { frame: p, playing: b, play: F, pause: w, toggle: l, seekTo: E };
+}
+class Y {
+  constructor() {
+    D(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  addEventListener(r, e) {
+    this.listeners.has(r) || this.listeners.set(r, /* @__PURE__ */ new Set()), this.listeners.get(r).add(e);
+  }
+  removeEventListener(r, e) {
+    var o;
+    (o = this.listeners.get(r)) == null || o.delete(e);
+  }
+  emit(r, ...e) {
+    const o = this.listeners.get(r);
+    if (!o) return;
+    const a = e[0];
+    for (const i of o)
+      i(a);
+  }
+}
+const Z = {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 12px",
+  backgroundColor: "rgba(0, 0, 0, 0.7)",
+  color: "#fff",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: 13,
+  userSelect: "none"
+}, _ = {
+  background: "none",
+  border: "none",
+  color: "#fff",
+  cursor: "pointer",
+  fontSize: 16,
+  padding: "2px 6px",
+  lineHeight: 1
+}, ee = {
+  flex: 1,
+  height: 4,
+  cursor: "pointer",
+  accentColor: "#fff"
+};
+function N(n, r) {
+  const e = n / r, o = Math.floor(e / 60), a = Math.floor(e % 60), i = Math.floor(e % 1 * 100);
+  return `${String(o).padStart(2, "0")}:${String(a).padStart(2, "0")}.${String(i).padStart(2, "0")}`;
+}
+const z = ({
+  player: n,
+  durationInFrames: r,
+  fps: e
+}) => {
+  const o = y(
+    (a) => {
+      n.seekTo(Number(a.target.value));
+    },
+    [n]
+  );
+  return /* @__PURE__ */ L("div", { style: Z, children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        style: _,
+        onClick: n.toggle,
+        "aria-label": n.playing ? "Pause" : "Play",
+        children: n.playing ? "⏸" : "▶"
+      }
+    ),
+    /* @__PURE__ */ c(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: r - 1,
+        value: n.frame,
+        onChange: o,
+        style: ee
+      }
+    ),
+    /* @__PURE__ */ L("span", { style: { minWidth: 100, textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
+      N(n.frame, e),
+      " / ",
+      N(r - 1, e)
+    ] })
+  ] });
+};
+z.displayName = "PlayerControls";
+class te extends O {
+  constructor() {
+    super(...arguments);
+    D(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(e) {
+    return { error: e };
+  }
+  componentDidCatch(e, o) {
+    console.error("Rendiv Player error:", e, o);
+  }
+  render() {
+    if (this.state.error) {
+      const e = this.props.fallback;
+      return e ? /* @__PURE__ */ c(e, { error: this.state.error }) : /* @__PURE__ */ c(
+        "div",
+        {
+          style: {
+            padding: 20,
+            color: "#ff4444",
+            backgroundColor: "#1a1a1a",
+            fontFamily: "monospace",
+            fontSize: 14,
+            whiteSpace: "pre-wrap",
+            overflow: "auto",
+            width: "100%",
+            height: "100%"
+          },
+          children: this.state.error.message
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+const re = B((n, r) => {
+  const {
+    component: e,
+    durationInFrames: o,
+    fps: a,
+    compositionWidth: i,
+    compositionHeight: p,
+    controls: P = !1,
+    loop: b = !1,
+    autoPlay: g = !1,
+    playbackRate: m = 1,
+    inputProps: u = {},
+    style: k,
+    errorFallback: F
+  } = n, w = v(null), l = x(() => new Y(), []), [E, f] = M(i), t = X({
+    fps: a,
+    durationInFrames: o,
+    loop: b,
+    playbackRate: m,
+    autoPlay: g
+  });
+  R(() => {
+    const s = w.current;
+    if (!s) return;
+    const I = new ResizeObserver(($) => {
+      for (const j of $)
+        f(j.contentRect.width);
+    });
+    return I.observe(s), () => I.disconnect();
+  }, []), R(() => {
+    l.emit("frameupdate", { frame: t.frame });
+  }, [t.frame, l]), R(() => {
+    t.playing ? l.emit("play") : l.emit("pause");
+  }, [t.playing, l]);
+  const C = v(t.frame);
+  C.current = t.frame;
+  const h = v(t.playing);
+  h.current = t.playing, G(r, () => ({
+    play: t.play,
+    pause: t.pause,
+    toggle: t.toggle,
+    seekTo: t.seekTo,
+    getCurrentFrame: () => C.current,
+    isPlaying: () => h.current,
+    getContainerNode: () => w.current,
+    mute: () => {
+    },
+    unmute: () => {
+    },
+    setVolume: () => {
+    },
+    addEventListener: l.addEventListener.bind(l),
+    removeEventListener: l.removeEventListener.bind(l)
+  }));
+  const T = x(
+    () => ({
+      id: "player",
+      width: i,
+      height: p,
+      fps: a,
+      durationInFrames: o,
+      defaultProps: u
+    }),
+    [i, p, a, o, u]
+  ), d = x(
+    () => ({
+      frame: t.frame,
+      playing: t.playing,
+      playingRef: { current: t.playing }
+    }),
+    [t.frame, t.playing]
+  ), S = x(
+    () => ({ environment: "player" }),
+    []
+  ), A = E / i, H = p * A, V = y(
+    (s) => {
+      s.key === " " || s.key === "k" ? (s.preventDefault(), t.toggle()) : s.key === "ArrowLeft" ? (s.preventDefault(), t.seekTo(t.frame - 1)) : s.key === "ArrowRight" ? (s.preventDefault(), t.seekTo(t.frame + 1)) : s.key === "0" && (s.preventDefault(), t.seekTo(0));
+    },
+    [t]
+  ), W = /* @__PURE__ */ c(te, { fallback: F, children: /* @__PURE__ */ c(e, { ...u }) });
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      ref: w,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: H,
+        backgroundColor: "#000",
+        ...k
+      },
+      tabIndex: 0,
+      onKeyDown: V,
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            style: {
+              width: i,
+              height: p,
+              transform: `scale(${A})`,
+              transformOrigin: "top left",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ c(J.Provider, { value: S, children: /* @__PURE__ */ c(Q.Provider, { value: T, children: /* @__PURE__ */ c(U.Provider, { value: d, children: W }) }) })
+          }
+        ),
+        P && /* @__PURE__ */ c(
+          z,
+          {
+            player: t,
+            durationInFrames: o,
+            fps: a
+          }
+        )
+      ]
+    }
+  );
+});
+re.displayName = "Player";
+export {
+  re as Player
+};

package/dist/use-player.d.ts

@@ -0,0 +1,17 @@
+export interface UsePlayerOptions {
+    fps: number;
+    durationInFrames: number;
+    loop: boolean;
+    playbackRate: number;
+    autoPlay: boolean;
+}
+export interface UsePlayerReturn {
+    frame: number;
+    playing: boolean;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seekTo: (frame: number) => void;
+}
+export declare function usePlayer(options: UsePlayerOptions): UsePlayerReturn;
+//# sourceMappingURL=use-player.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-player.d.ts","sourceRoot":"","sources":["../src/use-player.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAyEpE"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@rendiv/player",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@rendiv/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "typescript": "^5.7.0",
+    "@rendiv/tsconfig": "0.0.0",
+    "@rendiv/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}