@fishjam-cloud/react-client 0.6.0 → 0.7.0

package/dist/hooks/{clientState.js → useFishjamClientState.js}

@@ -1,38 +1,29 @@
-import { useCallback, useRef, useSyncExternalStore } from "react";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
 const eventNames = [
-    "socketOpen",
-    "socketError",
     "socketClose",
+    "socketError",
+    "socketOpen",
     "authSuccess",
     "authError",
     "disconnected",
-    "joined",
-    "joinError",
-    "peerJoined",
-    "peerUpdated",
-    "peerLeft",
+    "reconnectionStarted",
     "reconnected",
     "reconnectionRetriesLimitReached",
-    "reconnectionStarted",
-    "componentAdded",
-    "componentUpdated",
-    "componentRemoved",
+    "joined",
+    "joinError",
     "trackReady",
     "trackAdded",
     "trackRemoved",
     "trackUpdated",
+    "peerJoined",
+    "peerLeft",
+    "peerUpdated",
+    "componentAdded",
+    "componentRemoved",
+    "componentUpdated",
+    "connectionError",
+    "tracksPriorityChanged",
     "bandwidthEstimationChanged",
-    "encodingChanged",
-    "voiceActivityChanged",
-    "deviceDisabled",
-    "deviceEnabled",
-    "managerInitialized",
-    "managerStarted",
-    "deviceStopped",
-    "deviceReady",
-    "devicesStarted",
-    "devicesReady",
-    "error",
     "targetTrackEncodingRequested",
     "localTrackAdded",
     "localTrackRemoved",
@@ -47,7 +38,35 @@ const eventNames = [
     "localTrackMetadataChanged",
     "disconnectRequested",
 ];
-export const useClientState = (client) => {
+function trackContextToTrack(track) {
+    return {
+        rawMetadata: track.rawMetadata,
+        metadata: track.metadata,
+        trackId: track.trackId,
+        stream: track.stream,
+        simulcastConfig: track.simulcastConfig ?? null,
+        encoding: track.encoding ?? null,
+        vadStatus: track.vadStatus,
+        track: track.track,
+        metadataParsingError: track.metadataParsingError,
+    };
+}
+function endpointToPeerState(peer) {
+    const tracks = [...peer.tracks].reduce((acc, [, track]) => ({ ...acc, [track.trackId]: trackContextToTrack(track) }), {});
+    return {
+        rawMetadata: peer.rawMetadata,
+        metadata: peer.metadata,
+        metadataParsingError: peer.metadataParsingError,
+        id: peer.id,
+        tracks,
+    };
+}
+/*
+This is an internally used hook.
+It is not meant to be used by the end user.
+*/
+export function useFishjamClientState(fishjamClient) {
+    const client = useMemo(() => fishjamClient, [fishjamClient]);
     const mutationRef = useRef(false);
     const subscribe = useCallback((subscribeCallback) => {
         const callback = () => {
@@ -62,20 +81,20 @@ export const useClientState = (client) => {
     const lastSnapshotRef = useRef(null);
     const getSnapshot = useCallback(() => {
         if (mutationRef.current || lastSnapshotRef.current === null) {
+            const peers = Object.values(client.getRemotePeers()).map(endpointToPeerState);
+            const components = Object.values(client.getRemoteComponents()).map(endpointToPeerState);
+            const localEndpoint = client.getLocalPeer();
+            const localPeer = localEndpoint ? endpointToPeerState(localEndpoint) : null;
+            const isReconnecting = client.isReconnecting();
             lastSnapshotRef.current = {
-                remote: client.peers,
-                media: client.media,
-                bandwidthEstimation: client.bandwidthEstimation,
-                tracks: client.peersTracks,
-                local: client.local,
-                status: client.status,
-                devices: client.devices,
-                client: client,
-                reconnectionStatus: client.reconnectionStatus,
+                peers,
+                components,
+                localPeer,
+                isReconnecting,
             };
             mutationRef.current = false;
         }
         return lastSnapshotRef.current;
     }, [client]);
     return useSyncExternalStore(subscribe, getSnapshot);
-};
+}

package/dist/hooks/useFishjamClient_DO_NOT_USE.d.ts

@@ -0,0 +1,2 @@
+export declare function useFishjamClient_DO_NOT_USE(): import("@fishjam-cloud/ts-client").FishjamClient<import("..").PeerMetadata, import("..").TrackMetadata>;
+//# sourceMappingURL=useFishjamClient_DO_NOT_USE.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFishjamClient_DO_NOT_USE.d.ts","sourceRoot":"","sources":["../../src/hooks/useFishjamClient_DO_NOT_USE.ts"],"names":[],"mappings":"AAGA,wBAAgB,2BAA2B,4GAI1C"}

package/dist/hooks/useFishjamClient_DO_NOT_USE.js

@@ -0,0 +1,6 @@
+import { useFishjamContext } from "./useFishjamContext";
+import { useMemo } from "react";
+export function useFishjamClient_DO_NOT_USE() {
+    const client = useFishjamContext().fishjamClientRef.current;
+    return useMemo(() => client, [client]);
+}

package/dist/hooks/useFishjamContext.d.ts

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

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

@@ -0,0 +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,UAAU,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,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,iBAAiB,CAAC;IAC9B,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"}

package/dist/hooks/useParticipantStatus.d.ts

@@ -0,0 +1,8 @@
+import type { ParticipantStatus } from "../state.types";
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { PeerMetadata, TrackMetadata } from "../types";
+export declare const useParticipantStatus: (client: FishjamClient<PeerMetadata, TrackMetadata>) => {
+    readonly peerStatus: ParticipantStatus;
+    readonly getCurrentParticipantStatus: () => ParticipantStatus;
+};
+//# sourceMappingURL=useParticipantStatus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useParticipantStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useParticipantStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE5D,eAAO,MAAM,oBAAoB,WAAY,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC;;;CA8CtF,CAAC"}

package/dist/hooks/useParticipantStatus.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const useParticipantStatus = (client) => {
+    const [peerStatus, setParticipantStatusState] = useState("idle");
+    const peerStatusRef = useRef("idle");
+    const setParticipantStatus = useCallback((status) => {
+        peerStatusRef.current = status;
+        setParticipantStatusState(status);
+    }, [setParticipantStatusState]);
+    const getCurrentParticipantStatus = useCallback(() => peerStatusRef.current, []);
+    useEffect(() => {
+        const setConnecting = () => {
+            setParticipantStatus("connecting");
+        };
+        const setError = () => {
+            setParticipantStatus("error");
+        };
+        const setJoined = () => {
+            setParticipantStatus("connected");
+        };
+        const setDisconnected = () => {
+            setParticipantStatus("idle");
+        };
+        client.on("connectionStarted", setConnecting);
+        client.on("joined", setJoined);
+        client.on("authError", setError);
+        client.on("joinError", setError);
+        client.on("connectionError", setError);
+        client.on("disconnected", setDisconnected);
+        return () => {
+            client.off("connectionStarted", setConnecting);
+            client.off("joined", setJoined);
+            client.off("authError", setError);
+            client.off("joinError", setError);
+            client.off("connectionError", setError);
+            client.off("disconnected", setDisconnected);
+        };
+    }, [client, setParticipantStatus]);
+    return { peerStatus, getCurrentParticipantStatus };
+};

package/dist/hooks/{participants.d.ts → useParticipants.d.ts}

@@ -3,4 +3,4 @@ export declare function useParticipants(): {
     localParticipant: PeerStateWithTracks | null;
     participants: PeerStateWithTracks[];
 };
-//# sourceMappingURL=participants.d.ts.map
+//# sourceMappingURL=useParticipants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useParticipants.d.ts","sourceRoot":"","sources":["../../src/hooks/useParticipants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAcpD,wBAAgB,eAAe;;;EAQ9B"}

package/dist/hooks/useParticipants.js

@@ -0,0 +1,16 @@
+import { useFishjamContext } from "./useFishjamContext";
+function getPeerWithDistinguishedTracks(peerState) {
+    const peerTracks = Object.values(peerState.tracks ?? {});
+    const cameraTrack = peerTracks.find(({ metadata }) => metadata?.type === "camera");
+    const microphoneTrack = peerTracks.find(({ metadata }) => metadata?.type === "microphone");
+    const screenShareVideoTrack = peerTracks.find(({ metadata }) => metadata?.type === "screenShareVideo");
+    const screenShareAudioTrack = peerTracks.find(({ metadata }) => metadata?.type === "screenShareAudio");
+    return { ...peerState, cameraTrack, microphoneTrack, screenShareVideoTrack, screenShareAudioTrack };
+}
+export function useParticipants() {
+    const { clientState } = useFishjamContext();
+    const { localPeer, peers } = clientState;
+    const localParticipant = localPeer ? getPeerWithDistinguishedTracks(localPeer) : null;
+    const participants = Object.values(peers).map(getPeerWithDistinguishedTracks);
+    return { localParticipant, participants };
+}

package/dist/hooks/useProcessedPreviewStream.d.ts

@@ -0,0 +1,3 @@
+import type { TrackManager } from "../types";
+export declare function useProcessedPreviewStream(trackManager: TrackManager, deviceTrack: MediaStreamTrack | null | undefined): MediaStream | null;
+//# sourceMappingURL=useProcessedPreviewStream.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProcessedPreviewStream.d.ts","sourceRoot":"","sources":["../../src/hooks/useProcessedPreviewStream.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,sBAiBjD"}

package/dist/hooks/useProcessedPreviewStream.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+export function useProcessedPreviewStream(trackManager, deviceTrack) {
+    const [previewStream, setPreviewStream] = useState(null);
+    const { currentTrack, currentTrackMiddleware } = trackManager;
+    useEffect(() => {
+        if (currentTrack || !deviceTrack)
+            return;
+        const result = currentTrackMiddleware?.(deviceTrack);
+        if (result?.track)
+            setPreviewStream(new MediaStream([result.track]));
+        return () => {
+            result?.onClear?.();
+            setPreviewStream(null);
+        };
+    }, [currentTrack, deviceTrack, currentTrackMiddleware]);
+    return previewStream;
+}

package/dist/hooks/useReconnection.d.ts

@@ -0,0 +1,3 @@
+import type { ReconnectionStatus } from "@fishjam-cloud/ts-client";
+export declare const useReconnection: () => ReconnectionStatus;
+//# sourceMappingURL=useReconnection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReconnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useReconnection.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,eAAO,MAAM,eAAe,QAAO,kBA6BlC,CAAC"}

package/dist/hooks/useReconnection.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { useFishjamContext } from "./useFishjamContext";
+export const useReconnection = () => {
+    const { fishjamClientRef } = useFishjamContext();
+    const [reconnectionStatus, setReconnectionStatus] = useState("idle");
+    useEffect(() => {
+        const client = fishjamClientRef.current;
+        const setReconnecting = () => {
+            setReconnectionStatus("reconnecting");
+        };
+        const setIdle = () => {
+            setReconnectionStatus("idle");
+        };
+        const setError = () => {
+            setReconnectionStatus("error");
+        };
+        client.on("reconnectionStarted", setReconnecting);
+        client.on("reconnected", setIdle);
+        client.on("reconnectionRetriesLimitReached", setError);
+        return () => {
+            client.off("reconnectionStarted", setReconnecting);
+            client.off("reconnected", setIdle);
+            client.off("reconnectionRetriesLimitReached", setError);
+        };
+    }, [fishjamClientRef]);
+    return reconnectionStatus;
+};

package/dist/hooks/{screenShare.d.ts → useScreenShare.d.ts}

@@ -1,3 +1,3 @@
 import type { ScreenshareApi } from "../types";
 export declare const useScreenShare: () => ScreenshareApi;
-//# sourceMappingURL=screenShare.d.ts.map
+//# sourceMappingURL=useScreenShare.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenShare.d.ts","sourceRoot":"","sources":["../../src/hooks/useScreenShare.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,UAAU,CAAC;AAUjE,eAAO,MAAM,cAAc,QAAO,cA0IjC,CAAC"}

package/dist/hooks/{screenShare.js → useScreenShare.js}

@@ -1,6 +1,6 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { getRemoteOrLocalTrack } from "../utils/track";
-import { useFishjamContext } from "./fishjamContext";
+import { useFishjamContext } from "./useFishjamContext";
 const getTracks = (stream) => {
     const video = stream.getVideoTracks()[0];
     const audio = stream.getAudioTracks()[0] ?? null;
@@ -8,17 +8,29 @@ const getTracks = (stream) => {
 };
 export const useScreenShare = () => {
     const ctx = useFishjamContext();
-    const [state, setState] = ctx.screenshareState;
-    const tsClient = ctx.state.client.getTsClient();
+    const [state, setState] = ctx.screenShareState;
+    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?.displayName;
     const startStreaming = async (props) => {
         const stream = await navigator.mediaDevices.getDisplayMedia({
             video: props?.videoConstraints ?? true,
             audio: props?.audioConstraints ?? true,
         });
-        const [video, audio] = getTracks(stream);
-        const addTrackPromises = [tsClient.addTrack(video)];
+        const displayName = getDisplayName();
+        let [video, audio] = getTracks(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 })];
         if (audio)
-            addTrackPromises.push(tsClient.addTrack(audio));
+            addTrackPromises.push(tsClient.addTrack(audio, { displayName, type: "screenShareAudio", paused: false }));
         const [videoId, audioId] = await Promise.all(addTrackPromises);
         setState({ stream, trackIds: { videoId, audioId } });
     };
@@ -31,15 +43,25 @@ export const useScreenShare = () => {
         }
         await Promise.all(addTrackPromises);
     };
+    const cleanMiddleware = useCallback(() => {
+        cleanMiddlewareFnRef.current?.();
+        cleanMiddlewareFnRef.current = null;
+    }, []);
     const setTracksMiddleware = async (middleware) => {
         if (!state?.stream)
             return;
-        const [videoTrack, audioTrack] = getTracks(state.stream);
-        const [newVideoTrack, newAudioTrack] = middleware?.(videoTrack, audioTrack) ?? [videoTrack, audioTrack];
-        await replaceTracks(newVideoTrack, newAudioTrack);
+        const [video, audio] = getTracks(state.stream);
+        cleanMiddleware();
+        const { videoTrack, audioTrack, onClear } = middleware?.(video, audio) ?? {
+            videoTrack: video,
+            audioTrack: audio,
+            onClear: null,
+        };
+        cleanMiddlewareFnRef.current = onClear;
+        await replaceTracks(videoTrack, audioTrack);
     };
     const stopStreaming = useCallback(async () => {
-        if (!state) {
+        if (!state.stream) {
             console.warn("No stream to stop");
             return;
         }
@@ -47,14 +69,16 @@ export const useScreenShare = () => {
         video.stop();
         if (audio)
             audio.stop();
-        const removeTrackPromises = [tsClient.removeTrack(state.trackIds.videoId)];
+        const client = fishjamClientRef.current;
+        const removeTrackPromises = [client.removeTrack(state.trackIds.videoId)];
         if (state.trackIds.audioId)
-            removeTrackPromises.push(tsClient.removeTrack(state.trackIds.audioId));
+            removeTrackPromises.push(client.removeTrack(state.trackIds.audioId));
         await Promise.all(removeTrackPromises);
-        setState(null);
-    }, [state, tsClient, setState]);
+        cleanMiddleware();
+        setState(({ tracksMiddleware }) => ({ stream: null, trackIds: null, tracksMiddleware }));
+    }, [state, fishjamClientRef, setState, cleanMiddleware]);
     useEffect(() => {
-        if (!state)
+        if (!state.stream)
             return;
         const [video, audio] = getTracks(state.stream);
         const trackEndedHandler = () => {
@@ -68,18 +92,19 @@ export const useScreenShare = () => {
         };
     }, [state, stopStreaming]);
     useEffect(() => {
+        const client = fishjamClientRef.current;
         const onDisconnected = () => {
-            stopStreaming();
+            if (stream) {
+                stopStreaming();
+            }
         };
-        tsClient.on("disconnected", onDisconnected);
+        client.on("disconnected", onDisconnected);
         return () => {
-            tsClient.removeListener("disconnected", onDisconnected);
+            client.removeListener("disconnected", onDisconnected);
         };
-    }, [stopStreaming, tsClient]);
-    const stream = state?.stream ?? null;
-    const [videoTrack, audioTrack] = stream ? getTracks(stream) : [null, null];
-    const videoBroadcast = state ? getRemoteOrLocalTrack(tsClient, state.trackIds.videoId) : null;
-    const audioBroadcast = state?.trackIds.audioId ? getRemoteOrLocalTrack(tsClient, state.trackIds.audioId) : null;
+    }, [stopStreaming, fishjamClientRef, stream]);
+    const videoBroadcast = state.stream ? getRemoteOrLocalTrack(tsClient, state.trackIds.videoId) : null;
+    const audioBroadcast = state.trackIds?.audioId ? getRemoteOrLocalTrack(tsClient, state.trackIds.audioId) : null;
     return {
         startStreaming,
         stopStreaming,

package/dist/hooks/useStatus.d.ts

@@ -0,0 +1,2 @@
+export declare function useStatus(): import("..").ParticipantStatus;
+//# sourceMappingURL=useStatus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useStatus.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,mCAExB"}

package/dist/hooks/useStatus.js

@@ -0,0 +1,4 @@
+import { useFishjamContext } from "./useFishjamContext";
+export function useStatus() {
+    return useFishjamContext().peerStatus;
+}

package/dist/hooks/useTrackManager.d.ts

@@ -0,0 +1,11 @@
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { MediaManager, PeerMetadata, TrackManager, TrackMetadata } from "../types";
+import type { ParticipantStatus } from "../state.types";
+interface TrackManagerConfig {
+    mediaManager: MediaManager;
+    tsClient: FishjamClient<PeerMetadata, TrackMetadata>;
+    getCurrentParticipantStatus: () => ParticipantStatus;
+}
+export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentParticipantStatus, }: TrackManagerConfig) => TrackManager;
+export {};
+//# sourceMappingURL=useTrackManager.d.ts.map

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

@@ -0,0 +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,EAAc,YAAY,EAAE,aAAa,EAAmB,MAAM,UAAU,CAAC;AAGrH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IACrD,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;CACtD;AAOD,eAAO,MAAM,eAAe,6DAIzB,kBAAkB,KAAG,YA2MvB,CAAC"}

package/dist/hooks/useTrackManager.js

@@ -0,0 +1,176 @@
+import { getRemoteOrLocalTrack } from "../utils/track";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const TRACK_TYPE_TO_DEVICE = {
+    video: "camera",
+    audio: "microphone",
+};
+export const useTrackManager = ({ mediaManager, tsClient, getCurrentParticipantStatus, }) => {
+    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);
+    }
+    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 startStreaming = useCallback(async (simulcastConfig, maxBandwidth) => {
+        if (currentTrackId)
+            throw Error("Track already added");
+        const media = mediaManager.getMedia();
+        if (!media || !media.stream || !media.track)
+            throw Error("Device is unavailable");
+        const track = getRemoteOrLocalTrack(tsClient, currentTrackId);
+        if (track)
+            return track.trackId;
+        // see `getRemoteOrLocalTrackContext()` explanation
+        setCurrentTrackId(media.track.id);
+        const displayName = tsClient.getLocalPeer()?.metadata?.displayName;
+        const trackMetadata = { ...metadata, displayName, paused: false };
+        const processedTrack = clearAndGetProcessedTrack(media.track);
+        const remoteTrackId = await tsClient.addTrack(processedTrack, trackMetadata, simulcastConfig, maxBandwidth);
+        setCurrentTrackId(remoteTrackId);
+        setPaused(false);
+        return remoteTrackId;
+    }, [clearAndGetProcessedTrack, currentTrackId, mediaManager, metadata, tsClient]);
+    async function refreshStreamedTrack() {
+        if (!currentTrack)
+            return;
+        const newTrack = mediaManager.getTracks()[0];
+        if (!newTrack)
+            throw Error("New track is empty");
+        return tsClient.replaceTrack(currentTrack.trackId, clearAndGetProcessedTrack(newTrack));
+    }
+    async function stopStreaming() {
+        if (!currentTrack)
+            return;
+        clearMiddleware();
+        setCurrentTrackId(null);
+        setPaused(true);
+        return tsClient.removeTrack(currentTrack.trackId);
+    }
+    async function pauseStreaming() {
+        if (!currentTrack)
+            return;
+        setPaused(true);
+        await tsClient.replaceTrack(currentTrack.trackId, null);
+        const trackMetadata = { ...metadata, paused: true };
+        return tsClient.updateTrackMetadata(currentTrack.trackId, trackMetadata);
+    }
+    async function resumeStreaming() {
+        if (!currentTrack)
+            return;
+        const media = mediaManager.getMedia();
+        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 };
+        return tsClient.updateTrackMetadata(currentTrack.trackId, trackMetadata);
+    }
+    function disableTrack() {
+        mediaManager.disable();
+    }
+    function enableTrack() {
+        mediaManager.enable();
+    }
+    const stream = async () => {
+        if (getCurrentParticipantStatus() !== "connected")
+            return;
+        if (currentTrack?.trackId) {
+            await resumeStreaming();
+        }
+        else {
+            await startStreaming();
+        }
+    };
+    /**
+     * @see {@link TrackManager#toggle} for more details.
+     */
+    async function toggle(mode = "hard") {
+        const mediaStream = mediaManager.getMedia()?.stream;
+        const track = mediaManager.getTracks()?.[0];
+        const enabled = Boolean(track?.enabled);
+        if (mediaStream && enabled) {
+            mediaManager.disable();
+            if (currentTrack?.trackId) {
+                await pauseStreaming();
+            }
+            if (mode === "hard") {
+                await mediaManager.stop();
+            }
+        }
+        else if (mediaStream && !enabled) {
+            mediaManager.enable();
+            await stream();
+        }
+        else {
+            await mediaManager.start();
+            await stream();
+        }
+    }
+    useEffect(() => {
+        const joinedHandler = () => {
+            if (mediaManager.getTracks().length > 0) {
+                startStreaming();
+            }
+        };
+        const disconnectedHandler = () => {
+            setCurrentTrackId(null);
+        };
+        tsClient.on("joined", joinedHandler);
+        tsClient.on("disconnected", disconnectedHandler);
+        return () => {
+            tsClient.off("joined", joinedHandler);
+            tsClient.off("disconnected", disconnectedHandler);
+        };
+    }, [mediaManager, startStreaming, tsClient]);
+    return {
+        currentTrack,
+        setTrackMiddleware,
+        initialize,
+        stop,
+        startStreaming,
+        stopStreaming,
+        pauseStreaming,
+        resumeStreaming,
+        disableTrack,
+        enableTrack,
+        currentTrackMiddleware,
+        refreshStreamedTrack,
+        paused,
+        toggle,
+    };
+};