@fishjam-cloud/react-client 0.6.0 → 0.7.1

package/dist/hooks/useDevices.js

@@ -0,0 +1,98 @@
+import { useFishjamContext } from "./useFishjamContext";
+import { useVideoDeviceManager } from "./deviceManagers/useVideoDeviceManager";
+import { useAudioDeviceManager } from "./deviceManagers/useAudioDeviceManager";
+import { useCallback } from "react";
+import { getAvailableMedia, getCorrectedResult } from "../mediaInitializer";
+import { useProcessedPreviewStream } from "./useProcessedPreviewStream";
+import { prepareConstraints } from "../constraints";
+/**
+ *
+ * @category Devices
+ */
+export function useCamera() {
+    const { videoTrackManager } = useFishjamContext();
+    const { deviceState, status } = useVideoDeviceManager();
+    const { currentTrack, ...trackManager } = videoTrackManager;
+    const processedPreviewStream = useProcessedPreviewStream(videoTrackManager, deviceState.media?.track);
+    const stream = currentTrack?.stream ?? processedPreviewStream ?? deviceState.media?.stream ?? 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;
+    return {
+        ...trackManager,
+        status,
+        stream,
+        devices,
+        activeDevice,
+        isStreaming,
+        track,
+        trackId,
+    };
+}
+/**
+ *
+ * @category Devices
+ */
+export function useMicrophone() {
+    const { audioTrackManager } = useFishjamContext();
+    const { deviceState, status } = useAudioDeviceManager();
+    const { currentTrack, ...trackManager } = audioTrackManager;
+    const processedPreviewStream = useProcessedPreviewStream(audioTrackManager, deviceState.media?.track);
+    const stream = currentTrack?.stream ?? processedPreviewStream ?? deviceState.media?.stream ?? 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";
+    return {
+        ...trackManager,
+        status,
+        stream,
+        isStreaming,
+        track,
+        trackId,
+        devices,
+        activeDevice,
+        isAudioPlaying,
+    };
+}
+/**
+ *
+ * @category Devices
+ */
+export const useInitializeDevices = () => {
+    const { videoDeviceManagerRef, audioDeviceManagerRef, hasDevicesBeenInitializedRef } = useFishjamContext();
+    const initializeDevices = useCallback(async () => {
+        if (hasDevicesBeenInitializedRef.current)
+            return;
+        hasDevicesBeenInitializedRef.current = true;
+        const videoManager = videoDeviceManagerRef.current;
+        const audioManager = audioDeviceManagerRef.current;
+        const constraints = {
+            video: videoManager.getConstraints(),
+            audio: audioManager.getConstraints(),
+        };
+        const previousDevices = {
+            video: videoManager.getLastDevice(),
+            audio: audioManager.getLastDevice(),
+        };
+        // Attempt to start the last selected device to avoid an unnecessary restart.
+        // Without this, the first device will start, and `getCorrectedResult` will attempt to fix it.
+        let [stream, deviceErrors] = await getAvailableMedia({
+            video: prepareConstraints(previousDevices.video?.deviceId, constraints.video),
+            audio: prepareConstraints(previousDevices.audio?.deviceId, constraints.audio),
+        });
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(({ kind }) => kind === "videoinput");
+        const audioDevices = devices.filter(({ kind }) => kind === "audioinput");
+        if (stream) {
+            [stream, deviceErrors] = await getCorrectedResult(stream, deviceErrors, devices, constraints, previousDevices);
+        }
+        videoManager.initialize(stream, stream?.getVideoTracks()?.[0] ?? null, videoDevices, !!constraints.video, deviceErrors.video);
+        audioManager.initialize(stream, stream?.getAudioTracks()?.[0] ?? null, audioDevices, !!constraints.audio, deviceErrors.audio);
+    }, [videoDeviceManagerRef, audioDeviceManagerRef, hasDevicesBeenInitializedRef]);
+    return { initializeDevices };
+};

package/dist/hooks/useFishjamClientState.d.ts

@@ -0,0 +1,10 @@
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { PeerMetadata, PeerState, TrackMetadata } from "../types/internal";
+export interface FishjamClientState {
+    peers: PeerState[];
+    components: PeerState[];
+    localPeer: PeerState | null;
+    isReconnecting: boolean;
+}
+export declare function useFishjamClientState(fishjamClient: FishjamClient<PeerMetadata, TrackMetadata>): FishjamClientState;
+//# sourceMappingURL=useFishjamClientState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFishjamClientState.d.ts","sourceRoot":"","sources":["../../src/hooks/useFishjamClientState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA0D,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAW,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA2CzF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;CACzB;AAmCD,wBAAgB,qBAAqB,CAAC,aAAa,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,GAAG,kBAAkB,CAyCnH"}

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,31 @@ const eventNames = [
     "localTrackMetadataChanged",
     "disconnectRequested",
 ];
-export const useClientState = (client) => {
+function trackContextToTrack(track) {
+    return {
+        metadata: track.metadata,
+        trackId: track.trackId,
+        stream: track.stream,
+        simulcastConfig: track.simulcastConfig ?? null,
+        encoding: track.encoding ?? null,
+        vadStatus: track.vadStatus,
+        track: track.track,
+    };
+}
+function endpointToPeerState(peer) {
+    const tracks = [...peer.tracks].reduce((acc, [, track]) => ({ ...acc, [track.trackId]: trackContextToTrack(track) }), {});
+    return {
+        metadata: peer.metadata,
+        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 +77,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,7 @@
+/**
+ *
+ * @category Connection
+ * @deprecated
+ */
+export declare function useFishjamClient_DO_NOT_USE(): import("@fishjam-cloud/ts-client").FishjamClient<import("../types/internal").PeerMetadata, import("../types/internal").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;;;;GAIG;AACH,wBAAgB,2BAA2B,0IAI1C"}

package/dist/hooks/useFishjamClient_DO_NOT_USE.js

@@ -0,0 +1,11 @@
+import { useFishjamContext } from "./useFishjamContext";
+import { useMemo } from "react";
+/**
+ *
+ * @category Connection
+ * @deprecated
+ */
+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/internal";
+import type { DeviceManager } from "../DeviceManager";
+import type { FishjamClientState } from "./useFishjamClientState";
+import type { PeerStatus } 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>>];
+    peerStatus: PeerStatus;
+    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,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"}

package/dist/hooks/usePeerStatus.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePeerStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/usePeerStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,eAAO,MAAM,aAAa,WAAY,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC;;;CA8C/E,CAAC"}

package/dist/hooks/usePeerStatus.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const usePeerStatus = (client) => {
+    const [peerStatus, setPeerStatusState] = useState("idle");
+    const peerStatusRef = useRef("idle");
+    const setPeerStatus = useCallback((status) => {
+        peerStatusRef.current = status;
+        setPeerStatusState(status);
+    }, [setPeerStatusState]);
+    const getCurrentPeerStatus = useCallback(() => peerStatusRef.current, []);
+    useEffect(() => {
+        const setConnecting = () => {
+            setPeerStatus("connecting");
+        };
+        const setError = () => {
+            setPeerStatus("error");
+        };
+        const setJoined = () => {
+            setPeerStatus("connected");
+        };
+        const setDisconnected = () => {
+            setPeerStatus("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, setPeerStatus]);
+    return { peerStatus, getCurrentPeerStatus };
+};

package/dist/hooks/usePeers.d.ts

@@ -0,0 +1,10 @@
+import type { PeerWithTracks } from "../types/public";
+/**
+ *
+ * @category Connection
+ */
+export declare function usePeers(): {
+    localPeer: PeerWithTracks | null;
+    peers: PeerWithTracks[];
+};
+//# sourceMappingURL=usePeers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePeers.d.ts","sourceRoot":"","sources":["../../src/hooks/usePeers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AActD;;;GAGG;AACH,wBAAgB,QAAQ;;;EAOvB"}

package/dist/hooks/usePeers.js

@@ -0,0 +1,19 @@
+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 };
+}
+/**
+ *
+ * @category Connection
+ */
+export function usePeers() {
+    const { clientState } = useFishjamContext();
+    const localPeer = clientState.localPeer ? getPeerWithDistinguishedTracks(clientState.localPeer) : null;
+    const peers = Object.values(clientState.peers).map(getPeerWithDistinguishedTracks);
+    return { localPeer, peers };
+}

package/dist/hooks/useProcessedPreviewStream.d.ts

@@ -0,0 +1,3 @@
+import type { TrackManager } from "../types/internal";
+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,mBAAmB,CAAC;AAEtD,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,7 @@
+import type { ReconnectionStatus } from "@fishjam-cloud/ts-client";
+/**
+ *
+ * @category Connection
+ */
+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;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,kBA6BlC,CAAC"}

package/dist/hooks/useReconnection.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useFishjamContext } from "./useFishjamContext";
+/**
+ *
+ * @category Connection
+ */
+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/useScreenShare.d.ts

@@ -0,0 +1,7 @@
+import type { ScreenshareApi } from "../types/public";
+/**
+ *
+ * @category Screenshare
+ */
+export declare const useScreenShare: () => ScreenshareApi;
+//# 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":"AAGA,OAAO,KAAK,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQxE;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,cA0IjC,CAAC"}

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

@@ -1,24 +1,40 @@
-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;
     return [video, audio];
 };
+/**
+ *
+ * @category Screenshare
+ */
 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?.peer?.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 +47,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 +73,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 +96,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,6 @@
+/**
+ *
+ * @category Connection
+ */
+export declare function useStatus(): import("..").PeerStatus;
+//# 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;;;GAGG;AACH,wBAAgB,SAAS,4BAExB"}

package/dist/hooks/useStatus.js

@@ -0,0 +1,8 @@
+import { useFishjamContext } from "./useFishjamContext";
+/**
+ *
+ * @category Connection
+ */
+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/internal";
+import type { PeerStatus } from "../types/public";
+interface TrackManagerConfig {
+    mediaManager: MediaManager;
+    tsClient: FishjamClient<PeerMetadata, TrackMetadata>;
+    getCurrentPeerStatus: () => PeerStatus;
+}
+export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentPeerStatus }: 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,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"}