@daydreamlive/react 0.1.1 → 0.3.0

package/README.md

@@ -16,7 +16,7 @@ npm install @daydreamlive/react
 import { useBroadcast } from "@daydreamlive/react";
 
 function Broadcaster({ whipUrl }: { whipUrl: string }) {
-  const { state, whepUrl, error, start, stop } = useBroadcast({
+  const { status, start, stop } = useBroadcast({
     whipUrl,
     reconnect: { enabled: true },
   });
@@ -28,8 +28,10 @@ function Broadcaster({ whipUrl }: { whipUrl: string }) {
 
   return (
     <div>
-      <p>State: {state}</p>
-      <button onClick={handleStart} disabled={state === "live"}>
+      <p>State: {status.state}</p>
+      {status.state === "live" && <p>WHEP URL: {status.whepUrl}</p>}
+      {status.state === "error" && <p>Error: {status.error.message}</p>}
+      <button onClick={handleStart} disabled={status.state === "live"}>
         Start
       </button>
       <button onClick={stop}>Stop</button>
@@ -44,12 +46,22 @@ function Broadcaster({ whipUrl }: { whipUrl: string }) {
 import { usePlayer } from "@daydreamlive/react";
 
 function Player({ whepUrl }: { whepUrl: string }) {
-  const { state, error, videoRef } = usePlayer(whepUrl, {
+  const { status, play, stop, videoRef } = usePlayer(whepUrl, {
     autoPlay: true,
     reconnect: { enabled: true },
   });
 
-  return <video ref={videoRef} autoPlay playsInline muted />;
+  return (
+    <div>
+      <p>State: {status.state}</p>
+      {status.state === "error" && <p>Error: {status.error.message}</p>}
+      <video ref={videoRef} autoPlay playsInline muted />
+      <button onClick={play} disabled={status.state === "playing"}>
+        Play
+      </button>
+      <button onClick={stop}>Stop</button>
+    </div>
+  );
 }
 ```
 
@@ -57,11 +69,33 @@ function Player({ whepUrl }: { whepUrl: string }) {
 
 ### `useBroadcast(options)`
 
-Returns: `{ state, whepUrl, error, start, stop }`
+Returns: `{ status, start, stop, setMaxFramerate }`
+
+- `status`: `UseBroadcastStatus` - Discriminated union with `state` property
+  - `{ state: "idle" }`
+  - `{ state: "connecting" }`
+  - `{ state: "live", whepUrl: string }`
+  - `{ state: "reconnecting", whepUrl: string, reconnectInfo: ReconnectInfo }`
+  - `{ state: "ended" }`
+  - `{ state: "error", error: DaydreamError }`
+- `start(stream: MediaStream)`: Start broadcasting
+- `stop()`: Stop broadcasting
+- `setMaxFramerate(fps?: number)`: Set max framerate
 
 ### `usePlayer(whepUrl, options?)`
 
-Returns: `{ state, error, play, stop, videoRef }`
+Returns: `{ status, play, stop, videoRef }`
+
+- `status`: `UsePlayerStatus` - Discriminated union with `state` property
+  - `{ state: "idle" }`
+  - `{ state: "connecting" }`
+  - `{ state: "playing" }`
+  - `{ state: "buffering", reconnectInfo: ReconnectInfo }`
+  - `{ state: "ended" }`
+  - `{ state: "error", error: DaydreamError }`
+- `play()`: Start playing
+- `stop()`: Stop playing
+- `videoRef`: Ref to attach to `<video>` element
 
 ## License
 

package/dist/index.cjs

@@ -20,19 +20,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CompositorProvider: () => CompositorProvider,
   useBroadcast: () => useBroadcast2,
-  usePlayer: () => usePlayer2
+  useCompositor: () => useCompositor,
+  usePlayer: () => usePlayer2,
+  useSource: () => useSource
 });
 module.exports = __toCommonJS(index_exports);
-var import_browser = require("@daydreamlive/browser");
+var import_browser2 = 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 [status, setStatus] = (0, import_react.useState)({ state: "idle" });
   const broadcastRef = (0, import_react.useRef)(null);
+  const whepUrlRef = (0, import_react.useRef)(null);
   const optionsRef = (0, import_react.useRef)(options);
   const factoryRef = (0, import_react.useRef)(factory);
   (0, import_react.useEffect)(() => {
@@ -46,55 +48,87 @@ function useBroadcast(options, factory) {
       broadcastRef.current?.stop();
     };
   }, []);
+  const updateStatus = (0, import_react.useCallback)((newState, error) => {
+    const whepUrl = whepUrlRef.current;
+    switch (newState) {
+      case "connecting":
+        setStatus({ state: "connecting" });
+        break;
+      case "live":
+        setStatus({ state: "live", whepUrl });
+        break;
+      case "reconnecting":
+        break;
+      case "ended":
+        setStatus({ state: "ended" });
+        break;
+      case "error":
+        setStatus({ state: "error", error });
+        break;
+    }
+  }, []);
   const start = (0, import_react.useCallback)(async (stream) => {
-    setError(null);
     if (broadcastRef.current) {
       await broadcastRef.current.stop();
+      broadcastRef.current = null;
     }
-    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);
+    setStatus({ state: "connecting" });
+    const broadcast = factoryRef.current({
+      stream,
+      ...optionsRef.current
+    });
+    broadcastRef.current = broadcast;
+    broadcast.on("stateChange", (newState) => {
+      if (broadcastRef.current !== broadcast) return;
+      if (newState === "live" || newState === "reconnecting") {
+        whepUrlRef.current = broadcast.whepUrl;
+      }
+      updateStatus(newState);
+    });
+    broadcast.on("error", (err) => {
+      if (broadcastRef.current !== broadcast) return;
+      updateStatus("error", err);
+    });
+    broadcast.on("reconnect", (info) => {
+      if (broadcastRef.current !== broadcast) return;
+      setStatus({
+        state: "reconnecting",
+        whepUrl: whepUrlRef.current,
+        reconnectInfo: info
       });
+    });
+    try {
       await broadcast.connect();
-      setState(broadcast.state);
-      setWhepUrl(broadcast.whepUrl);
+      if (broadcastRef.current !== broadcast) return;
+      whepUrlRef.current = broadcast.whepUrl;
+      updateStatus(broadcast.state);
     } catch (err) {
-      setError(err);
-      setState("error");
+      if (broadcastRef.current !== broadcast) return;
+      setStatus({ state: "error", error: err });
       throw err;
     }
-  }, []);
+  }, [updateStatus]);
   const stop = (0, import_react.useCallback)(async () => {
     await broadcastRef.current?.stop();
     broadcastRef.current = null;
-    setWhepUrl(null);
-    setState("idle");
+    whepUrlRef.current = null;
+    setStatus({ state: "idle" });
+  }, []);
+  const setMaxFramerate = (0, import_react.useCallback)((fps) => {
+    broadcastRef.current?.setMaxFramerate(fps);
   }, []);
   return {
-    state,
-    whepUrl,
-    error,
+    status,
     start,
-    stop
+    stop,
+    setMaxFramerate
   };
 }
 
 // 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 [status, setStatus] = (0, import_react2.useState)({ state: "idle" });
   const playerRef = (0, import_react2.useRef)(null);
   const videoRef = (0, import_react2.useRef)(null);
   const optionsRef = (0, import_react2.useRef)(options);
@@ -114,30 +148,64 @@ function usePlayer(whepUrl, options, factory) {
       playerRef.current?.stop();
     };
   }, []);
+  const updateStatus = (0, import_react2.useCallback)((newState, error) => {
+    switch (newState) {
+      case "connecting":
+        setStatus({ state: "connecting" });
+        break;
+      case "playing":
+        setStatus({ state: "playing" });
+        break;
+      case "buffering":
+        break;
+      case "ended":
+        setStatus({ state: "ended" });
+        break;
+      case "error":
+        setStatus({ state: "error", error });
+        break;
+    }
+  }, []);
   const play = (0, import_react2.useCallback)(async () => {
     const currentWhepUrl = whepUrlRef.current;
     if (!currentWhepUrl) {
       return;
     }
-    setError(null);
     if (playerRef.current) {
       await playerRef.current.stop();
+      playerRef.current = null;
     }
+    setStatus({ state: "connecting" });
+    const player = factoryRef.current(currentWhepUrl, {
+      reconnect: optionsRef.current?.reconnect,
+      iceServers: optionsRef.current?.iceServers,
+      connectionTimeout: optionsRef.current?.connectionTimeout,
+      skipIceGathering: optionsRef.current?.skipIceGathering,
+      onStats: optionsRef.current?.onStats,
+      statsIntervalMs: optionsRef.current?.statsIntervalMs
+    });
+    playerRef.current = player;
+    player.on("stateChange", (newState) => {
+      if (playerRef.current !== player) return;
+      updateStatus(newState);
+      if (newState === "playing" && videoRef.current && player.stream) {
+        if (videoRef.current.srcObject !== player.stream) {
+          player.attachTo(videoRef.current);
+        }
+      }
+    });
+    player.on("error", (err) => {
+      if (playerRef.current !== player) return;
+      updateStatus("error", err);
+    });
+    player.on("reconnect", (info) => {
+      if (playerRef.current !== player) return;
+      setStatus({ state: "buffering", reconnectInfo: info });
+    });
     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 (playerRef.current !== player) return;
+      updateStatus(player.state);
       if (videoRef.current) {
         player.attachTo(videoRef.current);
         if (optionsRef.current?.autoPlay !== false) {
@@ -148,35 +216,225 @@ function usePlayer(whepUrl, options, factory) {
         }
       }
     } catch (err) {
-      setError(err);
-      setState("error");
+      if (playerRef.current !== player) return;
+      setStatus({ state: "error", error: err });
       throw err;
     }
-  }, []);
+  }, [updateStatus]);
   const stop = (0, import_react2.useCallback)(async () => {
     await playerRef.current?.stop();
     playerRef.current = null;
-    setState("idle");
+    setStatus({ state: "idle" });
   }, []);
   return {
-    state,
-    error,
+    status,
     play,
     stop,
     videoRef
   };
 }
 
+// src/useCompositor.tsx
+var import_react3 = require("react");
+var import_browser = require("@daydreamlive/browser");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CompositorContext = (0, import_react3.createContext)(null);
+function CompositorProvider({
+  children,
+  width = 512,
+  height = 512,
+  fps: initialFps = 30,
+  sendFps: initialSendFps,
+  dpr,
+  keepalive,
+  autoUnlockAudio,
+  unlockEvents,
+  disableSilentAudio = true
+}) {
+  const compositorRef = (0, import_react3.useRef)(null);
+  const [stream, setStream] = (0, import_react3.useState)(null);
+  const [size, setSize] = (0, import_react3.useState)({
+    width,
+    height,
+    dpr: Math.min(
+      2,
+      dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
+    )
+  });
+  const [fps, setFpsState] = (0, import_react3.useState)(initialFps);
+  const [sendFps, setSendFpsState] = (0, import_react3.useState)(initialSendFps ?? initialFps);
+  (0, import_react3.useLayoutEffect)(() => {
+    const compositor = (0, import_browser.createCompositor)({
+      width,
+      height,
+      fps: initialFps,
+      sendFps: initialSendFps,
+      dpr,
+      keepalive,
+      autoUnlockAudio,
+      unlockEvents,
+      disableSilentAudio,
+      onSendFpsChange: (newFps) => setSendFpsState(newFps)
+    });
+    compositorRef.current = compositor;
+    setStream(compositor.stream);
+    setSize(compositor.size);
+    return () => {
+      compositor.destroy();
+      compositorRef.current = null;
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const compositor = compositorRef.current;
+    if (!compositor) return;
+    compositor.resize(size.width, size.height, size.dpr);
+    setStream(compositor.stream);
+  }, [size.width, size.height, size.dpr]);
+  (0, import_react3.useEffect)(() => {
+    const compositor = compositorRef.current;
+    if (!compositor) return;
+    compositor.setFps(fps);
+    setStream(compositor.stream);
+  }, [fps]);
+  (0, import_react3.useEffect)(() => {
+    const compositor = compositorRef.current;
+    if (!compositor) return;
+    compositor.setSendFps(sendFps);
+  }, [sendFps]);
+  const api = (0, import_react3.useMemo)(
+    () => ({
+      // Registry
+      register: (id, source) => compositorRef.current?.register(id, source),
+      unregister: (id) => compositorRef.current?.unregister(id),
+      get: (id) => compositorRef.current?.get(id),
+      has: (id) => compositorRef.current?.has(id) ?? false,
+      list: () => compositorRef.current?.list() ?? [],
+      use: (id, source) => {
+        compositorRef.current?.register(id, source);
+        compositorRef.current?.activate(id);
+        return () => compositorRef.current?.unregister(id);
+      },
+      // Active source
+      activate: (id) => compositorRef.current?.activate(id),
+      deactivate: () => compositorRef.current?.deactivate(),
+      get activeId() {
+        return compositorRef.current?.activeId ?? null;
+      },
+      // Stream & size
+      stream,
+      size,
+      setSize: (w, h, d) => setSize({ width: w, height: h, dpr: d ?? size.dpr }),
+      // FPS
+      fps,
+      setFps: setFpsState,
+      sendFps,
+      setSendFps: setSendFpsState,
+      // Audio
+      addAudioTrack: (t) => compositorRef.current?.addAudioTrack(t),
+      removeAudioTrack: (id) => compositorRef.current?.removeAudioTrack(id),
+      unlockAudio: () => compositorRef.current?.unlockAudio() ?? Promise.resolve(false),
+      // Events
+      on: (event, cb) => compositorRef.current?.on(event, cb) ?? (() => {
+      })
+    }),
+    [stream, size, fps, sendFps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompositorContext.Provider, { value: api, children });
+}
+function useCompositor() {
+  const ctx = (0, import_react3.useContext)(CompositorContext);
+  if (!ctx) {
+    throw new Error("useCompositor must be used within <CompositorProvider>");
+  }
+  return ctx;
+}
+
+// src/useSource.ts
+var import_react4 = require("react");
+function useSource(id, options) {
+  const compositor = useCompositor();
+  const compositorRef = (0, import_react4.useRef)(compositor);
+  compositorRef.current = compositor;
+  const ref = (0, import_react4.useRef)(null);
+  const [isActive, setIsActive] = (0, import_react4.useState)(false);
+  const registeredRef = (0, import_react4.useRef)(false);
+  const idRef = (0, import_react4.useRef)(id);
+  idRef.current = id;
+  const { kind, contentHint, fit } = options;
+  const optionsRef = (0, import_react4.useRef)({ kind, contentHint, fit });
+  optionsRef.current = { kind, contentHint, fit };
+  const registerSource = (0, import_react4.useCallback)((element) => {
+    const { kind: kind2, contentHint: contentHint2, fit: fit2 } = optionsRef.current;
+    const source = kind2 === "video" ? {
+      kind: "video",
+      element,
+      contentHint: contentHint2,
+      fit: fit2
+    } : {
+      kind: "canvas",
+      element,
+      contentHint: contentHint2
+    };
+    compositorRef.current.register(idRef.current, source);
+    registeredRef.current = true;
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    registerSource(element);
+  }, [id, kind, contentHint, fit, registerSource]);
+  (0, import_react4.useEffect)(() => {
+    const currentId = id;
+    return () => {
+      if (registeredRef.current) {
+        registeredRef.current = false;
+        setIsActive(false);
+        compositorRef.current.unregister(currentId);
+      }
+    };
+  }, [id]);
+  (0, import_react4.useEffect)(() => {
+    setIsActive(compositor.activeId === id);
+  }, [compositor.activeId, id]);
+  const activate = (0, import_react4.useCallback)(() => {
+    const element = ref.current;
+    if (!element) return;
+    if (!registeredRef.current) {
+      registerSource(element);
+    }
+    compositorRef.current.activate(idRef.current);
+    setIsActive(true);
+  }, [registerSource]);
+  const deactivate = (0, import_react4.useCallback)(() => {
+    if (compositorRef.current.activeId === idRef.current) {
+      compositorRef.current.deactivate();
+      setIsActive(false);
+    }
+  }, []);
+  return (0, import_react4.useMemo)(
+    () => ({
+      ref,
+      isActive,
+      activate,
+      deactivate
+    }),
+    [isActive, activate, deactivate]
+  );
+}
+
 // src/index.ts
 function useBroadcast2(options) {
-  return useBroadcast(options, import_browser.createBroadcast);
+  return useBroadcast(options, import_browser2.createBroadcast);
 }
 function usePlayer2(whepUrl, options) {
-  return usePlayer(whepUrl, options, import_browser.createPlayer);
+  return usePlayer(whepUrl, options, import_browser2.createPlayer);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CompositorProvider,
   useBroadcast,
-  usePlayer
+  useCompositor,
+  usePlayer,
+  useSource
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/useBroadcast.ts","../src/usePlayer.ts","../src/useCompositor.tsx","../src/useSource.ts"],"sourcesContent":["import { createBroadcast, createPlayer } from \"@daydreamlive/browser\";\nimport {\n  useBroadcast as baseUseBroadcast,\n  type UseBroadcastOptions,\n  type UseBroadcastReturn,\n  type UseBroadcastStatus,\n} from \"./useBroadcast\";\nimport {\n  usePlayer as baseUsePlayer,\n  type UsePlayerOptions,\n  type UsePlayerReturn,\n  type UsePlayerStatus,\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  UseBroadcastStatus,\n  UsePlayerOptions,\n  UsePlayerReturn,\n  UsePlayerStatus,\n};\n\nexport type {\n  AudioConfig,\n  BroadcastState,\n  PlayerState,\n  ReconnectConfig,\n  ReconnectInfo,\n  VideoConfig,\n  DaydreamError,\n  DaydreamErrorCode,\n  // Compositor types\n  Compositor,\n  CompositorOptions,\n  CompositorEvent,\n  CompositorEventMap,\n  Source,\n  VideoSource,\n  CanvasSource,\n  Size,\n  FitMode,\n  ContentHint,\n  Ctx2D,\n} from \"@daydreamlive/browser\";\n\nexport {\n  CompositorProvider,\n  useCompositor,\n  type CompositorApi,\n  type CompositorProviderProps,\n} from \"./useCompositor\";\n\nexport {\n  useSource,\n  type UseSourceOptions,\n  type UseSourceReturn,\n} from \"./useSource\";\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  AudioConfig,\n  Broadcast,\n  BroadcastOptions,\n  BroadcastState,\n  DaydreamError,\n  ReconnectConfig,\n  ReconnectInfo,\n  VideoConfig,\n} from \"@daydreamlive/browser\";\n\nexport interface UseBroadcastOptions {\n  whipUrl: string;\n  reconnect?: ReconnectConfig;\n  video?: VideoConfig;\n  audio?: AudioConfig;\n  iceServers?: RTCIceServer[];\n  connectionTimeout?: number;\n  onStats?: (report: RTCStatsReport) => void;\n  statsIntervalMs?: number;\n}\n\nexport type BroadcastFactory = (options: BroadcastOptions) => Broadcast;\n\nexport type UseBroadcastStatus =\n  | { state: \"idle\" }\n  | { state: \"connecting\" }\n  | { state: \"live\"; whepUrl: string }\n  | { state: \"reconnecting\"; whepUrl: string; reconnectInfo: ReconnectInfo }\n  | { state: \"ended\" }\n  | { state: \"error\"; error: DaydreamError };\n\nexport interface UseBroadcastReturn {\n  status: UseBroadcastStatus;\n  start: (stream: MediaStream) => Promise<void>;\n  stop: () => Promise<void>;\n  setMaxFramerate: (fps?: number) => void;\n}\n\nexport function useBroadcast(\n  options: UseBroadcastOptions,\n  factory: BroadcastFactory,\n): UseBroadcastReturn {\n  const [status, setStatus] = useState<UseBroadcastStatus>({ state: \"idle\" });\n  const broadcastRef = useRef<Broadcast | null>(null);\n  const whepUrlRef = useRef<string | 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 updateStatus = useCallback((newState: BroadcastState, error?: DaydreamError) => {\n    const whepUrl = whepUrlRef.current;\n    switch (newState) {\n      case \"connecting\":\n        setStatus({ state: \"connecting\" });\n        break;\n      case \"live\":\n        setStatus({ state: \"live\", whepUrl: whepUrl! });\n        break;\n      case \"reconnecting\":\n        // reconnectInfo will be set by the reconnect event\n        break;\n      case \"ended\":\n        setStatus({ state: \"ended\" });\n        break;\n      case \"error\":\n        setStatus({ state: \"error\", error: error! });\n        break;\n    }\n  }, []);\n\n  const start = useCallback(async (stream: MediaStream) => {\n    if (broadcastRef.current) {\n      await broadcastRef.current.stop();\n      broadcastRef.current = null;\n    }\n\n    setStatus({ state: \"connecting\" });\n\n    const broadcast = factoryRef.current({\n      stream,\n      ...optionsRef.current,\n    });\n\n    broadcastRef.current = broadcast;\n\n    broadcast.on(\"stateChange\", (newState) => {\n      // Guard against events from stopped broadcast\n      if (broadcastRef.current !== broadcast) return;\n      if (newState === \"live\" || newState === \"reconnecting\") {\n        whepUrlRef.current = broadcast.whepUrl;\n      }\n      updateStatus(newState);\n    });\n\n    broadcast.on(\"error\", (err) => {\n      if (broadcastRef.current !== broadcast) return;\n      updateStatus(\"error\", err);\n    });\n\n    broadcast.on(\"reconnect\", (info) => {\n      if (broadcastRef.current !== broadcast) return;\n      setStatus({\n        state: \"reconnecting\",\n        whepUrl: whepUrlRef.current!,\n        reconnectInfo: info,\n      });\n    });\n\n    try {\n      await broadcast.connect();\n      if (broadcastRef.current !== broadcast) return;\n      whepUrlRef.current = broadcast.whepUrl;\n      updateStatus(broadcast.state);\n    } catch (err) {\n      if (broadcastRef.current !== broadcast) return;\n      setStatus({ state: \"error\", error: err as DaydreamError });\n      throw err;\n    }\n  }, [updateStatus]);\n\n  const stop = useCallback(async () => {\n    await broadcastRef.current?.stop();\n    broadcastRef.current = null;\n    whepUrlRef.current = null;\n    setStatus({ state: \"idle\" });\n  }, []);\n\n  const setMaxFramerate = useCallback((fps?: number) => {\n    broadcastRef.current?.setMaxFramerate(fps);\n  }, []);\n\n  return {\n    status,\n    start,\n    stop,\n    setMaxFramerate,\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  ReconnectInfo,\n} from \"@daydreamlive/browser\";\n\nexport interface UsePlayerOptions {\n  reconnect?: ReconnectConfig;\n  iceServers?: RTCIceServer[];\n  connectionTimeout?: number;\n  skipIceGathering?: boolean;\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 type UsePlayerStatus =\n  | { state: \"idle\" }\n  | { state: \"connecting\" }\n  | { state: \"playing\" }\n  | { state: \"buffering\"; reconnectInfo: ReconnectInfo }\n  | { state: \"ended\" }\n  | { state: \"error\"; error: DaydreamError };\n\nexport interface UsePlayerReturn {\n  status: UsePlayerStatus;\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 [status, setStatus] = useState<UsePlayerStatus>({ state: \"idle\" });\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 updateStatus = useCallback((newState: PlayerState, error?: DaydreamError) => {\n    switch (newState) {\n      case \"connecting\":\n        setStatus({ state: \"connecting\" });\n        break;\n      case \"playing\":\n        setStatus({ state: \"playing\" });\n        break;\n      case \"buffering\":\n        // reconnectInfo will be set by the reconnect event\n        break;\n      case \"ended\":\n        setStatus({ state: \"ended\" });\n        break;\n      case \"error\":\n        setStatus({ state: \"error\", error: error! });\n        break;\n    }\n  }, []);\n\n  const play = useCallback(async () => {\n    const currentWhepUrl = whepUrlRef.current;\n    if (!currentWhepUrl) {\n      return;\n    }\n\n    if (playerRef.current) {\n      await playerRef.current.stop();\n      playerRef.current = null;\n    }\n\n    setStatus({ state: \"connecting\" });\n\n    const player = factoryRef.current(currentWhepUrl, {\n      reconnect: optionsRef.current?.reconnect,\n      iceServers: optionsRef.current?.iceServers,\n      connectionTimeout: optionsRef.current?.connectionTimeout,\n      skipIceGathering: optionsRef.current?.skipIceGathering,\n      onStats: optionsRef.current?.onStats,\n      statsIntervalMs: optionsRef.current?.statsIntervalMs,\n    });\n\n    playerRef.current = player;\n\n    player.on(\"stateChange\", (newState) => {\n      // Guard against events from stopped player\n      if (playerRef.current !== player) return;\n      updateStatus(newState);\n      // Re-attach stream after reconnect\n      if (newState === \"playing\" && videoRef.current && player.stream) {\n        if (videoRef.current.srcObject !== player.stream) {\n          player.attachTo(videoRef.current);\n        }\n      }\n    });\n\n    player.on(\"error\", (err) => {\n      if (playerRef.current !== player) return;\n      updateStatus(\"error\", err);\n    });\n\n    player.on(\"reconnect\", (info) => {\n      if (playerRef.current !== player) return;\n      setStatus({ state: \"buffering\", reconnectInfo: info });\n    });\n\n    try {\n      await player.connect();\n      if (playerRef.current !== player) return;\n      updateStatus(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      if (playerRef.current !== player) return;\n      setStatus({ state: \"error\", error: err as DaydreamError });\n      throw err;\n    }\n  }, [updateStatus]);\n\n  const stop = useCallback(async () => {\n    await playerRef.current?.stop();\n    playerRef.current = null;\n    setStatus({ state: \"idle\" });\n  }, []);\n\n  return {\n    status,\n    play,\n    stop,\n    videoRef,\n  };\n}\n","\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n} from \"react\";\nimport {\n  createCompositor,\n  type Compositor,\n  type CompositorOptions,\n  type Size,\n  type Source,\n} from \"@daydreamlive/browser\";\n\nexport interface CompositorApi {\n  // Registry\n  register(id: string, source: Source): void;\n  unregister(id: string): void;\n  get(id: string): Source | undefined;\n  has(id: string): boolean;\n  list(): Array<{ id: string; source: Source }>;\n\n  /**\n   * Register a source, activate it, and return an unregister function.\n   * Convenience method that combines register + activate with automatic cleanup.\n   *\n   * @example\n   * ```tsx\n   * useEffect(() => {\n   *   const unregister = compositor.use(\"camera\", {\n   *     kind: \"video\",\n   *     element: videoRef.current,\n   *     fit: \"cover\",\n   *   });\n   *   return unregister;\n   * }, [compositor]);\n   * ```\n   */\n  use(id: string, source: Source): () => void;\n\n  // Active source\n  /**\n   * Activate a registered source.\n   * @param id - The source ID to activate\n   */\n  activate(id: string): void;\n  deactivate(): void;\n  readonly activeId: string | null;\n\n  // Output (reactive)\n  readonly stream: MediaStream | null;\n  readonly size: Size;\n  setSize(width: number, height: number, dpr?: number): void;\n\n  // FPS (reactive)\n  readonly fps: number;\n  setFps(fps: number): void;\n  readonly sendFps: number;\n  setSendFps(fps: number): void;\n\n  // Audio\n  addAudioTrack(track: MediaStreamTrack): void;\n  removeAudioTrack(trackId: string): void;\n  unlockAudio(): Promise<boolean>;\n\n  // Events\n  on: Compositor[\"on\"];\n}\n\nconst CompositorContext = createContext<CompositorApi | null>(null);\n\nexport interface CompositorProviderProps\n  extends PropsWithChildren,\n    Partial<Omit<CompositorOptions, \"onSendFpsChange\">> {}\n\nexport function CompositorProvider({\n  children,\n  width = 512,\n  height = 512,\n  fps: initialFps = 30,\n  sendFps: initialSendFps,\n  dpr,\n  keepalive,\n  autoUnlockAudio,\n  unlockEvents,\n  disableSilentAudio = true,\n}: CompositorProviderProps) {\n  const compositorRef = useRef<Compositor | null>(null);\n  const [stream, setStream] = useState<MediaStream | null>(null);\n  const [size, setSize] = useState<Size>({\n    width,\n    height,\n    dpr: Math.min(\n      2,\n      dpr ?? (typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1),\n    ),\n  });\n  const [fps, setFpsState] = useState(initialFps);\n  const [sendFps, setSendFpsState] = useState(initialSendFps ?? initialFps);\n\n  // Create compositor once\n  useLayoutEffect(() => {\n    const compositor = createCompositor({\n      width,\n      height,\n      fps: initialFps,\n      sendFps: initialSendFps,\n      dpr,\n      keepalive,\n      autoUnlockAudio,\n      unlockEvents,\n      disableSilentAudio,\n      onSendFpsChange: (newFps) => setSendFpsState(newFps),\n    });\n\n    compositorRef.current = compositor;\n    setStream(compositor.stream);\n    setSize(compositor.size);\n\n    return () => {\n      compositor.destroy();\n      compositorRef.current = null;\n    };\n  }, []);\n\n  // Sync size changes\n  useEffect(() => {\n    const compositor = compositorRef.current;\n    if (!compositor) return;\n\n    compositor.resize(size.width, size.height, size.dpr);\n    setStream(compositor.stream);\n  }, [size.width, size.height, size.dpr]);\n\n  // Sync fps changes\n  useEffect(() => {\n    const compositor = compositorRef.current;\n    if (!compositor) return;\n\n    compositor.setFps(fps);\n    setStream(compositor.stream);\n  }, [fps]);\n\n  // Sync sendFps changes\n  useEffect(() => {\n    const compositor = compositorRef.current;\n    if (!compositor) return;\n\n    compositor.setSendFps(sendFps);\n  }, [sendFps]);\n\n  // Memoized API\n  const api = useMemo<CompositorApi>(\n    () => ({\n      // Registry\n      register: (id, source) => compositorRef.current?.register(id, source),\n      unregister: (id) => compositorRef.current?.unregister(id),\n      get: (id) => compositorRef.current?.get(id),\n      has: (id) => compositorRef.current?.has(id) ?? false,\n      list: () => compositorRef.current?.list() ?? [],\n      use: (id, source) => {\n        compositorRef.current?.register(id, source);\n        compositorRef.current?.activate(id);\n        return () => compositorRef.current?.unregister(id);\n      },\n\n      // Active source\n      activate: (id) => compositorRef.current?.activate(id),\n      deactivate: () => compositorRef.current?.deactivate(),\n      get activeId() {\n        return compositorRef.current?.activeId ?? null;\n      },\n\n      // Stream & size\n      stream,\n      size,\n      setSize: (w, h, d) =>\n        setSize({ width: w, height: h, dpr: d ?? size.dpr }),\n\n      // FPS\n      fps,\n      setFps: setFpsState,\n      sendFps,\n      setSendFps: setSendFpsState,\n\n      // Audio\n      addAudioTrack: (t) => compositorRef.current?.addAudioTrack(t),\n      removeAudioTrack: (id) => compositorRef.current?.removeAudioTrack(id),\n      unlockAudio: () =>\n        compositorRef.current?.unlockAudio() ?? Promise.resolve(false),\n\n      // Events\n      on: (event, cb) => compositorRef.current?.on(event, cb) ?? (() => {}),\n    }),\n    [stream, size, fps, sendFps],\n  );\n\n  return (\n    <CompositorContext.Provider value={api}>\n      {children}\n    </CompositorContext.Provider>\n  );\n}\n\nexport function useCompositor(): CompositorApi {\n  const ctx = useContext(CompositorContext);\n  if (!ctx) {\n    throw new Error(\"useCompositor must be used within <CompositorProvider>\");\n  }\n  return ctx;\n}\n","\"use client\";\n\nimport { useEffect, useRef, useState, useCallback, useMemo } from \"react\";\nimport type { Source, FitMode, ContentHint } from \"@daydreamlive/browser\";\nimport { useCompositor } from \"./useCompositor\";\n\nexport interface UseSourceOptions {\n  kind: \"video\" | \"canvas\";\n  contentHint?: ContentHint;\n  fit?: FitMode;\n}\n\nexport interface UseSourceReturn<\n  T extends HTMLVideoElement | HTMLCanvasElement,\n> {\n  ref: React.RefObject<T>;\n  isActive: boolean;\n  activate: () => void;\n  deactivate: () => void;\n}\n\nexport function useSource<\n  T extends HTMLVideoElement | HTMLCanvasElement =\n    | HTMLVideoElement\n    | HTMLCanvasElement,\n>(id: string, options: UseSourceOptions): UseSourceReturn<T> {\n  const compositor = useCompositor();\n  const compositorRef = useRef(compositor);\n  compositorRef.current = compositor;\n\n  const ref = useRef<T>(null);\n  const [isActive, setIsActive] = useState(false);\n  const registeredRef = useRef(false);\n  const idRef = useRef(id);\n  idRef.current = id;\n\n  const { kind, contentHint, fit } = options;\n\n  const optionsRef = useRef({ kind, contentHint, fit });\n  optionsRef.current = { kind, contentHint, fit };\n\n  const registerSource = useCallback((element: T) => {\n    const { kind, contentHint, fit } = optionsRef.current;\n    const source =\n      kind === \"video\"\n        ? {\n            kind: \"video\" as const,\n            element: element as HTMLVideoElement,\n            contentHint,\n            fit,\n          }\n        : {\n            kind: \"canvas\" as const,\n            element: element as HTMLCanvasElement,\n            contentHint,\n          };\n\n    compositorRef.current.register(idRef.current, source);\n    registeredRef.current = true;\n  }, []);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    registerSource(element);\n  }, [id, kind, contentHint, fit, registerSource]);\n\n  useEffect(() => {\n    const currentId = id;\n    return () => {\n      if (registeredRef.current) {\n        registeredRef.current = false;\n        setIsActive(false);\n        compositorRef.current.unregister(currentId);\n      }\n    };\n  }, [id]);\n\n  useEffect(() => {\n    setIsActive(compositor.activeId === id);\n  }, [compositor.activeId, id]);\n\n  const activate = useCallback(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    if (!registeredRef.current) {\n      registerSource(element);\n    }\n\n    compositorRef.current.activate(idRef.current);\n    setIsActive(true);\n  }, [registerSource]);\n\n  const deactivate = useCallback(() => {\n    if (compositorRef.current.activeId === idRef.current) {\n      compositorRef.current.deactivate();\n      setIsActive(false);\n    }\n  }, []);\n\n  return useMemo(\n    () => ({\n      ref,\n      isActive,\n      activate,\n      deactivate,\n    }),\n    [isActive, activate, deactivate],\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,sBAAAA;AAAA,EAAA;AAAA,mBAAAC;AAAA,EAAA;AAAA;AAAA;AAAA,IAAAC,kBAA8C;;;ACA9C,mBAAyD;AAwClD,SAAS,aACd,SACA,SACoB;AACpB,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,EAAE,OAAO,OAAO,CAAC;AAC1E,QAAM,mBAAe,qBAAyB,IAAI;AAClD,QAAM,iBAAa,qBAAsB,IAAI;AAC7C,QAAM,iBAAa,qBAAO,OAAO;AACjC,QAAM,iBAAa,qBAAO,OAAO;AAEjC,8BAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,8BAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,SAAS,KAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,0BAAY,CAAC,UAA0B,UAA0B;AACpF,UAAM,UAAU,WAAW;AAC3B,YAAQ,UAAU;AAAA,MAChB,KAAK;AACH,kBAAU,EAAE,OAAO,aAAa,CAAC;AACjC;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,QAAQ,QAAkB,CAAC;AAC9C;AAAA,MACF,KAAK;AAEH;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,QAAQ,CAAC;AAC5B;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,SAAS,MAAc,CAAC;AAC3C;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ,0BAAY,OAAO,WAAwB;AACvD,QAAI,aAAa,SAAS;AACxB,YAAM,aAAa,QAAQ,KAAK;AAChC,mBAAa,UAAU;AAAA,IACzB;AAEA,cAAU,EAAE,OAAO,aAAa,CAAC;AAEjC,UAAM,YAAY,WAAW,QAAQ;AAAA,MACnC;AAAA,MACA,GAAG,WAAW;AAAA,IAChB,CAAC;AAED,iBAAa,UAAU;AAEvB,cAAU,GAAG,eAAe,CAAC,aAAa;AAExC,UAAI,aAAa,YAAY,UAAW;AACxC,UAAI,aAAa,UAAU,aAAa,gBAAgB;AACtD,mBAAW,UAAU,UAAU;AAAA,MACjC;AACA,mBAAa,QAAQ;AAAA,IACvB,CAAC;AAED,cAAU,GAAG,SAAS,CAAC,QAAQ;AAC7B,UAAI,aAAa,YAAY,UAAW;AACxC,mBAAa,SAAS,GAAG;AAAA,IAC3B,CAAC;AAED,cAAU,GAAG,aAAa,CAAC,SAAS;AAClC,UAAI,aAAa,YAAY,UAAW;AACxC,gBAAU;AAAA,QACR,OAAO;AAAA,QACP,SAAS,WAAW;AAAA,QACpB,eAAe;AAAA,MACjB,CAAC;AAAA,IACH,CAAC;AAED,QAAI;AACF,YAAM,UAAU,QAAQ;AACxB,UAAI,aAAa,YAAY,UAAW;AACxC,iBAAW,UAAU,UAAU;AAC/B,mBAAa,UAAU,KAAK;AAAA,IAC9B,SAAS,KAAK;AACZ,UAAI,aAAa,YAAY,UAAW;AACxC,gBAAU,EAAE,OAAO,SAAS,OAAO,IAAqB,CAAC;AACzD,YAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,WAAO,0BAAY,YAAY;AACnC,UAAM,aAAa,SAAS,KAAK;AACjC,iBAAa,UAAU;AACvB,eAAW,UAAU;AACrB,cAAU,EAAE,OAAO,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,CAAC,QAAiB;AACpD,iBAAa,SAAS,gBAAgB,GAAG;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACxJA,IAAAC,gBAMO;AAwCA,SAAS,UACd,SACA,SACA,SACiB;AACjB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAA0B,EAAE,OAAO,OAAO,CAAC;AACvE,QAAM,gBAAY,sBAAsB,IAAI;AAC5C,QAAM,eAAW,sBAAgC,IAAI;AACrD,QAAM,iBAAa,sBAAO,OAAO;AACjC,QAAM,iBAAa,sBAAO,OAAO;AACjC,QAAM,iBAAa,sBAAO,OAAO;AAEjC,+BAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,+BAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,+BAAU,MAAM;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,+BAAU,MAAM;AACd,WAAO,MAAM;AACX,gBAAU,SAAS,KAAK;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,2BAAY,CAAC,UAAuB,UAA0B;AACjF,YAAQ,UAAU;AAAA,MAChB,KAAK;AACH,kBAAU,EAAE,OAAO,aAAa,CAAC;AACjC;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,UAAU,CAAC;AAC9B;AAAA,MACF,KAAK;AAEH;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,QAAQ,CAAC;AAC5B;AAAA,MACF,KAAK;AACH,kBAAU,EAAE,OAAO,SAAS,MAAc,CAAC;AAC3C;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,WAAO,2BAAY,YAAY;AACnC,UAAM,iBAAiB,WAAW;AAClC,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAEA,QAAI,UAAU,SAAS;AACrB,YAAM,UAAU,QAAQ,KAAK;AAC7B,gBAAU,UAAU;AAAA,IACtB;AAEA,cAAU,EAAE,OAAO,aAAa,CAAC;AAEjC,UAAM,SAAS,WAAW,QAAQ,gBAAgB;AAAA,MAChD,WAAW,WAAW,SAAS;AAAA,MAC/B,YAAY,WAAW,SAAS;AAAA,MAChC,mBAAmB,WAAW,SAAS;AAAA,MACvC,kBAAkB,WAAW,SAAS;AAAA,MACtC,SAAS,WAAW,SAAS;AAAA,MAC7B,iBAAiB,WAAW,SAAS;AAAA,IACvC,CAAC;AAED,cAAU,UAAU;AAEpB,WAAO,GAAG,eAAe,CAAC,aAAa;AAErC,UAAI,UAAU,YAAY,OAAQ;AAClC,mBAAa,QAAQ;AAErB,UAAI,aAAa,aAAa,SAAS,WAAW,OAAO,QAAQ;AAC/D,YAAI,SAAS,QAAQ,cAAc,OAAO,QAAQ;AAChD,iBAAO,SAAS,SAAS,OAAO;AAAA,QAClC;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,GAAG,SAAS,CAAC,QAAQ;AAC1B,UAAI,UAAU,YAAY,OAAQ;AAClC,mBAAa,SAAS,GAAG;AAAA,IAC3B,CAAC;AAED,WAAO,GAAG,aAAa,CAAC,SAAS;AAC/B,UAAI,UAAU,YAAY,OAAQ;AAClC,gBAAU,EAAE,OAAO,aAAa,eAAe,KAAK,CAAC;AAAA,IACvD,CAAC;AAED,QAAI;AACF,YAAM,OAAO,QAAQ;AACrB,UAAI,UAAU,YAAY,OAAQ;AAClC,mBAAa,OAAO,KAAK;AAEzB,UAAI,SAAS,SAAS;AACpB,eAAO,SAAS,SAAS,OAAO;AAChC,YAAI,WAAW,SAAS,aAAa,OAAO;AAC1C,cAAI;AACF,kBAAM,SAAS,QAAQ,KAAK;AAAA,UAC9B,QAAQ;AAAA,UAER;AAAA,QACF;AAAA,MACF;AAAA,IACF,SAAS,KAAK;AACZ,UAAI,UAAU,YAAY,OAAQ;AAClC,gBAAU,EAAE,OAAO,SAAS,OAAO,IAAqB,CAAC;AACzD,YAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,WAAO,2BAAY,YAAY;AACnC,UAAM,UAAU,SAAS,KAAK;AAC9B,cAAU,UAAU;AACpB,cAAU,EAAE,OAAO,OAAO,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AC9KA,IAAAC,gBASO;AACP,qBAMO;AA0LH;AAjIJ,IAAM,wBAAoB,6BAAoC,IAAI;AAM3D,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK,aAAa;AAAA,EAClB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACvB,GAA4B;AAC1B,QAAM,oBAAgB,sBAA0B,IAAI;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAA6B,IAAI;AAC7D,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAe;AAAA,IACrC;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,MACR;AAAA,MACA,QAAQ,OAAO,WAAW,cAAc,OAAO,oBAAoB,IAAI;AAAA,IACzE;AAAA,EACF,CAAC;AACD,QAAM,CAAC,KAAK,WAAW,QAAI,wBAAS,UAAU;AAC9C,QAAM,CAAC,SAAS,eAAe,QAAI,wBAAS,kBAAkB,UAAU;AAGxE,qCAAgB,MAAM;AACpB,UAAM,iBAAa,iCAAiB;AAAA,MAClC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB,CAAC,WAAW,gBAAgB,MAAM;AAAA,IACrD,CAAC;AAED,kBAAc,UAAU;AACxB,cAAU,WAAW,MAAM;AAC3B,YAAQ,WAAW,IAAI;AAEvB,WAAO,MAAM;AACX,iBAAW,QAAQ;AACnB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,+BAAU,MAAM;AACd,UAAM,aAAa,cAAc;AACjC,QAAI,CAAC,WAAY;AAEjB,eAAW,OAAO,KAAK,OAAO,KAAK,QAAQ,KAAK,GAAG;AACnD,cAAU,WAAW,MAAM;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,KAAK,QAAQ,KAAK,GAAG,CAAC;AAGtC,+BAAU,MAAM;AACd,UAAM,aAAa,cAAc;AACjC,QAAI,CAAC,WAAY;AAEjB,eAAW,OAAO,GAAG;AACrB,cAAU,WAAW,MAAM;AAAA,EAC7B,GAAG,CAAC,GAAG,CAAC;AAGR,+BAAU,MAAM;AACd,UAAM,aAAa,cAAc;AACjC,QAAI,CAAC,WAAY;AAEjB,eAAW,WAAW,OAAO;AAAA,EAC/B,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAM,UAAM;AAAA,IACV,OAAO;AAAA;AAAA,MAEL,UAAU,CAAC,IAAI,WAAW,cAAc,SAAS,SAAS,IAAI,MAAM;AAAA,MACpE,YAAY,CAAC,OAAO,cAAc,SAAS,WAAW,EAAE;AAAA,MACxD,KAAK,CAAC,OAAO,cAAc,SAAS,IAAI,EAAE;AAAA,MAC1C,KAAK,CAAC,OAAO,cAAc,SAAS,IAAI,EAAE,KAAK;AAAA,MAC/C,MAAM,MAAM,cAAc,SAAS,KAAK,KAAK,CAAC;AAAA,MAC9C,KAAK,CAAC,IAAI,WAAW;AACnB,sBAAc,SAAS,SAAS,IAAI,MAAM;AAC1C,sBAAc,SAAS,SAAS,EAAE;AAClC,eAAO,MAAM,cAAc,SAAS,WAAW,EAAE;AAAA,MACnD;AAAA;AAAA,MAGA,UAAU,CAAC,OAAO,cAAc,SAAS,SAAS,EAAE;AAAA,MACpD,YAAY,MAAM,cAAc,SAAS,WAAW;AAAA,MACpD,IAAI,WAAW;AACb,eAAO,cAAc,SAAS,YAAY;AAAA,MAC5C;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA,SAAS,CAAC,GAAG,GAAG,MACd,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,KAAK,KAAK,IAAI,CAAC;AAAA;AAAA,MAGrD;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,YAAY;AAAA;AAAA,MAGZ,eAAe,CAAC,MAAM,cAAc,SAAS,cAAc,CAAC;AAAA,MAC5D,kBAAkB,CAAC,OAAO,cAAc,SAAS,iBAAiB,EAAE;AAAA,MACpE,aAAa,MACX,cAAc,SAAS,YAAY,KAAK,QAAQ,QAAQ,KAAK;AAAA;AAAA,MAG/D,IAAI,CAAC,OAAO,OAAO,cAAc,SAAS,GAAG,OAAO,EAAE,MAAM,MAAM;AAAA,MAAC;AAAA,IACrE;AAAA,IACA,CAAC,QAAQ,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,SACE,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,KAChC,UACH;AAEJ;AAEO,SAAS,gBAA+B;AAC7C,QAAM,UAAM,0BAAW,iBAAiB;AACxC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO;AACT;;;ACtNA,IAAAC,gBAAkE;AAmB3D,SAAS,UAId,IAAY,SAA+C;AAC3D,QAAM,aAAa,cAAc;AACjC,QAAM,oBAAgB,sBAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,QAAM,UAAM,sBAAU,IAAI;AAC1B,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,KAAK;AAC9C,QAAM,oBAAgB,sBAAO,KAAK;AAClC,QAAM,YAAQ,sBAAO,EAAE;AACvB,QAAM,UAAU;AAEhB,QAAM,EAAE,MAAM,aAAa,IAAI,IAAI;AAEnC,QAAM,iBAAa,sBAAO,EAAE,MAAM,aAAa,IAAI,CAAC;AACpD,aAAW,UAAU,EAAE,MAAM,aAAa,IAAI;AAE9C,QAAM,qBAAiB,2BAAY,CAAC,YAAe;AACjD,UAAM,EAAE,MAAAC,OAAM,aAAAC,cAAa,KAAAC,KAAI,IAAI,WAAW;AAC9C,UAAM,SACJF,UAAS,UACL;AAAA,MACE,MAAM;AAAA,MACN;AAAA,MACA,aAAAC;AAAA,MACA,KAAAC;AAAA,IACF,IACA;AAAA,MACE,MAAM;AAAA,MACN;AAAA,MACA,aAAAD;AAAA,IACF;AAEN,kBAAc,QAAQ,SAAS,MAAM,SAAS,MAAM;AACpD,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,mBAAe,OAAO;AAAA,EACxB,GAAG,CAAC,IAAI,MAAM,aAAa,KAAK,cAAc,CAAC;AAE/C,+BAAU,MAAM;AACd,UAAM,YAAY;AAClB,WAAO,MAAM;AACX,UAAI,cAAc,SAAS;AACzB,sBAAc,UAAU;AACxB,oBAAY,KAAK;AACjB,sBAAc,QAAQ,WAAW,SAAS;AAAA,MAC5C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AAEP,+BAAU,MAAM;AACd,gBAAY,WAAW,aAAa,EAAE;AAAA,EACxC,GAAG,CAAC,WAAW,UAAU,EAAE,CAAC;AAE5B,QAAM,eAAW,2BAAY,MAAM;AACjC,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,QAAI,CAAC,cAAc,SAAS;AAC1B,qBAAe,OAAO;AAAA,IACxB;AAEA,kBAAc,QAAQ,SAAS,MAAM,OAAO;AAC5C,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,iBAAa,2BAAY,MAAM;AACnC,QAAI,cAAc,QAAQ,aAAa,MAAM,SAAS;AACpD,oBAAc,QAAQ,WAAW;AACjC,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,UAAU;AAAA,EACjC;AACF;;;AJjGO,SAASE,cAAa,SAAkD;AAC7E,SAAO,aAAiB,SAAS,+BAAe;AAClD;AAEO,SAASC,WACd,SACA,SACiB;AACjB,SAAO,UAAc,SAAS,SAAS,4BAAY;AACrD;","names":["useBroadcast","usePlayer","import_browser","import_react","import_react","import_react","kind","contentHint","fit","useBroadcast","usePlayer"]}