@stream-io/video-react-native-sdk 0.6.21 → 0.7.0

package/dist/typescript/providers/index.d.ts

@@ -1,4 +1,3 @@
 export * from './StreamVideo';
 export * from './StreamCall';
-export * from './MediaStreamManagement';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/providers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "0.6.21";
+export declare const version = "0.7.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/typescript/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/package.json

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

package/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx

@@ -1,4 +1,4 @@
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
 import { Mic, MicOff } from '../../../icons';
@@ -28,33 +28,31 @@ export const ToggleAudioPreviewButton = ({
       variants: { buttonSizes },
     },
   } = useTheme();
-  const call = useCall();
   const { useMicrophoneState } = useCallStateHooks();
-  const { status } = useMicrophoneState();
+  const { isMute, microphone } = useMicrophoneState();
 
   const onPress = async () => {
     if (onPressHandler) {
       onPressHandler();
       return;
     }
-    await call?.microphone.toggle();
+    await microphone.toggle();
   };
 
   return (
     <CallControlsButton
       onPress={onPress}
-      color={status === 'enabled' ? colors.static_white : colors.static_black}
+      color={!isMute ? colors.static_white : colors.static_black}
       size={buttonSizes.md}
       style={{
         container: {
-          shadowColor:
-            status === 'enabled' ? colors.static_white : colors.static_black,
+          shadowColor: !isMute ? colors.static_white : colors.static_black,
           ...toggleAudioPreviewButton.container,
         },
         svgContainer: toggleAudioPreviewButton.svgContainer,
       }}
     >
-      {status === 'enabled' ? (
+      {!isMute ? (
         <Mic color={colors.static_black} />
       ) : (
         <MicOff color={colors.static_white} />

package/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCall,
-  useCallStateHooks,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { CallControlsButton } from './CallControlsButton';
 import { Mic, MicOff } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -26,9 +22,8 @@ export type ToggleAudioPublishingButtonProps = {
 export const ToggleAudioPublishingButton = ({
   onPressHandler,
 }: ToggleAudioPublishingButtonProps) => {
-  const call = useCall();
   const { useMicrophoneState } = useCallStateHooks();
-  const { status } = useMicrophoneState();
+  const { isMute, microphone } = useMicrophoneState();
 
   const {
     theme: { colors, toggleAudioPublishingButton },
@@ -39,17 +34,17 @@ export const ToggleAudioPublishingButton = ({
       return;
     }
 
-    await call?.microphone.toggle();
+    await microphone.toggle();
   };
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
       <CallControlsButton
         onPress={onPress}
-        color={status === 'enabled' ? colors.static_white : colors.overlay_dark}
+        color={!isMute ? colors.static_white : colors.overlay_dark}
         style={toggleAudioPublishingButton}
       >
-        {status === 'enabled' ? (
+        {!isMute ? (
           <Mic color={colors.static_black} />
         ) : (
           <MicOff color={colors.static_white} />

package/src/components/Call/CallControls/ToggleCameraFaceButton.tsx

@@ -1,9 +1,5 @@
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCall,
-  useCallStateHooks,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { CameraSwitch } from '../../../icons';
@@ -26,9 +22,8 @@ export type ToggleCameraFaceButtonProps = {
 export const ToggleCameraFaceButton = ({
   onPressHandler,
 }: ToggleCameraFaceButtonProps) => {
-  const call = useCall();
   const { useCameraState, useCallSettings } = useCallStateHooks();
-  const { status, direction } = useCameraState();
+  const { camera, isMute, direction } = useCameraState();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
 
@@ -41,7 +36,7 @@ export const ToggleCameraFaceButton = ({
       return;
     }
 
-    await call?.camera.flip();
+    await camera.flip();
   };
 
   if (!isVideoEnabledInCall) {
@@ -53,7 +48,7 @@ export const ToggleCameraFaceButton = ({
       <CallControlsButton
         onPress={onPress}
         color={direction === 'back' ? colors.overlay_dark : colors.static_white}
-        disabled={status === 'disabled'}
+        disabled={isMute}
         style={toggleCameraFaceButton}
       >
         <CameraSwitch

package/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useTheme } from '../../../contexts';
 import { CallControlsButton } from './CallControlsButton';
 import { Video, VideoSlash } from '../../../icons';
@@ -28,17 +28,16 @@ export const ToggleVideoPreviewButton = ({
       variants: { buttonSizes },
     },
   } = useTheme();
-  const call = useCall();
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
-  const { status } = useCameraState();
+  const { isMute, camera } = useCameraState();
   const onPress = async () => {
     if (onPressHandler) {
       onPressHandler();
       return;
     }
-    await call?.camera.toggle();
+    await camera.toggle();
   };
 
   if (!isVideoEnabledInCall) {
@@ -48,18 +47,17 @@ export const ToggleVideoPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={status === 'enabled' ? colors.static_white : colors.static_black}
+      color={!isMute ? colors.static_white : colors.static_black}
       size={buttonSizes.md}
       style={{
         container: {
-          shadowColor:
-            status === 'enabled' ? colors.static_white : colors.static_black,
+          shadowColor: !isMute ? colors.static_white : colors.static_black,
           ...toggleVideoPreviewButton.container,
         },
         svgContainer: toggleVideoPreviewButton.svgContainer,
       }}
     >
-      {status === 'enabled' ? (
+      {!isMute ? (
         <Video color={colors.static_black} />
       ) : (
         <VideoSlash color={colors.static_white} />

package/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCall,
-  useCallStateHooks,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { CallControlsButton } from './CallControlsButton';
 import { Video, VideoSlash } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -26,9 +22,8 @@ export type ToggleVideoPublishingButtonProps = {
 export const ToggleVideoPublishingButton = ({
   onPressHandler,
 }: ToggleVideoPublishingButtonProps) => {
-  const call = useCall();
   const { useCameraState, useCallSettings } = useCallStateHooks();
-  const { status } = useCameraState();
+  const { camera, isMute } = useCameraState();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
@@ -39,7 +34,7 @@ export const ToggleVideoPublishingButton = ({
       onPressHandler();
       return;
     }
-    await call?.camera.toggle();
+    await camera.toggle();
   };
 
   if (!isVideoEnabledInCall) {
@@ -50,9 +45,9 @@ export const ToggleVideoPublishingButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={status === 'enabled' ? colors.static_white : colors.overlay_dark}
+        color={!isMute ? colors.static_white : colors.overlay_dark}
       >
-        {status === 'enabled' ? (
+        {!isMute ? (
           <Video color={colors.static_black} />
         ) : (
           <VideoSlash color={colors.static_white} />

package/src/components/Call/Lobby/Lobby.tsx

@@ -22,6 +22,7 @@ import {
   LobbyFooter as DefaultLobbyFooter,
   LobbyFooterProps,
 } from './LobbyFooter';
+import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefaultMediaStreamSettings';
 
 /**
  * Props for the Lobby Component.
@@ -67,10 +68,11 @@ export const Lobby = ({
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
-  const { status: cameraStatus, mediaStream } = useCameraState();
+  const { isMute: cameraIsMuted, mediaStream } = useCameraState();
   const { t } = useI18n();
   const localVideoStream = mediaStream as unknown as MediaStream | undefined;
 
+  useApplyDefaultMediaStreamSettings();
   useCallMediaStreamCleanup();
 
   const connectedUserAsParticipant = {
@@ -124,7 +126,7 @@ export const Lobby = ({
               ]}
             >
               <View style={styles.topView} />
-              {cameraStatus === 'enabled' && localVideoStream ? (
+              {!cameraIsMuted && localVideoStream ? (
                 <RTCView
                   mirror={true}
                   streamURL={localVideoStream.toURL()}

package/src/components/Call/RingingCallContent/IncomingCall.tsx

@@ -21,6 +21,7 @@ import {
   IncomingCallControlsProps,
 } from '../CallControls';
 import { useTheme } from '../../../contexts';
+import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefaultMediaStreamSettings';
 
 /**
  * Props for the IncomingCall Component.
@@ -57,6 +58,8 @@ export const IncomingCall = ({
     theme: { colors, incomingCall, typefaces },
   } = useTheme();
 
+  useApplyDefaultMediaStreamSettings();
+
   const landscapeContentStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };

package/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { UserInfo } from './UserInfo';
 import { Z_INDEX } from '../../../constants';
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 import { MediaStream, RTCView } from '@stream-io/react-native-webrtc';
 import { useTheme } from '../../../contexts/ThemeContext';
 import {
@@ -18,6 +14,7 @@ import {
   CallTopViewProps,
 } from '../CallTopView';
 import { useCallMediaStreamCleanup } from '../../../hooks/internal/useCallMediaStreamCleanup';
+import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefaultMediaStreamSettings';
 
 /**
  * Props for the OutgoingCall Component.
@@ -52,6 +49,9 @@ export const OutgoingCall = ({
   } = useTheme();
   const { t } = useI18n();
 
+  useApplyDefaultMediaStreamSettings();
+  useCallMediaStreamCleanup();
+
   const landscapeContentStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
@@ -104,16 +104,13 @@ const Background = () => {
   const {
     theme: { colors, outgoingCall },
   } = useTheme();
-  const call = useCall();
   const { useCameraState } = useCallStateHooks();
-  const { status } = useCameraState();
-  const localVideoStream = call?.camera.state.mediaStream as unknown as
+  const { isMute, camera } = useCameraState();
+  const localVideoStream = camera.state.mediaStream as unknown as
     | MediaStream
     | undefined;
 
-  useCallMediaStreamCleanup();
-
-  if (status === 'disabled' || !localVideoStream) {
+  if (isMute || !localVideoStream) {
     return (
       <View
         style={[

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

@@ -1,4 +1,4 @@
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
 import { Pressable, StyleSheet, View } from 'react-native';
@@ -8,9 +8,8 @@ import { Mic, MicOff } from '../../../icons';
  * The LivestreamAudioControlButton controls the audio stream publish/unpublish while in the livestream for the host.
  */
 export const LivestreamAudioControlButton = () => {
-  const call = useCall();
   const { useMicrophoneState } = useCallStateHooks();
-  const { status } = useMicrophoneState();
+  const { isMute, microphone } = useMicrophoneState();
   const {
     theme: {
       colors,
@@ -20,7 +19,7 @@ export const LivestreamAudioControlButton = () => {
   } = useTheme();
 
   const onPress = async () => {
-    await call?.microphone.toggle();
+    await microphone.toggle();
   };
 
   return (
@@ -36,33 +35,22 @@ export const LivestreamAudioControlButton = () => {
         livestreamAudioControlButton.container,
       ]}
     >
-      {status === 'enabled' ? (
-        <View
-          style={[
-            styles.icon,
-            {
-              height: iconSizes.sm,
-              width: iconSizes.sm,
-            },
-            livestreamAudioControlButton.icon,
-          ]}
-        >
+      <View
+        style={[
+          styles.icon,
+          {
+            height: iconSizes.sm,
+            width: iconSizes.sm,
+          },
+          livestreamAudioControlButton.icon,
+        ]}
+      >
+        {!isMute ? (
           <Mic color={colors.static_white} />
-        </View>
-      ) : (
-        <View
-          style={[
-            styles.icon,
-            {
-              height: iconSizes.sm,
-              width: iconSizes.sm,
-            },
-            livestreamAudioControlButton.icon,
-          ]}
-        >
+        ) : (
           <MicOff color={colors.static_white} />
-        </View>
-      )}
+        )}
+      </View>
     </Pressable>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
 import { Pressable, StyleSheet, View } from 'react-native';
@@ -8,9 +8,8 @@ import { Video, VideoSlash } from '../../../icons';
  * The LivestreamVideoControlButton controls the video stream publish/unpublish while in the livestream for the host.
  */
 export const LivestreamVideoControlButton = () => {
-  const call = useCall();
   const { useCameraState, useCallSettings } = useCallStateHooks();
-  const { status } = useCameraState();
+  const { isMute, camera } = useCameraState();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
@@ -22,7 +21,7 @@ export const LivestreamVideoControlButton = () => {
   } = useTheme();
 
   const onPress = async () => {
-    await call?.camera.toggle();
+    await camera.toggle();
   };
 
   if (!isVideoEnabledInCall) {
@@ -42,7 +41,7 @@ export const LivestreamVideoControlButton = () => {
         livestreamVideoControlButton.container,
       ]}
     >
-      {status === 'enabled' ? (
+      {!isMute ? (
         <View
           style={[
             styles.icon,

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useAndroidKeepCallAliveEffect';
 export * from './useIsIosScreenshareBroadcastStarted';
 export * from './useIsInPiPMode';
 export * from './useAutoEnterPiPEffect';
+export * from './useApplyDefaultMediaStreamSettings';

package/src/hooks/useApplyDefaultMediaStreamSettings.tsx

@@ -0,0 +1,42 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useEffect, useMemo } from 'react';
+
+/**
+ * Hook when used applies the default call media stream audio/video settings.
+ */
+export const useApplyDefaultMediaStreamSettings = () => {
+  const { useCallSettings } = useCallStateHooks();
+  const settings = useCallSettings();
+  const call = useCall();
+
+  /*
+   * This is the object is used to track the initial audio/video enablement
+   * Uses backend settings or the Prop to set initial audio/video enabled
+   * Backend settings is applied only if the prop was undefined -- meaning user did not provide any value
+   * Memoization is needed to avoid unnecessary useEffect triggers
+   */
+  const { initialAudioEnabled, initialVideoEnabled } = useMemo(() => {
+    return {
+      initialAudioEnabled: settings?.audio.mic_default_on,
+      initialVideoEnabled: settings?.video.camera_default_on,
+    };
+  }, [settings?.audio.mic_default_on, settings?.video.camera_default_on]);
+
+  useEffect(() => {
+    if (initialAudioEnabled !== undefined) {
+      if (initialAudioEnabled) {
+        call?.microphone.enable();
+      } else {
+        call?.microphone.disable();
+      }
+    }
+
+    if (initialVideoEnabled !== undefined) {
+      if (initialVideoEnabled) {
+        call?.camera.enable();
+      } else {
+        call?.camera.disable();
+      }
+    }
+  }, [call, initialAudioEnabled, initialVideoEnabled]);
+};

package/src/index.ts

@@ -30,6 +30,6 @@ export * from './translations';
 
 // Overriding 'StreamVideo' from '@stream-io/video-react-bindings'
 // Explicitly re-exporting to resolve ambiguity.
-export { StreamVideo, StreamCall, MediaStreamManagement } from './providers';
+export { StreamVideo, StreamCall } from './providers';
 
 setClientDetails();

package/src/providers/StreamCall.tsx

@@ -1,16 +1,14 @@
-import { StreamCallProvider } from '@stream-io/video-react-bindings';
+import { StreamCallProvider, useCall } from '@stream-io/video-react-bindings';
 import React, { PropsWithChildren, useEffect } from 'react';
 import { Call } from '@stream-io/video-client';
 import { useIosCallkeepWithCallingStateEffect } from '../hooks/push/useIosCallkeepWithCallingStateEffect';
-import {
-  MediaDevicesInitialState,
-  MediaStreamManagement,
-} from './MediaStreamManagement';
 import {
   canAddPushWSSubscriptionsRef,
   clearPushWSEventSubscriptions,
 } from '../utils/push/utils';
 import { useAndroidKeepCallAliveEffect } from '../hooks/useAndroidKeepCallAliveEffect';
+import { useAppStateListener } from '../utils/hooks';
+import { NativeModules, Platform } from 'react-native';
 
 export type StreamCallProps = {
   /**
@@ -18,12 +16,6 @@ export type StreamCallProps = {
    * Children can access it with useCall() hook.
    */
   call: Call;
-  /**
-   * Optionally provide the initial status of the media devices(audio/video) to the `MediaStreamManagement`.
-   * Note: It will override the default state of the media devices set from the server side.
-   * It is used to control the initial state of the media devices(audio/video) in a custom lobby component.
-   */
-  mediaDeviceInitialState?: MediaDevicesInitialState;
 };
 /**
  * StreamCall is a wrapper component that orchestrates the call life cycle logic and
@@ -34,21 +26,48 @@ export type StreamCallProps = {
  */
 export const StreamCall = ({
   call,
-  mediaDeviceInitialState = {},
   children,
 }: PropsWithChildren<StreamCallProps>) => {
   return (
     <StreamCallProvider call={call}>
-      <MediaStreamManagement {...mediaDeviceInitialState}>
-        <AndroidKeepCallAlive />
-        <IosInformCallkeepCallEnd />
-        <ClearPushWSSubscriptions />
-        {children}
-      </MediaStreamManagement>
+      <AppStateListener />
+      <AndroidKeepCallAlive />
+      <IosInformCallkeepCallEnd />
+      <ClearPushWSSubscriptions />
+      {children}
     </StreamCallProvider>
   );
 };
 
+const AppStateListener = () => {
+  const call = useCall();
+
+  // Resume/Disable video stream tracks when app goes to background/foreground
+  // To save on CPU resources
+  useAppStateListener(
+    async () => {
+      await call?.camera?.resume();
+    },
+    async () => {
+      if (Platform.OS === 'android') {
+        // in Android, we need to check if we are in PiP mode
+        // in PiP mode, we don't want to disable the camera
+        NativeModules?.StreamVideoReactNative?.isInPiPMode().then(
+          async (isInPiP: boolean) => {
+            if (!isInPiP) {
+              await call?.camera?.disable();
+            }
+          },
+        );
+      } else {
+        await call?.camera?.disable();
+      }
+    },
+  );
+
+  return null;
+};
+
 /**
  * This is a renderless component is used to keep the call alive on Android device using useAndroidKeepCallAliveEffect.
  * useAndroidKeepCallAliveEffect needs to called inside a child of StreamCallProvider.

package/src/providers/index.ts

@@ -1,3 +1,2 @@
 export * from './StreamVideo';
 export * from './StreamCall';
-export * from './MediaStreamManagement';

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.6.21';
+export const version = '0.7.0';