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

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

@@ -40,14 +40,24 @@ import Transcript, {
 } from '../../subComponents/caption/Transcript';
 
 import Spacer from '../../atoms/Spacer';
-import Leftbar, {LeftbarProps} from '../../components/Leftbar';
-import Rightbar, {RightbarProps} from '../../components/Rightbar';
+import Leftbar, {
+  LeftbarProps as LeftbarPropsInterface,
+} from '../../components/Leftbar';
+import Rightbar, {
+  RightbarProps as RightbarInterface,
+} from '../../components/Rightbar';
 import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
 import VBPanel, {
   VBPanelProps,
 } from '../../components/virtual-background/VBPanel';
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
+import {
+  ToolbarBottomPresetProps,
+  ToolbarLeftPresetProps,
+  ToolbarRightPresetProps,
+  ToolbarTopPresetProps,
+} from 'src/atoms/ToolbarPreset';
 
 const VideoCallScreen = () => {
   useFindActiveSpeaker();
@@ -90,12 +100,12 @@ const VideoCallScreen = () => {
       TopbarComponent: React.ComponentType<NavbarProps>;
       VideocallBeforeView: React.ComponentType;
       VideocallAfterView: React.ComponentType;
-      LeftbarComponent: React.ComponentType<LeftbarProps>;
-      RightbarComponent: React.ComponentType<RightbarProps>;
-      BottombarProps?: ToolbarCustomItem[];
-      TopbarProps?: ToolbarCustomItem[];
-      LeftbarProps?: ToolbarCustomItem[];
-      RightbarProps?: ToolbarCustomItem[];
+      LeftbarComponent: React.ComponentType<LeftbarPropsInterface>;
+      RightbarComponent: React.ComponentType<RightbarInterface>;
+      BottombarProps?: any;
+      TopbarProps?: any;
+      LeftbarProps?: any;
+      RightbarProps?: any;
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -110,10 +120,10 @@ const VideoCallScreen = () => {
       VideocallWrapper: React.Fragment,
       LeftbarComponent: Leftbar,
       RightbarComponent: Rightbar,
-      BottombarProps: [],
-      TopbarProps: [],
-      LeftbarProps: [],
-      RightbarProps: [],
+      BottombarProps: {},
+      TopbarProps: {},
+      LeftbarProps: {},
+      RightbarProps: {},
     };
     if (
       data?.components?.videoCall &&
@@ -187,28 +197,28 @@ const VideoCallScreen = () => {
       if (
         data?.components?.videoCall.bottomToolBar &&
         typeof data?.components?.videoCall.bottomToolBar === 'object' &&
-        data?.components?.videoCall.bottomToolBar.length
+        Object.keys(data?.components?.videoCall.bottomToolBar)?.length
       ) {
         components.BottombarProps = data?.components?.videoCall.bottomToolBar;
       }
       if (
         data?.components?.videoCall.topToolBar &&
         typeof data?.components?.videoCall.topToolBar === 'object' &&
-        data?.components?.videoCall.topToolBar.length
+        Object.keys(data?.components?.videoCall.topToolBar)?.length
       ) {
         components.TopbarProps = data?.components?.videoCall.topToolBar;
       }
       if (
         data?.components?.videoCall.rightToolBar &&
         typeof data?.components?.videoCall.rightToolBar === 'object' &&
-        data?.components?.videoCall.rightToolBar.length
+        Object.keys(data?.components?.videoCall.rightToolBar)?.length
       ) {
         components.RightbarProps = data?.components?.videoCall.rightToolBar;
       }
       if (
         data?.components?.videoCall.leftToolBar &&
         typeof data?.components?.videoCall.leftToolBar === 'object' &&
-        data?.components?.videoCall.leftToolBar.length
+        Object.keys(data?.components?.videoCall.leftToolBar)?.length
       ) {
         components.LeftbarProps = data?.components?.videoCall.leftToolBar;
       }
@@ -302,7 +312,7 @@ const VideoCallScreen = () => {
           <ToolbarProvider value={{position: ToolbarPosition.left}}>
             {LeftbarProps?.length ? (
               <LeftbarComponent
-                customItems={LeftbarProps}
+                items={LeftbarProps}
                 includeDefaultItems={false}
               />
             ) : (
@@ -319,7 +329,7 @@ const VideoCallScreen = () => {
               <ToolbarProvider value={{position: ToolbarPosition.top}}>
                 {TopbarProps?.length ? (
                   <TopbarComponent
-                    customItems={TopbarProps}
+                    items={TopbarProps}
                     includeDefaultItems={false}
                   />
                 ) : (
@@ -379,7 +389,7 @@ const VideoCallScreen = () => {
               <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
                 {BottombarProps?.length ? (
                   <BottombarComponent
-                    customItems={BottombarProps}
+                    items={BottombarProps}
                     includeDefaultItems={false}
                   />
                 ) : (
@@ -402,7 +412,7 @@ const VideoCallScreen = () => {
           <ToolbarProvider value={{position: ToolbarPosition.right}}>
             {RightbarProps?.length ? (
               <RightbarComponent
-                customItems={RightbarProps}
+                items={RightbarProps}
                 includeDefaultItems={false}
               />
             ) : (

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

@@ -18,6 +18,7 @@ import Controls, {
   ScreenShareToolbarItem,
   RecordingToolbarItem,
   LocalEndcallToolbarItem,
+  MoreButtonToolbarItem,
 } from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
 import {ChatInput} from '../../subComponents/ChatInput';
@@ -45,6 +46,7 @@ const ToolbarComponents = {
   RecordingToolbarItem,
   LocalEndcallToolbarItem,
   WhiteboardToolbarItem: WhiteboardButton,
+  MoreButtonToolbarItem,
 };
 export {
   ParticipantsView,

package/template/src/utils/common.tsx

@@ -264,6 +264,37 @@ const CustomToolbarSort = (a, b) =>
   (a.hasOwnProperty('order') ? a.order : 999999) -
   (b.hasOwnProperty('order') ? b.order : 999999);
 
+const CustomToolbarSorting = sourceObject => {
+  try {
+    return Object.keys(sourceObject).sort((a, b) => {
+      return (
+        (sourceObject[a].hasOwnProperty('order')
+          ? sourceObject[a].order
+          : 999999) -
+        (sourceObject[b].hasOwnProperty('order')
+          ? sourceObject[b].order
+          : 999999)
+      );
+    });
+  } catch (error) {
+    console.error('CustomSortingToolbarObject Failed', error);
+    return [];
+  }
+};
+
+function CustomToolbarMerge(obj1, obj2) {
+  let merged = {...obj1};
+  for (let key in obj2) {
+    if (obj2.hasOwnProperty(key)) {
+      merged[key] =
+        obj1[key] && obj1[key].toString() === '[object Object]'
+          ? CustomToolbarMerge(obj1[key], obj2[key])
+          : obj2[key];
+    }
+  }
+  return merged;
+}
+
 const randomString = (
   length = 5,
   chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
@@ -327,6 +358,20 @@ const updateToolbarDefaultConfig = (data, defaultItemsConfig) => {
   });
 };
 
+const MergeMoreButtonFields = (data, customizedData) => {
+  const keys = Object.keys(customizedData);
+  return data?.map(i => {
+    if (i?.componentName && keys?.indexOf(i?.componentName) !== -1) {
+      return {
+        ...i,
+        ...customizedData[i?.componentName],
+      };
+    } else {
+      return i;
+    }
+  });
+};
+
 export {
   getSessionId,
   updateToolbarDefaultConfig,
@@ -357,4 +402,7 @@ export {
   randomIntFromInterval,
   getOS,
   hexToRgb,
+  CustomToolbarSorting,
+  CustomToolbarMerge,
+  MergeMoreButtonFields,
 };