@fishjam-cloud/react-client 0.10.2 → 0.12.0

package/dist/hooks/devices/useMicrophone.js

@@ -1,10 +1,49 @@
-import { useFishjamContext } from "../internal/useFishjamContext";
 import { useDeviceApi } from "../internal/device/useDeviceApi";
+import { useFishjamContext } from "../internal/useFishjamContext";
 /**
- *
+ * Manage microphone
  * @category Devices
  */
 export function useMicrophone() {
     const { audioTrackManager, audioDeviceManagerRef } = useFishjamContext();
-    return useDeviceApi({ trackManager: audioTrackManager, deviceManager: audioDeviceManagerRef.current });
+    const deviceApi = useDeviceApi({ deviceManager: audioDeviceManagerRef.current });
+    return {
+        /** Toggles current microphone on/off */
+        toggleMicrophone: audioTrackManager.toggleDevice,
+        /** Mutes/unmutes the microphone */
+        toggleMicrophoneMute: audioTrackManager.toggleMute,
+        /** Selects the microphone device */
+        selectMicrophone: audioTrackManager.selectDevice,
+        /**
+         * Indicates which microphone is now turned on and streaming audio
+         */
+        activeMicrophone: deviceApi.activeDevice,
+        /**
+         * Indicates whether the microphone is streaming audio
+         */
+        isMicrophoneOn: !!deviceApi.mediaStream,
+        /**
+         * Indicates whether the microphone is muted
+         */ isMicrophoneMuted: audioTrackManager.paused,
+        /**
+         * The MediaStream object containing the current audio stream
+         */
+        microphoneStream: deviceApi.mediaStream,
+        /**
+         * The currently set microphone middleware function
+         */
+        currentMicrophoneMiddleware: deviceApi.currentMiddleware,
+        /**
+         * Sets the microphone middleware
+         */
+        setMicrophoneTrackMiddleware: audioTrackManager.setTrackMiddleware,
+        /**
+         * List of available microphone devices
+         */
+        microphoneDevices: deviceApi.devices,
+        /**
+         * Possible error thrown while setting up the microphone
+         */
+        microphoneDeviceError: deviceApi.deviceError,
+    };
 }

package/dist/hooks/internal/device/useDeviceApi.d.ts

@@ -1,10 +1,8 @@
-import type { TrackManager } from "../../../types/internal";
-import type { Device } from "../../../types/public";
 import type { DeviceManager } from "../../../devices/DeviceManager";
+import type { Device } from "../../../types/public";
 type DeviceApiDependencies = {
-    trackManager: TrackManager;
     deviceManager: DeviceManager;
 };
-export declare const useDeviceApi: ({ trackManager, deviceManager }: DeviceApiDependencies) => Device;
+export declare const useDeviceApi: ({ deviceManager }: DeviceApiDependencies) => Device;
 export {};
 //# sourceMappingURL=useDeviceApi.d.ts.map

package/dist/hooks/internal/device/useDeviceApi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceApi.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/device/useDeviceApi.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAGpE,KAAK,qBAAqB,GAAG;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAqC,qBAAqB,KAAG,MAkCrF,CAAC"}
+{"version":3,"file":"useDeviceApi.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/device/useDeviceApi.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,uBAAuB,CAAC;AAGhE,KAAK,qBAAqB,GAAG;IAC3B,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,sBAAuB,qBAAqB,KAAG,MA+BvE,CAAC"}

package/dist/hooks/internal/device/useDeviceApi.js

@@ -1,34 +1,28 @@
 import { useMemo } from "react";
 import { useDeviceManager } from "./useDeviceManager";
-export const useDeviceApi = ({ trackManager, deviceManager }) => {
-    const { deviceState, status, type } = useDeviceManager(deviceManager);
-    const { currentTrack } = trackManager;
-    const stream = useMemo(() => deviceState.media?.stream ?? null, [deviceState.media?.stream]);
+export const useDeviceApi = ({ deviceManager }) => {
+    const { deviceState, deviceType, deviceStatus } = useDeviceManager(deviceManager);
+    const mediaStream = useMemo(() => deviceState.media?.stream ?? null, [deviceState.media?.stream]);
     const currentMiddleware = deviceState.currentMiddleware ?? null;
-    const isStreaming = Boolean(currentTrack?.stream && !trackManager.paused);
-    const track = useMemo(() => {
-        if (type === "video")
-            return stream?.getVideoTracks()[0] ?? null;
-        return stream?.getAudioTracks()[0] ?? null;
-    }, [stream, type]);
-    const trackId = currentTrack?.trackId ?? null;
-    const devices = useMemo(() => deviceState.devices ?? [], [deviceState.devices]);
-    const activeDevice = deviceState.media?.deviceInfo ?? null;
+    const mediaStreamTrack = useMemo(() => {
+        if (deviceType === "video")
+            return mediaStream?.getVideoTracks()[0] ?? null;
+        return mediaStream?.getAudioTracks()[0] ?? null;
+    }, [mediaStream, deviceType]);
+    const devices = useMemo(() => deviceState.devices?.map(({ deviceId, label }) => ({ deviceId, label })) ?? [], [deviceState.devices]);
+    const activeDevice = deviceState.media?.deviceInfo
+        ? { deviceId: deviceState.media.deviceInfo.deviceId, label: deviceState.media.deviceInfo.label }
+        : null;
     const isMuted = !deviceState.media?.enabled;
     const deviceError = deviceState.error ?? null;
-    const isDeviceEnabled = Boolean(deviceState.media);
     return {
-        ...trackManager,
+        mediaStream,
         currentMiddleware,
-        status,
-        stream,
+        deviceStatus,
         devices,
+        deviceError,
         activeDevice,
-        isStreaming,
-        track,
-        trackId,
         isMuted,
-        deviceError,
-        isDeviceEnabled,
+        mediaStreamTrack,
     };
 };

package/dist/hooks/internal/device/useDeviceManager.d.ts

@@ -1,4 +1,4 @@
-import type { DeviceManagerState } from "../../../types/internal";
 import type { DeviceManager } from "../../../devices/DeviceManager";
+import type { DeviceManagerState } from "../../../types/internal";
 export declare const useDeviceManager: (deviceManager: DeviceManager) => DeviceManagerState;
 //# sourceMappingURL=useDeviceManager.d.ts.map

package/dist/hooks/internal/device/useDeviceManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/device/useDeviceManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,gCAAgC,CAAC;AAezF,eAAO,MAAM,gBAAgB,kBAAmB,aAAa,uBAoC5D,CAAC"}
+{"version":3,"file":"useDeviceManager.d.ts","sourceRoot":"","sources":["../../../../src/hooks/internal/device/useDeviceManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,gCAAgC,CAAC;AACzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAelE,eAAO,MAAM,gBAAgB,kBAAmB,aAAa,uBAoC5D,CAAC"}

package/dist/hooks/internal/device/useDeviceManager.js

@@ -28,8 +28,8 @@ export const useDeviceManager = (deviceManager) => {
         if (mutationRef.current || lastSnapshotRef.current === null) {
             lastSnapshotRef.current = {
                 deviceState: deviceManager.getState(),
-                status: deviceManager.getStatus(),
-                type: deviceManager.getDeviceType(),
+                deviceStatus: deviceManager.getStatus(),
+                deviceType: deviceManager.getDeviceType(),
             };
             mutationRef.current = false;
         }

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

@@ -1,9 +1,10 @@
-import type { Component, Peer, FishjamClient, GenericMetadata } from "@fishjam-cloud/ts-client";
-import type { PeerId } from "../../types/internal";
+import type { Component, FishjamClient, GenericMetadata } from "@fishjam-cloud/ts-client";
+import type { BrandedPeer } from "../../types/internal";
+import type { PeerId } from "../../types/public";
 export interface FishjamClientState<P = GenericMetadata, S = GenericMetadata> {
-    peers: Record<PeerId, Peer<P, S>>;
+    peers: Record<PeerId, BrandedPeer<P, S>>;
     components: Record<string, Component>;
-    localPeer: Peer<P, S> | null;
+    localPeer: BrandedPeer<P, S> | null;
     isReconnecting: boolean;
 }
 export declare function useFishjamClientState<P, S>(fishjamClient: FishjamClient<P, S>): FishjamClientState<P, S>;

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

@@ -1 +1 @@
-{"version":3,"file":"useFishjamClientState.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useFishjamClientState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAiB,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/G,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA0CnD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,eAAe,EAAE,CAAC,GAAG,eAAe;IAC1E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACtC,SAAS,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;CACzB;AAMD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAwCxG"}
+{"version":3,"file":"useFishjamClientState.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useFishjamClientState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAiB,MAAM,0BAA0B,CAAC;AAGzG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AA0CjD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,eAAe,EAAE,CAAC,GAAG,eAAe;IAC1E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACzC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACtC,SAAS,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,OAAO,CAAC;CACzB;AAMD,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAwCxG"}

package/dist/hooks/internal/useFishjamClientState.js

@@ -63,9 +63,9 @@ export function useFishjamClientState(fishjamClient) {
             const localPeer = client.getLocalPeer();
             const isReconnecting = client.isReconnecting();
             lastSnapshotRef.current = {
-                peers,
+                peers: peers,
                 components,
-                localPeer,
+                localPeer: localPeer,
                 isReconnecting,
             };
             mutationRef.current = false;

package/dist/hooks/internal/useFishjamClient_DO_NOT_USE.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFishjamClient_DO_NOT_USE.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useFishjamClient_DO_NOT_USE.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,2BAA2B,6JAI1C"}
+{"version":3,"file":"useFishjamClient_DO_NOT_USE.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useFishjamClient_DO_NOT_USE.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,2BAA2B,6JAI1C"}

package/dist/hooks/internal/useFishjamClient_DO_NOT_USE.js

@@ -1,5 +1,5 @@
-import { useFishjamContext } from "./useFishjamContext";
 import { useMemo } from "react";
+import { useFishjamContext } from "./useFishjamContext";
 /**
  *
  * @category Connection

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

@@ -1,15 +1,16 @@
 import type { FishjamClient } from "@fishjam-cloud/ts-client";
 import { type MutableRefObject } from "react";
-import type { TrackManager } from "../../types/internal";
 import type { DeviceManager } from "../../devices/DeviceManager";
+import type { TrackManager } from "../../types/internal";
+import type { BandwidthLimits, PeerStatus } from "../../types/public";
 import type { FishjamClientState } from "./useFishjamClientState";
-import type { BandwidthLimits, PeerStatus, ScreenshareApi } from "../../types/public";
+import type { UseScreenshareResult } from "./useScreenshareManager";
 export type FishjamContextType = {
     fishjamClientRef: MutableRefObject<FishjamClient>;
     videoDeviceManagerRef: MutableRefObject<DeviceManager>;
     audioDeviceManagerRef: MutableRefObject<DeviceManager>;
     hasDevicesBeenInitializedRef: MutableRefObject<boolean>;
-    screenShareManager: ScreenshareApi;
+    screenShareManager: UseScreenshareResult;
     peerStatus: PeerStatus;
     videoTrackManager: TrackManager;
     audioTrackManager: TrackManager;

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

@@ -1 +1 @@
-{"version":3,"file":"useFishjamContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/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,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAClD,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;IAChC,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}
+{"version":3,"file":"useFishjamContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useFishjamContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAiB,KAAK,gBAAgB,EAAc,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAClD,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,oBAAoB,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,wBAAgB,iBAAiB,IAGb,kBAAkB,CACrC"}

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

@@ -1 +1 @@
-{"version":3,"file":"usePeerStatus.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/usePeerStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,aAAa,WAAY,aAAa;;;CA8ClD,CAAC"}
+{"version":3,"file":"usePeerStatus.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/usePeerStatus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,aAAa,WAAY,aAAa;;;CAgDlD,CAAC"}

package/dist/hooks/internal/usePeerStatus.js

@@ -21,6 +21,7 @@ export const usePeerStatus = (client) => {
             setPeerStatus("idle");
         };
         client.on("connectionStarted", setConnecting);
+        client.on("reconnected", setJoined);
         client.on("joined", setJoined);
         client.on("authError", setError);
         client.on("joinError", setError);
@@ -28,6 +29,7 @@ export const usePeerStatus = (client) => {
         client.on("disconnected", setDisconnected);
         return () => {
             client.off("connectionStarted", setConnecting);
+            client.off("reconnected", setJoined);
             client.off("joined", setJoined);
             client.off("authError", setError);
             client.off("joinError", setError);

package/dist/hooks/internal/useReconnection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReconnection.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useReconnection.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,kBA6BlC,CAAC"}
+{"version":3,"file":"useReconnection.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useReconnection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAKnE;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,kBA6BlC,CAAC"}

package/dist/hooks/internal/useScreenshareManager.d.ts

@@ -0,0 +1,46 @@
+import type { FishjamClient } from "@fishjam-cloud/ts-client";
+import type { PeerStatus, TracksMiddleware } from "../../types/public";
+export type UseScreenshareResult = {
+    /**
+     * Invokes the screen sharing prompt in the user's browser and starts streaming upon approval.
+     */
+    startStreaming: (props?: {
+        audioConstraints?: boolean | MediaTrackConstraints;
+        videoConstraints?: boolean | MediaTrackConstraints;
+    }) => Promise<void>;
+    /**
+     * Stops the stream and cancels browser screen sharing.
+     */
+    stopStreaming: () => Promise<void>;
+    /**
+     * The MediaStream object containing both tracks.
+     */
+    stream: MediaStream | null;
+    /**
+     * The separate video MediaStreamTrack.
+     */
+    videoTrack: MediaStreamTrack | null;
+    /**
+     * The separate audio MediaStreamTrack.
+     */
+    audioTrack: MediaStreamTrack | null;
+    /**
+     * The middleware currently assigned to process the tracks.
+     * A screenshare may include both audio and video tracks, and this middleware is capable of processing
+     * each track type.
+     */
+    currentTracksMiddleware: TracksMiddleware | null;
+    /**
+     * Sets the middleware responsible for processing the tracks.
+     * @param middleware The middleware to set, which can be a TracksMiddleware instance or null to remove the middleware.
+     * @returns A Promise that resolves once the middleware is successfully set.
+     */
+    setTracksMiddleware: (middleware: TracksMiddleware | null) => Promise<void>;
+};
+interface ScreenShareManagerProps {
+    fishjamClient: FishjamClient;
+    getCurrentPeerStatus: () => PeerStatus;
+}
+export declare const useScreenShareManager: ({ fishjamClient, getCurrentPeerStatus, }: ScreenShareManagerProps) => UseScreenshareResult;
+export {};
+//# sourceMappingURL=useScreenshareManager.d.ts.map

package/dist/hooks/internal/useScreenshareManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenshareManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useScreenshareManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAI9D,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,cAAc,EAAE,CAAC,KAAK,CAAC,EAAE;QACvB,gBAAgB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;QACnD,gBAAgB,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAC;KACpD,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,uBAAuB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjD;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7E,CAAC;AAEF,UAAU,uBAAuB;IAC/B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,EAAE,MAAM,UAAU,CAAC;CACxC;AAED,eAAO,MAAM,qBAAqB,6CAG/B,uBAAuB,KAAG,oBAmI5B,CAAC"}

package/dist/hooks/internal/useScreenshareManager.js

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const useScreenShareManager = ({ fishjamClient, getCurrentPeerStatus, }) => {
+    const [state, setState] = useState({ stream: null, trackIds: null });
+    const cleanMiddlewareFnRef = useRef(null);
+    const stream = state.stream ?? null;
+    const [mediaVideoTrack, mediaAudioTrack] = stream ? getTracksFromStream(stream) : [null, null];
+    const getDisplayName = () => {
+        const name = fishjamClient.getLocalPeer()?.metadata?.peer?.displayName;
+        if (typeof name === "string")
+            return name;
+    };
+    const startStreaming = async (props) => {
+        const displayStream = await navigator.mediaDevices.getDisplayMedia({
+            video: props?.videoConstraints ?? true,
+            audio: props?.audioConstraints ?? true,
+        });
+        const displayName = getDisplayName();
+        let [video, audio] = getTracksFromStream(displayStream);
+        if (state.tracksMiddleware) {
+            const { videoTrack, audioTrack, onClear } = state.tracksMiddleware(video, audio);
+            video = videoTrack;
+            audio = audioTrack;
+            cleanMiddlewareFnRef.current = onClear;
+        }
+        const addTrackPromises = [fishjamClient.addTrack(video, { displayName, type: "screenShareVideo", paused: false })];
+        if (audio)
+            addTrackPromises.push(fishjamClient.addTrack(audio, { displayName, type: "screenShareAudio", paused: false }));
+        const [videoId, audioId] = await Promise.all(addTrackPromises);
+        setState({ stream: displayStream, trackIds: { videoId, audioId } });
+    };
+    const replaceTracks = async (newVideoTrack, newAudioTrack) => {
+        if (!state?.stream)
+            return;
+        const addTrackPromises = [fishjamClient.replaceTrack(state.trackIds.videoId, newVideoTrack)];
+        if (newAudioTrack && state.trackIds.audioId) {
+            addTrackPromises.push(fishjamClient.replaceTrack(state.trackIds.audioId, newAudioTrack));
+        }
+        await Promise.all(addTrackPromises);
+    };
+    const cleanMiddleware = useCallback(() => {
+        cleanMiddlewareFnRef.current?.();
+        cleanMiddlewareFnRef.current = null;
+    }, []);
+    const setTracksMiddleware = async (middleware) => {
+        if (!state?.stream)
+            return;
+        const [video, audio] = getTracksFromStream(state.stream);
+        cleanMiddleware();
+        const { videoTrack, audioTrack, onClear } = middleware?.(video, audio) ?? {
+            videoTrack: video,
+            audioTrack: audio,
+            onClear: null,
+        };
+        cleanMiddlewareFnRef.current = onClear;
+        await replaceTracks(videoTrack, audioTrack);
+    };
+    const stopStreaming = useCallback(async () => {
+        if (!state.stream) {
+            console.warn("No stream to stop");
+            return;
+        }
+        const [video, audio] = getTracksFromStream(state.stream);
+        video.stop();
+        if (audio)
+            audio.stop();
+        if (getCurrentPeerStatus() === "connected") {
+            const removeTrackPromises = [fishjamClient.removeTrack(state.trackIds.videoId)];
+            if (state.trackIds.audioId)
+                removeTrackPromises.push(fishjamClient.removeTrack(state.trackIds.audioId));
+            await Promise.all(removeTrackPromises);
+        }
+        cleanMiddleware();
+        setState(({ tracksMiddleware }) => ({ stream: null, trackIds: null, tracksMiddleware }));
+    }, [state, fishjamClient, setState, cleanMiddleware, getCurrentPeerStatus]);
+    useEffect(() => {
+        if (!state.stream)
+            return;
+        const [video, audio] = getTracksFromStream(state.stream);
+        const trackEndedHandler = () => {
+            stopStreaming();
+        };
+        video.addEventListener("ended", trackEndedHandler);
+        audio?.addEventListener("ended", trackEndedHandler);
+        return () => {
+            video.removeEventListener("ended", trackEndedHandler);
+            audio?.removeEventListener("ended", trackEndedHandler);
+        };
+    }, [state, stopStreaming]);
+    useEffect(() => {
+        const onDisconnected = () => {
+            if (stream) {
+                stopStreaming();
+            }
+        };
+        fishjamClient.on("disconnected", onDisconnected);
+        return () => {
+            fishjamClient.removeListener("disconnected", onDisconnected);
+        };
+    }, [stopStreaming, fishjamClient, stream]);
+    return {
+        startStreaming,
+        stopStreaming,
+        stream,
+        videoTrack: mediaVideoTrack,
+        audioTrack: mediaAudioTrack,
+        setTracksMiddleware,
+        currentTracksMiddleware: state?.tracksMiddleware ?? null,
+    };
+};
+const getTracksFromStream = (stream) => {
+    const video = stream.getVideoTracks()[0];
+    const audio = stream.getAudioTracks()[0] ?? null;
+    return [video, audio];
+};

package/dist/hooks/internal/useTrackManager.d.ts

@@ -1,13 +1,13 @@
 import { type FishjamClient } from "@fishjam-cloud/ts-client";
 import type { MediaManager, TrackManager } from "../../types/internal";
-import type { BandwidthLimits, PeerStatus, StartStreamingProps } from "../../types/public";
+import type { BandwidthLimits, PeerStatus, StreamConfig } from "../../types/public";
 interface TrackManagerConfig {
     mediaManager: MediaManager;
     tsClient: FishjamClient;
     getCurrentPeerStatus: () => PeerStatus;
     bandwidthLimits: BandwidthLimits;
-    autoStreamProps?: StartStreamingProps | false;
+    streamConfig?: StreamConfig;
 }
-export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, autoStreamProps, }: TrackManagerConfig) => TrackManager;
+export declare const useTrackManager: ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, streamConfig, }: TrackManagerConfig) => TrackManager;
 export {};
 //# sourceMappingURL=useTrackManager.d.ts.map

package/dist/hooks/internal/useTrackManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTrackManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useTrackManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,aAAa,EAAsB,MAAM,0BAA0B,CAAC;AAC3F,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAmB,MAAM,oBAAoB,CAAC;AAE5G,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC;IACxB,oBAAoB,EAAE,MAAM,UAAU,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC;CAC/C;AAWD,eAAO,MAAM,eAAe,wFAMzB,kBAAkB,KAAG,YAgMvB,CAAC"}
+{"version":3,"file":"useTrackManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/internal/useTrackManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,0BAA0B,CAAC;AAG3F,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,EAAmB,MAAM,oBAAoB,CAAC;AAGrG,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,aAAa,CAAC;IACxB,oBAAoB,EAAE,MAAM,UAAU,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAWD,eAAO,MAAM,eAAe,qFAMzB,kBAAkB,KAAG,YAsKvB,CAAC"}

package/dist/hooks/internal/useTrackManager.js

@@ -1,12 +1,12 @@
 import { Variant } from "@fishjam-cloud/ts-client";
-import { getConfigAndBandwidthFromProps, getRemoteOrLocalTrack } from "../../utils/track";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { getConfigAndBandwidthFromProps, getRemoteOrLocalTrack } from "../../utils/track";
 const TRACK_TYPE_TO_DEVICE = {
     video: "camera",
     audio: "microphone",
 };
 const getDeviceType = (mediaManager) => TRACK_TYPE_TO_DEVICE[mediaManager.getDeviceType()];
-export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, autoStreamProps, }) => {
+export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus, bandwidthLimits, streamConfig, }) => {
     const [currentTrackId, setCurrentTrackId] = useState(null);
     const [paused, setPaused] = useState(false);
     const currentTrack = useMemo(() => getRemoteOrLocalTrack(tsClient, currentTrackId), [tsClient, currentTrackId]);
@@ -14,14 +14,13 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus,
         mediaManager.setTrackMiddleware(middleware);
         await refreshStreamedTrack();
     }
-    async function initialize(deviceId) {
+    async function selectDevice(deviceId) {
         await mediaManager?.start(deviceId);
         if (!currentTrackId)
             return;
         const newTrack = mediaManager.getMedia()?.track ?? null;
         await tsClient.replaceTrack(currentTrackId, newTrack);
     }
-    const stop = useCallback(() => mediaManager.stop(), [mediaManager]);
     const startStreaming = useCallback(async (props = { simulcast: [Variant.VARIANT_LOW, Variant.VARIANT_MEDIUM, Variant.VARIANT_HIGH] }) => {
         if (currentTrackId)
             throw Error("Track already added");
@@ -53,13 +52,6 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus,
             throw Error("New track is empty");
         return tsClient.replaceTrack(currentTrack.trackId, newTrack);
     }, [currentTrack, mediaManager, tsClient]);
-    const stopStreaming = useCallback(async () => {
-        if (!currentTrack)
-            return;
-        setCurrentTrackId(null);
-        setPaused(true);
-        return tsClient.removeTrack(currentTrack.trackId);
-    }, [currentTrack, tsClient]);
     const pauseStreaming = useCallback(async () => {
         if (!currentTrack)
             return;
@@ -81,12 +73,6 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus,
         const trackMetadata = { type: deviceType, paused: false };
         return tsClient.updateTrackMetadata(currentTrack.trackId, trackMetadata);
     }, [currentTrack, mediaManager, tsClient]);
-    const disableTrack = useCallback(() => {
-        mediaManager.disable();
-    }, [mediaManager]);
-    const enableTrack = useCallback(() => {
-        mediaManager.enable();
-    }, [mediaManager]);
     const stream = useCallback(async () => {
         if (getCurrentPeerStatus() !== "connected")
             return;
@@ -128,36 +114,27 @@ export const useTrackManager = ({ mediaManager, tsClient, getCurrentPeerStatus,
      */
     const toggleDevice = useCallback(() => toggle("hard"), [toggle]);
     useEffect(() => {
-        if (autoStreamProps === false)
-            return;
-        const joinedHandler = () => {
+        const onJoinedRoom = () => {
             if (mediaManager.getMedia()?.track) {
-                startStreaming(autoStreamProps);
+                startStreaming(streamConfig);
             }
         };
-        const disconnectedHandler = () => {
+        const onLeftRoom = () => {
+            setPaused(true);
             setCurrentTrackId(null);
         };
-        tsClient.on("joined", joinedHandler);
-        tsClient.on("disconnected", disconnectedHandler);
+        tsClient.on("joined", onJoinedRoom);
+        tsClient.on("disconnected", onLeftRoom);
         return () => {
-            tsClient.off("joined", joinedHandler);
-            tsClient.off("disconnected", disconnectedHandler);
+            tsClient.off("joined", onJoinedRoom);
+            tsClient.off("disconnected", onLeftRoom);
         };
-    }, [mediaManager, startStreaming, tsClient, autoStreamProps]);
+    }, [mediaManager, startStreaming, tsClient, streamConfig, currentTrackId]);
     return {
         currentTrack,
         setTrackMiddleware,
-        initialize,
-        stop,
-        startStreaming,
-        stopStreaming,
-        pauseStreaming,
-        resumeStreaming,
-        disableTrack,
-        enableTrack,
-        refreshStreamedTrack,
         paused,
+        selectDevice,
         toggleMute,
         toggleDevice,
     };

package/dist/hooks/useConnection.d.ts

@@ -1,26 +1,39 @@
-import type { GenericMetadata } from "@fishjam-cloud/ts-client";
+import type { GenericMetadata, ReconnectionStatus } from "@fishjam-cloud/ts-client";
+import type { PeerStatus } from "../types/public";
 export interface JoinRoomConfig<PeerMetadata extends GenericMetadata = GenericMetadata> {
     /**
-     * fishjam URL
+     * Fishjam URL
      */
     url: string;
     /**
-     * token received from server (or Room Manager)
+     * Token received from server (or Room Manager)
      */
     peerToken: string;
     /**
-     * string indexed record with metadata, that will be available to all other peers
+     * String indexed record with metadata, that will be available to all other peers
      */
     peerMetadata?: PeerMetadata;
 }
 /**
+ * Hook allows to join or leave a room and check the current connection status.
  * @category Connection
- * @returns
+ * @group Hooks
  */
 export declare function useConnection(): {
+    /**
+     * Join room and start streaming camera and microphone
+     */
     joinRoom: <PeerMetadata extends GenericMetadata = GenericMetadata>({ url, peerToken, peerMetadata, }: JoinRoomConfig<PeerMetadata>) => Promise<void>;
+    /**
+     * Leave room and stop streaming
+     */
     leaveRoom: () => void;
-    peerStatus: import("..").PeerStatus;
-    reconnectionStatus: import("@fishjam-cloud/ts-client").ReconnectionStatus;
+    /**
+     * Current peer connection status
+     */
+    peerStatus: PeerStatus;
+    /**
+     * Current reconnection status
+     */ reconnectionStatus: ReconnectionStatus;
 };
 //# sourceMappingURL=useConnection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIhE,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,eAAe,GAAG,eAAe;IACpF;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,aAAa;eAOxB,YAAY,SAAS,eAAe,uDAIlC,cAAc,CAAC,YAAY,CAAC;;;;EASlC"}
+{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,cAAc,CAAC,YAAY,SAAS,eAAe,GAAG,eAAe;IACpF;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,aAAa;IAsBzB;;OAEG;eAjBF,YAAY,SAAS,eAAe,uDAIlC,cAAc,CAAC,YAAY,CAAC;IAe/B;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;EAEN"}

package/dist/hooks/useConnection.js

@@ -2,8 +2,9 @@ import { useCallback } from "react";
 import { useFishjamContext } from "./internal/useFishjamContext";
 import { useReconnection } from "./internal/useReconnection";
 /**
+ * Hook allows to join or leave a room and check the current connection status.
  * @category Connection
- * @returns
+ * @group Hooks
  */
 export function useConnection() {
     const context = useFishjamContext();
@@ -13,5 +14,22 @@ export function useConnection() {
     const leaveRoom = useCallback(() => {
         client.disconnect();
     }, [client]);
-    return { joinRoom, leaveRoom, peerStatus: context.peerStatus, reconnectionStatus };
+    const peerStatus = context.peerStatus;
+    return {
+        /**
+         * Join room and start streaming camera and microphone
+         */
+        joinRoom,
+        /**
+         * Leave room and stop streaming
+         */
+        leaveRoom,
+        /**
+         * Current peer connection status
+         */
+        peerStatus,
+        /**
+         * Current reconnection status
+         */ reconnectionStatus,
+    };
 }