@stream-io/video-react-native-sdk 2.0.0-beta.1 → 2.0.0-beta.2

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/Lobby/JoinCallButton.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { type LobbyProps } from './Lobby';
 import { Pressable, StyleSheet, Text } from 'react-native';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { videoLoggerSystem } from '@stream-io/video-client';
 
@@ -64,7 +65,9 @@ export const JoinCallButton = ({
           joinCallButton.label,
         ]}
       >
-        {isLoading ? t('Joining...') : t('Join')}
+        {isLoading
+          ? t('common.joining.text', 'Joining...')
+          : t('common.join.label', 'Join')}
       </Text>
     </Pressable>
   );

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

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
-  useI18n,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { Avatar } from '../../utility/Avatar';
 import type { StreamVideoParticipant } from '@stream-io/video-client';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
@@ -82,10 +82,13 @@ export const Lobby = ({
       {connectedUser && (
         <>
           <Text style={[styles.heading, typefaces.heading5, lobby.heading]}>
-            {t('Before joining')}
+            {t('lobby.beforeJoining.title', 'Before joining')}
           </Text>
           <Text style={[styles.subHeading, lobby.subHeading]}>
-            {t('Setup your audio and video')}
+            {t(
+              'lobby.setupAudioVideo.description',
+              'Setup your audio and video',
+            )}
           </Text>
           {isVideoEnabledInCall && (
             <View

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

@@ -2,7 +2,8 @@ import React, { useMemo } from 'react';
 import { type LobbyProps } from './Lobby';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { Lock } from '../../../icons/Lock';
 
 /**
@@ -31,15 +32,17 @@ export const LobbyFooter = ({
 
   const participantsText = useMemo(() => {
     if (!numberOfParticipants) {
-      return t('Currently there are no other participants in the call.');
+      return t(
+        'lobby.footer.noOtherParticipants.text',
+        'Currently there are no other participants in the call.',
+      );
     }
-    if (numberOfParticipants === 1) {
-      return t('There is {{numberOfParticipants}} more person in the call.', {
-        numberOfParticipants,
-      });
-    }
-    return t('There are {{numberOfParticipants}} more people in the call.', {
-      numberOfParticipants,
+    // i18next picks the singular/plural form for the active language via
+    // Intl.PluralRules, so no `=== 1` branch is needed here.
+    return t('lobby.footer.otherParticipants.text', {
+      count: numberOfParticipants,
+      defaultValue_one: 'There is {{ count }} more person in the call.',
+      defaultValue_other: 'There are {{ count }} more people in the call.',
     });
   }, [numberOfParticipants, t]);
 
@@ -56,7 +59,9 @@ export const LobbyFooter = ({
             lobby.infoText,
           ]}
         >
-          {t('You are about to join a call.') + ' ' + participantsText}
+          {t('lobby.footer.aboutToJoin.text', 'You are about to join a call.') +
+            ' ' +
+            participantsText}
         </Text>
       </View>
       {JoinCallButton && (

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

@@ -1,4 +1,4 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import React from 'react';
 import {
   TextBasedIndicator,
@@ -14,7 +14,7 @@ export const CallLeftIndicator = (props: CallLeftIndicatorProps) => {
   const { t } = useI18n();
   return (
     <TextBasedIndicator
-      text={t('You have left the call')}
+      text={t('ringingCall.leftCall.title', 'You have left the call')}
       onBackPress={props.onBackPress}
     />
   );

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

@@ -1,4 +1,4 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import React from 'react';
 import {
   TextBasedIndicator,
@@ -14,7 +14,7 @@ export const CallPreparingIndicator = (props: CallPreparingIndicatorProps) => {
   const { t } = useI18n();
   return (
     <TextBasedIndicator
-      text={t('Preparing call')}
+      text={t('ringingCall.preparing.title', 'Preparing call')}
       onBackPress={props.onBackPress}
     />
   );

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

@@ -3,8 +3,8 @@ import { Image, StyleSheet, Text, View, type ViewStyle } from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
-  useI18n,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { UserInfo } from './UserInfo';
 import {
   IncomingCallControls as DefaultIncomingCallControls,
@@ -73,7 +73,7 @@ export const IncomingCall = ({
               incomingCall.incomingCallText,
             ]}
           >
-            {t('Incoming Call...')}
+            {t('ringingCall.incoming.title', 'Incoming Call...')}
           </Text>
         </View>
         <View style={[styles.bottomContainer, incomingCall.bottomContainer]}>

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

@@ -2,13 +2,14 @@ import React from 'react';
 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 { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { useTheme } from '../../../contexts/ThemeContext';
 import {
   OutgoingCallControls as DefaultOutgoingCallControls,
   type OutgoingCallControlsProps,
 } from '../CallControls';
+import { LobbyCameraPreview } from '../Lobby';
 
 /**
  * Props for the OutgoingCall Component.
@@ -77,7 +78,7 @@ export const OutgoingCall = ({
                 outgoingCall.callingText,
               ]}
             >
-              {t('Calling...')}
+              {t('ringingCall.outgoing.title', 'Calling...')}
             </Text>
           </View>
           <View style={[styles.bottomContainer, outgoingCall.bottomContainer]}>
@@ -107,11 +108,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 +129,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/Livestream/LivestreamControls/HostStartStreamButton.tsx

@@ -1,8 +1,5 @@
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import React, { useState } from 'react';
 import {
   ActivityIndicator,
@@ -149,10 +146,10 @@ export const HostStartStreamButton = ({
         ]}
       >
         {isAwaitingResponse
-          ? t('Loading...')
+          ? t('common.loading.text', 'Loading...')
           : liveOrBroadcasting
-            ? t('Stop Livestream')
-            : t('Start Livestream')}
+            ? t('livestreamControls.stop.label', 'Stop Livestream')
+            : t('livestreamControls.start.label', 'Start Livestream')}
       </Text>
     </Pressable>
   );

package/src/components/Livestream/LivestreamPlayer/LivestreamEnded.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { useTheme } from '../../../contexts';
 import { ListRecordingsResponse } from '@stream-io/video-client';
 import {
@@ -106,11 +107,18 @@ export const CallEndedView = () => {
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{t('The livestream has ended.')}</Text>
+      <Text style={styles.title}>
+        {t('livestreamPlayer.ended.title', 'The livestream has ended.')}
+      </Text>
 
       {showRecordings && (
         <>
-          <Text style={styles.subtitle}>{t('Watch recordings:')}</Text>
+          <Text style={styles.subtitle}>
+            {t(
+              'livestreamPlayer.ended.watchRecordings.title',
+              'Watch recordings:',
+            )}
+          </Text>
           <View style={styles.recordingsContainer}>
             <FlatList
               data={recordingsResponse.recordings}

package/src/components/Livestream/LivestreamTopView/LiveIndicator.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 
 /**
  * Props for the LiveIndicator component.
@@ -33,7 +33,7 @@ export const LiveIndicator = ({}: LiveIndicatorProps) => {
           liveIndicator.label,
         ]}
       >
-        {t('Live')}
+        {t('common.live.label', 'Live')}
       </Text>
     </View>
   );

package/src/components/Livestream/ViewerLivestream/ViewerLobby.tsx

@@ -1,8 +1,5 @@
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
@@ -99,10 +96,19 @@ export const ViewerLobby = ({ isLive }: LobbyProps) => {
     <View style={styles.container}>
       <Text style={styles.text}>
         {isLive
-          ? t('Livestream is still in progress')
+          ? t(
+              'livestreamViewer.stillInProgress.text',
+              'Livestream is still in progress',
+            )
           : startsAt
-            ? t('Livestream will start in:')
-            : t('Livestream will start soon')}
+            ? t(
+                'livestreamViewer.willStartIn.text',
+                'Livestream will start in:',
+              )
+            : t(
+                'livestreamViewer.willStartSoon.text',
+                'Livestream will start soon',
+              )}
       </Text>
       {startsAt && !isLive && (
         <Text style={styles.countdownText}>{countdown}</Text>
@@ -110,12 +116,19 @@ export const ViewerLobby = ({ isLive }: LobbyProps) => {
       {!isLive && participants.length > 0 && (
         <>
           <Text style={styles.participantsText}>
-            {`${participants.length} ${t('participants have joined early')}`}
+            {t('livestreamViewer.earlyParticipants.text', {
+              count: participants.length,
+              defaultValue_one: '{{ count }} participant has joined early',
+              defaultValue_other: '{{ count }} participants have joined early',
+            })}
           </Text>
         </>
       )}
       {isLive && (
-        <Button title={t('Join Livestream')} onPress={() => call?.join()} />
+        <Button
+          title={t('livestreamViewer.join.label', 'Join Livestream')}
+          onPress={() => call?.join()}
+        />
       )}
     </View>
   );

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

@@ -15,10 +15,10 @@ import {
 } from '../../../icons';
 import {
   useCall,
-  useI18n,
   useIsAudioConnecting,
   useIsVideoConnecting,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { type ParticipantViewProps } from './ParticipantView';
 import { Z_INDEX } from '../../../constants';
@@ -62,7 +62,9 @@ export const ParticipantLabel = ({
   const { t } = useI18n();
   const participantName = name ?? userId;
 
-  const participantLabel = isLocalParticipant ? t('You') : participantName;
+  const participantLabel = isLocalParticipant
+    ? t('common.you.label', 'You')
+    : participantName;
   const isAudioMuted = !hasAudio(participant);
   const isVideoMuted = !hasVideo(participant);
   const isTrackPaused = trackType && hasPausedTrack(participant, trackType);
@@ -71,10 +73,17 @@ export const ParticipantLabel = ({
 
   if (trackType === 'screenShareTrack') {
     const screenShareText = isLocalParticipant
-      ? t('You are sharing your screen')
-      : t('{{ userName }} is sharing their screen', {
-          userName: participantName,
-        });
+      ? t(
+          'participantView.screenShare.byYou.text',
+          'You are sharing your screen',
+        )
+      : t(
+          'participantView.screenShare.byUser.text',
+          '{{ userName }} is sharing their screen',
+          {
+            userName: participantName,
+          },
+        );
     return (
       <View
         style={[