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

package/template/src/subComponents/FallbackLogo.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import UserAvatar from '../atoms/UserAvatar';
 //import AnimatedRings from '../atoms/AnimatedRings';
-import {useLayout, useRender} from 'customization-api';
+import {useLayout, useContent} from 'customization-api';
 import {BREAKPOINTS, isMobileUA} from '../utils/common';
 import {
   getGridLayoutName,
@@ -27,7 +27,7 @@ export default function FallbackLogo(
   isMax?: boolean,
   avatarSize?: number,
 ) {
-  const {activeUids} = useRender();
+  const {activeUids} = useContent();
   const {currentLayout} = useLayout();
   const {width} = useWindowDimensions();
   const isSmall = width < BREAKPOINTS.xl;

package/template/src/subComponents/LanguageSelector.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Picker, StyleSheet, Text} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import {useLanguage} from '../language/useLanguage';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import {DEFAULT_I18_DATA} from '../language';
+import ThemeConfig from '../theme';
+import Dropdown from '../atoms/Dropdown';
+import {settingsPanelLanguageLabel} from '../language/default-labels/precallScreenLabels';
 
 const LanguageSelector = () => {
-  const {primaryColor} = useContext(ColorContext);
   const {languageCode, setLanguageCode} = useLanguage();
-  const languageData = useCustomization((data) => data?.i18n);
-  //commented for v1 release
-  //const languageText = useString('language')();
-  const languageText = 'Language';
+  const languageData = useCustomization(data => data?.i18n);
+  const languageText = useString(settingsPanelLanguageLabel)();
   if (!languageData || !languageData.length) {
     return <></>;
   }
@@ -35,36 +35,40 @@ const LanguageSelector = () => {
     return <></>;
   }
 
+  const data = [];
+
+  languageData.forEach(element => {
+    data.push({
+      label: element.label || element.locale,
+      value: element.locale,
+    });
+  });
+
   return (
-    <>
-      <Text style={style.heading}>{languageText}</Text>
-      <Picker
+    <View>
+      <Text style={style.label}>{languageText}</Text>
+      <Dropdown
+        icon={'lang-select'}
+        enabled={true}
         selectedValue={languageCode}
-        style={[{borderColor: primaryColor}, style.popupPicker]}
-        onValueChange={(itemValue) => setLanguageCode(itemValue)}>
-        {languageData.map((item) => {
-          return (
-            <Picker.Item
-              label={item.label || item.locale}
-              value={item.locale}
-              key={item.locale}
-            />
-          );
-        })}
-        {!languageData.filter((i) => i.locale === DEFAULT_I18_DATA.locale)
-          .length ? (
-          <Picker.Item
-            label={DEFAULT_I18_DATA.label || DEFAULT_I18_DATA.locale}
-            value={DEFAULT_I18_DATA.locale}
-            key={DEFAULT_I18_DATA.locale}
-          />
-        ) : null}
-      </Picker>
-    </>
+        label={''}
+        data={data}
+        onSelect={({value}) => {
+          setLanguageCode(value);
+        }}
+      />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
+  label: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginBottom: 12,
+  },
   heading: {
     fontSize: 20,
     fontWeight: '700',

package/template/src/subComponents/LayoutIconButton.tsx

@@ -8,24 +8,29 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {isMobileUA} from '../utils/common';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {useWindowDimensions} from 'react-native';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemLayoutText} from '../language/default-labels/videoCallScreenLabels';
 
-interface LayoutIconButtonInterface {
+export interface LayoutIconButtonInterface {
   render?: (onPress: () => void) => JSX.Element;
-  showLabel?: boolean;
 }
 
 const LayoutIconButton = (props: LayoutIconButtonInterface) => {
-  const {activeUids} = useRender();
+  const {activeUids, customContent} = useContent();
+  //const activeUidsLen = activeUids?.filter((i) => !customContent[i])?.length;
   const {height: windowHeight} = useWindowDimensions();
   const [modalPosition, setModalPosition] = useState(null);
   const layoutBtnRef = useRef();
   const [isHovered, setIsHoveredLocal] = useState(false);
   const [isHoveredOnModal, setIsHoveredOnModal] = useState(false);
   const isMobileView = isMobileUA();
-  const {showLabel = $config.ICON_TEXT} = props;
+  const {isOnActionSheet} = useActionSheet();
+  const showLabel = $config.ICON_TEXT ? true : false;
   const setIsHovered = (hovered: boolean) => {
     if (layoutBtnRef && layoutBtnRef.current) {
+      //@ts-ignore
       layoutBtnRef?.current?.measure((_fx, _fy, _w, h, _px, _py) => {
         setModalPosition({
           bottom: isMobileOrTablet()
@@ -37,14 +42,12 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
       });
     }
   };
-  //commented for v1 release
-  //const layoutLabel = useString('layoutLabel')('');
-  const layoutLabel = 'Layout';
+  const layoutLabel = useString(toolbarItemLayoutText)('');
   const layouts = useLayoutsData();
   const changeLayout = useChangeDefaultLayout();
   const {currentLayout, setLayout} = useLayout();
 
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
+  const layout = layouts.findIndex(item => item.name === currentLayout);
   const renderLayoutIcon = (showDropdown?: boolean) => {
     let onPress = () => {};
     let renderContent = [];
@@ -67,12 +70,26 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
         textColor: $config.FONT_COLOR,
       },
     };
-    const iconName =
-      layouts[layout]?.iconName === 'pinned' && isMobileView
-        ? 'list-view'
-        : layouts[layout]?.iconName;
-
-    renderContent.push(
+    iconButtonProps.isOnActionSheet = isOnActionSheet;
+    if (isOnActionSheet) {
+      // iconButtonProps.containerStyle = {
+      //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+      //   width: 52,
+      //   height: 52,
+      //   borderRadius: 26,
+      //   justifyContent: 'center',
+      //   alignItems: 'center',
+      // };
+      iconButtonProps.btnTextProps.textStyle = {
+        color: $config.FONT_COLOR,
+        marginTop: 8,
+        fontSize: 12,
+        fontWeight: '400',
+        fontFamily: 'Source Sans Pro',
+        textAlign: 'center',
+      };
+    }
+    const iconName = renderContent.push(
       props?.render ? (
         props.render(onPress)
       ) : (
@@ -100,12 +117,12 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
             containerStyle={{
               opacity: !activeUids || activeUids.length === 0 ? 0.6 : 1,
             }}
-            setRef={(ref) => {
+            setRef={ref => {
               layoutBtnRef.current = ref;
             }}
             key={'defaultLayoutIconWithName'}
             iconProps={{
-              name: iconName,
+              icon: layouts[layout]?.icon,
               tintColor: $config.SECONDARY_ACTION_COLOR,
             }}
             {...iconButtonProps}

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -7,8 +7,13 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import Spacer from '../atoms/Spacer';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
+import {useString} from '../utils/useString';
+import {
+  toolbarItemLayoutOptionGridText,
+  toolbarItemLayoutOptionSidebarText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 interface LayoutIconDropdownProps {
   modalPosition?: {
@@ -35,11 +40,15 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
     modalPosition = {top: 0, left: 0},
     onHoverPlaceHolder = 'horizontal',
   } = props;
-  const {activeUids} = useRender();
+  const {activeUids, customContent} = useContent();
+
   const layouts = useLayoutsData();
   const {setLayout, currentLayout} = useLayout();
   const isMobileView = isMobileUA();
 
+  const gridLabel = useString(toolbarItemLayoutOptionGridText)();
+  const sidebarLabel = useString(toolbarItemLayoutOptionSidebarText)();
+
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
@@ -48,7 +57,9 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
       };
       let content = [];
       const disabled =
-        item.name === getPinnedLayoutName() && activeUids?.length === 1
+        item.name === getPinnedLayoutName() &&
+        //activeUids?.filter((i) => customContent[i])?.length === 1
+        activeUids?.length === 1
           ? true
           : false;
       let iconButtonProps: IconButtonProps = {
@@ -80,10 +91,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
             padding: 10,
           },
           iconType: 'plain',
-          name:
-            item.iconName === 'pinned' && isMobileView
-              ? 'list-view'
-              : item.iconName,
+          icon: item.icon,
           tintColor: $config.SECONDARY_ACTION_COLOR,
         },
         btnTextProps: {
@@ -91,7 +99,12 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
             marginTop: 0,
           },
           //text: $config.ICON_TEXT ? item.label : '',
-          text: item.label,
+          text:
+            item?.translationKey === toolbarItemLayoutOptionGridText
+              ? gridLabel
+              : item?.translationKey === toolbarItemLayoutOptionSidebarText
+              ? sidebarLabel
+              : item.label,
           textColor: $config.FONT_COLOR,
         },
       };

package/template/src/subComponents/Loading.tsx

@@ -11,14 +11,25 @@
 */
 import React from 'react';
 import {StyleSheet, View, Text, ActivityIndicator} from 'react-native';
+import ThemeConfig from '../../src/theme';
 
-const Loading = (props: {text: string}) => {
-  const {text} = props;
+const Loading = (props: {
+  text: string;
+  background?: string;
+  indicatorColor?: string;
+  textColor?: string;
+}) => {
+  const {
+    text,
+    background = 'rgba(0,0,0,0.9)',
+    indicatorColor = $config.PRIMARY_ACTION_BRAND_COLOR,
+    textColor = $config.SECONDARY_ACTION_COLOR,
+  } = props;
 
   return (
-    <View style={styles.overlay}>
-      <Text style={styles.loadingText}>{text}</Text>
-      <ActivityIndicator size="large" color={$config.SECONDARY_ACTION_COLOR} />
+    <View style={[styles.overlay, {backgroundColor: background}]}>
+      <ActivityIndicator size="large" color={indicatorColor} />
+      <Text style={[styles.loadingText, {color: textColor}]}>{text}</Text>
     </View>
   );
 };
@@ -33,14 +44,16 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     zIndex: 2,
-    backgroundColor: 'rgba(0,0,0,0.9)',
+
     borderRadius: 15,
   },
   loadingText: {
     alignSelf: 'center',
-    fontSize: 18,
-    color: $config.SECONDARY_ACTION_COLOR,
-    marginBottom: 10,
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginTop: 8,
   },
 });
 

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,59 +9,75 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
-  ClientRole,
+  ClientRoleType,
   PropsContext,
   useLocalUid,
+  DispatchContext,
+  RtcContext,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
 import Styles from '../components/styles';
 import {useString} from '../utils/useString';
-import {useLocalUserInfo, useMeetingInfo} from 'customization-api';
+import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
+import {useActionSheet} from '../utils/useActionSheet';
+import {isMobileUA} from '../utils/common';
+import {
+  I18nDeviceStatus,
+  livestreamingMicrophoneTooltipText,
+  toolbarItemMicrophoneText,
+  toolbarItemMicrophoneTooltipText,
+} from '../language/default-labels/videoCallScreenLabels';
+
 /**
  * A component to mute / unmute the local audio
  */
 export interface LocalAudioMuteProps {
   plainIconHoverEffect?: boolean;
   showToolTip?: boolean;
-  showLabel?: boolean;
   iconProps?: (
     isAudioEnabled: boolean,
     isPermissionDenied: boolean,
   ) => Partial<ImageIconProps>;
   render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
   disabled?: boolean;
-  isOnActionSheet?: boolean;
   showWarningIcon?: boolean;
-  isMobileView?: boolean;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+
+  const {position} = useToolbar();
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
+  const {isOnActionSheet, isOnFirstRow, showLabel} = useActionSheet();
+  const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
+  const micButtonLabel = useString<I18nDeviceStatus>(toolbarItemMicrophoneText);
+  const micButtonTooltip = useString<I18nDeviceStatus>(
+    toolbarItemMicrophoneTooltipText,
+  );
+
+  const lstooltip = useString<boolean>(livestreamingMicrophoneTooltipText);
+
   const {
-    showToolTip = false,
-    showLabel = $config.ICON_TEXT,
-    disabled = false,
-    isOnActionSheet = false,
-    showWarningIcon = true,
-    isMobileView = false,
-  } = props;
-  //commented for v1 release
-  //const audioLabel = useString('toggleAudioButton')();
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
 
   const onPress = () => {
     localMute(MUTE_LOCAL_TYPE.audio);
@@ -73,10 +89,10 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
   const audioLabel = permissionDenied
-    ? 'Mic'
+    ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
     : isAudioEnabled
-    ? 'Mic On'
-    : 'Mic Off';
+    ? micButtonLabel(I18nDeviceStatus.ON)
+    : micButtonLabel(I18nDeviceStatus.OFF);
 
   let iconProps: IconButtonProps['iconProps'] = {
     showWarningIcon: permissionDenied && showWarningIcon ? true : false,
@@ -109,26 +125,61 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     onPress,
     iconProps,
     btnTextProps: {
-      text: showLabel ? audioLabel : '',
+      text: showLabel && callActive && !isMobileUA() ? audioLabel : '',
       textColor: $config.FONT_COLOR,
     },
     disabled: permissionDenied || disabled ? true : false,
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+    const isBroadCasting =
+      rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
+
+    iconButtonProps.disabled =
+      permissionDenied || ($config.EVENT_MODE && isAudience && !isBroadCasting)
+        ? true
+        : false;
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
+
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
-  if (!isMobileView) {
+  if (!isOnActionSheet) {
     iconButtonProps.toolTipMessage = showToolTip
       ? permissionDenied
-        ? 'Give Permissions'
+        ? micButtonTooltip(I18nDeviceStatus.PERMISSION_DENIED)
         : isAudioEnabled
-        ? 'Disable Mic'
-        : 'Enable Mic'
+        ? micButtonTooltip(I18nDeviceStatus.ON)
+        : micButtonTooltip(I18nDeviceStatus.OFF)
       : '';
+    if (
+      //precall mobile/mobile web UI - mute button should not show the label
+      (!callActive && isMobileUA()) ||
+      //desktop web -sidepanel mute button should not show the label
+      (callActive && !position)
+    ) {
+      iconButtonProps.btnTextProps.text = '';
+    }
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -136,26 +187,28 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
-    $config.EVENT_MODE &&
-    $config.RAISE_HAND &&
-    !isHost
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
+      $config.EVENT_MODE &&
+      $config.RAISE_HAND &&
+      !isHost) ||
+    local?.audioForceDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
       name: 'mic-off',
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
-    iconButtonProps.toolTipMessage = showToolTip
-      ? isHandRaised(local.uid)
-        ? 'Waiting for host to appove the request'
-        : 'Raise Hand in order to turn mic on'
-      : '';
+    iconButtonProps.toolTipMessage =
+      showToolTip && !local?.audioForceDisabled
+        ? lstooltip(isHandRaised(local.uid))
+        : '';
     iconButtonProps.disabled = true;
   }
 
   return props?.render ? (
     props.render(onPress, isAudioEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/LocalEndCall.tsx

@@ -1,21 +1,25 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {isAndroid, isIOS, useRtc} from 'customization-api';
-
+import {isAndroid, isIOS, useContent, useRoomInfo} from 'customization-api';
 import EndcallPopup from './EndcallPopup';
-import StorageContext from '../components/StorageContext';
-import {Prompt, useParams} from '../components/Router';
+import {Prompt} from '../components/Router';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {Platform} from 'react-native';
 import {useScreenshare} from './screenshare/useScreenshare';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../utils/useString';
+import {toolbarItemLeaveText} from '../language/default-labels/videoCallScreenLabels';
+import useEndCall from '../utils/useEndCall';
+
 export interface LocalEndcallProps {
-  showLabel?: boolean;
-  isOnActionSheet?: boolean;
   render?: (onPress: () => void) => JSX.Element;
+  customExit?: () => void;
 }
 
 /* For android only, bg audio */
-const stopForegroundService = () => {
+export const stopForegroundService = () => {
   if (Platform.OS === 'android') {
     ReactNativeForegroundService.stop();
     console.log('stopping foreground service');
@@ -23,30 +27,16 @@ const stopForegroundService = () => {
 };
 
 const LocalEndcall = (props: LocalEndcallProps) => {
-  const {dispatch} = useRtc();
   const {isScreenshareActive, stopUserScreenShare} = useScreenshare();
-  const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
-  //commented for v1 release
-  //const endCallLabel = useString('endCallButton')();
-  const endCallLabel = 'Leave';
-  const {setStore} = useContext(StorageContext);
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const endCallLabel = useString(toolbarItemLeaveText)();
   const [endcallVisible, setEndcallVisible] = useState(false);
-  const {phrase} = useParams<{phrase: string}>();
   const onPress = () => {
     setEndcallVisible(true);
   };
   const [endCallState, setEndCallState] = useState(false);
-
-  const executeEndCall = () => {
-    setTimeout(() => {
-      dispatch({
-        type: 'EndCall',
-        value: [],
-      });
-    });
-    // stopping foreground servie on end call
-    stopForegroundService();
-  };
+  const executeEndCall = useEndCall();
 
   useEffect(() => {
     if (!isScreenshareActive && endCallState) {
@@ -56,11 +46,15 @@ const LocalEndcall = (props: LocalEndcallProps) => {
   }, [isScreenshareActive, endCallState]);
 
   const endCall = async () => {
-    if ((isAndroid() || isIOS()) && isScreenshareActive) {
-      stopUserScreenShare();
-      setEndCallState(true);
+    if (props?.customExit) {
+      props.customExit();
     } else {
-      executeEndCall();
+      if ((isAndroid() || isIOS()) && isScreenshareActive) {
+        stopUserScreenShare();
+        setEndCallState(true);
+      } else {
+        executeEndCall();
+      }
     }
   };
 
@@ -71,7 +65,7 @@ const LocalEndcall = (props: LocalEndcallProps) => {
       iconBackgroundColor: $config.SEMANTIC_ERROR,
       iconContainerStyle: !isOnActionSheet && {
         width: 72,
-        height: 52,
+        height: $config.ICON_TEXT ? 52 : 48,
       },
     },
     onPress,
@@ -80,6 +74,25 @@ const LocalEndcall = (props: LocalEndcallProps) => {
       textColor: $config.FONT_COLOR,
     },
   };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: 'white',
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
 
   return props?.render ? (
     props.render(onPress)
@@ -100,7 +113,11 @@ const LocalEndcall = (props: LocalEndcallProps) => {
         setModalVisible={setEndcallVisible}
         modalVisible={endcallVisible}
       />
-      <IconButton {...iconButtonProps} />
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
     </>
   );
 };