@fishjam-cloud/react-client 0.25.3 → 0.26.0-rc.0

package/dist/hooks/internal/devices/useDeviceManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/devices/useDeviceManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMtF,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,gBAAgB,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,eAAe,GAAG,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IACnG,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,GAAG,SAAS,CAAC;IACxG,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,eAAe,CAAC;IACnC,eAAe,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnF,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAsCF,eAAO,MAAM,gBAAgB,GAAI,qKAY9B,kBAAkB,KAAG,aAiIvB,CAAC"}
+{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/devices/useDeviceManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMtF,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,gBAAgB,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,eAAe,GAAG,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IACnG,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,GAAG,SAAS,CAAC;IACxG,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,eAAe,CAAC;IACnC,eAAe,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnF,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAiBF,eAAO,MAAM,gBAAgB,GAAI,qKAY9B,kBAAkB,KAAG,aA0IvB,CAAC"}

package/dist/hooks/internal/devices/useDeviceManager.js

@@ -1,24 +1,8 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { parseUserMediaError } from "../../../utils/errors";
 import { getTrackFromStream, stopStream } from "../../../utils/track";
 import { useTrackMiddleware } from "../useTrackMiddleware";
 import { useHandleTrackEnd } from "./useHandleTrackEnd";
-function getReplaceStreamAction(newStream, deviceType) {
-    return (oldStream) => {
-        if (oldStream) {
-            stopStream(oldStream, deviceType);
-        }
-        return newStream;
-    };
-}
-function getStopStreamAction(deviceType) {
-    return (oldStream) => {
-        if (oldStream) {
-            stopStream(oldStream, deviceType);
-        }
-        return null;
-    };
-}
 async function getDeviceStream(type, constraints, deviceId) {
     constraints = typeof constraints === "object" ? constraints : {};
     if (deviceId) {
@@ -30,6 +14,8 @@ async function getDeviceStream(type, constraints, deviceId) {
     return stream;
 }
 export const useDeviceManager = ({ mediaStream, setMediaStream, getInitialStream, deviceType, constraints, allDevicesList, setSelectedDevice, deviceError, setDeviceError, selectedDevice, logger, }) => {
+    const mediaStreamRef = useRef(mediaStream);
+    mediaStreamRef.current = mediaStream;
     const rawTrack = useMemo(() => mediaStream && getTrackFromStream(mediaStream, deviceType), [mediaStream, deviceType]);
     const clearStream = useCallback(() => {
         setMediaStream(null);
@@ -61,7 +47,10 @@ export const useDeviceManager = ({ mediaStream, setMediaStream, getInitialStream
         }
         try {
             const stream = await getDeviceStream(deviceType, constraints, deviceId ?? null);
-            setMediaStream(getReplaceStreamAction(stream, deviceType));
+            if (mediaStreamRef.current) {
+                stopStream(mediaStreamRef.current, deviceType);
+            }
+            setMediaStream(stream);
             const retrievedTrack = stream && getTrackFromStream(stream, deviceType);
             const retrievedTrackDeviceId = retrievedTrack.getSettings().deviceId;
             if (retrievedTrackDeviceId) {
@@ -97,7 +86,10 @@ export const useDeviceManager = ({ mediaStream, setMediaStream, getInitialStream
         }
     }, [currentTrack, setSelectedDeviceId, startDevice]);
     const stopDevice = useCallback(() => {
-        setMediaStream(getStopStreamAction(deviceType));
+        if (mediaStreamRef.current) {
+            stopStream(mediaStreamRef.current, deviceType);
+        }
+        setMediaStream(null);
     }, [setMediaStream, deviceType]);
     const enableDevice = useCallback(() => {
         if (!currentTrack)

package/dist/hooks/internal/devices/useMediaDevices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaDevices.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/devices/useMediaDevices.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAKvD,OAAO,KAAK,EAAe,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAG7G,UAAU,eAAe;IACvB,gBAAgB,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IACnD,gBAAgB,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IACnD,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,yBAAyB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzF,eAAO,MAAM,eAAe,GAAI,iEAAiE,eAAe;mCAmC1F,yBAAyB,KAAG,OAAO,CAAC,uBAAuB,CAAC;;;CA2GjF,CAAC"}
+{"version":3,"file":"useMediaDevices.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/devices/useMediaDevices.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAKvD,OAAO,KAAK,EAAe,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAG7G,UAAU,eAAe;IACvB,gBAAgB,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IACnD,gBAAgB,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC;IACnD,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,yBAAyB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzF,eAAO,MAAM,eAAe,GAAI,iEAAiE,eAAe;mCAoC1F,yBAAyB,KAAG,OAAO,CAAC,uBAAuB,CAAC;;;CAwHjF,CAAC"}

package/dist/hooks/internal/devices/useMediaDevices.js

@@ -10,6 +10,7 @@ export const useMediaDevices = ({ videoConstraints, audioConstraints, persistHan
     const [audioError, setAudioError] = useState(null);
     const [selectedCamera, setSelectedCamera] = useState(persistHandlers?.getLastDevice("video") ?? null);
     const [selectedMic, setSelectedMic] = useState(persistHandlers?.getLastDevice("audio") ?? null);
+    const isInitializedRef = useRef(false);
     const initializationRef = useRef(null);
     const selectCamera = useCallback((deviceInfo) => {
         setSelectedCamera(deviceInfo);
@@ -20,12 +21,15 @@ export const useMediaDevices = ({ videoConstraints, audioConstraints, persistHan
         persistHandlers?.saveLastDevice(deviceInfo, "audio");
     }, [persistHandlers]);
     const initializeDevices = useCallback(async (settings) => {
-        if (deviceList.length) {
+        if (isInitializedRef.current) {
             return { stream: null, errors: null, status: "already_initialized" };
         }
+        if (initializationRef.current) {
+            return initializationRef.current;
+        }
         const lastUsed = {
-            audio: selectedMic,
-            video: selectedCamera,
+            audio: persistHandlers?.getLastDevice("audio") ?? null,
+            video: persistHandlers?.getLastDevice("video") ?? null,
         };
         const constraints = {
             video: settings?.enableVideo !== false && prepareConstraints(lastUsed.video?.deviceId, videoConstraints),
@@ -63,10 +67,16 @@ export const useMediaDevices = ({ videoConstraints, audioConstraints, persistHan
                 return { status: "initialized", errors: null, stream };
             }
         };
-        const initializePromise = intitialize();
+        const initializePromise = intitialize().then((result) => {
+            isInitializedRef.current = true;
+            return result;
+        }, (error) => {
+            initializationRef.current = null;
+            throw error;
+        });
         initializationRef.current = initializePromise;
         return await initializePromise;
-    }, [deviceList, selectedMic, selectedCamera, videoConstraints, audioConstraints, selectCamera, selectMic]);
+    }, [videoConstraints, audioConstraints, selectCamera, selectMic, persistHandlers]);
     useEffect(() => {
         const isInitialStreamIrrelevant = videoStream !== audioStream;
         if (isInitialStreamIrrelevant) {

package/dist/hooks/useLocalVAD.d.ts

@@ -0,0 +1,20 @@
+import type { PeerId } from "../types/public";
+/**
+ * Client-side voice activity detection for the local peer.
+ *
+ * Polls the local microphone's audio level every 100ms and derives a speech/silence
+ * state from it. A level above ~0.025 (approximately −32 dBov, scaled to [0, 1])
+ * is treated as speech. Silence is debounced over 2 consecutive ticks (~200ms)
+ * to prevent rapid flapping.
+ *
+ * This is purely client-side — it does not signal other peers. Remote participants
+ * receive the local peer's VAD status via backend `vadNotification` messages.
+ *
+ * @internal Used by `useVAD` when the local peer's id is included in `peerIds`.
+ * @returns A record mapping the local peer's id to its current speaking state,
+ * or an empty object if `options.disabled` is true, the local peer is not available, or no microphone track is found.
+ */
+export declare const useLocalVAD: (options: {
+    disabled: boolean;
+}) => Record<PeerId, boolean>;
+//# sourceMappingURL=useLocalVAD.d.ts.map

package/dist/hooks/useLocalVAD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalVAD.d.ts","sourceRoot":"","sources":["../../src/hooks/useLocalVAD.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAW9C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,GAAI,SAAS;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAsClF,CAAC"}

package/dist/hooks/useLocalVAD.js

@@ -0,0 +1,59 @@
+import { useContext, useEffect, useState } from "react";
+import { FishjamClientContext } from "../contexts/fishjamClient";
+import { usePeers } from "./usePeers";
+// This is a dBov-to-linear conversion. -32 dBov number is taken from backend VAD threshold
+// formula for dBov to linear conversion: linear = 10 ^ (dBov / 20)
+// So -32 dBov = 10^(-32/20) ≈ 0.025. This is the minimum audio level considered "speech".
+const THRESHOLD = 10 ** (-32 / 20);
+// Number of consecutive "silence" ticks before we consider speech to have stopped. Helps with smoothing out brief pauses in speech.
+const SILENCE_DEBOUNCE_TICKS = 2;
+/**
+ * Client-side voice activity detection for the local peer.
+ *
+ * Polls the local microphone's audio level every 100ms and derives a speech/silence
+ * state from it. A level above ~0.025 (approximately −32 dBov, scaled to [0, 1])
+ * is treated as speech. Silence is debounced over 2 consecutive ticks (~200ms)
+ * to prevent rapid flapping.
+ *
+ * This is purely client-side — it does not signal other peers. Remote participants
+ * receive the local peer's VAD status via backend `vadNotification` messages.
+ *
+ * @internal Used by `useVAD` when the local peer's id is included in `peerIds`.
+ * @returns A record mapping the local peer's id to its current speaking state,
+ * or an empty object if `options.disabled` is true, the local peer is not available, or no microphone track is found.
+ */
+export const useLocalVAD = (options) => {
+    const fishjamClient = useContext(FishjamClientContext);
+    const [isSpeaking, setIsSpeaking] = useState(false);
+    const { localPeer } = usePeers();
+    const localPeerId = localPeer?.id;
+    const microphoneTrackId = localPeer?.microphoneTrack?.trackId;
+    useEffect(() => {
+        if (options.disabled || !localPeerId || !microphoneTrackId)
+            return;
+        let silenceTicks = 0;
+        let timeoutId;
+        const poll = async () => {
+            const trackAudio = await fishjamClient?.current?.getLocalTrackAudioLevel(microphoneTrackId);
+            if (trackAudio != null && trackAudio.level > THRESHOLD) {
+                silenceTicks = 0;
+                setIsSpeaking(true);
+            }
+            else {
+                silenceTicks += 1;
+                if (silenceTicks >= SILENCE_DEBOUNCE_TICKS) {
+                    setIsSpeaking(false);
+                }
+            }
+            timeoutId = setTimeout(poll, 100);
+        };
+        timeoutId = setTimeout(poll, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            setIsSpeaking(false);
+        };
+    }, [options.disabled, fishjamClient, localPeerId, microphoneTrackId]);
+    if (!localPeerId || options.disabled || !microphoneTrackId)
+        return {};
+    return { [localPeerId]: isSpeaking };
+};

package/dist/hooks/useVAD.d.ts

@@ -1,14 +1,21 @@
 import type { PeerId } from "../types/public";
 /**
- * Voice activity detection. Use this hook to check if voice is detected in audio track for given peer(s).
+ * Voice activity detection. Use this hook to check if voice is detected in the audio track for given peer(s).
  *
- * @param options - Options object containing `peerIds` - a list of ids of peers to subscribe to for voice activity detection notifications.
+ * Remote peer VAD is driven by `vadNotification` messages from the backend.
+ * If the local peer's id is included in `peerIds`, local VAD is determined client-side
+ * by polling the microphone's audio level (see `useLocalVAD`).
+ *
+ * @param options - Options object.
+ * @param options.peerIds - List of peer ids to subscribe to for VAD notifications.
+ *   Include the local peer's id to also track whether the local user is speaking.
  *
  * Example usage:
  * ```tsx
  * import { useVAD, type PeerId } from "@fishjam-cloud/react-client";
+ *
  * function WhoIsTalkingComponent({ peerIds }: { peerIds: PeerId[] }) {
- *   const peersInfo = useVAD({peerIds});
+ *   const peersInfo = useVAD({ peerIds });
  *   const activePeers = (Object.keys(peersInfo) as PeerId[]).filter((peerId) => peersInfo[peerId]);
  *
  *   return "Now talking: " + activePeers.join(", ");
@@ -16,7 +23,8 @@ import type { PeerId } from "../types/public";
  * ```
  * @category Connection
  * @group Hooks
- * @returns Each key is a peerId and the boolean value indicates if voice activity is currently detected for that peer.
+ * @returns A record where each key is a peer id and the boolean value indicates
+ * whether voice activity is currently detected for that peer.
  */
 export declare const useVAD: (options: {
     peerIds: ReadonlyArray<PeerId>;

package/dist/hooks/useVAD.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVAD.d.ts","sourceRoot":"","sources":["../../src/hooks/useVAD.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,GAAI,SAAS;IAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAiE1F,CAAC"}
+{"version":3,"file":"useVAD.d.ts","sourceRoot":"","sources":["../../src/hooks/useVAD.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAGvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,GAAI,SAAS;IAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAuE1F,CAAC"}

package/dist/hooks/useVAD.js

@@ -1,15 +1,23 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { FishjamClientStateContext } from "../contexts/fishjamState";
+import { useLocalVAD } from "./useLocalVAD";
 /**
- * Voice activity detection. Use this hook to check if voice is detected in audio track for given peer(s).
+ * Voice activity detection. Use this hook to check if voice is detected in the audio track for given peer(s).
  *
- * @param options - Options object containing `peerIds` - a list of ids of peers to subscribe to for voice activity detection notifications.
+ * Remote peer VAD is driven by `vadNotification` messages from the backend.
+ * If the local peer's id is included in `peerIds`, local VAD is determined client-side
+ * by polling the microphone's audio level (see `useLocalVAD`).
+ *
+ * @param options - Options object.
+ * @param options.peerIds - List of peer ids to subscribe to for VAD notifications.
+ *   Include the local peer's id to also track whether the local user is speaking.
  *
  * Example usage:
  * ```tsx
  * import { useVAD, type PeerId } from "@fishjam-cloud/react-client";
+ *
  * function WhoIsTalkingComponent({ peerIds }: { peerIds: PeerId[] }) {
- *   const peersInfo = useVAD({peerIds});
+ *   const peersInfo = useVAD({ peerIds });
  *   const activePeers = (Object.keys(peersInfo) as PeerId[]).filter((peerId) => peersInfo[peerId]);
  *
  *   return "Now talking: " + activePeers.join(", ");
@@ -17,46 +25,52 @@ import { FishjamClientStateContext } from "../contexts/fishjamState";
  * ```
  * @category Connection
  * @group Hooks
- * @returns Each key is a peerId and the boolean value indicates if voice activity is currently detected for that peer.
+ * @returns A record where each key is a peer id and the boolean value indicates
+ * whether voice activity is currently detected for that peer.
  */
 export const useVAD = (options) => {
     const { peerIds } = options;
     const clientState = useContext(FishjamClientStateContext);
     if (!clientState)
         throw Error("useVAD must be used within FishjamProvider");
+    const showLocalPeerVAD = useMemo(() => (clientState.localPeer?.id ? peerIds.includes(clientState.localPeer?.id) : false), [clientState.localPeer?.id, peerIds]);
     const micTracksWithSelectedPeerIds = useMemo(() => Object.values(clientState.peers)
         .filter((peer) => peerIds.includes(peer.id))
         .map((peer) => ({
         peerId: peer.id,
-        microphoneTracks: Array.from(peer.tracks.values()).filter(({ metadata }) => metadata?.type === "microphone"),
+        microphoneTrack: Array.from(peer.tracks.values()).find(({ metadata }) => metadata?.type === "microphone"),
     })), [clientState.peers, peerIds]);
-    const getDefaultVadStatuses = () => micTracksWithSelectedPeerIds.reduce((mappedTracks, peer) => ({
+    const getDefaultVadStatuses = () => micTracksWithSelectedPeerIds.reduce((mappedTracks, { peerId, microphoneTrack }) => ({
         ...mappedTracks,
-        [peer.peerId]: peer.microphoneTracks.reduce((vadStatuses, track) => ({ ...vadStatuses, [track.trackId]: track.vadStatus }), {}),
+        [peerId]: microphoneTrack ? { [microphoneTrack.trackId]: microphoneTrack.vadStatus } : {},
     }), {});
     const [_vadStatuses, setVadStatuses] = useState(getDefaultVadStatuses);
     useEffect(() => {
-        const unsubs = micTracksWithSelectedPeerIds.map(({ peerId, microphoneTracks }) => {
+        const unsubs = micTracksWithSelectedPeerIds.map(({ peerId, microphoneTrack }) => {
             const updateVadStatus = (track) => {
                 setVadStatuses((prev) => ({
                     ...prev,
                     [peerId]: { ...prev[peerId], [track.trackId]: track.vadStatus },
                 }));
             };
-            microphoneTracks.forEach((track) => {
-                track.on("voiceActivityChanged", updateVadStatus);
-            });
+            if (microphoneTrack) {
+                microphoneTrack.on("voiceActivityChanged", updateVadStatus);
+            }
             return () => {
-                microphoneTracks.forEach((track) => {
-                    track.off("voiceActivityChanged", updateVadStatus);
-                });
+                if (microphoneTrack) {
+                    microphoneTrack.off("voiceActivityChanged", updateVadStatus);
+                }
             };
         });
         return () => unsubs.forEach((unsub) => unsub());
     }, [micTracksWithSelectedPeerIds]);
-    const vadStatuses = useMemo(() => Object.fromEntries(Object.entries(_vadStatuses).map(([peerId, tracks]) => [
-        peerId,
-        Object.values(tracks).some((vad) => vad === "speech"),
-    ])), [_vadStatuses]);
+    const localVAD = useLocalVAD({ disabled: !showLocalPeerVAD });
+    const vadStatuses = useMemo(() => ({
+        ...Object.fromEntries(Object.entries(_vadStatuses).map(([peerId, tracks]) => [
+            peerId,
+            Object.values(tracks).some((vad) => vad === "speech"),
+        ])),
+        ...localVAD,
+    }), [_vadStatuses, localVAD]);
     return vadStatuses;
 };

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+/**
+ * React client SDK for building web video and audio apps with Fishjam.
+ *
+ * @packageDocumentation
+ */
 export { FishjamProvider, type FishjamProviderProps } from "./FishjamProvider";
 export { useCamera } from "./hooks/devices/useCamera";
 export { useInitializeDevices, UseInitializeDevicesParams } from "./hooks/devices/useInitializeDevices";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,KAAK,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,KAAK,yBAAyB,GAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,cAAc,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,KAAK,QAAQ,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,YAAY,EACV,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,UAAU,EACV,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,YAAY,EACZ,KAAK,EACL,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,eAAe,EACf,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,eAAe,EACf,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,KAAK,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,KAAK,yBAAyB,GAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,cAAc,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,KAAK,QAAQ,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,YAAY,EACV,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,UAAU,EACV,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,YAAY,EACZ,KAAK,EACL,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,eAAe,EACf,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,eAAe,EACf,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -1,3 +1,8 @@
+/**
+ * React client SDK for building web video and audio apps with Fishjam.
+ *
+ * @packageDocumentation
+ */
 export { FishjamProvider } from "./FishjamProvider";
 export { useCamera } from "./hooks/devices/useCamera";
 export { useInitializeDevices } from "./hooks/devices/useInitializeDevices";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishjam-cloud/react-client",
-  "version": "0.25.3",
+  "version": "0.26.0-rc.0",
   "description": "React client library for Fishjam",
   "license": "Apache-2.0",
   "author": "Fishjam Team",
@@ -62,7 +62,7 @@
     "vitest": "^3.1.1"
   },
   "dependencies": {
-    "@fishjam-cloud/ts-client": "0.25.3",
+    "@fishjam-cloud/ts-client": "0.26.0-rc.0",
     "events": "3.3.0",
     "lodash.isequal": "4.5.0"
   },