@barabel324/react-player 0.0.5 → 0.0.7

package/README.md

@@ -10,21 +10,112 @@
 - **VK** — используется прямая ссылка на видео.
 
 ## Превью
-Можно указать изображение-превью, которое будет отображаться до загрузки плеера.
+Можно указать изображение-превью, которое будет отображаться до загрузки плеера. Как только плеер загрузится, отобразится кнопка, при нажатии которого превью уйдет, и запустится плеер.
+
+```ts
+preview: {
+  src: string;
+  alt: string;
+};
+```
+
+## Кастомизация
+В плеер можно кастомизировать изображение и кнопку, которые будут показываться, если есть превью.
+
+```ts
+const components={
+  button,
+  previewPicture
+}
+```
+
+```tsx
+const PlayButton = () => (
+  <button>▶ Play</button>
+);
+
+const PreviewImage = () => (
+  <img src='src/img' />
+);
+
+<Player
+  url={url}
+  components={{
+    button: PlayButton,
+    previewPicture: PreviewImage,
+  }}
+/>
+```
+
+Также можно прокинуть класс на сам плеер, если есть превью.
+
+```ts
+classNames={
+  player: 'custom-class'
+}
+```
 
 ## Стили
-Импорт из /dist/react-player.css
+Импорт такой:
+
+```ts
+import '@barabel324/react-player/css';
+```
 
 ## Пропсы
-- preview - ссылка на изображение, необязательно
-- url - ссылка на видео, обязательный
 
 ```ts
 type TPlayer = {
-  preview?: {
-    src: string;
-    alt: string;
+  /** Превью для видео */
+  preview?: TPlayerPreview['preview'];
+  /** Ссылка на видео */
+  url: TPlayerBase['url'];
+  /** кастомные компоненты либы */
+  components?: TComponents;
+  /** кастомные классы для компонентов либы */
+  classNames?: TClassNames;
+};
+```
+
+## Минимальный пример
+
+```tsx
+  import { Player } from '@barabel324/react-player';
+  import '@barabel324/react-player/css';
+
+  const urls = {
+    youtube: 'https://www.youtube.com/watch?v=0r9iEuDCnrw',
+    video: 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4',
+    rutube: 'https://rutube.ru/play/embed/20c1db3c9680dd6c11c5196e115389c3/',
+    vk: 'https://vkvideo.ru/video-230010077_456239088',
+  };
+
+  const urlsValues = Object.values(urls);
+
+  const App = () => {
+    return (
+      <div>
+        {urlsValues.map((url, index) => {
+          return (
+            <div
+              key={index}
+              style={{
+                margin: 50,
+                width: 300,
+                height: 300,
+              }}
+            >
+              <Player
+                preview={{
+                  src: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRicvXHENnmfMs08gwqqleKpIFIDyYXvABiotI69IImEyfxZBXVIos5QqecafJKRFV5a76EttukpAtA0O6-y9ujsgrgpwb0TbLedjYNo38',
+                  alt: 'preview',
+                }}
+                url={url}
+              />
+            </div>
+          );
+        })}
+      </div>
+    )
   };
-  url: string;
-}
 ```

package/dist/css.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

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

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

package/dist/index-Cqi0pvqf.js

@@ -0,0 +1,175 @@
+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";
+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,
+  ButtonComponent: u,
+  PreviewPictureComponent: 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 ? /* @__PURE__ */ o(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" }))
+            ]
+          }
+        ),
+        /* @__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-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"))
+}, 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, _ = N(() => {
+    const g = M(t);
+    return I[g];
+  }, [t]), i = C(null), P = () => {
+    i.current && i.current.play();
+  }, w = !!r || !!c;
+  return /* @__PURE__ */ o(
+    F,
+    {
+      hasPreview: w,
+      className: e,
+      preview: r,
+      onPlay: P,
+      ButtonComponent: p,
+      PreviewPictureComponent: 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
+};

package/dist/{index-BKNjwSFg.js → index-Cr0yHksH.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-Dnbs5lXl.js";
+import { u as p } from "./index-Cqi0pvqf.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();
       };
-  }, []), /* @__PURE__ */ d(
+  }, [c]), /* @__PURE__ */ d(
     "iframe",
     {
       className: t,

package/dist/{index-1pgUfxhC.js → index-DECHm14m.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-Dnbs5lXl.js";
+import { u as f } from "./index-Cqi0pvqf.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-DsBO-KZz.js → index-pr5RFd69.js}

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

package/dist/react-player.css

@@ -1 +1 @@
-.idmrp-button-play{--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%}.idmrp-button-play: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%)}.idmrp-player-preview{position:relative;width:100%;height:100%;object-fit:cover}.idmrp-player-preview .idmrp-player-preview__wrapper{position:absolute;inset:0;cursor:pointer}.idmrp-player-preview .idmrp-player-preview__button{z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}.idmrp-player-preview .idmrp-player-preview__preview{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.idmrp-player-preview .idmrp-player-preview__player{width:100%;height:100%}.idmrp-player .idmrp-player__player{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_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}

package/dist/react-player.d.ts

@@ -1,16 +1,59 @@
 import { RefObject } from 'react';
 
+/** Утилитарный дженерик для обозначения функционального компонента с пропсами children и className */
 declare type FCClass<P = object> = React.FC<P & React.PropsWithChildren & {
     className?: string;
 }>;
 
+declare type KeysWithClassNames = {
+    [K in keyof TMapComponents]: TMapComponents[K] extends {
+        className: string;
+    } ? K : never;
+}[keyof TMapComponents];
+
+declare type KeysWithComponent = {
+    [K in keyof TMapComponents]: TMapComponents[K] extends {
+        component: FCClass;
+    } ? K : never;
+}[keyof TMapComponents];
+
 export declare const Player: FCClass<TPlayer>;
 
+declare type TClassNames = {
+    [K in KeysWithClassNames]?: TMapComponents[K]['className'];
+};
+
+declare type TComponents = {
+    [K in KeysWithComponent]?: TMapComponents[K]['component'];
+};
+
+declare type TMapComponents = {
+    /** изображение превью */
+    previewPicture: {
+        /** компонент изображения */
+        component: FCClass;
+    };
+    /** кнопка, которая отображаентся, когда видео загрузилось */
+    button: {
+        /** компонент кнопки */
+        component: FCClass;
+    };
+    /** Плеер */
+    player: {
+        /** класс кнопки */
+        className: string;
+    };
+};
+
 export declare type TPlayer = {
     /** Превью для видео */
     preview?: TPlayerPreview['preview'];
     /** Ссылка на видео */
     url: TPlayerBase['url'];
+    /** кастомные компоненты либы */
+    components?: TComponents;
+    /** кастомные классы для компонентов либы */
+    classNames?: TClassNames;
 };
 
 declare type TPlayerBase = {
@@ -29,6 +72,8 @@ declare type TPlayerPreview = {
         /** Альт изображения */
         alt: string;
     };
+    PreviewPictureComponent?: FCClass<Record<string, any>>;
+    ButtonComponent?: FCClass<Record<string, any>>;
     onPlay?: () => void;
 };
 

package/dist/react-player.js

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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@barabel324/react-player",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "./dist/react-player.js",
   "types": "./dist/react-player.d.ts",
   "exports": {
     ".": {
       "import": "./dist/react-player.js"
+    },
+    "./css": {
+      "import": "./dist/react-player.css",
+      "types": "./dist/css.d.ts"
     }
   },
   "files": [
@@ -20,26 +24,29 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "lintFix": "eslint . --fix",
     "preview": "vite preview",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@microsoft/api-extractor": "^7.52.11",
+    "@stylistic/eslint-plugin": "^5.7.1",
     "@types/node": "^24.2.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "classix": "^2.2.6",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.3.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "sass-embedded": "^1.90.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",

package/dist/index-Dnbs5lXl.js

@@ -1,138 +0,0 @@
-import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import { createContext as d, useContext as v, useReducer as _, lazy as p, useMemo as $, useRef as C } from "react";
-const n = {
-  show: "show",
-  hide: "hide",
-  showButton: "showButton",
-  hideButton: "hideButton",
-  canplay: "canplay"
-}, P = {
-  showButton: !1,
-  showPreview: !0,
-  canplay: !1
-}, k = (e, t) => {
-  const { type: r } = t;
-  switch (r) {
-    case n.show:
-      return { ...e, showButton: !0, showPreview: !0 };
-    case n.hide:
-      return { ...e, showButton: !1, showPreview: !1 };
-    case n.showButton:
-      return { ...e, showButton: !0 };
-    case n.hideButton:
-      return { ...e, showButton: !1 };
-    case n.canplay:
-      return { ...e, canplay: !0, showButton: !0 };
-    default:
-      return e;
-  }
-}, m = d(P), b = d(() => {
-}), N = ({ children: e }) => {
-  const [t, r] = _(k, P);
-  return /* @__PURE__ */ s(m.Provider, { value: t, children: /* @__PURE__ */ s(b.Provider, { value: r, children: e }) });
-}, E = () => {
-  const e = v(m);
-  if (e === void 0)
-    throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
-  return e;
-}, R = () => {
-  const e = v(b);
-  if (e === void 0)
-    throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
-  return e;
-}, S = "idmrp-button-play", T = {
-  parent: S
-}, g = ({
-  className: e,
-  onClick: t
-}) => /* @__PURE__ */ s(
-  "button",
-  {
-    className: [T.parent, e].join(" "),
-    type: "button",
-    onClick: t
-  }
-), c = "idmrp-player-preview", u = {
-  parent: c,
-  wrapper: `${c}__wrapper`,
-  button: `${c}__button`,
-  preview: `${c}__preview`,
-  player: `${c}__player`
-}, j = ({
-  className: e,
-  preview: t,
-  onPlay: r,
-  children: a
-}) => {
-  const { showButton: i, showPreview: l, canplay: f } = E(), B = R(), x = () => {
-    f && (B({
-      type: n.hide
-    }), r && r());
-  };
-  return /* @__PURE__ */ y("div", { className: [u.parent, e].join(" "), children: [
-    (i || t && l) && /* @__PURE__ */ y(
-      "div",
-      {
-        className: u.wrapper,
-        onClick: x,
-        children: [
-          i && /* @__PURE__ */ s(
-            g,
-            {
-              className: u.button
-            }
-          ),
-          t && l && /* @__PURE__ */ s("img", { className: u.preview, src: t.src, alt: t.alt ?? "preview" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ s("div", { className: u.player, children: a })
-  ] });
-}, o = {
-  youtube: "youtube",
-  rutube: "rutube",
-  video: "video",
-  vk: "vk"
-}, D = {
-  [o.youtube]: p(async () => await import("./index-1pgUfxhC.js")),
-  [o.rutube]: p(async () => await import("./index-DsBO-KZz.js")),
-  [o.video]: p(async () => await import("./index-Cu3vJcLM.js")),
-  [o.vk]: p(async () => await import("./index-BKNjwSFg.js"))
-}, V = (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\/))/, a = /^(?:https?:\/\/)?(?:www\.|m\.)?(?:vk\.com|vkvideo\.ru)\/.+$/;
-  return r.test(e) ? o.rutube : t.test(e) ? o.youtube : a.test(e) ? o.vk : o.video;
-}, w = "idmrp-player", h = {
-  parent: w,
-  player: `${w}__player`
-}, A = ({
-  url: e,
-  preview: t
-}) => {
-  const r = $(() => {
-    const l = V(e);
-    return D[l];
-  }, [e]), a = C(null), i = () => {
-    a.current && a.current.play();
-  };
-  return /* @__PURE__ */ s(
-    j,
-    {
-      className: h.parent,
-      preview: t,
-      onPlay: i,
-      children: /* @__PURE__ */ s(
-        r,
-        {
-          className: h.player,
-          ref: a,
-          url: e
-        }
-      )
-    }
-  );
-}, Y = (e) => /* @__PURE__ */ s(N, { children: /* @__PURE__ */ s(A, { ...e }) });
-export {
-  n as P,
-  Y as a,
-  R as u
-};