chesai-ui 0.16.2 → 0.16.4

package/dist/components/playlist-studio/elements.mjs

@@ -1,163 +1,332 @@
-import { jsxs as v, jsx as y } from "react/jsx-runtime";
-import { useRef as h, useState as k, useEffect as E } from "react";
-import { clsx as D } from "clsx";
-import P from "hls.js";
-import { useMotionValueEvent as w } from "framer-motion";
-const S = ({
-  data: m,
-  isActive: a,
-  isTimelinePlaying: d,
-  playhead: p,
-  startTime: R
+import { jsxs as V, jsx as k } from "react/jsx-runtime";
+import { useRef as E, useState as D, useEffect as f } from "react";
+import { clsx as A } from "clsx";
+import _ from "hls.js";
+import { useMotionValueEvent as O } from "framer-motion";
+import { LoadingIndicator as J } from "../loadingIndicator/index.mjs";
+import { usePreload as M } from "./preload-context.mjs";
+const q = /* @__PURE__ */ new Set([
+  "div",
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "main",
+  "ul",
+  "ol",
+  "li",
+  "a",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "pre",
+  "code",
+  "blockquote",
+  "mark",
+  "strong",
+  "em",
+  "i",
+  "b"
+]), B = ({
+  id: r,
+  data: N,
+  isActive: s,
+  isTimelinePlaying: u,
+  playhead: L,
+  startTime: g
 }) => {
-  const c = h(null), n = h(null), u = h(null), [s, f] = k(null), { src: e, muted: i = !0, objectFit: l = "cover", volume: x = 1 } = m;
-  return E(() => {
-    const t = c.current;
-    if (!t || !e) return;
-    if (f(null), n.current && (n.current.destroy(), n.current = null), e.includes(".m3u8") || e.includes("application/x-mpegURL"))
-      if (t.canPlayType("application/vnd.apple.mpegurl"))
-        t.src = e;
-      else if (P.isSupported()) {
-        const r = new P({
+  const l = E(null), a = E(null), d = E(null), [c, v] = D(null), { src: m, muted: R = !0, objectFit: S = "cover", volume: t = 1 } = N, i = E(!1), [h, b] = D(!1), p = E(null), P = E(null), y = M();
+  f(() => (y && r && y.registerAsset(r, "Video"), () => {
+    y && r && y.unregisterAsset(r);
+  }), [r, y]), f(() => {
+    y && r && y.setAssetReady(r, h, s);
+  }, [r, y, h, s]), f(() => {
+    c && y && r && y.setAssetReady(r, !0, s);
+  }, [c, y, r, s]), f(() => {
+    const e = l.current;
+    if (!e || !m) return;
+    if (v(null), i.current = !1, b(!1), a.current && (a.current.destroy(), a.current = null), m.includes(".m3u8") || m.includes("application/x-mpegURL"))
+      if (e.canPlayType("application/vnd.apple.mpegurl"))
+        e.src = m;
+      else if (_.isSupported()) {
+        const o = new _({
           enableWorker: !0,
           lowLatencyMode: !0
         });
-        r.loadSource(e), r.attachMedia(t), n.current = r, r.on(P.Events.ERROR, (M, b) => {
-          b.fatal && (console.warn(
+        o.loadSource(m), o.attachMedia(e), a.current = o, o.on(_.Events.ERROR, (T, w) => {
+          w.fatal && (console.warn(
             "[PlaylistVideo] Fatal HLS error encountered:",
-            b.type
-          ), f(`HLS stream error: ${b.details}`));
+            w.type
+          ), v(`HLS stream error: ${w.details}`));
         });
       } else
-        f("HLS playback is not supported in this environment");
+        v("HLS playback is not supported in this environment");
     else
-      t.src = e;
+      e.src = m;
     return () => {
-      n.current && (n.current.destroy(), n.current = null);
+      e && (e.pause(), e.src = "", e.load()), a.current && (a.current.destroy(), a.current = null);
     };
-  }, [e]), E(() => {
-    const t = c.current;
-    if (!t || s) return;
-    if (a && d)
-      t.muted = i, t.volume = x, u.current = t.play(), u.current.catch((r) => {
-        console.warn("[PlaylistVideo] Play request prevented:", r);
+  }, [m]), f(() => {
+    const e = l.current;
+    if (!e) return;
+    const n = () => {
+      if (p.current && (clearTimeout(p.current), p.current = null), P.current !== null) {
+        const T = P.current;
+        P.current = null;
+        try {
+          e.currentTime = T;
+        } catch {
+        }
+        return;
+      }
+      e.readyState >= 3 && b(!0);
+    }, o = () => {
+      p.current || (p.current = setTimeout(() => {
+        b(!1), p.current = null;
+      }, 300));
+    };
+    return e.addEventListener("canplay", n), e.addEventListener("canplaythrough", n), e.addEventListener("playing", n), e.addEventListener("progress", n), e.addEventListener("seeked", n), e.addEventListener("waiting", o), e.addEventListener("stalled", o), e.addEventListener("seeking", o), e.addEventListener("loadstart", o), e.addEventListener("emptied", o), n(), () => {
+      p.current && clearTimeout(p.current), e.removeEventListener("canplay", n), e.removeEventListener("canplaythrough", n), e.removeEventListener("playing", n), e.removeEventListener("progress", n), e.removeEventListener("seeked", n), e.removeEventListener("waiting", o), e.removeEventListener("stalled", o), e.removeEventListener("seeking", o), e.removeEventListener("loadstart", o), e.removeEventListener("emptied", o);
+    };
+  }, [m]), f(() => {
+    const e = l.current;
+    if (!e || c) return;
+    if (s && u && h)
+      e.muted = R, e.volume = t, d.current = e.play(), d.current.catch((o) => {
+        console.warn("[PlaylistVideo] Play request prevented:", o);
       });
     else {
-      const r = () => {
-        t.pause(), a || (t.currentTime = 0);
+      const o = () => {
+        e.pause(), s || (e.currentTime = 0);
       };
-      u.current ? u.current.then(r).catch(r) : r();
+      d.current ? d.current.then(o).catch(o) : o();
     }
-  }, [a, d, i, x, s]), w(p, "change", (t) => {
-    const o = c.current;
-    if (!o || !a || o.readyState < 1) return;
-    const r = Math.max(0, (t - R) / 1e3);
-    if (Math.abs(o.currentTime - r) > 0.3)
-      try {
-        o.currentTime = r;
-      } catch {
+  }, [s, u, h, R, t, c]);
+  const x = E(0);
+  return O(L, "change", (e) => {
+    const n = l.current;
+    if (!n || !s || n.readyState < 1) {
+      x.current = e;
+      return;
+    }
+    const o = Math.max(0, (e - g) / 1e3), T = Math.abs(e - x.current);
+    let w = o;
+    n.duration && !isNaN(n.duration) && n.duration > 0 && (w = o % n.duration);
+    const H = Math.abs(n.currentTime - w), j = (I) => {
+      if (n.seeking)
+        P.current = I;
+      else {
+        P.current = null;
+        try {
+          n.currentTime = I;
+        } catch {
+        }
       }
-  }), /* @__PURE__ */ v("div", { className: "relative w-full h-full bg-surface-container-low flex items-center justify-center overflow-hidden", children: [
-    s && /* @__PURE__ */ v("div", { className: "absolute inset-0 z-20 flex flex-col items-center justify-center p-4 bg-error-container/20 text-center", children: [
-      /* @__PURE__ */ y("span", { className: "text-xs font-semibold text-error mb-1", children: "Playback Error" }),
-      /* @__PURE__ */ y("span", { className: "text-[10px] text-on-error-container opacity-80 max-w-[80%] leading-normal", children: s })
+    };
+    u ? (T > 1e3 || e < x.current || H > 0.25) && j(w) : H > 0.1 && j(w), x.current = e;
+  }), /* @__PURE__ */ V("div", { className: "relative w-full h-full bg-surface-container-low flex items-center justify-center overflow-hidden", children: [
+    c && /* @__PURE__ */ V("div", { className: "absolute inset-0 z-20 flex flex-col items-center justify-center p-4 bg-error-container/20 text-center", children: [
+      /* @__PURE__ */ k("span", { className: "text-xs font-semibold text-error mb-1", children: "Playback Error" }),
+      /* @__PURE__ */ k("span", { className: "text-[10px] text-on-error-container opacity-80 max-w-[80%] leading-normal", children: c })
     ] }),
-    /* @__PURE__ */ y(
+    s && u && !h && !c && /* @__PURE__ */ k("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/15", children: /* @__PURE__ */ k(
+      J,
+      {
+        variant: "material-morph",
+        className: "!w-20vw !h-20vh text-primary"
+      }
+    ) }),
+    /* @__PURE__ */ k(
       "video",
       {
-        ref: c,
-        onError: (t) => {
-          const o = t.target.error;
-          let r = "An unknown media error occurred.";
-          if (o)
-            switch (o.code) {
-              case o.MEDIA_ERR_ABORTED:
-                r = "Video loading aborted.";
+        ref: l,
+        onError: (e) => {
+          const n = e.target.error;
+          let o = "An unknown media error occurred.";
+          if (n)
+            switch (n.code) {
+              case n.MEDIA_ERR_ABORTED:
+                o = "Video loading aborted.";
                 break;
-              case o.MEDIA_ERR_NETWORK:
-                r = "Network error prevented video download.";
+              case n.MEDIA_ERR_NETWORK:
+                o = "Network error prevented video download.";
                 break;
-              case o.MEDIA_ERR_DECODE:
-                r = "Video corrupted or decoding failed.";
+              case n.MEDIA_ERR_DECODE:
+                o = "Video corrupted or decoding failed.";
                 break;
-              case o.MEDIA_ERR_SRC_NOT_SUPPORTED:
-                r = "Failed to load: Video format or source url is not supported.";
+              case n.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                o = "Failed to load: Video format or source url is not supported.";
                 break;
             }
-          f(r);
+          v(o);
         },
-        className: D(
+        className: A(
           "w-full h-full border-0 outline-none transition-opacity duration-300",
-          s ? "opacity-0" : "opacity-100",
-          l === "contain" ? "object-contain" : "object-cover"
+          c ? "opacity-0" : "opacity-100",
+          S === "contain" ? "object-contain" : "object-cover"
         ),
         preload: "auto",
-        muted: i,
+        muted: R,
         playsInline: !0
       }
     )
   ] });
-}, T = ({
-  data: m,
-  isActive: a,
-  isTimelinePlaying: d,
-  playhead: p,
-  startTime: R
+}, C = ({
+  id: r,
+  data: N,
+  isActive: s,
+  isTimelinePlaying: u,
+  playhead: L,
+  startTime: g,
+  isSeeking: l = !1
 }) => {
-  const c = h(null), n = h(null), { src: u, muted: s = !1, volume: f = 1 } = m;
-  return E(() => {
-    const e = c.current;
-    !e || !u || (e.src = u);
-  }, [u]), E(() => {
-    const e = c.current;
-    if (!e) return;
-    if (a && d)
-      e.muted = s, e.volume = f, n.current = e.play(), n.current.catch((l) => {
-        console.warn("[PlaylistAudio] Play request prevented:", l);
-      });
-    else {
-      const l = () => {
-        e.pause(), a || (e.currentTime = 0);
-      };
-      n.current ? n.current.then(l).catch(l) : l();
+  const a = E(null), d = E(null), { src: c, muted: v = !1, volume: m = 1 } = N, R = M();
+  f(() => {
+    const t = new Audio();
+    return t.preload = "auto", a.current = t, () => {
+      a.current && (a.current.pause(), a.current.src = ""), a.current = null;
+    };
+  }, []), f(() => (R && r && (R.registerAsset(r, "Audio"), R.setAssetReady(r, !0, s)), () => {
+    R && r && R.unregisterAsset(r);
+  }), [r, R, s]), f(() => {
+    const t = a.current;
+    !t || !c || (t.src = c, t.load());
+  }, [c]), f(() => {
+    const t = a.current;
+    if (!t) return;
+    s && u && !l ? (t.muted = v, t.volume = m, t.play().then(() => {
+      console.log("[PlaylistAudio] Playback started successfully!");
+    }).catch((h) => {
+      console.warn("[PlaylistAudio] Playback blocked:", h);
+    })) : (t.pause(), s || (t.currentTime = 0));
+  }, [s, u, v, m, l]), f(() => {
+    const t = a.current;
+    if (!t) return;
+    const i = () => {
+      if (d.current !== null) {
+        const h = d.current;
+        d.current = null;
+        try {
+          t.currentTime = h;
+        } catch (b) {
+          console.log(b);
+        }
+      }
+    };
+    return t.addEventListener("seeked", i), () => {
+      t.removeEventListener("seeked", i);
+    };
+  }, [c]), f(() => {
+    const t = a.current;
+    if (!t || l) return;
+    const i = L.get(), h = Math.max(0, (i - g) / 1e3);
+    let b = h;
+    t.duration && !isNaN(t.duration) && t.duration > 0 && (b = h % t.duration);
+    try {
+      t.currentTime = b;
+    } catch {
+    }
+  }, [l, s, g, L]);
+  const S = E(0);
+  return O(L, "change", (t) => {
+    const i = a.current;
+    if (!i || !s || i.readyState < 1 || l) {
+      S.current = t;
+      return;
     }
-  }, [a, d, s, f]), w(p, "change", (e) => {
-    const i = c.current;
-    if (!i || !a || i.readyState < 1) return;
-    const l = Math.max(0, (e - R) / 1e3);
-    if (Math.abs(i.currentTime - l) > 0.3)
-      try {
-        i.currentTime = l;
-      } catch {
+    const h = Math.max(0, (t - g) / 1e3), b = Math.abs(t - S.current);
+    let p = h;
+    i.duration && !isNaN(i.duration) && i.duration > 0 && (p = h % i.duration);
+    const P = Math.abs(i.currentTime - p), y = (x) => {
+      if (i.seeking)
+        d.current = x;
+      else {
+        d.current = null;
+        try {
+          i.currentTime = x;
+        } catch {
+        }
       }
-  }), /* @__PURE__ */ y(
-    "audio",
+    };
+    u ? (b > 1e3 || t < S.current || P > 0.25) && y(p) : P > 0.1 && y(p), S.current = t;
+  }), null;
+}, W = ({
+  id: r,
+  data: N,
+  isActive: s
+}) => {
+  const { src: u, alt: L, objectFit: g = "cover" } = N, l = M(), a = E(null), [d, c] = D(!1);
+  return f(() => (l && r && l.registerAsset(r, "Image"), () => {
+    l && r && l.unregisterAsset(r);
+  }), [r, l]), f(() => {
+    l && r && l.setAssetReady(r, d, s);
+  }, [r, l, d, s]), f(() => {
+    a.current?.complete ? c(!0) : c(!1);
+  }, [u]), /* @__PURE__ */ k(
+    "img",
     {
-      ref: c,
-      preload: "auto",
-      muted: s,
-      style: { display: "none" }
+      ref: a,
+      src: u,
+      alt: L || "Playlist Image",
+      onLoad: () => {
+        c(!0);
+      },
+      onError: () => {
+        c(!0);
+      },
+      className: "w-full h-full border-0 block select-none pointer-events-none",
+      style: { objectFit: g }
     }
   );
-}, _ = ({ data: m }) => {
-  const { src: a, alt: d, objectFit: p = "cover" } = m;
-  return /* @__PURE__ */ y(
-    "img",
+}, z = ({
+  id: r,
+  data: N,
+  isActive: s
+}) => {
+  const u = M(), { tag: L = "div", html: g, children: l, className: a, style: d, ...c } = N;
+  f(() => (u && r && (u.registerAsset(r, "Html"), u.setAssetReady(r, !0, s)), () => {
+    u && r && u.unregisterAsset(r);
+  }), [r, u, s]);
+  const v = typeof L == "string" ? L.toLowerCase() : "div", m = q.has(v) ? v : "div";
+  return g && typeof g == "string" ? /* @__PURE__ */ k(
+    m,
     {
-      src: a,
-      alt: d || "Playlist Image",
-      className: "w-full h-full border-0 block select-none pointer-events-none",
-      style: { objectFit: p }
+      className: A("w-full h-full overflow-hidden", a),
+      style: d,
+      dangerouslySetInnerHTML: { __html: g },
+      ...c
+    }
+  ) : /* @__PURE__ */ k(
+    m,
+    {
+      className: A("w-full h-full overflow-hidden", a),
+      style: d,
+      ...c,
+      children: l
     }
   );
-}, L = {
-  Video: S,
-  Audio: T,
-  Image: _
+}, re = {
+  Video: B,
+  Audio: C,
+  Image: W,
+  Html: z
 };
 export {
-  T as PlaylistAudio,
-  _ as PlaylistImage,
-  S as PlaylistVideo,
-  L as defaultPlaylistRegistry
+  C as PlaylistAudio,
+  z as PlaylistHtml,
+  W as PlaylistImage,
+  B as PlaylistVideo,
+  re as defaultPlaylistRegistry
 };

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

@@ -1,5 +1,6 @@
 export { usePlayhead } from './use-playhead';
 export { PlaylistPlayer } from './player';
+export { PreloadContext, usePreload } from './preload-context';
 export * from './elements';
 export * from './types';
 export declare const PlaylistStudio: {

package/dist/components/playlist-studio/item-renderer.d.ts

@@ -5,6 +5,7 @@ interface ItemRendererProps {
     playhead: any;
     components: PlaylistComponentRegistry;
     isTimelinePlaying: boolean;
+    isSeeking?: boolean;
 }
-export declare const ItemRenderer: React.MemoExoticComponent<({ item, playhead, components, isTimelinePlaying }: ItemRendererProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ItemRenderer: React.MemoExoticComponent<({ item, playhead, components, isTimelinePlaying, isSeeking, }: ItemRendererProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};