@rendiv/player 0.1.2 → 0.1.3

package/dist/Player.d.ts

@@ -9,6 +9,8 @@ export interface PlayerProps {
     fps: number;
     compositionWidth: number;
     compositionHeight: number;
+    /** Composition id exposed via CompositionContext. Defaults to 'player'. */
+    compositionId?: string;
     style?: CSSProperties;
     controls?: boolean;
     loop?: boolean;

package/dist/Player.d.ts.map

@@ -1 +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"}
+{"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,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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,+EA4KjB,CAAC"}

package/dist/index.cjs

@@ -1 +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;
+"use strict";var V=Object.defineProperty;var W=(o,r,e)=>r in o?V(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e;var j=(o,r,e)=>W(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 $(o){const{fps:r,durationInFrames:e,loop:s,playbackRate:i,autoPlay:c}=o,[h,k]=n.useState(0),[x,y]=n.useState(c),m=n.useRef(null),v=n.useRef(0),p=n.useRef(0),w=n.useCallback(()=>y(!0),[]),P=n.useCallback(()=>y(!1),[]),C=n.useCallback(()=>y(f=>!f),[]),u=n.useCallback(f=>{const g=Math.max(0,Math.min(f,e-1));p.current=g,k(g)},[e]);return n.useEffect(()=>{if(!x){m.current=null,v.current=0;return}let f;const g=1e3/(r*i),t=b=>{m.current===null&&(m.current=b);const S=b-m.current;m.current=b,v.current+=S;let d=p.current,R=!1;for(;v.current>=g;)if(v.current-=g,d+=1,R=!0,d>=e)if(s)d=0;else{d=e-1,y(!1);break}R&&(p.current=d,k(d)),f=requestAnimationFrame(t)};return f=requestAnimationFrame(t),()=>cancelAnimationFrame(f)},[x,r,i,s,e]),{frame:h,playing:x,play:w,pause:P,toggle:C,seekTo:u}}class O{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 K={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"},B={background:"none",border:"none",color:"#fff",cursor:"pointer",fontSize:16,padding:"2px 6px",lineHeight:1},G={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:K,children:[a.jsx("button",{type:"button",style:B,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:G}),a.jsxs("span",{style:{minWidth:100,textAlign:"right",fontVariantNumeric:"tabular-nums"},children:[T(o.frame,e)," / ",T(r-1,e)]})]})};D.displayName="PlayerControls";class J 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:h,compositionId:k="player",controls:x=!1,loop:y=!1,autoPlay:m=!1,playbackRate:v=1,inputProps:p={},style:w,errorFallback:P}=o,C=n.useRef(null),u=n.useMemo(()=>new O,[]),[f,g]=n.useState(c),t=$({fps:i,durationInFrames:s,loop:y,playbackRate:v,autoPlay:m});n.useEffect(()=>{const l=C.current;if(!l)return;const M=new ResizeObserver(z=>{for(const H of z)g(H.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 b=n.useRef(t.frame);b.current=t.frame;const S=n.useRef(t.playing);S.current=t.playing,n.useImperativeHandle(r,()=>({play:t.play,pause:t.pause,toggle:t.toggle,seekTo:t.seekTo,getCurrentFrame:()=>b.current,isPlaying:()=>S.current,getContainerNode:()=>C.current,mute:()=>{},unmute:()=>{},setVolume:()=>{},addEventListener:u.addEventListener.bind(u),removeEventListener:u.removeEventListener.bind(u)}));const d=n.useMemo(()=>({id:k,width:c,height:h,fps:i,durationInFrames:s,defaultProps:p}),[k,c,h,i,s,p]),R=n.useMemo(()=>({frame:t.frame,playing:t.playing,playingRef:{current:t.playing}}),[t.frame,t.playing]),A=n.useMemo(()=>({environment:"player"}),[]),F=f/c,I=h*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]),N=a.jsx(J,{fallback:P,children:a.jsx(e,{...p})});return a.jsxs("div",{ref:C,style:{position:"relative",overflow:"hidden",width:"100%",height:I,backgroundColor:"#000",...w},tabIndex:0,onKeyDown:q,children:[a.jsx("div",{style:{width:c,height:h,transform:`scale(${F})`,transformOrigin:"top left",overflow:"hidden"},children:a.jsx(E.RendivEnvironmentContext.Provider,{value:A,children:a.jsx(E.CompositionContext.Provider,{value:d,children:a.jsx(E.TimelineContext.Provider,{value:R,children:N})})})}),x&&a.jsx(D,{player:t,durationInFrames:s,fps:i})]})});L.displayName="Player";exports.Player=L;

package/dist/index.js

@@ -1,42 +1,42 @@
-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);
+var K = Object.defineProperty;
+var O = (n, r, e) => r in n ? K(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
+var D = (n, r, e) => O(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(
+import { useState as M, useRef as k, useCallback as b, useEffect as F, Component as B, forwardRef as G, useMemo as R, useImperativeHandle as J } from "react";
+import { RendivEnvironmentContext as Q, CompositionContext as U, TimelineContext as X } from "@rendiv/core";
+function Y(n) {
+  const { fps: r, durationInFrames: e, loop: o, playbackRate: a, autoPlay: i } = n, [g, w] = M(0), [C, h] = M(i), d = k(null), y = k(0), m = k(0), E = b(() => h(!0), []), T = b(() => h(!1), []), P = b(() => h((f) => !f), []), l = b(
     (f) => {
-      const t = Math.max(0, Math.min(f, e - 1));
-      k.current = t, P(t);
+      const p = Math.max(0, Math.min(f, e - 1));
+      m.current = p, w(p);
     },
     [e]
   );
-  return R(() => {
-    if (!b) {
-      m.current = null, u.current = 0;
+  return F(() => {
+    if (!C) {
+      d.current = null, y.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)
+    const p = 1e3 / (r * a), t = (v) => {
+      d.current === null && (d.current = v);
+      const S = v - d.current;
+      d.current = v, y.current += S;
+      let u = m.current, x = !1;
+      for (; y.current >= p; )
+        if (y.current -= p, u += 1, x = !0, u >= e)
           if (o)
-            d = 0;
+            u = 0;
           else {
-            d = e - 1, g(!1);
+            u = e - 1, h(!1);
             break;
           }
-      S && (k.current = d, P(d)), f = requestAnimationFrame(C);
+      x && (m.current = u, w(u)), f = requestAnimationFrame(t);
     };
-    return f = requestAnimationFrame(C), () => cancelAnimationFrame(f);
-  }, [b, r, a, o, e]), { frame: p, playing: b, play: F, pause: w, toggle: l, seekTo: E };
+    return f = requestAnimationFrame(t), () => cancelAnimationFrame(f);
+  }, [C, r, a, o, e]), { frame: g, playing: C, play: E, pause: T, toggle: P, seekTo: l };
 }
-class Y {
+class Z {
   constructor() {
     D(this, "listeners", /* @__PURE__ */ new Map());
   }
@@ -55,7 +55,7 @@ class Y {
       i(a);
   }
 }
-const Z = {
+const _ = {
   position: "absolute",
   bottom: 0,
   left: 0,
@@ -69,7 +69,7 @@ const Z = {
   fontFamily: "system-ui, -apple-system, sans-serif",
   fontSize: 13,
   userSelect: "none"
-}, _ = {
+}, ee = {
   background: "none",
   border: "none",
   color: "#fff",
@@ -77,7 +77,7 @@ const Z = {
   fontSize: 16,
   padding: "2px 6px",
   lineHeight: 1
-}, ee = {
+}, te = {
   flex: 1,
   height: 4,
   cursor: "pointer",
@@ -92,18 +92,18 @@ const z = ({
   durationInFrames: r,
   fps: e
 }) => {
-  const o = y(
+  const o = b(
     (a) => {
       n.seekTo(Number(a.target.value));
     },
     [n]
   );
-  return /* @__PURE__ */ L("div", { style: Z, children: [
+  return /* @__PURE__ */ L("div", { style: _, children: [
     /* @__PURE__ */ c(
       "button",
       {
         type: "button",
-        style: _,
+        style: ee,
         onClick: n.toggle,
         "aria-label": n.playing ? "Pause" : "Play",
         children: n.playing ? "⏸" : "▶"
@@ -117,7 +117,7 @@ const z = ({
         max: r - 1,
         value: n.frame,
         onChange: o,
-        style: ee
+        style: te
       }
     ),
     /* @__PURE__ */ L("span", { style: { minWidth: 100, textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
@@ -128,7 +128,7 @@ const z = ({
   ] });
 };
 z.displayName = "PlayerControls";
-class te extends O {
+class re extends B {
   constructor() {
     super(...arguments);
     D(this, "state", { error: null });
@@ -163,51 +163,52 @@ class te extends O {
     return this.props.children;
   }
 }
-const re = B((n, r) => {
+const ne = G((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({
+    compositionHeight: g,
+    compositionId: w = "player",
+    controls: C = !1,
+    loop: h = !1,
+    autoPlay: d = !1,
+    playbackRate: y = 1,
+    inputProps: m = {},
+    style: E,
+    errorFallback: T
+  } = n, P = k(null), l = R(() => new Z(), []), [f, p] = M(i), t = Y({
     fps: a,
     durationInFrames: o,
-    loop: b,
-    playbackRate: m,
-    autoPlay: g
+    loop: h,
+    playbackRate: y,
+    autoPlay: d
   });
-  R(() => {
-    const s = w.current;
+  F(() => {
+    const s = P.current;
     if (!s) return;
-    const I = new ResizeObserver(($) => {
-      for (const j of $)
-        f(j.contentRect.width);
+    const I = new ResizeObserver((j) => {
+      for (const q of j)
+        p(q.contentRect.width);
     });
     return I.observe(s), () => I.disconnect();
-  }, []), R(() => {
+  }, []), F(() => {
     l.emit("frameupdate", { frame: t.frame });
-  }, [t.frame, l]), R(() => {
+  }, [t.frame, l]), F(() => {
     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, () => ({
+  const v = k(t.frame);
+  v.current = t.frame;
+  const S = k(t.playing);
+  S.current = t.playing, J(r, () => ({
     play: t.play,
     pause: t.pause,
     toggle: t.toggle,
     seekTo: t.seekTo,
-    getCurrentFrame: () => C.current,
-    isPlaying: () => h.current,
-    getContainerNode: () => w.current,
+    getCurrentFrame: () => v.current,
+    isPlaying: () => S.current,
+    getContainerNode: () => P.current,
     mute: () => {
     },
     unmute: () => {
@@ -217,61 +218,61 @@ const re = B((n, r) => {
     addEventListener: l.addEventListener.bind(l),
     removeEventListener: l.removeEventListener.bind(l)
   }));
-  const T = x(
+  const u = R(
     () => ({
-      id: "player",
+      id: w,
       width: i,
-      height: p,
+      height: g,
       fps: a,
       durationInFrames: o,
-      defaultProps: u
+      defaultProps: m
     }),
-    [i, p, a, o, u]
-  ), d = x(
+    [w, i, g, a, o, m]
+  ), x = R(
     () => ({
       frame: t.frame,
       playing: t.playing,
       playingRef: { current: t.playing }
     }),
     [t.frame, t.playing]
-  ), S = x(
+  ), H = R(
     () => ({ environment: "player" }),
     []
-  ), A = E / i, H = p * A, V = y(
+  ), A = f / i, V = g * A, W = b(
     (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 }) });
+  ), $ = /* @__PURE__ */ c(re, { fallback: T, children: /* @__PURE__ */ c(e, { ...m }) });
   return /* @__PURE__ */ L(
     "div",
     {
-      ref: w,
+      ref: P,
       style: {
         position: "relative",
         overflow: "hidden",
         width: "100%",
-        height: H,
+        height: V,
         backgroundColor: "#000",
-        ...k
+        ...E
       },
       tabIndex: 0,
-      onKeyDown: V,
+      onKeyDown: W,
       children: [
         /* @__PURE__ */ c(
           "div",
           {
             style: {
               width: i,
-              height: p,
+              height: g,
               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 }) }) })
+            children: /* @__PURE__ */ c(Q.Provider, { value: H, children: /* @__PURE__ */ c(U.Provider, { value: u, children: /* @__PURE__ */ c(X.Provider, { value: x, children: $ }) }) })
           }
         ),
-        P && /* @__PURE__ */ c(
+        C && /* @__PURE__ */ c(
           z,
           {
             player: t,
@@ -283,7 +284,7 @@ const re = B((n, r) => {
     }
   );
 });
-re.displayName = "Player";
+ne.displayName = "Player";
 export {
-  re as Player
+  ne as Player
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rendiv/player",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@rendiv/core": "0.1.2"
+    "@rendiv/core": "0.1.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -30,7 +30,7 @@
     "vite-plugin-dts": "^4.3.0",
     "typescript": "^5.7.0",
     "@rendiv/tsconfig": "0.0.0",
-    "@rendiv/core": "0.1.2"
+    "@rendiv/core": "0.1.3"
   },
   "scripts": {
     "build": "vite build",