npm - @pipecat-ai/client-react - Versions diffs - 0.3.4 → 0.4.0 - Mend

@pipecat-ai/client-react 0.3.4 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,68 @@ export const RTVIClientAudio: {
     (): JSX.Element;
     displayName: string;
 };
+/**
+ * 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;
@@ -59,9 +121,12 @@ 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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/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/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,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 CHANGED Viewed

@@ -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,108 @@ $e6a9aa6ceb34e585$export$ba1245f7cbf3ae02.displayName = "RTVIClientAudio";
+const $affd351738e2f16c$export$46099a7ec2fe8ac5 = ()=>{
+    const client = (0, $8ee07494475a7fa7$export$31a5f6a22c9b8fba)();
+    const [isCamEnabled, setIsCamEnabled] = (0, $5Zyvw$react.useState)(client?.isCamEnabled ?? false);
+    // Sync component state with client state initially
+    (0, $5Zyvw$react.useEffect)(()=>{
+        if (!client) return;
+        setIsCamEnabled(client.isCamEnabled);
+    }, [
+        client
+    ]);
+    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);
+    // Sync component state with client state initially
+    (0, $5Zyvw$react.useEffect)(()=>{
+        if (!client) return;
+        setIsMicEnabled(client.isMicEnabled);
+    }, [
+        client
+    ]);
+    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 +440,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 +455,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,6 +522,7 @@ const $01bcacdf0a25e20c$export$652c54907b83a48d = ()=>{
 /**
  * Copyright (c) 2024, Daily.
  *
@@ -414,12 +541,12 @@ const $6b6c1a9f794236bd$export$599fa01283bd4ece = ()=>{
-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 +556,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 +570,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,
-                smoothValue: 0
-            },
-            {
-                startFreq: 255,
-                endFreq: 500,
-                smoothValue: 0
-            },
-            {
-                startFreq: 500,
-                endFreq: 2000,
+        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: 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 +619,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 +645,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 +698,11 @@ const $a1dfa75b13e6bb9b$export$59bf27bd43679db6 = /*#__PURE__*/ (0, ($parcel$int
     }, [
         backgroundColor,
         barColor,
+        barCount,
         barGap,
+        barLineCap,
         barMaxHeight,
+        barOrigin,
         barWidth,
         track
     ]);