@fishjam-cloud/react-client 0.5.2 → 0.6.0

package/dist/hooks/participants.d.ts

@@ -0,0 +1,6 @@
+import type { PeerStateWithTracks } from "../types";
+export declare function useParticipants(): {
+    localParticipant: PeerStateWithTracks | null;
+    participants: PeerStateWithTracks[];
+};
+//# sourceMappingURL=participants.d.ts.map

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

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

package/dist/hooks/participants.js

@@ -0,0 +1,13 @@
+import { useFishjamContext } from "./fishjamContext";
+function getPeerWithDistinguishedTracks(peerState) {
+    const localTracks = Object.values(peerState.tracks ?? {});
+    const videoTracks = localTracks.filter(({ track }) => track?.kind === "video");
+    const audioTracks = localTracks.filter(({ track }) => track?.kind === "audio");
+    return { ...peerState, videoTracks, audioTracks };
+}
+export function useParticipants() {
+    const { state } = useFishjamContext();
+    const localParticipant = state.local ? getPeerWithDistinguishedTracks(state.local) : null;
+    const participants = Object.values(state.remote).map(getPeerWithDistinguishedTracks);
+    return { localParticipant, participants };
+}

package/dist/hooks/public.d.ts

@@ -0,0 +1,7 @@
+export { useConnect, useDisconnect, useReconnection } from "./connection";
+export { useCamera, useMicrophone } from "./devices";
+export { useParticipants } from "./participants";
+export { useScreenShare } from "./screenShare";
+export { useSelector, useStatus, useTracks, useClient } from "./state";
+export { useSetupMedia } from "./setupMedia";
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/hooks/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

package/dist/hooks/public.js

@@ -0,0 +1,6 @@
+export { useConnect, useDisconnect, useReconnection } from "./connection";
+export { useCamera, useMicrophone } from "./devices";
+export { useParticipants } from "./participants";
+export { useScreenShare } from "./screenShare";
+export { useSelector, useStatus, useTracks, useClient } from "./state";
+export { useSetupMedia } from "./setupMedia";

package/dist/hooks/screenShare.d.ts

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

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

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

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

@@ -1,22 +1,24 @@
 import { useCallback, useEffect } from "react";
-import { getRemoteOrLocalTrack } from "./utils/track";
+import { getRemoteOrLocalTrack } from "../utils/track";
+import { useFishjamContext } from "./fishjamContext";
 const getTracks = (stream) => {
     const video = stream.getVideoTracks()[0];
     const audio = stream.getAudioTracks()[0] ?? null;
     return [video, audio];
 };
-export const useScreenShare = (
-// these arguments will be removed after we get rid of create() fn, we will just use the context
-[state, setState], tsClient) => {
+export const useScreenShare = () => {
+    const ctx = useFishjamContext();
+    const [state, setState] = ctx.screenshareState;
+    const tsClient = ctx.state.client.getTsClient();
     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, props?.metadata)];
+        const addTrackPromises = [tsClient.addTrack(video)];
         if (audio)
-            addTrackPromises.push(tsClient.addTrack(audio, props?.metadata));
+            addTrackPromises.push(tsClient.addTrack(audio));
         const [videoId, audioId] = await Promise.all(addTrackPromises);
         setState({ stream, trackIds: { videoId, audioId } });
     };

package/dist/hooks/setupMedia.d.ts

@@ -0,0 +1,3 @@
+import type { UseSetupMediaConfig, UseSetupMediaResult } from "../types";
+export declare const useSetupMedia: (config: UseSetupMediaConfig) => UseSetupMediaResult;
+//# sourceMappingURL=setupMedia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setupMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/setupMedia.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAYzE,eAAO,MAAM,aAAa,WAAY,mBAAmB,KAAG,mBA6O3D,CAAC"}

package/dist/hooks/setupMedia.js

@@ -0,0 +1,200 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useFishjamContext } from "./fishjamContext";
+const isBroadcastedTrackChanged = (client, pending) => client.status === "joined" && !pending && !client.isReconnecting();
+const isBroadcastedTrackStopped = (status, stream) => status === "joined" && stream;
+export const useSetupMedia = (config) => {
+    const { state, videoTrackManager, audioTrackManager } = useFishjamContext();
+    const configRef = useRef(config);
+    useEffect(() => {
+        configRef.current = config;
+        state.client.setDeviceManagerConfig({
+            storage: config.storage,
+        });
+    }, [config, state.client]);
+    useEffect(() => {
+        if (!configRef.current.startOnMount)
+            return;
+        state.client.initializeDevices({
+            audioTrackConstraints: configRef?.current.microphone.trackConstraints,
+            videoTrackConstraints: configRef?.current.camera.trackConstraints,
+        });
+        // eslint-disable-next-line
+    }, []);
+    useEffect(() => {
+        let pending = false;
+        const broadcastOnCameraStart = async (client) => {
+            const config = configRef.current.camera;
+            const onDeviceChange = config.onDeviceChange ?? "replace";
+            const stream = videoTrackManager.getCurrentTrack()?.stream;
+            if (isBroadcastedTrackChanged(client, pending)) {
+                if (!stream && config.broadcastOnDeviceStart) {
+                    pending = true;
+                    await videoTrackManager
+                        .startStreaming(config.defaultSimulcastConfig, config.defaultMaxBandwidth)
+                        .finally(() => {
+                        pending = false;
+                    });
+                }
+                else if (stream && onDeviceChange === "replace") {
+                    pending = true;
+                    await videoTrackManager.refreshStreamedTrack().finally(() => {
+                        pending = false;
+                    });
+                }
+                else if (stream && onDeviceChange === "remove") {
+                    pending = true;
+                    await videoTrackManager.stopStreaming().finally(() => {
+                        pending = false;
+                    });
+                }
+            }
+        };
+        const managerInitialized = async (event, client) => {
+            if (event.video?.media?.stream) {
+                await broadcastOnCameraStart(client);
+            }
+        };
+        const devicesReady = async (event, client) => {
+            if (event.trackType === "video" && event.restarted && event?.media?.stream) {
+                await broadcastOnCameraStart(client);
+            }
+        };
+        const deviceReady = async (event, client) => {
+            if (event.trackType === "video") {
+                await broadcastOnCameraStart(client);
+            }
+        };
+        state.client.on("managerInitialized", managerInitialized);
+        state.client.on("devicesReady", devicesReady);
+        state.client.on("deviceReady", deviceReady);
+        return () => {
+            state.client.removeListener("managerInitialized", managerInitialized);
+            state.client.removeListener("devicesReady", devicesReady);
+            state.client.removeListener("deviceReady", deviceReady);
+        };
+    }, [state.client, videoTrackManager]);
+    useEffect(() => {
+        const removeOnCameraStopped = async (event, client) => {
+            const stream = videoTrackManager.getCurrentTrack()?.stream;
+            const onDeviceStop = configRef.current.camera.onDeviceStop ?? "mute";
+            if (event.mediaDeviceType === "userMedia" &&
+                event.trackType === "video" &&
+                isBroadcastedTrackStopped(client.status, stream)) {
+                if (onDeviceStop === "mute") {
+                    await videoTrackManager.pauseStreaming();
+                }
+                else {
+                    await videoTrackManager.stopStreaming();
+                }
+            }
+        };
+        state.client.on("deviceStopped", removeOnCameraStopped);
+        return () => {
+            state.client.removeListener("deviceStopped", removeOnCameraStopped);
+        };
+    }, [state.client, videoTrackManager]);
+    useEffect(() => {
+        const broadcastCameraOnConnect = async (_, client) => {
+            const camera = client.devices.camera;
+            const stream = camera.stream;
+            const config = configRef.current.camera;
+            if (stream && config.broadcastOnConnect) {
+                await videoTrackManager.startStreaming(config.defaultSimulcastConfig, config.defaultMaxBandwidth);
+            }
+        };
+        state.client.on("joined", broadcastCameraOnConnect);
+        return () => {
+            state.client.removeListener("joined", broadcastCameraOnConnect);
+        };
+    }, [state.client, videoTrackManager]);
+    useEffect(() => {
+        let pending = false;
+        const broadcastOnMicrophoneStart = async (client) => {
+            const stream = audioTrackManager.getCurrentTrack()?.stream;
+            const config = configRef.current.microphone;
+            const onDeviceChange = config.onDeviceChange ?? "replace";
+            if (isBroadcastedTrackChanged(client, pending)) {
+                if (!stream && config.broadcastOnDeviceStart) {
+                    pending = true;
+                    await audioTrackManager.startStreaming(undefined, config.defaultMaxBandwidth).finally(() => {
+                        pending = false;
+                    });
+                }
+                else if (stream && onDeviceChange === "replace") {
+                    pending = true;
+                    await audioTrackManager.refreshStreamedTrack().finally(() => {
+                        pending = false;
+                    });
+                }
+                else if (stream && onDeviceChange === "remove") {
+                    pending = true;
+                    await audioTrackManager.stopStreaming().finally(() => {
+                        pending = false;
+                    });
+                }
+            }
+        };
+        const managerInitialized = async (event, client) => {
+            if (event.audio?.media?.stream) {
+                await broadcastOnMicrophoneStart(client);
+            }
+        };
+        const devicesReady = async (event, client) => {
+            if (event.trackType === "audio" && event.restarted && event?.media?.stream) {
+                await broadcastOnMicrophoneStart(client);
+            }
+        };
+        const deviceReady = async (event, client) => {
+            if (event.trackType === "audio") {
+                await broadcastOnMicrophoneStart(client);
+            }
+        };
+        state.client.on("managerInitialized", managerInitialized);
+        state.client.on("deviceReady", deviceReady);
+        state.client.on("devicesReady", devicesReady);
+        return () => {
+            state.client.removeListener("managerInitialized", managerInitialized);
+            state.client.removeListener("deviceReady", deviceReady);
+            state.client.removeListener("devicesReady", devicesReady);
+        };
+    }, [state.client, audioTrackManager]);
+    useEffect(() => {
+        const onMicrophoneStopped = async (event, client) => {
+            const stream = audioTrackManager.getCurrentTrack()?.stream;
+            const onDeviceStop = configRef.current.microphone.onDeviceStop ?? "mute";
+            const isRightDeviceType = event.mediaDeviceType === "userMedia";
+            const isRightTrackType = event.trackType === "audio";
+            if (isRightDeviceType && isRightTrackType && isBroadcastedTrackStopped(client.status, stream)) {
+                if (onDeviceStop === "mute") {
+                    await audioTrackManager.pauseStreaming();
+                }
+                else {
+                    await audioTrackManager.stopStreaming();
+                }
+            }
+        };
+        state.client.on("deviceStopped", onMicrophoneStopped);
+        return () => {
+            state.client.removeListener("deviceStopped", onMicrophoneStopped);
+        };
+    }, [state.client, audioTrackManager]);
+    useEffect(() => {
+        const broadcastMicrophoneOnConnect = async (_, client) => {
+            const config = configRef.current.microphone;
+            const microphone = client.devices.microphone;
+            if (microphone.stream && config.broadcastOnConnect) {
+                await audioTrackManager.startStreaming(undefined, config.defaultMaxBandwidth);
+            }
+        };
+        state.client.on("joined", broadcastMicrophoneOnConnect);
+        return () => {
+            state.client.removeListener("joined", broadcastMicrophoneOnConnect);
+        };
+    }, [state.client, audioTrackManager]);
+    return useMemo(() => ({
+        init: () => state.client.initializeDevices({
+            audioTrackConstraints: configRef.current?.microphone?.trackConstraints,
+            videoTrackConstraints: configRef.current?.camera?.trackConstraints,
+        }),
+    }), [state.client]);
+};

package/dist/hooks/state.d.ts

@@ -0,0 +1,6 @@
+import type { Selector } from "../state.types";
+export declare function useSelector<Result>(selector: Selector<Result>): Result;
+export declare function useStatus(): import("../state.types").PeerStatus;
+export declare function useTracks(): Record<string, import("../state.types").TrackWithOrigin>;
+export declare function useClient(): import("..").Client;
+//# sourceMappingURL=state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/hooks/state.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,wBAAgB,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,MAAM,CAItE;AAED,wBAAgB,SAAS,wCAExB;AAED,wBAAgB,SAAS,6DAExB;AAED,wBAAgB,SAAS,wBAExB"}

package/dist/hooks/state.js

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { useFishjamContext } from "./fishjamContext";
+export function useSelector(selector) {
+    const { state } = useFishjamContext();
+    return useMemo(() => selector(state), [selector, state]);
+}
+export function useStatus() {
+    return useSelector((s) => s.status);
+}
+export function useTracks() {
+    return useSelector((s) => s.tracks);
+}
+export function useClient() {
+    return useSelector((s) => s.client);
+}

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-export { create } from "./create";
+export * from "./hooks/public";
+export * from "./fishjamProvider";
 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, TrackManager, TrackMiddleware, } from "./types";
+export type { DeviceManagerConfig, Participiants, StorageConfig, Devices, UserMediaAPI, UseSetupMediaResult, UseSetupMediaConfig, CreateFishjamClient, ScreenshareApi, UseConnect, ConnectConfig, TrackManager, TrackMiddleware, 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, ConnectConfig, AuthErrorReason, Encoding, } from "@fishjam-cloud/ts-client";
+export type { Peer, MessageEvents, CreateConfig, TrackBandwidthLimit, SimulcastBandwidthLimit, BandwidthLimit, WebRTCEndpointEvents, TrackContextEvents, Endpoint, SimulcastConfig, TrackContext, VadStatus, EncodingReason, MetadataParser, AuthErrorReason, Encoding, } from "@fishjam-cloud/ts-client";
 export { FishjamClient } 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,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,YAAY,EACZ,eAAe,GAChB,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,aAAa,EACb,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,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,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"}

package/dist/index.js

@@ -1,4 +1,5 @@
-export { create } from "./create";
+export * from "./hooks/public";
+export * from "./fishjamProvider";
 export { Client } from "./Client";
 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,36 +1,36 @@
 import type { Encoding, VadStatus, SimulcastConfig, ReconnectionStatus } from "@fishjam-cloud/ts-client";
-import type { MediaState } from "./types";
+import type { MediaState, PeerMetadata, TrackMetadata } from "./types";
 import type { Devices } from "./types";
 import type { Client } from "./Client";
 export type TrackId = string;
 export type PeerId = string;
-export type Track<TrackMetadata> = {
+export type Track = {
     stream: MediaStream | null;
     encoding: Encoding | null;
     trackId: TrackId;
     metadata?: TrackMetadata;
-    rawMetadata: any;
+    rawMetadata: Record<string, unknown>;
     metadataParsingError?: any;
     simulcastConfig: SimulcastConfig | null;
     vadStatus: VadStatus;
     track: MediaStreamTrack | null;
 };
-export interface Origin<OriginMetadata> {
+export interface Origin {
     id: string;
     type: string;
-    metadata?: OriginMetadata;
-    rawMetadata: any;
+    metadata?: PeerMetadata;
+    rawMetadata: Record<string, unknown>;
     metadataParsingError?: any;
 }
-export type TrackWithOrigin<PeerMetadata, TrackMetadata> = Track<TrackMetadata> & {
-    origin: Origin<PeerMetadata>;
+export type TrackWithOrigin = Track & {
+    origin: Origin;
 };
-export type PeerState<PeerMetadata, TrackMetadata> = {
+export type PeerState = {
     id: PeerId;
     metadata?: PeerMetadata;
-    rawMetadata: any;
+    rawMetadata: Record<string, unknown>;
     metadataParsingError?: any;
-    tracks: Record<TrackId, Track<TrackMetadata>>;
+    tracks: Record<TrackId, Track>;
 };
 export type PeerStatus = "connecting" | "connected" | "authenticated" | "joined" | "error" | "closed" | null;
 export type UseReconnection = {
@@ -39,17 +39,17 @@ export type UseReconnection = {
     isError: boolean;
     isIdle: boolean;
 };
-export type State<PeerMetadata, TrackMetadata> = {
-    local: PeerState<PeerMetadata, TrackMetadata> | null;
-    remote: Record<PeerId, PeerState<PeerMetadata, TrackMetadata>>;
-    tracks: Record<TrackId, TrackWithOrigin<PeerMetadata, TrackMetadata>>;
+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<PeerMetadata, TrackMetadata>;
+    client: Client;
     reconnectionStatus: ReconnectionStatus;
 };
-export type SetStore<PeerMetadata, TrackMetadata> = (setter: (prevState: State<PeerMetadata, TrackMetadata>) => State<PeerMetadata, TrackMetadata>) => void;
-export type Selector<PeerMetadata, TrackMetadata, Result> = (snapshot: State<PeerMetadata, TrackMetadata>) => Result;
+export type SetStore = (setter: (prevState: State) => State) => void;
+export type Selector<Result> = (snapshot: State) => Result;
 //# 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":"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"}
+{"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"}

package/dist/trackManager.d.ts

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

package/dist/trackManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trackManager.d.ts","sourceRoot":"","sources":["../src/trackManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAwC,MAAM,0BAA0B,CAAC;AACpG,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAmB,MAAM,SAAS,CAAC;AAK3E,UAAU,kBAAkB,CAAC,YAAY,EAAE,aAAa;IACtD,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,eAAe,GAAI,YAAY,EAAE,aAAa,+BAGxD,kBAAkB,CAAC,YAAY,EAAE,aAAa,CAAC,KAAG,YAAY,CAAC,aAAa,CA8H9E,CAAC"}
+{"version":3,"file":"trackManager.d.ts","sourceRoot":"","sources":["../src/trackManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAwC,MAAM,0BAA0B,CAAC;AACpG,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAC;AAKxG,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;CACtD;AAOD,eAAO,MAAM,eAAe,+BAAgC,kBAAkB,KAAG,YA6IhF,CAAC"}

package/dist/trackManager.js

@@ -1,8 +1,15 @@
 import { getRemoteOrLocalTrack } from "./utils/track";
 import { useEffect, useState } from "react";
-export const useTrackManager = ({ mediaManager, tsClient, }) => {
+const TRACK_TYPE_TO_DEVICE = {
+    video: "camera",
+    audio: "microphone",
+};
+export const useTrackManager = ({ mediaManager, tsClient }) => {
     const [currentTrackId, setCurrentTrackId] = useState(null);
+    const [paused, setPaused] = useState(false);
     const [currentTrackMiddleware, setCurrentTrackMiddleware] = useState(null);
+    const type = TRACK_TYPE_TO_DEVICE[mediaManager.getDeviceType()];
+    const metadata = { type, paused };
     useEffect(() => {
         const disconnectedHandler = () => {
             setCurrentTrackId(null);
@@ -32,13 +39,13 @@ export const useTrackManager = ({ mediaManager, tsClient, }) => {
     function getCurrentTrack() {
         return getRemoteOrLocalTrack(tsClient, currentTrackId);
     }
-    async function initialize(deviceId) {
-        mediaManager?.start(deviceId ?? true);
+    function initialize(deviceId) {
+        return mediaManager?.start(deviceId ?? true);
     }
-    async function stop() {
-        mediaManager?.stop();
+    function stop() {
+        return mediaManager?.stop();
     }
-    async function startStreaming(trackMetadata, simulcastConfig, maxBandwidth) {
+    async function startStreaming(simulcastConfig, maxBandwidth) {
         if (currentTrackId)
             throw Error("Track already added");
         const media = mediaManager.getMedia();
@@ -49,11 +56,13 @@ export const useTrackManager = ({ mediaManager, tsClient, }) => {
             return track.trackId;
         // see `getRemoteOrLocalTrackContext()` explanation
         setCurrentTrackId(media.track.id);
+        const trackMetadata = { ...metadata, paused: false };
         const remoteTrackId = await tsClient.addTrack(media.track, trackMetadata, simulcastConfig, maxBandwidth);
         setCurrentTrackId(remoteTrackId);
+        setPaused(false);
         return remoteTrackId;
     }
-    async function refreshStreamedTrack() {
+    function refreshStreamedTrack() {
         const prevTrack = getPreviousTrack();
         const newTrack = mediaManager.getTracks()[0];
         if (!newTrack)
@@ -63,24 +72,31 @@ export const useTrackManager = ({ mediaManager, tsClient, }) => {
     function stopStreaming() {
         const prevTrack = getPreviousTrack();
         setCurrentTrackId(null);
+        setPaused(true);
         return tsClient.removeTrack(prevTrack.trackId);
     }
-    function pauseStreaming() {
+    async function pauseStreaming() {
         const prevTrack = getPreviousTrack();
-        return tsClient.replaceTrack(prevTrack.trackId, null);
+        setPaused(true);
+        await tsClient.replaceTrack(prevTrack.trackId, null);
+        const trackMetadata = { ...metadata, paused: true };
+        return tsClient.updateTrackMetadata(prevTrack.trackId, trackMetadata);
     }
-    function resumeStreaming() {
+    async function resumeStreaming() {
         const prevTrack = getPreviousTrack();
         const media = mediaManager.getMedia();
         if (!media)
             throw Error("Device is unavailable");
-        return tsClient.replaceTrack(prevTrack.trackId, media.track);
+        setPaused(false);
+        await tsClient.replaceTrack(prevTrack.trackId, media.track);
+        const trackMetadata = { ...metadata, paused: false };
+        return tsClient.updateTrackMetadata(prevTrack.trackId, trackMetadata);
     }
     function disableTrack() {
-        return mediaManager.disable();
+        mediaManager.disable();
     }
     function enableTrack() {
-        return mediaManager.enable();
+        mediaManager.enable();
     }
     return {
         getCurrentTrack,
@@ -95,5 +111,6 @@ export const useTrackManager = ({ mediaManager, tsClient, }) => {
         enableTrack,
         currentTrackMiddleware,
         refreshStreamedTrack,
+        paused,
     };
 };