@mebius-io/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mebius
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# @mebius-io/react
+
+React hooks untuk Mebius Web SDK — lapisan tipis di atas
+[`@mebius-io/web`](../web). Konsep inti (auth, mode, events, error code) ada di
+README `@mebius-io/web`; di sini fokus API hooks.
+
+[![npm version](https://img.shields.io/badge/npm-%40mebius%2Freact-blue)](https://www.npmjs.com/package/@mebius-io/react)
+[![license](https://img.shields.io/badge/license-MIT-green)](../../LICENSE)
+
+## Install
+
+Repo ini **private** (belum dipublish ke npm). Cara yang terbukti jalan adalah
+**tarball**. Karena `@mebius-io/react` bergantung ke `@mebius-io/web`, install **kedua
+tarball dalam satu perintah** supaya dependency `@mebius-io/web` terpenuhi dari
+tarball lokal (kalau tidak, npm akan mencoba mengambilnya dari registry dan
+gagal):
+
+```bash
+# Maintainer (di repo SDK):
+pnpm pack:all   # -> mebius-web-0.1.0.tgz, mebius-react-0.1.0.tgz (di root repo)
+
+# Consumer (kedua tarball sekaligus + react):
+npm i ./mebius-web-0.1.0.tgz ./mebius-react-0.1.0.tgz react
+```
+
+Setelah dipublish ke registry npm (opsi masa depan):
+
+```bash
+npm i @mebius-io/react @mebius-io/web react
+```
+
+> Detail distribusi private (kenapa git install tidak dipakai, perilaku
+> `workspace:*` saat pack) ada di README [`@mebius-io/web`](../web#distribusi-private-github--tarball).
+
+## Hooks
+
+| Hook | Return |
+|---|---|
+| `useMebius({ appId, gateway, token })` | `{ client, status, error }` |
+| `useBroadcaster(client, options?)` | `{ broadcaster, previewRef, start, stop, switchCamera, setMicEnabled, setCameraEnabled, isLive }` |
+| `usePlayer(client, { mode })` | `{ player, videoRef, play, stop, setVolume, isPlaying }` |
+
+## Broadcast
+
+```tsx
+import { useMebius, useBroadcaster } from "@mebius-io/react";
+
+function Broadcast({ token }: { token: string }) {
+  const { client } = useMebius({ appId: "app_123", gateway: "https://gateway.mebius.io", token });
+  const { previewRef, start, stop, switchCamera, setMicEnabled, isLive } = useBroadcaster(client);
+  return (
+    <div>
+      <video ref={previewRef} autoPlay muted playsInline />
+      <button onClick={() => (isLive ? stop() : start("my-stream"))}>
+        {isLive ? "Stop" : "Go live"}
+      </button>
+      <button onClick={switchCamera}>Flip</button>
+      <button onClick={() => setMicEnabled(false)}>Mute</button>
+    </div>
+  );
+}
+```
+
+## Watch
+
+```tsx
+import { useMebius, usePlayer } from "@mebius-io/react";
+
+function Watch({ token, streamId }: { token: string; streamId: string }) {
+  const { client } = useMebius({ appId: "app_123", gateway: "https://gateway.mebius.io", token });
+  const { videoRef, play, setVolume } = usePlayer(client, { mode: "low-latency" });
+  return (
+    <div>
+      <video ref={videoRef} autoPlay playsInline />
+      <button onClick={() => play(streamId)}>Play</button>
+      <input type="range" min={0} max={1} step={0.1} onChange={(e) => setVolume(+e.target.value)} />
+    </div>
+  );
+}
+```
+
+> Next.js: render komponen ini sebagai client component (`"use client"`) dan
+> import dinamis dengan `{ ssr: false }` karena SDK butuh WebRTC browser.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useBroadcaster: () => useBroadcaster,
+  useMebius: () => useMebius,
+  usePlayer: () => usePlayer
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_web = require("@mebius-io/web");
+function useMebius({ appId, gateway, token }) {
+  const [client, setClient] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!token) return;
+    import_web.Mebius.init({ appId, gateway });
+    setStatus("connecting");
+    const c = import_web.Mebius.connect({ token });
+    const offConnected = c.on("connected", () => setStatus("connected"));
+    const offError = c.on("error", (e) => {
+      setError(e);
+      setStatus("error");
+    });
+    setClient(c);
+    return () => {
+      offConnected();
+      offError();
+      c.disconnect();
+      setClient(null);
+      setStatus("idle");
+    };
+  }, [appId, gateway, token]);
+  return { client, status, error };
+}
+function useBroadcaster(client, options = {}) {
+  const previewRef = (0, import_react.useRef)(null);
+  const [broadcaster, setBroadcaster] = (0, import_react.useState)(null);
+  const [isLive, setIsLive] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!client) return;
+    const b = client.createBroadcaster(options);
+    const offStarted = b.on("started", () => setIsLive(true));
+    const offStopped = b.on("stopped", () => setIsLive(false));
+    setBroadcaster(b);
+    return () => {
+      offStarted();
+      offStopped();
+      void b.stop();
+      setBroadcaster(null);
+    };
+  }, [client]);
+  const start = (0, import_react.useCallback)(
+    async (streamId) => {
+      if (!broadcaster) return;
+      await broadcaster.start(streamId);
+      if (previewRef.current) broadcaster.attachPreview(previewRef.current);
+    },
+    [broadcaster]
+  );
+  const stop = (0, import_react.useCallback)(async () => broadcaster?.stop(), [broadcaster]);
+  const switchCamera = (0, import_react.useCallback)(async () => broadcaster?.switchCamera(), [broadcaster]);
+  const setMicEnabled = (0, import_react.useCallback)((e) => broadcaster?.setMicEnabled(e), [broadcaster]);
+  const setCameraEnabled = (0, import_react.useCallback)(
+    (e) => broadcaster?.setCameraEnabled(e),
+    [broadcaster]
+  );
+  return {
+    broadcaster,
+    previewRef,
+    start,
+    stop,
+    switchCamera,
+    setMicEnabled,
+    setCameraEnabled,
+    isLive
+  };
+}
+function usePlayer(client, options) {
+  const videoRef = (0, import_react.useRef)(null);
+  const [player, setPlayer] = (0, import_react.useState)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!client) return;
+    const p = client.createPlayer(options);
+    const offPlaying = p.on("playing", () => setIsPlaying(true));
+    const offEnded = p.on("ended", () => setIsPlaying(false));
+    setPlayer(p);
+    return () => {
+      offPlaying();
+      offEnded();
+      void p.stop();
+      setPlayer(null);
+    };
+  }, [client, options.mode]);
+  const play = (0, import_react.useCallback)(
+    async (streamId) => {
+      if (player && videoRef.current) await player.play(streamId, videoRef.current);
+    },
+    [player]
+  );
+  const stop = (0, import_react.useCallback)(async () => player?.stop(), [player]);
+  const setVolume = (0, import_react.useCallback)((v) => player?.setVolume(v), [player]);
+  return { player, videoRef, play, stop, setVolume, isPlaying };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBroadcaster,
+  useMebius,
+  usePlayer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @mebius-io/react — React hooks for the Mebius Web SDK.\n *\n * Thin wrappers over @mebius-io/web: they manage React lifecycle (effects, refs,\n * state) but contain no streaming logic of their own.\n */\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  Mebius,\n  type BroadcasterOptions,\n  type MebiusClient,\n  type MebiusBroadcaster,\n  type MebiusPlayer,\n  type PlayerOptions,\n  type MebiusError,\n} from \"@mebius-io/web\";\n\nexport type ConnectionStatus = \"idle\" | \"connecting\" | \"connected\" | \"error\";\n\nexport interface UseMebiusOptions {\n  appId: string;\n  gateway: string;\n  token: string;\n}\n\nexport interface UseMebiusResult {\n  client: MebiusClient | null;\n  status: ConnectionStatus;\n  error: MebiusError | null;\n}\n\n/** Init + connect, tied to component lifecycle. Reconnects if token changes. */\nexport function useMebius({ appId, gateway, token }: UseMebiusOptions): UseMebiusResult {\n  const [client, setClient] = useState<MebiusClient | null>(null);\n  const [status, setStatus] = useState<ConnectionStatus>(\"idle\");\n  const [error, setError] = useState<MebiusError | null>(null);\n\n  useEffect(() => {\n    if (!token) return;\n    Mebius.init({ appId, gateway });\n    setStatus(\"connecting\");\n    const c = Mebius.connect({ token });\n    const offConnected = c.on(\"connected\", () => setStatus(\"connected\"));\n    const offError = c.on(\"error\", (e) => {\n      setError(e);\n      setStatus(\"error\");\n    });\n    setClient(c);\n    return () => {\n      offConnected();\n      offError();\n      c.disconnect();\n      setClient(null);\n      setStatus(\"idle\");\n    };\n  }, [appId, gateway, token]);\n\n  return { client, status, error };\n}\n\nexport interface UseBroadcasterResult {\n  broadcaster: MebiusBroadcaster | null;\n  previewRef: React.RefObject<HTMLVideoElement>;\n  start: (streamId: string) => Promise<void>;\n  stop: () => Promise<void>;\n  switchCamera: () => Promise<void>;\n  setMicEnabled: (enabled: boolean) => void;\n  setCameraEnabled: (enabled: boolean) => void;\n  isLive: boolean;\n}\n\n/** Create + drive a broadcaster. */\nexport function useBroadcaster(\n  client: MebiusClient | null,\n  options: BroadcasterOptions = {},\n): UseBroadcasterResult {\n  const previewRef = useRef<HTMLVideoElement>(null);\n  const [broadcaster, setBroadcaster] = useState<MebiusBroadcaster | null>(null);\n  const [isLive, setIsLive] = useState(false);\n\n  useEffect(() => {\n    if (!client) return;\n    const b = client.createBroadcaster(options);\n    const offStarted = b.on(\"started\", () => setIsLive(true));\n    const offStopped = b.on(\"stopped\", () => setIsLive(false));\n    setBroadcaster(b);\n    return () => {\n      offStarted();\n      offStopped();\n      void b.stop();\n      setBroadcaster(null);\n    };\n  }, [client]);\n\n  const start = useCallback(\n    async (streamId: string) => {\n      if (!broadcaster) return;\n      await broadcaster.start(streamId);\n      if (previewRef.current) broadcaster.attachPreview(previewRef.current);\n    },\n    [broadcaster],\n  );\n  const stop = useCallback(async () => broadcaster?.stop(), [broadcaster]);\n  const switchCamera = useCallback(async () => broadcaster?.switchCamera(), [broadcaster]);\n  const setMicEnabled = useCallback((e: boolean) => broadcaster?.setMicEnabled(e), [broadcaster]);\n  const setCameraEnabled = useCallback(\n    (e: boolean) => broadcaster?.setCameraEnabled(e),\n    [broadcaster],\n  );\n\n  return {\n    broadcaster,\n    previewRef,\n    start,\n    stop,\n    switchCamera,\n    setMicEnabled,\n    setCameraEnabled,\n    isLive,\n  };\n}\n\nexport interface UsePlayerResult {\n  player: MebiusPlayer | null;\n  videoRef: React.RefObject<HTMLVideoElement>;\n  play: (streamId: string) => Promise<void>;\n  stop: () => Promise<void>;\n  setVolume: (v: number) => void;\n  isPlaying: boolean;\n}\n\n/** Create + drive a player, rendering into the returned `videoRef`. */\nexport function usePlayer(\n  client: MebiusClient | null,\n  options: PlayerOptions,\n): UsePlayerResult {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [player, setPlayer] = useState<MebiusPlayer | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  useEffect(() => {\n    if (!client) return;\n    const p = client.createPlayer(options);\n    const offPlaying = p.on(\"playing\", () => setIsPlaying(true));\n    const offEnded = p.on(\"ended\", () => setIsPlaying(false));\n    setPlayer(p);\n    return () => {\n      offPlaying();\n      offEnded();\n      void p.stop();\n      setPlayer(null);\n    };\n  }, [client, options.mode]);\n\n  const play = useCallback(\n    async (streamId: string) => {\n      if (player && videoRef.current) await player.play(streamId, videoRef.current);\n    },\n    [player],\n  );\n  const stop = useCallback(async () => player?.stop(), [player]);\n  const setVolume = useCallback((v: number) => player?.setVolume(v), [player]);\n\n  return { player, videoRef, play, stop, setVolume, isPlaying };\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,39 @@
+import { MebiusBroadcaster, MebiusClient, MebiusError, MebiusPlayer, BroadcasterOptions, PlayerOptions } from '@mebius-io/web';
+
+type ConnectionStatus = "idle" | "connecting" | "connected" | "error";
+interface UseMebiusOptions {
+    appId: string;
+    gateway: string;
+    token: string;
+}
+interface UseMebiusResult {
+    client: MebiusClient | null;
+    status: ConnectionStatus;
+    error: MebiusError | null;
+}
+/** Init + connect, tied to component lifecycle. Reconnects if token changes. */
+declare function useMebius({ appId, gateway, token }: UseMebiusOptions): UseMebiusResult;
+interface UseBroadcasterResult {
+    broadcaster: MebiusBroadcaster | null;
+    previewRef: React.RefObject<HTMLVideoElement>;
+    start: (streamId: string) => Promise<void>;
+    stop: () => Promise<void>;
+    switchCamera: () => Promise<void>;
+    setMicEnabled: (enabled: boolean) => void;
+    setCameraEnabled: (enabled: boolean) => void;
+    isLive: boolean;
+}
+/** Create + drive a broadcaster. */
+declare function useBroadcaster(client: MebiusClient | null, options?: BroadcasterOptions): UseBroadcasterResult;
+interface UsePlayerResult {
+    player: MebiusPlayer | null;
+    videoRef: React.RefObject<HTMLVideoElement>;
+    play: (streamId: string) => Promise<void>;
+    stop: () => Promise<void>;
+    setVolume: (v: number) => void;
+    isPlaying: boolean;
+}
+/** Create + drive a player, rendering into the returned `videoRef`. */
+declare function usePlayer(client: MebiusClient | null, options: PlayerOptions): UsePlayerResult;
+
+export { type ConnectionStatus, type UseBroadcasterResult, type UseMebiusOptions, type UseMebiusResult, type UsePlayerResult, useBroadcaster, useMebius, usePlayer };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { MebiusBroadcaster, MebiusClient, MebiusError, MebiusPlayer, BroadcasterOptions, PlayerOptions } from '@mebius-io/web';
+
+type ConnectionStatus = "idle" | "connecting" | "connected" | "error";
+interface UseMebiusOptions {
+    appId: string;
+    gateway: string;
+    token: string;
+}
+interface UseMebiusResult {
+    client: MebiusClient | null;
+    status: ConnectionStatus;
+    error: MebiusError | null;
+}
+/** Init + connect, tied to component lifecycle. Reconnects if token changes. */
+declare function useMebius({ appId, gateway, token }: UseMebiusOptions): UseMebiusResult;
+interface UseBroadcasterResult {
+    broadcaster: MebiusBroadcaster | null;
+    previewRef: React.RefObject<HTMLVideoElement>;
+    start: (streamId: string) => Promise<void>;
+    stop: () => Promise<void>;
+    switchCamera: () => Promise<void>;
+    setMicEnabled: (enabled: boolean) => void;
+    setCameraEnabled: (enabled: boolean) => void;
+    isLive: boolean;
+}
+/** Create + drive a broadcaster. */
+declare function useBroadcaster(client: MebiusClient | null, options?: BroadcasterOptions): UseBroadcasterResult;
+interface UsePlayerResult {
+    player: MebiusPlayer | null;
+    videoRef: React.RefObject<HTMLVideoElement>;
+    play: (streamId: string) => Promise<void>;
+    stop: () => Promise<void>;
+    setVolume: (v: number) => void;
+    isPlaying: boolean;
+}
+/** Create + drive a player, rendering into the returned `videoRef`. */
+declare function usePlayer(client: MebiusClient | null, options: PlayerOptions): UsePlayerResult;
+
+export { type ConnectionStatus, type UseBroadcasterResult, type UseMebiusOptions, type UseMebiusResult, type UsePlayerResult, useBroadcaster, useMebius, usePlayer };

package/dist/index.js

@@ -0,0 +1,106 @@
+// src/index.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Mebius
+} from "@mebius-io/web";
+function useMebius({ appId, gateway, token }) {
+  const [client, setClient] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!token) return;
+    Mebius.init({ appId, gateway });
+    setStatus("connecting");
+    const c = Mebius.connect({ token });
+    const offConnected = c.on("connected", () => setStatus("connected"));
+    const offError = c.on("error", (e) => {
+      setError(e);
+      setStatus("error");
+    });
+    setClient(c);
+    return () => {
+      offConnected();
+      offError();
+      c.disconnect();
+      setClient(null);
+      setStatus("idle");
+    };
+  }, [appId, gateway, token]);
+  return { client, status, error };
+}
+function useBroadcaster(client, options = {}) {
+  const previewRef = useRef(null);
+  const [broadcaster, setBroadcaster] = useState(null);
+  const [isLive, setIsLive] = useState(false);
+  useEffect(() => {
+    if (!client) return;
+    const b = client.createBroadcaster(options);
+    const offStarted = b.on("started", () => setIsLive(true));
+    const offStopped = b.on("stopped", () => setIsLive(false));
+    setBroadcaster(b);
+    return () => {
+      offStarted();
+      offStopped();
+      void b.stop();
+      setBroadcaster(null);
+    };
+  }, [client]);
+  const start = useCallback(
+    async (streamId) => {
+      if (!broadcaster) return;
+      await broadcaster.start(streamId);
+      if (previewRef.current) broadcaster.attachPreview(previewRef.current);
+    },
+    [broadcaster]
+  );
+  const stop = useCallback(async () => broadcaster?.stop(), [broadcaster]);
+  const switchCamera = useCallback(async () => broadcaster?.switchCamera(), [broadcaster]);
+  const setMicEnabled = useCallback((e) => broadcaster?.setMicEnabled(e), [broadcaster]);
+  const setCameraEnabled = useCallback(
+    (e) => broadcaster?.setCameraEnabled(e),
+    [broadcaster]
+  );
+  return {
+    broadcaster,
+    previewRef,
+    start,
+    stop,
+    switchCamera,
+    setMicEnabled,
+    setCameraEnabled,
+    isLive
+  };
+}
+function usePlayer(client, options) {
+  const videoRef = useRef(null);
+  const [player, setPlayer] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  useEffect(() => {
+    if (!client) return;
+    const p = client.createPlayer(options);
+    const offPlaying = p.on("playing", () => setIsPlaying(true));
+    const offEnded = p.on("ended", () => setIsPlaying(false));
+    setPlayer(p);
+    return () => {
+      offPlaying();
+      offEnded();
+      void p.stop();
+      setPlayer(null);
+    };
+  }, [client, options.mode]);
+  const play = useCallback(
+    async (streamId) => {
+      if (player && videoRef.current) await player.play(streamId, videoRef.current);
+    },
+    [player]
+  );
+  const stop = useCallback(async () => player?.stop(), [player]);
+  const setVolume = useCallback((v) => player?.setVolume(v), [player]);
+  return { player, videoRef, play, stop, setVolume, isPlaying };
+}
+export {
+  useBroadcaster,
+  useMebius,
+  usePlayer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @mebius-io/react — React hooks for the Mebius Web SDK.\n *\n * Thin wrappers over @mebius-io/web: they manage React lifecycle (effects, refs,\n * state) but contain no streaming logic of their own.\n */\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  Mebius,\n  type BroadcasterOptions,\n  type MebiusClient,\n  type MebiusBroadcaster,\n  type MebiusPlayer,\n  type PlayerOptions,\n  type MebiusError,\n} from \"@mebius-io/web\";\n\nexport type ConnectionStatus = \"idle\" | \"connecting\" | \"connected\" | \"error\";\n\nexport interface UseMebiusOptions {\n  appId: string;\n  gateway: string;\n  token: string;\n}\n\nexport interface UseMebiusResult {\n  client: MebiusClient | null;\n  status: ConnectionStatus;\n  error: MebiusError | null;\n}\n\n/** Init + connect, tied to component lifecycle. Reconnects if token changes. */\nexport function useMebius({ appId, gateway, token }: UseMebiusOptions): UseMebiusResult {\n  const [client, setClient] = useState<MebiusClient | null>(null);\n  const [status, setStatus] = useState<ConnectionStatus>(\"idle\");\n  const [error, setError] = useState<MebiusError | null>(null);\n\n  useEffect(() => {\n    if (!token) return;\n    Mebius.init({ appId, gateway });\n    setStatus(\"connecting\");\n    const c = Mebius.connect({ token });\n    const offConnected = c.on(\"connected\", () => setStatus(\"connected\"));\n    const offError = c.on(\"error\", (e) => {\n      setError(e);\n      setStatus(\"error\");\n    });\n    setClient(c);\n    return () => {\n      offConnected();\n      offError();\n      c.disconnect();\n      setClient(null);\n      setStatus(\"idle\");\n    };\n  }, [appId, gateway, token]);\n\n  return { client, status, error };\n}\n\nexport interface UseBroadcasterResult {\n  broadcaster: MebiusBroadcaster | null;\n  previewRef: React.RefObject<HTMLVideoElement>;\n  start: (streamId: string) => Promise<void>;\n  stop: () => Promise<void>;\n  switchCamera: () => Promise<void>;\n  setMicEnabled: (enabled: boolean) => void;\n  setCameraEnabled: (enabled: boolean) => void;\n  isLive: boolean;\n}\n\n/** Create + drive a broadcaster. */\nexport function useBroadcaster(\n  client: MebiusClient | null,\n  options: BroadcasterOptions = {},\n): UseBroadcasterResult {\n  const previewRef = useRef<HTMLVideoElement>(null);\n  const [broadcaster, setBroadcaster] = useState<MebiusBroadcaster | null>(null);\n  const [isLive, setIsLive] = useState(false);\n\n  useEffect(() => {\n    if (!client) return;\n    const b = client.createBroadcaster(options);\n    const offStarted = b.on(\"started\", () => setIsLive(true));\n    const offStopped = b.on(\"stopped\", () => setIsLive(false));\n    setBroadcaster(b);\n    return () => {\n      offStarted();\n      offStopped();\n      void b.stop();\n      setBroadcaster(null);\n    };\n  }, [client]);\n\n  const start = useCallback(\n    async (streamId: string) => {\n      if (!broadcaster) return;\n      await broadcaster.start(streamId);\n      if (previewRef.current) broadcaster.attachPreview(previewRef.current);\n    },\n    [broadcaster],\n  );\n  const stop = useCallback(async () => broadcaster?.stop(), [broadcaster]);\n  const switchCamera = useCallback(async () => broadcaster?.switchCamera(), [broadcaster]);\n  const setMicEnabled = useCallback((e: boolean) => broadcaster?.setMicEnabled(e), [broadcaster]);\n  const setCameraEnabled = useCallback(\n    (e: boolean) => broadcaster?.setCameraEnabled(e),\n    [broadcaster],\n  );\n\n  return {\n    broadcaster,\n    previewRef,\n    start,\n    stop,\n    switchCamera,\n    setMicEnabled,\n    setCameraEnabled,\n    isLive,\n  };\n}\n\nexport interface UsePlayerResult {\n  player: MebiusPlayer | null;\n  videoRef: React.RefObject<HTMLVideoElement>;\n  play: (streamId: string) => Promise<void>;\n  stop: () => Promise<void>;\n  setVolume: (v: number) => void;\n  isPlaying: boolean;\n}\n\n/** Create + drive a player, rendering into the returned `videoRef`. */\nexport function usePlayer(\n  client: MebiusClient | null,\n  options: PlayerOptions,\n): UsePlayerResult {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [player, setPlayer] = useState<MebiusPlayer | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  useEffect(() => {\n    if (!client) return;\n    const p = client.createPlayer(options);\n    const offPlaying = p.on(\"playing\", () => setIsPlaying(true));\n    const offEnded = p.on(\"ended\", () => setIsPlaying(false));\n    setPlayer(p);\n    return () => {\n      offPlaying();\n      offEnded();\n      void p.stop();\n      setPlayer(null);\n    };\n  }, [client, options.mode]);\n\n  const play = useCallback(\n    async (streamId: string) => {\n      if (player && videoRef.current) await player.play(streamId, videoRef.current);\n    },\n    [player],\n  );\n  const stop = useCallback(async () => player?.stop(), [player]);\n  const setVolume = useCallback((v: number) => player?.setVolume(v), [player]);\n\n  return { player, videoRef, play, stop, setVolume, isPlaying };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mebius-io/react",
+  "version": "0.1.0",
+  "description": "React hooks for the Mebius Web SDK — a thin layer over @mebius-io/web.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/russimobiledroidx/mebius-web-sdk.git",
+    "directory": "packages/react"
+  },
+  "dependencies": {
+    "@mebius-io/web": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "mebius",
+    "react",
+    "live",
+    "streaming",
+    "hooks"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src"
+  }
+}