FCE-2487: Fix media stream usage docs

packages/mobile-client/src/index.ts

@@ -11,12 +11,11 @@ import {
   useMicrophone as useMicrophoneReactClient
 } from '@fishjam-cloud/react-client';
 
-export { RTCView, type RTCVideoViewProps } from './overrides/RTCView';
+export { RTCView, RTCPIPView, type RTCVideoViewProps, type RTCPIPViewProps } from './overrides/RTCView';
 export {
   ScreenCapturePickerView,
   startPIP,
   stopPIP,
-  RTCPIPView,
   useCallKit,
   useCallKitEvent,
   useCallKitService,

packages/mobile-client/src/overrides/RTCView.tsx

@@ -1,24 +1,35 @@
-import type {
-  MediaStream as RNMediaStream,
-  RTCVideoViewProps as OriginalRTCVideoViewProps,
-} from '@fishjam-cloud/react-native-webrtc';
-import { RTCView as OriginalRTCView } from '@fishjam-cloud/react-native-webrtc';
+import type { MediaStream as RNMediaStream } from '@fishjam-cloud/react-native-webrtc';
+import { RTCPIPView as OriginalRTCPIPView, RTCView as OriginalRTCView } from '@fishjam-cloud/react-native-webrtc';
+import type React from 'react';
 import { useMemo } from 'react';
 
-export type RTCVideoViewProps = Omit<OriginalRTCVideoViewProps, 'streamURL'> & { mediaStream: MediaStream };
+export type RTCVideoViewProps = Omit<React.ComponentPropsWithRef<typeof OriginalRTCView>, 'streamURL'> & {
+  mediaStream: MediaStream;
+};
+
+export type RTCPIPViewProps = Omit<React.ComponentPropsWithRef<typeof OriginalRTCPIPView>, 'streamURL'> & {
+  mediaStream: MediaStream;
+};
+
+const convertMediaStreamToURL = (mediaStream: MediaStream | undefined): string | undefined => {
+  const rnMediaStream = mediaStream as unknown as RNMediaStream;
+  if (rnMediaStream && typeof rnMediaStream.toURL === 'function') {
+    return rnMediaStream.toURL();
+  } else {
+    console.error(
+      'mediaStream.toURL is not a function. Make sure to use the MediaStream type from @fishjam-cloud/react-native-webrtc',
+      rnMediaStream,
+    );
+    return undefined;
+  }
+};
+
+export const RTCView = ({ ref, ...props }: RTCVideoViewProps) => {
+  const streamURL = useMemo(() => convertMediaStreamToURL(props.mediaStream), [props.mediaStream]);
+  return <OriginalRTCView {...props} ref={ref} streamURL={streamURL} />;
+};
 
-export const RTCView = (props: RTCVideoViewProps) => {
-  const streamURL = useMemo(() => {
-    const mediaStream = props.mediaStream as unknown as RNMediaStream;
-    if (mediaStream && typeof mediaStream.toURL === 'function') {
-      return mediaStream.toURL();
-    } else {
-      console.error(
-        'RTCView: mediaStream.toURL is not a function. Make sure to use the MediaStream type from @fishjam-cloud/react-native-webrtc',
-        mediaStream,
-      );
-      return undefined;
-    }
-  }, [props.mediaStream]);
-  return <OriginalRTCView {...props} streamURL={streamURL} />;
+export const RTCPIPView = ({ ref, ...props }: RTCPIPViewProps) => {
+  const streamURL = useMemo(() => convertMediaStreamToURL(props.mediaStream), [props.mediaStream]);
+  return <OriginalRTCPIPView {...props} ref={ref} streamURL={streamURL} />;
 };