Fce 1003/tidy up reexported types (#237)

## Description Removes excess of re-exported types. ## Motivation and Context Most of them were not needed. ## Types of changes - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
fishjam-cloud · Dec 18, 2024 · 71219c4 · 71219c4
1 parent 4610b54
commit 71219c4
Show file tree

Hide file tree

Showing 20 changed files with 406 additions and 345 deletions.
diff --git a/examples/react-client/fishjam-chat/package.json b/examples/react-client/fishjam-chat/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "lint:check": "eslint . --ext .ts,.tsx",
     "format": "prettier --write . --ignore-path ./.eslintignore",
     "format:check": "prettier --check . --ignore-path ./.eslintignore",

diff --git a/examples/react-client/fishjam-chat/src/components/RoomView.tsx b/examples/react-client/fishjam-chat/src/components/RoomView.tsx
@@ -31,7 +31,11 @@ export const RoomView = () => {
         >
           {localPeer && (
             <>
-              <Tile id="You" name="You" videoTrack={localPeer.cameraTrack} />
+              <Tile
+                id={localPeer.id}
+                name="You"
+                videoTrack={localPeer.cameraTrack}
+              />
               {localPeer.screenShareVideoTrack && (
                 <Tile
                   id="Your screen share"

diff --git a/examples/react-client/fishjam-chat/src/components/Tile.tsx b/examples/react-client/fishjam-chat/src/components/Tile.tsx
@@ -1,4 +1,4 @@
-import type { Track } from "@fishjam-cloud/react-client";
+import { type Track, useVAD } from "@fishjam-cloud/react-client";
 
 import AudioPlayer from "./AudioPlayer";
 import { Badge } from "./ui/badge";
@@ -13,7 +13,7 @@ type Props = {
 
 export function Tile({ videoTrack, audioTrack, name, id }: Props) {
   const isMuted = !audioTrack || audioTrack.metadata?.paused;
-  const isSpeaking = audioTrack?.vadStatus === "speech";
+  const isSpeaking = useVAD([id])[id];
 
   return (
     <div className="relative grid h-full w-full place-content-center overflow-hidden rounded-md border-2 border-stone-300">

diff --git a/packages/react-client/src/FishjamProvider.tsx b/packages/react-client/src/FishjamProvider.tsx
@@ -7,42 +7,61 @@ import { useFishjamClientState } from "./hooks/internal/useFishjamClientState";
 import type { FishjamContextType } from "./hooks/internal/useFishjamContext";
 import { FishjamContext } from "./hooks/internal/useFishjamContext";
 import { usePeerStatus } from "./hooks/internal/usePeerStatus";
+import { useScreenShareManager } from "./hooks/internal/useScreenshareManager";
 import { useTrackManager } from "./hooks/internal/useTrackManager";
-import { useScreenShareManager } from "./hooks/useScreenShare";
-import type { BandwidthLimits, PersistLastDeviceHandlers, StartStreamingProps } from "./types/public";
+import type { BandwidthLimits, PersistLastDeviceHandlers, StreamConfig } from "./types/public";
 import { mergeWithDefaultBandwitdthLimits } from "./utils/bandwidth";
 
-interface FishjamProviderProps extends PropsWithChildren {
+/**
+ * @category Components
+ */
+export interface FishjamProviderProps extends PropsWithChildren {
+  /**
+   * Use {@link ReconnectConfig} to adjust reconnection policy to your needs or set false it.
+   * Set to true by default.
+   */
   reconnect?: ReconnectConfig | boolean;
+  /**
+   * Set preferred constraints.
+   * @param {MediaStreamConstraints} constraints - The media stream constraints as defined by the Web API.
+   * @external {@link https://udn.realityripple.com/docs/Web/API/MediaStreamConstraints MediaStreamConstraints}
+   */
   constraints?: Pick<MediaStreamConstraints, "audio" | "video">;
+  /**
+   * Decide if you want Fishjam SDK to persist last used device in the local storage.
+   * You can also provide your getter and setter by using the {@link PersistLastDeviceHandlers} interface.
+   */
   persistLastDevice?: boolean | PersistLastDeviceHandlers;
+  /**
+   * Adjust max bandwidth limit for a single stream and simulcast.
+   */
   bandwidthLimits?: Partial<BandwidthLimits>;
-  autoStreamCamera?: StartStreamingProps;
-  autoStreamMicrophone?: StartStreamingProps;
+  /**
+   * Configure whether to use video simulcast and which layers to send if so.
+   */
+  videoConfig?: StreamConfig;
+  /**
+   * Configure whether to use audio simulcast and which layers to send if so.
+   */
+  audioConfig?: StreamConfig;
 }
 
 /**
+ * Provides the Fishjam Context
  * @category Components
+ * @param
  */
-export function FishjamProvider({
-  children,
-  reconnect,
-  constraints,
-  persistLastDevice,
-  bandwidthLimits,
-  autoStreamCamera,
-  autoStreamMicrophone,
-}: FishjamProviderProps) {
-  const fishjamClientRef = useRef(new FishjamClient({ reconnect }));
+export function FishjamProvider(props: FishjamProviderProps) {
+  const fishjamClientRef = useRef(new FishjamClient({ reconnect: props.reconnect }));
 
   const hasDevicesBeenInitializedRef = useRef(false);
-  const storage = persistLastDevice;
+  const storage = props.persistLastDevice;
 
   const videoDeviceManagerRef = useRef(
     new DeviceManager({
       deviceType: "video",
       defaultConstraints: VIDEO_TRACK_CONSTRAINTS,
-      userConstraints: constraints?.video,
+      userConstraints: props.constraints?.video,
       storage,
     }),
   );
@@ -51,29 +70,29 @@ export function FishjamProvider({
     new DeviceManager({
       deviceType: "audio",
       defaultConstraints: AUDIO_TRACK_CONSTRAINTS,
-      userConstraints: constraints?.audio,
+      userConstraints: props.constraints?.audio,
       storage,
     }),
   );
 
   const { peerStatus, getCurrentPeerStatus } = usePeerStatus(fishjamClientRef.current);
 
-  const mergedBandwidthLimits = mergeWithDefaultBandwitdthLimits(bandwidthLimits);
+  const mergedBandwidthLimits = mergeWithDefaultBandwitdthLimits(props.bandwidthLimits);
 
   const videoTrackManager = useTrackManager({
     mediaManager: videoDeviceManagerRef.current,
     tsClient: fishjamClientRef.current,
     getCurrentPeerStatus,
     bandwidthLimits: mergedBandwidthLimits,
-    autoStreamProps: autoStreamCamera,
+    streamConfig: props.videoConfig,
   });
 
   const audioTrackManager = useTrackManager({
     mediaManager: audioDeviceManagerRef.current,
     tsClient: fishjamClientRef.current,
     getCurrentPeerStatus,
     bandwidthLimits: mergedBandwidthLimits,
-    autoStreamProps: autoStreamMicrophone,
+    streamConfig: props.audioConfig,
   });
 
   const screenShareManager = useScreenShareManager({ fishjamClient: fishjamClientRef.current, getCurrentPeerStatus });
@@ -93,5 +112,5 @@ export function FishjamProvider({
     bandwidthLimits: mergedBandwidthLimits,
   };
 
-  return <FishjamContext.Provider value={context}>{children}</FishjamContext.Provider>;
+  return <FishjamContext.Provider value={context}>{props.children}</FishjamContext.Provider>;
 }
diff --git a/packages/react-client/src/hooks/devices/useCamera.ts b/packages/react-client/src/hooks/devices/useCamera.ts
@@ -3,59 +3,65 @@ import type { DeviceItem, TrackMiddleware } from "../../types/public";
 import { useDeviceApi } from "../internal/device/useDeviceApi";
 import { useFishjamContext } from "../internal/useFishjamContext";
 
-type CameraApi = {
+/**
+ * @category Devices
+ */
+export type UseCameraResult = {
+  /**
+   * Toggles current camera on/off
+   */
   toggleCamera: () => void;
-  // TODO: use branded type once it's added
+  /**
+   * Selects the camera device
+   */
   selectCamera: (deviceId: string) => void;
+  /**
+   * Indicates which camera is now turned on and streaming
+   */
   activeCamera: DeviceItem | null;
+  /**
+   * Indicates whether the microphone is streaming video
+   */
   isCameraOn: boolean;
+  /**
+   * The MediaStream object containing the current stream
+   */
   cameraStream: MediaStream | null;
+  /**
+   * The currently set camera middleware function
+   */
   currentCameraMiddleware: TrackMiddleware;
+  /**
+   * Sets the camera middleware
+   */
   setCameraTrackMiddleware: (middleware: TrackMiddleware | null) => Promise<void>;
+  /**
+   * List of available camera devices
+   */
   cameraDevices: DeviceItem[];
+  /**
+   * Possible error thrown while setting up the camera
+   */
   cameraDeviceError: DeviceError | null;
 };
 
 /**
  *
  * @category Devices
  */
-export function useCamera(): CameraApi {
+export function useCamera(): UseCameraResult {
   const { videoTrackManager, videoDeviceManagerRef } = useFishjamContext();
   const deviceApi = useDeviceApi({ deviceManager: videoDeviceManagerRef.current });
 
   return {
-    /** Toggles current camera on/off */
     toggleCamera: videoTrackManager.toggleDevice,
-    /** Selects the camera device  */
     selectCamera: videoTrackManager.selectDevice,
-    /**
-     * Indicates which camera is now turned on and streaming
-     */
     activeCamera: deviceApi.activeDevice,
-    /**
-     * Indicates whether the microphone is streaming video
-     */
     isCameraOn: !!deviceApi.mediaStream,
-    /**
-     * The MediaStream object containing the current stream
-     */
     cameraStream: deviceApi.mediaStream,
-    /**
-     * The currently set camera middleware function
-     */
     currentCameraMiddleware: deviceApi.currentMiddleware,
-    /**
-     * Sets the camera middleware
-     */
     setCameraTrackMiddleware: videoTrackManager.setTrackMiddleware,
-    /**
-     * List of available camera devices
-     */
     cameraDevices: deviceApi.devices,
-    /**
-     * Possible error thrown while setting up the camera
-     */
     cameraDeviceError: deviceApi.deviceError,
   };
 }
diff --git a/packages/react-client/src/hooks/devices/useInitializeDevices.ts b/packages/react-client/src/hooks/devices/useInitializeDevices.ts
@@ -5,10 +5,16 @@ import { getAvailableMedia, getCorrectedResult } from "../../devices/mediaInitia
 import { useFishjamContext } from "../internal/useFishjamContext";
 
 /**
- *
  * @category Devices
  */
-export const useInitializeDevices = () => {
+export type UseInitializeDevicesResult = {
+  initializeDevices: () => Promise<void>;
+};
+
+/**
+ * @category Devices
+ */
+export const useInitializeDevices = (): UseInitializeDevicesResult => {
   const { videoDeviceManagerRef, audioDeviceManagerRef, hasDevicesBeenInitializedRef } = useFishjamContext();
 
   const initializeDevices = useCallback(async () => {

diff --git a/packages/react-client/src/hooks/devices/useMicrophone.ts b/packages/react-client/src/hooks/devices/useMicrophone.ts
@@ -3,67 +3,69 @@ import type { DeviceItem, TrackMiddleware } from "../../types/public";
 import { useDeviceApi } from "../internal/device/useDeviceApi";
 import { useFishjamContext } from "../internal/useFishjamContext";
 
-type MicrophoneApi = {
+/**
+ * @category Devices
+ */
+export type UseMicrophoneResult = {
+  /** Toggles current microphone on/off */
   toggleMicrophone: () => void;
+  /** Mutes/unmutes the microphone */
   toggleMicrophoneMute: () => void;
-  // TODO: use branded type once it's added
+  /** Selects the microphone device */
   selectMicrophone: (deviceId: string) => void;
+  /**
+   * Indicates which microphone is now turned on and streaming audio
+   */
   activeMicrophone: DeviceItem | null;
+  /**
+   * Indicates whether the microphone is streaming audio
+   */
   isMicrophoneOn: boolean;
+  /**
+   * Indicates whether the microphone is muted
+   */
   isMicrophoneMuted: boolean;
+  /**
+   * The MediaStream object containing the current audio stream
+   */
   microphoneStream: MediaStream | null;
+  /**
+   * The currently set microphone middleware function
+   */
   currentMicrophoneMiddleware: TrackMiddleware;
+  /**
+   * Sets the microphone middleware
+   */
   setMicrophoneTrackMiddleware: (middleware: TrackMiddleware | null) => Promise<void>;
+  /**
+   * List of available microphone devices
+   */
   microphoneDevices: DeviceItem[];
+  /**
+   * Possible error thrown while setting up the microphone
+   */
   microphoneDeviceError: DeviceError | null;
 };
 
 /**
  *
  * @category Devices
  */
-export function useMicrophone(): MicrophoneApi {
+export function useMicrophone(): UseMicrophoneResult {
   const { audioTrackManager, audioDeviceManagerRef } = useFishjamContext();
   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,
   };
 }
diff --git a/packages/react-client/src/hooks/internal/useFishjamContext.ts b/packages/react-client/src/hooks/internal/useFishjamContext.ts
@@ -3,15 +3,16 @@ import { createContext, type MutableRefObject, useContext } from "react";
 
 import type { DeviceManager } from "../../devices/DeviceManager";
 import type { TrackManager } from "../../types/internal";
-import type { BandwidthLimits, PeerStatus, ScreenshareApi } from "../../types/public";
+import type { BandwidthLimits, PeerStatus } from "../../types/public";
+import type { UseScreenshareResult } from "../useScreenShare";
 import type { FishjamClientState } from "./useFishjamClientState";
 
 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;