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

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/index.ts

@@ -7,6 +7,7 @@ export * from './useIsInPiPMode';
 export * from './useAutoEnterPiPEffect';
 export * from './useScreenShareButton';
 export * from './useScreenShareAudioMixing';
+export * from './useLoopbackRecording';
 export * from './useTrackDimensions';
 export * from './useScreenshot';
 export * from './useModeration';

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]);
 }