agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -0,0 +1,74 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {useContent} from 'customization-api';
+import {filterObject} from '../../utils';
+import Participant from './Participant';
+import ParticipantSectionTitle from './ParticipantSectionTitle';
+import {useWaitingRoomContext} from '../contexts/WaitingRoomContext';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelWaitingText,
+  peoplePanelWantToJoinText,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const WaitingRoomParticipants = props => {
+  const wanttojoinLabel = useString(peoplePanelWantToJoinText)();
+  const waitingLabel = useString(peoplePanelWaitingText)();
+  const {defaultContent} = useContent();
+  const [showWaitingRoomSection, setShowWaitingRoomSection] = useState(true);
+  const {isMobile = false, handleClose, updateActionSheet} = props;
+  const WaitingRoomParticipantsLabel = $config.EVENT_MODE
+    ? wanttojoinLabel
+    : waitingLabel;
+
+  const videoRoomUserFallbackTextLabel = useString(videoRoomUserFallbackText)();
+
+  const getParticipantName = uid => {
+    return defaultContent[uid]?.name || videoRoomUserFallbackTextLabel;
+  };
+
+  const getScreenShareUid = uid => {
+    return defaultContent[uid]?.screenUid || '';
+  };
+
+  const {waitingRoomUids} = useWaitingRoomContext();
+
+  return (
+    <>
+      <ParticipantSectionTitle
+        title={WaitingRoomParticipantsLabel}
+        count={waitingRoomUids.length}
+        isOpen={showWaitingRoomSection}
+        onPress={() => setShowWaitingRoomSection(!showWaitingRoomSection)}
+      />
+      {showWaitingRoomSection ? (
+        <View>
+          {waitingRoomUids.map(uid => (
+            <Participant
+              isLocal={false}
+              name={getParticipantName(uid)}
+              user={defaultContent[uid]}
+              showControls={false}
+              isAudienceUser={true}
+              isHostUser={false}
+              key={uid}
+              isMobile={isMobile}
+              handleClose={handleClose}
+              updateActionSheet={updateActionSheet}
+              waitingRoomUser={true}
+              uid={uid}
+              screenUid={getScreenShareUid(uid)}
+            />
+          ))}
+        </View>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default WaitingRoomParticipants;
+
+const styles = StyleSheet.create({});

package/template/src/components/popups/InvitePopup.tsx

@@ -21,11 +21,22 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import TertiaryButton from '../../atoms/TertiaryButton';
 import ThemeConfig from '../../theme';
 import {CopyMeetingInfo} from '../../components/Share';
-import {isMobileUA, useIsDesktop} from '../../utils/common';
+import {
+  isMobileUA,
+  isValidReactComponent,
+  useIsDesktop,
+} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {useParams} from '../Router';
 import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
 import {ErrorContext} from '../common';
+import {useCustomization} from 'customization-implementation';
+import {useString} from '../../utils/useString';
+import {
+  invitePopupPrimaryBtnText,
+  invitePopupHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -35,60 +46,110 @@ const InvitePopup = () => {
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
-    getMeeting(phrase).catch((error) => {
+    getMeeting(phrase).catch(error => {
       setGlobalErrorMessage(error);
     });
   }, [phrase]);
+
+  const {InvitePopupContent, InvitePopupTitle} = useCustomization(data => {
+    let components: {
+      InvitePopupContent?: React.ComponentType;
+      InvitePopupTitle?: string;
+    } = {
+      InvitePopupContent: null,
+      InvitePopupTitle: null,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      if (
+        data?.components?.videoCall?.invitePopup?.renderComponent &&
+        typeof data?.components?.videoCall?.invitePopup?.renderComponent !==
+          'object' &&
+        isValidReactComponent(
+          data?.components?.videoCall?.invitePopup?.renderComponent,
+        )
+      ) {
+        components.InvitePopupContent =
+          data?.components?.videoCall.invitePopup.renderComponent;
+      }
+      if (data?.components?.videoCall?.invitePopup?.title) {
+        components.InvitePopupTitle =
+          data?.components?.videoCall?.invitePopup.title;
+      }
+    }
+    return components;
+  });
+  const inviteOtherToJoinRoomInfo = useString(invitePopupHeading)();
+  const copyInvitationButton = useString(invitePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
   return (
     <Popup
       modalVisible={showInvitePopup}
       setModalVisible={setShowInvitePopup}
-      title="Invite others to join this meeting"
+      title={InvitePopupTitle ? InvitePopupTitle : inviteOtherToJoinRoomInfo}
       showCloseIcon={true}
       containerStyle={{alignItems: isDesktop('popup') ? 'center' : 'stretch'}}
       contentContainerStyle={style.contentContainer}>
-      <CopyMeetingInfo showSubLabel={false} />
-      <View
-        style={
-          isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
-        }>
-        {isDesktop('popup') ? (
-          <View style={{flex: 1}}>
-            <TertiaryButton
-              text={'CANCEL'}
-              textStyle={style.btnText}
-              containerStyle={{
-                width: '100%',
-                height: 48,
-                paddingVertical: 12,
-                paddingHorizontal: 12,
-                borderRadius: ThemeConfig.BorderRadius.medium,
-              }}
-              onPress={() => {
-                setShowInvitePopup(false);
-              }}
-            />
+      {InvitePopupContent ? (
+        <>
+          <Spacer size={10} />
+          <InvitePopupContent />
+          <Spacer size={10} />
+        </>
+      ) : (
+        <>
+          <CopyMeetingInfo showSubLabel={false} />
+          <View
+            style={
+              isDesktop('popup') ? style.btnContainer : style.btnContainerMobile
+            }>
+            {isDesktop('popup') ? (
+              <View style={{flex: 1}}>
+                <TertiaryButton
+                  text={cancelLabel}
+                  textStyle={style.btnText}
+                  containerStyle={{
+                    width: '100%',
+                    height: 48,
+                    paddingVertical: 12,
+                    paddingHorizontal: 12,
+                    borderRadius: ThemeConfig.BorderRadius.medium,
+                  }}
+                  onPress={() => {
+                    setShowInvitePopup(false);
+                  }}
+                />
+              </View>
+            ) : null}
+            {isDesktop('popup') ? (
+              <Spacer size={10} horizontal={true} />
+            ) : (
+              <></>
+            )}
+            <View style={{flex: 1}}>
+              <PrimaryButton
+                textStyle={style.btnText}
+                containerStyle={{
+                  minWidth: 'auto',
+                  width: '100%',
+                  borderRadius: ThemeConfig.BorderRadius.medium,
+                  height: 48,
+                  paddingVertical: 12,
+                  paddingHorizontal: 12,
+                }}
+                onPress={() => {
+                  copyShareLinkToClipboard(
+                    SHARE_LINK_CONTENT_TYPE.MEETING_INVITE,
+                  );
+                }}
+                text={copyInvitationButton}
+              />
+            </View>
           </View>
-        ) : null}
-        {isDesktop('popup') ? <Spacer size={10} horizontal={true} /> : <></>}
-        <View style={{flex: 1}}>
-          <PrimaryButton
-            textStyle={style.btnText}
-            containerStyle={{
-              minWidth: 'auto',
-              width: '100%',
-              borderRadius: ThemeConfig.BorderRadius.medium,
-              height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-            }}
-            onPress={() => {
-              copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
-            }}
-            text={'COPY INVITATION'}
-          />
-        </View>
-      </View>
+        </>
+      )}
     </Popup>
   );
 };

package/template/src/components/popups/StartScreenSharePopup.native.tsx

@@ -11,6 +11,14 @@ import {useVideoCall} from '../useVideoCall';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
 import Toggle from '../../atoms/Toggle';
 import {useLocalUserInfo} from '../../app-state/useLocalUserInfo';
+import {useString} from '../../utils/useString';
+import {
+  nativeScreensharePopupHeading,
+  nativeScreensharePopupIncludeDeviceAudioText,
+  nativeScreensharePopupPrimaryBtnText,
+  nativeScreensharePopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
 
 const StartScreenSharePopup = () => {
   const {showStartScreenSharePopup, setShowStartScreenSharePopup} =
@@ -18,14 +26,18 @@ const StartScreenSharePopup = () => {
   const {video} = useLocalUserInfo();
   const {startUserScreenshare, isScreenshareActive} = useScreenshare();
   const isDesktop = useIsDesktop()('popup');
-  const screenshareLabelHeading = 'Screen Share';
-  const screenshareLabelSubHeadingCamOff =
-    'NOTE: All incoming videos will be turned OFF for an optimised performance, do you wish to proceed?';
-  const screenshareLabelSubHeadingCamOn =
-    'NOTE: Camera and all incoming videos will be turned OFF for an optimised performance, do you wish to proceed?';
+  const cancelLabel = useString(cancelText)();
+  const proceedLabel = useString(nativeScreensharePopupPrimaryBtnText)();
+  const includeDeviceAudio = useString(
+    nativeScreensharePopupIncludeDeviceAudioText,
+  )();
+  const screenshareLabelHeading = useString(nativeScreensharePopupHeading)();
+  const screenshareLabelSubHeading = useString(
+    nativeScreensharePopupSubHeading,
+  );
 
-  const cancelBtnLabel = 'CANCEL';
-  const startShareShareBtnLabel = 'PROCEED';
+  const cancelBtnLabel = cancelLabel;
+  const startShareShareBtnLabel = proceedLabel;
 
   const doStartScreenShare = () => {
     if (!isScreenshareActive) {
@@ -46,28 +58,19 @@ const StartScreenSharePopup = () => {
       <View style={[styles.toggleContainer, styles.lower, styles.upper]}>
         <View style={styles.infoContainer}>
           <Text numberOfLines={1} style={styles.toggleLabel}>
-            Include device audio
+            {includeDeviceAudio}
           </Text>
         </View>
         <View style={styles.infoToggleContainer}>
           <Toggle isEnabled={shareAudio} toggleSwitch={setShareAudio} />
         </View>
       </View>
-      {video ? (
-        <>
-          <Spacer size={28} />
-          <Text style={styles.subHeading}>
-            {screenshareLabelSubHeadingCamOn}
-          </Text>
-        </>
-      ) : (
-        <>
-          <Spacer size={28} />
-          <Text style={styles.subHeading}>
-            {screenshareLabelSubHeadingCamOff}
-          </Text>
-        </>
-      )}
+      <>
+        <Spacer size={28} />
+        <Text style={styles.subHeading}>
+          {screenshareLabelSubHeading(video)}
+        </Text>
+      </>
       <Spacer size={32} />
       <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
         <View style={isDesktop && {flex: 1}}>

package/template/src/components/popups/StopRecordingPopup.tsx

@@ -8,17 +8,23 @@ import ThemeConfig from '../../theme';
 import {useIsDesktop} from '../../utils/common';
 import {useRecording} from 'customization-api';
 import {useVideoCall} from '../useVideoCall';
+import {useString} from '../../utils/useString';
+import {
+  stopRecordingPopupHeading,
+  stopRecordingPopupPrimaryBtnText,
+  stopRecordingPopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
 
 const StopRecordingPopup = () => {
   const {showStopRecordingPopup, setShowStopRecordingPopup} = useVideoCall();
   const {stopRecording, isRecordingActive} = useRecording();
   const isDesktop = useIsDesktop()('popup');
-  const recordingLabelHeading = 'Stop Recording?';
-  const recordingLabelSubHeading =
-    'Are you sure you want to stop recording? You can’t undo this action.';
+  const recordingLabelHeading = useString(stopRecordingPopupHeading)();
+  const recordingLabelSubHeading = useString(stopRecordingPopupSubHeading)();
 
-  const cancelBtnLabel = 'CANCEL';
-  const stopRecordingBtnLabel = 'END RECORDING';
+  const cancelBtnLabel = useString(cancelText)();
+  const stopRecordingBtnLabel = useString(stopRecordingPopupPrimaryBtnText)();
 
   const doStopRecording = () => {
     if (isRecordingActive) {

package/template/src/components/popups/StopScreenSharePopup.native.tsx

@@ -13,6 +13,13 @@ import Toggle from '../../atoms/Toggle';
 import useMuteToggleLocal, {
   MUTE_LOCAL_TYPE,
 } from '../../utils/useMuteToggleLocal';
+import {useString} from '../../utils/useString';
+import {
+  nativeStopScreensharePopupHeading,
+  nativeStopScreensharePopupPrimaryBtnText,
+  nativeStopScreensharePopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
 
 const StopScreenSharePopup = () => {
   const {showStopScreenSharePopup, setShowStopScreenSharePopup} =
@@ -20,12 +27,17 @@ const StopScreenSharePopup = () => {
   const {stopUserScreenShare, isScreenshareActive} = useScreenshare();
   const isDesktop = useIsDesktop()('popup');
   const localMute = useMuteToggleLocal();
-  const screenshareLabelHeading = 'Stop Screen Share?';
-  const screenshareLabelSubHeading =
-    'You need to stop sharing your screen in order to turn the camera ON';
+  const screenshareLabelHeading = useString(
+    nativeStopScreensharePopupHeading,
+  )();
+  const screenshareLabelSubHeading = useString(
+    nativeStopScreensharePopupSubHeading,
+  )();
 
-  const cancelBtnLabel = 'CANCEL';
-  const startShareShareBtnLabel = 'STOP SHARE & TURN CAMERA ON';
+  const cancelBtnLabel = useString(cancelText)();
+  const startShareShareBtnLabel = useString(
+    nativeStopScreensharePopupPrimaryBtnText,
+  )();
 
   const doStopScreenShare = () => {
     if (isScreenshareActive) {

package/template/src/components/popups/WhiteboardClearAllPopup.tsx

@@ -0,0 +1,123 @@
+import React, {useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../../atoms/Spacer';
+import Popup from '../../atoms/Popup';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import {useIsDesktop} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../../rtm-events-api/LocalEvents';
+import {useString} from '../../utils/useString';
+import {
+  clearAllWhiteboardPopupHeading,
+  clearAllWhiteboardPopupPrimaryBtnText,
+  clearAllWhiteboardPopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const WhiteboardClearAllPopup = () => {
+  const {showWhiteboardClearAllPopup, setShowWhiteboardClearAllPopup} =
+    useVideoCall();
+  const isDesktop = useIsDesktop()('popup');
+  const recordingLabelHeading = useString(clearAllWhiteboardPopupHeading)();
+  const recordingLabelSubHeading = useString(
+    clearAllWhiteboardPopupSubHeading,
+  )();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const whiteboardClearAllLabel = useString(
+    clearAllWhiteboardPopupPrimaryBtnText,
+  )();
+
+  const clearWhiteboard = () => {
+    LocalEventEmitter.emit(LocalEventsEnum.CLEAR_WHITEBOARD);
+  };
+  return (
+    <Popup
+      modalVisible={showWhiteboardClearAllPopup}
+      setModalVisible={setShowWhiteboardClearAllPopup}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{recordingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{recordingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: isDesktop ? 90 : '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => setShowWhiteboardClearAllPopup(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 2}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={whiteboardClearAllLabel}
+            onPress={clearWhiteboard}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default WhiteboardClearAllPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/components/precall/LocalMute.tsx

@@ -24,14 +24,23 @@ import LocalVideoMute, {
 import LocalAudioMute, {
   LocalAudioMuteProps,
 } from '../../subComponents/LocalAudioMute';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import PreCallSettings from './PreCallSettings';
-import Spacer from '../../atoms/Spacer';
+
 import {usePreCall} from './usePreCall';
 import DeviceContext from '../DeviceContext';
+import VBButton from '../virtual-background/VBButton';
+import {ToolbarItem} from 'customization-api';
+import IconButton from '../../atoms/IconButton';
+
+interface PreCallProps {
+  isMobileView?: boolean;
+  isSettingsOpen?: boolean;
+  setIsSettingsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  isVBOpen?: boolean;
+  setIsVBOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
-const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
-  const {VideoMute, AudioMute} = useCustomization((data) => {
+const PreCallLocalMute = (props: PreCallProps) => {
+  const {VideoMute, AudioMute} = useCustomization(data => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
       AudioMute: React.ComponentType<LocalVideoMuteProps>;
@@ -70,18 +79,25 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
     // }
     return components;
   });
-  const {isMobileView = false} = props;
+  const {
+    isMobileView = false,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    isVBOpen,
+    setIsVBOpen,
+  } = props;
   const isNative = isAndroid() || isIOS();
   // for mweb check for camera * mic availablity for desktop it happens in settings panel
   // refactor later to set mic/camera availablity oustside settings panel <selectDevice>
   const {deviceList} = useContext(DeviceContext);
   const {setCameraAvailable, setMicAvailable} = usePreCall();
-  const audioDevices = deviceList.filter((device) => {
+
+  const audioDevices = deviceList.filter(device => {
     if (device.kind === 'audioinput') {
       return true;
     }
   });
-  const videoDevices = deviceList.filter((device) => {
+  const videoDevices = deviceList.filter(device => {
     if (device.kind === 'videoinput') {
       return true;
     }
@@ -99,49 +115,59 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
   }, [videoDevices]);
   return (
     <View
-      style={[style.precallControls, isMobileView && {paddingVertical: 10}]}
+      style={[
+        style.precallControls,
+        isMobileView && {
+          paddingVertical: 10,
+          borderBottomLeftRadius: 12,
+          borderBottomRightRadius: 12,
+          flex: 1,
+        },
+      ]}
       testID="precall-controls">
-      <View style={{width: 52, height: 52}}>
-        <AudioMute
-          isMobileView={isMobileView}
-          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-          showToolTip={true}
-        />
-      </View>
+      <AudioMute showToolTip={true} />
 
       {!$config.AUDIO_ROOM && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <VideoMute
-              isMobileView={isMobileView}
-              showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-              showToolTip={true}
-            />
-          </View>
-        </>
+        <View style={{marginLeft: isMobileView ? 24 : 16}}>
+          <VideoMute showToolTip={true} />
+        </View>
       )}
 
-      {/* Settings View in Mobile */}
-      {isMobileView && !isNative && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <PreCallSettings />
+      {$config.ENABLE_VIRTUAL_BACKGROUND &&
+        !$config.AUDIO_ROOM &&
+        isMobileView && (
+          <View style={{marginLeft: isMobileView ? 24 : 16}}>
+            <VBButton isVBOpen={isVBOpen} setIsVBOpen={setIsVBOpen} />
           </View>
-        </>
-      )}
+        )}
     </View>
   );
 };
+
+const SettingsButton = ({isSettingsOpen, setIsSettingsOpen}) => {
+  return (
+    <ToolbarItem>
+      <IconButton
+        hoverEffect={true}
+        iconProps={{
+          iconBackgroundColor: isSettingsOpen
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : '',
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+          name: 'settings',
+          iconSize: 26,
+        }}
+        btnTextProps={{
+          textColor: $config.FONT_COLOR,
+          text: isSettingsOpen ? 'Hide Settings' : 'Show Settings',
+        }}
+        onPress={() => {
+          setIsSettingsOpen(prev => !prev);
+        }}
+      />
+    </ToolbarItem>
+  );
+};
 export const PreCallLocalMuteComponentsArray: [
   (props: LocalAudioMuteProps) => JSX.Element,
   (props: LocalVideoMuteProps) => JSX.Element,
@@ -152,11 +178,9 @@ export default PreCallLocalMute;
 const style = StyleSheet.create({
   precallControls: {
     flexDirection: 'row',
-    paddingVertical: 32,
+    padding: 8,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: $config.CARD_LAYER_1_COLOR,
-    // borderBottomLeftRadius: 4,
-    // borderBottomRightRadius: 4,
   },
 });