@idem.agency/react-player 0.0.6

package/README.md

@@ -0,0 +1,30 @@
+# React Player
+
+`React Player` — компонент для воспроизведения видео.
+Он анализирует переданную ссылку и автоматически выбирает подходящий плеер.
+Если ссылка не поддерживается, используется стандартный HTML-тег `<video>`.
+
+## Поддерживаемые плееры
+- **YouTube** — ссылка берётся через кнопку «Поделиться»;
+- **RuTube** — ссылка берётся из атрибута `src` тега `<iframe>`, доступного в коде вставки при выборе «Поделиться»;
+- **VK** — используется прямая ссылка на видео.
+
+## Превью
+Можно указать изображение-превью, которое будет отображаться до загрузки плеера.
+
+## Стили
+Импорт из /dist/react-player.css
+
+## Пропсы
+- preview - ссылка на изображение, необязательно
+- url - ссылка на видео, обязательный
+
+```ts
+type TPlayer = {
+  preview?: {
+    src: string;
+    alt: string;
+  };
+  url: string;
+}
+```

package/dist/index-1pgUfxhC.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-Dnbs5lXl.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-BKNjwSFg.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-Dnbs5lXl.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-Cu3vJcLM.js

@@ -0,0 +1,44 @@
+import { jsx as y } from "react/jsx-runtime";
+import { u as d, P as t } from "./index-Dnbs5lXl.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-Dnbs5lXl.js

@@ -0,0 +1,138 @@
+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
+};

package/dist/index-DsBO-KZz.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { u as p } from "./index-Dnbs5lXl.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/react-player.css

@@ -0,0 +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}

package/dist/react-player.d.ts

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

package/dist/react-player.js

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

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@idem.agency/react-player",
+  "version": "0.0.6",
+  "type": "module",
+  "author": "@barabel324",
+  "main": "./dist/react-player.js",
+  "types": "./dist/react-player.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/react-player.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.2",
+    "@microsoft/api-extractor": "7.55.2",
+    "@types/node": "25.0.9",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.2",
+    "eslint": "9.39.2",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.4.26",
+    "globals": "17.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "sass-embedded": "1.97.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.53.1",
+    "unplugin-dts": "1.0.0-beta.6",
+    "vite": "7.3.1"
+  },
+  "gitHead": "0a18b8cd441ad4a319fc8a3b536246b8c42a84be"
+}