agora-appbuilder-core 4.0.25 → 4.0.26-beta-2

package/template/src/components/Leftbar.tsx

@@ -10,74 +10,93 @@
 *********************************************
 */
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
-import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
-import {CustomToolbarSort} from '../utils/common';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {ToolbarItemHide, ToolbarLeftPresetProps} from '../atoms/ToolbarPreset';
+import {filterObject} from '../utils';
 
-const defaultStartItems: ToolbarCustomItem[] = [];
-const defaultCenterItems: ToolbarCustomItem[] = [];
-const defaultEndItems: ToolbarCustomItem[] = [];
+const defaultItems: ToolbarLeftPresetProps['items'] = {};
 
 export interface LeftbarProps {
-  customItems?: ToolbarCustomItem[];
+  items?: ToolbarLeftPresetProps['items'];
   includeDefaultItems?: boolean;
 }
 const Leftbar = (props: LeftbarProps) => {
-  const {customItems = [], includeDefaultItems = true} = props;
-  const isHidden = i => {
-    return i?.hide === 'yes';
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
+
+  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 customStartItems = customItems
-    ?.filter(i => i?.align === 'start' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort(CustomToolbarSort);
 
-  const customCenterItems = customItems
-    ?.filter(i => i?.align === 'center' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort(CustomToolbarSort);
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
 
-  const customEndItems = customItems
-    ?.filter(i => i?.align === 'end' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort(CustomToolbarSort);
+  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 renderContent = (
-    items: ToolbarCustomItem[],
+    orderedKeys: string[],
     type: 'start' | 'center' | 'end',
   ) => {
-    return items?.map((item, index) => {
-      const ToolbarItem = item?.component;
-      if (ToolbarItem) {
-        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
       } else {
-        return null;
+        ToolbarComponent = endItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
       }
     });
+
+    return renderContentItem;
   };
+
   return (
     <Toolbar>
       <View style={style.startContent}>
-        {customStartItems && customStartItems?.length ? (
-          renderContent(customStartItems, 'start')
-        ) : (
-          <></>
-        )}
+        {renderContent(startItemsOrdered, 'start')}
       </View>
       <View style={style.centerContent}>
-        {customCenterItems && customCenterItems?.length ? (
-          renderContent(customCenterItems, 'center')
-        ) : (
-          <></>
-        )}
+        {renderContent(centerItemsOrdered, 'center')}
       </View>
       <View style={style.endContent}>
-        {customEndItems && customEndItems?.length ? (
-          renderContent(customEndItems, 'end')
-        ) : (
-          <></>
-        )}
+        {renderContent(endItemsOrdered, 'end')}
       </View>
     </Toolbar>
   );

package/template/src/components/Navbar.tsx

@@ -26,13 +26,15 @@ import {SidePanelType} from '../subComponents/SidePanelEnum';
 import ChatContext from '../components/ChatContext';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
 import LiveStreamContext from './livestream';
-import {numFormatter} from '../utils/index';
+import {filterObject, numFormatter} from '../utils/index';
 import {useLayout} from '../utils/useLayout';
 import {useChatNotification} from '../components/chat-notification/useChatNotification';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {
   BREAKPOINTS,
+  CustomToolbarMerge,
   CustomToolbarSort,
+  CustomToolbarSorting,
   isAndroid,
   isIOS,
   isMobileUA,
@@ -62,11 +64,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,
-  ToolbarDefaultItem,
-  ToolbarDefaultItemConfig,
-} from '../atoms/ToolbarPreset';
+import {ToolbarTopPresetProps, ToolbarItemHide} from '../atoms/ToolbarPreset';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 import {useActionSheet} from '../utils/useActionSheet';
@@ -470,123 +468,128 @@ export const SettingsToobarItem = () => {
   );
 };
 
-const defaultItems: ToolbarDefaultItem[] = [
-  {
+const defaultItems: ToolbarTopPresetProps['items'] = {
+  'meeting-title': {
     align: 'start',
-    componentName: 'meeting-title',
     component: MeetingTitleToolbarItem,
     order: 0,
-    hide: 'no',
   },
-  {
+  'participant-count': {
     align: 'start',
-    componentName: 'participant-count',
     component: ParticipantCountToolbarItem,
     order: 1,
-    hide: 'no',
   },
-  {
+  'recording-status': {
     align: 'start',
-    componentName: 'recording-status',
     component: RecordingStatusToolbarItem,
     order: 2,
-    hide: 'no',
   },
-  {
+  participant: {
     align: 'end',
-    componentName: 'participant',
     component: ParticipantToolbarItem,
     order: 0,
-    hide: 'no',
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
   },
-  {
+  chat: {
     align: 'end',
-    componentName: 'chat',
     component: ChatToolbarItem,
     order: 1,
-    hide: 'no',
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
   },
-  {
+  settings: {
     align: 'end',
-    componentName: 'settings',
     component: SettingsToobarItem,
     order: 2,
-    hide: 'no',
+    hide: w => {
+      return w < BREAKPOINTS.lg ? true : false;
+    },
   },
-];
+};
 
 export interface NavbarProps {
-  customItems?: ToolbarCustomItem[];
+  items?: ToolbarTopPresetProps['items'];
   includeDefaultItems?: boolean;
-  defaultItemsConfig?: ToolbarDefaultItemConfig;
 }
 const Navbar = (props: NavbarProps) => {
-  const {
-    customItems = [],
-    includeDefaultItems = true,
-    defaultItemsConfig = {},
-  } = props;
-  const {width} = useWindowDimensions();
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
 
-  const isHidden = i => {
-    return i?.hide === 'yes';
+  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 customStartItems = customItems
-    ?.concat(
-      includeDefaultItems
-        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
-        : [],
-    )
-    ?.filter(i => i.align === 'start' && !isHidden(i))
-    ?.sort(CustomToolbarSort);
-
-  const customCenterItems = customItems
-    ?.concat(
-      includeDefaultItems
-        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
-        : [],
-    )
-    ?.filter(i => i.align === 'center' && !isHidden(i))
-    ?.sort(CustomToolbarSort);
-
-  const customEndItems = customItems
-    ?.concat(
-      includeDefaultItems
-        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
-        : [],
-    )
-    ?.filter(i => i.align === 'end' && !isHidden(i))
-    ?.sort(CustomToolbarSort);
+  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 renderContent = (
-    items: ToolbarCustomItem[],
+    orderedKeys: string[],
     type: 'start' | 'center' | 'end',
   ) => {
-    return items?.map((item, index) => {
-      const ToolbarItem = item?.component;
-      if (ToolbarItem) {
-        return <ToolbarItem key={`top-toolbar-${type}` + index} />;
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
       } else {
-        return null;
+        ToolbarComponent = endItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
       }
     });
+
+    return renderContentItem;
   };
+
   return (
     <Toolbar>
       <View style={style.startContent}>
-        {renderContent(customStartItems, 'start')}
+        {renderContent(startItemsOrdered, 'start')}
       </View>
       <View style={style.centerContent}>
-        {renderContent(customCenterItems, 'center')}
+        {renderContent(centerItemsOrdered, 'center')}
+      </View>
+      <View style={style.endContent}>
+        {renderContent(endItemsOrdered, 'end')}
       </View>
-      {width > BREAKPOINTS.sm || isMobileUA() ? (
-        <View style={style.endContent}>
-          {renderContent(customEndItems, 'end')}
-        </View>
-      ) : (
-        <></>
-      )}
     </Toolbar>
   );
 };

package/template/src/components/NavbarMobile.tsx

@@ -1,85 +1,90 @@
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
-import {
-  ToolbarCustomItem,
-  ToolbarDefaultItem,
-  ToolbarDefaultItemConfig,
-} from '../atoms/ToolbarPreset';
+import {ToolbarItemHide, ToolbarTopPresetProps} from '../atoms/ToolbarPreset';
 import {
   MeetingTitleToolbarItem,
   ParticipantCountToolbarItem,
   RecordingStatusToolbarItem,
 } from './Navbar';
 import {useRecording} from '../subComponents/recording/useRecording';
-import {CustomToolbarSort, updateToolbarDefaultConfig} from '../utils/common';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {filterObject} from '../utils';
 
 export interface NavbarProps {
-  customItems?: ToolbarCustomItem[];
   includeDefaultItems?: boolean;
-  defaultItemsConfig?: ToolbarDefaultItemConfig;
+  items?: ToolbarTopPresetProps['items'];
 }
 
 const NavbarMobile = (props: NavbarProps) => {
   const {isRecordingActive} = useRecording();
-  const defaultItems: ToolbarDefaultItem[] = [
-    {
+  const defaultItems: NavbarProps['items'] = {
+    'meeting-title': {
       align: 'start',
-      componentName: 'meeting-title',
       component: MeetingTitleToolbarItem,
       order: 0,
-      hide: 'no',
     },
-    {
+    'participant-count': {
       align: 'start',
-      componentName: 'participant-count',
       component: ParticipantCountToolbarItem,
       order: 1,
-      hide: 'no',
     },
-    {
+    'recording-status': {
       align: 'start',
-      componentName: 'recording-status',
       component: isRecordingActive ? RecordingStatusToolbarItem : null,
       order: 2,
-      hide: 'no',
     },
-  ];
-  const {
-    customItems = [],
-    includeDefaultItems = true,
-    defaultItemsConfig = {},
-  } = props;
-  const isHidden = i => {
-    return i?.hide === 'yes';
   };
+  const {items = {}, includeDefaultItems = true} = props;
+  const {width, height} = useWindowDimensions();
 
-  const customTopBarItems = customItems
-    ?.concat(
-      includeDefaultItems
-        ? updateToolbarDefaultConfig(defaultItems, defaultItemsConfig)
-        : [],
-    )
-    ?.filter(i => !isHidden(i) && i?.component)
-    ?.sort(CustomToolbarSort);
+  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 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;
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
+
+  const startItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'start' && !isHidden(v?.hide),
+  );
+
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+
+  const renderContent = (orderedKeys: string[], type: 'start') => {
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
       }
     });
+
+    return renderContentItem;
   };
   return (
     <Toolbar>
       <View style={style.startContent}>
-        {renderContent(customTopBarItems, 'start')}
+        {renderContent(startItemsOrdered, 'start')}
       </View>
     </Toolbar>
   );

package/template/src/components/Rightbar.tsx

@@ -10,76 +10,93 @@
 *********************************************
 */
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
-import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
-import {CustomToolbarSort} from '../utils/common';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {ToolbarItemHide, ToolbarRightPresetProps} from '../atoms/ToolbarPreset';
+import {filterObject} from '../utils';
 
-const defaultStartItems: ToolbarCustomItem[] = [];
-const defaultCenterItems: ToolbarCustomItem[] = [];
-const defaultEndItems: ToolbarCustomItem[] = [];
+const defaultItems: ToolbarRightPresetProps['items'] = {};
 
 export interface RightbarProps {
-  customItems?: ToolbarCustomItem[];
+  items?: ToolbarRightPresetProps['items'];
   includeDefaultItems?: boolean;
 }
 const Rightbar = (props: RightbarProps) => {
-  const {customItems = [], includeDefaultItems = true} = props;
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
 
-  const isHidden = (i) => {
-    return i?.hide === 'yes';
+  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 customStartItems = customItems
-    ?.filter((i) => i?.align === 'start' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort(CustomToolbarSort);
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
 
-  const customCenterItems = customItems
-    ?.filter((i) => i?.align === 'center' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort(CustomToolbarSort);
+  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 customEndItems = customItems
-    ?.filter((i) => i?.align === 'end' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort(CustomToolbarSort);
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+  const centerItemsOrdered = CustomToolbarSorting(centerItems);
+  const endItemsOrdered = CustomToolbarSorting(endItems);
 
   const renderContent = (
-    items: ToolbarCustomItem[],
+    orderedKeys: string[],
     type: 'start' | 'center' | 'end',
   ) => {
-    return items?.map((item, index) => {
-      const ToolbarItem = item?.component;
-      if (ToolbarItem) {
-        return <ToolbarItem key={`left-toolbar-${type}` + index} />;
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
       } else {
-        return null;
+        ToolbarComponent = endItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
       }
     });
+
+    return renderContentItem;
   };
+
   return (
     <Toolbar>
       <View style={style.startContent}>
-        {customStartItems && customStartItems?.length ? (
-          renderContent(customStartItems, 'start')
-        ) : (
-          <></>
-        )}
+        {renderContent(startItemsOrdered, 'start')}
       </View>
       <View style={style.centerContent}>
-        {customCenterItems && customCenterItems?.length ? (
-          renderContent(customCenterItems, 'center')
-        ) : (
-          <></>
-        )}
+        {renderContent(centerItemsOrdered, 'center')}
       </View>
       <View style={style.endContent}>
-        {customEndItems && customEndItems?.length ? (
-          renderContent(customEndItems, 'end')
-        ) : (
-          <></>
-        )}
+        {renderContent(endItemsOrdered, 'end')}
       </View>
     </Toolbar>
   );

package/template/src/components/room-info/useRoomInfo.tsx

@@ -69,7 +69,7 @@ export interface RoomInfoContextInterface {
     prevLang?: LanguageType[];
     newLang?: LanguageType[];
     uid?: UidType;
-    langChanged?: Boolean;
+    langChanged?: boolean;
   };
   isSTTActive?: boolean;
   roomPreference?: joinRoomPreference;

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -1254,8 +1254,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [waitingRoomApprovalRejectionToastSubHeading]:
     'Permission to enter the meeting was denied by the host',
 
-  [videoRoomRecordingText]: mode =>
-    mode === 'MIX' ? 'Cloud recording' : 'Web recording',
+  [videoRoomRecordingText]: 'REC',
 
   [videoRoomGoToActiveSpeakerText]: 'Go To Active Speaker',
   [videoRoomScreenshareText]: username => `${username}'s screenshare`,