agora-appbuilder-core 4.0.13 → 4.0.14

package/template/src/components/Navbar.tsx

@@ -39,6 +39,7 @@ import {
   isValidReactComponent,
   isWebInternal,
   trimText,
+  updateToolbarDefaultConfig,
   useIsDesktop,
 } from '../utils/common';
 import {useChangeDefaultLayout} from '../pages/video-call/DefaultLayouts';
@@ -61,7 +62,11 @@ 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';
+import {
+  ToolbarCustomItem,
+  ToolbarDefaultItem,
+  ToolbarDefaultItemConfig,
+} from '../atoms/ToolbarPreset';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
@@ -435,27 +440,6 @@ export const RecordingStatusToolbarItem = () => {
     <></>
   );
 };
-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 (
@@ -484,21 +468,45 @@ export const SettingsToobarItem = () => {
   );
 };
 
-const defaultEndItems: ToolbarCustomItem[] = [
+const defaultItems: ToolbarDefaultItem[] = [
   {
     align: 'start',
-    component: ParticipantToolbarItem,
+    componentName: 'meeting-title',
+    component: MeetingTitleToolbarItem,
     order: 0,
     hide: 'no',
   },
   {
     align: 'start',
-    component: ChatToolbarItem,
+    componentName: 'participant-count',
+    component: ParticipantCountToolbarItem,
     order: 1,
     hide: 'no',
   },
   {
     align: 'start',
+    componentName: 'recording-status',
+    component: RecordingStatusToolbarItem,
+    order: 2,
+    hide: 'no',
+  },
+  {
+    align: 'end',
+    componentName: 'participant',
+    component: ParticipantToolbarItem,
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'end',
+    componentName: 'chat',
+    component: ChatToolbarItem,
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'end',
+    componentName: 'settings',
     component: SettingsToobarItem,
     order: 2,
     hide: 'no',
@@ -508,9 +516,14 @@ const defaultEndItems: ToolbarCustomItem[] = [
 export interface NavbarProps {
   customItems?: ToolbarCustomItem[];
   includeDefaultItems?: boolean;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
 }
 const Navbar = (props: NavbarProps) => {
-  const {customItems = [], includeDefaultItems = true} = props;
+  const {
+    customItems = [],
+    includeDefaultItems = true,
+    defaultItemsConfig = {},
+  } = props;
   const {width} = useWindowDimensions();
 
   const isHidden = i => {
@@ -518,18 +531,30 @@ const Navbar = (props: NavbarProps) => {
   };
 
   const customStartItems = customItems
+    ?.concat(
+      includeDefaultItems
+        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
+        : [],
+    )
     ?.filter(i => i.align === 'start' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort(CustomToolbarSort);
 
   const customCenterItems = customItems
+    ?.concat(
+      includeDefaultItems
+        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
+        : [],
+    )
     ?.filter(i => i.align === 'center' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort(CustomToolbarSort);
 
   const customEndItems = customItems
+    ?.concat(
+      includeDefaultItems
+        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
+        : [],
+    )
     ?.filter(i => i.align === 'end' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort(CustomToolbarSort);
 
   const renderContent = (

package/template/src/components/NavbarMobile.tsx

@@ -1,67 +1,66 @@
 import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
-import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {
+  ToolbarCustomItem,
+  ToolbarDefaultItem,
+  ToolbarDefaultItemConfig,
+} from '../atoms/ToolbarPreset';
 import {
   MeetingTitleToolbarItem,
   ParticipantCountToolbarItem,
   RecordingStatusToolbarItem,
 } from './Navbar';
 import {useRecording} from '../subComponents/recording/useRecording';
-import {CustomToolbarSort} from '../utils/common';
+import {CustomToolbarSort, updateToolbarDefaultConfig} from '../utils/common';
 
 export interface NavbarProps {
   customItems?: ToolbarCustomItem[];
   includeDefaultItems?: boolean;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
 }
 
 const NavbarMobile = (props: NavbarProps) => {
   const {isRecordingActive} = useRecording();
-  const defaultStartItems: ToolbarCustomItem[] = [
+  const defaultItems: ToolbarDefaultItem[] = [
     {
       align: 'start',
+      componentName: 'meeting-title',
       component: MeetingTitleToolbarItem,
       order: 0,
       hide: 'no',
     },
     {
       align: 'start',
+      componentName: 'participant-count',
       component: ParticipantCountToolbarItem,
       order: 1,
       hide: 'no',
     },
     {
       align: 'start',
+      componentName: 'recording-status',
       component: isRecordingActive ? RecordingStatusToolbarItem : null,
       order: 2,
       hide: 'no',
     },
   ];
-  const defaultCenterItems: ToolbarCustomItem[] = [];
-  const defaultEndItems: ToolbarCustomItem[] = [];
-  const {customItems = [], includeDefaultItems = true} = props;
-  const isHidden = (i) => {
+  const {
+    customItems = [],
+    includeDefaultItems = true,
+    defaultItemsConfig = {},
+  } = props;
+  const isHidden = i => {
     return i?.hide === 'yes';
   };
 
-  // const customStartItems = customItems
-  //   ?.filter((i) => i.align === 'start' && !isHidden(i))
-  //   ?.concat(includeDefaultItems ? defaultStartItems : [])
-  //   ?.sort((a, b) => a?.order - b?.order);
-
-  // const customCenterItems = customItems
-  //   ?.filter((i) => i.align === 'center' && !isHidden(i))
-  //   ?.concat(includeDefaultItems ? defaultCenterItems : [])
-  //   ?.sort((a, b) => a?.order - b?.order);
-
-  // const customEndItems = customItems
-  //   ?.filter((i) => i.align === 'end' && !isHidden(i))
-  //   ?.concat(includeDefaultItems ? defaultEndItems : [])
-  //   ?.sort((a, b) => a?.order - b?.order);
-
   const customTopBarItems = customItems
-    ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.filter((i) => !isHidden(i) && i?.component)
+    ?.concat(
+      includeDefaultItems
+        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
+        : [],
+    )
+    ?.filter(i => !isHidden(i) && i?.component)
     ?.sort(CustomToolbarSort);
 
   const renderContent = (
@@ -82,15 +81,6 @@ const NavbarMobile = (props: NavbarProps) => {
       <View style={style.startContent}>
         {renderContent(customTopBarItems, 'start')}
       </View>
-      {/*<View style={style.startContent}>
-        {renderContent(customStartItems, 'start')}
-      </View>
-       <View style={style.centerContent}>
-        {renderContent(customCenterItems, 'center')}
-      </View>
-      <View style={style.endContent}>
-        {renderContent(customEndItems, 'end')}
-      </View> */}
     </Toolbar>
   );
 };

package/template/src/components/PinnedVideo.tsx

@@ -45,7 +45,7 @@ const PinnedVideo = ({renderData}) => {
   const {pinnedUid, secondaryPinnedUid} = useContent();
   const [collapse, setCollapse] = useState(false);
   const {width} = useWindowDimensions();
-  const isDesktop = width > BREAKPOINTS.xl;
+  const isDesktop = width > BREAKPOINTS.lg;
   const isSidePinnedlayout = topPinned === true ? false : isDesktop; // if either explicity set to false or auto evaluation
   const [maxUid, ...minUids] = renderData;
   const activeSpeaker = useActiveSpeaker();

package/template/src/components/RTMConfigure.tsx

@@ -641,7 +641,6 @@ const RtmConfigure = (props: any) => {
             mainUser: data.data.data.mainUser,
             screenShare: data.data.data.screenShare,
             whiteboard: data.data.data.whiteboard,
-            chat: data.data.data?.chat,
           }),
           persistLevel: 1,
           source: 'core',

package/template/src/components/SdkApiContext.tsx

@@ -27,6 +27,7 @@ type SdkApiContextInterface = {
         meetingDetails?: Partial<RoomInfoContextInterface['data']>;
         userName: string;
         skipPrecall: boolean;
+        preference: {disableShareTile: boolean};
         promise: extractPromises<_InternalSDKMethodEventsMap['join']>;
       }
     | {
@@ -99,7 +100,7 @@ const commonEventHandlers: commonEventHandlers = {
   join: setter => {
     return SDKMethodEventsManager.on(
       'join',
-      (res, rej, roomDetail, skipPrecall, userName) => {
+      (res, rej, roomDetail, skipPrecall, userName, preference) => {
         if (typeof roomDetail === 'object') {
           if (!validateMeetingInfoData(roomDetail)) {
             rej(new Error('Invalid meeting details'));
@@ -111,6 +112,7 @@ const commonEventHandlers: commonEventHandlers = {
             meetingDetails: roomDetail,
             skipPrecall,
             userName,
+            preference,
             promise: {res, rej},
           });
         } else if (
@@ -122,6 +124,7 @@ const commonEventHandlers: commonEventHandlers = {
             phrase: roomDetail,
             skipPrecall,
             userName,
+            preference,
             promise: {res, rej},
           });
         } else {