@barabel324/react-player 0.0.0 → 0.0.1

package/README.md

@@ -1,69 +1,27 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# React Player
+
+`React Player` — компонент для воспроизведения видео.
+Он анализирует переданную ссылку и автоматически выбирает подходящий плеер.
+Если ссылка не поддерживается, используется стандартный HTML-тег `<video>`.
+
+## Поддерживаемые плееры
+- **YouTube** — ссылка берётся через кнопку «Поделиться»;
+- **RuTube** — ссылка берётся из атрибута `src` тега `<iframe>`, доступного в коде вставки при выборе «Поделиться»;
+- **VK** — используется прямая ссылка на видео.
+
+## Превью
+Можно указать изображение-превью, которое будет отображаться до загрузки плеера.
+
+## Пропсы
+- preview - ссылка на изображение, необязательно
+- url - ссылка на видео, обязательный
+
+```ts
+type TPlayer = {
+  preview?: {
+    src: string;
+    alt: string;
+  };
+  url: string;
+}
 ```

package/dist/index-B4aQ3fZe.js

@@ -0,0 +1,44 @@
+import { jsx as y } from "react/jsx-runtime";
+import { u as d, P as t } from "./index-DqNJQSqH.js";
+import { useRef as i, useImperativeHandle as P } from "react";
+const v = ({
+  className: n,
+  ref: r,
+  url: s
+}) => {
+  const e = i(null), o = d(), a = () => {
+    o({
+      type: t.hideButton
+    });
+  }, l = () => {
+    o({
+      type: t.showButton
+    });
+  }, c = () => {
+    o({
+      type: t.canplay
+    });
+  }, u = () => {
+    e.current && (a(), e.current.play().catch((p) => {
+      console.error(p);
+    }));
+  };
+  return P(r, () => ({
+    play: u
+  })), /* @__PURE__ */ y(
+    "video",
+    {
+      className: n,
+      ref: e,
+      controls: !0,
+      src: s,
+      preload: "auto",
+      onPlay: a,
+      onPause: l,
+      onCanPlay: c
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/index-CEYCN7W2.js

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

package/dist/index-CtwCLqA8.js

@@ -0,0 +1,76 @@
+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-DqNJQSqH.js";
+const m = async () => new Promise((t, n) => {
+  if (window.VK?.VideoPlayer) {
+    t(window.VK);
+    return;
+  }
+  const o = "https://vk.com/js/api/videoplayer.js";
+  if (Array.from(document.scripts).find(
+    (r) => r.src === o
+  )) {
+    const r = setInterval(() => {
+      window.VK?.VideoPlayer && (clearInterval(r), t(window.VK));
+    }, 300);
+    setTimeout(() => {
+      clearInterval(r), n(new Error("VK Video API timeout"));
+    }, 15e3);
+    return;
+  }
+  const e = document.createElement("script");
+  e.src = o, e.async = !0, e.onload = () => {
+    const r = () => {
+      window.VK?.VideoPlayer ? t(window.VK) : setTimeout(r, 300);
+    };
+    r();
+  }, e.onerror = () => {
+    n(new Error("Failed to load VK Video API"));
+  };
+  const c = document.getElementsByTagName("script")[0];
+  c.parentNode?.insertBefore(e, c);
+}), f = (t) => {
+  const n = /^https:\/\/vkvideo\.ru\/video(-\d+)_(\d+)$/, o = t.match(n);
+  if (!o)
+    throw new Error(`Некорректный формат ссылки ${t}`);
+  const i = o[1], e = o[2];
+  return `https://vkvideo.ru/video_ext.php?oid=${i}&id=${e}`;
+}, h = ({
+  className: t,
+  ref: n,
+  url: o
+}) => {
+  const i = a(null), e = a(null), c = p(), r = () => {
+    e.current && e.current.play?.();
+  };
+  return l(n, () => ({
+    play: r
+  })), u(() => {
+    if (i.current)
+      return m().then((s) => {
+        e.current = s.VideoPlayer(i.current), c({ type: "canplay" });
+      }).catch((s) => {
+        console.error(s);
+      }), () => {
+        e.current && e.current.destroy();
+      };
+  }, []), /* @__PURE__ */ d(
+    "iframe",
+    {
+      className: t,
+      width: "100%",
+      height: "100%",
+      ref: i,
+      src: `${f(o)}&js_api=1`,
+      allow: "autoplay; fullscreen; accelerometer; gyroscope; picture-in-picture; encrypted-media",
+      "data-testid": "embed-iframe",
+      frameBorder: "0",
+      scrolling: "no",
+      title: "player",
+      allowFullScreen: !0
+    }
+  );
+};
+export {
+  h as default
+};

package/dist/index-DY6LmZAq.js

@@ -0,0 +1,60 @@
+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-DqNJQSqH.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] : "";
+}, w = async () => await new Promise((t) => {
+  if (window.YT)
+    t(window.YT);
+  else {
+    const n = "https://www.youtube.com/iframe_api", r = Array.from(document.querySelectorAll("script")).find((e) => e.src === n) ?? document.createElement("script");
+    if (r.src) {
+      const e = setInterval(() => {
+        window.YT?.PlayerState && (t(window.YT), clearInterval(e));
+      }, 300);
+      setTimeout(() => {
+        clearInterval(e);
+      }, 6e4);
+    } else {
+      r.src = n;
+      const e = document.getElementsByTagName("script")[0];
+      e.parentNode && e.parentNode.insertBefore(r, e), window.onYouTubeIframeAPIReady = () => {
+        t(window.YT);
+      };
+    }
+  }
+}), Y = ({
+  className: t,
+  ref: n,
+  url: o
+}) => {
+  const r = s(null), e = s(null), i = f(), u = (a) => {
+    e.current = a.target, i({
+      type: "canplay"
+    });
+  }, d = () => {
+    e.current?.playVideo && e.current.playVideo();
+  };
+  return p(n, () => ({
+    play: d
+  })), y(() => {
+    if (!r.current) return;
+    const a = m(o);
+    w().then((c) => {
+      new c.Player(r.current, {
+        width: "100%",
+        height: "100%",
+        videoId: a,
+        events: {
+          onReady: u
+        }
+      });
+    }).catch((c) => {
+      console.error(c);
+    });
+  }, []), /* @__PURE__ */ l("div", { className: t, ref: r });
+};
+export {
+  Y as default
+};

package/dist/{index-COqINEuJ.js → index-DqNJQSqH.js}

@@ -1,17 +1,17 @@
 import { jsx as s, jsxs as y } from "react/jsx-runtime";
-import { createContext as w, useContext as h, useReducer as x, lazy as p, useMemo as C, useRef as $ } from "react";
-import d from "classix";
+import { createContext as d, useContext as v, useReducer as $, lazy as p, useMemo as C, useRef as k } from "react";
+import m from "classix";
 const n = {
   show: "show",
   hide: "hide",
   showButton: "showButton",
   hideButton: "hideButton",
   canplay: "canplay"
-}, v = {
+}, P = {
   showButton: !1,
   showPreview: !0,
   canplay: !1
-}, k = (e, t) => {
+}, N = (e, t) => {
   const { type: r } = t;
   switch (r) {
     case n.show:
@@ -27,58 +27,58 @@ const n = {
     default:
       return e;
   }
-}, P = w(v), m = w(() => {
-}), _ = ({ children: e }) => {
-  const [t, r] = x(k, v);
-  return /* @__PURE__ */ s(P.Provider, { value: t, children: /* @__PURE__ */ s(m.Provider, { value: r, children: e }) });
-}, N = () => {
-  const e = h(P);
+}, b = d(P), f = d(() => {
+}), E = ({ children: e }) => {
+  const [t, r] = $(N, P);
+  return /* @__PURE__ */ s(b.Provider, { value: t, children: /* @__PURE__ */ s(f.Provider, { value: r, children: e }) });
+}, R = () => {
+  const e = v(b);
   if (e === void 0)
     throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
   return e;
-}, E = () => {
-  const e = h(m);
+}, S = () => {
+  const e = v(f);
   if (e === void 0)
     throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
   return e;
-}, R = "button-play", S = {
-  parent: R
-}, T = ({
+}, T = "idmrp-button-play", g = {
+  parent: T
+}, D = ({
   className: e,
   onClick: t
 }) => /* @__PURE__ */ s(
   "button",
   {
-    className: d(S.parent, e),
+    className: m(g.parent, e),
     type: "button",
     onClick: t
   }
-), c = "player-preview", u = {
+), c = "idmrp-player-preview", u = {
   parent: c,
   wrapper: `${c}__wrapper`,
   button: `${c}__button`,
   preview: `${c}__preview`,
   player: `${c}__player`
-}, g = ({
+}, V = ({
   className: e,
   preview: t,
   onPlay: r,
   children: a
 }) => {
-  const { showButton: i, showPreview: l, canplay: b } = N(), f = E(), B = () => {
-    b && (f({
+  const { showButton: i, showPreview: l, canplay: B } = R(), x = S(), _ = () => {
+    B && (x({
       type: n.hide
     }), r && r());
   };
-  return /* @__PURE__ */ y("div", { className: d(u.parent, e), children: [
+  return /* @__PURE__ */ y("div", { className: m(u.parent, e), children: [
     (i || t && l) && /* @__PURE__ */ y(
       "div",
       {
         className: u.wrapper,
-        onClick: B,
+        onClick: _,
         children: [
           i && /* @__PURE__ */ s(
-            T,
+            D,
             {
               className: u.button
             }
@@ -94,44 +94,46 @@ const n = {
   rutube: "rutube",
   video: "video",
   vk: "vk"
-}, D = {
-  [o.youtube]: p(async () => await import("./index-C-0pNFYJ.js")),
-  [o.rutube]: p(async () => await import("./index-3eLEuMe8.js")),
-  [o.video]: p(async () => await import("./index-CSgcS1fk.js")),
-  [o.vk]: p(async () => await import("./index-0qY1-A4q.js"))
-}, V = (e) => {
+}, j = {
+  [o.youtube]: p(async () => await import("./index-DY6LmZAq.js")),
+  [o.rutube]: p(async () => await import("./index-CEYCN7W2.js")),
+  [o.video]: p(async () => await import("./index-B4aQ3fZe.js")),
+  [o.vk]: p(async () => await import("./index-CtwCLqA8.js"))
+}, A = (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;
-}, j = "player", A = {
-  parent: j
+}, w = "idmrp-player", h = {
+  parent: w,
+  player: `${w}__player`
 }, L = ({
   url: e,
   preview: t
 }) => {
   const r = C(() => {
-    const l = V(e);
-    return D[l];
-  }, [e]), a = $(null), i = () => {
+    const l = A(e);
+    return j[l];
+  }, [e]), a = k(null), i = () => {
     a.current && a.current.play();
   };
   return /* @__PURE__ */ s(
-    g,
+    V,
     {
-      className: A.parent,
+      className: h.parent,
       preview: t,
       onPlay: i,
       children: /* @__PURE__ */ s(
         r,
         {
+          className: h.player,
           ref: a,
           url: e
         }
       )
     }
   );
-}, I = (e) => /* @__PURE__ */ s(_, { children: /* @__PURE__ */ s(L, { ...e }) });
+}, I = (e) => /* @__PURE__ */ s(E, { children: /* @__PURE__ */ s(L, { ...e }) });
 export {
   n as P,
   I as a,
-  E as u
+  S as u
 };

package/dist/react-player.css

@@ -1 +1 @@
-.button-play{--button-play-size: 3.375rem;position:relative;width:var(--button-play-size);min-width:var(--button-play-size);height:var(--button-play-size);background-color:var(--color-green-200);border-radius:50%}.button-play:before{content:"";position:absolute;top:50%;left:58%;border:.3125rem solid transparent;border-left:.5625rem solid var(--color-beige-100);transform:translate(-50%,-50%)}.player-preview{position:relative;width:100%;height:100%;object-fit:cover}.player-preview .player-preview__wrapper{position:absolute;inset:0;cursor:pointer}.player-preview .player-preview__button{z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%)}.player-preview .player-preview__preview{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.player-preview .player-preview__player{width:100%;height:100%}.player{position:relative;margin:50px;width:300px;height:300px}.player-youtube,.player-rutube{display:block;width:100%;height:100%}.player-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
+.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}

package/dist/react-player.d.ts

@@ -7,7 +7,9 @@ declare type FCClass<P = object> = React.FC<P & React.PropsWithChildren & {
 export declare const Player: FCClass<TPlayer>;
 
 declare type TPlayer = {
+    /** Превью для видео */
     preview?: TPlayerPreview['preview'];
+    /** Ссылка на видео */
     url: TPlayerBase['url'];
 };
 
@@ -22,7 +24,9 @@ declare type TPlayerBaseMethods = {
 
 declare type TPlayerPreview = {
     preview?: {
+        /** Адрес изображения */
         src: string;
+        /** Альт изображения */
         alt: string;
     };
     onPlay?: () => void;

package/dist/react-player.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barabel324/react-player",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "main": "./dist/react-player.js",
   "exports": {
@@ -19,7 +19,6 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "classix": "^2.2.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },

package/dist/index-0qY1-A4q.js

@@ -1,74 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as s, useImperativeHandle as d, useEffect as l } from "react";
-import { u } from "./index-COqINEuJ.js";
-const p = async () => new Promise((o, i) => {
-  if (window.VK?.VideoPlayer) {
-    o(window.VK);
-    return;
-  }
-  const r = "https://vk.com/js/api/videoplayer.js";
-  if (Array.from(document.scripts).find(
-    (e) => e.src === r
-  )) {
-    const e = setInterval(() => {
-      window.VK?.VideoPlayer && (clearInterval(e), o(window.VK));
-    }, 300);
-    setTimeout(() => {
-      clearInterval(e), i(new Error("VK Video API timeout"));
-    }, 15e3);
-    return;
-  }
-  const t = document.createElement("script");
-  t.src = r, t.async = !0, t.onload = () => {
-    const e = () => {
-      window.VK?.VideoPlayer ? o(window.VK) : setTimeout(e, 300);
-    };
-    e();
-  }, t.onerror = () => {
-    i(new Error("Failed to load VK Video API"));
-  };
-  const c = document.getElementsByTagName("script")[0];
-  c.parentNode?.insertBefore(t, c);
-}), m = (o) => {
-  const i = /^https:\/\/vkvideo\.ru\/video(-\d+)_(\d+)$/, r = o.match(i);
-  if (!r)
-    throw new Error(`Некорректный формат ссылки ${o}`);
-  const n = r[1], t = r[2];
-  return `https://vkvideo.ru/video_ext.php?oid=${n}&id=${t}`;
-}, V = ({
-  ref: o,
-  url: i
-}) => {
-  const r = s(null), n = s(null), t = u(), c = () => {
-    n.current && n.current.play?.();
-  };
-  return d(o, () => ({
-    play: c
-  })), l(() => {
-    if (r.current)
-      return p().then((e) => {
-        n.current = e.VideoPlayer(r.current), t({ type: "canplay" });
-      }).catch((e) => {
-        console.error(e);
-      }), () => {
-        n.current && n.current.destroy();
-      };
-  }, []), /* @__PURE__ */ a(
-    "iframe",
-    {
-      width: "100%",
-      height: "100%",
-      ref: r,
-      src: `${m(i)}&js_api=1`,
-      allow: "autoplay; fullscreen; accelerometer; gyroscope; picture-in-picture; encrypted-media",
-      "data-testid": "embed-iframe",
-      frameBorder: "0",
-      scrolling: "no",
-      title: "player",
-      allowFullScreen: !0
-    }
-  );
-};
-export {
-  V as default
-};

package/dist/index-3eLEuMe8.js

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

package/dist/index-C-0pNFYJ.js

@@ -1,61 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useRef as s, useImperativeHandle as d, useEffect as p } from "react";
-import { u as y } from "./index-COqINEuJ.js";
-const m = (r) => {
-  const a = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/, t = r.match(a);
-  return t && t[7].length === 11 ? t[7] : "";
-}, f = async () => await new Promise((r) => {
-  if (window.YT)
-    r(window.YT);
-  else {
-    const a = "https://www.youtube.com/iframe_api", n = Array.from(document.querySelectorAll("script")).find((e) => e.src === a) ?? document.createElement("script");
-    if (n.src) {
-      const e = setInterval(() => {
-        window.YT?.PlayerState && (r(window.YT), clearInterval(e));
-      }, 300);
-      setTimeout(() => {
-        clearInterval(e);
-      }, 6e4);
-    } else {
-      n.src = a;
-      const e = document.getElementsByTagName("script")[0];
-      e.parentNode && e.parentNode.insertBefore(n, e), window.onYouTubeIframeAPIReady = () => {
-        r(window.YT);
-      };
-    }
-  }
-}), w = "player-youtube", h = {
-  parent: w
-}, b = ({
-  ref: r,
-  url: a
-}) => {
-  const t = s(null), n = s(null), e = y(), i = (o) => {
-    n.current = o.target, e({
-      type: "canplay"
-    });
-  }, u = () => {
-    n.current?.playVideo && n.current.playVideo();
-  };
-  return d(r, () => ({
-    play: u
-  })), p(() => {
-    if (!t.current) return;
-    const o = m(a);
-    f().then((c) => {
-      new c.Player(t.current, {
-        width: "100%",
-        height: "100%",
-        videoId: o,
-        events: {
-          onReady: i
-        }
-      });
-    }).catch((c) => {
-      console.error(c);
-    });
-  }, []), /* @__PURE__ */ l("div", { className: h.parent, ref: t });
-};
-export {
-  b as default
-};

package/dist/index-CSgcS1fk.js

@@ -1,47 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { u as y, P as t } from "./index-COqINEuJ.js";
-import d from "classix";
-import { useRef as m, useImperativeHandle as P } from "react";
-const f = "player-video", h = {
-  parent: f
-}, A = ({
-  className: r,
-  ref: n,
-  url: s
-}) => {
-  const e = m(null), a = y(), o = () => {
-    a({
-      type: t.hideButton
-    });
-  }, l = () => {
-    a({
-      type: t.showButton
-    });
-  }, c = () => {
-    a({
-      type: t.canplay
-    });
-  }, p = () => {
-    e.current && (o(), e.current.play().catch((u) => {
-      console.error(u);
-    }));
-  };
-  return P(n, () => ({
-    play: p
-  })), /* @__PURE__ */ i(
-    "video",
-    {
-      className: d(h.parent, r),
-      ref: e,
-      controls: !0,
-      src: s,
-      preload: "auto",
-      onPlay: o,
-      onPause: l,
-      onCanPlay: c
-    }
-  );
-};
-export {
-  A as default
-};