@barabel324/react-player 0.0.8 → 0.0.9

package/README.md

@@ -23,15 +23,23 @@ preview: {
 В плеер можно кастомизировать изображение и кнопку, которые будут показываться, если есть превью.
 
 ```ts
-const components={
-  button,
-  previewPicture
+components={
+  button: {
+    /** компонент */
+    component: FCClass;
+    /** его пропсы */
+    props?: Record<string, any>;
+  },
+  previewPicture: {
+    component: FCClass;
+    props?: Record<string, any>;
+  },
 }
 ```
 
 ```tsx
-const PlayButton = () => (
-  <button>▶ Play</button>
+const PlayButton = (props) => (
+  <button {...props}>▶ Play</button>
 );
 
 const PreviewImage = () => (
@@ -41,8 +49,15 @@ const PreviewImage = () => (
 <Player
   url={url}
   components={{
-    button: () => PlayButton,
-    previewPicture: () => PreviewImage,
+    button: {
+      component: PlayButton,
+      props: {
+        type: "button"
+      }
+    },
+    previewPicture: {
+      component: PreviewImage,
+    },
   }}
 />
 ```

package/dist/{index-CczXORYY.js → index-Byq3YiGh.js}

@@ -1,5 +1,5 @@
 import { jsx as y } from "react/jsx-runtime";
-import { u as d, P as t } from "./index-B8sUd3YU.js";
+import { u as d, P as t } from "./index-Cnbw2ZkR.js";
 import { useRef as i, useImperativeHandle as P } from "react";
 const v = ({
   className: n,

package/dist/{index-C8oYhGns.js → index-C0CG6pEe.js}

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { useRef as a, useImperativeHandle as l, useEffect as u } from "react";
-import { u as p } from "./index-B8sUd3YU.js";
+import { u as p } from "./index-Cnbw2ZkR.js";
 const m = async () => new Promise((t, n) => {
   if (window.VK?.VideoPlayer) {
     t(window.VK);

package/dist/{index-P3WMQDqC.js → index-Ce-Fa46G.js}

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { u as p } from "./index-B8sUd3YU.js";
+import { u as p } from "./index-Cnbw2ZkR.js";
 import { useRef as c, useImperativeHandle as f, useEffect as l } from "react";
 const w = ({
   className: a,

package/dist/{index-B8sUd3YU.js → index-Cnbw2ZkR.js}

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { createContext as b, useContext as f, useReducer as k, lazy as v, useMemo as C, useRef as N } from "react";
+import { createContext as b, useContext as f, useReducer as k, lazy as _, useMemo as N, useRef as E } from "react";
 function h() {
   let e, t = "", r = 0;
   for (; r < arguments.length; ) (e = arguments[r++]) && typeof e == "string" && (t && (t += " "), t += e);
   return t;
 }
-const a = {
+const u = {
   show: "show",
   hide: "hide",
   showButton: "showButton",
@@ -15,32 +15,32 @@ const a = {
   showButton: !1,
   showPreview: !0,
   canplay: !1
-}, E = (e, t) => {
+}, R = (e, t) => {
   const { type: r } = t;
   switch (r) {
-    case a.show:
+    case u.show:
       return { ...e, showButton: !0, showPreview: !0 };
-    case a.hide:
+    case u.hide:
       return { ...e, showButton: !1, showPreview: !1 };
-    case a.showButton:
+    case u.showButton:
       return { ...e, showButton: !0 };
-    case a.hideButton:
+    case u.hideButton:
       return { ...e, showButton: !1 };
-    case a.canplay:
+    case u.canplay:
       return { ...e, canplay: !0, showButton: !0 };
     default:
       return e;
   }
 }, B = b(m), x = b(() => {
-}), R = ({ children: e }) => {
-  const [t, r] = k(E, m);
+}), S = ({ children: e }) => {
+  const [t, r] = k(R, m);
   return /* @__PURE__ */ o(B.Provider, { value: t, children: /* @__PURE__ */ o(x.Provider, { value: r, children: e }) });
-}, S = () => {
+}, T = () => {
   const e = f(B);
   if (e === void 0)
     throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
   return e;
-}, T = () => {
+}, C = () => {
   const e = f(x);
   if (e === void 0)
     throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
@@ -70,15 +70,15 @@ const a = {
   className: e,
   preview: t,
   onPlay: r,
-  children: n,
-  renderButton: u,
-  renderPreviewPicture: l
+  children: l,
+  buttonComponent: a,
+  previewPictureComponent: n
 }) => {
-  const { showButton: p, showPreview: c, canplay: _ } = S(), i = T(), P = () => {
-    _ && (i({
-      type: a.hide
+  const { showButton: p, showPreview: c, canplay: v } = T(), i = C(), P = () => {
+    v && (i({
+      type: u.hide
     }), r && r());
-  }, w = !!t || !!l;
+  }, w = !!t || !!n;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -93,17 +93,17 @@ const a = {
             className: y.playerPreview__wrapper,
             onClick: P,
             children: [
-              p && (u ? u() : /* @__PURE__ */ o(
+              p && (a ? /* @__PURE__ */ o(a.component, { ...a.props }) : /* @__PURE__ */ o(
                 V,
                 {
                   className: y.playerPreview__button
                 }
               )),
-              w && c && (l ? l() : t && /* @__PURE__ */ o("img", { className: y.playerPreview__preview, src: t.src, alt: t.alt ?? "preview" }))
+              w && c && (n ? /* @__PURE__ */ o(n.component, { ...n.props }) : t && /* @__PURE__ */ o("img", { className: y.playerPreview__preview, src: t.src, alt: t.alt ?? "preview" }))
             ]
           }
         ),
-        /* @__PURE__ */ o("div", { className: y.playerPreview__player, children: n })
+        /* @__PURE__ */ o("div", { className: y.playerPreview__player, children: l })
       ]
     }
   );
@@ -113,13 +113,13 @@ const a = {
   video: "video",
   vk: "vk"
 }, I = {
-  [s.youtube]: v(async () => await import("./index-Dj9G-CFc.js")),
-  [s.rutube]: v(async () => await import("./index-P3WMQDqC.js")),
-  [s.video]: v(async () => await import("./index-CczXORYY.js")),
-  [s.vk]: v(async () => await import("./index-C8oYhGns.js"))
+  [s.youtube]: _(async () => await import("./index-deKi-pBj.js")),
+  [s.rutube]: _(async () => await import("./index-Ce-Fa46G.js")),
+  [s.video]: _(async () => await import("./index-Byq3YiGh.js")),
+  [s.vk]: _(async () => await import("./index-C0CG6pEe.js"))
 }, M = (e) => {
-  const t = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/, r = /^(?:https?:\/\/)?(?:rutu\.be\/|rutube\.ru(\/play\/))/, n = /^(?:https?:\/\/)?(?:www\.|m\.)?(?:vk\.com|vkvideo\.ru)\/.+$/;
-  return r.test(e) ? s.rutube : t.test(e) ? s.youtube : n.test(e) ? s.vk : s.video;
+  const t = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/, r = /^(?:https?:\/\/)?(?:rutu\.be\/|rutube\.ru(\/play\/))/, l = /^(?:https?:\/\/)?(?:www\.|m\.)?(?:vk\.com|vkvideo\.ru)\/.+$/;
+  return r.test(e) ? s.rutube : t.test(e) ? s.youtube : l.test(e) ? s.vk : s.video;
 }, U = "_player_1afml_1", q = {
   player: U
 }, F = ({
@@ -136,13 +136,13 @@ const a = {
   className: e,
   url: t,
   preview: r,
-  classNames: n,
-  components: u
+  classNames: l,
+  components: a
 }) => {
-  const l = n?.player, p = u?.button, c = u?.previewPicture, _ = C(() => {
+  const n = l?.player, p = a?.button, c = a?.previewPicture, v = N(() => {
     const g = M(t);
     return I[g];
-  }, [t]), i = N(null), P = () => {
+  }, [t]), i = E(null), P = () => {
     i.current && i.current.play();
   }, w = !!r || !!c;
   return /* @__PURE__ */ o(
@@ -152,13 +152,13 @@ const a = {
       className: e,
       preview: r,
       onPlay: P,
-      renderButton: p,
-      renderPreviewPicture: c,
+      buttonComponent: p,
+      previewPictureComponent: c,
       children: /* @__PURE__ */ o(
-        _,
+        v,
         {
           className: h(
-            l ?? q.player,
+            n ?? q.player,
             !w && e
           ),
           ref: i,
@@ -167,9 +167,9 @@ const a = {
       )
     }
   );
-}, K = (e) => /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(G, { ...e }) });
+}, K = (e) => /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(G, { ...e }) });
 export {
-  a as P,
+  u as P,
   K as a,
-  T as u
+  C as u
 };

package/dist/{index-Dj9G-CFc.js → index-deKi-pBj.js}

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useRef as s, useImperativeHandle as p, useEffect as y } from "react";
-import { u as f } from "./index-B8sUd3YU.js";
+import { u as f } from "./index-Cnbw2ZkR.js";
 const m = (t) => {
   const n = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/, o = t.match(n);
   return o && o[7].length === 11 ? o[7] : "";

package/dist/react-player.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { RefObject } from 'react';
 
 /** Утилитарный дженерик для обозначения функционального компонента с пропсами children и className */
@@ -14,7 +13,7 @@ declare type KeysWithClassNames = {
 
 declare type KeysWithComponent = {
     [K in keyof TMapComponents]: TMapComponents[K] extends {
-        component: () => ReactNode;
+        component: TComp;
     } ? K : never;
 }[keyof TMapComponents];
 
@@ -24,6 +23,11 @@ declare type TClassNames = {
     [K in KeysWithClassNames]?: TMapComponents[K]['className'];
 };
 
+declare type TComp = {
+    component: FCClass;
+    props?: Record<string, any>;
+};
+
 declare type TComponents = {
     [K in KeysWithComponent]?: TMapComponents[K]['component'];
 };
@@ -32,12 +36,12 @@ declare type TMapComponents = {
     /** изображение превью */
     previewPicture: {
         /** компонент изображения */
-        component: () => ReactNode;
+        component: TComp;
     };
     /** кнопка, которая отображаентся, когда видео загрузилось */
     button: {
         /** компонент кнопки */
-        component: () => ReactNode;
+        component: TComp;
     };
     /** Плеер */
     player: {
@@ -73,8 +77,8 @@ declare type TPlayerPreview = {
         /** Альт изображения */
         alt: string;
     };
-    renderPreviewPicture?: () => ReactNode;
-    renderButton?: () => ReactNode;
+    previewPictureComponent?: TComp;
+    buttonComponent?: TComp;
     onPlay?: () => void;
 };
 

package/dist/react-player.js

@@ -1,4 +1,4 @@
-import { a as e } from "./index-B8sUd3YU.js";
+import { a as e } from "./index-Cnbw2ZkR.js";
 export {
   e as Player
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barabel324/react-player",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/react-player.js",
   "types": "./dist/react-player.d.ts",