@fishjam-cloud/react-client 0.5.0

package/dist/DeviceManager.js

@@ -0,0 +1,157 @@
+import { prepareMediaTrackConstraints, toMediaTrackConstraints } from "./constraints";
+import EventEmitter from "events";
+import { getDeviceInfo, getLocalStorageConfig, prepareDeviceState } from "./utils/media";
+import { parseUserMediaError } from "./utils/errors";
+export class DeviceManager extends EventEmitter {
+    constraints;
+    storageConfig;
+    status = "uninitialized";
+    deviceType;
+    deviceState = {
+        media: null,
+        mediaStatus: "Not requested",
+        devices: null,
+        devicesStatus: "Not requested",
+        error: null,
+    };
+    constructor(deviceType, defaultConfig) {
+        super();
+        this.storageConfig = this.createStorageConfig(defaultConfig?.storage);
+        this.deviceType = deviceType;
+        this.constraints = toMediaTrackConstraints(defaultConfig?.trackConstraints ?? true);
+    }
+    createStorageConfig(storage) {
+        if (storage === false)
+            return null;
+        if (storage === true || storage === undefined)
+            return getLocalStorageConfig(this.deviceType);
+        return storage;
+    }
+    getStatus() {
+        return this.status;
+    }
+    getConstraints(currentConstraints) {
+        if (currentConstraints === false)
+            return undefined;
+        if (currentConstraints === undefined || currentConstraints === true)
+            return this.constraints;
+        return currentConstraints ?? this.constraints;
+    }
+    getMedia = () => this.deviceState.media;
+    getTracks = () => {
+        if (this.deviceType === "audio") {
+            return this.deviceState.media?.stream?.getAudioTracks() ?? [];
+        }
+        return this.deviceState.media?.stream?.getVideoTracks() ?? [];
+    };
+    initialize = (stream, track, devices, requestedMedia, error = null) => {
+        this.deviceState = prepareDeviceState(stream, track, devices, error, requestedMedia);
+        const deviceInfo = this.deviceState.media?.deviceInfo;
+        if (deviceInfo)
+            this.saveLastDevice(deviceInfo);
+        this.status = "initialized";
+        this.setupOnEndedCallback();
+        return this.deviceState;
+    };
+    setupOnEndedCallback() {
+        if (this.deviceState?.media?.track) {
+            this.deviceState.media.track.addEventListener("ended", async (event) => await this.onTrackEnded(event.target.id));
+        }
+    }
+    onTrackEnded = async (trackId) => {
+        if (trackId === this?.deviceState.media?.track?.id) {
+            await this.stop();
+        }
+    };
+    getLastDevice() {
+        return this.storageConfig?.getLastDevice?.() ?? null;
+    }
+    saveLastDevice(info) {
+        if (!this.storageConfig)
+            console.warn("Device manager storage has been disabled");
+        this.storageConfig?.saveLastDevice(info);
+    }
+    // todo `audioDeviceId / videoDeviceId === true` means use last device
+    async start(deviceId) {
+        const shouldRestart = !!deviceId && deviceId !== this.deviceState.media?.deviceInfo?.deviceId;
+        const newDevice = deviceId === true ? this.getLastDevice()?.deviceId || true : deviceId;
+        const trackConstraints = this.constraints;
+        const exactConstraints = shouldRestart && prepareMediaTrackConstraints(newDevice, trackConstraints);
+        if (!exactConstraints)
+            return;
+        this.deviceState.mediaStatus = "Requesting";
+        this.emit("devicesStarted", { ...this.deviceState, restarting: shouldRestart, constraints: newDevice }, this.deviceState);
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ [this.deviceType]: exactConstraints });
+            const getTrack = () => {
+                const tracks = this.deviceType === "audio" ? stream.getAudioTracks() : stream.getVideoTracks();
+                return tracks[0] ?? null;
+            };
+            const currentDeviceId = getTrack()?.getSettings()?.deviceId;
+            const deviceInfo = currentDeviceId ? getDeviceInfo(currentDeviceId, this.deviceState.devices ?? []) : null;
+            if (deviceInfo) {
+                this.saveLastDevice?.(deviceInfo);
+            }
+            // The device manager assumes that there is only one audio and video track.
+            // All previous tracks are deactivated even if the browser is able to handle multiple active sessions. (Chrome, Firefox)
+            //
+            // Safari always deactivates the track and emits the `ended` event.
+            // Its handling is asynchronous and can be executed even before returning a value from the re-execution of `getUserMedia`.
+            // In such a case, the tracks are already deactivated at this point (logic in `onTrackEnded` method).
+            // The track is null, so the stop method will not execute.
+            //
+            // However, if Safari has not yet handled this event, the tracks are manually stopped at this point.
+            // Manually stopping tracks on its own does not generate the `ended` event.
+            // The ended event in Safari has already been emitted and will be handled in the future.
+            // Therefore, in the `onTrackEnded` method, events for already stopped tracks are filtered out to prevent the state from being damaged.
+            if (shouldRestart) {
+                this.deviceState?.media?.track?.stop();
+                this.deviceState.media = {
+                    stream: stream,
+                    track: getTrack(),
+                    deviceInfo,
+                    enabled: true,
+                };
+            }
+            this.setupOnEndedCallback();
+            this.deviceState.mediaStatus = "OK";
+            this.emit("devicesReady", { ...this.deviceState, restarted: shouldRestart }, this.deviceState);
+        }
+        catch (err) {
+            const parsedError = parseUserMediaError(err);
+            const event = {
+                parsedError,
+                constraints: exactConstraints,
+            };
+            if (exactConstraints) {
+                this.deviceState.error = parsedError;
+            }
+            this.emit("error", event, this.deviceState);
+        }
+    }
+    async stop() {
+        this.deviceState.media?.track?.stop();
+        this.deviceState.media = null;
+        this.emit("deviceStopped", this.deviceState);
+    }
+    disable() {
+        if (!this.deviceState.media || !this.deviceState.media?.track) {
+            return;
+        }
+        this.deviceState.media.track.enabled = false;
+        this.deviceState.media.enabled = false;
+        this.emit("deviceDisabled", this.deviceState);
+    }
+    enable() {
+        if (!this.deviceState.media || !this.deviceState.media?.track) {
+            return;
+        }
+        this.deviceState.media.track.enabled = true;
+        this.deviceState.media.enabled = true;
+        this.emit("deviceEnabled", this.deviceState);
+    }
+    setConfig(storage, constraints) {
+        this.storageConfig = this.createStorageConfig(storage);
+        this.constraints = constraints ? toMediaTrackConstraints(constraints) : undefined;
+    }
+}

package/dist/ScreenShareManager.d.ts

@@ -0,0 +1,57 @@
+import type TypedEmitter from "typed-emitter";
+import type { DeviceError, DevicesStatus } from "./types";
+import type { TrackKind } from "@fishjam-cloud/ts-client";
+export type TrackType = TrackKind | "audiovideo";
+export type MediaDeviceType = "displayMedia" | "userMedia";
+export type DisplayMediaManagerEvents = {
+    deviceReady: (event: {
+        type: TrackType;
+    }, state: ScreenShareDeviceState) => void;
+    deviceStopped: (event: {
+        type: TrackType;
+    }, state: ScreenShareDeviceState) => void;
+    deviceEnabled: (event: {
+        type: TrackType;
+    }, state: ScreenShareDeviceState) => void;
+    deviceDisabled: (event: {
+        type: TrackType;
+    }, state: ScreenShareDeviceState) => void;
+    error: (event: {
+        type: TrackType;
+        error: DeviceError | null;
+        rawError: any;
+    }, state: ScreenShareDeviceState) => void;
+};
+export interface ScreenShareManagerConfig {
+    audioTrackConstraints?: boolean | MediaTrackConstraints;
+    videoTrackConstraints?: boolean | MediaTrackConstraints;
+}
+export type ScreenShareMedia = {
+    stream: MediaStream | null;
+    track: MediaStreamTrack | null;
+    enabled: boolean;
+};
+export type ScreenShareDeviceState = {
+    status: DevicesStatus;
+    audioMedia: ScreenShareMedia | null;
+    videoMedia: ScreenShareMedia | null;
+    error: DeviceError | null;
+};
+declare const ScreenShareManager_base: new () => TypedEmitter<DisplayMediaManagerEvents>;
+export declare class ScreenShareManager extends ScreenShareManager_base {
+    private readonly defaultConfig?;
+    private config?;
+    private data;
+    getSnapshot(): ScreenShareDeviceState;
+    constructor(defaultConfig?: ScreenShareManagerConfig);
+    setConfig(config: ScreenShareManagerConfig): void;
+    private getType;
+    getMedia: () => ScreenShareMedia | null;
+    start(config?: ScreenShareManagerConfig): Promise<void>;
+    private setupOnEndedCallback;
+    private onTrackEnded;
+    stop(type: TrackType): Promise<void>;
+    setEnable(type: TrackType, value: boolean): void;
+}
+export {};
+//# sourceMappingURL=ScreenShareManager.d.ts.map

package/dist/ScreenShareManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenShareManager.d.ts","sourceRoot":"","sources":["../src/ScreenShareManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,YAAY,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,CAAC;AAE3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACjF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnF,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpF,KAAK,EAAE,CACL,KAAK,EAAE;QACL,IAAI,EAAE,SAAS,CAAC;QAChB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,EACD,KAAK,EAAE,sBAAsB,KAC1B,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IACxD,qBAAqB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;CACzD;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;iDAEiE,YAAY,CAAC,yBAAyB,CAAC;AAA1G,qBAAa,kBAAmB,SAAQ,uBAAmE;IACzG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAA2B;IAC1D,OAAO,CAAC,MAAM,CAAC,CAA2B;IAE1C,OAAO,CAAC,IAAI,CAKV;IAGK,WAAW,IAAI,sBAAsB;gBAIhC,aAAa,CAAC,EAAE,wBAAwB;IAK7C,SAAS,CAAC,MAAM,EAAE,wBAAwB;IAIjD,OAAO,CAAC,OAAO;IAOR,QAAQ,gCAA8B;IAEhC,KAAK,CAAC,MAAM,CAAC,EAAE,wBAAwB;IA0CpD,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,YAAY,CAKlB;IAEW,IAAI,CAAC,IAAI,EAAE,SAAS;IA2B1B,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO;CAwBjD"}

package/dist/ScreenShareManager.js

@@ -0,0 +1,135 @@
+import EventEmitter from "events";
+import { parseUserMediaError } from "./utils/errors";
+export class ScreenShareManager extends EventEmitter {
+    defaultConfig;
+    config;
+    data = {
+        audioMedia: null,
+        videoMedia: null,
+        status: "Not requested",
+        error: null,
+    };
+    // todo add nested read only
+    getSnapshot() {
+        return this.data;
+    }
+    constructor(defaultConfig) {
+        super();
+        this.defaultConfig = defaultConfig;
+    }
+    setConfig(config) {
+        this.config = config;
+    }
+    getType(options) {
+        if (options.audio && options.video)
+            return "audiovideo";
+        if (options.audio)
+            return "audio";
+        if (options.video)
+            return "video";
+        return null;
+    }
+    getMedia = () => this.data.videoMedia;
+    async start(config) {
+        const options = {
+            video: config?.videoTrackConstraints ??
+                this.config?.videoTrackConstraints ??
+                this.defaultConfig?.videoTrackConstraints,
+            audio: config?.audioTrackConstraints ??
+                this.config?.audioTrackConstraints ??
+                this.defaultConfig?.audioTrackConstraints,
+        };
+        const type = this.getType(options);
+        if (!type)
+            return;
+        try {
+            const newStream = await navigator.mediaDevices.getDisplayMedia(options);
+            this.data = {
+                error: null,
+                videoMedia: {
+                    enabled: true,
+                    stream: newStream,
+                    track: newStream?.getVideoTracks()[0] ?? null,
+                },
+                audioMedia: {
+                    enabled: true,
+                    stream: newStream,
+                    track: newStream?.getAudioTracks()[0] ?? null,
+                },
+                status: "OK",
+            };
+            this.setupOnEndedCallback();
+            this.emit("deviceReady", { type: type }, this.data);
+        }
+        catch (error) {
+            const parsedError = parseUserMediaError(error);
+            this.emit("error", { type, error: parsedError, rawError: error }, this.data);
+        }
+    }
+    setupOnEndedCallback() {
+        if (this.data.videoMedia?.track) {
+            this.data.videoMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("video", event.target.id));
+        }
+        if (this.data.audioMedia?.track) {
+            this.data.audioMedia.track.addEventListener("ended", async (event) => await this.onTrackEnded("audio", event.target.id));
+        }
+    }
+    onTrackEnded = async (kind, trackId) => {
+        const mediaType = kind === "video" ? "videoMedia" : "audioMedia";
+        if (trackId === this?.data[mediaType]?.track?.id) {
+            await this.stop("audiovideo");
+        }
+    };
+    async stop(type) {
+        if (type === "video") {
+            for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
+                track.stop();
+            }
+            this.data.videoMedia = null;
+        }
+        else if (type === "audio") {
+            // todo test it
+            for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
+                track.stop();
+            }
+            this.data.audioMedia = null;
+        }
+        else {
+            for (const track of this.data?.videoMedia?.stream?.getTracks() ?? []) {
+                track.stop();
+            }
+            this.data.videoMedia = null;
+            for (const track of this.data?.audioMedia?.stream?.getTracks() ?? []) {
+                track.stop();
+            }
+            this.data.audioMedia = null;
+        }
+        this.emit("deviceStopped", { type }, this.data);
+    }
+    setEnable(type, value) {
+        if (type === "video" && this.data.videoMedia?.track) {
+            this.data.videoMedia.track.enabled = value;
+            this.data.videoMedia.enabled = value;
+        }
+        else if (type === "audio" && this.data.audioMedia?.track) {
+            this.data.audioMedia.track.enabled = value;
+            this.data.audioMedia.enabled = value;
+        }
+        else {
+            if (this.data.videoMedia?.track) {
+                this.data.videoMedia.track.enabled = value;
+                this.data.videoMedia.enabled = value;
+            }
+            if (this.data.audioMedia?.track) {
+                this.data.audioMedia.track.enabled = value;
+                this.data.audioMedia.enabled = value;
+            }
+        }
+        if (value) {
+            this.emit("deviceEnabled", { type }, this.data);
+        }
+        else {
+            this.emit("deviceDisabled", { type }, this.data);
+        }
+    }
+}

package/dist/constraints.d.ts

@@ -0,0 +1,26 @@
+export declare const AUDIO_TRACK_CONSTRAINTS: MediaTrackConstraints;
+export declare const VIDEO_TRACK_CONSTRAINTS: MediaTrackConstraints;
+export declare const SCREEN_SHARING_MEDIA_CONSTRAINTS: MediaStreamConstraints;
+export declare const toMediaTrackConstraints: (constraint?: boolean | MediaTrackConstraints) => MediaTrackConstraints | undefined;
+export declare const prepareMediaTrackConstraints: (deviceId: string | undefined | boolean, constraints: MediaTrackConstraints | undefined) => MediaTrackConstraints | boolean;
+export declare const getExactDeviceConstraint: (constraints: MediaTrackConstraints | undefined, deviceId: string | undefined) => {
+    deviceId: {
+        exact: string | undefined;
+    };
+    advanced?: MediaTrackConstraintSet[];
+    aspectRatio?: ConstrainDouble;
+    autoGainControl?: ConstrainBoolean;
+    channelCount?: ConstrainULong;
+    displaySurface?: ConstrainDOMString;
+    echoCancellation?: ConstrainBoolean;
+    facingMode?: ConstrainDOMString;
+    frameRate?: ConstrainDouble;
+    groupId?: ConstrainDOMString;
+    height?: ConstrainULong;
+    noiseSuppression?: ConstrainBoolean;
+    sampleRate?: ConstrainULong;
+    sampleSize?: ConstrainULong;
+    width?: ConstrainULong;
+};
+export declare const prepareConstraints: (deviceIdToStart: string | undefined, constraints: MediaTrackConstraints | undefined) => MediaTrackConstraints | undefined | boolean;
+//# sourceMappingURL=constraints.d.ts.map

package/dist/constraints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constraints.d.ts","sourceRoot":"","sources":["../src/constraints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,EAAE,qBAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,qBAerC,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,sBAM9C,CAAC;AAEF,eAAO,MAAM,uBAAuB,gBACrB,OAAO,GAAG,qBAAqB,KAC3C,qBAAqB,GAAG,SAK1B,CAAC;AAEF,eAAO,MAAM,4BAA4B,aAC7B,MAAM,GAAG,SAAS,GAAG,OAAO,eACzB,qBAAqB,GAAG,SAAS,KAC7C,qBAAqB,GAAG,OAK1B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gBACtB,qBAAqB,GAAG,SAAS,YACpC,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CAI5B,CAAC;AAEH,eAAO,MAAM,kBAAkB,oBACZ,MAAM,GAAG,SAAS,eACtB,qBAAqB,GAAG,SAAS,KAC7C,qBAAqB,GAAG,SAAS,GAAG,OAEtC,CAAC"}

package/dist/constraints.js

@@ -0,0 +1,47 @@
+export const AUDIO_TRACK_CONSTRAINTS = {
+    advanced: [{ autoGainControl: true }, { noiseSuppression: true }, { echoCancellation: true }],
+};
+export const VIDEO_TRACK_CONSTRAINTS = {
+    width: {
+        max: 1280,
+        ideal: 1280,
+        min: 640,
+    },
+    height: {
+        max: 720,
+        ideal: 720,
+        min: 320,
+    },
+    frameRate: {
+        max: 30,
+        ideal: 24,
+    },
+};
+export const SCREEN_SHARING_MEDIA_CONSTRAINTS = {
+    video: {
+        frameRate: { ideal: 20, max: 25 },
+        width: { max: 1920, ideal: 1920 },
+        height: { max: 1080, ideal: 1080 },
+    },
+};
+export const toMediaTrackConstraints = (constraint) => {
+    if (typeof constraint === "boolean") {
+        return constraint ? {} : undefined;
+    }
+    return constraint;
+};
+export const prepareMediaTrackConstraints = (deviceId, constraints) => {
+    if (!deviceId)
+        return false;
+    if (deviceId === true)
+        return { ...constraints };
+    const exactId = deviceId ? { deviceId: { exact: deviceId } } : {};
+    return { ...constraints, ...exactId };
+};
+export const getExactDeviceConstraint = (constraints, deviceId) => ({
+    ...constraints,
+    deviceId: { exact: deviceId },
+});
+export const prepareConstraints = (deviceIdToStart, constraints) => {
+    return deviceIdToStart ? getExactDeviceConstraint(constraints, deviceIdToStart) : constraints;
+};

package/dist/create.d.ts

@@ -0,0 +1,11 @@
+import type { CreateConfig } from "@fishjam-cloud/ts-client";
+import type { DeviceManagerConfig, CreateFishjamClient } from "./types";
+import type { ScreenShareManagerConfig } from "./ScreenShareManager";
+/**
+ * Create a client that can be used with a context.
+ * Returns context provider, and two hooks to interact with the context.
+ *
+ * @returns ContextProvider, useSelector, useConnect
+ */
+export declare const create: <PeerMetadata, TrackMetadata>(config?: CreateConfig<PeerMetadata, TrackMetadata>, deviceManagerDefaultConfig?: DeviceManagerConfig, screenShareManagerDefaultConfig?: ScreenShareManagerConfig) => CreateFishjamClient<PeerMetadata, TrackMetadata>;
+//# sourceMappingURL=create.d.ts.map

package/dist/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../src/create.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,KAAK,EACV,mBAAmB,EAGnB,mBAAmB,EAMpB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGrE;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GAAI,YAAY,EAAE,aAAa,WACvC,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,+BACrB,mBAAmB,oCACd,wBAAwB,KACzD,mBAAmB,CAAC,YAAY,EAAE,aAAa,CAkRjD,CAAC"}

package/dist/create.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useSyncExternalStore } from "react";
+import { Client } from "./Client";
+import { createUseSetupMediaHook } from "./useSetupMedia";
+/**
+ * Create a client that can be used with a context.
+ * Returns context provider, and two hooks to interact with the context.
+ *
+ * @returns ContextProvider, useSelector, useConnect
+ */
+export const create = (config, deviceManagerDefaultConfig, screenShareManagerDefaultConfig) => {
+    const FishjamContext = createContext(undefined);
+    const FishjamContextProvider = ({ children, }) => {
+        const memoClient = useMemo(() => {
+            return new Client({
+                clientConfig: config,
+                deviceManagerDefaultConfig,
+                screenShareManagerDefaultConfig,
+            });
+        }, []);
+        const clientRef = useRef(memoClient);
+        const mutationRef = useRef(false);
+        const subscribe = useCallback((cb) => {
+            const client = clientRef.current;
+            const callback = () => {
+                mutationRef.current = true;
+                cb();
+            };
+            client.on("socketOpen", callback);
+            client.on("socketError", callback);
+            client.on("socketClose", callback);
+            client.on("authSuccess", callback);
+            client.on("authError", callback);
+            client.on("disconnected", callback);
+            client.on("joined", callback);
+            client.on("joinError", callback);
+            client.on("peerJoined", callback);
+            client.on("peerUpdated", callback);
+            client.on("peerLeft", callback);
+            client.on("reconnected", callback);
+            client.on("reconnectionRetriesLimitReached", callback);
+            client.on("reconnectionStarted", callback);
+            client.on("componentAdded", callback);
+            client.on("componentUpdated", callback);
+            client.on("componentRemoved", callback);
+            client.on("trackReady", callback);
+            client.on("trackAdded", callback);
+            client.on("trackRemoved", callback);
+            client.on("trackUpdated", callback);
+            client.on("bandwidthEstimationChanged", callback);
+            client.on("encodingChanged", callback);
+            client.on("voiceActivityChanged", callback);
+            client.on("deviceDisabled", callback);
+            client.on("deviceEnabled", callback);
+            client.on("managerInitialized", callback);
+            client.on("managerStarted", callback);
+            client.on("deviceStopped", callback);
+            client.on("deviceReady", callback);
+            client.on("devicesStarted", callback);
+            client.on("devicesReady", callback);
+            client.on("error", callback);
+            client.on("targetTrackEncodingRequested", callback);
+            client.on("localTrackAdded", callback);
+            client.on("localTrackRemoved", callback);
+            client.on("localTrackReplaced", callback);
+            client.on("localTrackMuted", callback);
+            client.on("localTrackUnmuted", callback);
+            client.on("localTrackBandwidthSet", callback);
+            client.on("localTrackEncodingBandwidthSet", callback);
+            client.on("localTrackEncodingEnabled", callback);
+            client.on("localTrackEncodingDisabled", callback);
+            client.on("localPeerMetadataChanged", callback);
+            client.on("localTrackMetadataChanged", callback);
+            client.on("disconnectRequested", callback);
+            return () => {
+                client.removeListener("socketOpen", callback);
+                client.removeListener("socketError", callback);
+                client.removeListener("socketClose", callback);
+                client.removeListener("authSuccess", callback);
+                client.removeListener("authError", callback);
+                client.removeListener("disconnected", callback);
+                client.removeListener("joined", callback);
+                client.removeListener("joinError", callback);
+                client.removeListener("peerJoined", callback);
+                client.removeListener("peerUpdated", callback);
+                client.removeListener("peerLeft", callback);
+                client.removeListener("reconnected", callback);
+                client.removeListener("reconnectionRetriesLimitReached", callback);
+                client.removeListener("reconnectionStarted", callback);
+                client.removeListener("componentAdded", callback);
+                client.removeListener("componentUpdated", callback);
+                client.removeListener("componentRemoved", callback);
+                client.removeListener("trackReady", callback);
+                client.removeListener("trackAdded", callback);
+                client.removeListener("trackRemoved", callback);
+                client.removeListener("trackUpdated", callback);
+                client.removeListener("bandwidthEstimationChanged", callback);
+                client.removeListener("encodingChanged", callback);
+                client.removeListener("voiceActivityChanged", callback);
+                client.removeListener("deviceDisabled", callback);
+                client.removeListener("deviceEnabled", callback);
+                client.removeListener("managerInitialized", callback);
+                client.removeListener("managerStarted", callback);
+                client.removeListener("deviceStopped", callback);
+                client.removeListener("devicesStarted", callback);
+                client.removeListener("devicesReady", callback);
+                client.removeListener("error", callback);
+                client.removeListener("targetTrackEncodingRequested", callback);
+                client.removeListener("localTrackAdded", callback);
+                client.removeListener("localTrackRemoved", callback);
+                client.removeListener("localTrackReplaced", callback);
+                client.removeListener("localTrackMuted", callback);
+                client.removeListener("localTrackUnmuted", callback);
+                client.removeListener("localTrackBandwidthSet", callback);
+                client.removeListener("localTrackEncodingBandwidthSet", callback);
+                client.removeListener("localTrackEncodingEnabled", callback);
+                client.removeListener("localTrackEncodingDisabled", callback);
+                client.removeListener("localPeerMetadataChanged", callback);
+                client.removeListener("localTrackMetadataChanged", callback);
+                client.removeListener("disconnectRequested", callback);
+            };
+        }, []);
+        const lastSnapshotRef = useRef(null);
+        const getSnapshot = useCallback(() => {
+            if (mutationRef.current || lastSnapshotRef.current === null) {
+                const state = {
+                    remote: clientRef.current.peers,
+                    screenShareManager: clientRef.current.screenShareManager,
+                    media: clientRef.current.media,
+                    bandwidthEstimation: clientRef.current.bandwidthEstimation,
+                    tracks: clientRef.current.peersTracks,
+                    local: clientRef.current.local,
+                    status: clientRef.current.status,
+                    devices: clientRef.current.devices,
+                    videoTrackManager: clientRef.current.videoTrackManager,
+                    audioTrackManager: clientRef.current.audioTrackManager,
+                    client: clientRef.current,
+                    reconnectionStatus: clientRef.current.reconnectionStatus,
+                };
+                lastSnapshotRef.current = state;
+                mutationRef.current = false;
+            }
+            return lastSnapshotRef.current;
+        }, []);
+        const state = useSyncExternalStore(subscribe, getSnapshot);
+        return _jsx(FishjamContext.Provider, { value: { state }, children: children });
+    };
+    const useFishjamContext = () => {
+        const context = useContext(FishjamContext);
+        if (!context)
+            throw new Error("useFishjamContext must be used within a FishjamContextProvider");
+        return context;
+    };
+    const useSelector = (selector) => {
+        const { state } = useFishjamContext();
+        return useMemo(() => selector(state), [selector, state]);
+    };
+    const useConnect = () => {
+        const { state } = useFishjamContext();
+        return useMemo(() => {
+            return (config) => {
+                state.client.connect(config);
+                return () => {
+                    state.client.disconnect();
+                };
+            };
+        }, [state.client]);
+    };
+    const useDisconnect = () => {
+        const { state } = useFishjamContext();
+        return useCallback(() => {
+            state.client.disconnect();
+        }, [state.client]);
+    };
+    const useStatus = () => useSelector((s) => s.status);
+    const useTracks = () => useSelector((s) => s.tracks);
+    const useClient = () => useSelector((s) => s.client);
+    const useCamera = () => {
+        const { state } = useFishjamContext();
+        return { ...state.devices.camera, ...state.videoTrackManager };
+    };
+    const useMicrophone = () => {
+        const { state } = useFishjamContext();
+        return { ...state.devices.microphone, ...state.audioTrackManager };
+    };
+    const useScreenShare = () => {
+        const { state } = useFishjamContext();
+        return { ...state.devices.screenShare };
+    };
+    const useReconnection = () => {
+        const { state } = useFishjamContext();
+        return {
+            status: state.reconnectionStatus,
+            isReconnecting: state.reconnectionStatus === "reconnecting",
+            isError: state.reconnectionStatus === "error",
+            isIdle: state.reconnectionStatus === "idle",
+        };
+    };
+    const getPeerWithDistinguishedTracks = (peerState) => {
+        const localTracks = Object.values(peerState.tracks ?? {});
+        const videoTrack = localTracks.find(({ track }) => track?.kind === "video");
+        const audioTrack = localTracks.find(({ track }) => track?.kind === "audio");
+        return { ...peerState, videoTrack, audioTrack };
+    };
+    const useParticipants = () => {
+        const { state } = useFishjamContext();
+        const localParticipant = state.local
+            ? getPeerWithDistinguishedTracks(state.local)
+            : null;
+        const participants = Object.values(state.remote).map(getPeerWithDistinguishedTracks);
+        return { localParticipant, participants };
+    };
+    return {
+        FishjamContextProvider,
+        useSelector,
+        useConnect,
+        useDisconnect,
+        useStatus,
+        useTracks,
+        useSetupMedia: createUseSetupMediaHook(useFishjamContext),
+        useParticipants,
+        useCamera,
+        useMicrophone,
+        useScreenShare,
+        useClient,
+        useReconnection,
+    };
+};