@reelkit/react-reel-player - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/index.d.ts

@@ -19,2 +19,33 @@ /**
  * type parameter: `<ReelPlayerOverlay<MyItem> />`.
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react';
+ * import { ReelPlayerOverlay, type ContentItem } from '@reelkit/react-reel-player';
+ * import '@reelkit/react-reel-player/styles.css';
+ *
+ * const content: ContentItem[] = [
+ *   {
+ *     id: '1',
+ *     media: [{ id: 'v1', type: 'video', src: '/video.mp4', aspectRatio: 9 / 16 }],
+ *     author: { name: 'John', avatar: '/avatar.jpg' },
+ *     likes: 1234,
+ *     description: 'Amazing video!',
+ *   },
+ * ];
+ *
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>Open Player</button>
+ *       <ReelPlayerOverlay
+ *         isOpen={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         content={content}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
  */
@@ -21,0 +52,0 @@ export { ReelPlayerOverlay } from './lib/ReelPlayerOverlay';

dist/index.js

 import { jsx as t, jsxs as k, Fragment as q } from "react/jsx-runtime";
-import { createContext as pe, useMemo as me, useContext as ye, useRef as L, useState as F, useLayoutEffect as be, useEffect as $, useCallback as d } from "react";
-import { createPortal as we } from "react-dom";
-import { ChevronLeft as ke, ChevronRight as Ce, X as Ie, VolumeX as Re, Volume2 as xe, Heart as Ne, ChevronUp as Pe, ChevronDown as Se } from "lucide-react";
-import { createSignal as K, noop as ne } from "@reelkit/core";
-import { Reel as re, ReelIndicator as Ee, Observe as oe, useBodyLock as Le } from "@reelkit/react";
-const ie = pe(null), De = ({ children: e }) => {
-  const n = me(() => {
-    const i = K(!0), s = K(!1);
+import { createContext as fe, useState as $, useContext as ge, useRef as E, useLayoutEffect as pe, useEffect as M, useCallback as d } from "react";
+import { createPortal as ye } from "react-dom";
+import { ChevronLeft as me, ChevronRight as be, X as ke, VolumeX as we, Volume2 as Ce, Heart as Ne, ChevronUp as Pe, ChevronDown as Re } from "lucide-react";
+import { createSignal as O, createSharedVideo as Se, noop as te, captureFrame as Ie, Observe as H, Reel as ne, ReelIndicator as xe, useBodyLock as Ee } from "@reelkit/react";
+const re = fe(null), Le = ({ children: e }) => {
+  const n = $(() => {
+    const i = O(!0), s = O(!1);
     return {
@@ -17,10 +16,10 @@ muted: i,
     };
-  }, []);
-  return /* @__PURE__ */ t(ie.Provider, { value: n, children: e });
+  })[0];
+  return /* @__PURE__ */ t(re.Provider, { value: n, children: e });
 }, G = () => {
-  const e = ye(ie);
+  const e = ge(re);
   if (!e)
     throw new Error("useSoundState must be used within SoundProvider");
   return e;
-}, se = ({
+}, oe = ({
   src: e,
@@ -30,4 +29,5 @@ size: n,
   style: s,
-  imgClassName: g,
-  imgStyle: p
+  imgClassName: p,
+  imgStyle: y,
+  imageProps: u
 }) => /* @__PURE__ */ t(
@@ -50,5 +50,7 @@ "div",
       {
+        alt: "",
+        loading: "lazy",
+        ...u,
         src: e,
-        alt: "",
-        className: g,
+        className: p,
         style: {
@@ -59,20 +61,12 @@ width: "100%",
           objectPosition: "center",
-          ...p
-        },
-        loading: "lazy"
+          ...y
+        }
       }
     )
   }
-);
-let f = null;
-const te = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new Map(), je = (e) => {
-  try {
-    const n = document.createElement("canvas");
-    n.width = e.videoWidth, n.height = e.videoHeight;
-    const i = n.getContext("2d");
-    return !i || e.videoWidth === 0 ? null : (i.drawImage(e, 0, 0), n.toDataURL("image/jpeg", 0.8));
-  } catch {
-    return null;
-  }
-}, ze = () => (f || (f = document.createElement("video"), f.playsInline = !0, f.loop = !0, f.preload = "auto", f.muted = !0, f.autoplay = !0, f.disableRemotePlayback = !0, f.disablePictureInPicture = !0, f.crossOrigin = "anonymous", f.className = "rk-video-slide-element"), f), Me = typeof window < "u" ? be : $, le = ({
+), B = Se({
+  className: "rk-video-slide-element",
+  disableRemotePlayback: !0,
+  disablePictureInPicture: !0
+}), De = typeof window < "u" ? pe : M, ie = ({
   src: e,
@@ -82,35 +76,37 @@ poster: n,
   size: s,
-  isActive: g,
-  isInnerActive: p = !0,
+  isActive: p,
+  isInnerActive: y = !0,
   slideKey: u,
   onVideoRef: l,
-  className: C,
+  className: w,
   style: a
 }) => {
-  const v = L(null), I = G(), R = g && p, m = i < 1, [D, x] = F(!1), [z, A] = F(!0);
-  return Me(() => {
-    if (!R || !v.current) return;
-    const o = ze(), j = v.current;
-    x(!0), A(!0);
-    const c = () => x(!1), O = () => x(!0), N = () => {
-      x(!1), A(!1);
+  const v = E(null), C = G(), N = p && y, m = i < 1, [h, L] = $(
+    () => [O(!1), O(!0)]
+  )[0];
+  return De(() => {
+    if (!N || !v.current) return;
+    const o = B.getVideo(), z = v.current;
+    h.value = !0, L.value = !0;
+    const g = () => h.value = !1, j = () => h.value = !0, c = () => {
+      h.value = !1, L.value = !1;
     };
-    o.addEventListener("canplay", c), o.addEventListener("waiting", O), o.addEventListener("playing", N), o.src = e, o.muted = I.muted.value;
-    const y = te.get(u);
-    return o.currentTime = y ?? 0, o.style.objectFit = m ? "cover" : "contain", j.appendChild(o), l && l(o), o.play().catch(ne), () => {
-      o.removeEventListener("canplay", c), o.removeEventListener("waiting", O), o.removeEventListener("playing", N), te.set(u, o.currentTime);
-      const b = je(o);
-      b && X.set(u, b), o.parentNode === j && j.removeChild(o), l && l(null), x(!1);
+    o.addEventListener("canplay", g), o.addEventListener("waiting", j), o.addEventListener("playing", c), o.src = e, o.muted = C.muted.value;
+    const T = B.playbackPositions.get(u);
+    return o.currentTime = T ?? 0, o.style.objectFit = m ? "cover" : "contain", z.appendChild(o), l && l(o), o.play().catch(te), () => {
+      o.removeEventListener("canplay", g), o.removeEventListener("waiting", j), o.removeEventListener("playing", c), B.playbackPositions.set(u, o.currentTime);
+      const P = Ie(o);
+      P && B.capturedFrames.set(u, P), o.parentNode === z && z.removeChild(o), l && l(null), h.value = !1;
     };
-  }, [R, e, m, u, l]), $(() => {
-    if (!R) return;
-    const o = f;
-    return o && (o.muted = I.muted.value), I.muted.observe(() => {
-      o && (o.muted = I.muted.value);
+  }, [N, e, m, u, l]), M(() => {
+    if (!N) return;
+    const o = B.getVideo();
+    return o && (o.muted = C.muted.value), C.muted.observe(() => {
+      o && (o.muted = C.muted.value);
     });
-  }, [R]), /* @__PURE__ */ k(
+  }, [N]), /* @__PURE__ */ k(
     "div",
     {
       ref: v,
-      className: C ? `rk-video-slide-container ${C}` : "rk-video-slide-container",
+      className: w ? `rk-video-slide-container ${w}` : "rk-video-slide-container",
       style: {
@@ -122,23 +118,26 @@ width: s[0],
       children: [
-        (X.get(u) ?? n) && /* @__PURE__ */ t(
-          "img",
-          {
-            src: X.get(u) ?? n,
-            alt: "",
-            className: `rk-video-slide-poster ${!R || z ? "rk-visible" : ""}`,
-            style: {
-              objectFit: m ? "cover" : "contain"
+        /* @__PURE__ */ t(H, { signals: [L], children: () => {
+          const o = B.capturedFrames.get(u) ?? n;
+          return o ? /* @__PURE__ */ t(
+            "img",
+            {
+              src: o,
+              alt: "",
+              className: `rk-video-slide-poster ${!N || L.value ? "rk-visible" : ""}`,
+              style: {
+                objectFit: m ? "cover" : "contain"
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ t(
+          ) : null;
+        } }),
+        /* @__PURE__ */ t(H, { signals: [h], children: () => /* @__PURE__ */ t(
           "div",
           {
-            className: `rk-video-slide-loader ${D ? "rk-visible" : ""}`
+            className: `rk-video-slide-loader ${h.value ? "rk-visible" : ""}`
           }
-        )
+        ) })
       ]
     }
   );
-}, Ae = ({
+}, ze = ({
   media: e,
@@ -148,30 +147,30 @@ isParentActive: n,
   contentId: s,
-  innerSliderRef: g,
-  enableWheel: p,
+  innerSliderRef: p,
+  enableWheel: y,
   onVideoRef: u,
   onActiveMediaTypeChange: l,
-  renderNavigation: C,
+  renderNavigation: w,
   renderNestedSlide: a
 }) => {
-  const [v, I] = F(0), R = L(v);
-  R.current = v;
-  const m = L(null), D = L(null);
-  $(() => (g.current = m.current, () => {
-    g.current = null;
-  }), [g]), $(() => {
+  const [v, C] = $(0), N = E(v);
+  N.current = v;
+  const m = E(null), h = E(null);
+  M(() => (p.current = m.current, () => {
+    p.current = null;
+  }), [p]), M(() => {
     n && l && l(e[v].type);
   }, [n, l, e, v]);
-  const x = d(
+  const L = d(
     (c) => {
-      D.current = c, u && u(c);
+      h.current = c, u && u(c);
     },
     [u]
-  ), z = d(() => {
-    D.current && !D.current.paused && D.current.pause();
-  }, []), A = d(
+  ), o = d(() => {
+    h.current && !h.current.paused && h.current.pause();
+  }, []), z = d(
     (c) => {
-      I(c), l && l(e[c].type);
+      C(c), l && l(e[c].type);
     },
     [e, l]
-  ), o = d(() => {
+  ), g = d(() => {
     m.current?.prev();
@@ -192,3 +191,3 @@ }, []), j = d(() => {
         /* @__PURE__ */ t(
-          re,
+          ne,
           {
@@ -200,31 +199,31 @@ count: e.length,
             useNavKeys: !0,
-            enableWheel: p,
+            enableWheel: y,
             apiRef: m,
-            beforeChange: z,
-            afterChange: A,
+            beforeChange: o,
+            afterChange: z,
             className: n ? "rk-nested-active" : void 0,
-            itemBuilder: (c, O, N) => {
-              const y = e[c], b = R.current === c, M = `${s}:${y.id}`, P = b ? x : void 0, B = y.type === "video" ? /* @__PURE__ */ t(
-                le,
+            itemBuilder: (c, T, P) => {
+              const R = e[c], D = N.current === c, A = `${s}:${R.id}`, S = D ? L : void 0, F = R.type === "video" ? /* @__PURE__ */ t(
+                ie,
                 {
-                  src: y.src,
-                  poster: y.poster,
-                  aspectRatio: y.aspectRatio,
-                  size: N,
+                  src: R.src,
+                  poster: R.poster,
+                  aspectRatio: R.aspectRatio,
+                  size: P,
                   isActive: n,
-                  isInnerActive: b,
-                  slideKey: M,
-                  onVideoRef: P
+                  isInnerActive: D,
+                  slideKey: A,
+                  onVideoRef: S
                 }
-              ) : /* @__PURE__ */ t(se, { src: y.src, size: N });
+              ) : /* @__PURE__ */ t(oe, { src: R.src, size: P });
               return a ? a({
-                item: y,
+                item: R,
                 index: c,
-                size: N,
+                size: P,
                 isActive: n,
-                isInnerActive: b,
-                slideKey: M,
-                onVideoRef: P,
-                defaultContent: B
-              }) : B;
+                isInnerActive: D,
+                slideKey: A,
+                onVideoRef: S,
+                defaultContent: F
+              }) : F;
             }
@@ -244,3 +243,3 @@ }
             children: /* @__PURE__ */ t(
-              Ee,
+              xe,
               {
@@ -260,4 +259,4 @@ count: e.length,
         ),
-        e.length > 1 && (C ? C({
-          onPrev: o,
+        e.length > 1 && (w ? w({
+          onPrev: g,
           onNext: j,
@@ -271,5 +270,5 @@ activeIndex: v,
               className: "rk-nested-nav rk-nested-nav-prev",
-              onClick: o,
+              onClick: g,
               "aria-label": "Previous",
-              children: /* @__PURE__ */ t(ke, { size: 24 })
+              children: /* @__PURE__ */ t(me, { size: 24 })
             }
@@ -283,3 +282,3 @@ ),
               "aria-label": "Next",
-              children: /* @__PURE__ */ t(Ce, { size: 24 })
+              children: /* @__PURE__ */ t(be, { size: 24 })
             }
@@ -291,3 +290,3 @@ )
   );
-}, Be = ({
+}, je = ({
   content: e,
@@ -297,11 +296,11 @@ isActive: n,
   innerSliderRef: s,
-  enableWheel: g,
-  onVideoRef: p,
+  enableWheel: p,
+  onVideoRef: y,
   onActiveMediaTypeChange: u,
   renderNestedNavigation: l,
-  renderNestedSlide: C
+  renderNestedSlide: w
 }) => {
   const { media: a } = e;
-  return a.length === 1 && a[0].type === "image" ? /* @__PURE__ */ t(se, { src: a[0].src, size: i }) : a.length === 1 && a[0].type === "video" ? /* @__PURE__ */ t(
-    le,
+  return a.length === 1 && a[0].type === "image" ? /* @__PURE__ */ t(oe, { src: a[0].src, size: i }) : a.length === 1 && a[0].type === "video" ? /* @__PURE__ */ t(
+    ie,
     {
@@ -314,6 +313,6 @@ src: a[0].src,
       slideKey: e.id,
-      onVideoRef: p
+      onVideoRef: y
     }
   ) : /* @__PURE__ */ t(
-    Ae,
+    ze,
     {
@@ -325,10 +324,10 @@ media: a,
       innerSliderRef: s,
-      enableWheel: g,
-      onVideoRef: p,
+      enableWheel: p,
+      onVideoRef: y,
       onActiveMediaTypeChange: u,
       renderNavigation: l,
-      renderNestedSlide: C
+      renderNestedSlide: w
     }
   );
-}, ae = {
+}, se = {
   width: 44,
@@ -345,3 +344,3 @@ height: 44,
   transition: "background-color 0.2s"
-}, Fe = ({
+}, Ae = ({
   onClick: e,
@@ -356,3 +355,3 @@ className: n = "rk-player-close-btn",
     style: {
-      ...ae,
+      ...se,
       position: "absolute",
@@ -365,5 +364,5 @@ top: 16,
     "aria-label": "Close",
-    children: /* @__PURE__ */ t(Ie, { size: 24 })
+    children: /* @__PURE__ */ t(ke, { size: 24 })
   }
-), $e = ({
+), Fe = ({
   disabled: e = !1,
@@ -374,3 +373,3 @@ className: n = "rk-player-sound-btn",
   const s = G();
-  return /* @__PURE__ */ t(oe, { signals: [s.muted, s.disabled], children: () => s.disabled.value ? null : /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(H, { signals: [s.muted, s.disabled], children: () => s.disabled.value ? null : /* @__PURE__ */ t(
     "button",
@@ -381,3 +380,3 @@ {
       style: {
-        ...ae,
+        ...se,
         position: "absolute",
@@ -394,6 +393,6 @@ bottom: 16,
       "aria-disabled": e,
-      children: s.muted.value ? /* @__PURE__ */ t(Re, { size: 22 }) : /* @__PURE__ */ t(xe, { size: 22 })
+      children: s.muted.value ? /* @__PURE__ */ t(we, { size: 22 }) : /* @__PURE__ */ t(Ce, { size: 22 })
     }
   ) });
-}, Oe = ({
+}, Be = ({
   onClose: e,
@@ -403,9 +402,9 @@ showSound: n = !1,
 }) => /* @__PURE__ */ k(q, { children: [
-  /* @__PURE__ */ t(Fe, { onClick: e }),
-  n && /* @__PURE__ */ t($e, { disabled: i })
+  /* @__PURE__ */ t(Ae, { onClick: e }),
+  n && /* @__PURE__ */ t(Fe, { disabled: i })
 ] });
-function Te(e) {
+function $e(e) {
   return e >= 1e6 ? `${(e / 1e6).toFixed(1).replace(/\.0$/, "")}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1).replace(/\.0$/, "")}K` : String(e);
 }
-const Ve = ({
+const Me = ({
   author: e,
@@ -429,6 +428,6 @@ description: n,
     /* @__PURE__ */ t(Ne, { size: 16 }),
-    /* @__PURE__ */ t("span", { children: Te(i) })
+    /* @__PURE__ */ t("span", { children: $e(i) })
   ] })
-] }), _e = 9 / 16, He = 768;
-function Ue({
+] }), Oe = 9 / 16, Te = 768;
+function Ve({
   onClose: e,
@@ -438,33 +437,33 @@ content: n,
   onSlideChange: s,
-  apiRef: g,
-  renderSlideOverlay: p,
+  apiRef: p,
+  renderSlideOverlay: y,
   renderSlide: u,
   renderControls: l,
-  renderNavigation: C,
+  renderNavigation: w,
   renderNestedNavigation: a,
   renderNestedSlide: v,
-  aspectRatio: I = _e,
+  aspectRatio: C = Oe,
   // Reel proxy props with defaults
-  transitionDuration: R,
+  transitionDuration: N,
   swipeDistanceFactor: m,
-  loop: D = !1,
-  useNavKeys: x = !0,
-  enableWheel: z = !0,
-  wheelDebounceMs: A
+  loop: h = !1,
+  useNavKeys: L = !0,
+  enableWheel: o = !0,
+  wheelDebounceMs: z
 }) {
-  const [o, j] = F(i), c = L(o);
-  c.current = o;
-  const [O, N] = F(null), y = L(null), b = g ?? y, M = L(null), P = L(null), B = L(!1), _ = G(), H = d(() => {
+  const [g, j] = $(i), c = E(g);
+  c.current = g;
+  const [T, P] = $(null), R = E(null), D = p ?? R, A = E(null), S = E(null), F = E(!1), K = G(), U = d(() => {
     if (typeof window > "u") return [0, 0];
-    const r = window.innerWidth, S = window.innerHeight;
-    if (r < He)
-      return [r, S];
-    let h = S * I, w = S;
-    return h > r && (h = r, w = r / I), [h, w];
-  }, [I]), [U] = F(
-    () => K(H())
+    const r = window.innerWidth, I = window.innerHeight;
+    if (r < Te)
+      return [r, I];
+    let f = I * C, b = I;
+    return f > r && (f = r, b = r / C), [f, b];
+  }, [C]), [X] = $(
+    () => O(U())
   );
-  $(() => {
+  M(() => {
     const r = () => {
-      U.value = H(), b.current?.adjust();
+      X.value = U(), D.current?.adjust();
     };
@@ -474,73 +473,73 @@ return window.addEventListener("resize", r), () => {
     };
-  }, [H]), $(() => {
-    const r = (S) => {
-      S.key === "Escape" && e();
+  }, [U]), M(() => {
+    const r = (I) => {
+      I.key === "Escape" && e();
     };
     return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [e]), Le(!0);
+  }, [e]), Ee(!0);
   const J = d((r) => {
-    P.current = r;
+    S.current = r;
   }, []), W = d(
-    (r) => n[r]?.media.some((h) => h.type === "video") ?? !1,
+    (r) => n[r]?.media.some((f) => f.type === "video") ?? !1,
     [n]
-  ), ce = d(() => {
-    _.disabled.value = !0;
-  }, []), de = d(
+  ), le = d(() => {
+    K.disabled.value = !0;
+  }, []), ae = d(
     (r) => {
-      j(r), N(null), W(r) && (_.disabled.value = !1), s?.(r);
+      j(r), P(null), W(r) && (K.disabled.value = !1), s?.(r);
     },
     [W, s]
   ), Q = d((r) => {
-    N(r);
-  }, []), ue = d(
+    P(r);
+  }, []), ce = d(
     (r) => n[r]?.media.length > 1,
     [n]
-  )(o) && O === "image", ve = d(() => {
-    M.current?.unobserve(), P.current && !P.current.paused && (P.current.pause(), B.current = !0);
-  }, []), he = d(() => {
-    M.current?.observe();
-  }, []), fe = d(() => {
-    B.current && P.current && P.current.play().catch(ne), B.current = !1;
+  )(g) && T === "image", de = d(() => {
+    A.current?.unobserve(), S.current && !S.current.paused && (S.current.pause(), F.current = !0);
+  }, []), ue = d(() => {
+    A.current?.observe();
+  }, []), ve = d(() => {
+    F.current && S.current && S.current.play().catch(te), F.current = !1;
   }, []), Y = d(() => {
-    b.current?.prev();
+    D.current?.prev();
   }, []), Z = d(() => {
-    b.current?.next();
-  }, []), ge = (r, S, h) => {
-    if (p)
-      return p(r, S, h);
-    const w = r, E = "author" in r ? w.author : void 0, T = "description" in r ? w.description : void 0, V = "likes" in r ? w.likes : void 0;
-    return /* @__PURE__ */ t(Ve, { author: E, description: T, likes: V });
+    D.current?.next();
+  }, []), he = (r, I, f) => {
+    if (y)
+      return y(r, I, f);
+    const b = r, x = "author" in r ? b.author : void 0, V = "description" in r ? b.description : void 0, _ = "likes" in r ? b.likes : void 0;
+    return /* @__PURE__ */ t(Me, { author: x, description: V, likes: _ });
   }, ee = /* @__PURE__ */ k("div", { className: "rk-reel-overlay", children: [
     /* @__PURE__ */ k("div", { className: "rk-reel-container", children: [
-      /* @__PURE__ */ t(oe, { signals: [U], children: () => /* @__PURE__ */ t(
-        re,
+      /* @__PURE__ */ t(H, { signals: [X], children: () => /* @__PURE__ */ t(
+        ne,
         {
           count: n.length,
-          size: U.value,
+          size: X.value,
           direction: "vertical",
-          loop: D,
-          useNavKeys: x,
-          enableWheel: z,
-          wheelDebounceMs: A,
-          transitionDuration: R,
+          loop: h,
+          useNavKeys: L,
+          enableWheel: o,
+          wheelDebounceMs: z,
+          transitionDuration: N,
           swipeDistanceFactor: m,
           initialIndex: i,
-          apiRef: b,
-          beforeChange: ce,
-          afterChange: de,
-          onSlideDragStart: ve,
-          onSlideDragEnd: he,
-          onSlideDragCanceled: fe,
-          itemBuilder: (r, S, h) => {
-            const w = n[r], E = c.current === r, T = /* @__PURE__ */ k(q, { children: [
+          apiRef: D,
+          beforeChange: le,
+          afterChange: ae,
+          onSlideDragStart: de,
+          onSlideDragEnd: ue,
+          onSlideDragCanceled: ve,
+          itemBuilder: (r, I, f) => {
+            const b = n[r], x = c.current === r, V = /* @__PURE__ */ k(q, { children: [
               /* @__PURE__ */ t(
-                Be,
+                je,
                 {
-                  content: w,
-                  isActive: E,
-                  size: h,
-                  innerSliderRef: M,
-                  enableWheel: z,
-                  onVideoRef: E ? J : void 0,
-                  onActiveMediaTypeChange: E ? Q : void 0,
+                  content: b,
+                  isActive: x,
+                  size: f,
+                  innerSliderRef: A,
+                  enableWheel: o,
+                  onVideoRef: x ? J : void 0,
+                  onActiveMediaTypeChange: x ? Q : void 0,
                   renderNestedNavigation: a,
@@ -550,19 +549,19 @@ renderNestedSlide: v
               ),
-              ge(w, r, E)
+              he(b, r, x)
             ] });
             if (u) {
-              const V = u({
-                item: w,
+              const _ = u({
+                item: b,
                 index: r,
-                size: h,
-                isActive: E,
-                slideKey: w.id,
-                onVideoRef: E ? J : void 0,
-                innerSliderRef: M,
-                onActiveMediaTypeChange: E ? Q : void 0,
+                size: f,
+                isActive: x,
+                slideKey: b.id,
+                onVideoRef: x ? J : void 0,
+                innerSliderRef: A,
+                onActiveMediaTypeChange: x ? Q : void 0,
                 renderNestedNavigation: a,
-                enableWheel: z,
-                defaultContent: T
+                enableWheel: o,
+                defaultContent: V
               });
-              if (V !== null)
+              if (_ !== null)
                 return /* @__PURE__ */ t(
@@ -573,7 +572,7 @@ "div",
                     style: {
-                      width: h[0],
-                      height: h[1],
+                      width: f[0],
+                      height: f[1],
                       position: "relative"
                     },
-                    children: V
+                    children: _
                   }
@@ -587,7 +586,7 @@ );
                 style: {
-                  width: h[0],
-                  height: h[1],
+                  width: f[0],
+                  height: f[1],
                   position: "relative"
                 },
-                children: T
+                children: V
               }
@@ -598,15 +597,15 @@ );
       ) }),
-      l ? l({ onClose: e, soundState: _, activeIndex: o, content: n }) : /* @__PURE__ */ t(
-        Oe,
+      l ? l({ onClose: e, soundState: K, activeIndex: g, content: n }) : /* @__PURE__ */ t(
+        Be,
         {
           onClose: e,
-          showSound: W(o),
-          soundDisabled: ue
+          showSound: W(g),
+          soundDisabled: ce
         }
       )
     ] }),
-    C ? C({
+    w ? w({
       onPrev: Y,
       onNext: Z,
-      activeIndex: o,
+      activeIndex: g,
       count: n.length
@@ -651,3 +650,3 @@ }) : /* @__PURE__ */ k("div", { className: "rk-player-nav-arrows", children: [
           "aria-label": "Next",
-          children: /* @__PURE__ */ t(Se, { size: 28 })
+          children: /* @__PURE__ */ t(Re, { size: 28 })
         }
@@ -657,16 +656,16 @@ )
   ] });
-  return typeof document > "u" ? ee : we(ee, document.body);
+  return typeof document > "u" ? ee : ye(ee, document.body);
 }
-function Ye(e) {
-  return e.isOpen ? /* @__PURE__ */ t(De, { children: /* @__PURE__ */ t(Ue, { ...e }) }) : null;
+function qe(e) {
+  return e.isOpen ? /* @__PURE__ */ t(Le, { children: /* @__PURE__ */ t(Ve, { ...e }) }) : null;
 }
 export {
-  Fe as CloseButton,
-  se as ImageSlide,
-  Ye as ReelPlayerOverlay,
-  Ve as SlideOverlay,
-  $e as SoundButton,
-  De as SoundProvider,
-  le as VideoSlide,
+  Ae as CloseButton,
+  oe as ImageSlide,
+  qe as ReelPlayerOverlay,
+  Me as SlideOverlay,
+  Fe as SoundButton,
+  Le as SoundProvider,
+  ie as VideoSlide,
   G as useSoundState
 };

dist/lib/ImageSlide.d.ts

@@ -18,2 +18,4 @@ import { default as React, CSSProperties } from 'react';
     imgStyle?: CSSProperties;
+    /** Additional props spread onto the `<img>` element (e.g. `alt`, `loading`, `onLoad`). */
+    imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
@@ -20,0 +22,0 @@ /**

dist/lib/SoundState.d.ts

 import { default as React } from 'react';
-import { Signal } from '@reelkit/core';
+import { Signal } from '@reelkit/react';
 /**
@@ -4,0 +4,0 @@ * Reactive sound state shared across the reel player.

package.json

 {
   "name": "@reelkit/react-reel-player",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
@@ -5,0 +5,0 @@ "sideEffects": [

README.md

@@ -5,7 +5,7 @@ # @reelkit/react-reel-player
   <a href="https://www.npmjs.com/package/@reelkit/react-reel-player"><img src="https://img.shields.io/npm/v/@reelkit/react-reel-player?color=6366f1&label=npm" alt="npm" /></a>
-  <img src="https://img.shields.io/badge/gzip-3.8%20kB-6366f1" alt="Bundle size" />
+  <img src="https://img.shields.io/badge/gzip-3.7%20kB-6366f1" alt="Bundle size" />
   <a href="https://github.com/KonstantinKai/reelkit"><img src="https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social" alt="Star on GitHub" /></a>
 </p>
 
-Full-screen vertical-swipe video/image player for React. Inspired by Instagram Reels and TikTok. ~3.8 kB gzip.
+Drop-in Instagram Reels / TikTok-style video player for React. Opens as a full-screen overlay with vertical swipe navigation. Handles video autoplay, sound continuity on iOS, and multi-media posts out of the box. ~3.7 kB gzip.
 
@@ -241,7 +241,7 @@ ## Installation
 
-Full documentation, interactive demos, and customization examples at **[reelkit.dev/docs/reel-player](https://reelkit.dev/docs/reel-player)**.
+Docs and interactive demos at **[reelkit.dev/docs/reel-player](https://reelkit.dev/docs/reel-player)**.
 
 ## Support
 
-If you find ReelKit useful, give it a star on GitHub — it helps others discover the project and keeps development going.
+If ReelKit saved you some time, a star on GitHub would mean a lot — it's a small thing, but it really helps the project get noticed.
 
@@ -248,0 +248,0 @@ [![Star on GitHub](https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social)](https://github.com/KonstantinKai/reelkit)

No alert changes

Improved metrics

Total package byte prevSize

55543

1.59%

Lines of code

1359

2.33%

No dependency changes