@stream-io/video-react-native-sdk 1.43.0 → 1.45.0

package/ios/StreamInCallManager.swift

@@ -124,7 +124,30 @@ class StreamInCallManager: RCTEventEmitter {
             self.enableStereo = enabled
         }
     }
-    
+
+    @objc(setMuteMode:)
+    func setMuteMode(mode: NSInteger) {
+        audioSessionQueue.async { [self] in
+            guard let adm = getAudioDeviceModule() else {
+                log("setMuteMode(\(mode)) skipped: no live call ADM")
+                return
+            }
+            let muteMode = RTCAudioEngineMuteMode(rawValue: mode) ?? .voiceProcessing
+            _ = adm.setMuteMode(muteMode)
+        }
+    }
+
+    @objc(setRecordingAlwaysPreparedMode:)
+    func setRecordingAlwaysPreparedMode(enabled: Bool) {
+        audioSessionQueue.async { [self] in
+            guard let adm = getAudioDeviceModule() else {
+                log("setRecordingAlwaysPreparedMode(\(enabled)) skipped: no live call ADM")
+                return
+            }
+            _ = adm.setRecordingAlwaysPreparedMode(enabled)
+        }
+    }
+
     /// Builds the audio config for the current role/device and sets it as WebRTC's default.
     private func makeAudioConfiguration(for routing: OutputRouting?) -> RTCAudioSessionConfiguration {
         let category: AVAudioSession.Category
@@ -199,11 +222,11 @@ class StreamInCallManager: RCTEventEmitter {
             // This path (no CallKit) owns audio-session activation itself, so the
             // engine must be allowed to start. Restores availability in case a
             // prior CallKit call had gated it off.
-            _ = adm.setEngineAvailability(.default)
+            _ = adm?.setEngineAvailability(.default)
 
             // Stereo is listener-only and applies live. Cleared by stop()'s reset().
             if callAudioRole == .listener && enableStereo {
-                adm.setStereoPlayoutPreference(true)
+                adm?.setStereoPlayoutPreference(true)
             }
 
             let rtcConfig = makeAudioConfiguration(for: selectedOutput)
@@ -228,7 +251,7 @@ class StreamInCallManager: RCTEventEmitter {
                 #if DEBUG
                 NSLog("%@","[StreamInCallManager][wireEngineSubscription]")
                 #endif
-                engineSubscription = adm.publisher.sink { [weak self] event in
+                engineSubscription = adm?.publisher.sink { [weak self] event in
                     guard let self else { return }
                     self.audioSessionQueue.async {
                         switch event {
@@ -339,7 +362,7 @@ class StreamInCallManager: RCTEventEmitter {
             // session.setActive(true) here.
             do {
                 let adm = getAudioDeviceModule()
-                try adm.setPlayout(true)
+                try adm?.setPlayout(true)
                 self.log("adm.setPlayout(true) done")
             } catch {
                 // String(describing:) surfaces the real error code (see setup()).
@@ -357,7 +380,7 @@ class StreamInCallManager: RCTEventEmitter {
                 return
             }
             let adm = getAudioDeviceModule()
-            adm.reset()
+            adm?.reset()
             clearOutputRouting()
             // Deactivate directly: the .didDisableAudioEngine sink is async and we cancel it below.
             applyConfigForEngineDisable()
@@ -603,7 +626,10 @@ class StreamInCallManager: RCTEventEmitter {
     @objc(getAudioStateLog)
     func getAudioStateLog() -> String {
         let session = AVAudioSession.sharedInstance()
-        let adm = getAudioDeviceModule()
+        
+        guard let adm = getAudioDeviceModule() else {
+            return "No audio device module found"
+        }
         
         // WebRTC wraps AVAudioSession with RTCAudioSession; log its state as well.
         let rtcSession = RTCAudioSession.sharedInstance()
@@ -798,7 +824,11 @@ class StreamInCallManager: RCTEventEmitter {
                 stereoRefreshWorkItem?.cancel()
                 // Create a new debounced work item
                 let workItem = DispatchWorkItem { [weak self] in
-                    self?.getAudioDeviceModule().refreshStereoPlayoutState()
+                    guard let adm = self?.getAudioDeviceModule() else {
+                        self?.log("Audio device module is not ready")
+                        return
+                    }
+                    adm.refreshStereoPlayoutState()
                     self?.log("Executed debounced refreshStereoPlayoutState")
                 }
                 stereoRefreshWorkItem = workItem
@@ -863,12 +893,14 @@ class StreamInCallManager: RCTEventEmitter {
     }
 
     // MARK: - Helper Methods
-    private func getAudioDeviceModule() -> AudioDeviceModule {
+    private func getAudioDeviceModule() -> AudioDeviceModule? {
         guard let webrtcModule = moduleRegistry?.module(forName: "WebRTCModule") as? WebRTCModule else {
             fatalError("WebRTCModule is required but not registered with the module registry")
         }
 
-        return webrtcModule.audioDeviceModule
+        // Follow the live call's ADM; fall back to the default only when no call factory is
+        // active (bare-fork, or an in-call-manager op firing outside the join↔leave window).
+        return webrtcModule.currentAudioDeviceModuleOrNil()
     }
 
     private func getCurrentWindow() -> UIWindow? {

package/ios/TracksRecorder/RecorderVideoSink.swift

@@ -12,11 +12,21 @@ import WebRTC
 ///
 /// Each delivered `RTCVideoFrame` is normalised to a CVPixelBuffer in the
 /// hardware H.264 encoder's native format — **NV12**
-/// (`kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange`).
-/// `RTCCVPixelBuffer` sources (camera passthrough) are forwarded with
-/// the underlying pixel buffer unchanged. `RTCI420Buffer` and other YUV
-/// sources are converted into a fresh IOSurface-backed NV12 buffer via
-/// a plane reorder (no color-space conversion required).
+/// (`kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange`). One branch per
+/// buffer type `renderFrame` can be handed:
+///
+/// - `RTCCVPixelBuffer` (camera passthrough) already wraps a CVPixelBuffer,
+///   so the underlying buffer is forwarded unchanged.
+/// - `RTCNV12Buffer` already holds NV12 planes, but as raw pointers rather
+///   than a CVPixelBuffer, so the planes are copied row-wise into a fresh
+///   one. No format conversion. This is the buffer type decoded remote
+///   frames arrive as, so it is the hot path for loopback recording — do
+///   not remove it. Without it these frames fall through to `toI420()`
+///   below, which converts NV12 → I420 → NV12 and caps throughput at
+///   roughly half the source frame rate.
+/// - `RTCI420Buffer` (and anything else, via `toI420()`) is converted into
+///   a fresh IOSurface-backed NV12 buffer by interleaving the U and V
+///   planes — a plane reorder, no colour-space conversion.
 ///
 /// **Why NV12 and not BGRA?** AVAssetWriter's hardware encoder accepts
 /// both, but BGRA requires an internal colour-space conversion that
@@ -51,6 +61,8 @@ import WebRTC
         if let cvBuffer = frame.buffer as? RTCCVPixelBuffer {
             // Camera passthrough — already a CVPixelBuffer (typically NV12 on iOS).
             pixelBuffer = cvBuffer.pixelBuffer
+        } else if let nv12 = frame.buffer as? RTCNV12Buffer {
+            pixelBuffer = Self.makeNV12PixelBuffer(fromNV12: nv12)
         } else if let i420 = frame.buffer as? RTCI420Buffer {
             pixelBuffer = Self.makeNV12PixelBuffer(fromI420: i420)
         } else {
@@ -67,6 +79,81 @@ import WebRTC
         frameHandler(outputBuffer, frame.width, frame.height, frame.timeStampNs)
     }
 
+    private static func makeNV12PixelBuffer(fromNV12 nv12: RTCNV12Buffer) -> CVPixelBuffer? {
+        let width = Int(nv12.width)
+        let height = Int(nv12.height)
+        let chromaWidth = Int(nv12.chromaWidth)
+        let chromaHeight = Int(nv12.chromaHeight)
+
+        guard let buffer = makePixelBuffer(width: width, height: height) else { return nil }
+
+        CVPixelBufferLockBaseAddress(buffer, [])
+        defer { CVPixelBufferUnlockBaseAddress(buffer, []) }
+
+        guard let yDest = CVPixelBufferGetBaseAddressOfPlane(buffer, 0) else { return nil }
+        copyPlane(
+            source: UnsafeRawPointer(nv12.dataY),
+            sourceStride: Int(nv12.strideY),
+            destination: yDest,
+            destinationStride: CVPixelBufferGetBytesPerRowOfPlane(buffer, 0),
+            rowBytes: width,
+            rows: height
+        )
+
+        // Plane 1: UV — already interleaved, so two bytes per chroma sample.
+        guard let uvDest = CVPixelBufferGetBaseAddressOfPlane(buffer, 1) else { return nil }
+        copyPlane(
+            source: UnsafeRawPointer(nv12.dataUV),
+            sourceStride: Int(nv12.strideUV),
+            destination: uvDest,
+            destinationStride: CVPixelBufferGetBytesPerRowOfPlane(buffer, 1),
+            rowBytes: chromaWidth * 2,
+            rows: chromaHeight
+        )
+
+        return buffer
+    }
+
+    private static func makePixelBuffer(width: Int, height: Int) -> CVPixelBuffer? {
+        var pixelBuffer: CVPixelBuffer?
+        let attrs: [String: Any] = [
+            kCVPixelBufferIOSurfacePropertiesKey as String: [:] as [String: Any],
+        ]
+        let status = CVPixelBufferCreate(
+            kCFAllocatorDefault,
+            width,
+            height,
+            kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange,
+            attrs as CFDictionary,
+            &pixelBuffer
+        )
+        guard status == kCVReturnSuccess else { return nil }
+        return pixelBuffer
+    }
+
+    /// Row-wise copy, collapsing to a single `memcpy` when the strides match.
+    private static func copyPlane(
+        source: UnsafeRawPointer,
+        sourceStride: Int,
+        destination: UnsafeMutableRawPointer,
+        destinationStride: Int,
+        rowBytes: Int,
+        rows: Int
+    ) {
+        if sourceStride == destinationStride && sourceStride == rowBytes {
+            memcpy(destination, source, rowBytes * rows)
+            return
+        }
+        let copyBytes = min(rowBytes, min(sourceStride, destinationStride))
+        for row in 0..<rows {
+            memcpy(
+                destination.advanced(by: row * destinationStride),
+                source.advanced(by: row * sourceStride),
+                copyBytes
+            )
+        }
+    }
+
     // MARK: - I420 → NV12
 
     /// Allocates a fresh IOSurface-backed NV12 `CVPixelBuffer` and copies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -52,8 +52,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.57.0",
-    "@stream-io/video-react-bindings": "1.19.2",
+    "@stream-io/video-client": "1.59.0",
+    "@stream-io/video-react-bindings": "1.20.1",
     "intl-pluralrules": "2.0.1",
     "react-native-url-polyfill": "^3.0.0",
     "rxjs": "~7.8.2",
@@ -65,7 +65,7 @@
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/noise-cancellation-react-native": ">=0.1.0",
     "@stream-io/react-native-callingx": ">=0.1.0",
-    "@stream-io/react-native-webrtc": "^145.2.0",
+    "@stream-io/react-native-webrtc": "^145.3.1",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
     "expo-notifications": "*",
@@ -117,11 +117,11 @@
     "@react-native/babel-preset": "0.86.2",
     "@react-native/jest-preset": "0.86.2",
     "@react-native/metro-config": "0.86.2",
-    "@stream-io/noise-cancellation-react-native": "^0.10.0",
-    "@stream-io/react-native-callingx": "^0.9.0",
-    "@stream-io/react-native-webrtc": "145.2.0",
+    "@stream-io/noise-cancellation-react-native": "^0.11.0",
+    "@stream-io/react-native-callingx": "^0.11.0",
+    "@stream-io/react-native-webrtc": "145.3.1",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-filters-react-native": "^0.15.0",
+    "@stream-io/video-filters-react-native": "^0.16.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.6",

package/src/components/Call/CallControls/internal/ReactionsPicker.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import {
-  type SendReactionRequest,
+  type SendVideoReactionRequest,
   videoLoggerSystem,
 } from '@stream-io/video-client';
 import { ComponentTestIds } from '../../../../constants/TestIds';
@@ -82,7 +82,7 @@ export const ReactionsPicker = ({
     left: reactionsButtonLayoutRectangle?.x,
   };
 
-  const onClose = (reaction?: SendReactionRequest) => {
+  const onClose = (reaction?: SendVideoReactionRequest) => {
     if (reaction) {
       call?.sendReaction(reaction).catch((e) => {
         const logger = videoLoggerSystem.getLogger('ReactionsPicker');

package/src/components/Call/Lobby/Lobby.tsx

@@ -7,9 +7,8 @@ import {
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../../utility/Avatar';
 import type { StreamVideoParticipant } from '@stream-io/video-client';
-import type { MediaStream } from '@stream-io/react-native-webrtc';
-import { RTCView } from '@stream-io/react-native-webrtc';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
+import { LobbyCameraPreview } from './LobbyCameraPreview';
 import {
   JoinCallButton as DefaultJoinCallButton,
   type JoinCallButtonProps,
@@ -65,9 +64,8 @@ export const Lobby = ({
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
-  const { isMute: cameraIsMuted, mediaStream } = useCameraState();
+  const { optimisticIsMute: cameraIsMuted } = useCameraState();
   const { t } = useI18n();
-  const localVideoStream = mediaStream as unknown as MediaStream | undefined;
 
   const connectedUserAsParticipant = useMemo(
     () =>
@@ -98,13 +96,8 @@ export const Lobby = ({
               ]}
             >
               <View style={styles.topView} />
-              {!cameraIsMuted && localVideoStream ? (
-                <RTCView
-                  mirror={true}
-                  streamURL={localVideoStream.toURL()}
-                  objectFit="cover"
-                  style={StyleSheet.absoluteFill}
-                />
+              {!cameraIsMuted ? (
+                <LobbyCameraPreview objectFit="cover" />
               ) : (
                 <View style={[styles.avatarContainer, lobby.avatarContainer]}>
                   <Avatar participant={connectedUserAsParticipant} />

package/src/components/Call/Lobby/LobbyCameraPreview.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, StyleSheet, ViewStyle } from 'react-native';
+import {
+  permissions,
+  RTCCameraPreviewView,
+} from '@stream-io/react-native-webrtc';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the {@link LobbyCameraPreview} component.
+ */
+export type LobbyCameraPreviewProps = {
+  /**
+   * Resembles the CSS style object-fit.
+   *
+   * @default 'cover'
+   */
+  objectFit?: 'contain' | 'cover';
+  /**
+   * Style applied to the preview view.
+   */
+  style?: ViewStyle;
+};
+
+/**
+ * The lobby runs before the call is joined. This component drives the native
+ * camera capturer directly via {@link RTCCameraPreviewView} which requires
+ * no track/peer connection factory to be created.
+ *
+ * It is driven by the *intended* camera state (optimistic): the lobby camera
+ * toggle only updates `optimisticStatus`; the real WebRTC track is acquired and
+ * published at join.
+ */
+export const LobbyCameraPreview = ({
+  style,
+  objectFit = 'cover',
+}: LobbyCameraPreviewProps) => {
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+
+  const { optimisticIsMute, direction, selectedDevice } = useCameraState();
+  const settings = useCallSettings();
+
+  const wantsCamera = !optimisticIsMute;
+  const hasCameraPermission = useEnsureCameraPermission(wantsCamera);
+
+  const facing = direction === 'back' ? 'back' : 'front';
+
+  // Capture at the call's target resolution so the running preview capturer matches
+  // what the track publishes and can be adopted at join without reconfiguring.
+  // Normalize to landscape, matching CameraManager.selectTargetResolution.
+  const targetResolution = settings?.video.target_resolution;
+  let captureWidth = targetResolution?.width ?? 1280;
+  let captureHeight = targetResolution?.height ?? 720;
+  if (captureWidth < captureHeight) {
+    [captureWidth, captureHeight] = [captureHeight, captureWidth];
+  }
+
+  return (
+    <RTCCameraPreviewView
+      style={[StyleSheet.absoluteFill, style as any]}
+      isActive={wantsCamera && hasCameraPermission}
+      facing={facing}
+      deviceId={selectedDevice}
+      mirror={Platform.OS === 'ios' ? true : facing === 'front'}
+      objectFit={objectFit}
+      captureWidth={captureWidth}
+      captureHeight={captureHeight}
+    />
+  );
+};
+
+const useEnsureCameraPermission = (enabled: boolean): boolean => {
+  const [granted, setGranted] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || granted) return;
+
+    let cancelled = false;
+    (async () => {
+      try {
+        const status = await permissions.query({ name: 'camera' });
+        if (status === 'granted') {
+          if (!cancelled) setGranted(true);
+          return;
+        }
+        const result = await permissions.request({ name: 'camera' });
+        if (!cancelled) setGranted(!!result);
+      } catch {
+        if (!cancelled) setGranted(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, granted]);
+
+  return granted;
+};

package/src/components/Call/Lobby/index.ts

@@ -1,3 +1,4 @@
 export * from './Lobby';
+export * from './LobbyCameraPreview';
 export * from './JoinCallButton';
 export * from './LobbyFooter';

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

@@ -1,5 +1,4 @@
-import { forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
-import { LayoutChangeEvent } from 'react-native';
+import { useEffect } from 'react';
 import {
   Call,
   CallingState,
@@ -18,15 +17,17 @@ import {
   filter,
   map,
 } from 'rxjs';
-export type TrackSubscriberHandle = {
-  onLayoutUpdate: (event: LayoutChangeEvent) => void;
-};
 
 type TrackSubscriberProps = {
   participantSessionId: string;
   call: Call;
   trackType: VideoTrackType;
   isVisible: boolean;
+  /**
+   * The dimensions of the view rendering the track, owned by the parent so that
+   * the last reported layout survives a remount of this component.
+   */
+  dimensions$: BehaviorSubject<SfuModels.VideoDimension | undefined>;
 };
 
 /**
@@ -40,81 +41,61 @@ type TrackSubscriberProps = {
  * 1. When the participant stops publishing the video track
  * 2. When the participant becomes invisible
 */
-const TrackSubscriber = forwardRef<TrackSubscriberHandle, TrackSubscriberProps>(
-  (props, ref) => {
-    const { call, participantSessionId, trackType, isVisible } = props;
-    const dimensions$ = useMemo(() => {
-      return new BehaviorSubject<SfuModels.VideoDimension | undefined>(
-        undefined,
-      );
-    }, []);
-
-    useEffect(() => {
-      const requestTrackWithDimensions = (
-        debounceType: DebounceType,
-        dimension: SfuModels.VideoDimension | undefined,
-      ) => {
-        if (dimension && (dimension.width === 0 || dimension.height === 0)) {
-          // ignore 0x0 dimensions. this can happen when the video element
-          // is not visible (e.g., has display: none).
-          // we treat this as "unsubscription" as we don't want to keep
-          // consuming bandwidth for a video that is not visible on the screen.
-          dimension = undefined;
-        }
-        call.state.updateParticipantTracks(trackType, {
-          [participantSessionId]: { dimension },
-        });
-        call.trackSubscriptionManager.apply(debounceType);
-      };
-      const isPublishingTrack$ = call.state.participants$.pipe(
-        map((ps) => ps.find((p) => p.sessionId === participantSessionId)),
-        filter((p): p is StreamVideoParticipant => !!p),
-        distinctUntilKeyChanged('publishedTracks'),
-        map((p) =>
-          trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p),
-        ),
-        distinctUntilChanged(),
-      );
-      const isJoinedState$ = call.state.callingState$.pipe(
-        map((callingState) => callingState === CallingState.JOINED),
-      );
+const TrackSubscriber = (props: TrackSubscriberProps) => {
+  const { call, participantSessionId, trackType, isVisible, dimensions$ } =
+    props;
 
-      const subscription = combineLatest([
-        dimensions$,
-        isPublishingTrack$,
-        isJoinedState$,
-      ]).subscribe(([dimension, isPublishing, isJoined]) => {
-        if (isJoined) {
-          if (!isVisible || !isPublishing) {
-            requestTrackWithDimensions(DebounceType.MEDIUM, undefined);
-          } else if (dimension) {
-            requestTrackWithDimensions(DebounceType.IMMEDIATE, dimension);
-          }
-        }
+  useEffect(() => {
+    const requestTrackWithDimensions = (
+      debounceType: DebounceType,
+      dimension: SfuModels.VideoDimension | undefined,
+    ) => {
+      if (dimension && (dimension.width === 0 || dimension.height === 0)) {
+        // ignore 0x0 dimensions. this can happen when the video element
+        // is not visible (e.g., has display: none).
+        // we treat this as "unsubscription" as we don't want to keep
+        // consuming bandwidth for a video that is not visible on the screen.
+        dimension = undefined;
+      }
+      call.state.updateParticipantTracks(trackType, {
+        [participantSessionId]: { dimension },
       });
+      call.trackSubscriptionManager.apply(debounceType);
+    };
+    const isPublishingTrack$ = call.state.participants$.pipe(
+      map((ps) => ps.find((p) => p.sessionId === participantSessionId)),
+      filter((p): p is StreamVideoParticipant => !!p),
+      distinctUntilKeyChanged('publishedTracks'),
+      map((p) =>
+        trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p),
+      ),
+      distinctUntilChanged(),
+    );
+    const isJoinedState$ = call.state.callingState$.pipe(
+      map((callingState) => callingState === CallingState.JOINED),
+    );
 
-      return () => {
-        subscription.unsubscribe();
-      };
-    }, [call, participantSessionId, trackType, isVisible, dimensions$]);
+    const subscription = combineLatest([
+      dimensions$,
+      isPublishingTrack$,
+      isJoinedState$,
+    ]).subscribe(([dimension, isPublishing, isJoined]) => {
+      if (isJoined) {
+        if (!isVisible || !isPublishing) {
+          requestTrackWithDimensions(DebounceType.MEDIUM, undefined);
+        } else if (dimension) {
+          requestTrackWithDimensions(DebounceType.IMMEDIATE, dimension);
+        }
+      }
+    });
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        onLayoutUpdate: (event) => {
-          const dimension = {
-            width: Math.trunc(event.nativeEvent.layout.width),
-            height: Math.trunc(event.nativeEvent.layout.height),
-          };
-          dimensions$.next(dimension);
-        },
-      }),
-      [dimensions$],
-    );
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [call, participantSessionId, trackType, isVisible, dimensions$]);
 
-    return null;
-  },
-);
+  return null;
+};
 
 TrackSubscriber.displayName = 'TrackSubscriber';
 

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { LayoutChangeEvent, Platform, StyleSheet, View } from 'react-native';
 import type { MediaStream } from '@stream-io/react-native-webrtc';
 import { RTCView } from '@stream-io/react-native-webrtc';
 import type { ParticipantViewProps } from '../ParticipantView';
@@ -7,15 +7,17 @@ import {
   hasPausedTrack,
   hasScreenShare,
   hasVideo,
+  SfuModels,
   type VideoTrackType,
   VisibilityState,
 } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { BehaviorSubject } from 'rxjs';
 import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from '../ParticipantVideoFallback';
 import { useTheme } from '../../../../contexts/ThemeContext';
 import { useTrackDimensions } from '../../../../hooks/useTrackDimensions';
 import { useScreenshotIosContext } from '../../../../contexts/internal/ScreenshotIosContext';
-import TrackSubscriber, { TrackSubscriberHandle } from './TrackSubscriber';
+import TrackSubscriber from './TrackSubscriber';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -59,7 +61,13 @@ export const VideoRenderer = React.memo(
     } = useTheme();
     const call = useCall();
     const { useCameraState, useIncomingVideoSettings } = useCallStateHooks();
-    const trackSubscriberRef = useRef<TrackSubscriberHandle>(null);
+    // a sticky note of the dimensions of the RTCView from onLayout
+    // to reuse for a new participant even if dimensions dont change
+    const dimensions$ = useMemo(
+      () =>
+        new BehaviorSubject<SfuModels.VideoDimension | undefined>(undefined),
+      [],
+    );
     const { isParticipantVideoEnabled } = useIncomingVideoSettings();
     const { direction } = useCameraState();
     const viewRef = useRef(null);
@@ -199,9 +207,12 @@ export const VideoRenderer = React.memo(
     ]);
 
     const onLayout: React.ComponentProps<typeof RTCView>['onLayout'] = (
-      event,
+      event: LayoutChangeEvent,
     ) => {
-      trackSubscriberRef.current?.onLayoutUpdate(event);
+      dimensions$.next({
+        width: Math.trunc(event.nativeEvent.layout.width),
+        height: Math.trunc(event.nativeEvent.layout.height),
+      });
     };
 
     return (
@@ -211,11 +222,11 @@ export const VideoRenderer = React.memo(
       >
         {call && !isLocalParticipant && (
           <TrackSubscriber
-            ref={trackSubscriberRef}
             call={call}
             participantSessionId={sessionId}
             trackType={trackType}
             isVisible={isVisible}
+            dimensions$={dimensions$}
           />
         )}
         {canShowVideo &&