@barabel324/react-player 0.0.8 → 0.0.10

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-C8oYhGns.js → index-Bpmt5HjW.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-DUNavqhH.js";
 const m = async () => new Promise((t, n) => {
   if (window.VK?.VideoPlayer) {
     t(window.VK);
@@ -54,7 +54,7 @@ const m = async () => new Promise((t, n) => {
       }), () => {
         e.current && e.current.destroy();
       };
-  }, [c]), /* @__PURE__ */ d(
+  }, []), /* @__PURE__ */ d(
     "iframe",
     {
       className: t,

package/dist/{index-P3WMQDqC.js → index-C4BbrYIr.js}

@@ -1,35 +1,35 @@
 import { jsx as i } from "react/jsx-runtime";
-import { u as p } from "./index-B8sUd3YU.js";
+import { u as p } from "./index-DUNavqhH.js";
 import { useRef as c, useImperativeHandle as f, useEffect as l } from "react";
 const w = ({
-  className: a,
-  ref: s,
-  url: n
+  className: t,
+  ref: a,
+  url: s
 }) => {
-  const e = c(null), r = p(), o = () => {
+  const e = c(null), n = p(), o = () => {
     e.current && e.current.contentWindow?.postMessage(JSON.stringify({
       type: "player:play",
       data: {}
     }), "*");
   };
-  return f(s, () => ({
+  return f(a, () => ({
     play: o
   })), l(() => {
-    const t = (u) => {
+    const r = (u) => {
       if (!e.current) return;
-      JSON.parse(u.data).type === "player:ready" && r({ type: "canplay" });
+      JSON.parse(u.data).type === "player:ready" && n({ type: "canplay" });
     };
-    return window.addEventListener("message", t), () => {
-      window.removeEventListener("message", t);
+    return window.addEventListener("message", r), () => {
+      window.removeEventListener("message", r);
     };
-  }, [r]), /* @__PURE__ */ i(
+  }, []), /* @__PURE__ */ i(
     "iframe",
     {
-      className: a,
+      className: t,
       ref: e,
       width: "100%",
       height: "100%",
-      src: n,
+      src: s,
       allowFullScreen: !0,
       frameBorder: "0"
     }

package/dist/{index-CczXORYY.js → index-DSFxsWiZ.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-DUNavqhH.js";
 import { useRef as i, useImperativeHandle as P } from "react";
 const v = ({
   className: n,

package/dist/index-DUNavqhH.js

@@ -0,0 +1,179 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { createContext as b, useContext as m, useReducer as g, lazy as _, useMemo as k, useRef as q } from "react";
+function v() {
+  let e, r = "", t = 0;
+  for (; t < arguments.length; ) (e = arguments[t++]) && typeof e == "string" && (r && (r += " "), r += e);
+  return r;
+}
+const c = {
+  show: "show",
+  hide: "hide",
+  showButton: "showButton",
+  hideButton: "hideButton",
+  canplay: "canplay"
+}, f = {
+  showButton: !1,
+  showPreview: !0,
+  canplay: !1
+}, E = (e, r) => {
+  const { type: t } = r;
+  switch (t) {
+    case c.show:
+      return { ...e, showButton: !0, showPreview: !0 };
+    case c.hide:
+      return { ...e, showButton: !1, showPreview: !1 };
+    case c.showButton:
+      return { ...e, showButton: !0 };
+    case c.hideButton:
+      return { ...e, showButton: !1 };
+    case c.canplay:
+      return { ...e, canplay: !0, showButton: !0 };
+    default:
+      return e;
+  }
+}, B = b(f), x = b(() => {
+}), R = ({ children: e }) => {
+  const [r, t] = g(E, f);
+  return /* @__PURE__ */ a(B.Provider, { value: r, children: /* @__PURE__ */ a(x.Provider, { value: t, children: e }) });
+}, S = () => {
+  const e = m(B);
+  if (e === void 0)
+    throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
+  return e;
+}, T = () => {
+  const e = m(x);
+  if (e === void 0)
+    throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
+  return e;
+}, C = "_button_1xali_2", $ = {
+  button: C
+}, D = ({
+  className: e,
+  onClick: r
+}) => /* @__PURE__ */ a(
+  "button",
+  {
+    className: v(
+      $.button,
+      e
+    ),
+    type: "button",
+    onClick: r
+  }
+), V = "_playerPreview_lqhcw_1", j = "_playerPreview__wrapper_lqhcw_7", A = "_playerPreview__wrapper_cursor_lqhcw_11", L = "_playerPreview__button_lqhcw_14", O = "_playerPreview__preview_lqhcw_21", Y = "_playerPreview__player_lqhcw_30", o = {
+  playerPreview: V,
+  playerPreview__wrapper: j,
+  playerPreview__wrapper_cursor: A,
+  playerPreview__button: L,
+  playerPreview__preview: O,
+  playerPreview__player: Y
+}, z = ({
+  className: e,
+  preview: r,
+  onPlay: t,
+  children: u,
+  buttonComponent: n,
+  previewPictureComponent: l
+}) => {
+  const { showButton: i, showPreview: p, canplay: P } = S(), y = T(), h = () => {
+    P && (y({
+      type: c.hide
+    }), t && t());
+  }, w = !!r || !!l;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: v(
+        o.playerPreview,
+        e
+      ),
+      children: [
+        (i || w && p) && /* @__PURE__ */ d(
+          "div",
+          {
+            className: v(
+              o.playerPreview__wrapper,
+              i && o.playerPreview__wrapper_cursor
+            ),
+            onClick: h,
+            children: [
+              i && (n ? /* @__PURE__ */ a(n.component, { className: o.playerPreview__button, ...n.props }) : /* @__PURE__ */ a(
+                D,
+                {
+                  className: o.playerPreview__button
+                }
+              )),
+              w && p && (l ? /* @__PURE__ */ a(l.component, { className: o.playerPreview__preview, ...l.props }) : r && /* @__PURE__ */ a("img", { className: o.playerPreview__preview, src: r.src, alt: r.alt ?? "preview" }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: o.playerPreview__player, children: u })
+      ]
+    }
+  );
+}, s = {
+  youtube: "youtube",
+  rutube: "rutube",
+  video: "video",
+  vk: "vk"
+}, I = {
+  [s.youtube]: _(async () => await import("./index-FsQN9AUJ.js")),
+  [s.rutube]: _(async () => await import("./index-C4BbrYIr.js")),
+  [s.video]: _(async () => await import("./index-DSFxsWiZ.js")),
+  [s.vk]: _(async () => await import("./index-Bpmt5HjW.js"))
+}, M = (e) => {
+  const r = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/, t = /^(?:https?:\/\/)?(?:rutu\.be\/|rutube\.ru(\/play\/))/, u = /^(?:https?:\/\/)?(?:www\.|m\.)?(?:vk\.com|vkvideo\.ru)\/.+$/;
+  return t.test(e) ? s.rutube : r.test(e) ? s.youtube : u.test(e) ? s.vk : s.video;
+}, U = "_player_1afml_1", F = {
+  player: U
+}, G = ({
+  children: e,
+  hasPreview: r,
+  ...t
+}) => r ? /* @__PURE__ */ a(
+  z,
+  {
+    ...t,
+    children: e
+  }
+) : e, H = ({
+  className: e,
+  url: r,
+  preview: t,
+  classNames: u,
+  components: n
+}) => {
+  const l = u?.player, i = n?.button, p = n?.previewPicture, P = k(() => {
+    const N = M(r);
+    return I[N];
+  }, [r]), y = q(null), h = () => {
+    y.current && y.current.play();
+  }, w = !!t || !!p;
+  return /* @__PURE__ */ a(
+    G,
+    {
+      hasPreview: w,
+      className: e,
+      preview: t,
+      onPlay: h,
+      buttonComponent: i,
+      previewPictureComponent: p,
+      children: /* @__PURE__ */ a(
+        P,
+        {
+          className: v(
+            l ?? F.player,
+            !w && e
+          ),
+          ref: y,
+          url: r
+        }
+      )
+    }
+  );
+}, Q = (e) => /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(H, { ...e }) });
+export {
+  c as P,
+  Q as a,
+  T as u
+};

package/dist/{index-Dj9G-CFc.js → index-FsQN9AUJ.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-DUNavqhH.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.css

@@ -1 +1 @@
-._button_1xali_2{--idmrp-button-play-size: 3.375rem;--idmrp-button-play-bg: #2D3C31;--idmrp-button-play-triangle-color: #E3DFD7;position:relative;width:var(--idmrp-button-play-size);min-width:var(--idmrp-button-play-size);height:var(--idmrp-button-play-size);background-color:var(--idmrp-button-play-bg);border-radius:50%}._button_1xali_2:before{content:"";position:absolute;top:50%;left:58%;border:.3125rem solid transparent;border-left:.5625rem solid var(--idmrp-button-play-triangle-color);transform:translate(-50%,-50%)}._playerPreview_so1s6_1{position:relative;width:100%;height:100%;object-fit:cover}._playerPreview__wrapper_so1s6_7{position:absolute;inset:0;cursor:pointer}._playerPreview__button_so1s6_12{z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}._playerPreview__preview_so1s6_19{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}._playerPreview__player_so1s6_28{width:100%;height:100%}._player_1afml_1{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
+._button_1xali_2{--idmrp-button-play-size: 3.375rem;--idmrp-button-play-bg: #2D3C31;--idmrp-button-play-triangle-color: #E3DFD7;position:relative;width:var(--idmrp-button-play-size);min-width:var(--idmrp-button-play-size);height:var(--idmrp-button-play-size);background-color:var(--idmrp-button-play-bg);border-radius:50%}._button_1xali_2:before{content:"";position:absolute;top:50%;left:58%;border:.3125rem solid transparent;border-left:.5625rem solid var(--idmrp-button-play-triangle-color);transform:translate(-50%,-50%)}._playerPreview_lqhcw_1{position:relative;width:100%;height:100%;object-fit:cover}._playerPreview__wrapper_lqhcw_7{position:absolute;inset:0}._playerPreview__wrapper_cursor_lqhcw_11{cursor:pointer}._playerPreview__button_lqhcw_14{z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}._playerPreview__preview_lqhcw_21{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}._playerPreview__player_lqhcw_30{width:100%;height:100%}._player_1afml_1{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

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: any;
+    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-DUNavqhH.js";
 export {
   e as Player
 };

package/package.json

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

package/dist/index-B8sUd3YU.js

@@ -1,175 +0,0 @@
-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";
-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 = {
-  show: "show",
-  hide: "hide",
-  showButton: "showButton",
-  hideButton: "hideButton",
-  canplay: "canplay"
-}, m = {
-  showButton: !1,
-  showPreview: !0,
-  canplay: !1
-}, E = (e, t) => {
-  const { type: r } = t;
-  switch (r) {
-    case a.show:
-      return { ...e, showButton: !0, showPreview: !0 };
-    case a.hide:
-      return { ...e, showButton: !1, showPreview: !1 };
-    case a.showButton:
-      return { ...e, showButton: !0 };
-    case a.hideButton:
-      return { ...e, showButton: !1 };
-    case a.canplay:
-      return { ...e, canplay: !0, showButton: !0 };
-    default:
-      return e;
-  }
-}, B = b(m), x = b(() => {
-}), R = ({ children: e }) => {
-  const [t, r] = k(E, m);
-  return /* @__PURE__ */ o(B.Provider, { value: t, children: /* @__PURE__ */ o(x.Provider, { value: r, children: e }) });
-}, S = () => {
-  const e = f(B);
-  if (e === void 0)
-    throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
-  return e;
-}, T = () => {
-  const e = f(x);
-  if (e === void 0)
-    throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
-  return e;
-}, $ = "_button_1xali_2", D = {
-  button: $
-}, V = ({
-  className: e,
-  onClick: t
-}) => /* @__PURE__ */ o(
-  "button",
-  {
-    className: h(
-      D.button,
-      e
-    ),
-    type: "button",
-    onClick: t
-  }
-), j = "_playerPreview_so1s6_1", A = "_playerPreview__wrapper_so1s6_7", L = "_playerPreview__button_so1s6_12", O = "_playerPreview__preview_so1s6_19", Y = "_playerPreview__player_so1s6_28", y = {
-  playerPreview: j,
-  playerPreview__wrapper: A,
-  playerPreview__button: L,
-  playerPreview__preview: O,
-  playerPreview__player: Y
-}, z = ({
-  className: e,
-  preview: t,
-  onPlay: r,
-  children: n,
-  renderButton: u,
-  renderPreviewPicture: l
-}) => {
-  const { showButton: p, showPreview: c, canplay: _ } = S(), i = T(), P = () => {
-    _ && (i({
-      type: a.hide
-    }), r && r());
-  }, w = !!t || !!l;
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: h(
-        y.playerPreview,
-        e
-      ),
-      children: [
-        (p || t && c) && /* @__PURE__ */ d(
-          "div",
-          {
-            className: y.playerPreview__wrapper,
-            onClick: P,
-            children: [
-              p && (u ? u() : /* @__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" }))
-            ]
-          }
-        ),
-        /* @__PURE__ */ o("div", { className: y.playerPreview__player, children: n })
-      ]
-    }
-  );
-}, s = {
-  youtube: "youtube",
-  rutube: "rutube",
-  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"))
-}, 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;
-}, U = "_player_1afml_1", q = {
-  player: U
-}, F = ({
-  children: e,
-  hasPreview: t,
-  ...r
-}) => t ? /* @__PURE__ */ o(
-  z,
-  {
-    ...r,
-    children: e
-  }
-) : e, G = ({
-  className: e,
-  url: t,
-  preview: r,
-  classNames: n,
-  components: u
-}) => {
-  const l = n?.player, p = u?.button, c = u?.previewPicture, _ = C(() => {
-    const g = M(t);
-    return I[g];
-  }, [t]), i = N(null), P = () => {
-    i.current && i.current.play();
-  }, w = !!r || !!c;
-  return /* @__PURE__ */ o(
-    F,
-    {
-      hasPreview: w,
-      className: e,
-      preview: r,
-      onPlay: P,
-      renderButton: p,
-      renderPreviewPicture: c,
-      children: /* @__PURE__ */ o(
-        _,
-        {
-          className: h(
-            l ?? q.player,
-            !w && e
-          ),
-          ref: i,
-          url: t
-        }
-      )
-    }
-  );
-}, K = (e) => /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(G, { ...e }) });
-export {
-  a as P,
-  K as a,
-  T as u
-};