FCE-3322: Fix react native MediaStreamTrack (#539)

## Description

- Re-export `MediaStreamTrack` from `@fishjam-cloud/react-native-webrtc`
so mobile consumers get the RN-native track type.
- Override `Track` and `RemoteTrack` so their `track` field is typed as
`RNMediaStreamTrack` instead of the web type.
- Override `useCamera`, `useMicrophone`, `useScreenShare` results (and
middleware types) to use RN media types for
`startCamera`/`startMicrophone` returns, `videoTrack`/`audioTrack`, and
  `*Middleware` setters.
- Move `MiddlewareResult`, `TrackMiddleware`, `TracksMiddleware`,
`TracksMiddlewareResult` exports to the mobile overrides.

  ## Motivation and Context

The mobile client was leaking the web `MediaStreamTrack` type through
hooks and track objects, causing type mismatches for RN consumers. This
aligns all media track types with
  `react-native-webrtc`.

  ## Documentation impact

  - [ ] Documentation update required
  - [ ] Documentation updated [in another PR](_)
  - [x] No documentation update required

  ## 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)

Author: MiloszFilimowski

packages/mobile-client/src/index.ts

@@ -29,6 +29,7 @@ export type {
   CallKitAction,
   CallKitConfig,
   MediaStream,
+  MediaStreamTrack,
   AudioDevice,
   AudioOutputChangedInfo,
   UseAudioOutputResult,
@@ -77,6 +78,10 @@ export type {
   InitializeDevicesResult,
   PeerWithTracks,
   TrackFields,
+  MiddlewareResult,
+  TrackMiddleware,
+  TracksMiddleware,
+  TracksMiddlewareResult,
 } from './overrides/types';
 
 export type {
@@ -90,16 +95,12 @@ export type {
   DeviceError,
   DeviceItem,
   InitializeDevicesStatus,
-  MiddlewareResult,
   PeerId,
   PeerStatus,
   PersistLastDeviceHandlers,
   SimulcastBandwidthLimits,
   StreamConfig,
   TrackId,
-  TrackMiddleware,
-  TracksMiddleware,
-  TracksMiddlewareResult,
   AuthErrorReason,
   JoinErrorReason,
   UseDataChannelResult,

packages/mobile-client/src/overrides/hooks.ts

@@ -1,4 +1,6 @@
 import {
+  type TrackMiddleware as ReactTrackMiddleware,
+  type TracksMiddleware as ReactTracksMiddleware,
   useCamera as useCameraReactClient,
   useCustomSource as useCustomSourceReactClient,
   useInitializeDevices as useInitializeDevicesReactClient,
@@ -21,31 +23,61 @@ import type {
   InitializeDevicesResult,
   PeerWithTracks,
   RemoteTrack,
+  TrackMiddleware,
+  TracksMiddleware,
+  UseCameraResult,
   UseLivestreamStreamerResult,
   UseLivestreamViewerResult,
+  UseMicrophoneResult,
+  UseScreenShareResult,
 } from './types';
 
-export function useCamera() {
+export function useCamera(): UseCameraResult {
   const result = useCameraReactClient();
+  const { setCameraTrackMiddleware: setCameraTrackMiddlewareReact } = result;
+  const setCameraTrackMiddleware = useCallback(
+    (middleware: TrackMiddleware) => setCameraTrackMiddlewareReact(middleware as ReactTrackMiddleware),
+    [setCameraTrackMiddlewareReact],
+  );
   return {
     ...result,
     cameraStream: result.cameraStream as RNMediaStream | null,
+    startCamera: result.startCamera as UseCameraResult['startCamera'],
+    currentCameraMiddleware: result.currentCameraMiddleware as TrackMiddleware,
+    setCameraTrackMiddleware,
   };
 }
 
-export function useMicrophone() {
+export function useMicrophone(): UseMicrophoneResult {
   const { toggleMicrophoneMute: _, ...rest } = useMicrophoneReactClient();
+  const { setMicrophoneTrackMiddleware: setMicrophoneTrackMiddlewareReact } = rest;
+  const setMicrophoneTrackMiddleware = useCallback(
+    (middleware: TrackMiddleware) => setMicrophoneTrackMiddlewareReact(middleware as ReactTrackMiddleware),
+    [setMicrophoneTrackMiddlewareReact],
+  );
   return {
     ...rest,
     microphoneStream: rest.microphoneStream as RNMediaStream | null,
+    startMicrophone: rest.startMicrophone as UseMicrophoneResult['startMicrophone'],
+    currentMicrophoneMiddleware: rest.currentMicrophoneMiddleware as TrackMiddleware,
+    setMicrophoneTrackMiddleware,
   };
 }
 
-export function useScreenShare() {
+export function useScreenShare(): UseScreenShareResult {
   const result = useScreenShareReactClient();
+  const { setTracksMiddleware: setTracksMiddlewareReact } = result;
+  const setTracksMiddleware = useCallback(
+    (middleware: TracksMiddleware | null) => setTracksMiddlewareReact(middleware as ReactTracksMiddleware | null),
+    [setTracksMiddlewareReact],
+  );
   return {
     ...result,
     stream: result.stream as RNMediaStream | null,
+    videoTrack: result.videoTrack as UseScreenShareResult['videoTrack'],
+    audioTrack: result.audioTrack as UseScreenShareResult['audioTrack'],
+    currentTracksMiddleware: result.currentTracksMiddleware as TracksMiddleware | null,
+    setTracksMiddleware,
   };
 }
 

packages/mobile-client/src/overrides/types.ts

@@ -1,5 +1,6 @@
 import type {
   CustomSource as ReactClientCustomSource,
+  DeviceError,
   InitializeDevicesResult as ReactClientInitializeDevicesResult,
   PeerWithTracks as ReactClientPeerWithTracks,
   RemoteTrack as ReactClientRemoteTrack,
@@ -12,7 +13,10 @@ import type {
   useMicrophone as useMicrophoneReactClient,
   useScreenShare as useScreenShareReactClient,
 } from '@fishjam-cloud/react-client';
-import type { MediaStream as RNMediaStream } from '@fishjam-cloud/react-native-webrtc';
+import type {
+  MediaStream as RNMediaStream,
+  MediaStreamTrack as RNMediaStreamTrack,
+} from '@fishjam-cloud/react-native-webrtc';
 
 export type StreamerInputs =
   | { video: RNMediaStream; audio?: RNMediaStream | null }
@@ -31,19 +35,58 @@ export type UseLivestreamViewerResult = Omit<ReactClientUseLivestreamViewerResul
   stream: RNMediaStream | null;
 };
 
-export type UseCameraResult = Omit<ReturnType<typeof useCameraReactClient>, 'cameraStream'> & {
+export type MiddlewareResult = { track: RNMediaStreamTrack; onClear?: () => void };
+
+export type TrackMiddleware = ((track: RNMediaStreamTrack) => MiddlewareResult | Promise<MiddlewareResult>) | null;
+
+export type TracksMiddlewareResult = {
+  videoTrack: RNMediaStreamTrack;
+  audioTrack: RNMediaStreamTrack | null;
+  onClear: () => void;
+};
+
+export type TracksMiddleware = (
+  videoTrack: RNMediaStreamTrack,
+  audioTrack: RNMediaStreamTrack | null,
+) => TracksMiddlewareResult | Promise<TracksMiddlewareResult>;
+
+export type UseCameraResult = Omit<
+  ReturnType<typeof useCameraReactClient>,
+  'cameraStream' | 'startCamera' | 'currentCameraMiddleware' | 'setCameraTrackMiddleware'
+> & {
   cameraStream: RNMediaStream | null;
+  startCamera: (
+    ...args: Parameters<ReturnType<typeof useCameraReactClient>['startCamera']>
+  ) => Promise<[RNMediaStreamTrack, null] | [null, DeviceError]>;
+  currentCameraMiddleware: TrackMiddleware;
+  setCameraTrackMiddleware: (middleware: TrackMiddleware) => Promise<void>;
 };
 
 export type UseMicrophoneResult = Omit<
   ReturnType<typeof useMicrophoneReactClient>,
-  'toggleMicrophoneMute' | 'microphoneStream'
+  | 'toggleMicrophoneMute'
+  | 'microphoneStream'
+  | 'startMicrophone'
+  | 'currentMicrophoneMiddleware'
+  | 'setMicrophoneTrackMiddleware'
 > & {
   microphoneStream: RNMediaStream | null;
+  startMicrophone: (
+    ...args: Parameters<ReturnType<typeof useMicrophoneReactClient>['startMicrophone']>
+  ) => Promise<[RNMediaStreamTrack, null] | [null, DeviceError]>;
+  currentMicrophoneMiddleware: TrackMiddleware;
+  setMicrophoneTrackMiddleware: (middleware: TrackMiddleware) => Promise<void>;
 };
 
-export type UseScreenShareResult = Omit<ReturnType<typeof useScreenShareReactClient>, 'stream'> & {
+export type UseScreenShareResult = Omit<
+  ReturnType<typeof useScreenShareReactClient>,
+  'stream' | 'videoTrack' | 'audioTrack' | 'currentTracksMiddleware' | 'setTracksMiddleware'
+> & {
   stream: RNMediaStream | null;
+  videoTrack: RNMediaStreamTrack | null;
+  audioTrack: RNMediaStreamTrack | null;
+  currentTracksMiddleware: TracksMiddleware | null;
+  setTracksMiddleware: (middleware: TracksMiddleware | null) => Promise<void>;
 };
 
 export type UseCustomSourceResult = Omit<ReturnType<typeof useCustomSourceReactClient>, 'stream' | 'setStream'> & {
@@ -57,9 +100,15 @@ export type UseInitializeDevicesReturn = {
   ) => Promise<InitializeDevicesResult>;
 };
 
-export type Track = Omit<ReactClientTrack, 'stream'> & { stream: RNMediaStream | null };
+export type Track = Omit<ReactClientTrack, 'stream' | 'track'> & {
+  stream: RNMediaStream | null;
+  track: RNMediaStreamTrack | null;
+};
 
-export type RemoteTrack = Omit<ReactClientRemoteTrack, 'stream'> & { stream: RNMediaStream | null };
+export type RemoteTrack = Omit<ReactClientRemoteTrack, 'stream' | 'track'> & {
+  stream: RNMediaStream | null;
+  track: RNMediaStreamTrack | null;
+};
 
 export type CustomSource<T extends string> = Omit<ReactClientCustomSource<T>, 'stream'> & { stream?: RNMediaStream };