@fishjam-cloud/react-client 0.5.5 → 0.7.0

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/useFishjamContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export const FishjamContext = createContext(null);
+export function useFishjamContext() {
+    const context = useContext(FishjamContext);
+    if (!context)
+        throw new Error("useFishjamContext must be used within a FishjamContextProvider");
+    return context;
+}

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/useParticipants.d.ts

@@ -0,0 +1,6 @@
+import type { PeerStateWithTracks } from "../types";
+export declare function useParticipants(): {
+    localParticipant: PeerStateWithTracks | null;
+    participants: PeerStateWithTracks[];
+};
+//# 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/useScreenShare.d.ts

@@ -0,0 +1,3 @@
+import type { ScreenshareApi } from "../types";
+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":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,UAAU,CAAC;AAUjE,eAAO,MAAM,cAAc,QAAO,cA0IjC,CAAC"}

package/dist/hooks/useScreenShare.js

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef } 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];
+};
+export const useScreenShare = () => {
+    const ctx = useFishjamContext();
+    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 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, { 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)];
+        if (newAudioTrack && state.trackIds.audioId) {
+            addTrackPromises.push(tsClient.replaceTrack(state.trackIds.audioId, newAudioTrack));
+        }
+        await Promise.all(addTrackPromises);
+    };
+    const cleanMiddleware = useCallback(() => {
+        cleanMiddlewareFnRef.current?.();
+        cleanMiddlewareFnRef.current = null;
+    }, []);
+    const setTracksMiddleware = async (middleware) => {
+        if (!state?.stream)
+            return;
+        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.stream) {
+            console.warn("No stream to stop");
+            return;
+        }
+        const [video, audio] = getTracks(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);
+        cleanMiddleware();
+        setState(({ tracksMiddleware }) => ({ stream: null, trackIds: null, tracksMiddleware }));
+    }, [state, fishjamClientRef, setState, cleanMiddleware]);
+    useEffect(() => {
+        if (!state.stream)
+            return;
+        const [video, audio] = getTracks(state.stream);
+        const trackEndedHandler = () => {
+            stopStreaming();
+        };
+        video.addEventListener("ended", trackEndedHandler);
+        audio?.addEventListener("ended", trackEndedHandler);
+        return () => {
+            video.removeEventListener("ended", trackEndedHandler);
+            audio?.removeEventListener("ended", trackEndedHandler);
+        };
+    }, [state, stopStreaming]);
+    useEffect(() => {
+        const client = fishjamClientRef.current;
+        const onDisconnected = () => {
+            if (stream) {
+                stopStreaming();
+            }
+        };
+        client.on("disconnected", onDisconnected);
+        return () => {
+            client.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;
+    return {
+        startStreaming,
+        stopStreaming,
+        stream,
+        videoTrack,
+        audioTrack,
+        videoBroadcast,
+        audioBroadcast,
+        setTracksMiddleware,
+        currentTracksMiddleware: state?.tracksMiddleware ?? null,
+    };
+};

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,
+    };
+};

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-export { create } from "./create";
-export { Client } from "./Client";
-export type { ClientEvents } from "./Client";
-export type { PeerState, Track, PeerId, TrackId, TrackWithOrigin, Origin, PeerStatus, Selector, State, SetStore, } from "./state.types";
-export type { DeviceManagerConfig, StorageConfig, Devices, UserMediaAPI, UseSetupMediaResult, UseSetupMediaConfig, CreateFishjamClient, ScreenshareApi, UseConnect, ConnectConfig, TrackManager, TrackMiddleware, TrackMetadata, // only for compatibility reasons, will be removed in: FCE-415
+export * from "./hooks/public";
+export * from "./fishjamProvider";
+export type { PeerState, Track, PeerId, TrackId, TrackWithOrigin, Origin, ParticipantStatus } from "./state.types";
+export type { DeviceManagerConfig, Participiants, StorageConfig, Devices, Device, AudioDevice, UseSetupMediaResult, UseSetupMediaConfig, ScreenshareApi, UseConnect, ConnectConfig, TrackMiddleware, PeerStateWithTracks, TrackMetadata, // only for compatibility reasons, will be removed in: FCE-415
 PeerMetadata, } from "./types";
 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";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,YAAY,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EAAE,8DAA8D;AAC7E,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,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;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEnH,YAAY,EACV,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,OAAO,EACP,MAAM,EACN,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,aAAa,EAAE,8DAA8D;AAC7E,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,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;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
-export { create } from "./create";
-export { Client } from "./Client";
+export * from "./hooks/public";
+export * from "./fishjamProvider";
 export { AUDIO_TRACK_CONSTRAINTS, VIDEO_TRACK_CONSTRAINTS, SCREEN_SHARING_MEDIA_CONSTRAINTS } from "./constraints";
 export { FishjamClient } from "@fishjam-cloud/ts-client";

package/dist/state.types.d.ts

@@ -1,7 +1,5 @@
-import type { Encoding, VadStatus, SimulcastConfig, ReconnectionStatus } from "@fishjam-cloud/ts-client";
-import type { MediaState, PeerMetadata, TrackMetadata } from "./types";
-import type { Devices } from "./types";
-import type { Client } from "./Client";
+import type { Encoding, VadStatus, SimulcastConfig } from "@fishjam-cloud/ts-client";
+import type { PeerMetadata, TrackMetadata } from "./types";
 export type TrackId = string;
 export type PeerId = string;
 export type Track = {
@@ -32,24 +30,13 @@ export type PeerState = {
     metadataParsingError?: any;
     tracks: Record<TrackId, Track>;
 };
-export type PeerStatus = "connecting" | "connected" | "authenticated" | "joined" | "error" | "closed" | null;
-export type UseReconnection = {
-    status: ReconnectionStatus;
-    isReconnecting: boolean;
-    isError: boolean;
-    isIdle: boolean;
-};
-export type State = {
-    local: PeerState | null;
-    remote: Record<PeerId, PeerState>;
-    tracks: Record<TrackId, TrackWithOrigin>;
-    bandwidthEstimation: bigint;
-    status: PeerStatus;
-    media: MediaState | null;
-    devices: Devices;
-    client: Client;
-    reconnectionStatus: ReconnectionStatus;
-};
-export type SetStore = (setter: (prevState: State) => State) => void;
-export type Selector<Result> = (snapshot: State) => Result;
+/**
+ * Represents the possible statuses of a peer connection.
+ *
+ * idle - Participant is not connected, either never connected or successfully disconnected.
+ * connecting - Participant is in the process of connecting.
+ * connected - Participant has successfully connected.
+ * error - There was an error in the connection process.
+ */
+export type ParticipantStatus = "connecting" | "connected" | "error" | "idle";
 //# sourceMappingURL=state.types.d.ts.map

package/dist/state.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.types.d.ts","sourceRoot":"","sources":["../src/state.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzG,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAC7B,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;AAE7G,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACzC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,EAAE,kBAAkB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC;AAErE,MAAM,MAAM,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,MAAM,CAAC"}
+{"version":3,"file":"state.types.d.ts","sourceRoot":"","sources":["../src/state.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACrF,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAC7B,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAChC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC"}