agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/Navbar.tsx

@@ -9,67 +9,75 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useState} from 'react';
-import {View, Text, StyleSheet, ViewStyle, TextStyle} from 'react-native';
-import icons from '../assets/icons';
+import React, {useContext, useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextStyle,
+  useWindowDimensions,
+} from 'react-native';
 import Settings, {
   SettingsWithViewWrapper,
   SettingsIconButtonProps,
 } from './Settings';
-import CopyJoinInfo, {CopyJoinInfoProps} from '../subComponents/CopyJoinInfo';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {navHolder} from '../../theme.json';
 import ChatContext from '../components/ChatContext';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
-import {
-  BtnTemplate,
-  BtnTemplateInterface,
-  ImageIcon,
-} from '../../agora-rn-uikit';
 import LiveStreamContext from './livestream';
-import {numFormatter} from '../utils/index';
-import {useLayout} from '../utils/useLayout';
+import {filterObject, numFormatter} from '../utils/index';
 import {useChatNotification} from '../components/chat-notification/useChatNotification';
-import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {
-  isAndroid,
+  BREAKPOINTS,
+  CustomToolbarMerge,
+  CustomToolbarSorting,
   isIOS,
-  isValidReactComponent,
   isWebInternal,
+  trimText,
 } from '../utils/common';
-import {useChangeDefaultLayout} from '../pages/video-call/DefaultLayouts';
 import {useRecording} from '../subComponents/recording/useRecording';
-import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
-import DimensionContext from './dimension/DimensionContext';
 import {useString} from '../utils/useString';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import {useSidePanel} from '../utils/useSidePanel';
-import {useChatUIControl} from './chat-ui/useChatUIControl';
+import {ChatType, useChatUIControls} from './chat-ui/useChatUIControls';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import ThemeConfig from '../theme';
+import ParticipantsCount from '../atoms/ParticipantsCount';
+import RecordingInfo from '../atoms/RecordingInfo';
+import Toolbar from '../atoms/Toolbar';
+import ToolbarItem, {useToolbarProps} from '../atoms/ToolbarItem';
 import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from './styles';
-
-const RenderSeparator = () => {
-  const {getDimensionData} = useContext(DimensionContext);
-  const {isDesktop} = getDimensionData();
-  return isWebInternal() && isDesktop ? (
-    <View style={style.navItem}>
-      <View style={style.navItemSeparator}></View>
-    </View>
-  ) : (
-    <View style={{marginHorizontal: 2}}></View>
-  );
-};
+  ToolbarItemHide,
+  ToolbarItemLabel,
+  TopToolbarItemsConfig,
+  ToolbarPresetProps,
+} from '../atoms/ToolbarPreset';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useWaitingRoomContext} from './contexts/WaitingRoomContext';
+import {
+  toolbarItemChatText,
+  toolbarItemPeopleText,
+  videoRoomRecordingText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {useLanguage} from '../language/useLanguage';
 
-const ParticipantsCountView = () => {
+export const ParticipantsCountView = ({
+  isMobileView = false,
+}: {
+  isMobileView?: boolean;
+}) => {
   const {onlineUsersCount} = useContext(ChatContext);
-
-  return (
+  const peopleLabel = useString(toolbarItemPeopleText)();
+  return isMobileView ? (
+    <Text>
+      {peopleLabel} {'\n'} ({numFormatter(onlineUsersCount)})
+    </Text>
+  ) : (
     <>
       {onlineUsersCount !== 0 && (
-        <View style={[style.navItem, {justifyContent: 'center'}]}>
+        <View style={[{justifyContent: 'center'}]}>
           <View style={style.chip}>
             {onlineUsersCount > 0 && (
               <Text style={style.chipText}>
@@ -83,83 +91,119 @@ const ParticipantsCountView = () => {
   );
 };
 
-interface ParticipantsIconButtonProps {
+export interface ParticipantsIconButtonProps {
   liveStreamingRequestAlertIconPosition?: {
     top?: number;
     right?: number;
     left?: number;
     bottom?: number;
   };
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isPanelActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
 }
-const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
+export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     liveStreamingRequestAlertIconPosition = {
-      top: isWebInternal() ? -10 : 2,
+      top: 0,
+      right: 0,
       left: undefined,
-      right: undefined,
       bottom: undefined,
     },
   } = props;
+  const {isOnActionSheet, showLabel} = useActionSheet();
   const {sidePanel, setSidePanel} = useSidePanel();
-  const {isPendingRequestToReview, setLastCheckedRequestTimestamp} =
-    useContext(LiveStreamContext);
-  //commented for v1 release
-  //const participantsLabel = useString('participantsLabel')();
-  const participantsLabel = 'Participants';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const {isPendingRequestToReview} = useContext(LiveStreamContext);
+
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const participantsLabel = useString(toolbarItemPeopleText)();
   const isPanelActive = sidePanel === SidePanelType.Participants;
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const isPendingWaitingRoomApproval = isHost && waitingRoomUids.length > 0;
+
   const onPress = () => {
     isPanelActive
       ? setSidePanel(SidePanelType.None)
       : setSidePanel(SidePanelType.Participants);
-    $config.EVENT_MODE && $config.RAISE_HAND;
-    setLastCheckedRequestTimestamp(new Date().getTime());
+    // $config.EVENT_MODE && $config.RAISE_HAND;
+    //setLastCheckedRequestTimestamp(new Date().getTime());
   };
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: isPanelActive ? 'participantFilledIcon' : 'participantIcon',
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    iconProps: {
+      name: 'participants',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: showLabel ? label || participantsLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
-
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = participantsLabel;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.style = style.btnHolder;
+  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',
+    };
   }
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+
   return props?.render ? (
-    props.render(onPress, isPanelActive, buttonTemplateName)
+    props.render(onPress, isPanelActive)
   ) : (
     <>
-      <BtnTemplate {...btnTemplateProps} />
-      {$config.EVENT_MODE && $config.RAISE_HAND && isPendingRequestToReview && (
-        <View
-          style={{
-            position: 'absolute',
-            top: liveStreamingRequestAlertIconPosition.top,
-            bottom: liveStreamingRequestAlertIconPosition.bottom,
-            right: liveStreamingRequestAlertIconPosition.right,
-            left: liveStreamingRequestAlertIconPosition.left,
-          }}>
-          <View style={[style.badge, {paddingHorizontal: 3}]}>
-            <ImageIcon
-              icon={icons['exclamationIcon']}
-              color={$config.SECONDARY_FONT_COLOR}
-            />
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <>
+          <View>
+            <IconButton {...iconButtonProps} />
           </View>
-        </View>
+          {isPendingWaitingRoomApproval ||
+          ($config.EVENT_MODE &&
+            $config.RAISE_HAND &&
+            isPendingRequestToReview) ? (
+            <View
+              style={{
+                position: 'absolute',
+                top: liveStreamingRequestAlertIconPosition.top,
+                bottom: liveStreamingRequestAlertIconPosition.bottom,
+                right: liveStreamingRequestAlertIconPosition.right,
+                left: liveStreamingRequestAlertIconPosition.left,
+                backgroundColor: $config.SEMANTIC_ERROR,
+                width: 12,
+                height: 12,
+                borderRadius: 10,
+              }}></View>
+          ) : (
+            <></>
+          )}
+        </>
       )}
     </>
   );
 };
 
-interface ChatIconButtonProps {
+export interface ChatIconButtonProps {
   badgeContainerPosition?: {
     top?: number;
     right?: number;
@@ -167,61 +211,88 @@ interface ChatIconButtonProps {
     bottom?: number;
   };
   badgeTextStyle?: TextStyle;
-  buttonTemplateName?: ButtonTemplateName;
   render?: (
     onPress: () => void,
     isPanelActive: boolean,
     totalUnreadCount: number,
-    buttonTemplateName?: ButtonTemplateName,
   ) => JSX.Element;
+  isMobileView?: boolean;
 }
 
-const ChatIconButton = (props: ChatIconButtonProps) => {
+export const ChatIconButton = (props: ChatIconButtonProps) => {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {sidePanel, setSidePanel} = useSidePanel();
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     badgeContainerPosition = {
-      top: isWebInternal() ? -10 : 2,
+      top: 0,
+      right: 0,
       left: undefined,
-      right: undefined,
       bottom: undefined,
-    },
-    badgeTextStyle = {
-      color: $config.SECONDARY_FONT_COLOR,
-      fontSize: 12,
+      zIndex: 999,
     },
   } = props;
-  const {setUnreadGroupMessageCount, totalUnreadCount} = useChatNotification();
-  const {setGroupActive, setPrivateActive, setSelectedChatUserId} =
-    useChatUIControl();
-  const {sidePanel, setSidePanel} = useSidePanel();
-  //commented for v1 release
-  //const chatLabel = useString('chatLabel')();
-  const chatLabel = 'Chat';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const {totalUnreadCount} = useChatNotification();
+  const {setChatType, setPrivateChatUser} = useChatUIControls();
+
+  const chatLabel = useString(toolbarItemChatText)();
+
   const isPanelActive = sidePanel === SidePanelType.Chat;
+
+  //when chat panel is close then we need to show the toast notification. for that
+  //we are resetting flag which used when chat panel is active
+  useEffect(() => {
+    if (sidePanel !== SidePanelType.Chat) {
+      setChatType(ChatType.Group);
+      setPrivateChatUser(0);
+    }
+  }, [sidePanel]);
+
   const onPress = () => {
-    if (isPanelActive) {
-      setSidePanel(SidePanelType.None);
-      setGroupActive(false);
-      setPrivateActive(false);
-      setSelectedChatUserId(0);
-    } else {
-      setUnreadGroupMessageCount(0);
-      setGroupActive(true);
-      setSidePanel(SidePanelType.Chat);
+    {
+      if (isPanelActive) {
+        setSidePanel(SidePanelType.None);
+        setChatType(ChatType.Group);
+        setPrivateChatUser(0);
+      } else {
+        //move this logic into ChatContainer
+        //setUnreadGroupMessageCount(0);
+        setChatType(ChatType.Group);
+        setSidePanel(SidePanelType.Chat);
+      }
     }
   };
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: isPanelActive ? 'chatIconFilled' : 'chatIcon',
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    iconProps: {
+      name: 'chat-nav',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: showLabel ? label || chatLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = chatLabel;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.style = style.btnHolder;
+
+  if (isOnActionSheet) {
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
   }
-  const renderBadge = (badgeCount: any) => {
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+
+  const renderUnreadMessageIndicator = () => {
     return (
       <View
         style={{
@@ -230,340 +301,306 @@ const ChatIconButton = (props: ChatIconButtonProps) => {
           bottom: badgeContainerPosition?.bottom,
           left: badgeContainerPosition?.left,
           right: badgeContainerPosition?.right,
-        }}>
-        <View style={style.badge}>
-          <Text
-            style={{
-              ...badgeTextStyle,
-            }}>
-            {numFormatter(badgeCount)}
-          </Text>
-        </View>
-      </View>
+          borderRadius: 10,
+          width: 12,
+          height: 12,
+          backgroundColor: $config.SEMANTIC_ERROR,
+        }}
+      />
     );
   };
   return props?.render ? (
-    props.render(onPress, isPanelActive, totalUnreadCount, buttonTemplateName)
+    props.render(onPress, isPanelActive, totalUnreadCount)
   ) : (
     <>
-      <BtnTemplate {...btnTemplateProps} />
-      {sidePanel !== SidePanelType.Chat &&
-        totalUnreadCount !== 0 &&
-        renderBadge(totalUnreadCount)}
-    </>
-  );
-};
-
-interface LayoutIconButtonProps {
-  modalPosition?: {
-    top?: number;
-    right?: number;
-    left?: number;
-    bottom?: number;
-  };
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
-}
-
-const LayoutIconButton = (props: LayoutIconButtonProps) => {
-  const {modalPosition} = props;
-
-  //commented for v1 release
-  //const layoutLabel = useString('layoutLabel')('');
-  const layoutLabel = 'Layouts';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  const [showDropdown, setShowDropdown] = useState(false);
-  const layouts = useLayoutsData();
-  const changeLayout = useChangeDefaultLayout();
-  const {currentLayout} = useLayout();
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
-  const renderLayoutIcon = (showDropdown?: boolean) => {
-    let onPress = () => {};
-    let renderContent = [];
-    if (!showDropdown) {
-      onPress = () => {
-        changeLayout();
-      };
-    } else {
-      onPress = () => {
-        setShowDropdown(true);
-      };
-    }
-    let btnTemplateProps = {
-      onPress: onPress,
-      style: {},
-      btnText: '',
-    };
-    if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-      btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-      btnTemplateProps.btnText = layoutLabel;
-    } else {
-      btnTemplateProps.style = style.btnHolder;
-      delete btnTemplateProps['btnText'];
-    }
-    renderContent.push(
-      props?.render ? (
-        props.render(onPress, buttonTemplateName)
-      ) : layouts[layout]?.iconName ? (
-        <BtnTemplate
-          key={'defaultLayoutIconWithName'}
-          name={layouts[layout]?.iconName}
-          {...btnTemplateProps}
-        />
-      ) : (
-        <BtnTemplate
-          key={'defaultLayoutIconWithIcon'}
-          icon={layouts[layout]?.icon}
-          {...btnTemplateProps}
-        />
-      ),
-    );
-    return renderContent;
-  };
-  return (
-    <>
-      {/**
-       * Based on the flag. it will render the dropdown
-       */}
-      <LayoutIconDropdown
-        showDropdown={showDropdown}
-        setShowDropdown={setShowDropdown}
-        modalPosition={modalPosition}
-      />
-      {/**
-       * If layout contains more than 2 data. it will render the dropdown.
-       */}
-      {layouts && Array.isArray(layouts) && layouts.length > 2
-        ? renderLayoutIcon(true)
-        : renderLayoutIcon(false)}
+      <View>
+        {isToolbarMenuItem ? (
+          <ToolbarMenuItem {...iconButtonProps} />
+        ) : (
+          <>
+            <IconButton {...iconButtonProps} />
+            {totalUnreadCount !== 0 && renderUnreadMessageIndicator()}
+          </>
+        )}
+      </View>
     </>
   );
 };
 
-const SettingsIconButton = (props: SettingsIconButtonProps) => {
+export const SettingsIconButton = (props: SettingsIconButtonProps) => {
   return <Settings {...props} />;
 };
 const SettingsIconButtonWithWrapper = (props: SettingsIconButtonProps) => {
   return <SettingsWithViewWrapper {...props} />;
 };
 
-const Navbar = () => {
-  //commented for v1 release
-  //const recordingLabel = useString('recordingLabel')();
-  const recordingLabel = 'Recording';
+export const MeetingTitleToolbarItem = () => {
   const {
     data: {meetingTitle},
-  } = useMeetingInfo();
-
-  const {isRecordingActive} = useRecording();
-  const {getDimensionData} = useContext(DimensionContext);
-  const {isDesktop} = getDimensionData();
-  const layoutsData = useLayoutsData();
-  const isNative = isIOS() || isAndroid();
-
+  } = useRoomInfo();
   return (
-    <View
-      style={[
-        isWebInternal() ? style.navHolder : style.navHolderNative,
-        {backgroundColor: $config.SECONDARY_FONT_COLOR + 80},
-        isWebInternal()
-          ? {
-              justifyContent: isMobileOrTablet() ? 'space-between' : 'flex-end',
-            }
-          : {},
-      ]}>
-      {isRecordingActive ? (
+    <ToolbarItem>
+      <Text
+        style={style.roomNameText}
+        testID="videocall-meetingName"
+        numberOfLines={1}
+        ellipsizeMode="tail">
+        {trimText(meetingTitle)}
+      </Text>
+    </ToolbarItem>
+  );
+};
+export const ParticipantCountToolbarItem = () => {
+  return (
+    <ToolbarItem>
+      <View>
         <View
-          style={[
-            style.recordingView,
-            {backgroundColor: $config.SECONDARY_FONT_COLOR},
-          ]}>
-          <ImageIcon
-            name={'recordingActiveIcon'}
-            style={{
-              width: 20,
-              height: 20,
-              margin: 1,
-            }}
-            color="#FD0845"
-          />
-          {!isMobileOrTablet() && (
-            <Text
-              style={{
-                fontSize: isWebInternal() ? 16 : 12,
-                color: '#FD0845',
-                fontWeight: '400',
-                alignSelf: 'center',
-                textAlign: 'center',
-                flex: 1,
-              }}>
-              {recordingLabel}
-            </Text>
-          )}
+          style={{
+            width: 45,
+            height: 35,
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'center',
+            zIndex: isWebInternal() ? 3 : 0,
+          }}>
+          <ParticipantsCount />
         </View>
-      ) : (
-        <></>
-      )}
+      </View>
+    </ToolbarItem>
+  );
+};
+export const RecordingStatusToolbarItem = () => {
+  const recordingLabel = useString(videoRoomRecordingText)(
+    $config.RECORDING_MODE,
+  );
+  const {isRecordingActive} = useRecording();
+  return isRecordingActive ? (
+    <ToolbarItem>
       <View
-        style={[
-          style.roomNameContainer,
-          // @ts-ignore
-          isWebInternal() && !isMobileOrTablet()
-            ? {transform: [{translateX: '50%'}]}
-            : {},
-        ]}>
-        {isWebInternal() ? (
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'flex-start',
-              paddingLeft: 5,
-            }}>
-            <View>
-              <Text style={style.roomNameText}>
-                {isMobileOrTablet()
-                  ? meetingTitle.length > 13
-                    ? meetingTitle.slice(0, 13) + '..'
-                    : meetingTitle
-                  : meetingTitle}
-              </Text>
-            </View>
-            <View />
-            <View
-              style={{
-                backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-                width: 1,
-                height: 'auto',
-                marginHorizontal: 10,
-              }}
-            />
-            <View style={{width: 30}}>
-              <CopyJoinInfo />
-            </View>
-          </View>
-        ) : (
-          <View>
-            <Text style={style.roomNameText}>
-              {meetingTitle.length > 13
-                ? meetingTitle.slice(0, 13) + '..'
-                : meetingTitle}
-            </Text>
-          </View>
-        )}
+        style={{
+          width: 45,
+          height: 35,
+          justifyContent: 'center',
+          alignItems: 'center',
+          alignSelf: 'center',
+          zIndex: isWebInternal() ? 3 : 0,
+        }}>
+        <RecordingInfo recordingLabel={recordingLabel} />
       </View>
-      <View style={style.navControlBar}>
-        <View
-          style={[
-            style.navContainer,
-            {
-              minWidth:
-                isWebInternal() && isDesktop
-                  ? 300
-                  : isMobileOrTablet()
-                  ? //In native - if only one layout is provided then we are hiding the layout icon. so we need less space. otherwise there will empty space around the icon
-                    layoutsData && layoutsData.length === 1 && isNative
-                    ? 130
-                    : 160
-                  : 200,
-            },
-          ]}>
-          <ParticipantsCountView />
-          <View style={[style.navItem, style.navSmItem]}>
-            <ParticipantsIconButton />
-          </View>
-          {$config.CHAT ? (
-            <>
-              <RenderSeparator />
-              <View style={[style.navItem, style.navSmItem]}>
-                <ChatIconButton />
-              </View>
-            </>
-          ) : (
-            <></>
-          )}
-          {/**
-           * In custom-layout - show the layout icon if more than 1 layout provided otherwise hide it from the ui
-           */}
-          {layoutsData && layoutsData.length > 1 && (
-            <>
-              <RenderSeparator />
-              <View
-                style={[style.navItem, style.navSmItem]}
-                /**
-                 * .measure returns undefined on Android unless collapsable=false or onLayout are specified
-                 * so added collapsable property
-                 * https://github.com/facebook/react-native/issues/29712
-                 * */
-                collapsable={false}>
-                <LayoutIconButton />
-              </View>
-            </>
-          )}
-          <RenderSeparator />
-          <SettingsIconButtonWithWrapper />
-        </View>
+    </ToolbarItem>
+  ) : (
+    <></>
+  );
+};
+
+export const ParticipantToolbarItem = props => {
+  return (
+    <ToolbarItem testID="videocall-participantsicon" toolbarProps={props}>
+      <ParticipantsIconButton />
+    </ToolbarItem>
+  );
+};
+
+export const ChatToolbarItem = props => {
+  return (
+    $config.CHAT && (
+      <>
+        <ToolbarItem testID="videocall-chaticon" toolbarProps={props}>
+          <ChatIconButton />
+        </ToolbarItem>
+      </>
+    )
+  );
+};
+export const SettingsToobarItem = props => {
+  return (
+    <ToolbarItem testID="videocall-settingsicon" toolbarProps={props}>
+      <SettingsIconButtonWithWrapper />
+    </ToolbarItem>
+  );
+};
+
+const defaultItems: TopToolbarItemsConfig = {
+  'meeting-title': {
+    align: 'start',
+    component: MeetingTitleToolbarItem,
+    order: 0,
+  },
+  'participant-count': {
+    align: 'start',
+    component: ParticipantCountToolbarItem,
+    order: 1,
+  },
+  'recording-status': {
+    align: 'start',
+    component: RecordingStatusToolbarItem,
+    order: 2,
+  },
+  participant: {
+    align: 'end',
+    component: ParticipantToolbarItem,
+    order: 0,
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
+  },
+  chat: {
+    align: 'end',
+    component: ChatToolbarItem,
+    order: 1,
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
+  },
+  settings: {
+    align: 'end',
+    component: SettingsToobarItem,
+    order: 2,
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
+  },
+};
+
+export interface NavbarProps {
+  items?: ToolbarPresetProps['items'];
+  includeDefaultItems?: boolean;
+}
+const Navbar = (props: NavbarProps) => {
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
+  const {languageCode} = useLanguage();
+
+  const isHidden = (hide: ToolbarItemHide = false) => {
+    try {
+      return typeof hide === 'boolean'
+        ? hide
+        : typeof hide === 'function'
+        ? hide(width, height)
+        : false;
+    } catch (error) {
+      console.log('debugging isHidden error', error);
+      return false;
+    }
+  };
+
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
+
+  const startItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'start' && !isHidden(v?.hide),
+  );
+  const centerItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'center' && !isHidden(v?.hide),
+  );
+  const endItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'end' && !isHidden(v?.hide),
+  );
+
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+  const centerItemsOrdered = CustomToolbarSorting(centerItems);
+  const endItemsOrdered = CustomToolbarSorting(endItems);
+
+  const customLabel = (labelParam: ToolbarItemLabel) => {
+    if (labelParam && typeof labelParam === 'string') {
+      return labelParam;
+    } else if (labelParam && typeof labelParam === 'function') {
+      return labelParam(languageCode);
+    } else {
+      return null;
+    }
+  };
+
+  const renderContent = (
+    orderedKeys: string[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      let label = null;
+      let onPress = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+        label = startItems[keyName]?.label;
+        onPress = startItems[keyName]?.onPress;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
+        label = centerItems[keyName]?.label;
+        onPress = centerItems[keyName]?.onPress;
+      } else {
+        ToolbarComponent = endItems[keyName]?.component;
+        label = endItems[keyName]?.label;
+        onPress = endItems[keyName]?.onPress;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent
+            key={`top-toolbar-${type}` + index}
+            label={customLabel(label)}
+            onPress={onPress}
+          />,
+        );
+      }
+    });
+
+    return renderContentItem;
+  };
+
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {renderContent(startItemsOrdered, 'start')}
       </View>
-    </View>
+      <View style={style.centerContent}>
+        {renderContent(centerItemsOrdered, 'center')}
+      </View>
+      <View style={style.endContent}>
+        {renderContent(endItemsOrdered, 'end')}
+      </View>
+    </Toolbar>
   );
 };
-type NavBarComponentsArrayProps = [
-  (props: CopyJoinInfoProps) => JSX.Element,
-  () => JSX.Element,
-  (props: ParticipantsIconButtonProps) => JSX.Element,
-  (props: ChatIconButtonProps) => JSX.Element,
-  (props: LayoutIconButtonProps) => JSX.Element,
-  (props: SettingsIconButtonProps) => JSX.Element,
-];
-export const NavBarComponentsArray: NavBarComponentsArrayProps = [
-  CopyJoinInfo,
-  ParticipantsCountView,
-  ParticipantsIconButton,
-  ChatIconButton,
-  LayoutIconButton,
-  SettingsIconButton,
-];
 
 const style = StyleSheet.create({
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0,0,0,0.3)',
+  startContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
   },
-  navHolder: navHolder as ViewStyle,
-  navHolderNative: {
-    position: 'relative',
-    width: '100%',
-    height: '8%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR + '80',
+  centerContent: {
+    zIndex: 2,
+    flex: 1,
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 10,
-    justifyContent: 'space-between',
   },
-  recordingView: {
-    height: 35,
-    maxHeight: 30,
-    position: 'absolute',
-    left: isMobileOrTablet() ? '48%' : 10,
-    paddingHorizontal: 5,
+  endContent: {
+    flex: 1,
+    zIndex: 9,
     flexDirection: 'row',
+    justifyContent: 'flex-end',
     alignItems: 'center',
-    alignContent: 'center',
-    justifyContent: 'center',
-    borderRadius: 10,
   },
-  recordingIcon: {
-    width: 20,
-    height: 20,
-    margin: 1,
-    resizeMode: 'contain',
+  participantCountView: {
+    flexDirection: 'row',
+    padding: 12,
+    backgroundColor: $config.ICON_BG_COLOR,
+    borderRadius: 25,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
   },
   btnHolder: {
     marginHorizontal: isMobileOrTablet() ? 2 : 0,
@@ -577,38 +614,21 @@ const style = StyleSheet.create({
     resizeMode: 'contain',
   },
   roomNameContainer: {
-    paddingHorizontal: 1,
-    marginHorizontal: 1,
-    height: 35,
-    maxHeight: 30,
+    zIndex: 10,
+    flex: 1,
     flexDirection: 'row',
-    justifyContent: 'flex-end',
     alignItems: 'center',
-    zIndex: 10,
   },
+
   roomNameText: {
-    fontSize: 18,
-    color: $config.PRIMARY_FONT_COLOR,
-    fontWeight: '500',
-  },
-  badge: {
-    lineHeight: 1,
-    height: 20,
-    minWidth: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    paddingHorizontal: 5,
-    top: 0,
-    left: -2,
+    alignSelf: 'center',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
   },
   chip: {
-    backgroundColor: $config.PRIMARY_COLOR,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     borderRadius: 2.5,
     paddingHorizontal: 5,
     marginLeft: 5,
@@ -621,52 +641,13 @@ const style = StyleSheet.create({
   chipText: {
     fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     fontSize: 12,
-    color: $config.SECONDARY_FONT_COLOR,
-  },
-  navControlBar: {
-    width: '50%',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    zIndex: 9,
-  },
-  navContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    backgroundColor: isWebInternal()
-      ? $config.SECONDARY_FONT_COLOR
-      : $config.SECONDARY_FONT_COLOR + '00',
-    paddingVertical: 4,
-    paddingHorizontal: isMobileOrTablet() ? 0 : 10,
-    minHeight: 35,
-    borderRadius: 10,
-  },
-  navItem: {
-    height: '100%',
-    alignItems: 'center',
-    position: 'relative',
+    color: $config.SECONDARY_ACTION_COLOR,
   },
   navSmItem: {
     flexGrow: 0,
     flexShrink: 0,
     flexBasis: '15%',
   },
-  navItemSeparator: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-    width: 1,
-    height: '100%',
-    marginHorizontal: 10,
-    alignSelf: 'center',
-    opacity: 0.8,
-  },
-  navItemSeparatorHorizontal: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-    width: '100%',
-    height: 1,
-    marginVertical: 10,
-    alignSelf: 'center',
-    opacity: 0.8,
-  },
   dropdownIconContainer: {
     flex: 1,
     paddingHorizontal: 5,