@fishjam-cloud/react-client 0.7.1 → 0.7.2

package/dist/DeviceManager.d.ts

@@ -1,6 +1,7 @@
-import type { DeviceState, MediaManager, DeviceError, DeviceManagerStatus } from "./types/internal";
+import type { DeviceError, DeviceManagerStatus, DeviceState, Media, MediaManager } from "./types/internal";
 import type TypedEmitter from "typed-emitter";
-import type { PersistLastDeviceHandlers } from "./types/public";
+import type { PersistLastDeviceHandlers, TrackMiddleware } from "./types/public";
+export type DeviceType = "audio" | "video";
 export type DeviceManagerEvents = {
     managerStarted: (event: DeviceState & {
         constraints: MediaTrackConstraints | undefined;
@@ -19,10 +20,11 @@ export type DeviceManagerEvents = {
     deviceStopped: (state: DeviceState) => void;
     deviceEnabled: (state: DeviceState) => void;
     deviceDisabled: (state: DeviceState) => void;
+    middlewareSet: (state: DeviceState) => void;
     error: (event: any, state: DeviceState) => void;
 };
 export type DeviceManagerConfig = {
-    deviceType: "audio" | "video";
+    deviceType: DeviceType;
     defaultConstraints: MediaTrackConstraints;
     userConstraints?: boolean | MediaTrackConstraints;
     storage?: boolean | PersistLastDeviceHandlers;
@@ -30,26 +32,34 @@ export type DeviceManagerConfig = {
 declare const DeviceManager_base: new () => TypedEmitter<DeviceManagerEvents>;
 export declare class DeviceManager extends DeviceManager_base implements MediaManager {
     private readonly constraints;
-    private readonly storageConfig;
     private status;
     private readonly deviceType;
-    deviceState: DeviceState;
+    private readonly middlewareManager;
+    readonly getLastDevice: () => MediaDeviceInfo | null;
+    private readonly saveLastDevice;
+    private rawMedia;
+    private processedMediaTrack;
+    private media;
+    private mediaStatus;
+    private devices;
+    private devicesStatus;
+    private error;
     constructor({ deviceType, storage, userConstraints, defaultConstraints }: DeviceManagerConfig);
-    private createStorageConfig;
+    getState(): DeviceState;
     getStatus(): DeviceManagerStatus;
     getConstraints(): MediaTrackConstraints | boolean;
-    getMedia: () => import("./types/internal").Media | null;
-    getTracks: () => MediaStreamTrack[];
-    initialize: (stream: MediaStream | null, track: MediaStreamTrack | null, devices: MediaDeviceInfo[], requestedMedia: boolean, error?: DeviceError | null) => DeviceState;
-    private setupOnEndedCallback;
-    private onTrackEnded;
-    getLastDevice(): MediaDeviceInfo | null;
-    private saveLastDevice;
+    getDeviceType: () => DeviceType;
+    getMedia: () => Media | null;
+    initialize: (stream: MediaStream | null, track: MediaStreamTrack | null, devices: MediaDeviceInfo[], requestedMedia: boolean, error?: DeviceError | null) => void;
     start(deviceId?: string): Promise<void>;
-    stop(): Promise<void>;
+    setTrackMiddleware(middleware: TrackMiddleware | null): Promise<void>;
+    getMiddleware(): TrackMiddleware | null;
+    stop(): void;
     disable(): void;
     enable(): void;
-    getDeviceType: () => "audio" | "video";
+    private setEnable;
+    private updateMedia;
+    private setCurrentMedia;
 }
 export {};
 //# sourceMappingURL=DeviceManager.d.ts.map

package/dist/DeviceManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceManager.d.ts","sourceRoot":"","sources":["../src/DeviceManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAKpG,OAAO,KAAK,YAAY,MAAM,eAAe,CAAC;AAG9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CACd,KAAK,EAAE,WAAW,GAAG;QACnB,WAAW,EAAE,qBAAqB,GAAG,SAAS,CAAC;KAChD,EACD,KAAK,EAAE,WAAW,KACf,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,CACd,KAAK,EAAE;QAAE,UAAU,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAA;KAAE,EAC7E,KAAK,EAAE,WAAW,KACf,IAAI,CAAC;IACV,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,WAAW,CAAA;KAAE,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1E,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxF,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAE7C,KAAK,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,kBAAkB,EAAE,qBAAqB,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;CAC/C,CAAC;4CAGmC,YAAY,CAAC,mBAAmB,CAAC;AADtE,qBAAa,aACX,SAAQ,kBACR,YAAW,YAAY;IAEvB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAmC;IAEjE,OAAO,CAAC,MAAM,CAAwC;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAExC,WAAW,EAAE,WAAW,CAM7B;gBAEU,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,EAAE,mBAAmB;IAO7F,OAAO,CAAC,mBAAmB;IASpB,SAAS,IAAI,mBAAmB;IAIhC,cAAc,IAAI,qBAAqB,GAAG,OAAO;IAIjD,QAAQ,gDAAgC;IAExC,SAAS,2BAMd;IAEK,UAAU,WACP,WAAW,GAAG,IAAI,SACnB,gBAAgB,GAAG,IAAI,WACrB,eAAe,EAAE,kBACV,OAAO,UAChB,WAAW,GAAG,IAAI,iBAazB;IAEF,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,YAAY,CAIlB;IAEK,aAAa,IAAI,eAAe,GAAG,IAAI;IAI9C,OAAO,CAAC,cAAc;IAIT,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM;IAgFvB,IAAI;IAOV,OAAO;IAWP,MAAM;IAWN,aAAa,0BAElB;CACH"}
+{"version":3,"file":"DeviceManager.d.ts","sourceRoot":"","sources":["../src/DeviceManager.ts"],"names":[],"mappings":"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"}

package/dist/DeviceManager.js

@@ -1,31 +1,43 @@
 import { prepareMediaTrackConstraints } from "./constraints";
 import EventEmitter from "events";
-import { getDeviceInfo, getLocalStorageConfig, prepareDeviceState } from "./utils/media";
+import { MiddlewareManager } from "./devices/MiddlewareManager";
+import { createStorageConfig } from "./utils/localStorage";
+import { setupOnEndedCallback } from "./utils/track";
 import { parseUserMediaError } from "./utils/errors";
+const NOOP = () => { };
 export class DeviceManager extends EventEmitter {
     constraints;
-    storageConfig;
     status = "uninitialized";
     deviceType;
-    deviceState = {
-        media: null,
-        mediaStatus: "Not requested",
-        devices: null,
-        devicesStatus: "Not requested",
-        error: null,
-    };
+    middlewareManager = new MiddlewareManager();
+    getLastDevice = () => null;
+    saveLastDevice = NOOP;
+    rawMedia = null;
+    processedMediaTrack = null;
+    media = null;
+    mediaStatus = "Not requested";
+    devices = null;
+    devicesStatus = "Not requested";
+    error = null;
     constructor({ deviceType, storage, userConstraints, defaultConstraints }) {
         super();
-        this.storageConfig = this.createStorageConfig(deviceType, storage);
+        const storageConfig = createStorageConfig(deviceType, storage);
+        if (storageConfig) {
+            this.getLastDevice = storageConfig.getLastDevice;
+            this.saveLastDevice = storageConfig.saveLastDevice;
+        }
         this.deviceType = deviceType;
         this.constraints = userConstraints ?? defaultConstraints;
     }
-    createStorageConfig(deviceType, storage) {
-        if (storage === false)
-            return null;
-        if (storage === true || storage === undefined)
-            return getLocalStorageConfig(deviceType);
-        return storage;
+    getState() {
+        return {
+            mediaStatus: this.mediaStatus,
+            devices: this.devices,
+            devicesStatus: this.devicesStatus,
+            error: this.error,
+            media: this.media,
+            currentMiddleware: this.middlewareManager.getMiddleware(),
+        };
     }
     getStatus() {
         return this.status;
@@ -33,60 +45,49 @@ export class DeviceManager extends EventEmitter {
     getConstraints() {
         return this.constraints;
     }
-    getMedia = () => this.deviceState.media;
-    getTracks = () => {
-        const stream = this.deviceState.media?.stream;
-        if (this.deviceType === "audio") {
-            return stream?.getAudioTracks() ?? [];
-        }
-        return stream?.getVideoTracks() ?? [];
+    getDeviceType = () => {
+        return this.deviceType;
+    };
+    getMedia = () => {
+        return this.media;
     };
     initialize = (stream, track, devices, requestedMedia, error = null) => {
-        this.deviceState = prepareDeviceState(stream, track, devices, error, requestedMedia);
-        const deviceInfo = this.deviceState.media?.deviceInfo;
+        const deviceInfo = getDeviceInfo(track?.getSettings()?.deviceId || null, devices);
+        const [devicesStatus, newError] = prepareStatus(requestedMedia, track);
+        this.devices = devices;
+        this.devicesStatus = devicesStatus;
+        this.mediaStatus = devicesStatus;
+        this.error = newError ?? error;
+        this.updateMedia({
+            stream: track ? stream : null,
+            track,
+            deviceInfo,
+            enabled: Boolean(track?.enabled),
+        });
         if (deviceInfo)
-            this.saveLastDevice(deviceInfo);
+            this.saveLastDevice?.(deviceInfo);
         this.status = "initialized";
-        this.setupOnEndedCallback();
-        this.emit("managerInitialized", this.deviceState);
-        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();
+        if (track) {
+            setupOnEndedCallback(track, () => this?.rawMedia?.track?.id, async () => this.stop());
         }
+        this.emit("managerInitialized", this.getState());
     };
-    getLastDevice() {
-        return this.storageConfig?.getLastDevice?.() ?? null;
-    }
-    saveLastDevice(info) {
-        this.storageConfig?.saveLastDevice(info);
-    }
     async start(deviceId) {
-        const newDeviceId = deviceId ?? this.getLastDevice()?.deviceId;
-        const currentDeviceId = this.deviceState.media?.deviceInfo?.deviceId;
+        const newDeviceId = deviceId ?? this.getLastDevice?.()?.deviceId;
+        const currentDeviceId = this.rawMedia?.deviceInfo?.deviceId;
         const shouldReplaceDevice = Boolean(currentDeviceId && currentDeviceId !== newDeviceId);
         const isDeviceStopped = currentDeviceId === undefined;
         const shouldProceed = isDeviceStopped || shouldReplaceDevice;
         const exactConstraints = shouldProceed && prepareMediaTrackConstraints(newDeviceId, this.constraints);
         if (!exactConstraints)
             return;
-        this.deviceState.mediaStatus = "Requesting";
-        this.emit("devicesStarted", { ...this.deviceState, restarting: shouldReplaceDevice, constraints: exactConstraints }, this.deviceState);
+        this.mediaStatus = "Requesting";
+        this.emit("devicesStarted", { restarting: shouldReplaceDevice, constraints: exactConstraints }, this.getState());
         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 track = getTrack();
+            const track = getTrack(stream, this.deviceType);
             const currentDeviceId = track?.getSettings()?.deviceId;
-            const deviceInfo = currentDeviceId ? getDeviceInfo(currentDeviceId, this.deviceState.devices ?? []) : null;
+            const deviceInfo = currentDeviceId ? getDeviceInfo(currentDeviceId, this.devices ?? []) : null;
             if (deviceInfo) {
                 this.saveLastDevice?.(deviceInfo);
             }
@@ -103,17 +104,20 @@ export class DeviceManager extends EventEmitter {
             // 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 (shouldReplaceDevice) {
-                this.deviceState?.media?.track?.stop();
+                this.rawMedia?.track?.stop();
+                this.processedMediaTrack?.stop();
             }
-            this.deviceState.media = {
+            this.updateMedia({
                 stream,
                 track,
                 deviceInfo,
-                enabled: true,
-            };
-            this.setupOnEndedCallback();
-            this.deviceState.mediaStatus = "OK";
-            this.emit("devicesReady", { ...this.deviceState, restarted: shouldReplaceDevice }, this.deviceState);
+                enabled: Boolean(track?.enabled),
+            });
+            if (track) {
+                setupOnEndedCallback(track, () => this?.rawMedia?.track?.id, async () => this.stop());
+            }
+            this.mediaStatus = "OK";
+            this.emit("devicesReady", { ...this.getState(), restarted: shouldReplaceDevice }, this.getState());
         }
         catch (err) {
             const parsedError = parseUserMediaError(err);
@@ -122,33 +126,69 @@ export class DeviceManager extends EventEmitter {
                 constraints: exactConstraints,
             };
             if (exactConstraints) {
-                this.deviceState.error = parsedError;
+                this.error = parsedError;
             }
-            this.emit("error", event, this.deviceState);
+            this.emit("error", event, this.getState());
         }
     }
-    async stop() {
-        this.deviceState.media?.track?.stop();
-        this.deviceState.media = null;
-        this.emit("deviceStopped", this.deviceState);
+    async setTrackMiddleware(middleware) {
+        const rawTrack = this.rawMedia?.track ?? null;
+        const processedMedia = this.middlewareManager.applyMiddleware(rawTrack, middleware);
+        this.setCurrentMedia(this.rawMedia, processedMedia);
+        this.emit("middlewareSet", this.getState());
+    }
+    getMiddleware() {
+        return this.middlewareManager.getMiddleware();
+    }
+    stop() {
+        this.middlewareManager.clearMiddleware();
+        this.processedMediaTrack?.stop();
+        this.rawMedia?.track?.stop();
+        this.updateMedia(null);
+        this.emit("deviceStopped", this.getState());
     }
     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);
+        this.setEnable(this.rawMedia?.track ?? null, false);
+        this.setEnable(this.processedMediaTrack, false);
+        this.emit("deviceDisabled", this.getState());
     }
     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);
+        this.setEnable(this.rawMedia?.track ?? null, true);
+        this.setEnable(this.processedMediaTrack, true);
+        this.emit("deviceEnabled", this.getState());
     }
-    getDeviceType = () => {
-        return this.deviceType;
+    setEnable = (track, value) => {
+        if (!track)
+            return;
+        track.enabled = value;
     };
+    updateMedia(media) {
+        this.rawMedia = !media ? null : { ...media };
+        const processedMedia = this.middlewareManager.applyMiddleware(media?.track ?? null);
+        this.setCurrentMedia(this.rawMedia, processedMedia);
+    }
+    setCurrentMedia(media, processedTrack) {
+        this.processedMediaTrack = processedTrack;
+        const streamTrack = processedTrack ? { track: processedTrack, stream: new MediaStream([processedTrack]) } : media;
+        this.media = streamTrack
+            ? {
+                ...streamTrack,
+                enabled: Boolean(streamTrack.track?.enabled),
+                deviceInfo: this.rawMedia?.deviceInfo ?? null,
+            }
+            : null;
+    }
+}
+function getDeviceInfo(trackDeviceId, devices) {
+    return (trackDeviceId && devices.find(({ deviceId }) => trackDeviceId === deviceId)) || null;
+}
+function getTrack(stream, deviceType) {
+    return (deviceType === "audio" ? stream?.getAudioTracks()?.[0] : stream?.getVideoTracks()?.[0]) ?? null;
+}
+function prepareStatus(requested, track) {
+    if (!requested)
+        return ["Not requested", null];
+    if (track)
+        return ["OK", null];
+    return ["Error", null];
 }

package/dist/devices/MiddlewareManager.d.ts

@@ -0,0 +1,9 @@
+import type { TrackMiddleware } from "../types/public";
+export declare class MiddlewareManager {
+    private middleware;
+    private clearMiddlewareFn;
+    getMiddleware(): TrackMiddleware | null;
+    clearMiddleware(): void;
+    applyMiddleware(rawTrack: MediaStreamTrack | null, middleware?: TrackMiddleware | null): MediaStreamTrack | null;
+}
+//# sourceMappingURL=MiddlewareManager.d.ts.map

package/dist/devices/MiddlewareManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddlewareManager.d.ts","sourceRoot":"","sources":["../../src/devices/MiddlewareManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,iBAAiB,CAA6B;IAE/C,aAAa,IAAI,eAAe,GAAG,IAAI;IAIvC,eAAe;IAKf,eAAe,CACpB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,EACjC,UAAU,GAAE,eAAe,GAAG,IAAsB,GACnD,gBAAgB,GAAG,IAAI;CAmB3B"}

package/dist/devices/MiddlewareManager.js

@@ -0,0 +1,26 @@
+import { setupOnEndedCallback } from "../utils/track";
+export class MiddlewareManager {
+    middleware = null;
+    clearMiddlewareFn = null;
+    getMiddleware() {
+        return this.middleware;
+    }
+    clearMiddleware() {
+        this.clearMiddlewareFn?.();
+        this.clearMiddlewareFn = null;
+    }
+    applyMiddleware(rawTrack, middleware = this.middleware) {
+        this.middleware = middleware;
+        this.clearMiddleware();
+        if (!rawTrack || !middleware)
+            return null;
+        const { onClear, track } = middleware(rawTrack);
+        if (onClear)
+            this.clearMiddlewareFn = onClear;
+        setupOnEndedCallback(track, () => track.id, async () => {
+            this.clearMiddleware();
+            track.stop();
+        });
+        return track;
+    }
+}

package/dist/fishjamProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fishjamProvider.d.ts","sourceRoot":"","sources":["../src/fishjamProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAO/E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,UAAU,oBAAqB,SAAQ,iBAAiB;IACtD,SAAS,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC;IACtC,WAAW,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;CACzD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAAE,oBAAoB,2CAsD5G"}
+{"version":3,"file":"fishjamProvider.d.ts","sourceRoot":"","sources":["../src/fishjamProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAO/E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAGhE,UAAU,oBAAqB,SAAQ,iBAAiB;IACtD,SAAS,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC;IACtC,WAAW,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;CACzD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,EAAE,oBAAoB,2CAuD5G"}

package/dist/fishjamProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { useTrackManager } from "./hooks/useTrackManager";
 import { FishjamClient } from "@fishjam-cloud/ts-client";
 import { FishjamContext } from "./hooks/useFishjamContext";
@@ -7,6 +7,7 @@ import { DeviceManager } from "./DeviceManager";
 import { usePeerStatus } from "./hooks/usePeerStatus";
 import { useFishjamClientState } from "./hooks/useFishjamClientState";
 import { AUDIO_TRACK_CONSTRAINTS, VIDEO_TRACK_CONSTRAINTS } from "./constraints";
+import { useScreenShareManager } from "./hooks/useScreenShare";
 /**
  * @category Components
  */
@@ -26,7 +27,6 @@ export function FishjamProvider({ children, reconnect, constraints, persistLastD
         userConstraints: constraints?.audio,
         storage,
     }));
-    const screenShareState = useState({ stream: null, trackIds: null });
     const { peerStatus, getCurrentPeerStatus } = usePeerStatus(fishjamClientRef.current);
     const videoTrackManager = useTrackManager({
         mediaManager: videoDeviceManagerRef.current,
@@ -38,11 +38,12 @@ export function FishjamProvider({ children, reconnect, constraints, persistLastD
         tsClient: fishjamClientRef.current,
         getCurrentPeerStatus,
     });
+    const screenShareManager = useScreenShareManager({ fishjamClient: fishjamClientRef.current });
     const clientState = useFishjamClientState(fishjamClientRef.current);
     const context = {
         fishjamClientRef,
         peerStatus,
-        screenShareState,
+        screenShareManager,
         videoTrackManager,
         audioTrackManager,
         videoDeviceManagerRef,

package/dist/hooks/deviceManagers/useDeviceManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/deviceManagers/useDeviceManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,qBAAqB,CAAC;AAc9E,eAAO,MAAM,gBAAgB,kBAAmB,aAAa,uBAoC5D,CAAC"}
+{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/deviceManagers/useDeviceManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,qBAAqB,CAAC;AAe9E,eAAO,MAAM,gBAAgB,kBAAmB,aAAa,uBAmC5D,CAAC"}

package/dist/hooks/deviceManagers/useDeviceManager.js

@@ -9,6 +9,7 @@ const eventNames = [
     "devicesReady",
     "managerInitialized",
     "error",
+    "middlewareSet",
 ];
 export const useDeviceManager = (deviceManager) => {
     const mutationRef = useRef(false);
@@ -26,9 +27,8 @@ export const useDeviceManager = (deviceManager) => {
     const getSnapshot = useCallback(() => {
         if (mutationRef.current || lastSnapshotRef.current === null) {
             lastSnapshotRef.current = {
-                deviceState: deviceManager.deviceState,
+                deviceState: deviceManager.getState(),
                 status: deviceManager.getStatus(),
-                tracks: deviceManager.getTracks(),
             };
             mutationRef.current = false;
         }

package/dist/hooks/{useDevices.d.ts → devices.d.ts}

@@ -16,4 +16,4 @@ export declare function useMicrophone(): AudioDevice;
 export declare const useInitializeDevices: () => {
     initializeDevices: () => Promise<void>;
 };
-//# sourceMappingURL=useDevices.d.ts.map
+//# sourceMappingURL=devices.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"devices.d.ts","sourceRoot":"","sources":["../../src/hooks/devices.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAK3D;;;GAGG;AACH,wBAAgB,SAAS,IAAI,MAAM,CAyBlC;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,WAAW,CA2B3C;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;CAqDhC,CAAC"}

package/dist/hooks/{useDevices.js → devices.js}

@@ -1,20 +1,18 @@
 import { useFishjamContext } from "./useFishjamContext";
-import { useVideoDeviceManager } from "./deviceManagers/useVideoDeviceManager";
-import { useAudioDeviceManager } from "./deviceManagers/useAudioDeviceManager";
 import { useCallback } from "react";
+import { useDeviceManager } from "./deviceManagers/useDeviceManager";
 import { getAvailableMedia, getCorrectedResult } from "../mediaInitializer";
-import { useProcessedPreviewStream } from "./useProcessedPreviewStream";
 import { prepareConstraints } from "../constraints";
 /**
  *
  * @category Devices
  */
 export function useCamera() {
-    const { videoTrackManager } = useFishjamContext();
-    const { deviceState, status } = useVideoDeviceManager();
+    const { videoTrackManager, videoDeviceManagerRef } = useFishjamContext();
+    const { deviceState, status } = useDeviceManager(videoDeviceManagerRef.current);
     const { currentTrack, ...trackManager } = videoTrackManager;
-    const processedPreviewStream = useProcessedPreviewStream(videoTrackManager, deviceState.media?.track);
-    const stream = currentTrack?.stream ?? processedPreviewStream ?? deviceState.media?.stream ?? null;
+    const stream = deviceState.media?.stream ?? null;
+    const currentMiddleware = deviceState.currentMiddleware ?? null;
     const isStreaming = Boolean(currentTrack?.stream);
     const track = stream?.getAudioTracks()[0] ?? null;
     const trackId = currentTrack?.trackId ?? null;
@@ -22,12 +20,13 @@ export function useCamera() {
     const activeDevice = deviceState.media?.deviceInfo ?? null;
     return {
         ...trackManager,
+        currentMiddleware,
         status,
         stream,
+        track,
         devices,
         activeDevice,
         isStreaming,
-        track,
         trackId,
     };
 }
@@ -36,11 +35,11 @@ export function useCamera() {
  * @category Devices
  */
 export function useMicrophone() {
-    const { audioTrackManager } = useFishjamContext();
-    const { deviceState, status } = useAudioDeviceManager();
+    const { audioTrackManager, audioDeviceManagerRef } = useFishjamContext();
+    const { deviceState, status } = useDeviceManager(audioDeviceManagerRef.current);
     const { currentTrack, ...trackManager } = audioTrackManager;
-    const processedPreviewStream = useProcessedPreviewStream(audioTrackManager, deviceState.media?.track);
-    const stream = currentTrack?.stream ?? processedPreviewStream ?? deviceState.media?.stream ?? null;
+    const stream = deviceState.media?.stream ?? null;
+    const currentMiddleware = deviceState.currentMiddleware ?? null;
     const isStreaming = Boolean(currentTrack?.stream);
     const track = stream?.getAudioTracks()[0] ?? null;
     const trackId = currentTrack?.trackId ?? null;
@@ -49,10 +48,11 @@ export function useMicrophone() {
     const isAudioPlaying = currentTrack?.vadStatus === "speech";
     return {
         ...trackManager,
+        currentMiddleware,
         status,
         stream,
-        isStreaming,
         track,
+        isStreaming,
         trackId,
         devices,
         activeDevice,

package/dist/hooks/public.d.ts

@@ -1,6 +1,6 @@
 export { useConnect, useDisconnect } from "./useConnection";
 export { useReconnection } from "./useReconnection";
-export { useCamera, useMicrophone, useInitializeDevices } from "./useDevices";
+export { useCamera, useMicrophone, useInitializeDevices } from "./devices";
 export { usePeers } from "./usePeers";
 export { useScreenShare } from "./useScreenShare";
 export { useStatus } from "./useStatus";

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/hooks/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/hooks/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/public.js

@@ -1,6 +1,6 @@
 export { useConnect, useDisconnect } from "./useConnection";
 export { useReconnection } from "./useReconnection";
-export { useCamera, useMicrophone, useInitializeDevices } from "./useDevices";
+export { useCamera, useMicrophone, useInitializeDevices } from "./devices";
 export { usePeers } from "./usePeers";
 export { useScreenShare } from "./useScreenShare";
 export { useStatus } from "./useStatus";

package/dist/hooks/useFishjamContext.d.ts

@@ -1,15 +1,15 @@
 import type { FishjamClient } from "@fishjam-cloud/ts-client";
 import { type MutableRefObject } from "react";
-import type { PeerMetadata, TrackMetadata, ScreenShareState, TrackManager } from "../types/internal";
+import type { PeerMetadata, TrackMetadata, TrackManager } from "../types/internal";
 import type { DeviceManager } from "../DeviceManager";
 import type { FishjamClientState } from "./useFishjamClientState";
-import type { PeerStatus } from "../types/public";
+import type { PeerStatus, ScreenshareApi } from "../types/public";
 export type FishjamContextType = {
     fishjamClientRef: MutableRefObject<FishjamClient<PeerMetadata, TrackMetadata>>;
     videoDeviceManagerRef: MutableRefObject<DeviceManager>;
     audioDeviceManagerRef: MutableRefObject<DeviceManager>;
     hasDevicesBeenInitializedRef: MutableRefObject<boolean>;
-    screenShareState: [ScreenShareState, React.Dispatch<React.SetStateAction<ScreenShareState>>];
+    screenShareManager: ScreenshareApi;
     peerStatus: PeerStatus;
     videoTrackManager: TrackManager;
     audioTrackManager: TrackManager;

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

@@ -1 +1 @@
-{"version":3,"file":"useFishjamContext.d.ts","sourceRoot":"","sources":["../../src/hooks/useFishjamContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAiB,KAAK,gBAAgB,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACrG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,qBAAqB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACvD,4BAA4B,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxD,gBAAgB,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC7F,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC;IAChC,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}
+{"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,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,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,kBAAkB,EAAE,cAAc,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC;IAChC,WAAW,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}

package/dist/hooks/useScreenShare.d.ts

@@ -1,7 +1,15 @@
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
 import type { ScreenshareApi } from "../types/public";
+import type { PeerMetadata, TrackMetadata } from "../types/internal";
+interface ScreenShareManagerProps {
+    fishjamClient: FishjamClient<PeerMetadata, TrackMetadata>;
+}
 /**
  *
  * @category Screenshare
  */
+export declare const useScreenShareManager: ({ fishjamClient }: ScreenShareManagerProps) => ScreenshareApi;
 export declare const useScreenShare: () => ScreenshareApi;
+export declare const getTracksFromStream: (stream: MediaStream) => [MediaStreamTrack, MediaStreamTrack | null];
+export {};
 //# sourceMappingURL=useScreenShare.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScreenShare.d.ts","sourceRoot":"","sources":["../../src/hooks/useScreenShare.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQxE;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,cA0IjC,CAAC"}
+{"version":3,"file":"useScreenShare.d.ts","sourceRoot":"","sources":["../../src/hooks/useScreenShare.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAoB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvF,UAAU,uBAAuB;IAC/B,aAAa,EAAE,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;CAC3D;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,sBAAuB,uBAAuB,KAAG,cAmIlF,CAAC;AAEF,eAAO,MAAM,cAAc,sBAI1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,WAAY,WAAW,KAAG,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAKnG,CAAC"}