@stream-io/video-react-native-sdk 1.20.1-alpha.2 → 1.20.2

package/src/components/Call/CallContent/RTCViewPipIOS.tsx

@@ -3,14 +3,21 @@ import {
   getLogger,
   hasScreenShare,
   speakerLayoutSortPreset,
+  type StreamVideoParticipant,
+  type VideoTrackType,
 } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import type { MediaStream } from '@stream-io/react-native-webrtc';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import { findNodeHandle } from 'react-native';
-import { onNativeCallClosed, RTCViewPipNative } from './RTCViewPipNative';
+import {
+  onNativeCallClosed,
+  onNativeDimensionsUpdated,
+  RTCViewPipNative,
+} from './RTCViewPipNative';
 import { useDebouncedValue } from '../../../utils/hooks';
 import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
+import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
 
 type Props = {
   includeLocalParticipantVideo?: boolean;
@@ -80,23 +87,60 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     };
   }, [call]);
 
-  const streamURL = useMemo(() => {
-    if (!participantInSpotlight) {
-      return undefined;
+  const onDimensionsUpdated = useCallback((width: number, height: number) => {
+    const node = findNodeHandle(nativeRef.current);
+    if (node !== null && width > 0 && height > 0) {
+      onNativeDimensionsUpdated(node, width, height);
     }
+  }, []);
 
-    const { videoStream, screenShareStream } = participantInSpotlight;
+  const { videoStream, screenShareStream } = participantInSpotlight;
 
-    const isScreenSharing = hasScreenShare(participantInSpotlight);
+  const isScreenSharing = hasScreenShare(participantInSpotlight);
 
-    const videoStreamToRender = (isScreenSharing
-      ? screenShareStream
-      : videoStream) as unknown as MediaStream | undefined;
+  const videoStreamToRender = (isScreenSharing
+    ? screenShareStream
+    : videoStream) as unknown as MediaStream | undefined;
 
+  const streamURL = useMemo(() => {
+    if (!videoStreamToRender) {
+      return undefined;
+    }
     return videoStreamToRender?.toURL();
-  }, [participantInSpotlight]);
+  }, [videoStreamToRender]);
 
-  return <RTCViewPipNative streamURL={streamURL} ref={nativeRef} />;
+  return (
+    <>
+      <RTCViewPipNative streamURL={streamURL} ref={nativeRef} />
+      <DimensionsUpdatedRenderless
+        participant={participantInSpotlight}
+        trackType={isScreenSharing ? 'screenShareTrack' : 'videoTrack'}
+        onDimensionsUpdated={onDimensionsUpdated}
+        key={streamURL}
+      />
+    </>
+  );
 });
 
+const DimensionsUpdatedRenderless = React.memo(
+  ({
+    participant,
+    trackType,
+    onDimensionsUpdated,
+  }: {
+    participant: StreamVideoParticipant;
+    trackType: VideoTrackType;
+    onDimensionsUpdated: (width: number, height: number) => void;
+  }) => {
+    const { width, height } = useTrackDimensions(participant, trackType);
+
+    useEffect(() => {
+      onDimensionsUpdated(width, height);
+    }, [width, height, onDimensionsUpdated]);
+
+    return null;
+  },
+);
+
+DimensionsUpdatedRenderless.displayName = 'DimensionsUpdatedRenderless';
 RTCViewPipIOS.displayName = 'RTCViewPipIOS';

package/src/components/Call/CallContent/RTCViewPipNative.tsx

@@ -26,6 +26,23 @@ export function onNativeCallClosed(reactTag: number) {
   );
 }
 
+export function onNativeDimensionsUpdated(
+  reactTag: number,
+  width: number,
+  height: number,
+) {
+  getLogger(['RTCViewPipNative'])('debug', 'onNativeDimensionsUpdated', {
+    width,
+    height,
+  });
+  UIManager.dispatchViewManagerCommand(
+    reactTag,
+    UIManager.getViewManagerConfig(COMPONENT_NAME).Commands
+      .setPreferredContentSize,
+    [width, height],
+  );
+}
+
 /** Wrapper for the native view
  * meant to stay private and not exposed */
 export const RTCViewPipNative = React.memo(

package/src/hooks/useTrackDimensions.ts

@@ -34,7 +34,7 @@ export function useTrackDimensions(
 
   // Set up videoTrackDimensionChanged event listener for more direct dimension updates
   useEffect(() => {
-    if (!trackId || !NativeModules.WebRTCModule) return;
+    if (!trackId || !track) return;
 
     const handleVideoTrackDimensionChanged = (eventData: {
       pcId: string;
@@ -46,16 +46,27 @@ export function useTrackDimensions(
       if (eventData.trackId === trackId) {
         setTrackDimensions((prev) => {
           if (
-            prev.width !== eventData.width ||
-            prev.height !== eventData.height
+            prev.width === eventData.width &&
+            prev.height === eventData.height
           ) {
-            return { width: eventData.width, height: eventData.height };
+            return prev;
           }
-          return prev;
+          return { width: eventData.width, height: eventData.height };
         });
       }
     };
 
+    const { width, height } = track.getSettings();
+    setTrackDimensions((prev) => {
+      if (prev.width === width && prev.height === height) {
+        return prev;
+      }
+      return {
+        width: width ?? 0,
+        height: height ?? 0,
+      };
+    });
+
     const subscription = webRTCEventEmitter.addListener(
       'videoTrackDimensionChanged',
       handleVideoTrackDimensionChanged,

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.20.1-alpha.1';
+export const version = '1.20.2';

package/ios/StreamVideoReactNative.xcodeproj/xcuserdata/santhoshvaiyapuri.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>StreamVideoReactNative.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>