agora-appbuilder-core 4.0.0-api.1 → 4.0.0-api.2

package/package.json

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

package/template/customization-api/sub-components.ts

@@ -18,8 +18,6 @@ export {Icons} from '../agora-rn-uikit';
 //video call components
 export {
   ParticipantsView,
-  Controls,
-  Navbar,
   ChatBubble,
   ChatInput,
   Chat,
@@ -52,3 +50,10 @@ export {
   ClientRole as UikitClientRole,
   ChannelProfile as UikitChannelProfile,
 } from '../agora-rn-uikit';
+export {default as Toolbar} from '../src/atoms/Toolbar';
+export {default as ToolbarItem} from '../src/atoms/ToolbarItem';
+export {default as ToolbarPreset} from '../src/atoms/ToolbarPreset';
+export type {
+  ToolbarCustomItem,
+  ToolbarPresetProps,
+} from '../src/atoms/ToolbarPreset';

package/template/customization-api/utils.ts

@@ -21,6 +21,9 @@ export {default as useIsPSTN} from '../src/utils/useIsPSTN';
 export {default as useIsAudioEnabled} from '../src/utils/useIsAudioEnabled';
 export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 
+//hook to get active speaker uid
+export {default as useActiveSpeaker} from '../src/utils/useActiveSpeaker';
+
 //hooks used for navigation
 export {useHistory, useParams} from '../src/components/Router';
 

package/template/src/atoms/ToolbarPreset.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Controls from '../components/Controls';
+import Leftbar from '../components/Leftbar';
+import Rightbar from '../components/Rightbar';
+
+export interface ToolbarCustomItem {
+  component: () => JSX.Element;
+  align: 'start' | 'center' | 'end';
+  hide: 'yes' | 'no' | 'never';
+  order?: number;
+}
+
+export interface ToolbarPresetProps {
+  align: 'top' | 'left' | 'bottom' | 'right';
+  customItems?: Array<ToolbarCustomItem>;
+}
+
+const ToolbarPreset = (props: ToolbarPresetProps) => {
+  const {align} = props;
+  if (!align) {
+    console.log(
+      'ToolbarPreset align prop is empty. please provide align prop to get the corresponding toolbar preset',
+    );
+    return null;
+  }
+  if (align === 'left') {
+    return <Leftbar customItems={props?.customItems} />;
+  } else if (align === 'right') {
+    return <Rightbar customItems={props?.customItems} />;
+  } else if (align === 'top') {
+    return <Navbar customItems={props?.customItems} />;
+  } else if (align === 'bottom') {
+    return <Controls customItems={props?.customItems} />;
+  } else {
+    return null;
+  }
+};
+export default ToolbarPreset;

package/template/src/components/Controls.tsx

@@ -10,38 +10,21 @@
 *********************************************
 */
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {PropsContext} from '../../agora-rn-uikit';
-import LocalAudioMute, {
-  LocalAudioMuteProps,
-} from '../subComponents/LocalAudioMute';
-import LocalVideoMute, {
-  LocalVideoMuteProps,
-} from '../subComponents/LocalVideoMute';
-import Recording, {RecordingButtonProps} from '../subComponents/Recording';
-import LocalSwitchCamera, {
-  LocalSwitchCameraProps,
-} from '../subComponents/LocalSwitchCamera';
-import ScreenshareButton, {
-  ScreenshareButtonProps,
-} from '../subComponents/screenshare/ScreenshareButton';
+import LocalAudioMute from '../subComponents/LocalAudioMute';
+import LocalVideoMute from '../subComponents/LocalVideoMute';
+import Recording from '../subComponents/Recording';
+import LocalSwitchCamera from '../subComponents/LocalSwitchCamera';
+import ScreenshareButton from '../subComponents/screenshare/ScreenshareButton';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {ClientRole} from '../../agora-rn-uikit';
-import LiveStreamControls, {
-  LiveStreamControlsProps,
-} from './livestream/views/LiveStreamControls';
-import {
-  BREAKPOINTS,
-  calculatePosition,
-  isWebInternal,
-  useIsDesktop,
-} from '../utils/common';
+import LiveStreamControls from './livestream/views/LiveStreamControls';
+import {BREAKPOINTS, useIsDesktop} from '../utils/common';
 import {useRoomInfo} from './room-info/useRoomInfo';
-import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
-import Spacer from '../atoms/Spacer';
+import LocalEndcall from '../subComponents/LocalEndCall';
 import LayoutIconButton from '../subComponents/LayoutIconButton';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import IconButton from '../atoms/IconButton';
 import ActionMenu, {ActionMenuItem} from '../atoms/ActionMenu';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
@@ -57,8 +40,8 @@ import {useVideoCall} from './useVideoCall';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
 import Toolbar from '../atoms/Toolbar';
-import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
+import {ToolbarCustomItem} from 'src/atoms/ToolbarPreset';
 
 const MoreButton = () => {
   const {rtcProps} = useContext(PropsContext);
@@ -278,117 +261,272 @@ const MoreButton = () => {
     </>
   );
 };
-const Controls = () => {
+export const LayoutToolbarItem = () => (
+  <ToolbarItem testID="layout-btn" collapsable={false}>
+    {/**
+     * .measure returns undefined on Android unless collapsable=false or onLayout are specified
+     * so added collapsable property
+     * https://github.com/facebook/react-native/issues/29712
+     * */}
+    <LayoutIconButton />
+  </ToolbarItem>
+);
+export const InviteToolbarItem = () => {
+  return (
+    <ToolbarItem testID="invite-btn">
+      <CopyJoinInfo />
+    </ToolbarItem>
+  );
+};
+const defaultStartItems: Array<ToolbarCustomItem> = [
+  {
+    align: 'start',
+    component: LayoutToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: InviteToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+];
+
+export const RaiseHandToolbarItem = () => {
   const {rtcProps} = useContext(PropsContext);
   const isDesktop = useIsDesktop();
   const {
     data: {isHost},
   } = useRoomInfo();
-  const {isHorizontal} = useToolbar();
+  return $config.EVENT_MODE ? (
+    rtcProps.role == ClientRole.Audience ? (
+      <LiveStreamControls
+        showControls={true}
+        isDesktop={isDesktop('toolbar')}
+      />
+    ) : rtcProps?.role == ClientRole.Broadcaster ? (
+      /**
+       * In event mode when raise hand feature is active
+       * and audience is promoted to host, the audience can also
+       * demote himself
+       */
+      <LiveStreamControls
+        isDesktop={isDesktop('toolbar')}
+        showControls={!isHost}
+      />
+    ) : (
+      <></>
+    )
+  ) : (
+    <></>
+  );
+};
+
+export const LocalAudioToolbarItem = () => {
+  return (
+    <ToolbarItem testID="localAudio-btn">
+      <LocalAudioMute showToolTip={true} />
+    </ToolbarItem>
+  );
+};
+
+export const LocalVideoToolbarItem = () => {
+  return (
+    !$config.AUDIO_ROOM && (
+      <ToolbarItem testID="localVideo-btn">
+        <LocalVideoMute showToolTip={true} />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const SwitchCameraToolbarItem = () => {
+  return (
+    !$config.AUDIO_ROOM &&
+    isMobileOrTablet() && (
+      <ToolbarItem testID="switchCamera-btn">
+        <LocalSwitchCamera />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const ScreenShareToolbarItem = () => {
+  const {width} = useWindowDimensions();
+  return (
+    width > BREAKPOINTS.sm &&
+    $config.SCREEN_SHARING &&
+    !isMobileOrTablet() && (
+      <ToolbarItem testID="screenShare-btn">
+        <ScreenshareButton />
+      </ToolbarItem>
+    )
+  );
+};
+export const RecordingToolbarItem = () => {
+  const {width} = useWindowDimensions();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  return (
+    width > BREAKPOINTS.sm &&
+    isHost &&
+    $config.CLOUD_RECORDING && (
+      <ToolbarItem testID="recording-btn">
+        <Recording />
+      </ToolbarItem>
+    )
+  );
+};
+
+export const MoreButtonToolbarItem = () => {
   const {width} = useWindowDimensions();
+  return (
+    width < BREAKPOINTS.md && (
+      <ToolbarItem testID="more-btn">
+        <MoreButton />
+      </ToolbarItem>
+    )
+  );
+};
+export const LocalEndcallToolbarItem = () => {
+  return (
+    <ToolbarItem testID="endCall-btn">
+      <LocalEndcall />
+    </ToolbarItem>
+  );
+};
+
+const defaultCenterItems: ToolbarCustomItem[] = [
+  {
+    align: 'start',
+    component: RaiseHandToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalAudioToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalVideoToolbarItem,
+    order: 2,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: SwitchCameraToolbarItem,
+    order: 3,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: ScreenShareToolbarItem,
+    order: 4,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: RecordingToolbarItem,
+    order: 5,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: MoreButtonToolbarItem,
+    order: 6,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: LocalEndcallToolbarItem,
+    order: 7,
+    hide: 'no',
+  },
+];
+
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface ControlsProps {
+  customItems?: ToolbarCustomItem[];
+}
+const Controls = (props: ControlsProps) => {
+  const {customItems = []} = props;
+  const {width} = useWindowDimensions();
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(defaultStartItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(defaultCenterItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(defaultEndItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`bottom-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
   return (
     <Toolbar>
       {width >= BREAKPOINTS.md && (
-        <View
-          style={[
-            style.leftContent,
-            isHorizontal ? {flexDirection: 'row'} : {flexDirection: 'column'},
-          ]}>
-          <ToolbarItem testID="layout-btn" collapsable={false}>
-            {/**
-             * .measure returns undefined on Android unless collapsable=false or onLayout are specified
-             * so added collapsable property
-             * https://github.com/facebook/react-native/issues/29712
-             * */}
-            <LayoutIconButton />
-          </ToolbarItem>
-          <ToolbarItem testID="invite-btn">
-            <CopyJoinInfo />
-          </ToolbarItem>
+        <View style={[style.startContent]}>
+          {renderContent(customStartItems, 'start')}
         </View>
       )}
-      <View
-        style={[
-          style.centerContent,
-          isHorizontal ? {flexDirection: 'row'} : {flexDirection: 'column'},
-        ]}>
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <LiveStreamControls
-            showControls={true}
-            isDesktop={isDesktop('toolbar')}
-          />
-        ) : (
-          <></>
-        )}
-        <>
-          {/**
-           * In event mode when raise hand feature is active
-           * and audience is promoted to host, the audience can also
-           * demote himself
-           */}
-          {$config.EVENT_MODE ? (
-            <LiveStreamControls
-              isDesktop={isDesktop('toolbar')}
-              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
-            />
-          ) : (
-            <></>
-          )}
-          <ToolbarItem testID="localAudio-btn">
-            <LocalAudioMute showToolTip={true} />
-          </ToolbarItem>
-          {!$config.AUDIO_ROOM && (
-            <ToolbarItem testID="localVideo-btn">
-              <LocalVideoMute showToolTip={true} />
-            </ToolbarItem>
-          )}
-          {!$config.AUDIO_ROOM && isMobileOrTablet() && (
-            <ToolbarItem testID="switchCamera-btn">
-              <LocalSwitchCamera />
-            </ToolbarItem>
-          )}
-          {width > BREAKPOINTS.sm &&
-            $config.SCREEN_SHARING &&
-            !isMobileOrTablet() && (
-              <ToolbarItem testID="screenShare-btn">
-                <ScreenshareButton />
-              </ToolbarItem>
-            )}
-          {width > BREAKPOINTS.sm && isHost && $config.CLOUD_RECORDING && (
-            <ToolbarItem testID="recording-btn">
-              <Recording />
-            </ToolbarItem>
-          )}
-        </>
-        {width < BREAKPOINTS.md && (
-          <ToolbarItem testID="more-btn">
-            <MoreButton />
-          </ToolbarItem>
-        )}
-        <ToolbarItem testID="endCall-btn">
-          <LocalEndcall />
-        </ToolbarItem>
+      <View style={[style.centerContent]}>
+        {renderContent(customCenterItems, 'center')}
       </View>
-      {width >= BREAKPOINTS.md && <View style={style.rightContent}></View>}
+      {width >= BREAKPOINTS.md && (
+        <View style={style.endContent}>
+          {renderContent(customEndItems, 'end')}
+        </View>
+      )}
     </Toolbar>
   );
 };
 
 const style = StyleSheet.create({
-  leftContent: {
+  startContent: {
     flex: 1,
-
+    flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
   },
   centerContent: {
     zIndex: 2,
     flex: 1,
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  rightContent: {
+  endContent: {
     flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
   },
 });
 

package/template/src/components/Leftbar.tsx

@@ -0,0 +1,108 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+
+const defaultStartItems: ToolbarCustomItem[] = [];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface LeftbarProps {
+  customItems?: ToolbarCustomItem[];
+}
+const Leftbar = (props: LeftbarProps) => {
+  const {customItems = []} = props;
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(defaultStartItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(defaultCenterItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(defaultEndItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {customStartItems && customStartItems?.length ? (
+          renderContent(customStartItems, 'start')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.centerContent}>
+        {customCenterItems && customCenterItems?.length ? (
+          renderContent(customCenterItems, 'center')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.endContent}>
+        {customEndItems && customEndItems?.length ? (
+          renderContent(customEndItems, 'end')
+        ) : (
+          <></>
+        )}
+      </View>
+    </Toolbar>
+  );
+};
+
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+export default Leftbar;

package/template/src/components/Navbar.tsx

@@ -60,6 +60,7 @@ import styles from 'react-native-toast-message/src/styles';
 import RecordingInfo from '../atoms/RecordingInfo';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -312,72 +313,162 @@ const SettingsIconButtonWithWrapper = (props: SettingsIconButtonProps) => {
   return <SettingsWithViewWrapper {...props} />;
 };
 
-const Navbar = () => {
-  //commented for v1 release
-  //const recordingLabel = useString('recordingLabel')();
-  const {isHorizontal} = useToolbar();
-  const recordingLabel = 'Recording';
-  const {audienceUids, hostUids} = useLiveStreamDataContext();
+export const MeetingTitleToolbarItem = () => {
   const {
     data: {meetingTitle},
   } = useRoomInfo();
-
+  return (
+    <ToolbarItem>
+      <Text
+        style={style.roomNameText}
+        testID="videocall-meetingName"
+        numberOfLines={1}
+        ellipsizeMode="tail">
+        {trimText(meetingTitle)}
+      </Text>
+    </ToolbarItem>
+  );
+};
+export const ParticipantCountToolbarItem = () => {
+  return (
+    <ToolbarItem>
+      <ParticipantsCount />
+    </ToolbarItem>
+  );
+};
+export const RecordingStatusToolbarItem = () => {
+  const recordingLabel = 'Recording';
   const {isRecordingActive} = useRecording();
-  const {onlineUsersCount} = useContext(ChatContext);
+  return isRecordingActive ? (
+    <ToolbarItem>
+      <RecordingInfo recordingLabel={recordingLabel} />
+    </ToolbarItem>
+  ) : (
+    <></>
+  );
+};
+const defaultStartItems: ToolbarCustomItem[] = [
+  {
+    align: 'start',
+    component: MeetingTitleToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: ParticipantCountToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: RecordingStatusToolbarItem,
+    order: 2,
+    hide: 'no',
+  },
+];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+
+export const ParticipantToolbarItem = () => {
+  return (
+    <ToolbarItem testID="videocall-participantsicon">
+      <ParticipantsIconButton />
+    </ToolbarItem>
+  );
+};
+
+export const ChatToolbarItem = () => {
+  return (
+    $config.CHAT && (
+      <>
+        <ToolbarItem testID="videocall-chaticon">
+          <ChatIconButton />
+        </ToolbarItem>
+      </>
+    )
+  );
+};
+export const SettingsToobarItem = () => {
+  return (
+    <ToolbarItem testID="videocall-settingsicon">
+      <SettingsIconButtonWithWrapper />
+    </ToolbarItem>
+  );
+};
+
+const defaultEndItems: ToolbarCustomItem[] = [
+  {
+    align: 'start',
+    component: ParticipantToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: ChatToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'start',
+    component: SettingsToobarItem,
+    order: 2,
+    hide: 'no',
+  },
+];
+
+export interface NavbarProps {
+  customItems?: ToolbarCustomItem[];
+}
+const Navbar = (props: NavbarProps) => {
+  //commented for v1 release
+  //const recordingLabel = useString('recordingLabel')();
+  const {customItems = []} = props;
   const {width} = useWindowDimensions();
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+
+  const customStartItems = customItems
+    ?.filter((i) => i.align === 'start' && !isHidden(i))
+    ?.concat(defaultStartItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i.align === 'center' && !isHidden(i))
+    ?.concat(defaultCenterItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i.align === 'end' && !isHidden(i))
+    ?.concat(defaultEndItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`top-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
   return (
     <Toolbar>
-      <View
-        style={[
-          isHorizontal
-            ? {flexDirection: 'row'}
-            : {flexDirection: 'column', justifyContent: 'center'},
-        ]}>
-        <ToolbarItem>
-          <Text
-            style={style.roomNameText}
-            testID="videocall-meetingName"
-            numberOfLines={1}
-            ellipsizeMode="tail">
-            {trimText(meetingTitle)}
-          </Text>
-        </ToolbarItem>
-        {/* <Spacer size={8} horizontal={isHorizontal ? true : false} /> */}
-        <ToolbarItem>
-          <ParticipantsCount />
-        </ToolbarItem>
-        {isRecordingActive ? (
-          <ToolbarItem>
-            <RecordingInfo
-              recordingLabel={isHorizontal ? recordingLabel : ''}
-            />
-          </ToolbarItem>
-        ) : (
-          <></>
-        )}
+      <View style={style.startContent}>
+        {renderContent(customStartItems, 'start')}
+      </View>
+      <View style={style.centerContent}>
+        {renderContent(customCenterItems, 'center')}
       </View>
       {width > BREAKPOINTS.sm || isMobileUA() ? (
-        <View
-          style={[
-            style.navControlBar,
-            isHorizontal
-              ? {flexDirection: 'row', width: '50%'}
-              : {flexDirection: 'column'},
-          ]}
-          testID="videocall-navcontrols">
-          <ToolbarItem testID="videocall-participantsicon">
-            <ParticipantsIconButton />
-          </ToolbarItem>
-          {$config.CHAT && (
-            <>
-              <ToolbarItem testID="videocall-chaticon">
-                <ChatIconButton />
-              </ToolbarItem>
-            </>
-          )}
-          <ToolbarItem testID="videocall-settingsicon">
-            <SettingsIconButtonWithWrapper />
-          </ToolbarItem>
+        <View style={style.endContent}>
+          {renderContent(customEndItems, 'end')}
         </View>
       ) : (
         <></>
@@ -387,6 +478,26 @@ const Navbar = () => {
 };
 
 const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    zIndex: 2,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 9,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
   participantCountView: {
     flexDirection: 'row',
     padding: 12,
@@ -440,10 +551,6 @@ const style = StyleSheet.create({
     fontSize: 12,
     color: $config.SECONDARY_ACTION_COLOR,
   },
-  navControlBar: {
-    justifyContent: 'flex-end',
-    zIndex: 9,
-  },
   navSmItem: {
     flexGrow: 0,
     flexShrink: 0,

package/template/src/components/Rightbar.tsx

@@ -0,0 +1,110 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+
+const defaultStartItems: ToolbarCustomItem[] = [];
+const defaultCenterItems: ToolbarCustomItem[] = [];
+const defaultEndItems: ToolbarCustomItem[] = [];
+
+export interface RightbarProps {
+  customItems?: ToolbarCustomItem[];
+}
+const Rightbar = (props: RightbarProps) => {
+  const {customItems = []} = props;
+
+  const isHidden = (i) => {
+    return i?.hide === 'yes';
+  };
+
+  const customStartItems = customItems
+    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.concat(defaultStartItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customCenterItems = customItems
+    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.concat(defaultCenterItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const customEndItems = customItems
+    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.concat(defaultEndItems)
+    ?.sort((a, b) => a?.order - b?.order);
+
+  const renderContent = (
+    items: ToolbarCustomItem[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    return items?.map((item, index) => {
+      const ToolbarItem = item?.component;
+      if (ToolbarItem) {
+        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+      } else {
+        return null;
+      }
+    });
+  };
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {customStartItems && customStartItems?.length ? (
+          renderContent(customStartItems, 'start')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.centerContent}>
+        {customCenterItems && customCenterItems?.length ? (
+          renderContent(customCenterItems, 'center')
+        ) : (
+          <></>
+        )}
+      </View>
+      <View style={style.endContent}>
+        {customEndItems && customEndItems?.length ? (
+          renderContent(customEndItems, 'end')
+        ) : (
+          <></>
+        )}
+      </View>
+    </Toolbar>
+  );
+};
+
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+export default Rightbar;

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

@@ -7,10 +7,10 @@ import {
   Platform,
 } from 'react-native';
 import {useCustomization} from 'customization-implementation';
-import Navbar from '../../components/Navbar';
+import Navbar, {NavbarProps} from '../../components/Navbar';
 import ParticipantsView from '../../components/ParticipantsView';
 import SettingsView from '../../components/SettingsView';
-import Controls from '../../components/Controls';
+import Controls, {ControlsProps} from '../../components/Controls';
 import Chat, {ChatProps} from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {
@@ -28,6 +28,8 @@ import {useRoomInfo} from '../../components/room-info/useRoomInfo';
 import {controlMessageEnum, useUserName} from 'customization-api';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
+import Leftbar, {LeftbarProps} from '../../components/Leftbar';
+import Rightbar, {RightbarProps} from '../../components/Rightbar';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
@@ -50,14 +52,14 @@ const VideoCallScreen = () => {
     let components: {
       VideocallComponent?: React.ComponentType;
       ChatComponent: React.ComponentType<ChatProps>;
-      BottombarComponent: React.ComponentType;
+      BottombarComponent: React.ComponentType<ControlsProps>;
       ParticipantsComponent: React.ComponentType;
       SettingsComponent: React.ComponentType;
-      TopbarComponent: React.ComponentType;
+      TopbarComponent: React.ComponentType<NavbarProps>;
       VideocallBeforeView: React.ComponentType;
       VideocallAfterView: React.ComponentType;
-      LeftbarComponent: React.ComponentType;
-      RightbarComponent: React.ComponentType;
+      LeftbarComponent: React.ComponentType<LeftbarProps>;
+      RightbarComponent: React.ComponentType<RightbarProps>;
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -66,8 +68,8 @@ const VideoCallScreen = () => {
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
-      LeftbarComponent: React.Fragment,
-      RightbarComponent: React.Fragment,
+      LeftbarComponent: Leftbar,
+      RightbarComponent: Rightbar,
     };
     if (
       data?.components?.videoCall &&

package/template/src/pages/video-call/index.ts

@@ -1,40 +1,44 @@
 import ParticipantsView from '../../components/ParticipantsView';
 import Chat from '../../components/Chat';
 import Navbar, {
-  ParticipantsCountView,
-  ParticipantsIconButton,
-  ChatIconButton,
-  SettingsIconButton,
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
 } from '../../components/Navbar';
-import CopyJoinInfo from '../../subComponents/CopyJoinInfo';
-import LayoutIconButton from '../../subComponents/LayoutIconButton';
-import SettingsView from '../../components/SettingsView';
-import Controls from '../../components/Controls';
-import LiveStreamControls from '../../components/livestream/views/LiveStreamControls';
-import LocalEndcall from '../../subComponents/LocalEndCall';
-import LocalAudioMute from '../../subComponents/LocalAudioMute';
-import LocalVideoMute from '../../subComponents/LocalVideoMute';
-import Recording from '../../subComponents/Recording';
-import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
-import ScreenshareButton from '../../subComponents/screenshare/ScreenshareButton';
-
+import Controls, {
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+} from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
 import {ChatInput} from '../../subComponents/ChatInput';
+import SettingsView from '../../components/SettingsView';
 
 const ToolbarComponents = {
-  CopyJoinInfo,
-  ParticipantsCountView,
-  ParticipantsIconButton,
-  ChatIconButton,
-  LayoutIconButton,
-  SettingsIconButton,
-  LocalAudioMute,
-  LocalVideoMute,
-  LocalSwitchCamera,
-  ScreenshareButton,
-  Recording,
-  LocalEndcall,
-  LiveStreamControls,
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
 };
 export {
   ParticipantsView,