@stream-io/video-react-native-sdk 1.0.0-rc2.0 → 1.0.1

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 = '1.0.0-rc2.0';
+export const version = '1.0.1';

package/stream-video-react-native.podspec

@@ -1,6 +1,7 @@
 require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
   s.name         = "stream-video-react-native"
@@ -10,11 +11,33 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => (min_ios_version_supported || '12.0') }
   s.source       = { :git => "https://github.com/GetStream/stream-video-js/tree/main/packages/react-native-sdk.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
-
-  s.dependency "React-Core"
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
   s.dependency "stream-react-native-webrtc"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+      s.dependency "React-RCTFabric"
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
 end