@stream-io/video-react-native-sdk 1.21.2 → 1.22.1-alpha.0

package/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -10,6 +10,7 @@ import {
   ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton,
   type ViewerLeaveStreamButtonProps,
 } from './ViewerLeaveStreamButton';
+import { callManager } from '../../../modules/call-manager';
 import { useTheme } from '../../../contexts';
 import { Z_INDEX } from '../../../constants';
 import {
@@ -18,12 +19,11 @@ import {
   LiveIndicator,
 } from '../LivestreamTopView';
 import { IconWrapper, Maximize } from '../../../icons';
-import InCallManager from 'react-native-incall-manager';
 import {
-  VolumeOff,
-  VolumeOn,
   PauseIcon,
   PlayIcon,
+  VolumeOff,
+  VolumeOn,
 } from '../../../icons/LivestreamControls';
 
 /**
@@ -104,10 +104,16 @@ export const ViewerLivestreamControls = ({
   };
 
   const toggleAudio = () => {
-    setIsMuted(!isMuted);
-    InCallManager.setForceSpeakerphoneOn(isMuted);
+    const shouldMute = !isMuted;
+    callManager.speaker.setMute(shouldMute);
+    setIsMuted(shouldMute);
   };
 
+  useEffect(() => {
+    // always unmute audio output on mount for consistency
+    callManager.speaker.setMute(false);
+  }, []);
+
   const togglePlayPause = () => {
     setIsPlaying(!isPlaying);
     showPlayPauseButtonWithTimeout();

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { hasScreenShare, SfuModels } from '@stream-io/video-client';
+import {
+  hasScreenShare,
+  SfuModels,
+  StreamVideoParticipant,
+} 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';
@@ -9,6 +13,7 @@ import {
   type VideoRendererProps,
 } from '../../Participant';
 import type { ScreenShareOverlayProps } from '../../utility/ScreenShareOverlay';
+import { useTrackDimensions } from '../../../hooks';
 
 /**
  * Props for the LivestreamLayout component.
@@ -56,11 +61,6 @@ export const LivestreamLayout = ({
       React.ComponentProps<NonNullable<typeof VideoRenderer>>['objectFit']
     >();
 
-  // no need to pass object fit for local participant as the dimensions are for remote tracks
-  const objectFitToBeSet = currentSpeaker?.isLocalParticipant
-    ? undefined
-    : objectFit;
-
   const onDimensionsChange = useCallback(
     (d: SfuModels.VideoDimension | undefined) => {
       if (d) {
@@ -84,48 +84,57 @@ export const LivestreamLayout = ({
         livestreamLayout.container,
       ]}
     >
-      <RemoteVideoTrackDimensionsRenderLessComponent
-        onDimensionsChange={onDimensionsChange}
-      />
       {VideoRenderer &&
         hasOngoingScreenShare &&
         presenter &&
         (presenter.isLocalParticipant && ScreenShareOverlay ? (
           <ScreenShareOverlay />
         ) : (
-          <VideoRenderer trackType="screenShareTrack" participant={presenter} />
+          <>
+            <VideoRenderer
+              trackType="screenShareTrack"
+              objectFit={objectFit}
+              participant={presenter}
+            />
+            <VideoTrackDimensionsRenderLessComponent
+              onDimensionsChange={onDimensionsChange}
+              participant={presenter}
+              trackType="screenShareTrack"
+            />
+          </>
         ))}
       {VideoRenderer && !hasOngoingScreenShare && currentSpeaker && (
-        <VideoRenderer
-          participant={currentSpeaker}
-          objectFit={objectFitToBeSet}
-          trackType="videoTrack"
-        />
+        <>
+          <VideoRenderer
+            participant={currentSpeaker}
+            objectFit={objectFit}
+            trackType="videoTrack"
+          />
+          <VideoTrackDimensionsRenderLessComponent
+            onDimensionsChange={onDimensionsChange}
+            participant={currentSpeaker}
+            trackType="videoTrack"
+          />
+        </>
       )}
     </View>
   );
 };
 
-const RemoteVideoTrackDimensionsRenderLessComponent = ({
+const VideoTrackDimensionsRenderLessComponent = ({
   onDimensionsChange,
+  participant,
+  trackType,
 }: {
   onDimensionsChange: (d: SfuModels.VideoDimension | undefined) => void;
+  participant: StreamVideoParticipant;
+  trackType: 'videoTrack' | 'screenShareTrack';
 }) => {
-  const [dimension, setDimension] = useState<SfuModels.VideoDimension>();
-  const { useCallStatsReport } = useCallStateHooks();
-  const statsReport = useCallStatsReport();
-  const highestFrameHeight = statsReport?.subscriberStats?.highestFrameHeight;
-  const highestFrameWidth = statsReport?.subscriberStats?.highestFrameWidth;
-
-  useEffect(() => {
-    if (highestFrameHeight && highestFrameWidth) {
-      setDimension({ height: highestFrameHeight, width: highestFrameWidth });
-    }
-  }, [highestFrameHeight, highestFrameWidth]);
+  const { width, height } = useTrackDimensions(participant, trackType);
 
   useEffect(() => {
-    onDimensionsChange(dimension);
-  }, [dimension, onDimensionsChange]);
+    onDimensionsChange({ width, height });
+  }, [width, height, onDimensionsChange]);
 
   return null;
 };

package/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import InCallManager from 'react-native-incall-manager';
 import { useTheme } from '../../../contexts';
 import { type ViewerLivestreamTopViewProps } from '../LivestreamTopView/ViewerLivestreamTopView';
 import {
@@ -20,6 +19,7 @@ import {
 import { CallingState, hasVideo } from '@stream-io/video-client';
 import { CallEndedView } from '../LivestreamPlayer/LivestreamEnded';
 import { ViewerLobby } from './ViewerLobby';
+import { getRNInCallManagerLibNoThrow } from '../../../modules/call-manager/PrevLibDetection';
 
 /**
  * Props for the ViewerLivestream component.
@@ -102,8 +102,13 @@ export const ViewerLivestream = ({
 
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
-    InCallManager.start({ media: 'video' });
-    return () => InCallManager.stop();
+    const prevInCallManager = getRNInCallManagerLibNoThrow();
+    if (prevInCallManager) {
+      prevInCallManager.start({ media: 'video' });
+      return () => {
+        prevInCallManager.stop();
+      };
+    }
   }, []);
 
   useEffect(() => {

package/src/hooks/useIsInPiPMode.tsx

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import { RxUtils } from '@stream-io/video-client';
-import { isInPiPModeAndroid$ } from '../utils/internal/rxSubjects';
+import { isInPiPMode$ } from '../utils/internal/rxSubjects';
 
 export function useIsInPiPMode() {
   const [value, setValue] = useState<boolean>(() => {
-    return RxUtils.getCurrentValue(isInPiPModeAndroid$);
+    return RxUtils.getCurrentValue(isInPiPMode$);
   });
 
   useEffect(() => {
-    const subscription = isInPiPModeAndroid$.subscribe({
+    const subscription = isInPiPMode$.subscribe({
       next: setValue,
       error: (err) => {
-        console.log('An error occurred while reading isInPiPModeAndroid$', err);
+        console.log('An error occurred while reading isInPiPMode$', err);
         setValue(false);
       },
     });

package/src/hooks/usePermissionNotification.tsx

@@ -1,8 +1,9 @@
 import { CallingState, OwnCapability } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Alert } from 'react-native';
 import { usePrevious } from '../utils/hooks/usePrevious';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
 
 export type PermissionNotificationProps = {
   /**
@@ -32,13 +33,13 @@ export const usePermissionNotification = (
   const previousHasPermission = usePrevious(hasPermission);
   const callingState = useCallCallingState();
 
-  const showGrantedNotification = useCallback(() => {
+  const showGrantedNotification = useEffectEvent(() => {
     Alert.alert(messageApproved);
-  }, [messageApproved]);
+  });
 
-  const showRevokedNotification = useCallback(() => {
+  const showRevokedNotification = useEffectEvent(() => {
     Alert.alert(messageRevoked);
-  }, [messageRevoked]);
+  });
 
   useEffect(() => {
     // Permission state is not reliable before the call is joined,
@@ -51,11 +52,5 @@ export const usePermissionNotification = (
     } else if (!hasPermission && previousHasPermission) {
       showRevokedNotification();
     }
-  }, [
-    callingState,
-    hasPermission,
-    previousHasPermission,
-    showGrantedNotification,
-    showRevokedNotification,
-  ]);
+  }, [callingState, hasPermission, previousHasPermission]);
 };

package/src/icons/Back.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/BadNetwork.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/CameraSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/LivestreamControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-import { ColorValue } from 'react-native/types';
+import { ColorValue } from 'react-native';
 
 type IconProps = {
   color: ColorValue;

package/src/icons/Lock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/Maximize.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 type IconProps = {

package/src/icons/Mic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/MicOff.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/Phone.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 import { IconTestIds } from '../constants/TestIds';
 
 type Props = {

package/src/icons/PhoneDown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Path, Svg } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 import { IconTestIds } from '../constants/TestIds';
 
 type Props = {

package/src/icons/PinVertical.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/Reaction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/ScreenShare.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 import { IconTestIds } from '../constants/TestIds';
 
 type Props = {

package/src/icons/ScreenShareIndicator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Mask, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 import { IconTestIds } from '../constants/TestIds';
 
 type Props = {

package/src/icons/Spotlight.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/StopScreenShare.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/Video.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 
 type Props = {
   color: ColorValue;

package/src/icons/VideoSlash.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { type ColorValue } from 'react-native/types';
+import { Path, Svg } from 'react-native-svg';
+import { type ColorValue } from 'react-native';
 import { IconTestIds } from '../constants/TestIds';
 
 type Props = {

package/src/index.ts

@@ -27,6 +27,7 @@ export * from './hooks';
 export * from './theme';
 export * from './utils';
 export * from './translations';
+export * from './modules/call-manager';
 
 // Overriding 'StreamVideo' and 'StreamCall' from '@stream-io/video-react-bindings'
 // Explicitly re-exporting to resolve ambiguity.

package/src/modules/call-manager/CallManager.ts

@@ -0,0 +1,116 @@
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+import { AudioDeviceStatus, StreamInCallManagerConfig } from './types';
+
+const NativeManager = NativeModules.StreamInCallManager;
+
+const invariant = (condition: boolean, message: string) => {
+  if (!condition) throw new Error(message);
+};
+
+class AndroidCallManager {
+  private eventEmitter?: NativeEventEmitter;
+
+  /**
+   * Get the current audio device status.
+   */
+  getAudioDeviceStatus = async (): Promise<AudioDeviceStatus> => {
+    invariant(Platform.OS === 'android', 'Supported only on Android');
+    return NativeManager.getAudioDeviceStatus();
+  };
+
+  /**
+   * Switches the audio device to the specified endpoint.
+   *
+   * @param endpointName the device name.
+   */
+  selectAudioDevice = (endpointName: string): void => {
+    invariant(Platform.OS === 'android', 'Supported only on Android');
+    NativeManager.chooseAudioDeviceEndpoint(endpointName);
+  };
+
+  /**
+   * Register a listener for audio device changes.
+   * @param onChange callback to be called when the audio device changes.
+   */
+  addAudioDeviceChangeListener = (
+    onChange: (audioDeviceStatus: AudioDeviceStatus) => void,
+  ): (() => void) => {
+    invariant(Platform.OS === 'android', 'Supported only on Android');
+    this.eventEmitter ??= new NativeEventEmitter(NativeManager);
+    const s = this.eventEmitter.addListener('onAudioDeviceChanged', onChange);
+    return () => s.remove();
+  };
+}
+
+class IOSCallManager {
+  /**
+   * Will trigger the iOS device selector.
+   */
+  showDeviceSelector = (): void => {
+    invariant(Platform.OS === 'ios', 'Supported only on iOS');
+    NativeManager.showAudioRoutePicker();
+  };
+}
+
+class SpeakerManager {
+  /**
+   * Mutes or unmutes the speaker.
+   */
+  setMute = (mute: boolean): void => {
+    if (mute) {
+      NativeManager.muteAudioOutput();
+    } else {
+      NativeManager.unmuteAudioOutput();
+    }
+  };
+
+  /**
+   * Forces speakerphone on/off.
+   */
+  setForceSpeakerphoneOn = (force: boolean): void => {
+    NativeManager.setForceSpeakerphoneOn(force);
+  };
+}
+
+export class CallManager {
+  android = new AndroidCallManager();
+  ios = new IOSCallManager();
+  speaker = new SpeakerManager();
+
+  /**
+   * Starts the in call manager.
+   *
+   * @param config.audioRole The audio role to set. It can be one of the following:
+   * - `'communicator'`: (Default) For use cases like video or voice calls.
+   * It prioritizes low latency and allows manual audio device switching.
+   * Audio routing is controlled by the SDK.
+   * - `'listener'`: For use cases like livestream viewing.
+   * It prioritizes high-quality stereo audio streaming.
+   * Audio routing is controlled by the OS, and manual switching is not supported.
+   *
+   * @param config.deviceEndpointType The default audio device endpoint type to set. It can be one of the following:
+   * - `'speaker'`: (Default) For normal video or voice calls.
+   * - `'earpiece'`: For voice-only mobile call type scenarios.
+   */
+  start = (config?: StreamInCallManagerConfig): void => {
+    NativeManager.setAudioRole(config?.audioRole ?? 'communicator');
+    if (config?.audioRole === 'communicator') {
+      const type = config.deviceEndpointType ?? 'speaker';
+      NativeManager.setDefaultAudioDeviceEndpointType(type);
+    }
+    NativeManager.start();
+  };
+
+  /**
+   * Stops the in call manager.
+   */
+  stop = (): void => {
+    NativeManager.stop();
+  };
+
+  /**
+   * For debugging purposes, will emit a log event with the current audio state.
+   * in the native layer.
+   */
+  logAudioState = (): void => NativeManager.logAudioState();
+}

package/src/modules/call-manager/PrevLibDetection.ts

@@ -0,0 +1,27 @@
+import { getLogger } from '@stream-io/video-client';
+
+declare class RNInCallManagerLib {
+  start(setup?: {
+    auto?: boolean;
+    media?: 'video' | 'audio';
+    ringback?: string;
+  }): void;
+
+  stop(setup?: { busytone?: string }): void;
+}
+
+let rnInCallManagerLib: RNInCallManagerLib | undefined;
+
+try {
+  rnInCallManagerLib = require('react-native-incall-manager').default;
+} catch {}
+
+export function getRNInCallManagerLibNoThrow() {
+  if (rnInCallManagerLib) {
+    getLogger(['getRNInCallManagerLibNoThrow'])(
+      'debug',
+      'react-native-incall-manager library is not required to be installed from 1.22.0 version of the @stream-io/video-react-native-sdk. Please check the migration documentation at https://getstream.io/video/docs/react-native/migration-guides/1.22.0/ for more details.',
+    );
+  }
+  return rnInCallManagerLib;
+}

package/src/modules/call-manager/index.ts

@@ -0,0 +1,5 @@
+import { CallManager } from './CallManager';
+
+export * from './types';
+
+export const callManager = new CallManager();

package/src/modules/call-manager/native-module.d.ts

@@ -0,0 +1,80 @@
+import 'react-native';
+import type { NativeModule } from 'react-native';
+import type { AudioDeviceStatus, AudioRole, DeviceEndpointType } from './types';
+
+export interface CallManager extends NativeModule {
+  /**
+   * Sets the audio role for the call. This should be done before calling **start()**.
+   *
+   * @param role The audio role to set. It can be one of the following:
+   * - `'communicator'`: (Default) For use cases like video or voice calls.
+   * It prioritizes low latency and allows manual audio device switching.
+   * Audio routing is controlled by the SDK.
+   * - `'listener'`: For use cases like livestream viewing.
+   * It prioritizes high-quality stereo audio streaming.
+   * Audio routing is controlled by the OS and manual switching is not supported.
+   */
+  setAudioRole: (role: AudioRole) => void;
+
+  /**
+   * Sets the default audio device endpoint type for the call. This should be done before calling **start()**.
+   * @param type The default audio device endpoint type to set. It can be one of the following:
+   * - `'speaker'`: (Default) For normal video or voice calls.
+   * - `'earpiece'`: For voice only mobile call type scenarios.
+   */
+  setDefaultAudioDeviceEndpointType: (type: DeviceEndpointType) => void;
+
+  /**
+   * Choose an audio device endpoint.
+   * @param endpointName - The name of the audio device endpoint to choose.
+   */
+  chooseAudioDeviceEndpoint: (endpoint: string) => void;
+
+  /**
+   * Get the current audio device status.
+   * @returns The audio device status.
+   */
+  getAudioDeviceStatus: () => Promise<AudioDeviceStatus>;
+
+  /**
+   * Shows the iOS audio route picker.
+   */
+  showAudioRoutePicker: () => void;
+
+  /**
+   * Start the in call manager.
+   */
+  start: () => void;
+
+  /**
+   * Stop the in call manager.
+   */
+  stop: () => void;
+
+  /**
+   * Mutes the speaker
+   */
+  muteAudioOutput: () => void;
+
+  /**
+   * Unmutes the speaker
+   */
+  unmuteAudioOutput: () => void;
+
+  /**
+   * Forces speakerphone on/off.
+   */
+  setForceSpeakerphoneOn: (boolean) => void;
+
+  /**
+   * Log the current audio state natively.
+   * Meant for debugging purposes.
+   */
+  logAudioState: () => void;
+}
+
+declare module 'react-native' {
+  interface NativeModulesStatic {
+    StreamInCallManager: CallManager;
+  }
+}