@daydreamlive/react 0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# @daydreamlive/react
+
+React hooks for Daydream WebRTC streaming.
+
+## Install
+
+```bash
+npm install @daydreamlive/react
+```
+
+## Usage
+
+### useBroadcast
+
+```tsx
+import { useBroadcast } from "@daydreamlive/react";
+
+function Broadcaster({ whipUrl }: { whipUrl: string }) {
+  const { state, whepUrl, error, start, stop } = useBroadcast({
+    whipUrl,
+    reconnect: { enabled: true },
+  });
+
+  const handleStart = async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    await start(stream);
+  };
+
+  return (
+    <div>
+      <p>State: {state}</p>
+      <button onClick={handleStart} disabled={state === "live"}>
+        Start
+      </button>
+      <button onClick={stop}>Stop</button>
+    </div>
+  );
+}
+```
+
+### usePlayer
+
+```tsx
+import { usePlayer } from "@daydreamlive/react";
+
+function Player({ whepUrl }: { whepUrl: string }) {
+  const { state, error, videoRef } = usePlayer(whepUrl, {
+    autoPlay: true,
+    reconnect: { enabled: true },
+  });
+
+  return <video ref={videoRef} autoPlay playsInline muted />;
+}
+```
+
+## API
+
+### `useBroadcast(options)`
+
+Returns: `{ state, whepUrl, error, start, stop }`
+
+### `usePlayer(whepUrl, options?)`
+
+Returns: `{ state, error, play, stop, videoRef }`
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,182 @@
+"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, {
+  useBroadcast: () => useBroadcast2,
+  usePlayer: () => usePlayer2
+});
+module.exports = __toCommonJS(index_exports);
+var import_browser = require("@daydreamlive/browser");
+
+// src/useBroadcast.ts
+var import_react = require("react");
+function useBroadcast(options, factory) {
+  const [state, setState] = (0, import_react.useState)("idle");
+  const [whepUrl, setWhepUrl] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const broadcastRef = (0, import_react.useRef)(null);
+  const optionsRef = (0, import_react.useRef)(options);
+  const factoryRef = (0, import_react.useRef)(factory);
+  (0, import_react.useEffect)(() => {
+    optionsRef.current = options;
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    factoryRef.current = factory;
+  }, [factory]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      broadcastRef.current?.stop();
+    };
+  }, []);
+  const start = (0, import_react.useCallback)(async (stream) => {
+    setError(null);
+    if (broadcastRef.current) {
+      await broadcastRef.current.stop();
+    }
+    try {
+      const broadcast = factoryRef.current({
+        stream,
+        ...optionsRef.current
+      });
+      broadcastRef.current = broadcast;
+      broadcast.on("stateChange", (newState) => {
+        setState(newState);
+        if (newState === "live") {
+          setWhepUrl(broadcast.whepUrl);
+        }
+      });
+      broadcast.on("error", (err) => {
+        setError(err);
+      });
+      await broadcast.connect();
+      setState(broadcast.state);
+      setWhepUrl(broadcast.whepUrl);
+    } catch (err) {
+      setError(err);
+      setState("error");
+      throw err;
+    }
+  }, []);
+  const stop = (0, import_react.useCallback)(async () => {
+    await broadcastRef.current?.stop();
+    broadcastRef.current = null;
+    setWhepUrl(null);
+    setState("idle");
+  }, []);
+  return {
+    state,
+    whepUrl,
+    error,
+    start,
+    stop
+  };
+}
+
+// src/usePlayer.ts
+var import_react2 = require("react");
+function usePlayer(whepUrl, options, factory) {
+  const [state, setState] = (0, import_react2.useState)("idle");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const playerRef = (0, import_react2.useRef)(null);
+  const videoRef = (0, import_react2.useRef)(null);
+  const optionsRef = (0, import_react2.useRef)(options);
+  const whepUrlRef = (0, import_react2.useRef)(whepUrl);
+  const factoryRef = (0, import_react2.useRef)(factory);
+  (0, import_react2.useEffect)(() => {
+    optionsRef.current = options;
+  }, [options]);
+  (0, import_react2.useEffect)(() => {
+    factoryRef.current = factory;
+  }, [factory]);
+  (0, import_react2.useEffect)(() => {
+    whepUrlRef.current = whepUrl;
+  }, [whepUrl]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      playerRef.current?.stop();
+    };
+  }, []);
+  const play = (0, import_react2.useCallback)(async () => {
+    const currentWhepUrl = whepUrlRef.current;
+    if (!currentWhepUrl) {
+      return;
+    }
+    setError(null);
+    if (playerRef.current) {
+      await playerRef.current.stop();
+    }
+    try {
+      const player = factoryRef.current(currentWhepUrl, {
+        reconnect: optionsRef.current?.reconnect,
+        onStats: optionsRef.current?.onStats,
+        statsIntervalMs: optionsRef.current?.statsIntervalMs
+      });
+      playerRef.current = player;
+      player.on("stateChange", (newState) => {
+        setState(newState);
+      });
+      player.on("error", (err) => {
+        setError(err);
+      });
+      await player.connect();
+      setState(player.state);
+      if (videoRef.current) {
+        player.attachTo(videoRef.current);
+        if (optionsRef.current?.autoPlay !== false) {
+          try {
+            await videoRef.current.play();
+          } catch {
+          }
+        }
+      }
+    } catch (err) {
+      setError(err);
+      setState("error");
+      throw err;
+    }
+  }, []);
+  const stop = (0, import_react2.useCallback)(async () => {
+    await playerRef.current?.stop();
+    playerRef.current = null;
+    setState("idle");
+  }, []);
+  return {
+    state,
+    error,
+    play,
+    stop,
+    videoRef
+  };
+}
+
+// src/index.ts
+function useBroadcast2(options) {
+  return useBroadcast(options, import_browser.createBroadcast);
+}
+function usePlayer2(whepUrl, options) {
+  return usePlayer(whepUrl, options, import_browser.createPlayer);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBroadcast,
+  usePlayer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useBroadcast.ts","../src/usePlayer.ts"],"sourcesContent":["import { createBroadcast, createPlayer } from \"@daydreamlive/browser\";\nimport {\n  useBroadcast as baseUseBroadcast,\n  type UseBroadcastOptions,\n  type UseBroadcastReturn,\n} from \"./useBroadcast\";\nimport {\n  usePlayer as baseUsePlayer,\n  type UsePlayerOptions,\n  type UsePlayerReturn,\n} from \"./usePlayer\";\n\nexport function useBroadcast(options: UseBroadcastOptions): UseBroadcastReturn {\n  return baseUseBroadcast(options, createBroadcast);\n}\n\nexport function usePlayer(\n  whepUrl: string | null,\n  options?: UsePlayerOptions,\n): UsePlayerReturn {\n  return baseUsePlayer(whepUrl, options, createPlayer);\n}\n\nexport type {\n  UseBroadcastOptions,\n  UseBroadcastReturn,\n  UsePlayerOptions,\n  UsePlayerReturn,\n};\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  Broadcast,\n  BroadcastOptions,\n  BroadcastState,\n  DaydreamError,\n  ReconnectConfig,\n  VideoConfig,\n} from \"@daydreamlive/browser\";\n\nexport interface UseBroadcastOptions {\n  whipUrl: string;\n  reconnect?: ReconnectConfig;\n  video?: VideoConfig;\n  onStats?: (report: RTCStatsReport) => void;\n  statsIntervalMs?: number;\n}\n\nexport type BroadcastFactory = (options: BroadcastOptions) => Broadcast;\n\nexport interface UseBroadcastReturn {\n  state: BroadcastState | \"idle\";\n  whepUrl: string | null;\n  error: DaydreamError | null;\n  start: (stream: MediaStream) => Promise<void>;\n  stop: () => Promise<void>;\n}\n\nexport function useBroadcast(\n  options: UseBroadcastOptions,\n  factory: BroadcastFactory,\n): UseBroadcastReturn {\n  const [state, setState] = useState<BroadcastState | \"idle\">(\"idle\");\n  const [whepUrl, setWhepUrl] = useState<string | null>(null);\n  const [error, setError] = useState<DaydreamError | null>(null);\n  const broadcastRef = useRef<Broadcast | null>(null);\n  const optionsRef = useRef(options);\n  const factoryRef = useRef(factory);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  }, [options]);\n\n  useEffect(() => {\n    factoryRef.current = factory;\n  }, [factory]);\n\n  useEffect(() => {\n    return () => {\n      broadcastRef.current?.stop();\n    };\n  }, []);\n\n  const start = useCallback(async (stream: MediaStream) => {\n    setError(null);\n\n    if (broadcastRef.current) {\n      await broadcastRef.current.stop();\n    }\n\n    try {\n      const broadcast = factoryRef.current({\n        stream,\n        ...optionsRef.current,\n      });\n\n      broadcastRef.current = broadcast;\n\n      broadcast.on(\"stateChange\", (newState) => {\n        setState(newState);\n        if (newState === \"live\") {\n          setWhepUrl(broadcast.whepUrl);\n        }\n      });\n\n      broadcast.on(\"error\", (err) => {\n        setError(err);\n      });\n\n      await broadcast.connect();\n      setState(broadcast.state);\n      setWhepUrl(broadcast.whepUrl);\n    } catch (err) {\n      setError(err as DaydreamError);\n      setState(\"error\");\n      throw err;\n    }\n  }, []);\n\n  const stop = useCallback(async () => {\n    await broadcastRef.current?.stop();\n    broadcastRef.current = null;\n    setWhepUrl(null);\n    setState(\"idle\");\n  }, []);\n\n  return {\n    state,\n    whepUrl,\n    error,\n    start,\n    stop,\n  };\n}\n","import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type RefObject,\n} from \"react\";\nimport type {\n  Player,\n  PlayerOptions,\n  PlayerState,\n  DaydreamError,\n  ReconnectConfig,\n} from \"@daydreamlive/browser\";\n\nexport interface UsePlayerOptions {\n  reconnect?: ReconnectConfig;\n  autoPlay?: boolean;\n  onStats?: (report: RTCStatsReport) => void;\n  statsIntervalMs?: number;\n}\n\nexport type PlayerFactory = (\n  whepUrl: string,\n  options?: PlayerOptions,\n) => Player;\n\nexport interface UsePlayerReturn {\n  state: PlayerState | \"idle\";\n  error: DaydreamError | null;\n  play: () => Promise<void>;\n  stop: () => Promise<void>;\n  videoRef: RefObject<HTMLVideoElement | null>;\n}\n\nexport function usePlayer(\n  whepUrl: string | null,\n  options: UsePlayerOptions | undefined,\n  factory: PlayerFactory,\n): UsePlayerReturn {\n  const [state, setState] = useState<PlayerState | \"idle\">(\"idle\");\n  const [error, setError] = useState<DaydreamError | null>(null);\n  const playerRef = useRef<Player | null>(null);\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const optionsRef = useRef(options);\n  const whepUrlRef = useRef(whepUrl);\n  const factoryRef = useRef(factory);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  }, [options]);\n\n  useEffect(() => {\n    factoryRef.current = factory;\n  }, [factory]);\n\n  useEffect(() => {\n    whepUrlRef.current = whepUrl;\n  }, [whepUrl]);\n\n  useEffect(() => {\n    return () => {\n      playerRef.current?.stop();\n    };\n  }, []);\n\n  const play = useCallback(async () => {\n    const currentWhepUrl = whepUrlRef.current;\n    if (!currentWhepUrl) {\n      return;\n    }\n\n    setError(null);\n\n    if (playerRef.current) {\n      await playerRef.current.stop();\n    }\n\n    try {\n      const player = factoryRef.current(currentWhepUrl, {\n        reconnect: optionsRef.current?.reconnect,\n        onStats: optionsRef.current?.onStats,\n        statsIntervalMs: optionsRef.current?.statsIntervalMs,\n      });\n\n      playerRef.current = player;\n\n      player.on(\"stateChange\", (newState) => {\n        setState(newState);\n      });\n\n      player.on(\"error\", (err) => {\n        setError(err);\n      });\n\n      await player.connect();\n      setState(player.state);\n\n      if (videoRef.current) {\n        player.attachTo(videoRef.current);\n        if (optionsRef.current?.autoPlay !== false) {\n          try {\n            await videoRef.current.play();\n          } catch {\n            // Autoplay blocked\n          }\n        }\n      }\n    } catch (err) {\n      setError(err as DaydreamError);\n      setState(\"error\");\n      throw err;\n    }\n  }, []);\n\n  const stop = useCallback(async () => {\n    await playerRef.current?.stop();\n    playerRef.current = null;\n    setState(\"idle\");\n  }, []);\n\n  return {\n    state,\n    error,\n    play,\n    stop,\n    videoRef,\n  };\n}\n"],"mappings":"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","names":["useBroadcast","usePlayer","import_react","useBroadcast","usePlayer"]}

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import { ReconnectConfig, VideoConfig, BroadcastState, DaydreamError, PlayerState } from '@daydreamlive/browser';
+import { RefObject } from 'react';
+
+interface UseBroadcastOptions {
+    whipUrl: string;
+    reconnect?: ReconnectConfig;
+    video?: VideoConfig;
+    onStats?: (report: RTCStatsReport) => void;
+    statsIntervalMs?: number;
+}
+interface UseBroadcastReturn {
+    state: BroadcastState | "idle";
+    whepUrl: string | null;
+    error: DaydreamError | null;
+    start: (stream: MediaStream) => Promise<void>;
+    stop: () => Promise<void>;
+}
+
+interface UsePlayerOptions {
+    reconnect?: ReconnectConfig;
+    autoPlay?: boolean;
+    onStats?: (report: RTCStatsReport) => void;
+    statsIntervalMs?: number;
+}
+interface UsePlayerReturn {
+    state: PlayerState | "idle";
+    error: DaydreamError | null;
+    play: () => Promise<void>;
+    stop: () => Promise<void>;
+    videoRef: RefObject<HTMLVideoElement | null>;
+}
+
+declare function useBroadcast(options: UseBroadcastOptions): UseBroadcastReturn;
+declare function usePlayer(whepUrl: string | null, options?: UsePlayerOptions): UsePlayerReturn;
+
+export { type UseBroadcastOptions, type UseBroadcastReturn, type UsePlayerOptions, type UsePlayerReturn, useBroadcast, usePlayer };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { ReconnectConfig, VideoConfig, BroadcastState, DaydreamError, PlayerState } from '@daydreamlive/browser';
+import { RefObject } from 'react';
+
+interface UseBroadcastOptions {
+    whipUrl: string;
+    reconnect?: ReconnectConfig;
+    video?: VideoConfig;
+    onStats?: (report: RTCStatsReport) => void;
+    statsIntervalMs?: number;
+}
+interface UseBroadcastReturn {
+    state: BroadcastState | "idle";
+    whepUrl: string | null;
+    error: DaydreamError | null;
+    start: (stream: MediaStream) => Promise<void>;
+    stop: () => Promise<void>;
+}
+
+interface UsePlayerOptions {
+    reconnect?: ReconnectConfig;
+    autoPlay?: boolean;
+    onStats?: (report: RTCStatsReport) => void;
+    statsIntervalMs?: number;
+}
+interface UsePlayerReturn {
+    state: PlayerState | "idle";
+    error: DaydreamError | null;
+    play: () => Promise<void>;
+    stop: () => Promise<void>;
+    videoRef: RefObject<HTMLVideoElement | null>;
+}
+
+declare function useBroadcast(options: UseBroadcastOptions): UseBroadcastReturn;
+declare function usePlayer(whepUrl: string | null, options?: UsePlayerOptions): UsePlayerReturn;
+
+export { type UseBroadcastOptions, type UseBroadcastReturn, type UsePlayerOptions, type UsePlayerReturn, useBroadcast, usePlayer };

package/dist/index.js

@@ -0,0 +1,161 @@
+// src/index.ts
+import { createBroadcast, createPlayer } from "@daydreamlive/browser";
+
+// src/useBroadcast.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useBroadcast(options, factory) {
+  const [state, setState] = useState("idle");
+  const [whepUrl, setWhepUrl] = useState(null);
+  const [error, setError] = useState(null);
+  const broadcastRef = useRef(null);
+  const optionsRef = useRef(options);
+  const factoryRef = useRef(factory);
+  useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  useEffect(() => {
+    factoryRef.current = factory;
+  }, [factory]);
+  useEffect(() => {
+    return () => {
+      broadcastRef.current?.stop();
+    };
+  }, []);
+  const start = useCallback(async (stream) => {
+    setError(null);
+    if (broadcastRef.current) {
+      await broadcastRef.current.stop();
+    }
+    try {
+      const broadcast = factoryRef.current({
+        stream,
+        ...optionsRef.current
+      });
+      broadcastRef.current = broadcast;
+      broadcast.on("stateChange", (newState) => {
+        setState(newState);
+        if (newState === "live") {
+          setWhepUrl(broadcast.whepUrl);
+        }
+      });
+      broadcast.on("error", (err) => {
+        setError(err);
+      });
+      await broadcast.connect();
+      setState(broadcast.state);
+      setWhepUrl(broadcast.whepUrl);
+    } catch (err) {
+      setError(err);
+      setState("error");
+      throw err;
+    }
+  }, []);
+  const stop = useCallback(async () => {
+    await broadcastRef.current?.stop();
+    broadcastRef.current = null;
+    setWhepUrl(null);
+    setState("idle");
+  }, []);
+  return {
+    state,
+    whepUrl,
+    error,
+    start,
+    stop
+  };
+}
+
+// src/usePlayer.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+function usePlayer(whepUrl, options, factory) {
+  const [state, setState] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const playerRef = useRef2(null);
+  const videoRef = useRef2(null);
+  const optionsRef = useRef2(options);
+  const whepUrlRef = useRef2(whepUrl);
+  const factoryRef = useRef2(factory);
+  useEffect2(() => {
+    optionsRef.current = options;
+  }, [options]);
+  useEffect2(() => {
+    factoryRef.current = factory;
+  }, [factory]);
+  useEffect2(() => {
+    whepUrlRef.current = whepUrl;
+  }, [whepUrl]);
+  useEffect2(() => {
+    return () => {
+      playerRef.current?.stop();
+    };
+  }, []);
+  const play = useCallback2(async () => {
+    const currentWhepUrl = whepUrlRef.current;
+    if (!currentWhepUrl) {
+      return;
+    }
+    setError(null);
+    if (playerRef.current) {
+      await playerRef.current.stop();
+    }
+    try {
+      const player = factoryRef.current(currentWhepUrl, {
+        reconnect: optionsRef.current?.reconnect,
+        onStats: optionsRef.current?.onStats,
+        statsIntervalMs: optionsRef.current?.statsIntervalMs
+      });
+      playerRef.current = player;
+      player.on("stateChange", (newState) => {
+        setState(newState);
+      });
+      player.on("error", (err) => {
+        setError(err);
+      });
+      await player.connect();
+      setState(player.state);
+      if (videoRef.current) {
+        player.attachTo(videoRef.current);
+        if (optionsRef.current?.autoPlay !== false) {
+          try {
+            await videoRef.current.play();
+          } catch {
+          }
+        }
+      }
+    } catch (err) {
+      setError(err);
+      setState("error");
+      throw err;
+    }
+  }, []);
+  const stop = useCallback2(async () => {
+    await playerRef.current?.stop();
+    playerRef.current = null;
+    setState("idle");
+  }, []);
+  return {
+    state,
+    error,
+    play,
+    stop,
+    videoRef
+  };
+}
+
+// src/index.ts
+function useBroadcast2(options) {
+  return useBroadcast(options, createBroadcast);
+}
+function usePlayer2(whepUrl, options) {
+  return usePlayer(whepUrl, options, createPlayer);
+}
+export {
+  useBroadcast2 as useBroadcast,
+  usePlayer2 as usePlayer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useBroadcast.ts","../src/usePlayer.ts"],"sourcesContent":["import { createBroadcast, createPlayer } from \"@daydreamlive/browser\";\nimport {\n  useBroadcast as baseUseBroadcast,\n  type UseBroadcastOptions,\n  type UseBroadcastReturn,\n} from \"./useBroadcast\";\nimport {\n  usePlayer as baseUsePlayer,\n  type UsePlayerOptions,\n  type UsePlayerReturn,\n} from \"./usePlayer\";\n\nexport function useBroadcast(options: UseBroadcastOptions): UseBroadcastReturn {\n  return baseUseBroadcast(options, createBroadcast);\n}\n\nexport function usePlayer(\n  whepUrl: string | null,\n  options?: UsePlayerOptions,\n): UsePlayerReturn {\n  return baseUsePlayer(whepUrl, options, createPlayer);\n}\n\nexport type {\n  UseBroadcastOptions,\n  UseBroadcastReturn,\n  UsePlayerOptions,\n  UsePlayerReturn,\n};\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  Broadcast,\n  BroadcastOptions,\n  BroadcastState,\n  DaydreamError,\n  ReconnectConfig,\n  VideoConfig,\n} from \"@daydreamlive/browser\";\n\nexport interface UseBroadcastOptions {\n  whipUrl: string;\n  reconnect?: ReconnectConfig;\n  video?: VideoConfig;\n  onStats?: (report: RTCStatsReport) => void;\n  statsIntervalMs?: number;\n}\n\nexport type BroadcastFactory = (options: BroadcastOptions) => Broadcast;\n\nexport interface UseBroadcastReturn {\n  state: BroadcastState | \"idle\";\n  whepUrl: string | null;\n  error: DaydreamError | null;\n  start: (stream: MediaStream) => Promise<void>;\n  stop: () => Promise<void>;\n}\n\nexport function useBroadcast(\n  options: UseBroadcastOptions,\n  factory: BroadcastFactory,\n): UseBroadcastReturn {\n  const [state, setState] = useState<BroadcastState | \"idle\">(\"idle\");\n  const [whepUrl, setWhepUrl] = useState<string | null>(null);\n  const [error, setError] = useState<DaydreamError | null>(null);\n  const broadcastRef = useRef<Broadcast | null>(null);\n  const optionsRef = useRef(options);\n  const factoryRef = useRef(factory);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  }, [options]);\n\n  useEffect(() => {\n    factoryRef.current = factory;\n  }, [factory]);\n\n  useEffect(() => {\n    return () => {\n      broadcastRef.current?.stop();\n    };\n  }, []);\n\n  const start = useCallback(async (stream: MediaStream) => {\n    setError(null);\n\n    if (broadcastRef.current) {\n      await broadcastRef.current.stop();\n    }\n\n    try {\n      const broadcast = factoryRef.current({\n        stream,\n        ...optionsRef.current,\n      });\n\n      broadcastRef.current = broadcast;\n\n      broadcast.on(\"stateChange\", (newState) => {\n        setState(newState);\n        if (newState === \"live\") {\n          setWhepUrl(broadcast.whepUrl);\n        }\n      });\n\n      broadcast.on(\"error\", (err) => {\n        setError(err);\n      });\n\n      await broadcast.connect();\n      setState(broadcast.state);\n      setWhepUrl(broadcast.whepUrl);\n    } catch (err) {\n      setError(err as DaydreamError);\n      setState(\"error\");\n      throw err;\n    }\n  }, []);\n\n  const stop = useCallback(async () => {\n    await broadcastRef.current?.stop();\n    broadcastRef.current = null;\n    setWhepUrl(null);\n    setState(\"idle\");\n  }, []);\n\n  return {\n    state,\n    whepUrl,\n    error,\n    start,\n    stop,\n  };\n}\n","import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type RefObject,\n} from \"react\";\nimport type {\n  Player,\n  PlayerOptions,\n  PlayerState,\n  DaydreamError,\n  ReconnectConfig,\n} from \"@daydreamlive/browser\";\n\nexport interface UsePlayerOptions {\n  reconnect?: ReconnectConfig;\n  autoPlay?: boolean;\n  onStats?: (report: RTCStatsReport) => void;\n  statsIntervalMs?: number;\n}\n\nexport type PlayerFactory = (\n  whepUrl: string,\n  options?: PlayerOptions,\n) => Player;\n\nexport interface UsePlayerReturn {\n  state: PlayerState | \"idle\";\n  error: DaydreamError | null;\n  play: () => Promise<void>;\n  stop: () => Promise<void>;\n  videoRef: RefObject<HTMLVideoElement | null>;\n}\n\nexport function usePlayer(\n  whepUrl: string | null,\n  options: UsePlayerOptions | undefined,\n  factory: PlayerFactory,\n): UsePlayerReturn {\n  const [state, setState] = useState<PlayerState | \"idle\">(\"idle\");\n  const [error, setError] = useState<DaydreamError | null>(null);\n  const playerRef = useRef<Player | null>(null);\n  const videoRef = useRef<HTMLVideoElement | null>(null);\n  const optionsRef = useRef(options);\n  const whepUrlRef = useRef(whepUrl);\n  const factoryRef = useRef(factory);\n\n  useEffect(() => {\n    optionsRef.current = options;\n  }, [options]);\n\n  useEffect(() => {\n    factoryRef.current = factory;\n  }, [factory]);\n\n  useEffect(() => {\n    whepUrlRef.current = whepUrl;\n  }, [whepUrl]);\n\n  useEffect(() => {\n    return () => {\n      playerRef.current?.stop();\n    };\n  }, []);\n\n  const play = useCallback(async () => {\n    const currentWhepUrl = whepUrlRef.current;\n    if (!currentWhepUrl) {\n      return;\n    }\n\n    setError(null);\n\n    if (playerRef.current) {\n      await playerRef.current.stop();\n    }\n\n    try {\n      const player = factoryRef.current(currentWhepUrl, {\n        reconnect: optionsRef.current?.reconnect,\n        onStats: optionsRef.current?.onStats,\n        statsIntervalMs: optionsRef.current?.statsIntervalMs,\n      });\n\n      playerRef.current = player;\n\n      player.on(\"stateChange\", (newState) => {\n        setState(newState);\n      });\n\n      player.on(\"error\", (err) => {\n        setError(err);\n      });\n\n      await player.connect();\n      setState(player.state);\n\n      if (videoRef.current) {\n        player.attachTo(videoRef.current);\n        if (optionsRef.current?.autoPlay !== false) {\n          try {\n            await videoRef.current.play();\n          } catch {\n            // Autoplay blocked\n          }\n        }\n      }\n    } catch (err) {\n      setError(err as DaydreamError);\n      setState(\"error\");\n      throw err;\n    }\n  }, []);\n\n  const stop = useCallback(async () => {\n    await playerRef.current?.stop();\n    playerRef.current = null;\n    setState(\"idle\");\n  }, []);\n\n  return {\n    state,\n    error,\n    play,\n    stop,\n    videoRef,\n  };\n}\n"],"mappings":"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","names":["useCallback","useEffect","useRef","useState","useBroadcast","usePlayer"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@daydreamlive/react",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@daydreamlive/browser": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3",
+    "tsup": "^8.0.1"
+  }
+}