@stream-io/video-react-native-sdk 1.45.1 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.45.1",
+  "version": "1.46.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.59.1",
-    "@stream-io/video-react-bindings": "1.20.2",
+    "@stream-io/video-client": "1.61.0",
+    "@stream-io/video-react-bindings": "1.20.4",
     "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.3.1",
+    "@stream-io/react-native-webrtc": "^145.4.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.11.0",
-    "@stream-io/react-native-callingx": "^0.11.3",
-    "@stream-io/react-native-webrtc": "145.3.1",
+    "@stream-io/noise-cancellation-react-native": "^0.11.1",
+    "@stream-io/react-native-callingx": "^0.11.5",
+    "@stream-io/react-native-webrtc": "145.4.1",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-filters-react-native": "^0.16.0",
+    "@stream-io/video-filters-react-native": "^0.16.2",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.6",

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

@@ -267,7 +267,7 @@ export const CallContent = ({
 
   return (
     <>
-      {!disablePictureInPicture && (
+      {Platform.OS === 'ios' && !disablePictureInPicture && (
         <RTCViewPipIOS
           includeLocalParticipantVideo={iOSPiPIncludeLocalParticipantVideo}
           mirror={mirror}

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

@@ -1,4 +1,5 @@
 import {
+  type Call,
   CallingState,
   SfuModels,
   hasAudio,
@@ -12,17 +13,35 @@ import {
 } 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, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useRef, useState } from 'react';
 import { findNodeHandle } from 'react-native';
 import {
   onNativeCallClosed,
   onNativeDimensionsUpdated,
+  type PiPBoundsChangeEvent,
+  type PiPChangeEvent,
   RTCViewPipNative,
 } from './RTCViewPipNative';
-import { debounceTime } from 'rxjs';
+import { BehaviorSubject, debounceTime } from 'rxjs';
 import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
 import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
 import { isInPiPMode$ } from '../../../utils/internal/rxSubjects';
+import TrackSubscriber from '../../Participant/ParticipantView/VideoRenderer/TrackSubscriber';
+
+// One native view per Call instance. React Native drops the events of an
+// unmounted view, so an event the previous call's controller queued before
+// the replacement cannot reach the view of its successor.
+const nativeViewKeys = new WeakMap<Call, number>();
+let nextNativeViewKey = 0;
+const nativeViewKeyOf = (call: Call | undefined) => {
+  if (!call) return 0;
+  let key = nativeViewKeys.get(call);
+  if (key === undefined) {
+    key = ++nextNativeViewKey;
+    nativeViewKeys.set(call, key);
+  }
+  return key;
+};
 
 type Props = {
   includeLocalParticipantVideo?: boolean;
@@ -52,6 +71,39 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     StreamVideoParticipant[]
   >(call?.state.participants ?? []);
 
+  // bounds of the native window, in logical points. While the window is on
+  // screen they are the demand of the track it renders.
+  const [pipDimensions$] = useState(
+    () => new BehaviorSubject<SfuModels.VideoDimension | undefined>(undefined),
+  );
+  const [isPipActive, setIsPipActive] = useState(false);
+  // synchronous mirror of isPipActive: native may emit the same lifecycle
+  // state twice (e.g. failedToStart after didStop) before React re-renders.
+  const isPipActiveRef = useRef(false);
+  // set once the call is closed: later native events describe a disposed window.
+  const isClosedRef = useRef(false);
+  // the handlers below are bound to the view they were rendered for; an event
+  // of a replaced view is rejected even if it were delivered.
+  const nativeViewKey = nativeViewKeyOf(call);
+  const activeNativeViewKeyRef = useRef(nativeViewKey);
+  useEffect(() => {
+    activeNativeViewKeyRef.current = nativeViewKey;
+  }, [nativeViewKey]);
+  const isStaleNativeEvent = () =>
+    isClosedRef.current || nativeViewKey !== activeNativeViewKeyRef.current;
+  const onPiPChangeRef = useRef(onPiPChange);
+  useEffect(() => {
+    onPiPChangeRef.current = onPiPChange;
+  }, [onPiPChange]);
+
+  const updatePipState = useCallback((active: boolean) => {
+    if (isPipActiveRef.current === active) return;
+    isPipActiveRef.current = active;
+    setIsPipActive(active);
+    isInPiPMode$.next(active);
+    onPiPChangeRef.current?.(active);
+  }, []);
+
   // we debounce the participants to avoid unnecessary rerenders
   // that happen when participant tracks are all subscribed simultaneously
   useEffect(() => {
@@ -86,17 +138,19 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
   const nativeRef = React.useRef<any>(null);
 
   React.useEffect(() => {
-    let callClosedInvokedOnce = false;
+    const node = findNodeHandle(nativeRef.current);
+    isClosedRef.current = false;
     const onCallClosed = () => {
-      if (callClosedInvokedOnce) {
+      if (isClosedRef.current) {
         return;
       }
-      callClosedInvokedOnce = true;
-      const node = findNodeHandle(nativeRef.current);
+      isClosedRef.current = true;
       if (node !== null) {
         onNativeCallClosed(node);
       }
       shouldDisableIOSLocalVideoOnBackgroundRef.current = true;
+      pipDimensions$.next(undefined);
+      updatePipState(false);
     };
     const unsubFunc = call?.on('call.ended', () => {
       videoLoggerSystem
@@ -117,7 +171,7 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
       unsubFunc?.();
       subscription?.unsubscribe();
     };
-  }, [call]);
+  }, [call, pipDimensions$, updatePipState]);
 
   const onDimensionsUpdated = useCallback((width: number, height: number) => {
     const node = findNodeHandle(nativeRef.current);
@@ -150,9 +204,17 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
       ? mirrorOverride
       : !!participantInSpotlight?.isLocalParticipant && direction === 'front';
 
-  const handlePiPChange = (event: { nativeEvent: { active: boolean } }) => {
-    isInPiPMode$.next(event.nativeEvent.active);
-    onPiPChange?.(event.nativeEvent.active);
+  const handlePiPChange = (event: { nativeEvent: PiPChangeEvent }) => {
+    if (isStaleNativeEvent()) return;
+    updatePipState(event.nativeEvent.active);
+  };
+
+  const handlePiPBoundsChange = (event: {
+    nativeEvent: PiPBoundsChangeEvent;
+  }) => {
+    if (isStaleNativeEvent()) return;
+    const { width, height } = event.nativeEvent;
+    pipDimensions$.next({ width, height });
   };
 
   // Get participant info for avatar placeholder
@@ -193,13 +255,23 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     participantInSpotlight?.connectionQuality ??
     SfuModels.ConnectionQuality.UNSPECIFIED;
 
+  // while the native window is on screen, its bounds - and not the hidden
+  // inline layout behind it - are the demand of the track it renders. The local
+  // preview is never subscribed to.
+  const pipTrackOwner =
+    isPipActive && participantInSpotlight?.isLocalParticipant !== true
+      ? participantInSpotlight
+      : undefined;
+
   return (
     <>
       <RTCViewPipNative
+        key={nativeViewKey}
         streamURL={streamURL}
         mirror={mirror}
         ref={nativeRef}
         onPiPChange={handlePiPChange}
+        onPiPBoundsChange={handlePiPBoundsChange}
         participantName={participantName}
         participantImageURL={participantImageURL}
         isReconnecting={isReconnecting}
@@ -210,6 +282,16 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
         isSpeaking={participantIsSpeaking}
         connectionQuality={participantConnectionQuality}
       />
+      {pipTrackOwner && call && (
+        <TrackSubscriber
+          call={call}
+          participantSessionId={pipTrackOwner.sessionId}
+          trackType={trackType}
+          isVisible={true}
+          dimensions$={pipDimensions$}
+          isPipWriter
+        />
+      )}
       {participantInSpotlight && (
         <DimensionsUpdatedRenderless
           participant={participantInSpotlight}

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

@@ -14,10 +14,21 @@ export type PiPChangeEvent = {
   active: boolean;
 };
 
+export type PiPBoundsChangeEvent = {
+  /** the laid out width of the native window, in logical points */
+  width: number;
+  /** the laid out height of the native window, in logical points */
+  height: number;
+};
+
 type RTCViewPipNativeProps = {
   streamURL?: string;
   mirror?: boolean;
   onPiPChange?: (event: { nativeEvent: PiPChangeEvent }) => void;
+  /**
+   * Reports the actual laid out bounds of the native Picture in Picture window.
+   */
+  onPiPBoundsChange?: (event: { nativeEvent: PiPBoundsChangeEvent }) => void;
   /** The participant's name for the avatar placeholder when video is disabled */
   participantName?: string;
   /** The URL string for the participant's profile image */
@@ -84,6 +95,8 @@ export const RTCViewPipNative = React.memo(
         // eslint-disable-next-line react/prop-types
         onPiPChange={props.onPiPChange}
         // eslint-disable-next-line react/prop-types
+        onPiPBoundsChange={props.onPiPBoundsChange}
+        // eslint-disable-next-line react/prop-types
         participantName={props.participantName}
         // eslint-disable-next-line react/prop-types
         participantImageURL={props.participantImageURL}

package/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -3,12 +3,12 @@ import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
 import { UserInfo } from './UserInfo';
 import { Z_INDEX } from '../../../constants';
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import { MediaStream, RTCView } from '@stream-io/react-native-webrtc';
 import { useTheme } from '../../../contexts/ThemeContext';
 import {
   OutgoingCallControls as DefaultOutgoingCallControls,
   type OutgoingCallControlsProps,
 } from '../CallControls';
+import { LobbyCameraPreview } from '../Lobby';
 
 /**
  * Props for the OutgoingCall Component.
@@ -107,11 +107,9 @@ const Background = () => {
     theme: { colors, outgoingCall },
   } = useTheme();
   const { useCameraState } = useCallStateHooks();
-  const { isMute, camera } = useCameraState();
-  const localVideoStream = camera.state.mediaStream as unknown as
-    MediaStream | undefined;
+  const { optimisticIsMute } = useCameraState();
 
-  if (isMute || !localVideoStream) {
+  if (optimisticIsMute) {
     return (
       <View
         style={[
@@ -130,13 +128,7 @@ const Background = () => {
         outgoingCall.background,
       ]}
     >
-      <RTCView
-        streamURL={localVideoStream.toURL()}
-        zOrder={Z_INDEX.IN_BACK}
-        style={StyleSheet.absoluteFill}
-        mirror
-        objectFit="cover"
-      />
+      <LobbyCameraPreview />
     </View>
   );
 };

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { Platform } from 'react-native';
 import {
   Call,
   CallingState,
@@ -16,7 +17,12 @@ import {
   distinctUntilKeyChanged,
   filter,
   map,
+  of,
 } from 'rxjs';
+import {
+  getIosPipTrack$,
+  setIosPipTrack,
+} from '../../../../utils/internal/iosPipTrack';
 
 type TrackSubscriberProps = {
   participantSessionId: string;
@@ -28,6 +34,13 @@ type TrackSubscriberProps = {
    * the last reported layout survives a remount of this component.
    */
   dimensions$: BehaviorSubject<SfuModels.VideoDimension | undefined>;
+  /**
+   * Set by the native iOS Picture in Picture window, whose bounds this
+   * subscriber requests. While it does, the inline views of the same track
+   * stop requesting their own, hidden layout. Only rendered on iOS; on other
+   * platforms the gate is always open.
+   */
+  isPipWriter?: boolean;
 };
 
 /**
@@ -40,10 +53,20 @@ type TrackSubscriberProps = {
  * This component is used to unsubscribe to video track and subscribe only to the audio track of the participant (by passing undefined dimensions) in the following cases:
  * 1. When the participant stops publishing the video track
  * 2. When the participant becomes invisible
+ *
+ * The same component serves the native iOS Picture in Picture window, which
+ * renders one of the tracks too. Its bounds take precedence over the inline
+ * views of that track for as long as it is on screen.
 */
 const TrackSubscriber = (props: TrackSubscriberProps) => {
-  const { call, participantSessionId, trackType, isVisible, dimensions$ } =
-    props;
+  const {
+    call,
+    participantSessionId,
+    trackType,
+    isVisible,
+    dimensions$,
+    isPipWriter,
+  } = props;
 
   useEffect(() => {
     const requestTrackWithDimensions = (
@@ -75,12 +98,28 @@ const TrackSubscriber = (props: TrackSubscriberProps) => {
       map((callingState) => callingState === CallingState.JOINED),
     );
 
+    const trackKey = { sessionId: participantSessionId, trackType };
+    const pipTrack$ = Platform.OS === 'ios' ? getIosPipTrack$(call) : undefined;
+    if (isPipWriter && pipTrack$) setIosPipTrack(call, trackKey);
+    const canWrite$ = pipTrack$
+      ? pipTrack$.pipe(
+          map((track) => {
+            const sameTrack =
+              track?.sessionId === participantSessionId &&
+              track?.trackType === trackType;
+            return isPipWriter ? sameTrack : !sameTrack;
+          }),
+          distinctUntilChanged(),
+        )
+      : of(true);
+
     const subscription = combineLatest([
       dimensions$,
       isPublishingTrack$,
       isJoinedState$,
-    ]).subscribe(([dimension, isPublishing, isJoined]) => {
-      if (isJoined) {
+      canWrite$,
+    ]).subscribe(([dimension, isPublishing, isJoined, canWrite]) => {
+      if (isJoined && canWrite) {
         if (!isVisible || !isPublishing) {
           requestTrackWithDimensions(DebounceType.MEDIUM, undefined);
         } else if (dimension) {
@@ -91,8 +130,22 @@ const TrackSubscriber = (props: TrackSubscriberProps) => {
 
     return () => {
       subscription.unsubscribe();
+      if (isPipWriter && pipTrack$) {
+        // Let sibling inline views finish unmounting before handing back demand.
+        queueMicrotask(() => {
+          if (pipTrack$.getValue() === trackKey)
+            setIosPipTrack(call, undefined);
+        });
+      }
     };
-  }, [call, participantSessionId, trackType, isVisible, dimensions$]);
+  }, [
+    call,
+    participantSessionId,
+    trackType,
+    isVisible,
+    dimensions$,
+    isPipWriter,
+  ]);
 
   return null;
 };

package/src/index.ts

@@ -36,6 +36,11 @@ export * from './modules/call-manager';
 // Explicitly re-exporting to resolve ambiguity.
 export { StreamVideo } from './providers/StreamVideo';
 export { StreamCall } from './providers/StreamCall';
+// Overriding 'EncryptionManager' from '@stream-io/video-client' with the React
+// Native implementation, which is backed by the native WebRTC transform. React
+// Native Web is not supported: `isSupported()` returns false there rather than
+// falling back to the web manager.
+export { EncryptionManager } from './modules/encryption';
 export * from './providers/NoiseCancellation';
 
 setClientDetails();