@fishjam-cloud/react-client 0.7.1 → 0.8.0

package/dist/hooks/devices/useMicrophone.js

@@ -0,0 +1,37 @@
+import { useDeviceManager } from "../deviceManagers/useDeviceManager";
+import { useFishjamContext } from "../useFishjamContext";
+/**
+ *
+ * @category Devices
+ */
+export function useMicrophone() {
+    const { audioTrackManager, audioDeviceManagerRef } = useFishjamContext();
+    const { deviceState, status } = useDeviceManager(audioDeviceManagerRef.current);
+    const { currentTrack, ...trackManager } = audioTrackManager;
+    const stream = deviceState.media?.stream ?? null;
+    const currentMiddleware = deviceState.currentMiddleware ?? null;
+    const isStreaming = Boolean(currentTrack?.stream);
+    const track = stream?.getAudioTracks()[0] ?? null;
+    const trackId = currentTrack?.trackId ?? null;
+    const devices = deviceState.devices ?? [];
+    const activeDevice = deviceState.media?.deviceInfo ?? null;
+    const isAudioPlaying = currentTrack?.vadStatus === "speech";
+    const isMuted = !deviceState.media?.enabled;
+    const deviceError = deviceState.error ?? null;
+    const isDeviceEnabled = Boolean(deviceState.media);
+    return {
+        ...trackManager,
+        currentMiddleware,
+        isDeviceEnabled,
+        status,
+        stream,
+        track,
+        isStreaming,
+        trackId,
+        devices,
+        activeDevice,
+        isMuted,
+        deviceError,
+        isAudioPlaying,
+    };
+}

package/dist/hooks/public.d.ts

@@ -1,6 +1,8 @@
 export { useConnect, useDisconnect } from "./useConnection";
 export { useReconnection } from "./useReconnection";
-export { useCamera, useMicrophone, useInitializeDevices } from "./useDevices";
+export { useCamera } from "./devices/useCamera";
+export { useMicrophone } from "./devices/useMicrophone";
+export { useInitializeDevices } from "./devices/useInitializeDevices";
 export { usePeers } from "./usePeers";
 export { useScreenShare } from "./useScreenShare";
 export { useStatus } from "./useStatus";

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/hooks/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/hooks/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/public.js

@@ -1,6 +1,8 @@
 export { useConnect, useDisconnect } from "./useConnection";
 export { useReconnection } from "./useReconnection";
-export { useCamera, useMicrophone, useInitializeDevices } from "./useDevices";
+export { useCamera } from "./devices/useCamera";
+export { useMicrophone } from "./devices/useMicrophone";
+export { useInitializeDevices } from "./devices/useInitializeDevices";
 export { usePeers } from "./usePeers";
 export { useScreenShare } from "./useScreenShare";
 export { useStatus } from "./useStatus";

package/dist/hooks/useFishjamContext.d.ts

@@ -1,19 +1,20 @@
 import type { FishjamClient } from "@fishjam-cloud/ts-client";
 import { type MutableRefObject } from "react";
-import type { PeerMetadata, TrackMetadata, ScreenShareState, TrackManager } from "../types/internal";
+import type { PeerMetadata, TrackMetadata, TrackManager } from "../types/internal";
 import type { DeviceManager } from "../DeviceManager";
 import type { FishjamClientState } from "./useFishjamClientState";
-import type { PeerStatus } from "../types/public";
+import type { BandwidthLimits, PeerStatus, ScreenshareApi } from "../types/public";
 export type FishjamContextType = {
     fishjamClientRef: MutableRefObject<FishjamClient<PeerMetadata, TrackMetadata>>;
     videoDeviceManagerRef: MutableRefObject<DeviceManager>;
     audioDeviceManagerRef: MutableRefObject<DeviceManager>;
     hasDevicesBeenInitializedRef: MutableRefObject<boolean>;
-    screenShareState: [ScreenShareState, React.Dispatch<React.SetStateAction<ScreenShareState>>];
+    screenShareManager: ScreenshareApi;
     peerStatus: PeerStatus;
     videoTrackManager: TrackManager;
     audioTrackManager: TrackManager;
     clientState: FishjamClientState;
+    bandwidthLimits: BandwidthLimits;
 };
 export declare const FishjamContext: import("react").Context<FishjamContextType | null>;
 export declare function useFishjamContext(): FishjamContextType;

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

@@ -1 +1 @@
-{"version":3,"file":"useFishjamContext.d.ts","sourceRoot":"","sources":["../../src/hooks/useFishjamContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAiB,KAAK,gBAAgB,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACrG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,4BAA4B,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxD,gBAAgB,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC7F,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC;IAChC,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}
+{"version":3,"file":"useFishjamContext.d.ts","sourceRoot":"","sources":["../../src/hooks/useFishjamContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAiB,KAAK,gBAAgB,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,4BAA4B,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxD,kBAAkB,EAAE,cAAc,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}

package/dist/hooks/useScreenShare.d.ts

@@ -1,7 +1,16 @@
-import type { ScreenshareApi } from "../types/public";
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { ScreenshareApi, PeerStatus } from "../types/public";
+import type { PeerMetadata, TrackMetadata } from "../types/internal";
+interface ScreenShareManagerProps {
+    fishjamClient: FishjamClient<PeerMetadata, TrackMetadata>;
+    getCurrentPeerStatus: () => PeerStatus;
+}
 /**
  *
  * @category Screenshare
  */
+export declare const useScreenShareManager: ({ fishjamClient, getCurrentPeerStatus, }: ScreenShareManagerProps) => ScreenshareApi;
 export declare const useScreenShare: () => ScreenshareApi;
+export declare const getTracksFromStream: (stream: MediaStream) => [MediaStreamTrack, MediaStreamTrack | null];
+export {};
 //# sourceMappingURL=useScreenShare.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScreenShare.d.ts","sourceRoot":"","sources":["../../src/hooks/useScreenShare.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQxE;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,cA0IjC,CAAC"}
+{"version":3,"file":"useScreenShare.d.ts","sourceRoot":"","sources":["../../src/hooks/useScreenShare.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAoB,cAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACpF,OAAO,KAAK,EAAE,YAAY,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvF,UAAU,uBAAuB;IAC/B,aAAa,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAC1D,oBAAoB,EAAE,MAAM,UAAU,CAAC;CACxC;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,6CAG/B,uBAAuB,KAAG,cAqI5B,CAAC;AAEF,eAAO,MAAM,cAAc,sBAI1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,WAAY,WAAW,KAAG,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAKnG,CAAC"}

package/dist/hooks/useScreenShare.js

@@ -1,49 +1,41 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { getRemoteOrLocalTrack } from "../utils/track";
 import { useFishjamContext } from "./useFishjamContext";
-const getTracks = (stream) => {
-    const video = stream.getVideoTracks()[0];
-    const audio = stream.getAudioTracks()[0] ?? null;
-    return [video, audio];
-};
 /**
  *
  * @category Screenshare
  */
-export const useScreenShare = () => {
-    const ctx = useFishjamContext();
-    const [state, setState] = ctx.screenShareState;
+export const useScreenShareManager = ({ fishjamClient, getCurrentPeerStatus, }) => {
+    const [state, setState] = useState({ stream: null, trackIds: null });
     const cleanMiddlewareFnRef = useRef(null);
-    const { fishjamClientRef } = useFishjamContext();
-    const tsClient = fishjamClientRef.current;
     const stream = state.stream ?? null;
-    const [videoTrack, audioTrack] = stream ? getTracks(stream) : [null, null];
-    const getDisplayName = () => tsClient.getLocalPeer()?.metadata?.peer?.displayName;
+    const [videoTrack, audioTrack] = stream ? getTracksFromStream(stream) : [null, null];
+    const getDisplayName = () => fishjamClient.getLocalPeer()?.metadata?.peer?.displayName;
     const startStreaming = async (props) => {
         const stream = await navigator.mediaDevices.getDisplayMedia({
             video: props?.videoConstraints ?? true,
             audio: props?.audioConstraints ?? true,
         });
         const displayName = getDisplayName();
-        let [video, audio] = getTracks(stream);
+        let [video, audio] = getTracksFromStream(stream);
         if (state.tracksMiddleware) {
             const { videoTrack, audioTrack, onClear } = state.tracksMiddleware(video, audio);
             video = videoTrack;
             audio = audioTrack;
             cleanMiddlewareFnRef.current = onClear;
         }
-        const addTrackPromises = [tsClient.addTrack(video, { displayName, type: "screenShareVideo", paused: false })];
+        const addTrackPromises = [fishjamClient.addTrack(video, { displayName, type: "screenShareVideo", paused: false })];
         if (audio)
-            addTrackPromises.push(tsClient.addTrack(audio, { displayName, type: "screenShareAudio", paused: false }));
+            addTrackPromises.push(fishjamClient.addTrack(audio, { displayName, type: "screenShareAudio", paused: false }));
         const [videoId, audioId] = await Promise.all(addTrackPromises);
         setState({ stream, trackIds: { videoId, audioId } });
     };
     const replaceTracks = async (newVideoTrack, newAudioTrack) => {
         if (!state?.stream)
             return;
-        const addTrackPromises = [tsClient.replaceTrack(state.trackIds.videoId, newVideoTrack)];
+        const addTrackPromises = [fishjamClient.replaceTrack(state.trackIds.videoId, newVideoTrack)];
         if (newAudioTrack && state.trackIds.audioId) {
-            addTrackPromises.push(tsClient.replaceTrack(state.trackIds.audioId, newAudioTrack));
+            addTrackPromises.push(fishjamClient.replaceTrack(state.trackIds.audioId, newAudioTrack));
         }
         await Promise.all(addTrackPromises);
     };
@@ -54,7 +46,7 @@ export const useScreenShare = () => {
     const setTracksMiddleware = async (middleware) => {
         if (!state?.stream)
             return;
-        const [video, audio] = getTracks(state.stream);
+        const [video, audio] = getTracksFromStream(state.stream);
         cleanMiddleware();
         const { videoTrack, audioTrack, onClear } = middleware?.(video, audio) ?? {
             videoTrack: video,
@@ -69,22 +61,23 @@ export const useScreenShare = () => {
             console.warn("No stream to stop");
             return;
         }
-        const [video, audio] = getTracks(state.stream);
+        const [video, audio] = getTracksFromStream(state.stream);
         video.stop();
         if (audio)
             audio.stop();
-        const client = fishjamClientRef.current;
-        const removeTrackPromises = [client.removeTrack(state.trackIds.videoId)];
-        if (state.trackIds.audioId)
-            removeTrackPromises.push(client.removeTrack(state.trackIds.audioId));
-        await Promise.all(removeTrackPromises);
+        if (getCurrentPeerStatus() === "connected") {
+            const removeTrackPromises = [fishjamClient.removeTrack(state.trackIds.videoId)];
+            if (state.trackIds.audioId)
+                removeTrackPromises.push(fishjamClient.removeTrack(state.trackIds.audioId));
+            await Promise.all(removeTrackPromises);
+        }
         cleanMiddleware();
         setState(({ tracksMiddleware }) => ({ stream: null, trackIds: null, tracksMiddleware }));
-    }, [state, fishjamClientRef, setState, cleanMiddleware]);
+    }, [state, fishjamClient, setState, cleanMiddleware, getCurrentPeerStatus]);
     useEffect(() => {
         if (!state.stream)
             return;
-        const [video, audio] = getTracks(state.stream);
+        const [video, audio] = getTracksFromStream(state.stream);
         const trackEndedHandler = () => {
             stopStreaming();
         };
@@ -96,19 +89,18 @@ export const useScreenShare = () => {
         };
     }, [state, stopStreaming]);
     useEffect(() => {
-        const client = fishjamClientRef.current;
         const onDisconnected = () => {
             if (stream) {
                 stopStreaming();
             }
         };
-        client.on("disconnected", onDisconnected);
+        fishjamClient.on("disconnected", onDisconnected);
         return () => {
-            client.removeListener("disconnected", onDisconnected);
+            fishjamClient.removeListener("disconnected", onDisconnected);
         };
-    }, [stopStreaming, fishjamClientRef, stream]);
-    const videoBroadcast = state.stream ? getRemoteOrLocalTrack(tsClient, state.trackIds.videoId) : null;
-    const audioBroadcast = state.trackIds?.audioId ? getRemoteOrLocalTrack(tsClient, state.trackIds.audioId) : null;
+    }, [stopStreaming, fishjamClient, stream]);
+    const videoBroadcast = state.stream ? getRemoteOrLocalTrack(fishjamClient, state.trackIds.videoId) : null;
+    const audioBroadcast = state.trackIds?.audioId ? getRemoteOrLocalTrack(fishjamClient, state.trackIds.audioId) : null;
     return {
         startStreaming,
         stopStreaming,
@@ -121,3 +113,12 @@ export const useScreenShare = () => {
         currentTracksMiddleware: state?.tracksMiddleware ?? null,
     };
 };
+export const useScreenShare = () => {
+    const { screenShareManager } = useFishjamContext();
+    return screenShareManager;
+};
+export const getTracksFromStream = (stream) => {
+    const video = stream.getVideoTracks()[0];
+    const audio = stream.getAudioTracks()[0] ?? null;
+    return [video, audio];
+};

package/dist/hooks/useTrackManager.d.ts

@@ -1,11 +1,13 @@
 import type { FishjamClient } from "@fishjam-cloud/ts-client";
 import type { MediaManager, PeerMetadata, TrackManager, TrackMetadata } from "../types/internal";
-import type { PeerStatus } from "../types/public";
+import type { BandwidthLimits, PeerStatus, StartStreamingProps } from "../types/public";
 interface TrackManagerConfig {
     mediaManager: MediaManager;
     tsClient: FishjamClient<PeerMetadata, TrackMetadata>;
     getCurrentPeerStatus: () => PeerStatus;
+    bandwidthLimits: BandwidthLimits;
+    autoStreamProps?: StartStreamingProps | false;
 }
-export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentPeerStatus }: TrackManagerConfig) => TrackManager;
+export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, autoStreamProps, }: TrackManagerConfig) => TrackManager;
 export {};
 //# sourceMappingURL=useTrackManager.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTrackManager.d.ts","sourceRoot":"","sources":["../../src/hooks/useTrackManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAwC,MAAM,0BAA0B,CAAC;AACpG,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGjG,OAAO,KAAK,EAAE,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAE/E,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IACrD,oBAAoB,EAAE,MAAM,UAAU,CAAC;CACxC;AAOD,eAAO,MAAM,eAAe,qDAAsD,kBAAkB,KAAG,YA2MtG,CAAC"}
+{"version":3,"file":"useTrackManager.d.ts","sourceRoot":"","sources":["../../src/hooks/useTrackManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGjG,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAmB,MAAM,iBAAiB,CAAC;AAEzG,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IACrD,oBAAoB,EAAE,MAAM,UAAU,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC;CAC/C;AAWD,eAAO,MAAM,eAAe,wFAMzB,kBAAkB,KAAG,YA0LvB,CAAC"}

package/dist/hooks/useTrackManager.js

@@ -1,51 +1,27 @@
-import { getRemoteOrLocalTrack } from "../utils/track";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getConfigAndBandwidthFromProps, getRemoteOrLocalTrack } from "../utils/track";
+import { useCallback, useEffect, useMemo, useState } from "react";
 const TRACK_TYPE_TO_DEVICE = {
     video: "camera",
     audio: "microphone",
 };
-export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }) => {
+const getDeviceType = (mediaManager) => TRACK_TYPE_TO_DEVICE[mediaManager.getDeviceType()];
+export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, autoStreamProps, }) => {
     const [currentTrackId, setCurrentTrackId] = useState(null);
     const [paused, setPaused] = useState(false);
-    const clearMiddlewareFnRef = useRef(null);
-    const [currentTrackMiddleware, setCurrentTrackMiddleware] = useState(null);
-    const type = TRACK_TYPE_TO_DEVICE[mediaManager.getDeviceType()];
-    const metadata = useMemo(() => ({ type, paused }), [type, paused]);
     const currentTrack = useMemo(() => getRemoteOrLocalTrack(tsClient, currentTrackId), [tsClient, currentTrackId]);
-    function clearMiddleware() {
-        clearMiddlewareFnRef.current?.();
-        clearMiddlewareFnRef.current = null;
-    }
-    const clearAndGetProcessedTrack = useCallback((inputTrack) => {
-        clearMiddleware();
-        const { onClear, track } = currentTrackMiddleware?.(inputTrack) ?? {};
-        if (onClear)
-            clearMiddlewareFnRef.current = onClear;
-        return track ?? inputTrack;
-    }, [currentTrackMiddleware]);
     async function setTrackMiddleware(middleware) {
-        const mediaTrack = mediaManager.getTracks()[0];
-        setCurrentTrackMiddleware(() => middleware);
-        if (!currentTrack || !mediaTrack)
-            return;
-        clearMiddleware();
-        const { onClear, track } = middleware?.(mediaTrack) ?? { track: mediaTrack };
-        if (onClear)
-            clearMiddlewareFnRef.current = onClear;
-        await tsClient.replaceTrack(currentTrack.trackId, track);
+        mediaManager.setTrackMiddleware(middleware);
+        await refreshStreamedTrack();
     }
     async function initialize(deviceId) {
         await mediaManager?.start(deviceId);
         if (!currentTrackId)
             return;
-        const newTrack = mediaManager.getTracks()[0];
-        await tsClient.replaceTrack(currentTrackId, clearAndGetProcessedTrack(newTrack));
-    }
-    function stop() {
-        clearMiddleware();
-        return mediaManager?.stop();
+        const newTrack = mediaManager.getMedia()?.track ?? null;
+        await tsClient.replaceTrack(currentTrackId, newTrack);
     }
-    const startStreaming = useCallback(async (simulcastConfig, maxBandwidth) => {
+    const stop = useCallback(() => mediaManager.stop(), [mediaManager]);
+    const startStreaming = useCallback(async (props = { simulcast: ["l", "m", "h"] }) => {
         if (currentTrackId)
             throw Error("Track already added");
         const media = mediaManager.getMedia();
@@ -57,56 +33,57 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
         // see `getRemoteOrLocalTrackContext()` explanation
         setCurrentTrackId(media.track.id);
         const displayName = tsClient.getLocalPeer()?.metadata?.peer?.displayName;
-        const trackMetadata = { ...metadata, displayName, paused: false };
-        const processedTrack = clearAndGetProcessedTrack(media.track);
-        const remoteTrackId = await tsClient.addTrack(processedTrack, trackMetadata, simulcastConfig, maxBandwidth);
+        const deviceType = getDeviceType(mediaManager);
+        const trackMetadata = { type: deviceType, displayName, paused: false };
+        const [maxBandwidth, simulcastConfig] = getConfigAndBandwidthFromProps(props.simulcast, bandwidthLimits);
+        const remoteTrackId = await tsClient.addTrack(media.track, trackMetadata, simulcastConfig, maxBandwidth);
         setCurrentTrackId(remoteTrackId);
         setPaused(false);
         return remoteTrackId;
-    }, [clearAndGetProcessedTrack, currentTrackId, mediaManager, metadata, tsClient]);
-    async function refreshStreamedTrack() {
+    }, [currentTrackId, mediaManager, tsClient, bandwidthLimits]);
+    const refreshStreamedTrack = useCallback(async () => {
         if (!currentTrack)
             return;
-        const newTrack = mediaManager.getTracks()[0];
+        const newTrack = mediaManager.getMedia()?.track ?? null;
         if (!newTrack)
             throw Error("New track is empty");
-        return tsClient.replaceTrack(currentTrack.trackId, clearAndGetProcessedTrack(newTrack));
-    }
-    async function stopStreaming() {
+        return tsClient.replaceTrack(currentTrack.trackId, newTrack);
+    }, [currentTrack, mediaManager, tsClient]);
+    const stopStreaming = useCallback(async () => {
         if (!currentTrack)
             return;
-        clearMiddleware();
         setCurrentTrackId(null);
         setPaused(true);
         return tsClient.removeTrack(currentTrack.trackId);
-    }
-    async function pauseStreaming() {
+    }, [currentTrack, tsClient]);
+    const pauseStreaming = useCallback(async () => {
         if (!currentTrack)
             return;
         setPaused(true);
         await tsClient.replaceTrack(currentTrack.trackId, null);
-        const trackMetadata = { ...metadata, paused: true };
+        const deviceType = getDeviceType(mediaManager);
+        const trackMetadata = { type: deviceType, paused: true };
         return tsClient.updateTrackMetadata(currentTrack.trackId, trackMetadata);
-    }
-    async function resumeStreaming() {
+    }, [currentTrack, mediaManager, tsClient]);
+    const resumeStreaming = useCallback(async () => {
         if (!currentTrack)
             return;
         const media = mediaManager.getMedia();
+        const deviceType = getDeviceType(mediaManager);
         if (!media)
             throw Error("Device is unavailable");
-        const processedTrack = media.track ? clearAndGetProcessedTrack(media.track) : null;
         setPaused(false);
-        await tsClient.replaceTrack(currentTrack.trackId, processedTrack);
-        const trackMetadata = { ...metadata, paused: false };
+        await tsClient.replaceTrack(currentTrack.trackId, media.track);
+        const trackMetadata = { type: deviceType, paused: false };
         return tsClient.updateTrackMetadata(currentTrack.trackId, trackMetadata);
-    }
-    function disableTrack() {
+    }, [currentTrack, mediaManager, tsClient]);
+    const disableTrack = useCallback(() => {
         mediaManager.disable();
-    }
-    function enableTrack() {
+    }, [mediaManager]);
+    const enableTrack = useCallback(() => {
         mediaManager.enable();
-    }
-    const stream = async () => {
+    }, [mediaManager]);
+    const stream = useCallback(async () => {
         if (getCurrentPeerStatus() !== "connected")
             return;
         if (currentTrack?.trackId) {
@@ -115,13 +92,10 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
         else {
             await startStreaming();
         }
-    };
-    /**
-     * @see {@link TrackManager#toggle} for more details.
-     */
-    async function toggle(mode = "hard") {
+    }, [currentTrack?.trackId, getCurrentPeerStatus, resumeStreaming, startStreaming]);
+    const toggle = useCallback(async (mode) => {
         const mediaStream = mediaManager.getMedia()?.stream;
-        const track = mediaManager.getTracks()?.[0];
+        const track = mediaManager.getMedia()?.track ?? null;
         const enabled = Boolean(track?.enabled);
         if (mediaStream && enabled) {
             mediaManager.disable();
@@ -129,7 +103,7 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
                 await pauseStreaming();
             }
             if (mode === "hard") {
-                await mediaManager.stop();
+                mediaManager.stop();
             }
         }
         else if (mediaStream && !enabled) {
@@ -140,11 +114,21 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
             await mediaManager.start();
             await stream();
         }
-    }
+    }, [currentTrack, mediaManager, pauseStreaming, stream]);
+    /**
+     * @see {@link TrackManager#toggleMute} for more details.
+     */
+    const toggleMute = useCallback(() => toggle("soft"), [toggle]);
+    /**
+     * @see {@link TrackManager#toggleDevice} for more details.
+     */
+    const toggleDevice = useCallback(() => toggle("hard"), [toggle]);
     useEffect(() => {
+        if (autoStreamProps === false)
+            return;
         const joinedHandler = () => {
-            if (mediaManager.getTracks().length > 0) {
-                startStreaming();
+            if (mediaManager.getMedia()?.track) {
+                startStreaming(autoStreamProps);
             }
         };
         const disconnectedHandler = () => {
@@ -156,7 +140,7 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
             tsClient.off("joined", joinedHandler);
             tsClient.off("disconnected", disconnectedHandler);
         };
-    }, [mediaManager, startStreaming, tsClient]);
+    }, [mediaManager, startStreaming, tsClient, autoStreamProps]);
     return {
         currentTrack,
         setTrackMiddleware,
@@ -168,9 +152,9 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus }
         resumeStreaming,
         disableTrack,
         enableTrack,
-        currentTrackMiddleware,
         refreshStreamedTrack,
         paused,
-        toggle,
+        toggleMute,
+        toggleDevice,
     };
 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { useConnect, useDisconnect, useReconnection, useCamera, useMicrophone, useInitializeDevices, usePeers, useScreenShare, useStatus, } from "./hooks/public";
 export { FishjamProvider } from "./fishjamProvider";
-export { Track, TrackMiddleware, TracksMiddleware, PeerStatus, ToggleMode, Device, AudioDevice, PeerWithTracks, ConnectConfig, PersistLastDeviceHandlers, ScreenshareApi, } from "./types/public";
+export { Track, TrackMiddleware, TracksMiddleware, PeerStatus, Device, AudioDevice, PeerWithTracks, ConnectConfig, PersistLastDeviceHandlers, ScreenshareApi, StartStreamingProps, } from "./types/public";
 export { AUDIO_TRACK_CONSTRAINTS, VIDEO_TRACK_CONSTRAINTS, SCREEN_SHARING_MEDIA_CONSTRAINTS } from "./constraints";
 export type { Peer, MessageEvents, CreateConfig, TrackBandwidthLimit, SimulcastBandwidthLimit, BandwidthLimit, WebRTCEndpointEvents, TrackContextEvents, Endpoint, SimulcastConfig, TrackContext, VadStatus, EncodingReason, MetadataParser, AuthErrorReason, Encoding, } from "@fishjam-cloud/ts-client";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,eAAe,EACf,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,cAAc,EACd,SAAS,GACV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EACL,KAAK,EACL,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,MAAM,EACN,WAAW,EACX,cAAc,EACd,aAAa,EACb,yBAAyB,EACzB,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AAEnH,YAAY,EACV,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,SAAS,EACT,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,GACT,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,eAAe,EACf,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,cAAc,EACd,SAAS,GACV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EACL,KAAK,EACL,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,WAAW,EACX,cAAc,EACd,aAAa,EACb,yBAAyB,EACzB,cAAc,EACd,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AAEnH,YAAY,EACV,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,SAAS,EACT,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,GACT,MAAM,0BAA0B,CAAC"}

package/dist/mediaInitializer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaInitializer.d.ts","sourceRoot":"","sources":["../src/mediaInitializer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AASpD,KAAK,UAAU,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAE5C,KAAK,gBAAgB,GAAG,UAAU,CAAC,qBAAqB,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAEhF,KAAK,eAAe,GAAG,UAAU,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;AAsB1D,eAAO,MAAM,iBAAiB,gBACf,sBAAsB,iBACrB,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,KAC3C,OAAO,CAAC,CAAC,WAAW,GAAG,IAAI,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAuB9D,CAAC;AAIF,eAAO,MAAM,kBAAkB,WACrB,WAAW,gBACL,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,WACnC,eAAe,EAAE,eACb,gBAAgB,mBACZ,eAAe,KAC/B,OAAO,CAAC,CAAC,WAAW,GAAG,IAAI,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAsB9D,CAAC"}
+{"version":3,"file":"mediaInitializer.d.ts","sourceRoot":"","sources":["../src/mediaInitializer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpE,KAAK,UAAU,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAE5C,KAAK,gBAAgB,GAAG,UAAU,CAAC,qBAAqB,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAEhF,KAAK,eAAe,GAAG,UAAU,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;AAsB1D,eAAO,MAAM,iBAAiB,gBACf,sBAAsB,iBACrB,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,KAC3C,OAAO,CAAC,CAAC,WAAW,GAAG,IAAI,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAuB9D,CAAC;AAIF,eAAO,MAAM,kBAAkB,WACrB,WAAW,gBACL,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,WACnC,eAAe,EAAE,eACb,gBAAgB,mBACZ,eAAe,KAC/B,OAAO,CAAC,CAAC,WAAW,GAAG,IAAI,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAsB9D,CAAC"}

package/dist/mediaInitializer.js

@@ -1,6 +1,5 @@
 import { prepareConstraints } from "./constraints";
 import { NOT_FOUND_ERROR, OVERCONSTRAINED_ERROR, PERMISSION_DENIED, UNHANDLED_ERROR } from "./utils/errors";
-import { getCurrentDevicesSettings, stopTracks, isAnyDeviceDifferentFromLastSession, removeSpecifiedDeviceFromConstraints, } from "./utils/media";
 const defaultErrors = { audio: null, video: null };
 const tryToGetAudioOnlyThenVideoOnly = async (constraints, deviceErrors = defaultErrors, transformConstraint = () => false) => {
     const audioOnly = await getAvailableMedia({ ...constraints, video: transformConstraint(constraints.video) }, { ...deviceErrors, audio: null });
@@ -46,3 +45,33 @@ export const getCorrectedResult = async (stream, deviceErrors, devices, constrai
     };
     return await getAvailableMedia(exactConstraints, deviceErrors);
 };
+const getCurrentDevicesSettings = (requestedDevices, mediaDeviceInfos) => {
+    const currentDevices = { videoinput: null, audioinput: null };
+    for (const track of requestedDevices.getTracks()) {
+        const settings = track.getSettings();
+        if (settings.deviceId) {
+            const currentDevice = mediaDeviceInfos.find((device) => device.deviceId == settings.deviceId);
+            const kind = currentDevice?.kind ?? null;
+            if ((currentDevice && kind === "videoinput") || kind === "audioinput") {
+                currentDevices[kind] = currentDevice ?? null;
+            }
+        }
+    }
+    return currentDevices;
+};
+const isDeviceDifferentFromLastSession = (lastDevice, currentDevice) => lastDevice && (currentDevice?.deviceId !== lastDevice.deviceId || currentDevice?.label !== lastDevice?.label);
+const isAnyDeviceDifferentFromLastSession = (lastVideoDevice, lastAudioDevice, currentDevices) => !!((currentDevices?.videoinput &&
+    isDeviceDifferentFromLastSession(lastVideoDevice, currentDevices?.videoinput || null)) ||
+    (currentDevices?.audioinput &&
+        isDeviceDifferentFromLastSession(lastAudioDevice, currentDevices?.audioinput || null)));
+const stopTracks = (requestedDevices) => {
+    for (const track of requestedDevices.getTracks()) {
+        track.stop();
+    }
+};
+const removeSpecifiedDeviceFromConstraints = (trackConstraints) => {
+    if (typeof trackConstraints === "object") {
+        return { ...trackConstraints, deviceId: undefined };
+    }
+    return trackConstraints;
+};