@stream-io/video-react-native-sdk 1.39.0 → 1.40.0

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;

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Pressable,
   type StyleProp,
@@ -61,6 +61,16 @@ export type FloatingParticipantViewProps = ParticipantViewComponentProps &
     onPressHandler?: () => void;
   };
 
+const floatingAlignmentMap: Record<
+  FloatingParticipantViewAlignment,
+  FloatingViewAlignment
+> = {
+  'top-left': FloatingViewAlignment.topLeft,
+  'top-right': FloatingViewAlignment.topRight,
+  'bottom-left': FloatingViewAlignment.bottomLeft,
+  'bottom-right': FloatingViewAlignment.bottomRight,
+};
+
 const DefaultLocalParticipantViewVideoFallback = () => {
   const {
     theme: {
@@ -114,16 +124,6 @@ export const FloatingParticipantView = ({
     },
   } = useTheme();
 
-  const floatingAlignmentMap: Record<
-    FloatingParticipantViewAlignment,
-    FloatingViewAlignment
-  > = {
-    'top-left': FloatingViewAlignment.topLeft,
-    'top-right': FloatingViewAlignment.topRight,
-    'bottom-left': FloatingViewAlignment.bottomLeft,
-    'bottom-right': FloatingViewAlignment.bottomRight,
-  };
-
   const [containerDimensions, setContainerDimensions] = React.useState<{
     width: number;
     height: number;
@@ -134,13 +134,21 @@ export const FloatingParticipantView = ({
     'videoTrack',
   );
 
-  const participantViewProps: ParticipantViewComponentProps = {
-    ParticipantLabel: null,
-    ParticipantNetworkQualityIndicator,
-    ParticipantReaction,
-    ParticipantVideoFallback,
-    VideoRenderer,
-  };
+  const participantViewProps: ParticipantViewComponentProps = useMemo(
+    () => ({
+      ParticipantLabel: null,
+      ParticipantNetworkQualityIndicator,
+      ParticipantReaction,
+      ParticipantVideoFallback,
+      VideoRenderer,
+    }),
+    [
+      ParticipantNetworkQualityIndicator,
+      ParticipantReaction,
+      ParticipantVideoFallback,
+      VideoRenderer,
+    ],
+  );
 
   if (!participant) {
     return null;

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

@@ -38,7 +38,7 @@ export const ParticipantReaction = ({
   } = useTheme();
 
   useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
+    let timeoutId: ReturnType<typeof setTimeout>;
     if (call) {
       timeoutId = setTimeout(() => {
         call.resetReaction(sessionId);

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

@@ -100,76 +100,80 @@ export type ParticipantViewProps = ParticipantViewComponentProps &
  * and additional info. By an absence of a video track or when isVisible is truthy,
  * only an avatar and audio track will be rendered.
  */
-export const ParticipantView = ({
-  participant,
-  trackType = 'videoTrack',
-  isVisible = true,
-  style,
-  ParticipantLabel = DefaultParticipantLabel,
-  ParticipantReaction = DefaultParticipantReaction,
-  VideoRenderer = DefaultVideoRenderer,
-  ParticipantNetworkQualityIndicator = DefaultParticipantNetworkQualityIndicator,
-  ParticipantVideoFallback = DefaultParticipantVideoFallback,
-  objectFit,
-  videoZOrder = 0,
-  mirror,
-  supportedReactions,
-}: ParticipantViewProps) => {
-  const {
-    theme: { colors, participantView },
-  } = useTheme();
-  const { isSpeaking, userId } = participant;
-  const styles = useStyles();
-  const isScreenSharing = trackType === 'screenShareTrack';
-  const applySpeakerStyle = isSpeaking && !isScreenSharing;
-  const speakerStyle = applySpeakerStyle && [
-    { borderColor: colors.buttonPrimary },
-    participantView.highlightedContainer,
-  ];
+export const ParticipantView = React.memo(
+  ({
+    participant,
+    trackType = 'videoTrack',
+    isVisible = true,
+    style,
+    ParticipantLabel = DefaultParticipantLabel,
+    ParticipantReaction = DefaultParticipantReaction,
+    VideoRenderer = DefaultVideoRenderer,
+    ParticipantNetworkQualityIndicator = DefaultParticipantNetworkQualityIndicator,
+    ParticipantVideoFallback = DefaultParticipantVideoFallback,
+    objectFit,
+    videoZOrder = 0,
+    mirror,
+    supportedReactions,
+  }: ParticipantViewProps) => {
+    const {
+      theme: { colors, participantView },
+    } = useTheme();
+    const { isSpeaking, userId } = participant;
+    const styles = useStyles();
+    const isScreenSharing = trackType === 'screenShareTrack';
+    const applySpeakerStyle = isSpeaking && !isScreenSharing;
+    const speakerStyle = applySpeakerStyle && [
+      { borderColor: colors.buttonPrimary },
+      participantView.highlightedContainer,
+    ];
 
-  return (
-    <View
-      style={[styles.container, style, speakerStyle]}
-      testID={
-        isSpeaking
-          ? `participant-${userId}-is-speaking`
-          : `participant-${userId}-is-not-speaking`
-      }
-    >
-      {ParticipantReaction && (
-        <ParticipantReaction
-          participant={participant}
-          supportedReactions={supportedReactions}
-        />
-      )}
-      {VideoRenderer && (
-        <VideoRenderer
-          isVisible={isVisible}
-          participant={participant}
-          trackType={trackType}
-          ParticipantVideoFallback={ParticipantVideoFallback}
-          objectFit={objectFit}
-          videoZOrder={videoZOrder}
-          mirror={mirror}
-        />
-      )}
+    return (
       <View
-        style={[
-          styles.footerContainer,
-          participantView.footerContainer,
-          !ParticipantLabel && styles.networkIndicatorOnly,
-        ]}
+        style={[styles.container, style, speakerStyle]}
+        testID={
+          isSpeaking
+            ? `participant-${userId}-is-speaking`
+            : `participant-${userId}-is-not-speaking`
+        }
       >
-        {ParticipantLabel && (
-          <ParticipantLabel participant={participant} trackType={trackType} />
+        {ParticipantReaction && (
+          <ParticipantReaction
+            participant={participant}
+            supportedReactions={supportedReactions}
+          />
         )}
-        {ParticipantNetworkQualityIndicator && (
-          <ParticipantNetworkQualityIndicator participant={participant} />
+        {VideoRenderer && (
+          <VideoRenderer
+            isVisible={isVisible}
+            participant={participant}
+            trackType={trackType}
+            ParticipantVideoFallback={ParticipantVideoFallback}
+            objectFit={objectFit}
+            videoZOrder={videoZOrder}
+            mirror={mirror}
+          />
         )}
+        <View
+          style={[
+            styles.footerContainer,
+            participantView.footerContainer,
+            !ParticipantLabel && styles.networkIndicatorOnly,
+          ]}
+        >
+          {ParticipantLabel && (
+            <ParticipantLabel participant={participant} trackType={trackType} />
+          )}
+          {ParticipantNetworkQualityIndicator && (
+            <ParticipantNetworkQualityIndicator participant={participant} />
+          )}
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  },
+);
+
+ParticipantView.displayName = 'ParticipantView';
 
 const useStyles = () => {
   const { theme } = useTheme();