@stream-io/video-react-native-sdk 0.10.4 → 0.10.6

package/ios/PictureInPicture/YpCbCrPixelRange+Default.swift

@@ -0,0 +1,32 @@
+ //
+ // Copyright © 2024 Stream.io Inc. All rights reserved.
+ //
+
+ import Accelerate
+ import Foundation
+
+ /// Extension of vImage_YpCbCrPixelRange to include a default configuration.
+ extension vImage_YpCbCrPixelRange {
+
+     /// Initializes a default pixel range for YpCbCr pixel format.
+     /// This default configuration is often used when converting YpCbCr to RGB.
+     /// - Yp_bias: The bias for the Y' (luma) component, typically 0.
+     /// - CbCr_bias: The bias for the Cb and Cr (chroma) components, usually set to 128 to center the chroma values.
+     /// - YpRangeMax: The maximum value for the Y' range, typically 255.
+     /// - CbCrRangeMax: The maximum value for the Cb and Cr range, also usually 255.
+     /// - YpMax: The maximum possible value for Y', generally 255.
+     /// - YpMin: The minimum possible value for Y', usually set to 1 for video ranges.
+     /// - CbCrMax: The maximum possible value for Cb and Cr, typically 255.
+     /// - CbCrMin: The minimum possible value for Cb and Cr, often 0.
+     /// Reference: [Apple's documentation on vImageConvert_YpCbCrToARGB](https://developer.apple.com/documentation/accelerate/1533189-vimageconvert_ypcbcrtoargb_gener)
+     static let `default` = vImage_YpCbCrPixelRange(
+         Yp_bias: 0, /// The bias applied to the Y' component.
+         CbCr_bias: 128, /// The bias applied to the Cb and Cr components.
+         YpRangeMax: 255, /// The maximum value of the Y' range.
+         CbCrRangeMax: 255, /// The maximum value of the Cb and Cr range.
+         YpMax: 255, /// The maximum value of Y'.
+         YpMin: 1, /// The minimum value of Y' (often used for setting video range).
+         CbCrMax: 255, /// The maximum value of Cb and Cr.
+         CbCrMin: 0 /// The minimum value of Cb and Cr.
+     )
+ }

package/ios/RTCViewPip.swift

@@ -0,0 +1,69 @@
+//
+//  RTCViewPip.swift
+//  stream-video-react-native
+//
+//  Created by santhosh vaiyapuri on 22/08/2024.
+//
+
+import Foundation
+
+@objc(RTCViewPip)
+class RTCViewPip: UIView {
+    
+    private lazy var pictureInPictureController = StreamPictureInPictureController()
+    private var webRtcModule: WebRTCModule?
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupView()
+    }
+    
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        setupView()
+    }
+    
+    private func setupView() {
+        let videoView = UIView()
+        self.addSubview(videoView)
+        pictureInPictureController?.sourceView = videoView
+        videoView.backgroundColor = UIColor.clear // make it transparent
+    }
+    
+    func setWebRtcModule(_ module: WebRTCModule) {
+        webRtcModule = module
+    }
+    
+    @objc func setStreamURL(_ streamReactTag: NSString) {
+        webRtcModule?.workerQueue.async {
+            let stream = self.webRtcModule?.stream(forReactTag: String(streamReactTag))
+            let videoTracks = stream?.videoTracks ?? []
+            let videoTrack = videoTracks.first
+            if videoTrack == nil {
+                NSLog("PiP - No video stream for react tag: -\(streamReactTag)")
+            } else {
+                DispatchQueue.main.async {
+                    self.pictureInPictureController?.track = videoTrack
+                }
+            }
+        }
+    }
+    
+    @objc
+    func onCallClosed() {
+        DispatchQueue.main.async {
+            self.pictureInPictureController?.cleanup()
+            self.pictureInPictureController = nil
+        }
+    }
+    
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        let isVisible = self.superview != nil && self.window != nil;
+        if (!isVisible) {
+            // view is detached so we cleanup the pip controller
+            // taken from:  https://github.com/software-mansion/react-native-screens/blob/main/Example/ios/ScreensExample/RNSSampleLifecycleAwareView.m
+            onCallClosed()
+        }
+    }
+}

package/ios/RTCViewPipManager.mm

@@ -0,0 +1,16 @@
+//
+//  RTCViewPipManager.m
+//  stream-video-react-native
+//
+//  Created by santhosh vaiyapuri on 22/08/2024.
+//
+// tutorial used: https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-2-ui-components-907767123d9e
+
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RTCViewPipManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(streamURL, NSString)
+RCT_EXTERN_METHOD(onCallClosed:(nonnull NSNumber*) reactTag)
+
+@end

package/ios/RTCViewPipManager.swift

@@ -0,0 +1,34 @@
+//
+//  RTCViewPipManager.swift
+//  stream-video-react-native
+//
+//  Created by santhosh vaiyapuri on 22/08/2024.
+//
+
+import Foundation
+
+@objc (RTCViewPipManager)
+class RTCViewPipManager: RCTViewManager {
+    
+    override func view() -> UIView! {
+        let view = RTCViewPip()
+        view.setWebRtcModule(self.bridge.module(forName: "WebRTCModule") as! WebRTCModule)
+        return view
+    }
+    
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    @objc func onCallClosed(_ reactTag: NSNumber) {
+        self.bridge!.uiManager.addUIBlock { (_: RCTUIManager?, viewRegistry: [NSNumber: UIView]?) in
+            guard let view = viewRegistry?[reactTag] as? RTCViewPip else {
+                if RCT_DEBUG == 1 {
+                    print("Invalid view returned from registry, expecting RTCViewPip")
+                }
+                return
+            }
+            view.onCallClosed()
+        }
+    }
+}

package/ios/StreamVideoReactNative-Bridging-Header.h

@@ -1,3 +1,14 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTViewManager.h>
 #import <React/RCTEventEmitter.h>
+#import <React/RCTLog.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTView.h>
+#import <React/RCTBridge.h>
+
+#import <WebRTC/RTCCVPixelBuffer.h>
+#import <WebRTC/RTCVideoFrame.h>
+#import <WebRTC/RTCVideoTrack.h>
+#import <WebRTC/RTCVideoRenderer.h>
+#import <WebRTC/RTCVideoFrameBuffer.h>
+#import "WebRTCModule.h"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

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

@@ -37,6 +37,7 @@ import {
   ScreenShareOverlay as DefaultScreenShareOverlay,
   ScreenShareOverlayProps,
 } from '../../utility/ScreenShareOverlay';
+import RTCViewPipIOS from './RTCViewPipIOS';
 
 export type StreamReactionType = StreamReaction & {
   icon: string;
@@ -88,6 +89,14 @@ export type CallContentProps = Pick<
      * This will apply the landscape mode styles to the component.
      */
     landscape?: boolean;
+    /*
+     * If true, includes the local participant video in the PiP mode for iOS
+     */
+    iOSPiPIncludeLocalParticipantVideo?: boolean;
+    /**
+     * If true, disables the Picture-in-Picture mode for iOS and Android
+     */
+    disablePictureInPicture?: boolean;
   };
 
 export const CallContent = ({
@@ -109,6 +118,8 @@ export const CallContent = ({
   layout = 'grid',
   landscape = false,
   supportedReactions,
+  iOSPiPIncludeLocalParticipantVideo,
+  disablePictureInPicture,
 }: CallContentProps) => {
   const [
     showRemoteParticipantInFloatingView,
@@ -124,7 +135,7 @@ export const CallContent = ({
     useLocalParticipant,
   } = useCallStateHooks();
 
-  useAutoEnterPiPEffect();
+  useAutoEnterPiPEffect(disablePictureInPicture);
 
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
@@ -132,7 +143,7 @@ export const CallContent = ({
   const _remoteParticipants = useRemoteParticipants();
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const localParticipant = useLocalParticipant();
-  const isInPiPMode = useIsInPiPMode();
+  const isInPiPMode = useIsInPiPMode(disablePictureInPicture);
   const hasScreenShare = useHasOngoingScreenShare();
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
 
@@ -195,48 +206,55 @@ export const CallContent = ({
   };
 
   return (
-    <View style={[styles.container, landscapeStyles, callContent.container]}>
-      <View style={[styles.container, callContent.callParticipantsContainer]}>
-        <View
-          style={[styles.view, callContent.topContainer]}
-          // "box-none" disallows the container view to be not take up touches
-          // and allows only the top and floating view (its child views) to take up the touches
-          pointerEvents="box-none"
-        >
-          {!isInPiPMode && CallTopView && (
-            <CallTopView
-              onBackPressed={onBackPressed}
-              onParticipantInfoPress={onParticipantInfoPress}
-              ParticipantsInfoBadge={ParticipantsInfoBadge}
-            />
-          )}
-          {showFloatingView && FloatingParticipantView && (
-            <FloatingParticipantView
-              participant={
-                isRemoteParticipantInFloatingView
-                  ? remoteParticipants[0]
-                  : localParticipant
-              }
-              onPressHandler={handleFloatingViewParticipantSwitch}
-              supportedReactions={supportedReactions}
-              {...participantViewProps}
-            />
+    <>
+      {!disablePictureInPicture && (
+        <RTCViewPipIOS
+          includeLocalParticipantVideo={iOSPiPIncludeLocalParticipantVideo}
+        />
+      )}
+      <View style={[styles.container, landscapeStyles, callContent.container]}>
+        <View style={[styles.container, callContent.callParticipantsContainer]}>
+          <View
+            style={[styles.view, callContent.topContainer]}
+            // "box-none" disallows the container view to be not take up touches
+            // and allows only the top and floating view (its child views) to take up the touches
+            pointerEvents="box-none"
+          >
+            {!isInPiPMode && CallTopView && (
+              <CallTopView
+                onBackPressed={onBackPressed}
+                onParticipantInfoPress={onParticipantInfoPress}
+                ParticipantsInfoBadge={ParticipantsInfoBadge}
+              />
+            )}
+            {showFloatingView && FloatingParticipantView && (
+              <FloatingParticipantView
+                participant={
+                  isRemoteParticipantInFloatingView
+                    ? remoteParticipants[0]
+                    : localParticipant
+                }
+                onPressHandler={handleFloatingViewParticipantSwitch}
+                supportedReactions={supportedReactions}
+                {...participantViewProps}
+              />
+            )}
+          </View>
+          {showSpotlightLayout ? (
+            <CallParticipantsSpotlight {...callParticipantsSpotlightProps} />
+          ) : (
+            <CallParticipantsGrid {...callParticipantsGridProps} />
           )}
         </View>
-        {showSpotlightLayout ? (
-          <CallParticipantsSpotlight {...callParticipantsSpotlightProps} />
-        ) : (
-          <CallParticipantsGrid {...callParticipantsGridProps} />
+
+        {!isInPiPMode && CallControls && (
+          <CallControls
+            onHangupCallHandler={onHangupCallHandler}
+            landscape={landscape}
+          />
         )}
       </View>
-
-      {!isInPiPMode && CallControls && (
-        <CallControls
-          onHangupCallHandler={onHangupCallHandler}
-          landscape={landscape}
-        />
-      )}
-    </View>
+    </>
   );
 };
 

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

@@ -0,0 +1,138 @@
+import {
+  CallingState,
+  hasScreenShare,
+  speakerLayoutSortPreset,
+} 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 } from 'react';
+import {
+  findNodeHandle,
+  HostComponent,
+  Platform,
+  requireNativeComponent,
+  UIManager,
+} from 'react-native';
+import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
+
+const COMPONENT_NAME = 'RTCViewPip';
+
+type RTCViewPipNativeProps = {
+  streamURL?: string;
+};
+
+// workaround to support hot reloading
+// https://medium.com/tribalscale/beyond-the-framework-using-react-native-with-swift-and-kotlin-cfccf4bb9a03
+let RTCViewPipNative: HostComponent<RTCViewPipNativeProps>;
+
+if (__DEV__) {
+  /* @ts-ignore */
+  const cachedView = global.RTCViewPipNative as
+    | HostComponent<RTCViewPipNativeProps>
+    | undefined;
+  if (!cachedView) {
+    RTCViewPipNative = requireNativeComponent(COMPONENT_NAME);
+    /* @ts-ignore */
+    global.RTCViewPipNative = RTCViewPipNative;
+  } else {
+    RTCViewPipNative = cachedView;
+  }
+} else {
+  RTCViewPipNative = requireNativeComponent(COMPONENT_NAME);
+}
+
+/** Wrapper for the native view
+ * meant to stay private and not exposed */
+const RTCViewPip = React.forwardRef<
+  React.Ref<any>,
+  {
+    streamURL?: string;
+  }
+>((props, ref) => {
+  if (Platform.OS !== 'ios') return null;
+  // @ts-ignore
+  return <RTCViewPipNative streamURL={props.streamURL} ref={ref} />;
+});
+
+type Props = {
+  includeLocalParticipantVideo?: boolean;
+};
+
+const RTCViewPipIOS = ({ includeLocalParticipantVideo }: Props) => {
+  const call = useCall();
+  const { useParticipants } = useCallStateHooks();
+  const _allParticipants = useParticipants({
+    sortBy: speakerLayoutSortPreset,
+  });
+  const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+
+  const [participantInSpotlight] = allParticipants.filter((participant) =>
+    includeLocalParticipantVideo ? true : !participant.isLocalParticipant
+  );
+
+  useEffect(() => {
+    shouldDisableIOSLocalVideoOnBackgroundRef.current =
+      !includeLocalParticipantVideo;
+  }, [includeLocalParticipantVideo]);
+
+  const [videoStreamToRender, setVideoStreamToRender] =
+    React.useState<MediaStream>();
+
+  const nativeRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (!participantInSpotlight) {
+      setVideoStreamToRender(undefined);
+      return;
+    }
+    const { videoStream, screenShareStream } = participantInSpotlight;
+
+    const isScreenSharing = hasScreenShare(participantInSpotlight);
+
+    const _videoStreamToRender = (isScreenSharing
+      ? screenShareStream
+      : videoStream) as unknown as MediaStream | undefined;
+
+    setVideoStreamToRender(_videoStreamToRender);
+  }, [participantInSpotlight]);
+
+  React.useEffect(() => {
+    let callClosedInvokedOnce = false;
+    const onCallClosed = () => {
+      if (callClosedInvokedOnce) {
+        return;
+      }
+      callClosedInvokedOnce = true;
+      const node = findNodeHandle(nativeRef.current);
+      if (node !== null) {
+        UIManager.dispatchViewManagerCommand(
+          node,
+          // @ts-ignore
+          UIManager.getViewManagerConfig(COMPONENT_NAME).Commands.onCallClosed,
+          []
+        );
+      }
+      shouldDisableIOSLocalVideoOnBackgroundRef.current = true;
+    };
+    const unsubFunc = call?.on('call.ended', () => {
+      onCallClosed();
+    });
+    const subscription = call?.state.callingState$.subscribe((state) => {
+      if (state === CallingState.LEFT || state === CallingState.IDLE) {
+        onCallClosed();
+      }
+    });
+    return () => {
+      onCallClosed();
+      unsubFunc?.();
+      subscription?.unsubscribe();
+    };
+  }, [call]);
+
+  return (
+    <RTCViewPip streamURL={videoStreamToRender?.toURL()} ref={nativeRef} />
+  );
+};
+
+export default RTCViewPipIOS;

package/src/components/Call/CallContent/index.ts

@@ -1 +1,2 @@
 export * from './CallContent';
+export * from './RTCViewPipIOS';

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

@@ -10,14 +10,17 @@ import { ComponentTestIds } from '../../../constants/TestIds';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { CallContentProps } from '../CallContent';
 import { ParticipantViewComponentProps } from '../../Participant';
-import { useIsInPiPMode } from '../../../hooks';
+import { useIsInPiPMode } from '../../../hooks/useIsInPiPMode';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 
 /**
  * Props for the CallParticipantsGrid component.
  */
 export type CallParticipantsGridProps = ParticipantViewComponentProps &
-  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
+  Pick<
+    CallContentProps,
+    'supportedReactions' | 'CallParticipantsList' | 'disablePictureInPicture'
+  > &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
@@ -44,6 +47,7 @@ export const CallParticipantsGrid = ({
   showLocalParticipant = false,
   supportedReactions,
   landscape,
+  disablePictureInPicture,
 }: CallParticipantsGridProps) => {
   const {
     theme: { colors, callParticipantsGrid },
@@ -60,7 +64,7 @@ export const CallParticipantsGrid = ({
     flexDirection: landscape ? 'row' : 'column',
   };
 
-  const isInPiPMode = useIsInPiPMode();
+  const isInPiPMode = useIsInPiPMode(disablePictureInPicture);
 
   const showFloatingView =
     !isInPiPMode &&

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

@@ -17,7 +17,7 @@ import {
 } from '../../Participant';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { CallContentProps } from '../CallContent';
-import { useIsInPiPMode } from '../../../hooks';
+import { useIsInPiPMode } from '../../../hooks/useIsInPiPMode';
 
 /**
  * Props for the CallParticipantsSpotlight component.
@@ -25,7 +25,10 @@ import { useIsInPiPMode } from '../../../hooks';
 export type CallParticipantsSpotlightProps = ParticipantViewComponentProps &
   Pick<
     CallContentProps,
-    'supportedReactions' | 'CallParticipantsList' | 'ScreenShareOverlay'
+    | 'supportedReactions'
+    | 'CallParticipantsList'
+    | 'ScreenShareOverlay'
+    | 'disablePictureInPicture'
   > &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
@@ -50,6 +53,7 @@ export const CallParticipantsSpotlight = ({
   VideoRenderer,
   supportedReactions,
   landscape,
+  disablePictureInPicture,
 }: CallParticipantsSpotlightProps) => {
   const {
     theme: { colors, callParticipantsSpotlight },
@@ -64,7 +68,7 @@ export const CallParticipantsSpotlight = ({
     participantInSpotlight && hasScreenShare(participantInSpotlight);
   const isUserAloneInCall = _allParticipants?.length === 1;
 
-  const isInPiP = useIsInPiPMode();
+  const isInPiP = useIsInPiPMode(disablePictureInPicture);
 
   const participantViewProps: ParticipantViewComponentProps = {
     ParticipantLabel,

package/src/hooks/useAutoEnterPiPEffect.tsx

@@ -1,16 +1,20 @@
 import { useEffect } from 'react';
 import { NativeModules, Platform } from 'react-native';
 
-export function useAutoEnterPiPEffect() {
+export function useAutoEnterPiPEffect(
+  disablePictureInPicture: boolean | undefined
+) {
   useEffect(() => {
     if (Platform.OS !== 'android') {
       return;
     }
 
-    NativeModules.StreamVideoReactNative.canAutoEnterPipMode(true);
+    NativeModules.StreamVideoReactNative.canAutoEnterPipMode(
+      !disablePictureInPicture
+    );
 
     return () => {
       NativeModules.StreamVideoReactNative.canAutoEnterPipMode(false);
     };
-  }, []);
+  }, [disablePictureInPicture]);
 }

package/src/hooks/useIsInPiPMode.tsx

@@ -10,9 +10,11 @@ const PIP_CHANGE_EVENT = 'StreamVideoReactNative_PIP_CHANGE_EVENT';
 
 const isAndroid8OrAbove = Platform.OS === 'android' && Platform.Version >= 26;
 
-export function useIsInPiPMode() {
+export function useIsInPiPMode(disablePictureInPicture: boolean | undefined) {
   const [isInPiPMode, setIsInPiPMode] = useState(
-    isAndroid8OrAbove && AppState.currentState === 'background'
+    disablePictureInPicture &&
+      isAndroid8OrAbove &&
+      AppState.currentState === 'background'
   );
 
   useEffect(() => {
@@ -39,7 +41,7 @@ export function useIsInPiPMode() {
       'change',
       (nextAppState) => {
         if (nextAppState === 'background') {
-          setIsInPiPMode(true); // set with an assumption that its enabled so that UI disabling happens faster
+          setIsInPiPMode(!disablePictureInPicture); // set with an assumption that its enabled so that UI disabling happens faster
           // if PiP was not enabled anyway, then in the next code we ll set it to false and UI wont be shown anyway
         }
         setFromNativeMethod();
@@ -52,7 +54,7 @@ export function useIsInPiPMode() {
       subscriptionPiPChange.remove();
       subscriptionAppState.remove();
     };
-  }, []);
+  }, [disablePictureInPicture]);
 
   return isInPiPMode;
 }

package/src/providers/StreamCall.tsx

@@ -8,6 +8,7 @@ import {
 } from '../utils/push/utils';
 import { useAndroidKeepCallAliveEffect } from '../hooks/useAndroidKeepCallAliveEffect';
 import { AppState, NativeModules, Platform } from 'react-native';
+import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../utils/internal/shouldDisableIOSLocalVideoOnBackground';
 
 export type StreamCallProps = {
   /**
@@ -77,7 +78,9 @@ const AppStateListener = () => {
             }
           );
         } else {
-          call?.camera?.disable();
+          if (shouldDisableIOSLocalVideoOnBackgroundRef.current) {
+            call?.camera?.disable();
+          }
         }
         appState.current = nextAppState;
       }
@@ -92,7 +95,7 @@ const AppStateListener = () => {
 };
 
 /**
- * This is a renderless component is used to keep the call alive on Android device using useAndroidKeepCallAliveEffect.
+ * This is a renderless component to keep the call alive on Android device using useAndroidKeepCallAliveEffect.
  * useAndroidKeepCallAliveEffect needs to called inside a child of StreamCallProvider.
  */
 const AndroidKeepCallAlive = () => {

package/src/utils/internal/shouldDisableIOSLocalVideoOnBackground.ts

@@ -0,0 +1,3 @@
+export const shouldDisableIOSLocalVideoOnBackgroundRef = {
+  current: true,
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.10.4';
+export const version = '0.10.6';