@stream-io/video-react-native-sdk 1.39.1-beta.0 → 1.40.0

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

@@ -1,11 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  NativeModules,
-  Platform,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import { NativeModules, Platform, StyleSheet, View } from 'react-native';
 import {
   CallParticipantsGrid,
   type CallParticipantsGridProps,
@@ -139,17 +133,44 @@ export const CallContent = ({
 
   useAutoEnterPiPEffect(disablePictureInPicture);
 
-  const [remoteParticipants, setRemoteParticipants] = useState<
-    StreamVideoParticipant[]
-  >(() => call?.state.remoteParticipants ?? []);
+  // CallContent only needs to know whether to show the floating view (0 / 1-2 / 3+
+  // remote participants) and the single participant to render in it. Storing a count
+  // bucket plus that one participant - instead of the whole array - means CallContent
+  // re-renders only on bucket-boundary crossings, not on every debounced emission.
+  const [floatingViewState, setFloatingViewState] = useState<{
+    remoteCountBucket: number;
+    firstRemoteParticipant: StreamVideoParticipant | undefined;
+  }>(() => {
+    const remote = call?.state.remoteParticipants ?? [];
+    return {
+      remoteCountBucket: Math.min(remote.length, 3),
+      firstRemoteParticipant: remote.length === 1 ? remote[0] : undefined,
+    };
+  });
   useEffect(() => {
     if (!call) {
-      setRemoteParticipants([]);
+      setFloatingViewState({
+        remoteCountBucket: 0,
+        firstRemoteParticipant: undefined,
+      });
       return;
     }
     const sub = call.state.remoteParticipants$
       .pipe(debounceTime(300))
-      .subscribe(setRemoteParticipants);
+      .subscribe((remoteParticipants) => {
+        const remoteCountBucket = Math.min(remoteParticipants.length, 3);
+        const firstRemoteParticipant =
+          remoteParticipants.length === 1 ? remoteParticipants[0] : undefined;
+        setFloatingViewState((prev) => {
+          if (
+            prev.remoteCountBucket === remoteCountBucket &&
+            prev.firstRemoteParticipant === firstRemoteParticipant
+          ) {
+            return prev;
+          }
+          return { remoteCountBucket, firstRemoteParticipant };
+        });
+      });
     return () => sub.unsubscribe();
   }, [call]);
   const localParticipant = useLocalParticipant();
@@ -158,38 +179,39 @@ export const CallContent = ({
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
 
   useEffect(() => {
-    if (isInPiPMode && Platform.OS === 'android') {
-      const unsubFunc = call?.on('call.ended', () => {
+    if (!isInPiPMode || Platform.OS !== 'android') return;
+    const unsubFunc = call?.on('call.ended', () => {
+      videoLoggerSystem
+        .getLogger('CallContent')
+        .debug(`exiting PiP mode due to call.ended`);
+      NativeModules.StreamVideoReactNative.exitPipMode();
+    });
+    const subscription = call?.state.callingState$.subscribe((state) => {
+      if (state === CallingState.LEFT) {
         videoLoggerSystem
           .getLogger('CallContent')
-          .debug(`exiting PiP mode due to call.ended`);
+          .debug(`exiting PiP mode due to callingState: LEFT`);
         NativeModules.StreamVideoReactNative.exitPipMode();
-      });
-      const subscription = call?.state.callingState$.subscribe((state) => {
-        if (state === CallingState.LEFT) {
-          videoLoggerSystem
-            .getLogger('CallContent')
-            .debug(`exiting PiP mode due to callingState: LEFT`);
-          NativeModules.StreamVideoReactNative.exitPipMode();
-        }
-      });
-      return () => {
-        unsubFunc?.();
-        subscription?.unsubscribe();
-      };
-    }
+      }
+    });
+    return () => {
+      unsubFunc?.();
+      subscription?.unsubscribe();
+    };
   }, [isInPiPMode, call]);
 
+  const { remoteCountBucket, firstRemoteParticipant } = floatingViewState;
+
   const showFloatingView =
     !showSpotlightLayout &&
     !isInPiPMode &&
-    remoteParticipants.length > 0 &&
-    remoteParticipants.length < 3;
+    remoteCountBucket > 0 &&
+    remoteCountBucket < 3;
 
   const isRemoteParticipantInFloatingView =
     showFloatingView &&
     showRemoteParticipantInFloatingView &&
-    remoteParticipants.length === 1;
+    remoteCountBucket === 1;
 
   /**
    * This hook is used to handle IncallManager specs of the application.
@@ -203,10 +225,11 @@ export const CallContent = ({
         prevInCallManager.stop();
       };
     }
+    return undefined;
   }, []);
 
   const handleFloatingViewParticipantSwitch = () => {
-    if (remoteParticipants.length !== 1) {
+    if (remoteCountBucket !== 1) {
       return;
     }
     setShowRemoteParticipantInFloatingView((prevState) => !prevState);
@@ -242,10 +265,6 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
     <>
       {!disablePictureInPicture && (
@@ -254,7 +273,13 @@ export const CallContent = ({
           mirror={mirror}
         />
       )}
-      <View style={[styles.container, landscapeStyles, callContent.container]}>
+      <View
+        style={[
+          styles.container,
+          landscape ? landscapeStyles.row : landscapeStyles.column,
+          callContent.container,
+        ]}
+      >
         <View style={[styles.content, callContent.callParticipantsContainer]}>
           <View
             style={[
@@ -270,7 +295,7 @@ export const CallContent = ({
               <FloatingParticipantView
                 participant={
                   isRemoteParticipantInFloatingView
-                    ? remoteParticipants[0]
+                    ? firstRemoteParticipant
                     : localParticipant
                 }
                 onPressHandler={handleFloatingViewParticipantSwitch}
@@ -299,6 +324,11 @@ export const CallContent = ({
   );
 };
 
+const landscapeStyles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+});
+
 const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { debounceTime } from 'rxjs';
 import {
@@ -76,10 +76,6 @@ export const CallParticipantsGrid = ({
       sub2.unsubscribe();
     };
   }, [call]);
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   const isInPiPMode = useIsInPiPMode();
 
   const showFloatingView =
@@ -125,7 +121,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
-        landscapeStyles,
+        landscape ? styles.row : styles.column,
         { backgroundColor: colors.sheetPrimary },
         callParticipantsGrid.container,
       ]}
@@ -145,4 +141,6 @@ export const CallParticipantsGrid = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
 });

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -4,7 +4,7 @@ import {
   type StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { debounceTime } from 'rxjs';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -91,13 +91,28 @@ export const CallParticipantsSpotlight = ({
     mirror,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
-  const spotlightContainerLandscapeStyles: ViewStyle = {
-    marginHorizontal: landscape ? 0 : variants.spacingSizes.xs,
-  };
+  // Memoized so the spotlight tile's `style` prop stays referentially stable;
+  // otherwise the fresh array literal defeats ParticipantView's React.memo.
+  const spotlightParticipantStyle = useMemo(
+    () =>
+      isUserAloneInCall
+        ? [
+            styles.fullScreenSpotlightContainer,
+            callParticipantsSpotlight.fullScreenSpotlightContainer,
+          ]
+        : [
+            styles.spotlightContainer,
+            { marginHorizontal: landscape ? 0 : variants.spacingSizes.xs },
+            callParticipantsSpotlight.spotlightContainer,
+          ],
+    [
+      isUserAloneInCall,
+      landscape,
+      styles,
+      callParticipantsSpotlight,
+      variants.spacingSizes.xs,
+    ],
+  );
 
   const showShareScreenOverlay =
     participantInSpotlight?.isLocalParticipant &&
@@ -109,7 +124,7 @@ export const CallParticipantsSpotlight = ({
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
-        landscapeStyles,
+        landscape ? landscapeStyles.row : landscapeStyles.column,
         callParticipantsSpotlight.container,
       ]}
     >
@@ -120,18 +135,7 @@ export const CallParticipantsSpotlight = ({
         ) : (
           <ParticipantView
             participant={participantInSpotlight}
-            style={
-              isUserAloneInCall
-                ? [
-                    styles.fullScreenSpotlightContainer,
-                    callParticipantsSpotlight.fullScreenSpotlightContainer,
-                  ]
-                : [
-                    styles.spotlightContainer,
-                    spotlightContainerLandscapeStyles,
-                    callParticipantsSpotlight.spotlightContainer,
-                  ]
-            }
+            style={spotlightParticipantStyle}
             objectFit={isScreenShareOnSpotlight ? 'contain' : 'cover'}
             trackType={
               isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
@@ -166,6 +170,11 @@ export const CallParticipantsSpotlight = ({
   );
 };
 
+const landscapeStyles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+});
+
 const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -209,13 +209,22 @@ export const CallParticipantsList = ({
     return style;
   }, [itemWidth, itemHeight, horizontal, landscape, styles]);
 
-  const participantProps: ParticipantViewComponentProps = {
-    ParticipantLabel,
-    ParticipantNetworkQualityIndicator,
-    ParticipantReaction,
-    ParticipantVideoFallback,
-    VideoRenderer,
-  };
+  const participantProps = useMemo<ParticipantViewComponentProps>(
+    () => ({
+      ParticipantLabel,
+      ParticipantNetworkQualityIndicator,
+      ParticipantReaction,
+      ParticipantVideoFallback,
+      VideoRenderer,
+    }),
+    [
+      ParticipantLabel,
+      ParticipantNetworkQualityIndicator,
+      ParticipantReaction,
+      ParticipantVideoFallback,
+      VideoRenderer,
+    ],
+  );
 
   const renderItem = useCallback<NonNullable<FlatListProps['renderItem']>>(
     ({ item: participant }) => {
@@ -238,8 +247,13 @@ export const CallParticipantsList = ({
         </>
       );
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [itemContainerStyle],
+    [
+      ParticipantView,
+      itemContainerStyle,
+      participantProps,
+      supportedReactions,
+      mirror,
+    ],
   );
 
   // in vertical mode, only when there are more than 2 participants in a call, the participants should be displayed in a grid

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

@@ -69,11 +69,15 @@ export const Lobby = ({
   const { t } = useI18n();
   const localVideoStream = mediaStream as unknown as MediaStream | undefined;
 
-  const connectedUserAsParticipant = {
-    userId: connectedUser?.id,
-    image: connectedUser?.image,
-    name: connectedUser?.name,
-  } as StreamVideoParticipant;
+  const connectedUserAsParticipant = useMemo(
+    () =>
+      ({
+        userId: connectedUser?.id,
+        image: connectedUser?.image,
+        name: connectedUser?.name,
+      }) as StreamVideoParticipant,
+    [connectedUser?.id, connectedUser?.image, connectedUser?.name],
+  );
 
   return (
     <View style={[styles.container, lobby.container]}>

package/src/components/Livestream/HostLivestream/HostLivestream.tsx

@@ -90,12 +90,11 @@ export const HostLivestream = ({
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
     const prevInCallManager = getRNInCallManagerLibNoThrow();
-    if (prevInCallManager) {
-      prevInCallManager.start({ media: 'video' });
-      return () => {
-        prevInCallManager.stop();
-      };
-    }
+    if (!prevInCallManager) return;
+    prevInCallManager.start({ media: 'video' });
+    return () => {
+      prevInCallManager.stop();
+    };
   }, []);
 
   const [topViewHeight, setTopViewHeight] = React.useState<number>();

package/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -71,7 +71,7 @@ export const ViewerLivestreamControls = ({
   const [isMuted, setIsMuted] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
   const [showPlayPauseButton, setShowPlayPauseButton] = useState(true);
-  const playPauseTimeout = useRef<NodeJS.Timeout | null>(null);
+  const playPauseTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const hidePlayPauseButtonAfterDelay = useCallback(() => {
     if (playPauseTimeout.current) {

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -1,9 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  hasScreenShare,
-  SfuModels,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import React from 'react';
+import { hasScreenShare } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 import { usePaginatedLayoutSortPreset } from '../../../hooks/usePaginatedLayoutSortPreset';
@@ -13,7 +9,6 @@ import {
   type VideoRendererProps,
 } from '../../Participant';
 import type { ScreenShareOverlayProps } from '../../utility/ScreenShareOverlay';
-import { useTrackDimensions } from '../../../hooks';
 
 /**
  * Props for the LivestreamLayout component.
@@ -56,21 +51,6 @@ export const LivestreamLayout = ({
 
   usePaginatedLayoutSortPreset(call);
 
-  const [objectFit, setObjectFit] =
-    useState<
-      React.ComponentProps<NonNullable<typeof VideoRenderer>>['objectFit']
-    >();
-
-  const onDimensionsChange = useCallback(
-    (d: SfuModels.VideoDimension | undefined) => {
-      if (d) {
-        const isWidthWide = d.width > d.height;
-        setObjectFit(isWidthWide ? 'contain' : 'cover');
-      }
-    },
-    [],
-  );
-
   const landScapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
@@ -90,55 +70,15 @@ export const LivestreamLayout = ({
         (presenter.isLocalParticipant && ScreenShareOverlay ? (
           <ScreenShareOverlay />
         ) : (
-          <>
-            <VideoRenderer
-              trackType="screenShareTrack"
-              objectFit={objectFit}
-              participant={presenter}
-            />
-            <VideoTrackDimensionsRenderLessComponent
-              onDimensionsChange={onDimensionsChange}
-              participant={presenter}
-              trackType="screenShareTrack"
-            />
-          </>
+          <VideoRenderer trackType="screenShareTrack" participant={presenter} />
         ))}
       {VideoRenderer && !hasOngoingScreenShare && currentSpeaker && (
-        <>
-          <VideoRenderer
-            participant={currentSpeaker}
-            objectFit={objectFit}
-            trackType="videoTrack"
-          />
-          <VideoTrackDimensionsRenderLessComponent
-            onDimensionsChange={onDimensionsChange}
-            participant={currentSpeaker}
-            trackType="videoTrack"
-          />
-        </>
+        <VideoRenderer participant={currentSpeaker} trackType="videoTrack" />
       )}
     </View>
   );
 };
 
-const VideoTrackDimensionsRenderLessComponent = ({
-  onDimensionsChange,
-  participant,
-  trackType,
-}: {
-  onDimensionsChange: (d: SfuModels.VideoDimension | undefined) => void;
-  participant: StreamVideoParticipant;
-  trackType: 'videoTrack' | 'screenShareTrack';
-}) => {
-  const { width, height } = useTrackDimensions(participant, trackType);
-
-  useEffect(() => {
-    onDimensionsChange({ width, height });
-  }, [width, height, onDimensionsChange]);
-
-  return null;
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -1,17 +1,45 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
-import { useState, useEffect, useMemo } from 'react';
 import { useTheme } from '../../../contexts';
 import { ListRecordingsResponse } from '@stream-io/video-client';
 import {
   FlatList,
+  Linking,
+  type ListRenderItem,
   Pressable,
-  View,
-  Text,
+  type StyleProp,
   StyleSheet,
-  Linking,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
 } from 'react-native';
 
+type RecordingItem = ListRecordingsResponse['recordings'][number];
+
+type RecordingRowProps = {
+  recording: RecordingItem;
+  onPress: (url: string) => void;
+  buttonStyle: StyleProp<ViewStyle>;
+  textStyle: StyleProp<TextStyle>;
+};
+
+const RecordingRow = React.memo(
+  ({ recording, onPress, buttonStyle, textStyle }: RecordingRowProps) => {
+    const handlePress = useCallback(
+      () => onPress(recording.url),
+      [onPress, recording.url],
+    );
+    return (
+      <Pressable style={buttonStyle} onPress={handlePress}>
+        <Text style={textStyle}>{recording.url.substring(0, 70)}...</Text>
+      </Pressable>
+    );
+  },
+);
+
+RecordingRow.displayName = 'RecordingRow';
+
 export const CallEndedView = () => {
   const { t } = useI18n();
   const call = useCall();
@@ -46,7 +74,7 @@ export const CallEndedView = () => {
     };
   }, [call, recordingsResponse]);
 
-  const openUrl = (url: string) => {
+  const openUrl = useCallback((url: string) => {
     Linking.canOpenURL(url).then((supported) => {
       if (supported) {
         Linking.openURL(url);
@@ -54,7 +82,24 @@ export const CallEndedView = () => {
         console.log('Cannot open URL:', url);
       }
     });
-  };
+  }, []);
+
+  const keyExtractor = useCallback(
+    (item: RecordingItem) => item.session_id,
+    [],
+  );
+
+  const renderItem = useCallback<ListRenderItem<RecordingItem>>(
+    ({ item }) => (
+      <RecordingRow
+        recording={item}
+        onPress={openUrl}
+        buttonStyle={styles.recordingButton}
+        textStyle={styles.recordingText}
+      />
+    ),
+    [openUrl, styles.recordingButton, styles.recordingText],
+  );
 
   const showRecordings =
     recordingsResponse && recordingsResponse.recordings.length > 0;
@@ -69,17 +114,8 @@ export const CallEndedView = () => {
           <View style={styles.recordingsContainer}>
             <FlatList
               data={recordingsResponse.recordings}
-              keyExtractor={(item) => item.session_id}
-              renderItem={({ item }) => (
-                <Pressable
-                  style={styles.recordingButton}
-                  onPress={() => openUrl(item.url)}
-                >
-                  <Text style={styles.recordingText}>
-                    {item.url.substring(0, 70)}...
-                  </Text>
-                </Pressable>
-              )}
+              keyExtractor={keyExtractor}
+              renderItem={renderItem}
             />
           </View>
         </>

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

@@ -41,7 +41,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
     if (mode !== 'host') {
       return;
     }
-    let intervalId: NodeJS.Timeout;
+    let intervalId: ReturnType<typeof setInterval>;
 
     const handleLiveStarted = () => {
       intervalId = setInterval(() => {
@@ -85,7 +85,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
     if (mode !== 'viewer') {
       return;
     }
-    let intervalId: NodeJS.Timeout;
+    let intervalId: ReturnType<typeof setInterval>;
     const handleLiveStarted = () => {
       intervalId = setInterval(() => {
         setDuration((d) => d + 1);

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

@@ -103,12 +103,11 @@ export const ViewerLivestream = ({
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
     const prevInCallManager = getRNInCallManagerLibNoThrow();
-    if (prevInCallManager) {
-      prevInCallManager.start({ media: 'video' });
-      return () => {
-        prevInCallManager.stop();
-      };
-    }
+    if (!prevInCallManager) return;
+    prevInCallManager.start({ media: 'video' });
+    return () => {
+      prevInCallManager.stop();
+    };
   }, []);
 
   useEffect(() => {
@@ -205,13 +204,12 @@ const useCanJoinEarly = () => {
   );
 
   useEffect(() => {
-    if (!canJoinEarly) {
-      const handle = setInterval(() => {
-        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
-      }, 1000);
+    if (canJoinEarly) return;
+    const handle = setInterval(() => {
+      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    }, 1000);
 
-      return () => clearInterval(handle);
-    }
+    return () => clearInterval(handle);
   }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
 
   return canJoinEarly;