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

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();

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

@@ -44,188 +44,201 @@ export type VideoRendererProps = Pick<
  *
  * It internally used `RTCView` to render video stream.
  */
-export const VideoRenderer = ({
-  trackType = 'videoTrack',
-  participant,
-  isVisible = true,
-  ParticipantVideoFallback = DefaultParticipantVideoFallback,
-  objectFit,
-  videoZOrder = 0,
-  mirror: mirrorOverride,
-}: VideoRendererProps) => {
-  const {
-    theme: { videoRenderer },
-  } = useTheme();
-  const call = useCall();
-  const { useCameraState, useIncomingVideoSettings } = useCallStateHooks();
-  const trackSubscriberRef = useRef<TrackSubscriberHandle>(null);
-  const { isParticipantVideoEnabled } = useIncomingVideoSettings();
-  const { direction } = useCameraState();
-  const viewRef = useRef(null);
-  const {
-    register: registerIosScreenshot,
-    deregister: deregisterIosScreenshot,
-  } = useScreenshotIosContext();
-
-  const videoDimensions = useTrackDimensions(participant, trackType);
-
-  const isVideoDimensionsValid =
-    videoDimensions.width > 0 && videoDimensions.height > 0;
-
-  const {
-    isLocalParticipant,
-    sessionId,
-    viewportVisibilityState,
-    videoStream,
-    screenShareStream,
-  } = participant;
-
-  const isScreenSharing = trackType === 'screenShareTrack';
-  const isPublishingVideoTrack = isScreenSharing
-    ? hasScreenShare(participant)
-    : hasVideo(participant);
-
-  const videoStreamToRender = (isScreenSharing
-    ? screenShareStream
-    : videoStream) as unknown as MediaStream | undefined;
-
-  const canShowVideo =
-    !!videoStreamToRender &&
-    isVisible &&
-    isPublishingVideoTrack &&
-    !hasPausedTrack(participant, trackType) &&
-    isParticipantVideoEnabled(participant.sessionId);
-
-  useEffect(() => {
-    if (Platform.OS === 'ios' && registerIosScreenshot && canShowVideo) {
+export const VideoRenderer = React.memo(
+  ({
+    trackType = 'videoTrack',
+    participant,
+    isVisible = true,
+    ParticipantVideoFallback = DefaultParticipantVideoFallback,
+    objectFit,
+    videoZOrder = 0,
+    mirror: mirrorOverride,
+  }: VideoRendererProps) => {
+    const {
+      theme: { videoRenderer },
+    } = useTheme();
+    const call = useCall();
+    const { useCameraState, useIncomingVideoSettings } = useCallStateHooks();
+    const trackSubscriberRef = useRef<TrackSubscriberHandle>(null);
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+    const { direction } = useCameraState();
+    const viewRef = useRef(null);
+    const {
+      register: registerIosScreenshot,
+      deregister: deregisterIosScreenshot,
+    } = useScreenshotIosContext();
+
+    const videoDimensions = useTrackDimensions(participant, trackType);
+
+    const isVideoDimensionsValid =
+      videoDimensions.width > 0 && videoDimensions.height > 0;
+
+    const {
+      isLocalParticipant,
+      sessionId,
+      viewportVisibilityState,
+      videoStream,
+      screenShareStream,
+    } = participant;
+
+    const isScreenSharing = trackType === 'screenShareTrack';
+    const isPublishingVideoTrack = isScreenSharing
+      ? hasScreenShare(participant)
+      : hasVideo(participant);
+
+    const videoStreamToRender = (isScreenSharing
+      ? screenShareStream
+      : videoStream) as unknown as MediaStream | undefined;
+
+    const canShowVideo =
+      !!videoStreamToRender &&
+      isVisible &&
+      isPublishingVideoTrack &&
+      !hasPausedTrack(participant, trackType) &&
+      isParticipantVideoEnabled(participant.sessionId);
+
+    useEffect(() => {
+      if (Platform.OS !== 'ios' || !registerIosScreenshot || !canShowVideo)
+        return;
       registerIosScreenshot(participant, trackType, viewRef);
       return () => {
         deregisterIosScreenshot(participant, trackType);
       };
-    }
-  }, [
-    participant,
-    trackType,
-    registerIosScreenshot,
-    canShowVideo,
-    deregisterIosScreenshot,
-  ]);
-
-  const mirror = isScreenSharing
-    ? false
-    : mirrorOverride !== undefined
-      ? mirrorOverride
-      : isLocalParticipant && direction === 'front';
-
-  /**
-   * This effect updates the participant's viewportVisibilityState
-   * Additionally makes sure that when this view becomes visible again, the layout to subscribe is known
-   */
-  useEffect(() => {
-    if (!call || isLocalParticipant) {
-      return;
-    }
-    if (isVisible) {
-      if (
-        trackType === 'videoTrack' &&
-        viewportVisibilityState?.videoTrack !== VisibilityState.VISIBLE
-      ) {
-        call.state.updateParticipant(sessionId, (p) => ({
-          ...p,
-          viewportVisibilityState: {
-            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
-            videoTrack: VisibilityState.VISIBLE,
-          },
-        }));
-      }
-      if (
-        trackType === 'screenShareTrack' &&
-        viewportVisibilityState?.screenShareTrack !== VisibilityState.VISIBLE
-      ) {
-        call.state.updateParticipant(sessionId, (p) => ({
-          ...p,
-          viewportVisibilityState: {
-            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
-            screenShareTrack: VisibilityState.VISIBLE,
-          },
-        }));
-      }
-    } else {
-      if (
-        trackType === 'videoTrack' &&
-        viewportVisibilityState?.videoTrack !== VisibilityState.INVISIBLE
-      ) {
-        call.state.updateParticipant(sessionId, (p) => ({
-          ...p,
-          viewportVisibilityState: {
-            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
-            videoTrack: VisibilityState.INVISIBLE,
-          },
-        }));
+    }, [
+      participant,
+      trackType,
+      registerIosScreenshot,
+      canShowVideo,
+      deregisterIosScreenshot,
+    ]);
+
+    const mirror = isScreenSharing
+      ? false
+      : mirrorOverride !== undefined
+        ? mirrorOverride
+        : isLocalParticipant && direction === 'front';
+
+    const videoTrackVisibility = viewportVisibilityState?.videoTrack;
+    const screenShareTrackVisibility =
+      viewportVisibilityState?.screenShareTrack;
+
+    /**
+     * This effect updates the participant's viewportVisibilityState
+     * Additionally makes sure that when this view becomes visible again, the layout to subscribe is known
+     */
+    useEffect(() => {
+      if (!call || isLocalParticipant) {
+        return;
       }
-      if (
-        trackType === 'screenShareTrack' &&
-        viewportVisibilityState?.screenShareTrack !== VisibilityState.INVISIBLE
-      ) {
-        call.state.updateParticipant(sessionId, (p) => ({
-          ...p,
-          viewportVisibilityState: {
-            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
-            screenShareTrack: VisibilityState.INVISIBLE,
-          },
-        }));
+      if (isVisible) {
+        if (
+          trackType === 'videoTrack' &&
+          videoTrackVisibility !== VisibilityState.VISIBLE
+        ) {
+          call.state.updateParticipant(sessionId, (p) => ({
+            ...p,
+            viewportVisibilityState: {
+              ...(p.viewportVisibilityState ??
+                DEFAULT_VIEWPORT_VISIBILITY_STATE),
+              videoTrack: VisibilityState.VISIBLE,
+            },
+          }));
+        }
+        if (
+          trackType === 'screenShareTrack' &&
+          screenShareTrackVisibility !== VisibilityState.VISIBLE
+        ) {
+          call.state.updateParticipant(sessionId, (p) => ({
+            ...p,
+            viewportVisibilityState: {
+              ...(p.viewportVisibilityState ??
+                DEFAULT_VIEWPORT_VISIBILITY_STATE),
+              screenShareTrack: VisibilityState.VISIBLE,
+            },
+          }));
+        }
+      } else {
+        if (
+          trackType === 'videoTrack' &&
+          videoTrackVisibility !== VisibilityState.INVISIBLE
+        ) {
+          call.state.updateParticipant(sessionId, (p) => ({
+            ...p,
+            viewportVisibilityState: {
+              ...(p.viewportVisibilityState ??
+                DEFAULT_VIEWPORT_VISIBILITY_STATE),
+              videoTrack: VisibilityState.INVISIBLE,
+            },
+          }));
+        }
+        if (
+          trackType === 'screenShareTrack' &&
+          screenShareTrackVisibility !== VisibilityState.INVISIBLE
+        ) {
+          call.state.updateParticipant(sessionId, (p) => ({
+            ...p,
+            viewportVisibilityState: {
+              ...(p.viewportVisibilityState ??
+                DEFAULT_VIEWPORT_VISIBILITY_STATE),
+              screenShareTrack: VisibilityState.INVISIBLE,
+            },
+          }));
+        }
       }
-    }
-  }, [
-    sessionId,
-    viewportVisibilityState,
-    isVisible,
-    call,
-    trackType,
-    isLocalParticipant,
-  ]);
-
-  const onLayout: React.ComponentProps<typeof RTCView>['onLayout'] = (
-    event,
-  ) => {
-    trackSubscriberRef.current?.onLayoutUpdate(event);
-  };
-
-  return (
-    <View
-      onLayout={onLayout}
-      style={[StyleSheet.absoluteFill, videoRenderer.container]}
-    >
-      {call && !isLocalParticipant && (
-        <TrackSubscriber
-          ref={trackSubscriberRef}
-          call={call}
-          participantSessionId={sessionId}
-          trackType={trackType}
-          isVisible={isVisible}
-        />
-      )}
-      {canShowVideo &&
-      videoStreamToRender &&
-      (objectFit || isVideoDimensionsValid) ? (
-        <RTCView
-          style={[StyleSheet.absoluteFill, videoRenderer.videoStream]}
-          streamURL={videoStreamToRender.toURL()}
-          mirror={mirror}
-          ref={viewRef}
-          objectFit={
-            objectFit ??
-            (videoDimensions.width > videoDimensions.height
-              ? 'contain'
-              : 'cover')
-          }
-          zOrder={videoZOrder}
-        />
-      ) : (
-        ParticipantVideoFallback && (
-          <ParticipantVideoFallback participant={participant} />
-        )
-      )}
-    </View>
-  );
-};
+    }, [
+      sessionId,
+      videoTrackVisibility,
+      screenShareTrackVisibility,
+      isVisible,
+      call,
+      trackType,
+      isLocalParticipant,
+    ]);
+
+    const onLayout: React.ComponentProps<typeof RTCView>['onLayout'] = (
+      event,
+    ) => {
+      trackSubscriberRef.current?.onLayoutUpdate(event);
+    };
+
+    return (
+      <View
+        onLayout={onLayout}
+        style={[StyleSheet.absoluteFill, videoRenderer.container]}
+      >
+        {call && !isLocalParticipant && (
+          <TrackSubscriber
+            ref={trackSubscriberRef}
+            call={call}
+            participantSessionId={sessionId}
+            trackType={trackType}
+            isVisible={isVisible}
+          />
+        )}
+        {canShowVideo &&
+        videoStreamToRender &&
+        (objectFit || isVideoDimensionsValid) ? (
+          <RTCView
+            style={[StyleSheet.absoluteFill, videoRenderer.videoStream]}
+            streamURL={videoStreamToRender.toURL()}
+            mirror={mirror}
+            ref={viewRef}
+            objectFit={
+              objectFit ??
+              (videoDimensions.width > videoDimensions.height
+                ? 'contain'
+                : 'cover')
+            }
+            zOrder={videoZOrder}
+          />
+        ) : (
+          ParticipantVideoFallback && (
+            <ParticipantVideoFallback participant={participant} />
+          )
+        )}
+      </View>
+    );
+  },
+);
+
+VideoRenderer.displayName = 'VideoRenderer';

package/src/hooks/useAutoEnterPiPEffect.tsx

@@ -31,20 +31,14 @@ export function useAutoEnterPiPEffect(
       return;
     }
 
-    // on unmount always disable PiP mode auto enter
-    return () => {
+    // if disable prop was sent, immediately disable PiP mode auto enter
+    if (disablePictureInPicture) {
       NativeModules.StreamVideoReactNative.canAutoEnterPipMode(false);
-    };
-  }, [disablePictureInPicture]);
-
-  // if disable prop was sent, immediately disable PiP mode
-  useEffect(() => {
-    if (Platform.OS !== 'android') {
-      return;
     }
 
-    if (disablePictureInPicture) {
+    // on unmount always disable PiP mode auto enter
+    return () => {
       NativeModules.StreamVideoReactNative.canAutoEnterPipMode(false);
-    }
+    };
   }, [disablePictureInPicture]);
 }