@barabel324/react-player 0.0.0

package/README.md

@@ -0,0 +1,69 @@
+# 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...
+    },
+  },
+])
+```

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

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

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

@@ -0,0 +1,61 @@
+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-COqINEuJ.js

@@ -0,0 +1,137 @@
+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";
+const n = {
+  show: "show",
+  hide: "hide",
+  showButton: "showButton",
+  hideButton: "hideButton",
+  canplay: "canplay"
+}, v = {
+  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;
+  }
+}, 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);
+  if (e === void 0)
+    throw new Error("usePlayerState нужно использовать внутри PlayerProvider");
+  return e;
+}, E = () => {
+  const e = h(m);
+  if (e === void 0)
+    throw new Error("usePlayerDispatch нужно использовать внутри PlayerProvider");
+  return e;
+}, R = "button-play", S = {
+  parent: R
+}, T = ({
+  className: e,
+  onClick: t
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    className: d(S.parent, e),
+    type: "button",
+    onClick: t
+  }
+), c = "player-preview", u = {
+  parent: c,
+  wrapper: `${c}__wrapper`,
+  button: `${c}__button`,
+  preview: `${c}__preview`,
+  player: `${c}__player`
+}, g = ({
+  className: e,
+  preview: t,
+  onPlay: r,
+  children: a
+}) => {
+  const { showButton: i, showPreview: l, canplay: b } = N(), f = E(), B = () => {
+    b && (f({
+      type: n.hide
+    }), r && r());
+  };
+  return /* @__PURE__ */ y("div", { className: d(u.parent, e), children: [
+    (i || t && l) && /* @__PURE__ */ y(
+      "div",
+      {
+        className: u.wrapper,
+        onClick: B,
+        children: [
+          i && /* @__PURE__ */ s(
+            T,
+            {
+              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-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) => {
+  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
+}, L = ({
+  url: e,
+  preview: t
+}) => {
+  const r = C(() => {
+    const l = V(e);
+    return D[l];
+  }, [e]), a = $(null), i = () => {
+    a.current && a.current.play();
+  };
+  return /* @__PURE__ */ s(
+    g,
+    {
+      className: A.parent,
+      preview: t,
+      onPlay: i,
+      children: /* @__PURE__ */ s(
+        r,
+        {
+          ref: a,
+          url: e
+        }
+      )
+    }
+  );
+}, I = (e) => /* @__PURE__ */ s(_, { children: /* @__PURE__ */ s(L, { ...e }) });
+export {
+  n as P,
+  I as a,
+  E as u
+};

package/dist/index-CSgcS1fk.js

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

package/dist/react-player.css

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

package/dist/react-player.d.ts

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+
+declare type FCClass<P = object> = React.FC<P & React.PropsWithChildren & {
+    className?: string;
+}>;
+
+export declare const Player: FCClass<TPlayer>;
+
+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-COqINEuJ.js";
+export {
+  e as Player
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@barabel324/react-player",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/react-player.js",
+  "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": {
+    "classix": "^2.2.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@microsoft/api-extractor": "^7.52.11",
+    "@types/node": "^24.2.1",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "classix": "^2.2.2",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "sass-embedded": "^1.90.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "unplugin-dts": "^1.0.0-beta.6",
+    "vite": "^7.1.2"
+  }
+}