FCE-1544/async middlewares (#361)

## Description

Introduces async middlewares.

## Motivation and Context

Smelter integration revealed that we are missing a case in which someone
wants to create middleware with asynchronous dependencies.

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

Author: czerwiukk

packages/react-client/src/hooks/internal/devices/useDeviceManager.ts

@@ -31,7 +31,7 @@ export type DeviceManager = {
   enableDevice: () => void;
   disableDevice: () => void;
   currentMiddleware: TrackMiddleware;
-  applyMiddleware: (middleware: TrackMiddleware) => MediaStreamTrack | null;
+  applyMiddleware: (middleware: TrackMiddleware) => Promise<MediaStreamTrack | null>;
   deviceError: DeviceError | null;
   selectedDevice: MediaDeviceInfo | null;
 };

packages/react-client/src/hooks/internal/useScreenshareManager.ts

@@ -83,7 +83,7 @@ export const useScreenShareManager = ({ fishjamClient, peerStatus }: ScreenShare
     let [video, audio] = getTracksFromStream(displayStream);
 
     if (state.tracksMiddleware) {
-      const { videoTrack, audioTrack, onClear } = state.tracksMiddleware(video, audio);
+      const { videoTrack, audioTrack, onClear } = await state.tracksMiddleware(video, audio);
       video = videoTrack;
       audio = audioTrack;
       cleanMiddlewareFnRef.current = onClear;
@@ -122,7 +122,7 @@ export const useScreenShareManager = ({ fishjamClient, peerStatus }: ScreenShare
 
     cleanMiddleware();
 
-    const { videoTrack, audioTrack, onClear } = middleware?.(video, audio) ?? {
+    const { videoTrack, audioTrack, onClear } = (await middleware?.(video, audio)) ?? {
       videoTrack: video,
       audioTrack: audio,
       onClear: null,

packages/react-client/src/hooks/internal/useTrackManager.ts

@@ -61,7 +61,7 @@ export const useTrackManager = ({
 
   const setTrackMiddleware = useCallback(
     async (middleware: TrackMiddleware) => {
-      const processedTrack = applyMiddleware(middleware);
+      const processedTrack = await applyMiddleware(middleware);
 
       const currentTrackId = getCurrentTrackId();
       if (!currentTrackId) return;

packages/react-client/src/hooks/internal/useTrackMiddleware.ts

@@ -16,12 +16,12 @@ export const useTrackMiddleware = (rawTrack: MediaStreamTrack | null) => {
   }, [rawTrack, processedTrack]);
 
   const applyMiddleware = useCallback(
-    (newMiddleware: TrackMiddleware) => {
+    async (newMiddleware: TrackMiddleware) => {
       cleanupRef.current?.();
       setMiddleware(() => newMiddleware);
 
       if (newMiddleware && rawTrack) {
-        const { track, onClear } = newMiddleware(rawTrack);
+        const { track, onClear } = await newMiddleware(rawTrack);
         cleanupRef.current = onClear;
         setProcessedTrack(track);
         return track;

packages/react-client/src/index.ts

@@ -18,6 +18,7 @@ export type {
   DeviceItem,
   InitializeDevicesResult,
   InitializeDevicesStatus,
+  MiddlewareResult,
   PeerId,
   PeerStatus,
   PersistLastDeviceHandlers,
@@ -27,6 +28,7 @@ export type {
   TrackId,
   TrackMiddleware,
   TracksMiddleware,
+  TracksMiddlewareResult,
 } from "./types/public";
 export type {
   AuthErrorReason,

packages/react-client/src/types/public.ts

@@ -20,12 +20,18 @@ export type Track = {
   track: MediaStreamTrack | null;
 };
 
-export type TrackMiddleware = ((track: MediaStreamTrack) => { track: MediaStreamTrack; onClear?: () => void }) | null;
+export type MiddlewareResult = { track: MediaStreamTrack; onClear?: () => void };
+export type TrackMiddleware = ((track: MediaStreamTrack) => MiddlewareResult | Promise<MiddlewareResult>) | null;
 
+export type TracksMiddlewareResult = {
+  videoTrack: MediaStreamTrack;
+  audioTrack: MediaStreamTrack | null;
+  onClear: () => void;
+};
 export type TracksMiddleware = (
   videoTrack: MediaStreamTrack,
   audioTrack: MediaStreamTrack | null,
-) => { videoTrack: MediaStreamTrack; audioTrack: MediaStreamTrack | null; onClear: () => void };
+) => TracksMiddlewareResult | Promise<TracksMiddlewareResult>;
 
 /**
  * Represents the possible statuses of a peer connection.