@stream-io/video-react-native-sdk 1.19.0 → 1.20.0

package/src/components/Participant/ParticipantView/VideoRenderer.tsx

@@ -73,7 +73,10 @@ export const VideoRenderer = ({
     deregister: deregisterIosScreenshot,
   } = useScreenshotIosContext();
 
-  const videoDimensions = useTrackDimensions(participant);
+  const videoDimensions = useTrackDimensions(participant, trackType);
+
+  const isVideoDimensionsValid =
+    videoDimensions.width > 0 && videoDimensions.height > 0;
 
   const {
     isLocalParticipant,
@@ -291,7 +294,9 @@ export const VideoRenderer = ({
       onLayout={onLayout}
       style={[styles.container, videoRenderer.container]}
     >
-      {canShowVideo && videoStreamToRender ? (
+      {canShowVideo &&
+      videoStreamToRender &&
+      (objectFit || isVideoDimensionsValid) ? (
         <RTCView
           style={[styles.videoStream, videoRenderer.videoStream]}
           streamURL={videoStreamToRender.toURL()}

package/src/contexts/BackgroundFilters.tsx

@@ -139,6 +139,7 @@ export const BackgroundFiltersProvider = ({ children }: PropsWithChildren) => {
       } else if (blurIntensity === 'light') {
         filterName = 'BackgroundBlurLight';
       }
+      call?.tracer.trace('backgroundFilters.apply', filterName);
       (call?.camera.state.mediaStream as MediaStream | undefined)
         ?.getVideoTracks()
         .forEach((track) => {
@@ -164,6 +165,7 @@ export const BackgroundFiltersProvider = ({ children }: PropsWithChildren) => {
       } else if (blurIntensity === 'light') {
         filterName = 'BlurLight';
       }
+      call?.tracer.trace('backgroundFilters.apply', filterName);
       (call?.camera.state.mediaStream as MediaStream | undefined)
         ?.getVideoTracks()
         .forEach((track) => {
@@ -187,6 +189,7 @@ export const BackgroundFiltersProvider = ({ children }: PropsWithChildren) => {
         registeredImageFiltersSetRef.current.add(imageUri);
       }
       const filterName = `VirtualBackground-${imageUri}`;
+      call?.tracer.trace('backgroundFilters.apply', filterName);
       (call?.camera.state.mediaStream as MediaStream | undefined)
         ?.getVideoTracks()
         .forEach((track) => {
@@ -201,6 +204,7 @@ export const BackgroundFiltersProvider = ({ children }: PropsWithChildren) => {
     if (!isSupported) {
       return;
     }
+    call?.tracer.trace('backgroundFilters.disableAll', null);
     (call?.camera.state.mediaStream as MediaStream | undefined)
       ?.getVideoTracks()
       .forEach((track) => {

package/src/hooks/useAndroidKeepCallAliveEffect.ts

@@ -7,13 +7,16 @@ import {
   NativeModules,
   Platform,
 } from 'react-native';
-import { CallingState, getLogger } from '@stream-io/video-client';
+import { Call, CallingState, getLogger } from '@stream-io/video-client';
 import {
   getKeepCallAliveForegroundServiceTypes,
   getNotifeeLibNoThrowForKeepCallAlive,
 } from '../utils/push/libs/notifee';
 
 const notifeeLib = getNotifeeLibNoThrowForKeepCallAlive();
+const callToPassToForegroundService: { current: Call | undefined } = {
+  current: undefined,
+};
 
 function setForegroundService() {
   if (Platform.OS === 'ios' || !notifeeLib) return;
@@ -28,22 +31,29 @@ function setForegroundService() {
         return;
       }
       notifeeLib.default.registerForegroundService(() => {
-        return new Promise(() => {
+        const task = new Promise((resolve) => {
           const logger = getLogger(['setForegroundService method']);
           logger('info', 'Foreground service running for call in progress');
+          // any task to run from SDK in the foreground service must be added
+          resolve(true);
         });
+        const videoConfig = StreamVideoRN.getConfig();
+        const foregroundServiceConfig = videoConfig.foregroundService;
+        const { taskToRun } = foregroundServiceConfig.android;
+        const call = callToPassToForegroundService.current;
+        if (!call) {
+          const logger = getLogger(['setForegroundService method']);
+          logger('warn', 'No call to pass to foreground service');
+          return task.then(() => new Promise(() => {}));
+        }
+        callToPassToForegroundService.current = undefined;
+        return task.then(() => taskToRun(call));
       });
     },
   );
 }
 
 async function startForegroundService(call_cid: string) {
-  const videoConfig = StreamVideoRN.getConfig();
-  const foregroundServiceConfig = videoConfig.foregroundService;
-  const { title, body } = foregroundServiceConfig.android.notificationTexts;
-
-  // check for notification permission and then start the foreground service
-  if (!notifeeLib) return;
   const isCallAliveConfigured =
     await NativeModules.StreamVideoReactNative.isCallAliveConfigured();
   if (!isCallAliveConfigured) {
@@ -54,6 +64,8 @@ async function startForegroundService(call_cid: string) {
     );
     return;
   }
+  // check for notification permission and then start the foreground service
+  if (!notifeeLib) return;
   const settings = await notifeeLib.default.getNotificationSettings();
   if (
     settings.authorizationStatus !== notifeeLib.AuthorizationStatus.AUTHORIZED
@@ -65,6 +77,9 @@ async function startForegroundService(call_cid: string) {
     );
     return;
   }
+  const videoConfig = StreamVideoRN.getConfig();
+  const foregroundServiceConfig = videoConfig.foregroundService;
+  const notificationTexts = foregroundServiceConfig.android.notificationTexts;
   const channelId = foregroundServiceConfig.android.channel.id;
   await notifeeLib.default.createChannel(
     foregroundServiceConfig.android.channel,
@@ -76,8 +91,8 @@ async function startForegroundService(call_cid: string) {
   requestAnimationFrame(() => {
     notifeeLib.default.displayNotification({
       id: call_cid,
-      title,
-      body,
+      title: notificationTexts.title,
+      body: notificationTexts.body,
       android: {
         channelId,
         smallIcon: videoConfig.push?.android.smallIcon,
@@ -107,6 +122,7 @@ export const useAndroidKeepCallAliveEffect = () => {
   const foregroundServiceStartedRef = useRef(false);
 
   const call = useCall();
+  callToPassToForegroundService.current = call;
   const activeCallCid = call?.cid;
   const { useCallCallingState } = useCallStateHooks();
   const callingState = useCallCallingState();
@@ -141,6 +157,7 @@ export const useAndroidKeepCallAliveEffect = () => {
           (notification) => notification.id === activeCallCid,
         );
         if (activeCallNotification) {
+          callToPassToForegroundService.current = undefined;
           // this means that we have a incoming call notification shown as foreground service and we must stop it
           notifee.stopForegroundService();
           notifee.cancelDisplayedNotification(activeCallCid);
@@ -179,6 +196,7 @@ export const useAndroidKeepCallAliveEffect = () => {
       callingState === CallingState.LEFT
     ) {
       if (foregroundServiceStartedRef.current) {
+        callToPassToForegroundService.current = undefined;
         // stop foreground service when the call is not active
         notifeeLib.default.stopForegroundService();
         foregroundServiceStartedRef.current = false;
@@ -190,6 +208,7 @@ export const useAndroidKeepCallAliveEffect = () => {
               (notification) => notification.id === activeCallCid,
             );
             if (activeCallNotification) {
+              callToPassToForegroundService.current = undefined;
               // this means that we have a incoming call notification shown as foreground service and we must stop it
               notifeeLib.default.stopForegroundService();
             }
@@ -204,6 +223,7 @@ export const useAndroidKeepCallAliveEffect = () => {
       // stop foreground service when this effect is unmounted
       if (foregroundServiceStartedRef.current) {
         if (!notifeeLib) return;
+        callToPassToForegroundService.current = undefined;
         notifeeLib.default.stopForegroundService();
         foregroundServiceStartedRef.current = false;
       }

package/src/hooks/useTrackDimensions.ts

@@ -1,53 +1,70 @@
-import { type StreamVideoParticipant } from '@stream-io/video-client';
-import { useCall } from '@stream-io/video-react-bindings';
+import {
+  type StreamVideoParticipant,
+  type VideoTrackType,
+} from '@stream-io/video-client';
 import { useEffect, useState } from 'react';
+import { NativeEventEmitter, NativeModules } from 'react-native';
+
+const webRTCEventEmitter = new NativeEventEmitter(NativeModules.WebRTCModule);
 
 /**
  * This is a utility hook to get the dimensions of the video track of the participant.
  * Note: the `tracktype` is used only for local participants.
  * `tracktype` should be 'videoTrack' for video track and 'screenShareTrack' for screen share track.
  */
-export function useTrackDimensions(participant: StreamVideoParticipant) {
-  const [trackDimensions, setTrackDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-  const call = useCall();
-  const { sessionId } = participant;
+export function useTrackDimensions(
+  participant: StreamVideoParticipant,
+  trackType: VideoTrackType,
+) {
+  const { videoStream, screenShareStream } = participant;
+  const stream =
+    trackType === 'screenShareTrack' ? screenShareStream : videoStream;
+  const [track] = stream?.getVideoTracks() ?? [];
+  const trackId = track?.id;
 
-  useEffect(() => {
-    if (!call) return;
-    call.startReportingStatsFor(sessionId);
-    return () => {
-      call.stopReportingStatsFor(sessionId);
+  const [trackDimensions, setTrackDimensions] = useState(() => {
+    const settings = track?.getSettings();
+    const width = settings?.width ?? 0;
+    const height = settings?.height ?? 0;
+    return {
+      width,
+      height,
     };
-  }, [call, sessionId]);
+  });
 
-  // for remote participants track.getSettings() is not supported it returns an empty object
-  // and for local participants we can get from track.getSettings() but it reports the wrong dimensions as it sends the constraints
-  // so we need to rely on call stats for all participants to get the dimensions
+  // Set up videoTrackDimensionChanged event listener for more direct dimension updates
   useEffect(() => {
-    if (!call) return;
-    const sub = call.state.callStatsReport$.subscribe((report) => {
-      if (!report) return;
-      const reportForTracks = report.participants[sessionId];
-      const trackStats = reportForTracks
-        ?.flatMap((r) => r.streams)
-        .filter((track) => track.kind === 'video');
-      if (!trackStats) return;
-      const stat = trackStats[0];
-      if (stat) {
-        const { frameWidth = 0, frameHeight = 0 } = stat;
+    if (!trackId || !NativeModules.WebRTCModule) return;
+
+    const handleVideoTrackDimensionChanged = (eventData: {
+      pcId: string;
+      trackId: string;
+      width: number;
+      height: number;
+    }) => {
+      // Only handle events for this specific participant
+      if (eventData.trackId === trackId) {
         setTrackDimensions((prev) => {
-          if (prev.width !== frameWidth || prev.height !== frameHeight) {
-            return { width: frameWidth, height: frameHeight };
+          if (
+            prev.width !== eventData.width ||
+            prev.height !== eventData.height
+          ) {
+            return { width: eventData.width, height: eventData.height };
           }
           return prev;
         });
       }
-    });
-    return () => sub.unsubscribe();
-  }, [call, sessionId]);
+    };
+
+    const subscription = webRTCEventEmitter.addListener(
+      'videoTrackDimensionChanged',
+      handleVideoTrackDimensionChanged,
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [trackId, track]);
 
   return trackDimensions;
 }

package/src/providers/StreamCall/AppStateListener.tsx

@@ -72,11 +72,9 @@ export const AppStateListener = () => {
     const subscription = AppState.addEventListener('change', (nextAppState) => {
       const logger = getLogger(['AppStateListener']);
       if (appState.current.match(/background/) && nextAppState === 'active') {
-        if (
-          call?.camera?.state.status === 'enabled' &&
-          Platform.OS === 'android'
-        ) {
-          // when device is locked and resumed, the status isnt made disabled but stays enabled
+        if (call?.camera?.state.status === 'enabled') {
+          // Android: when device is locked and resumed, the status isnt made disabled but stays enabled
+          // iOS PiP: when local track was replaced by remote track, the local track shown is blank
           // as a workaround we stop the track and enable again if its already in enabled state
           call?.camera?.disable(true).then(() => {
             call?.camera?.enable();

package/src/providers/StreamCall/DeviceStats.tsx

@@ -1,4 +1,4 @@
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useEffect } from 'react';
 import {
   CallingState,
@@ -17,28 +17,39 @@ const eventEmitter = NativeModules?.StreamVideoReactNative
 export const DeviceStats = () => {
   const { useCallCallingState } = useCallStateHooks();
   const callingState = useCallCallingState();
+  const call = useCall();
 
   useEffect(() => {
-    if (callingState !== CallingState.JOINED) {
-      return;
-    }
+    if (!call || callingState !== CallingState.JOINED) return;
 
     NativeModules?.StreamVideoReactNative.isLowPowerModeEnabled().then(
-      (initialPowerMode: boolean) => setPowerState(initialPowerMode),
+      (initialPowerMode: boolean) => {
+        setPowerState(initialPowerMode);
+        call.tracer.trace('device.lowPowerMode', initialPowerMode);
+      },
     );
 
     const powerModeSubscription = eventEmitter?.addListener(
       'isLowPowerModeEnabled',
-      (isLowPowerMode: boolean) => setPowerState(isLowPowerMode),
+      (isLowPowerMode: boolean) => {
+        setPowerState(isLowPowerMode);
+        call.tracer.trace('device.lowPowerMode', isLowPowerMode);
+      },
     );
 
     NativeModules?.StreamVideoReactNative.currentThermalState().then(
-      (initialState: string) => setThermalState(initialState),
+      (initialState: string) => {
+        setThermalState(initialState);
+        call.tracer.trace('device.thermalState', initialState);
+      },
     );
 
     const thermalStateSubscription = eventEmitter?.addListener(
       'thermalStateDidChange',
-      (thermalState: string) => setThermalState(thermalState),
+      (thermalState: string) => {
+        setThermalState(thermalState);
+        call.tracer.trace('device.thermalStateChanged', thermalState);
+      },
     );
 
     // on android we need to explicitly start and stop the thermal status updates
@@ -53,7 +64,7 @@ export const DeviceStats = () => {
         NativeModules?.StreamVideoReactNative.stopThermalStatusUpdates();
       }
     };
-  }, [callingState]);
+  }, [call, callingState]);
 
   return null;
 };

package/src/utils/StreamVideoRN/index.ts

@@ -6,6 +6,41 @@ import newNotificationCallbacks, {
 import { setupIosCallKeepEvents } from '../push/setupIosCallKeepEvents';
 import { setupIosVoipPushEvents } from '../push/setupIosVoipPushEvents';
 
+// Utility type for deep partial
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+// Helper function for deep merging
+function deepMerge<T extends Record<string, any>>(
+  target: T,
+  source: DeepPartial<T>,
+): T {
+  const result = { ...target };
+
+  for (const key in source) {
+    if (source[key] !== undefined) {
+      if (
+        typeof source[key] === 'object' &&
+        source[key] !== null &&
+        !Array.isArray(source[key]) &&
+        typeof target[key] === 'object' &&
+        target[key] !== null &&
+        !Array.isArray(target[key])
+      ) {
+        result[key] = deepMerge(
+          target[key],
+          source[key] as DeepPartial<T[typeof key]>,
+        );
+      } else {
+        result[key] = source[key] as T[typeof key];
+      }
+    }
+  }
+
+  return result;
+}
+
 const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
   foregroundService: {
     android: {
@@ -20,6 +55,7 @@ const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
         title: 'Call in progress',
         body: 'Tap to return to the call',
       },
+      taskToRun: () => new Promise(() => {}),
     },
   },
 };
@@ -30,13 +66,12 @@ export class StreamVideoRN {
   /**
    * Update the global config for StreamVideoRN except for push config.
    * To set push config use `StreamVideoRN.setPushConfig` instead.
-   * This function accepts a partial config object that will be merged with the default config.
+   * This function accepts a partial config object that will be deeply merged with the default config.
    */
-  static updateConfig(updateConfig: Partial<Omit<StreamVideoConfig, 'push'>>) {
-    this.config = {
-      ...this.config,
-      ...updateConfig,
-    };
+  static updateConfig(
+    updateConfig: DeepPartial<Omit<StreamVideoConfig, 'push'>>,
+  ) {
+    this.config = deepMerge(this.config, updateConfig);
   }
 
   static updateAndroidIncomingCallChannel(

package/src/utils/StreamVideoRN/types.ts

@@ -1,6 +1,7 @@
 import {
   type ClientPublishOptions,
   StreamVideoClient,
+  type Call,
 } from '@stream-io/video-client';
 import type { AndroidChannel } from '@notifee/react-native';
 
@@ -154,6 +155,11 @@ export type StreamVideoConfig = {
         title: string;
         body: string;
       };
+      /**
+       * The task to run in the foreground service
+       * The task must resolve a promise once complete
+       */
+      taskToRun: (call: Call) => Promise<void>;
     };
   };
 };

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.19.0';
+export const version = '1.20.0';