chesai-ui 0.16.2 → 0.16.4

package/dist/components/playlist-studio/item-renderer.mjs

@@ -1,6 +1,6 @@
 import { jsx as I } from "react/jsx-runtime";
-import { useMotionValueEvent as q, useTransform as g, cubicBezier as b, motion as G } from "framer-motion";
-import H, { useState as K } from "react";
+import { useMotionValueEvent as G, useTransform as g, cubicBezier as b, motion as H } from "framer-motion";
+import K, { useState as Q } from "react";
 const P = 2e3, o = 200, z = (e) => {
   const t = [...e];
   for (let s = 1; s < t.length; s++)
@@ -71,31 +71,40 @@ const P = 2e3, o = 200, z = (e) => {
     default:
       return { opacity: 0 };
   }
-}, f = (e) => e, Q = b(0.05, 0.7, 0.1, 1), W = b(0.3, 0, 0.8, 0.15), Z = b(0, 0, 0.2, 1), V = b(0.4, 0, 1, 1), v = [
-  f,
-  Q,
+}, f = (e) => e, W = b(0.05, 0.7, 0.1, 1), Z = b(0.3, 0, 0.8, 0.15), V = b(0, 0, 0.2, 1), v = b(0.4, 0, 1, 1), tt = [
   f,
   W,
-  f
-], tt = [
   f,
   Z,
+  f
+], et = [
   f,
   V,
+  f,
+  v,
   f
-], et = H.memo(
-  ({ item: e, playhead: t, components: s, isTimelinePlaying: n }) => {
+], ot = K.memo(
+  ({
+    item: e,
+    playhead: t,
+    components: s,
+    isTimelinePlaying: n,
+    isSeeking: $
+  }) => {
     const w = s[e.type];
     if (!w)
       return console.warn(
         `[PlaylistPlayer] Element type "${e.type}" is not registered.`
       ), null;
-    const { startTime: u, duration: $, layout: i, transitions: r } = e, m = u + $, [x, A] = K(!1);
-    q(t, "change", (c) => {
-      const a = c >= u && c < m;
-      a !== x && A(a);
+    const { startTime: r, duration: k, layout: c, transitions: a } = e, l = r + k, [x, A] = Q(() => {
+      const i = t.get();
+      return i >= r && i < l;
     });
-    const O = u, N = u + (r?.in?.duration || 0), R = m - (r?.out?.duration || 0), T = m, E = z([
+    G(t, "change", (i) => {
+      const u = i >= r && i < l;
+      u !== x && A(u);
+    });
+    const O = r, N = r + (a?.in?.duration || 0), R = l - (a?.out?.duration || 0), T = l, S = z([
       O - 1,
       O,
       N,
@@ -105,24 +114,24 @@ const P = 2e3, o = 200, z = (e) => {
     ]), X = g(
       t,
       z([
-        u - P - 1,
-        u - P,
-        m,
-        m + 1
+        r - P - 1,
+        r - P,
+        l,
+        l + 1
       ]),
       ["none", "block", "block", "none"]
-    ), d = i.opacity ?? 1, l = F(
-      r?.in?.type || "none",
+    ), d = c.opacity ?? 1, y = F(
+      a?.in?.type || "none",
       "in",
       d
-    ), y = F(
-      r?.out?.type || "none",
+    ), p = F(
+      a?.out?.type || "none",
       "out",
       d
-    ), p = (c, a, S) => g(t, E, [c, c, S, S, a, a], {
+    ), m = (i, u, E) => g(t, S, [i, i, E, E, u, u], {
       clamp: !0,
-      ease: v
-    }), Y = r?.in && r.in.type !== "none", M = r?.out && r.out.type !== "none", _ = g(t, E, [
+      ease: tt
+    }), Y = a?.in && a.in.type !== "none", M = a?.out && a.out.type !== "none", _ = g(t, S, [
       0,
       Y ? 0 : d,
       d,
@@ -131,61 +140,63 @@ const P = 2e3, o = 200, z = (e) => {
       0
     ], {
       clamp: !0,
-      ease: tt
-    }), k = p(l.x ?? 0, y.x ?? 0, 0), J = p(l.y ?? 0, y.y ?? 0, 0), L = p(l.scale ?? 1, y.scale ?? 1, 1), j = p(
-      l.rotate ?? 0,
+      ease: et
+    }), J = m(y.x ?? 0, p.x ?? 0, 0), L = m(y.y ?? 0, p.y ?? 0, 0), j = m(y.scale ?? 1, p.scale ?? 1, 1), B = m(
       y.rotate ?? 0,
+      p.rotate ?? 0,
       0
-    ), B = p(
-      l.rotateX ?? 0,
+    ), C = m(
       y.rotateX ?? 0,
+      p.rotateX ?? 0,
       0
-    ), C = p(
-      l.rotateY ?? 0,
+    ), D = m(
       y.rotateY ?? 0,
+      p.rotateY ?? 0,
       0
-    ), D = p(l.blur ?? 0, y.blur ?? 0, 0), U = g(D, (c) => {
-      const a = i.style?.filter || "";
-      return c > 0 ? `${a} blur(${c}px)`.trim() : a || "none";
+    ), U = m(y.blur ?? 0, p.blur ?? 0, 0), q = g(U, (i) => {
+      const u = c.style?.filter || "";
+      return i > 0 ? `${u} blur(${i}px)`.trim() : u || "none";
     });
     return /* @__PURE__ */ I(
-      G.div,
+      H.div,
       {
         className: "absolute origin-center will-change-[transform,opacity,filter]",
         style: {
           display: X,
           opacity: _,
-          x: k,
-          y: J,
-          scale: L,
-          rotate: j,
-          rotateX: B,
-          rotateY: C,
-          filter: U,
-          left: h(i.x),
-          top: h(i.y),
-          width: h(i.width),
-          height: h(i.height),
-          zIndex: i.zIndex || 1,
-          ...i.style
+          x: J,
+          y: L,
+          scale: j,
+          rotate: B,
+          rotateX: C,
+          rotateY: D,
+          filter: q,
+          left: h(c.x),
+          top: h(c.y),
+          width: h(c.width),
+          height: h(c.height),
+          zIndex: c.zIndex || 1,
+          ...c.style
         },
         children: /* @__PURE__ */ I(
           w,
           {
+            id: e.id,
             data: e.props,
             playhead: t,
             isActive: x,
-            startTime: u,
-            endTime: m,
-            isTimelinePlaying: n
+            startTime: r,
+            endTime: l,
+            isTimelinePlaying: n,
+            isSeeking: $
           }
         )
       }
     );
   },
-  (e, t) => e.isTimelinePlaying === t.isTimelinePlaying && e.item.id === t.item.id && e.item.startTime === t.item.startTime && e.item.duration === t.item.duration && e.item.layout.x === t.item.layout.x && e.item.layout.y === t.item.layout.y && e.item.layout.width === t.item.layout.width && e.item.layout.height === t.item.layout.height && JSON.stringify(e.item.layout.style) === JSON.stringify(t.item.layout.style)
+  (e, t) => e.isTimelinePlaying === t.isTimelinePlaying && e.isSeeking === t.isSeeking && e.item.id === t.item.id && e.item.startTime === t.item.startTime && e.item.duration === t.item.duration && e.item.layout.x === t.item.layout.x && e.item.layout.y === t.item.layout.y && e.item.layout.width === t.item.layout.width && e.item.layout.height === t.item.layout.height && JSON.stringify(e.item.layout.style) === JSON.stringify(t.item.layout.style)
 );
-et.displayName = "ItemRenderer";
+ot.displayName = "ItemRenderer";
 export {
-  et as ItemRenderer
+  ot as ItemRenderer
 };

package/dist/components/playlist-studio/player.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
 import { PlaylistSchema, PlaylistComponentRegistry } from './types';
 export interface PlaylistPlayerProps {
-    schema: PlaylistSchema;
+    schema?: PlaylistSchema;
+    schemas?: PlaylistSchema | PlaylistSchema[];
     components?: PlaylistComponentRegistry;
     playing?: boolean;
+    showControls?: boolean;
     className?: string;
     onLoop?: () => void;
     outerBackgroundColor?: string;