@pipecat-ai/client-react 0.3.5 → 0.4.1

package/README.md

@@ -93,17 +93,58 @@ Creates a new `<video>` element that renders either the bot or local participant
 />
 ```
 
+### RTVIClientCamToggle
+
+This is a stateful headless component and exposes the user's camEnabled state and an `onClick` handler to toggle the state.
+
+#### Props
+
+- `onCamEnabledChanged(enabled: boolean)` (function, optional): Triggered when the user's camEnabled state changes
+- `disabled` (boolean, optional): Disables the cam toggle
+
+```jsx
+<RTVIClientCamToggle>
+  {({ disabled, isCamEnabled, onClick }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {isCamEnabled ? "Turn off" : "Turn on"} camera
+    </button>
+  )}
+</RTVIClientCamToggle>
+```
+
+### RTVIClientMicToggle
+
+This is a stateful headless component and exposes the user's micEnabled state and an `onClick` handler to toggle the state.
+
+#### Props
+
+- `onMicEnabledChanged(enabled: boolean)` (function, optional): Triggered when the user's micEnabled state changes
+- `disabled` (boolean, optional): Disables the mic toggle
+
+```jsx
+<RTVIClientMicToggle>
+  {({ disabled, isMicEnabled, onClick }) => (
+    <button disabled={disabled} onClick={onClick}>
+      {isMicEnabled ? "Mute" : "Unmute"} microphone
+    </button>
+  )}
+</RTVIClientMicToggle>
+```
+
 ### VoiceVisualizer
 
 Renders a visual representation of audio input levels on a `<canvas>` element.
-The visualization consists of five vertical bars.
+The visualization consists of vertical bars.
 
 #### Props
 
 - `participantType` (string, required): The participant type to visualize audio for.
 - `backgroundColor` (string, optional): The background color of the canvas. Default: 'transparent'.
 - `barColor` (string, optional): The color of the audio level bars. Default: 'black'.
+- `barCount` (number, optional): The amount of bars to render. Default: 5
 - `barGap` (number, optional): The gap between bars in pixels. Default: 12.
+- `barLineCap` ('round' | 'square', optional): The line cap for each bar. Default: 'round'
+- `barOrigin` ('bottom' | 'center' | 'top', optional): The origin from where the bars grow to full height. Default: 'center'
 - `barWidth` (number, optional): The width of each bar in pixels. Default: 30.
 - `barMaxHeight` (number, optional): The maximum height at full volume of each bar in pixels. Default: 120.
 
@@ -157,6 +198,30 @@ function EventListener() {
 }
 ```
 
+### useRTVIClientCamControl
+
+Allows to control the user's camera state.
+
+```jsx
+import { useRTVIClientCamControl } from "@pipecat-ai/client-react";
+
+function CustomCamToggle() {
+  const { enableCam, isCamEnabled } = useRTVIClientCamControl();
+}
+```
+
+### useRTVIClientMicControl
+
+Allows to control the user's microphone state.
+
+```jsx
+import { useRTVIClientMicControl } from "@pipecat-ai/client-react";
+
+function CustomMicToggle() {
+  const { enableMic, isMicEnabled } = useRTVIClientMicControl();
+}
+```
+
 ### useRTVIClientMediaDevices
 
 Manage and list available media devices.

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { RTVIClient, RTVIEvent, RTVIEventHandler, Tracks, TransportState } from "@pipecat-ai/client-js";
 import { Provider } from "jotai/react";
-import { JSX } from "react/jsx-runtime";
 import React from "react";
+import { JSX } from "react/jsx-runtime";
 interface Props {
     client: RTVIClient;
     jotaiStore?: React.ComponentProps<typeof Provider>["store"];
@@ -16,6 +16,69 @@ export const RTVIClientAudio: {
     (): JSX.Element;
     displayName: string;
 };
+export const useRTVIClientTransportState: () => TransportState;
+/**
+ * Hook to control camera state
+ */
+export const useRTVIClientCamControl: () => {
+    enableCam: (enabled: boolean) => void;
+    isCamEnabled: boolean;
+};
+interface RTVIClientCamToggleProps {
+    /**
+     * Callback fired when camera state changes
+     */
+    onCamEnabledChanged?: (enabled: boolean) => void;
+    /**
+     * Optional prop to disable the cam toggle.
+     * When disabled, changes are not applied to the client.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Render prop that provides state and handlers to the children
+     */
+    children: (props: {
+        disabled?: boolean;
+        isCamEnabled: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Headless component for controlling camera state
+ */
+export const RTVIClientCamToggle: React.FC<RTVIClientCamToggleProps>;
+/**
+ * Hook to control microphone state
+ */
+export const useRTVIClientMicControl: () => {
+    enableMic: (enabled: boolean) => void;
+    isMicEnabled: boolean;
+};
+interface RTVIClientMicToggleProps {
+    /**
+     * Callback fired when microphone state changes
+     */
+    onMicEnabledChanged?: (enabled: boolean) => void;
+    /**
+     * Optional prop to disable the mic toggle.
+     * When disabled, changes are not applied to the client.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Render prop that provides state and handlers to the children
+     */
+    children: (props: {
+        disabled?: boolean;
+        isMicEnabled: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Headless component for controlling microphone state
+ */
+export const RTVIClientMicToggle: React.FC<RTVIClientMicToggleProps>;
 interface RTVIClientVideoInterface {
     aspectRatio: number;
     height: number;
@@ -54,14 +117,16 @@ export const useRTVIClientMediaDevices: () => {
     updateMic: (id: string) => void;
     updateSpeaker: (id: string) => void;
 };
-export const useRTVIClientTransportState: () => TransportState;
 type _ParticipantType1 = Parameters<typeof useRTVIClientMediaTrack>[1];
 interface _Props2 {
     backgroundColor?: string;
     barColor?: string;
+    barCount?: number;
     barGap?: number;
-    barWidth?: number;
+    barLineCap?: "round" | "square";
     barMaxHeight?: number;
+    barOrigin?: "top" | "bottom" | "center";
+    barWidth?: number;
     participantType: _ParticipantType1;
 }
 export const VoiceVisualizer: React.FC<_Props2>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;AAYA;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,cAAc,CAAC,eAAoB,CAAC,CAAC,OAAO,CAAC,CAAC;CAClE;AAMD,OAAO,MAAM,oBAAoB,MAAM,EAAE,CAAC,MAAM,iBAAiB,CAAC,KAAK,CAAC,CAYvE,CAAC;ACxBF,OAAO,MAAM,2CAGZ,CAAC;ACFF,OAAO,MAAM,qBAAsB,CAAC,SAAS,SAAS,SAC7C,CAAC,WACC,iBAAiB,CAAC,CAAC,SAW7B,CAAC;ACTF,uBAAuB,MAAM,MAAM,CAAC;AACpC,iBAAiB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AA4BvC,OAAO,MAAM,qCACA,SAAS,mBACH,eAAe,4BAoDjC,CAAC;ACtFF,OAAO,MAAM;;;CA6BZ,CAAC;AE9BF;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBACE,SAAQ,IAAI,CAAC,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,CAAC,UAAU,EAAE,wBAAwB,GAAG,IAAI,CAAC;CACvD;AAED,OAAO,MAAM,iGAwJZ,CAAC;AC1LF,+BAA+B,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AASvE,OAAO,MAAM;;;;;;;oBA4DJ,MAAM;oBAMN,MAAM;wBAMN,MAAM;CAiBd,CAAC;AC7FF,OAAO,MAAM,iDAMZ,CAAC;ACTF,yBAAuB,UAAU,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE;IACE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,iBAAe,CAAC;CAClC;AAED,OAAO,MAAM,iBAAiB,MAAM,EAAE,CAAC,OAAK,CAyM3C,CAAC","sources":["client-react/src/src/RTVIClientProvider.tsx","client-react/src/src/useRTVIClient.ts","client-react/src/src/useRTVIClientEvent.ts","client-react/src/src/useRTVIClientMediaTrack.ts","client-react/src/src/RTVIClientAudio.tsx","client-react/src/src/useMergedRef.ts","client-react/src/src/RTVIClientVideo.tsx","client-react/src/src/useRTVIClientMediaDevices.ts","client-react/src/src/useRTVIClientTransportState.ts","client-react/src/src/VoiceVisualizer.tsx","client-react/src/src/index.ts","client-react/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,"/**\n * Copyright (c) 2024, Daily.\n *\n * SPDX-License-Identifier: BSD-2-Clause\n */\n\nimport { RTVIClientAudio } from \"./RTVIClientAudio\";\nimport { RTVIClientProvider } from \"./RTVIClientProvider\";\nimport { RTVIClientVideo } from \"./RTVIClientVideo\";\nimport { useRTVIClient } from \"./useRTVIClient\";\nimport { useRTVIClientEvent } from \"./useRTVIClientEvent\";\nimport { useRTVIClientMediaDevices } from \"./useRTVIClientMediaDevices\";\nimport { useRTVIClientMediaTrack } from \"./useRTVIClientMediaTrack\";\nimport { useRTVIClientTransportState } from \"./useRTVIClientTransportState\";\nimport { VoiceVisualizer } from \"./VoiceVisualizer\";\n\nexport {\n  RTVIClientAudio,\n  RTVIClientProvider,\n  RTVIClientVideo,\n  useRTVIClient,\n  useRTVIClientEvent,\n  useRTVIClientMediaDevices,\n  useRTVIClientMediaTrack,\n  useRTVIClientTransportState,\n  VoiceVisualizer,\n};\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"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","sources":["client-react/src/src/RTVIClientProvider.tsx","client-react/src/src/useRTVIClient.ts","client-react/src/src/useRTVIClientEvent.ts","client-react/src/src/useRTVIClientMediaTrack.ts","client-react/src/src/RTVIClientAudio.tsx","client-react/src/src/useRTVIClientTransportState.ts","client-react/src/src/useRTVIClientCamControl.ts","client-react/src/src/RTVIClientCamToggle.tsx","client-react/src/src/useRTVIClientMicControl.ts","client-react/src/src/RTVIClientMicToggle.tsx","client-react/src/src/useMergedRef.ts","client-react/src/src/RTVIClientVideo.tsx","client-react/src/src/useRTVIClientMediaDevices.ts","client-react/src/src/VoiceVisualizer.tsx","client-react/src/src/index.ts","client-react/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/**\n * Copyright (c) 2024, Daily.\n *\n * SPDX-License-Identifier: BSD-2-Clause\n */\n\nimport { RTVIClientAudio } from \"./RTVIClientAudio\";\nimport { RTVIClientCamToggle } from \"./RTVIClientCamToggle\";\nimport { RTVIClientMicToggle } from \"./RTVIClientMicToggle\";\nimport { RTVIClientProvider } from \"./RTVIClientProvider\";\nimport { RTVIClientVideo } from \"./RTVIClientVideo\";\nimport { useRTVIClient } from \"./useRTVIClient\";\nimport { useRTVIClientCamControl } from \"./useRTVIClientCamControl\";\nimport { useRTVIClientEvent } from \"./useRTVIClientEvent\";\nimport { useRTVIClientMediaDevices } from \"./useRTVIClientMediaDevices\";\nimport { useRTVIClientMediaTrack } from \"./useRTVIClientMediaTrack\";\nimport { useRTVIClientMicControl } from \"./useRTVIClientMicControl\";\nimport { useRTVIClientTransportState } from \"./useRTVIClientTransportState\";\nimport { VoiceVisualizer } from \"./VoiceVisualizer\";\n\nexport {\n  RTVIClientAudio,\n  RTVIClientCamToggle,\n  RTVIClientMicToggle,\n  RTVIClientProvider,\n  RTVIClientVideo,\n  useRTVIClient,\n  useRTVIClientCamControl,\n  useRTVIClientEvent,\n  useRTVIClientMediaDevices,\n  useRTVIClientMediaTrack,\n  useRTVIClientMicControl,\n  useRTVIClientTransportState,\n  VoiceVisualizer,\n};\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -15,12 +15,16 @@ function $parcel$interopDefault(a) {
 }
 
 $parcel$export(module.exports, "RTVIClientAudio", () => $e6a9aa6ceb34e585$export$ba1245f7cbf3ae02);
+$parcel$export(module.exports, "RTVIClientCamToggle", () => $e7a27a30474b270e$export$156c26e16246ae3e);
+$parcel$export(module.exports, "RTVIClientMicToggle", () => $8a175691955798a2$export$bf1c2c9ca877628d);
 $parcel$export(module.exports, "RTVIClientProvider", () => $0befa35d025c789a$export$4a4ae2d5dc96782);
 $parcel$export(module.exports, "RTVIClientVideo", () => $c1952f9ddec789e5$export$d090a384943608eb);
 $parcel$export(module.exports, "useRTVIClient", () => $8ee07494475a7fa7$export$31a5f6a22c9b8fba);
+$parcel$export(module.exports, "useRTVIClientCamControl", () => $affd351738e2f16c$export$46099a7ec2fe8ac5);
 $parcel$export(module.exports, "useRTVIClientEvent", () => $8a6b68ebf0332682$export$33a6ac53b8f02625);
 $parcel$export(module.exports, "useRTVIClientMediaDevices", () => $01bcacdf0a25e20c$export$652c54907b83a48d);
 $parcel$export(module.exports, "useRTVIClientMediaTrack", () => $e5be552b22401c66$export$7c03381e0d26a6c3);
+$parcel$export(module.exports, "useRTVIClientMicControl", () => $b5946020fafb75c5$export$805915964ad7bc25);
 $parcel$export(module.exports, "useRTVIClientTransportState", () => $6b6c1a9f794236bd$export$599fa01283bd4ece);
 $parcel$export(module.exports, "VoiceVisualizer", () => $a1dfa75b13e6bb9b$export$59bf27bd43679db6);
 /**
@@ -125,18 +129,18 @@ const $e5be552b22401c66$export$7c03381e0d26a6c3 = (trackType, participantType)=>
         const oldTrack = get(atom);
         if (oldTrack?.id === track.id) return;
         set(atom, track);
-    }, [
-        participantType,
-        track,
-        trackType
-    ]));
+    }, []));
     (0, $8a6b68ebf0332682$export$33a6ac53b8f02625)((0, $5Zyvw$pipecataiclientjs.RTVIEvent).TrackStarted, (0, $5Zyvw$react.useCallback)((track, participant)=>{
         updateTrack(track, track.kind, Boolean(participant?.local));
-    }, []));
+    }, [
+        updateTrack
+    ]));
     (0, $8a6b68ebf0332682$export$33a6ac53b8f02625)((0, $5Zyvw$pipecataiclientjs.RTVIEvent).ScreenTrackStarted, (0, $5Zyvw$react.useCallback)((track, participant)=>{
         const trackType = track.kind === "audio" ? "screenAudio" : "screenVideo";
         updateTrack(track, trackType, Boolean(participant?.local));
-    }, []));
+    }, [
+        updateTrack
+    ]));
     (0, $5Zyvw$react.useEffect)(()=>{
         if (!client) return;
         const tracks = client.tracks();
@@ -186,6 +190,128 @@ $e6a9aa6ceb34e585$export$ba1245f7cbf3ae02.displayName = "RTVIClientAudio";
 
 
 
+
+/**
+ * Copyright (c) 2024, Daily.
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */ 
+
+
+const $6b6c1a9f794236bd$var$transportStateAtom = (0, $5Zyvw$jotai.atom)("disconnected");
+const $6b6c1a9f794236bd$export$599fa01283bd4ece = ()=>{
+    const [transportState, setTransportState] = (0, $5Zyvw$jotai.useAtom)($6b6c1a9f794236bd$var$transportStateAtom);
+    (0, $8a6b68ebf0332682$export$33a6ac53b8f02625)((0, $5Zyvw$pipecataiclientjs.RTVIEvent).TransportStateChanged, setTransportState);
+    return transportState;
+};
+
+
+const $affd351738e2f16c$export$46099a7ec2fe8ac5 = ()=>{
+    const client = (0, $8ee07494475a7fa7$export$31a5f6a22c9b8fba)();
+    const [isCamEnabled, setIsCamEnabled] = (0, $5Zyvw$react.useState)(client?.isCamEnabled ?? false);
+    const transportState = (0, $6b6c1a9f794236bd$export$599fa01283bd4ece)();
+    // Sync component state with client state initially
+    (0, $5Zyvw$react.useEffect)(()=>{
+        if (!client || transportState !== "initialized" || typeof client.isCamEnabled !== "boolean") return;
+        setIsCamEnabled(client.isCamEnabled);
+    }, [
+        client,
+        transportState
+    ]);
+    const enableCam = (0, $5Zyvw$react.useCallback)((enabled)=>{
+        setIsCamEnabled(enabled);
+        client?.enableCam?.(enabled);
+    }, [
+        client
+    ]);
+    return {
+        enableCam: enableCam,
+        isCamEnabled: isCamEnabled
+    };
+};
+
+
+const $e7a27a30474b270e$export$156c26e16246ae3e = ({ onCamEnabledChanged: onCamEnabledChanged, disabled: disabled = false, children: children })=>{
+    const { isCamEnabled: isCamEnabled, enableCam: enableCam } = (0, $affd351738e2f16c$export$46099a7ec2fe8ac5)();
+    const handleToggleCam = (0, $5Zyvw$react.useCallback)(()=>{
+        if (disabled) return;
+        const newEnabledState = !isCamEnabled;
+        enableCam(newEnabledState);
+        onCamEnabledChanged?.(newEnabledState);
+    }, [
+        disabled,
+        enableCam,
+        isCamEnabled,
+        onCamEnabledChanged
+    ]);
+    return (0, $5Zyvw$reactjsxruntime.jsx)((0, $5Zyvw$reactjsxruntime.Fragment), {
+        children: children({
+            isCamEnabled: isCamEnabled,
+            onClick: handleToggleCam,
+            disabled: disabled
+        })
+    });
+};
+var $e7a27a30474b270e$export$2e2bcd8739ae039 = $e7a27a30474b270e$export$156c26e16246ae3e;
+
+
+
+
+
+
+
+const $b5946020fafb75c5$export$805915964ad7bc25 = ()=>{
+    const client = (0, $8ee07494475a7fa7$export$31a5f6a22c9b8fba)();
+    const [isMicEnabled, setIsMicEnabled] = (0, $5Zyvw$react.useState)(client?.isMicEnabled ?? false);
+    const transportState = (0, $6b6c1a9f794236bd$export$599fa01283bd4ece)();
+    // Sync component state with client state initially
+    (0, $5Zyvw$react.useEffect)(()=>{
+        if (!client || transportState !== "initialized" || typeof client.isMicEnabled !== "boolean") return;
+        setIsMicEnabled(client.isMicEnabled);
+    }, [
+        client,
+        transportState
+    ]);
+    const enableMic = (0, $5Zyvw$react.useCallback)((enabled)=>{
+        setIsMicEnabled(enabled);
+        client?.enableMic?.(enabled);
+    }, [
+        client
+    ]);
+    return {
+        enableMic: enableMic,
+        isMicEnabled: isMicEnabled
+    };
+};
+
+
+const $8a175691955798a2$export$bf1c2c9ca877628d = ({ onMicEnabledChanged: onMicEnabledChanged, disabled: disabled = false, children: children })=>{
+    const { enableMic: enableMic, isMicEnabled: isMicEnabled } = (0, $b5946020fafb75c5$export$805915964ad7bc25)();
+    const handleToggleMic = (0, $5Zyvw$react.useCallback)(()=>{
+        if (disabled) return;
+        const newEnabledState = !isMicEnabled;
+        enableMic(newEnabledState);
+        onMicEnabledChanged?.(newEnabledState);
+    }, [
+        disabled,
+        enableMic,
+        isMicEnabled,
+        onMicEnabledChanged
+    ]);
+    return (0, $5Zyvw$reactjsxruntime.jsx)((0, $5Zyvw$reactjsxruntime.Fragment), {
+        children: children({
+            isMicEnabled: isMicEnabled,
+            onClick: handleToggleMic,
+            disabled: disabled
+        })
+    });
+};
+var $8a175691955798a2$export$2e2bcd8739ae039 = $8a175691955798a2$export$bf1c2c9ca877628d;
+
+
+
+
+
 /**
  * Copyright (c) 2024, Daily.
  *
@@ -334,6 +460,7 @@ $c1952f9ddec789e5$export$d090a384943608eb.displayName = "RTVIClientVideo";
 
 
 
+
 const $01bcacdf0a25e20c$var$availableMicsAtom = (0, $5Zyvw$jotai.atom)([]);
 const $01bcacdf0a25e20c$var$availableCamsAtom = (0, $5Zyvw$jotai.atom)([]);
 const $01bcacdf0a25e20c$var$availableSpeakersAtom = (0, $5Zyvw$jotai.atom)([]);
@@ -348,6 +475,25 @@ const $01bcacdf0a25e20c$export$652c54907b83a48d = ()=>{
     const selectedCam = (0, $5Zyvw$jotai.useAtomValue)($01bcacdf0a25e20c$var$selectedCamAtom);
     const selectedMic = (0, $5Zyvw$jotai.useAtomValue)($01bcacdf0a25e20c$var$selectedMicAtom);
     const selectedSpeaker = (0, $5Zyvw$jotai.useAtomValue)($01bcacdf0a25e20c$var$selectedSpeakerAtom);
+    const initDevices = (0, $5Zyvw$jotaiutils.useAtomCallback)((0, $5Zyvw$react.useCallback)(async (_get, set)=>{
+        if (!client) return;
+        const availableCams = await client.getAllCams();
+        const availableMics = await client.getAllMics();
+        const availableSpeakers = await client.getAllSpeakers();
+        set($01bcacdf0a25e20c$var$availableCamsAtom, availableCams);
+        set($01bcacdf0a25e20c$var$availableMicsAtom, availableMics);
+        set($01bcacdf0a25e20c$var$availableSpeakersAtom, availableSpeakers);
+        set($01bcacdf0a25e20c$var$selectedCamAtom, client.selectedCam);
+        set($01bcacdf0a25e20c$var$selectedMicAtom, client.selectedMic);
+        set($01bcacdf0a25e20c$var$selectedSpeakerAtom, client.selectedSpeaker);
+    }, [
+        client
+    ]));
+    (0, $5Zyvw$react.useEffect)(()=>{
+        initDevices();
+    }, [
+        initDevices
+    ]);
     (0, $8a6b68ebf0332682$export$33a6ac53b8f02625)((0, $5Zyvw$pipecataiclientjs.RTVIEvent).AvailableCamsUpdated, (0, $5Zyvw$jotaiutils.useAtomCallback)((0, $5Zyvw$react.useCallback)((_get, set, cams)=>{
         set($01bcacdf0a25e20c$var$availableCamsAtom, cams);
     }, [])));
@@ -396,30 +542,17 @@ const $01bcacdf0a25e20c$export$652c54907b83a48d = ()=>{
 
 
 
-/**
- * Copyright (c) 2024, Daily.
- *
- * SPDX-License-Identifier: BSD-2-Clause
- */ 
-
-
-const $6b6c1a9f794236bd$var$transportStateAtom = (0, $5Zyvw$jotai.atom)("disconnected");
-const $6b6c1a9f794236bd$export$599fa01283bd4ece = ()=>{
-    const [transportState, setTransportState] = (0, $5Zyvw$jotai.useAtom)($6b6c1a9f794236bd$var$transportStateAtom);
-    (0, $8a6b68ebf0332682$export$33a6ac53b8f02625)((0, $5Zyvw$pipecataiclientjs.RTVIEvent).TransportStateChanged, setTransportState);
-    return transportState;
-};
 
 
 
 
 
-const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$interopDefault($5Zyvw$react))).memo(({ backgroundColor: backgroundColor = "transparent", barColor: barColor = "black", barWidth: barWidth = 30, barGap: barGap = 12, barMaxHeight: barMaxHeight = 120, participantType: participantType })=>{
+const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$interopDefault($5Zyvw$react))).memo(({ backgroundColor: backgroundColor = "transparent", barColor: barColor = "black", barCount: barCount = 5, barGap: barGap = 12, barLineCap: barLineCap = "round", barMaxHeight: barMaxHeight = 120, barOrigin: barOrigin = "center", barWidth: barWidth = 30, participantType: participantType })=>{
     const canvasRef = (0, $5Zyvw$react.useRef)(null);
     const track = (0, $e5be552b22401c66$export$7c03381e0d26a6c3)("audio", participantType);
     (0, $5Zyvw$react.useEffect)(()=>{
         if (!canvasRef.current) return;
-        const canvasWidth = 5 * barWidth + 4 * barGap;
+        const canvasWidth = barCount * barWidth + (barCount - 1) * barGap;
         const canvasHeight = barMaxHeight;
         const canvas = canvasRef.current;
         const scaleFactor = 2;
@@ -429,7 +562,7 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
             canvas.height = canvasHeight * scaleFactor;
             canvas.style.width = `${canvasWidth}px`;
             canvas.style.height = `${canvasHeight}px`;
-            canvasCtx.lineCap = "round";
+            canvasCtx.lineCap = barLineCap;
             canvasCtx.scale(scaleFactor, scaleFactor);
         };
         const canvasCtx = canvas.getContext("2d");
@@ -443,34 +576,29 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
         analyser.fftSize = 1024;
         source.connect(analyser);
         const frequencyData = new Uint8Array(analyser.frequencyBinCount);
-        canvasCtx.lineCap = "round";
-        const bands = [
-            {
-                startFreq: 85,
-                endFreq: 255,
+        canvasCtx.lineCap = barLineCap;
+        // Create frequency bands based on barCount
+        const bands = Array.from({
+            length: barCount
+        }, (_, i)=>{
+            // Use improved logarithmic scale for better frequency distribution
+            const minFreq = barCount > 20 ? 200 : 80; // Adjust min frequency based on bar count
+            const maxFreq = 10000; // Cover most important audio frequencies
+            // Use Mel scale inspired approach for more perceptually uniform distribution
+            // This helps with a large number of bars by placing fewer in the very low range
+            // https://en.wikipedia.org/wiki/Mel_scale
+            const melMin = 2595 * Math.log10(1 + minFreq / 700);
+            const melMax = 2595 * Math.log10(1 + maxFreq / 700);
+            const melStep = (melMax - melMin) / barCount;
+            const melValue = melMin + i * melStep;
+            const startFreq = 700 * (Math.pow(10, melValue / 2595) - 1);
+            const endFreq = 700 * (Math.pow(10, (melValue + melStep) / 2595) - 1);
+            return {
+                startFreq: startFreq,
+                endFreq: endFreq,
                 smoothValue: 0
-            },
-            {
-                startFreq: 255,
-                endFreq: 500,
-                smoothValue: 0
-            },
-            {
-                startFreq: 500,
-                endFreq: 2000,
-                smoothValue: 0
-            },
-            {
-                startFreq: 2000,
-                endFreq: 4000,
-                smoothValue: 0
-            },
-            {
-                startFreq: 4000,
-                endFreq: 8000,
-                smoothValue: 0
-            }
-        ];
+            };
+        });
         const getFrequencyBinIndex = (frequency)=>{
             const nyquist = audioContext.sampleRate / 2;
             return Math.round(frequency / nyquist * (analyser.frequencyBinCount - 1));
@@ -497,9 +625,25 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
                 }
                 const x = startX + i * (barWidth + barGap);
                 // Calculate bar height with a maximum cap
-                const barHeight = Math.min(band.smoothValue / 255 * barMaxHeight, barMaxHeight);
-                const yTop = Math.max(canvas.height / scaleFactor / 2 - barHeight / 2, adjustedCircleRadius);
-                const yBottom = Math.min(canvas.height / scaleFactor / 2 + barHeight / 2, canvas.height / scaleFactor - adjustedCircleRadius);
+                const minHeight = 0;
+                const barHeight = Math.max(minHeight, Math.min(band.smoothValue / 255 * barMaxHeight, barMaxHeight));
+                let yTop, yBottom;
+                const canvasHeight = canvas.height / scaleFactor;
+                switch(barOrigin){
+                    case "top":
+                        yTop = adjustedCircleRadius;
+                        yBottom = Math.min(adjustedCircleRadius + barHeight, canvasHeight - adjustedCircleRadius);
+                        break;
+                    case "bottom":
+                        yBottom = canvasHeight - adjustedCircleRadius;
+                        yTop = Math.max(yBottom - barHeight, adjustedCircleRadius);
+                        break;
+                    case "center":
+                    default:
+                        yTop = Math.max(canvasHeight / 2 - barHeight / 2, adjustedCircleRadius);
+                        yBottom = Math.min(canvasHeight / 2 + barHeight / 2, canvasHeight - adjustedCircleRadius);
+                        break;
+                }
                 if (band.smoothValue > 0) {
                     canvasCtx.beginPath();
                     canvasCtx.moveTo(x + barWidth / 2, yTop);
@@ -507,28 +651,47 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
                     canvasCtx.lineWidth = barWidth;
                     canvasCtx.strokeStyle = barColor;
                     canvasCtx.stroke();
-                } else {
-                    canvasCtx.beginPath();
-                    canvasCtx.arc(x + barWidth / 2, canvas.height / scaleFactor / 2, adjustedCircleRadius, 0, 2 * Math.PI);
-                    canvasCtx.fillStyle = barColor;
-                    canvasCtx.fill();
-                    canvasCtx.closePath();
-                }
+                } else drawInactiveCircle(adjustedCircleRadius, barColor, x, yTop);
             });
             if (!isActive) drawInactiveCircles(adjustedCircleRadius, barColor);
             requestAnimationFrame(drawSpectrum);
         }
+        function drawInactiveCircle(circleRadius, color, x, y) {
+            switch(barLineCap){
+                case "square":
+                    canvasCtx.fillStyle = color;
+                    canvasCtx.fillRect(x + barWidth / 2 - circleRadius, y - circleRadius, circleRadius * 2, circleRadius * 2);
+                    break;
+                case "round":
+                default:
+                    canvasCtx.beginPath();
+                    canvasCtx.arc(x + barWidth / 2, y, circleRadius, 0, 2 * Math.PI);
+                    canvasCtx.fillStyle = color;
+                    canvasCtx.fill();
+                    canvasCtx.closePath();
+                    break;
+            }
+        }
         function drawInactiveCircles(circleRadius, color) {
             const totalBarsWidth = bands.length * barWidth + (bands.length - 1) * barGap;
             const startX = (canvas.width / scaleFactor - totalBarsWidth) / 2;
-            const y = canvas.height / scaleFactor / 2;
+            const canvasHeight = canvas.height / scaleFactor;
+            let y;
+            switch(barOrigin){
+                case "top":
+                    y = circleRadius;
+                    break;
+                case "bottom":
+                    y = canvasHeight - circleRadius;
+                    break;
+                case "center":
+                default:
+                    y = canvasHeight / 2;
+                    break;
+            }
             bands.forEach((_, i)=>{
                 const x = startX + i * (barWidth + barGap);
-                canvasCtx.beginPath();
-                canvasCtx.arc(x + barWidth / 2, y, circleRadius, 0, 2 * Math.PI);
-                canvasCtx.fillStyle = color;
-                canvasCtx.fill();
-                canvasCtx.closePath();
+                drawInactiveCircle(circleRadius, color, x, y);
             });
         }
         drawSpectrum();
@@ -541,8 +704,11 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
     }, [
         backgroundColor,
         barColor,
+        barCount,
         barGap,
+        barLineCap,
         barMaxHeight,
+        barOrigin,
         barWidth,
         track
     ]);