agora-appbuilder-core 4.0.0-beta.5 → 4.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.6",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/global.d.ts

@@ -76,7 +76,7 @@ interface ConfigInterface {
   PRIMARY_ACTION_TEXT_COLOR: string;
   SECONDARY_ACTION_COLOR: string;
   FONT_COLOR: string;
-  BACKGROUND_IMAGE: string;
+  BG: string;
   BACKGROUND_COLOR: string;
   VIDEO_AUDIO_TILE_COLOR: string;
   VIDEO_AUDIO_TILE_OVERLAY_COLOR: string;
@@ -85,7 +85,7 @@ interface ConfigInterface {
   SEMANTIC_ERROR: string;
   SEMANTIC_SUCCESS: string;
   SEMANTIC_WARNING: string;
-  SEMANTIC_NETRUAL: string;
+  SEMANTIC_NEUTRAL: string;
   INPUT_FIELD_BACKGROUND_COLOR: string;
   INPUT_FIELD_BORDER_COLOR: string;
   CARD_LAYER_1_COLOR: string;

package/template/src/AppWrapper.tsx

@@ -75,9 +75,7 @@ const AppWrapper = (props: AppWrapperProps) => {
 
   return (
     <AppRoot>
-      <ImageBackgroundComp
-        bg={$config.BACKGROUND_IMAGE}
-        color={$config.BACKGROUND_COLOR}>
+      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
         <SafeAreaView
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>

package/template/src/atoms/Dropdown.tsx

@@ -169,7 +169,7 @@ const Dropdown: FC<Props> = ({
               iconType="plain"
               name={icon}
               iconSize={20}
-              tintColor={$config.SEMANTIC_NETRUAL}
+              tintColor={$config.SEMANTIC_NEUTRAL}
             />
           </View>
         ) : (

package/template/src/atoms/PrimaryButton.tsx

@@ -38,7 +38,7 @@ export default function PrimaryButton(props: PrimaryButtonProps) {
       style={[
         styles.container,
         props?.disabled
-          ? {backgroundColor: $config.SEMANTIC_NETRUAL}
+          ? {backgroundColor: $config.SEMANTIC_NEUTRAL}
           : {backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR},
         containerStyle ? containerStyle : {},
       ]}

package/template/src/atoms/Toggle.tsx

@@ -20,7 +20,7 @@ const Toggle = (props: SwitchProps) => {
         onValueChange={toggleSwitch}
         disabled={false}
         backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
-        backgroundInactive={$config.SEMANTIC_NETRUAL}
+        backgroundInactive={$config.SEMANTIC_NEUTRAL}
         circleActiveColor={$config.CARD_LAYER_1_COLOR}
         circleInActiveColor={$config.CARD_LAYER_1_COLOR}
         // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)

package/template/src/components/Controls.tsx

@@ -423,6 +423,7 @@ const style = StyleSheet.create({
     alignItems: 'center',
   },
   centerContent: {
+    zIndex: 2,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',

package/template/src/components/DeviceConfigure.tsx

@@ -224,6 +224,15 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     }
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      navigator.mediaDevices.enumerateDevices();
+    }, 2000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   useEffect(() => {
     // Labels are empty in firefox when permission is granted first time
     // refresh device list if labels are empty
@@ -307,6 +316,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const commonOnChangedEvent = async (changedDeviceData: DeviceInfo) => {
     // Extracted devicelist because we want to perform fallback with
     // the most current version.
+    const previousDeviceList = deviceList;
     const updatedDeviceList = await refreshDeviceList();
     const changedDevice = changedDeviceData.device;
 
@@ -330,7 +340,40 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     log(logTag, changedDeviceData);
 
-    if (changedDeviceData.state === 'ACTIVE') {
+    if (currentDevice === 'default') {
+      // const previousDefaultDevice = previousDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      // const currentDefaultDevice = updatedDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      //   log(logTag, 'current Default device', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      // if (previousDefaultDevice.groupId !== currentDefaultDevice.groupId) {
+      //   log(logTag, 'Default device changed', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      //   setCurrentDevice('default');
+      // }
+      setCurrentDevice('default');
+    }
+
+    const didChangeDeviceExistBefore = previousDeviceList.find(
+      (device) => device.deviceId === changedDevice.deviceId,
+    )
+      ? true
+      : false;
+
+    if (changedDeviceData.state === 'ACTIVE' && !didChangeDeviceExistBefore) {
       const rememberedDevice =
         rememberedDevicesList[changedDevice.kind][changedDevice.deviceId];
 
@@ -348,24 +391,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         return;
       }
     }
-    if (selectedMic === 'default') {
-      setCurrentDevice('default');
-    }
   };
 
   // Port this to useEffectEvent(https://beta.reactjs.org/reference/react/useEffectEvent) when
   // released
   useEffect(() => {
+    log('previous devicelist updated', deviceList);
     AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
-  }, [selectedMic]);
+  }, [selectedMic, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onPlaybackDeviceChanged = commonOnChangedEvent;
-  }, [selectedSpeaker]);
+  }, [selectedSpeaker, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onCameraChanged = commonOnChangedEvent;
-  }, [selectedCam]);
+  }, [selectedCam, deviceList]);
 
   const setSelectedMic = (deviceId: deviceId) => {
     log('mic: setting to', deviceId);

package/template/src/components/NetworkQualityContext.tsx

@@ -37,7 +37,7 @@ export const networkIconsObject: {
 } = {
   0: {
     icon: 'connection-unsupported',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unknown',
   },
   1: {
@@ -72,12 +72,12 @@ export const networkIconsObject: {
   },
   7: {
     icon: 'connection-unpublished',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unpublished',
   },
   8: {
     icon: 'connection-loading',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'loading',
   },
 };

package/template/src/components/PinnedVideo.tsx

@@ -127,10 +127,18 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
             }
             return (
               <Pressable
+                //old
                 //if user pinned somebody then side panel items should not be clickable - swap video should be called
                 //instead we will show replace pin button on hovering the video tile
+                //old
                 disabled={
-                  activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+                  //activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+
+                  //latest fix : pinned video sidepanel layout should not be clickable
+                  //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
+                  true
                 }
                 style={
                   isSidePinnedlayout

package/template/src/components/Precall.native.tsx

@@ -379,7 +379,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/Precall.tsx

@@ -382,7 +382,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/SettingsView.tsx

@@ -116,7 +116,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
             name="person"
             iconSize={20}
             iconType="plain"
-            tintColor={$config.SEMANTIC_NETRUAL}
+            tintColor={$config.SEMANTIC_NEUTRAL}
           />
           <TextInput
             maxLength={maxInputLimit}

package/template/src/components/participants/Participant.tsx

@@ -169,7 +169,7 @@ const Participant = (props: ParticipantInterface) => {
                                 tintColor: isVideoEnabled
                                   ? $config.PRIMARY_ACTION_BRAND_COLOR
                                   : isPermissionDenied
-                                  ? $config.SEMANTIC_NETRUAL
+                                  ? $config.SEMANTIC_NEUTRAL
                                   : $config.SEMANTIC_ERROR,
                               };
                             }}
@@ -202,7 +202,7 @@ const Participant = (props: ParticipantInterface) => {
                               tintColor: isAudioEnabled
                                 ? $config.PRIMARY_ACTION_BRAND_COLOR
                                 : isPermissionDenied
-                                ? $config.SEMANTIC_NETRUAL
+                                ? $config.SEMANTIC_NEUTRAL
                                 : $config.SEMANTIC_ERROR,
                             };
                           }}

package/template/src/pages/Authenticate.tsx

@@ -33,7 +33,7 @@ const Authenticate = () => {
   const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
-      source={{uri: $config.BACKGROUND_IMAGE}}
+      source={{uri: $config.BG}}
       style={style.full}
       resizeMode={'cover'}>
       <View style={style.main}>

package/template/src/pages/Create.tsx

@@ -181,7 +181,7 @@ const Create = () => {
           tintColor={
             isToolTipVisible
               ? $config.SECONDARY_ACTION_COLOR
-              : $config.SEMANTIC_NETRUAL
+              : $config.SEMANTIC_NEUTRAL
           }
         />
       </Pressable>

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -199,7 +199,7 @@ const styles = StyleSheet.create({
   },
 
   handleIndicatorStyle: {
-    // backgroundColor: $config.SEMANTIC_NETRUAL,
+    // backgroundColor: $config.SEMANTIC_NEUTRAL,
     // width: 40,
     // height: 4,
   },

package/template/src/pages/video-call/ActionSheet.tsx

@@ -43,7 +43,7 @@ const ActionSheet = () => {
 
   useEffect(() => {
     root.style.setProperty('--sheet-background', $config.CARD_LAYER_1_COLOR);
-    root.style.setProperty('--handle-background', $config.SEMANTIC_NETRUAL);
+    root.style.setProperty('--handle-background', $config.SEMANTIC_NEUTRAL);
   }, []);
 
   useEffect(() => {

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -149,7 +149,7 @@ const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
             style={[
               styles.iconText,
               {
-                color: disabled ? $config.SEMANTIC_NETRUAL : $config.FONT_COLOR,
+                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
               },
             ]}>
             Switch
@@ -158,7 +158,7 @@ const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
             style={[
               styles.iconText,
               {
-                color: disabled ? $config.SEMANTIC_NETRUAL : $config.FONT_COLOR,
+                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
                 marginTop: 0,
               },
             ]}>

package/template/src/pages/video-call/ActionSheetHandle.tsx

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
   },
   handleIndicatorStyle: {
-    backgroundColor: $config.SEMANTIC_NETRUAL,
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
     width: 40,
     height: 4,
     alignSelf: 'center',

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -28,48 +28,50 @@ const VideoCallMobileView = () => {
 
   const isCamON = useRef(local.video);
 
-  useEffect(() => {
-    if ($config.AUDIO_ROOM) return;
-    const subscription = AppState.addEventListener(
-      'change',
-      async (nextAppState) => {
-        if (nextAppState === 'background') {
-          // check if cam was on before app goes to background
-          isCamON.current = isAndroid()
-            ? local.video === ToggleState.enabled
-            : RtcEngine?.isVideoEnabled;
+  // moved below logic to useMuteToggleLocal
+  // useEffect(() => {
+  //   if ($config.AUDIO_ROOM) return;
+  //   const subscription = AppState.addEventListener(
+  //     'change',
+  //     async (nextAppState) => {
+  //       if (nextAppState === 'background') {
+  //         // check if cam was on before app goes to background
+  //         isCamON.current = isAndroid()
+  //           ? local.video === ToggleState.enabled
+  //           : RtcEngine?.isVideoEnabled;
 
-          if (isCamON.current) {
-            isWebInternal()
-              ? await RtcEngine.muteLocalVideoStream(true)
-              : await RtcEngine.enableLocalVideo(false);
+  //         if (isCamON.current || 1) {
+  //           isWebInternal()
+  //             ? await RtcEngine.muteLocalVideoStream(true)
+  //             : await RtcEngine.enableLocalVideo(false);
 
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0],
-            });
-          }
-        }
-        if (nextAppState === 'active') {
-          // enable cam only if cam was on before app goes to background
-          if (isCamON.current) {
-            isWebInternal()
-              ? await RtcEngine.muteLocalVideoStream(false)
-              : await RtcEngine.enableLocalVideo(true);
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [1],
-            });
-          }
-        }
-        appState.current = nextAppState;
-      },
-    );
+  //           // dispatch({
+  //           //   type: 'LocalMuteVideo',
+  //           //   value: [0],
+  //           // });
+  //         }
+  //       }
+  //       if (nextAppState === 'active') {
+  //         // enable cam only if cam was on before app goes to background
+  //         console.log('active state 111111 ==>', isCamON.current);
+  //         if (local.video) {
+  //           isWebInternal()
+  //             ? await RtcEngine.muteLocalVideoStream(false)
+  //             : await RtcEngine.enableLocalVideo(true);
+  //           dispatch({
+  //             type: 'LocalMuteVideo',
+  //             value: [1],
+  //           });
+  //         }
+  //       }
+  //       appState.current = nextAppState;
+  //     },
+  //   );
 
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
+  //   return () => {
+  //     subscription?.remove();
+  //   };
+  // }, []);
 
   return (
     <View style={styles.container}>

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -28,6 +28,11 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
   const {currentLayout} = useLayout();
   const showReplacePin =
     pinnedUid && !isMax && isHovered && currentLayout === getPinnedLayoutName();
+  const showPinForMe =
+    !pinnedUid &&
+    !isMax &&
+    isHovered &&
+    currentLayout === getPinnedLayoutName();
   const [videoTileWidth, setVideoTileWidth] = useState(0);
   const [avatarSize, setAvatarSize] = useState(100);
   return (
@@ -49,14 +54,16 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
             ? maxStyle.noVideoStyle
             : maxStyle.nonActiveContainerStyle,
         ]}>
-        {!showReplacePin && <ScreenShareNotice uid={user.uid} isMax={isMax} />}
+        {!showReplacePin && !showPinForMe && (
+          <ScreenShareNotice uid={user.uid} isMax={isMax} />
+        )}
         <NetworkQualityPill user={user} />
         <MaxVideoView
           fallback={() => {
             return FallbackLogo(
               user?.name,
               activeSpeaker,
-              showReplacePin && !isMobileUA() ? true : false,
+              (showReplacePin || showPinForMe) && !isMobileUA() ? true : false,
               isMax,
               avatarSize,
             );
@@ -84,14 +91,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
         ) : (
           <></>
         )}
-        {showReplacePin && !isMobileUA() ? (
+        {(showReplacePin || showPinForMe) && !isMobileUA() ? (
           <IconButton
             onPress={() => {
               dispatch({type: 'UserPin', value: [user.uid]});
             }}
             containerStyle={maxStyle.replacePinContainer}
             btnTextProps={{
-              text: 'Replace Pin',
+              text: showReplacePin ? 'Replace Pin' : 'Pin for me',
               textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
               textStyle: {
                 marginTop: 0,

package/template/src/subComponents/ChatInput.ios.tsx

@@ -53,7 +53,7 @@ export const ChatSendButton = (props: ChatSendButtonProps) => {
         tintColor={
           inputActive
             ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_NETRUAL
+            : $config.SEMANTIC_NEUTRAL
         }
         name={'send'}
       />

package/template/src/subComponents/ChatInput.tsx

@@ -52,7 +52,7 @@ export const ChatSendButton = (props: ChatSendButtonProps) => {
         tintColor={
           inputActive
             ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_NETRUAL
+            : $config.SEMANTIC_NEUTRAL
         }
         name={'send'}
       />

package/template/src/subComponents/Illustration.tsx

@@ -22,9 +22,9 @@ const Illustration = () => {
       resizeMode={'contain'}
       source={{
         uri:
-          $config.BACKGROUND_IMAGE === ''
+          $config.BG === ''
             ? 'https://gist.githubusercontent.com/EkaanshArora/59ae6969456f8e95f9752a4adf96bb44/raw/4c3831d115b4f9de0219e8658f049927b0ed9271/image.svg'
-            : $config.BACKGROUND_IMAGE,
+            : $config.BG,
       }}
     />
   );

package/template/src/subComponents/LocalAudioMute.tsx

@@ -88,9 +88,9 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     tintColor: isAudioEnabled
       ? $config.PRIMARY_ACTION_TEXT_COLOR
       : disabled
-      ? $config.SEMANTIC_NETRUAL
+      ? $config.SEMANTIC_NEUTRAL
       : permissionDenied
-      ? $config.SEMANTIC_NETRUAL
+      ? $config.SEMANTIC_NEUTRAL
       : $config.SEMANTIC_ERROR,
     ...(props?.iconProps
       ? props.iconProps(isAudioEnabled, permissionDenied)
@@ -144,7 +144,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
       name: 'mic-off',
-      tintColor: $config.SEMANTIC_NETRUAL,
+      tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage = showToolTip
       ? isHandRaised(local.uid)

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -31,7 +31,7 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
       tintColor:
         isVideoEnabled || !disabled
           ? $config.PRIMARY_ACTION_TEXT_COLOR
-          : $config.SEMANTIC_NETRUAL,
+          : $config.SEMANTIC_NEUTRAL,
     },
     disabled: !isVideoEnabled || disabled ? true : false,
     onPress: onPress,

package/template/src/subComponents/LocalVideoMute.tsx

@@ -86,9 +86,9 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
     tintColor: isVideoEnabled
       ? $config.PRIMARY_ACTION_TEXT_COLOR
       : disabled
-      ? $config.SEMANTIC_NETRUAL
+      ? $config.SEMANTIC_NEUTRAL
       : permissionDenied
-      ? $config.SEMANTIC_NETRUAL
+      ? $config.SEMANTIC_NEUTRAL
       : $config.SEMANTIC_ERROR,
     ...(props?.iconProps
       ? props.iconProps(isVideoEnabled, permissionDenied)
@@ -141,7 +141,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
       name: 'video-off',
-      tintColor: $config.SEMANTIC_NETRUAL,
+      tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage = showToolTip
       ? isHandRaised(local.uid)

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -106,7 +106,7 @@ const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
           name: props.audio ? 'mic-on' : 'mic-off',
           tintColor: props.audio
             ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_NETRUAL,
+            : $config.SEMANTIC_NEUTRAL,
         }}
       />
     </>

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -93,7 +93,7 @@ const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
           iconType: 'plain',
           tintColor: props.video
             ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_NETRUAL,
+            : $config.SEMANTIC_NEUTRAL,
         }}
       />
     </>

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -210,7 +210,7 @@ const style = StyleSheet.create({
     flexShrink: 1,
   },
   chatNotificationPrivate: {
-    backgroundColor: $config.SEMANTIC_NETRUAL,
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
     borderRadius: 8,
     alignSelf: 'center',
   },

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -74,7 +74,7 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
-      tintColor: $config.SEMANTIC_NETRUAL,
+      tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage = isHandRaised(local.uid)
       ? 'Waiting for host to appove the request'

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,8 +10,11 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
+import {useContext, useEffect, useRef, useState} from 'react';
+
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 import {isWebInternal} from './common';
+import {AppState} from 'react-native';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -24,6 +27,48 @@ function useMuteToggleLocal() {
   const {RtcEngine, dispatch} = useRtc();
   const local = useLocalUserInfo();
 
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const isCamON = useRef(local.video);
+
+  useEffect(() => {
+    if ($config.AUDIO_ROOM) return;
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      appState.current = nextAppState;
+      setAppStateVisible(appState.current);
+    });
+
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
+    if (appStateVisible === 'background') {
+      isCamON.current = local.video;
+      if (isCamON.current) {
+        isWebInternal()
+          ? RtcEngine.muteLocalVideoStream(true)
+          : RtcEngine.enableLocalVideo(false);
+
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [0],
+        });
+      }
+    }
+    if (appStateVisible === 'active' && isCamON.current) {
+      isWebInternal()
+        ? RtcEngine.muteLocalVideoStream(false)
+        : RtcEngine.enableLocalVideo(true);
+      dispatch({
+        type: 'LocalMuteVideo',
+        value: [1],
+      });
+    }
+  }, [appStateVisible]);
+
   return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio: