@barabel324/react-player 0.0.7 → 0.0.8

package/README.md

@@ -41,8 +41,8 @@ const PreviewImage = () => (
 <Player
   url={url}
   components={{
-    button: PlayButton,
-    previewPicture: PreviewImage,
+    button: () => PlayButton,
+    previewPicture: () => PreviewImage,
   }}
 />
 ```

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

@@ -1,5 +1,5 @@
 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 N, useRef as C } from "react";
+import { createContext as b, useContext as f, useReducer as k, lazy as v, useMemo as C, useRef as N } from "react";
 function h() {
   let e, t = "", r = 0;
   for (; r < arguments.length; ) (e = arguments[r++]) && typeof e == "string" && (t && (t += " "), t += e);
@@ -71,8 +71,8 @@ const a = {
   preview: t,
   onPlay: r,
   children: n,
-  ButtonComponent: u,
-  PreviewPictureComponent: l
+  renderButton: u,
+  renderPreviewPicture: l
 }) => {
   const { showButton: p, showPreview: c, canplay: _ } = S(), i = T(), P = () => {
     _ && (i({
@@ -93,13 +93,13 @@ const a = {
             className: y.playerPreview__wrapper,
             onClick: P,
             children: [
-              p && (u ? /* @__PURE__ */ o(u, {}) : /* @__PURE__ */ o(
+              p && (u ? u() : /* @__PURE__ */ o(
                 V,
                 {
                   className: y.playerPreview__button
                 }
               )),
-              w && c && (l ? /* @__PURE__ */ o(l, {}) : t && /* @__PURE__ */ o("img", { className: y.playerPreview__preview, src: t.src, alt: t.alt ?? "preview" }))
+              w && c && (l ? l() : t && /* @__PURE__ */ o("img", { className: y.playerPreview__preview, src: t.src, alt: t.alt ?? "preview" }))
             ]
           }
         ),
@@ -113,10 +113,10 @@ const a = {
   video: "video",
   vk: "vk"
 }, I = {
-  [s.youtube]: v(async () => await import("./index-DECHm14m.js")),
-  [s.rutube]: v(async () => await import("./index-pr5RFd69.js")),
-  [s.video]: v(async () => await import("./index-Bu1TBomL.js")),
-  [s.vk]: v(async () => await import("./index-Cr0yHksH.js"))
+  [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"))
 }, 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;
@@ -139,10 +139,10 @@ const a = {
   classNames: n,
   components: u
 }) => {
-  const l = n?.player, p = u?.button, c = u?.previewPicture, _ = N(() => {
+  const l = n?.player, p = u?.button, c = u?.previewPicture, _ = C(() => {
     const g = M(t);
     return I[g];
-  }, [t]), i = C(null), P = () => {
+  }, [t]), i = N(null), P = () => {
     i.current && i.current.play();
   }, w = !!r || !!c;
   return /* @__PURE__ */ o(
@@ -152,8 +152,8 @@ const a = {
       className: e,
       preview: r,
       onPlay: P,
-      ButtonComponent: p,
-      PreviewPictureComponent: c,
+      renderButton: p,
+      renderPreviewPicture: c,
       children: /* @__PURE__ */ o(
         _,
         {

package/dist/{index-Cr0yHksH.js → index-C8oYhGns.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-Cqi0pvqf.js";
+import { u as p } from "./index-B8sUd3YU.js";
 const m = async () => new Promise((t, n) => {
   if (window.VK?.VideoPlayer) {
     t(window.VK);

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

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

package/dist/{index-DECHm14m.js → index-Dj9G-CFc.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-Cqi0pvqf.js";
+import { u as f } from "./index-B8sUd3YU.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/{index-pr5RFd69.js → index-P3WMQDqC.js}

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

package/dist/react-player.d.ts

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

package/dist/react-player.js

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

package/package.json

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