agora-appbuilder-core 4.0.22-beta-2 → 4.0.22-beta-3

package/package.json

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

package/template/customization-api/utils.ts

@@ -35,4 +35,3 @@ export {default as useLocalAudio} from '../src/utils/useLocalAudio';
 export {default as useLocalVideo} from '../src/utils/useLocalVideo';
 export type {LanguageType} from '../src/subComponents/caption/utils';
 export {default as useSpeechToText} from '../src/utils/useSpeechToText';
-export {isMobileUA} from '../src/utils/common';

package/template/src/atoms/Carousel.tsx

@@ -10,10 +10,9 @@ interface CarouselItem {
 
 interface CarouselProps {
   data: CarouselItem[];
-  isPaginationRequired?: boolean;
 }
 
-const Carousel: React.FC<CarouselProps> = ({data, isPaginationRequired}) => {
+const Carousel: React.FC<CarouselProps> = ({data}) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -37,8 +36,7 @@ const Carousel: React.FC<CarouselProps> = ({data, isPaginationRequired}) => {
   };
 
   return (
-    <View
-      style={[styles.container, !isPaginationRequired ? {paddingTop: 24} : {}]}>
+    <View style={styles.container}>
       <FlatList
         ref={flatListRef}
         data={data}
@@ -49,32 +47,28 @@ const Carousel: React.FC<CarouselProps> = ({data, isPaginationRequired}) => {
         keyExtractor={(_, index) => index.toString()}
         onScroll={handleScroll}
       />
-      {isPaginationRequired ? (
-        <View style={styles.indicatorContainer}>
-          {data.map((_, index) => (
-            <Pressable
-              key={index}
-              onPress={() => {
-                scrollToIndex(index);
-                setActiveIndex(index);
-              }}
-              hitSlop={5} // to increase clickable area
-            >
-              {({pressed}) => (
-                <View
-                  style={[
-                    styles.dot,
-                    index === activeIndex && styles.activeDot,
-                    pressed && styles.pressedDot,
-                  ]}
-                />
-              )}
-            </Pressable>
-          ))}
-        </View>
-      ) : (
-        <></>
-      )}
+      <View style={styles.indicatorContainer}>
+        {data.map((_, index) => (
+          <Pressable
+            key={index}
+            onPress={() => {
+              scrollToIndex(index);
+              setActiveIndex(index);
+            }}
+            hitSlop={5} // to increase clickable area
+          >
+            {({pressed}) => (
+              <View
+                style={[
+                  styles.dot,
+                  index === activeIndex && styles.activeDot,
+                  pressed && styles.pressedDot,
+                ]}
+              />
+            )}
+          </Pressable>
+        ))}
+      </View>
     </View>
   );
 };

package/template/src/atoms/ToolbarPreset.tsx

@@ -7,14 +7,6 @@ import {isMobileUA} from '../utils/common';
 import NavbarMobile from '../components/NavbarMobile';
 import ActionSheet from '../pages/video-call/ActionSheet';
 
-export type ToolbarMoreOptionDefaultItemName =
-  | 'virtual-background'
-  | 'noise-cancellation'
-  | 'caption'
-  | 'transcript'
-  | 'view-recordings'
-  | 'whiteboard';
-
 export type ToolbarDefaultItemName =
   //bottom bar
 
@@ -43,21 +35,9 @@ export type ToolbarDefaultItemConfig = {
   [key in ToolbarDefaultItemName]?: ToolbarDefaultItem;
 };
 
-export type ToolbarMoreButton = {
-  ['more']?: ToolbarMoreDefaultItem;
-};
-
-export type ToolbarMoreButtonConfig = {
-  [key in ToolbarMoreOptionDefaultItemName]?: ToolbarDefaultItem;
-};
-
 export type ToolbarItemAlign = 'start' | 'center' | 'end';
 export type ToolbarItemHide = 'yes' | 'no';
 
-export interface ToolbarMoreDefaultItem extends ToolbarDefaultItem {
-  fields?: ToolbarMoreButtonConfig;
-}
-
 export interface ToolbarDefaultItem {
   component?: () => JSX.Element;
   align?: ToolbarItemAlign;
@@ -76,13 +56,13 @@ export type ToolbarPresetAlign = 'top' | 'bottom' | 'right' | 'left';
 export interface ToolbarBottomPresetProps {
   align: ToolbarPresetAlign;
   customItems?: Array<ToolbarCustomItem>;
-  defaultItemsConfig?: ToolbarDefaultItemConfig | ToolbarMoreButton;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
   snapPointsMinMax: [number, number];
 }
 export interface ToolbarOtherPresetProps {
   align: ToolbarPresetAlign;
   customItems?: Array<ToolbarCustomItem>;
-  defaultItemsConfig?: ToolbarDefaultItemConfig | ToolbarMoreButton;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
   snapPointsMinMax?: never;
 }
 

package/template/src/components/Controls.tsx

@@ -70,7 +70,6 @@ import useGetName from '../utils/useGetName';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
 import {
-  ToolbarBottomPresetProps,
   ToolbarCustomItem,
   ToolbarDefaultItem,
   ToolbarDefaultItemConfig,
@@ -251,11 +250,7 @@ export const WhiteboardListener = () => {
   return null;
 };
 
-const MoreButton = (props: {
-  defaultItemsConfig: ToolbarBottomPresetProps['defaultItemsConfig'];
-}) => {
-  const defaultItemsConfig = props?.defaultItemsConfig || {};
-  const defaultMoreItemsConfig = props?.defaultItemsConfig?.more?.fields || {};
+const MoreButton = () => {
   const noiseCancellationLabel = useString(toolbarItemNoiseCancellationText)();
   const whiteboardLabel = useString<boolean>(toolbarItemWhiteboardText);
   const captionLabel = useString<boolean>(toolbarItemCaptionText);
@@ -321,25 +316,23 @@ const MoreButton = (props: {
 
   //AINS
   if ($config.ENABLE_NOISE_CANCELLATION) {
-    if (!(defaultMoreItemsConfig['noise-cancellation']?.hide === 'yes')) {
-      actionMenuitems.push({
-        toggleStatus: isNoiseSupressionEnabled === ToggleState.enabled,
-        disabled:
-          isNoiseSupressionEnabled === ToggleState.disabling ||
-          isNoiseSupressionEnabled === ToggleState.enabling,
-        isBase64Icon: true,
-        //@ts-ignore
-        icon: 'noise-cancellation',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: noiseCancellationLabel,
-        //isNoiseSupressionEnabled === ToggleState.enabled
-        callback: () => {
-          setActionMenuVisible(false);
-          setNoiseSupression(p => !p);
-        },
-      });
-    }
+    actionMenuitems.push({
+      toggleStatus: isNoiseSupressionEnabled === ToggleState.enabled,
+      disabled:
+        isNoiseSupressionEnabled === ToggleState.disabling ||
+        isNoiseSupressionEnabled === ToggleState.enabling,
+      isBase64Icon: true,
+      //@ts-ignore
+      icon: 'noise-cancellation',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: noiseCancellationLabel,
+      //isNoiseSupressionEnabled === ToggleState.enabled
+      callback: () => {
+        setActionMenuVisible(false);
+        setNoiseSupression(p => !p);
+      },
+    });
   }
   //AINS
 
@@ -355,21 +348,19 @@ const MoreButton = (props: {
     setIsVBActive(prev => !prev);
   };
   if ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) {
-    if (!(defaultMoreItemsConfig['virtual-background']?.hide === 'yes')) {
-      actionMenuitems.push({
-        isBase64Icon: true,
-        //@ts-ignore
-        icon: 'vb',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        //title: `${isVBActive ? 'Hide' : 'Show'} Virtual Background`,
-        title: virtualBackgroundLabel,
-        callback: () => {
-          setActionMenuVisible(false);
-          toggleVB();
-        },
-      });
-    }
+    actionMenuitems.push({
+      isBase64Icon: true,
+      //@ts-ignore
+      icon: 'vb',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      //title: `${isVBActive ? 'Hide' : 'Show'} Virtual Background`,
+      title: virtualBackgroundLabel,
+      callback: () => {
+        setActionMenuVisible(false);
+        toggleVB();
+      },
+    });
   }
   //virtual background
 
@@ -457,47 +448,76 @@ const MoreButton = (props: {
   //whiteboard ends
 
   if (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) {
-    if (!(defaultMoreItemsConfig?.whiteboard?.hide === 'yes')) {
-      actionMenuitems.push({
-        disabled: WhiteboardDisabled,
-        isBase64Icon: true,
-        //@ts-ignore
-        icon: 'whiteboard-new',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: whiteboardLabel(whiteboardActive),
-        callback: () => {
-          setActionMenuVisible(false);
-          toggleWhiteboard(whiteboardActive, true);
-        },
-      });
-    }
+    actionMenuitems.push({
+      disabled: WhiteboardDisabled,
+      isBase64Icon: true,
+      //@ts-ignore
+      icon: 'whiteboard-new',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: whiteboardLabel(whiteboardActive),
+      callback: () => {
+        setActionMenuVisible(false);
+        toggleWhiteboard(whiteboardActive, true);
+      },
+    });
   }
 
   // host can see stt options and attendee can view only when stt is enabled by a host in the channel
 
   if ($config.ENABLE_STT && $config.ENABLE_CAPTION) {
-    if (!(defaultMoreItemsConfig?.caption?.hide === 'yes')) {
+    actionMenuitems.push({
+      icon: `${isCaptionON ? 'captions-off' : 'captions'}`,
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      disabled: !(
+        $config.ENABLE_STT &&
+        $config.ENABLE_CAPTION &&
+        (isHost || (!isHost && isSTTActive))
+      ),
+      title: captionLabel(isCaptionON),
+      callback: () => {
+        setActionMenuVisible(false);
+        STT_clicked.current = !isCaptionON ? 'caption' : null;
+        if (isSTTError) {
+          setIsCaptionON(prev => !prev);
+          return;
+        }
+        if (isSTTActive) {
+          setIsCaptionON(prev => !prev);
+          // is lang popup has been shown once for any user in meeting
+        } else {
+          isFirstTimePopupOpen.current = true;
+          setLanguagePopup(true);
+        }
+      },
+    });
+
+    if ($config.ENABLE_MEETING_TRANSCRIPT) {
       actionMenuitems.push({
-        icon: `${isCaptionON ? 'captions-off' : 'captions'}`,
+        icon: 'transcript',
         iconColor: $config.SECONDARY_ACTION_COLOR,
         textColor: $config.FONT_COLOR,
         disabled: !(
           $config.ENABLE_STT &&
           $config.ENABLE_CAPTION &&
+          $config.ENABLE_MEETING_TRANSCRIPT &&
           (isHost || (!isHost && isSTTActive))
         ),
-        title: captionLabel(isCaptionON),
+        title: transcriptLabel(isTranscriptON),
         callback: () => {
           setActionMenuVisible(false);
-          STT_clicked.current = !isCaptionON ? 'caption' : null;
+          STT_clicked.current = !isTranscriptON ? 'transcript' : null;
           if (isSTTError) {
-            setIsCaptionON(prev => !prev);
+            !isTranscriptON
+              ? setSidePanel(SidePanelType.Transcript)
+              : setSidePanel(SidePanelType.None);
             return;
           }
           if (isSTTActive) {
-            setIsCaptionON(prev => !prev);
-            // is lang popup has been shown once for any user in meeting
+            !isTranscriptON
+              ? setSidePanel(SidePanelType.Transcript)
+              : setSidePanel(SidePanelType.None);
           } else {
             isFirstTimePopupOpen.current = true;
             setLanguagePopup(true);
@@ -505,87 +525,45 @@ const MoreButton = (props: {
         },
       });
     }
-    if ($config.ENABLE_MEETING_TRANSCRIPT) {
-      if (!(defaultMoreItemsConfig?.transcript?.hide === 'yes')) {
-        actionMenuitems.push({
-          icon: 'transcript',
-          iconColor: $config.SECONDARY_ACTION_COLOR,
-          textColor: $config.FONT_COLOR,
-          disabled: !(
-            $config.ENABLE_STT &&
-            $config.ENABLE_CAPTION &&
-            $config.ENABLE_MEETING_TRANSCRIPT &&
-            (isHost || (!isHost && isSTTActive))
-          ),
-          title: transcriptLabel(isTranscriptON),
-          callback: () => {
-            setActionMenuVisible(false);
-            STT_clicked.current = !isTranscriptON ? 'transcript' : null;
-            if (isSTTError) {
-              !isTranscriptON
-                ? setSidePanel(SidePanelType.Transcript)
-                : setSidePanel(SidePanelType.None);
-              return;
-            }
-            if (isSTTActive) {
-              !isTranscriptON
-                ? setSidePanel(SidePanelType.Transcript)
-                : setSidePanel(SidePanelType.None);
-            } else {
-              isFirstTimePopupOpen.current = true;
-              setLanguagePopup(true);
-            }
-          },
-        });
-      }
-    }
   }
 
   // view recordings
 
   if (isHost && $config.CLOUD_RECORDING && isWeb()) {
-    if (!(defaultMoreItemsConfig?.['view-recordings']?.hide === 'yes')) {
-      actionMenuitems.push({
-        icon: 'play-circle',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: viewRecordingsLabel,
-        callback: () => {
-          toggleVRModal();
-        },
-      });
-    }
-  }
-
-  if (globalWidth <= BREAKPOINTS.lg) {
-    if (!(defaultItemsConfig?.participant?.hide === 'yes')) {
-      actionMenuitems.push({
-        icon: 'participants',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: peopleLabel,
-        callback: () => {
-          setActionMenuVisible(false);
-          setSidePanel(SidePanelType.Participants);
-        },
-      });
-    }
-    if (!(defaultItemsConfig?.chat?.hide === 'yes')) {
-      actionMenuitems.push({
-        icon: 'chat-nav',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: chatLabel,
-        callback: () => {
-          setActionMenuVisible(false);
-          setChatType(ChatType.Group);
-          setSidePanel(SidePanelType.Chat);
-        },
-      });
-    }
+    actionMenuitems.push({
+      icon: 'play-circle',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: viewRecordingsLabel,
+      callback: () => {
+        toggleVRModal();
+      },
+    });
   }
 
   if (globalWidth <= BREAKPOINTS.sm) {
+    actionMenuitems.push({
+      icon: 'participants',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: peopleLabel,
+      callback: () => {
+        setActionMenuVisible(false);
+        setSidePanel(SidePanelType.Participants);
+      },
+    });
+    actionMenuitems.push({
+      icon: 'chat-nav',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: chatLabel,
+      callback: () => {
+        setActionMenuVisible(false);
+        setChatType(ChatType.Group);
+        setSidePanel(SidePanelType.Chat);
+      },
+    });
+
     if ($config.SCREEN_SHARING) {
       if (
         !(
@@ -594,112 +572,102 @@ const MoreButton = (props: {
           !$config.RAISE_HAND
         )
       ) {
-        if (!(defaultItemsConfig?.screenshare?.hide === 'yes')) {
-          actionMenuitems.push({
-            disabled:
-              rtcProps.role == ClientRoleType.ClientRoleAudience &&
-              $config.EVENT_MODE &&
-              $config.RAISE_HAND &&
-              !isHost,
-            icon: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
-            iconColor: isScreenshareActive
-              ? $config.SEMANTIC_ERROR
-              : $config.SECONDARY_ACTION_COLOR,
-            textColor: isScreenshareActive
-              ? $config.SEMANTIC_ERROR
-              : $config.FONT_COLOR,
-            title: screenShareButton(isScreenshareActive),
-            callback: () => {
-              setActionMenuVisible(false);
-              isScreenshareActive ? stopScreenshare() : startScreenshare();
-            },
-          });
-        }
-      }
-    }
-    if (isHost && $config.CLOUD_RECORDING) {
-      if (!(defaultItemsConfig?.recording?.hide === 'yes')) {
         actionMenuitems.push({
-          disabled: inProgress,
-          icon: isRecordingActive ? 'stop-recording' : 'recording',
-          iconColor: isRecordingActive
+          disabled:
+            rtcProps.role == ClientRoleType.ClientRoleAudience &&
+            $config.EVENT_MODE &&
+            $config.RAISE_HAND &&
+            !isHost,
+          icon: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
+          iconColor: isScreenshareActive
             ? $config.SEMANTIC_ERROR
             : $config.SECONDARY_ACTION_COLOR,
-          textColor: isRecordingActive
+          textColor: isScreenshareActive
             ? $config.SEMANTIC_ERROR
             : $config.FONT_COLOR,
-          title: recordingButton(isRecordingActive),
+          title: screenShareButton(isScreenshareActive),
           callback: () => {
             setActionMenuVisible(false);
-            if (!isRecordingActive) {
-              startRecording();
-            } else {
-              setShowStopRecordingPopup(true);
-            }
+            isScreenshareActive ? stopScreenshare() : startScreenshare();
           },
         });
       }
     }
-  }
-
-  if (globalWidth <= BREAKPOINTS.lg) {
-    if (!(defaultItemsConfig?.layout?.hide === 'yes')) {
-      actionMenuitems.push({
-        //below icon key is dummy value
-        icon: 'grid',
-        externalIconString: layouts[layout]?.icon,
-        isExternalIcon: true,
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: layoutLabel,
-        callback: () => {
-          //setShowLayoutOption(true);
-        },
-        onHoverCallback: isHovered => {
-          setShowLayoutOption(isHovered);
-        },
-        onHoverContent: (
-          <LayoutIconDropdown
-            onHoverPlaceHolder="vertical"
-            setShowDropdown={() => {}}
-            showDropdown={true}
-            modalPosition={
-              globalWidth <= BREAKPOINTS.lg
-                ? {bottom: 65, left: -150}
-                : {bottom: 20, left: -150}
-            }
-            caretPosition={{bottom: 45, right: -10}}
-          />
-        ),
-      });
-    }
-    if (!(defaultItemsConfig?.invite?.hide === 'yes')) {
+    if (isHost && $config.CLOUD_RECORDING) {
       actionMenuitems.push({
-        icon: 'share',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: inviteLabel,
+        disabled: inProgress,
+        icon: isRecordingActive ? 'stop-recording' : 'recording',
+        iconColor: isRecordingActive
+          ? $config.SEMANTIC_ERROR
+          : $config.SECONDARY_ACTION_COLOR,
+        textColor: isRecordingActive
+          ? $config.SEMANTIC_ERROR
+          : $config.FONT_COLOR,
+        title: recordingButton(isRecordingActive),
         callback: () => {
           setActionMenuVisible(false);
-          setShowInvitePopup(true);
+          if (!isRecordingActive) {
+            startRecording();
+          } else {
+            setShowStopRecordingPopup(true);
+          }
         },
       });
     }
   }
 
-  if (globalWidth <= BREAKPOINTS.lg) {
-    if (!(defaultItemsConfig?.settings?.hide === 'yes')) {
-      actionMenuitems.push({
-        icon: 'settings',
-        iconColor: $config.SECONDARY_ACTION_COLOR,
-        textColor: $config.FONT_COLOR,
-        title: settingsLabel,
-        callback: () => {
-          setActionMenuVisible(false);
-          setSidePanel(SidePanelType.Settings);
-        },
-      });
-    }
+  if (globalWidth <= BREAKPOINTS.md) {
+    actionMenuitems.push({
+      //below icon key is dummy value
+      icon: 'grid',
+      externalIconString: layouts[layout]?.icon,
+      isExternalIcon: true,
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: layoutLabel,
+      callback: () => {
+        //setShowLayoutOption(true);
+      },
+      onHoverCallback: isHovered => {
+        setShowLayoutOption(isHovered);
+      },
+      onHoverContent: (
+        <LayoutIconDropdown
+          onHoverPlaceHolder="vertical"
+          setShowDropdown={() => {}}
+          showDropdown={true}
+          modalPosition={
+            globalWidth <= BREAKPOINTS.sm
+              ? {bottom: 65, left: -150}
+              : {bottom: 20, left: -150}
+          }
+          caretPosition={{bottom: 45, right: -10}}
+        />
+      ),
+    });
+    actionMenuitems.push({
+      icon: 'share',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: inviteLabel,
+      callback: () => {
+        setActionMenuVisible(false);
+        setShowInvitePopup(true);
+      },
+    });
+  }
+
+  if (globalWidth <= BREAKPOINTS.sm) {
+    actionMenuitems.push({
+      icon: 'settings',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: settingsLabel,
+      callback: () => {
+        setActionMenuVisible(false);
+        setSidePanel(SidePanelType.Settings);
+      },
+    });
   }
 
   useEffect(() => {
@@ -910,9 +878,7 @@ export const RecordingToolbarItem = () => {
   );
 };
 
-export const MoreButtonToolbarItem = (props: {
-  defaultItemsConfig: ToolbarBottomPresetProps['defaultItemsConfig'];
-}) => {
+export const MoreButtonToolbarItem = () => {
   const {width} = useWindowDimensions();
   const {
     data: {isHost},
@@ -924,7 +890,7 @@ export const MoreButtonToolbarItem = (props: {
     forceUpdate();
   }, [isHost]);
 
-  return width < BREAKPOINTS.lg ||
+  return width < BREAKPOINTS.md ||
     ($config.ENABLE_STT &&
       $config.ENABLE_CAPTION &&
       (isHost || (!isHost && isSTTActive))) ||
@@ -938,7 +904,7 @@ export const MoreButtonToolbarItem = (props: {
       ) : (
         <></>
       )}
-      <MoreButton defaultItemsConfig={props?.defaultItemsConfig} />
+      <MoreButton />
     </ToolbarItem>
   ) : (
     <WhiteboardListener />
@@ -1180,12 +1146,7 @@ const Controls = (props: ControlsProps) => {
     return items?.map((item, index) => {
       const ToolbarItem = item?.component;
       if (ToolbarItem) {
-        return (
-          <ToolbarItem
-            key={`bottom-toolbar-${type}` + index}
-            defaultItemsConfig={defaultItemsConfig}
-          />
-        );
+        return <ToolbarItem key={`bottom-toolbar-${type}` + index} />;
       } else {
         return null;
       }
@@ -1193,7 +1154,7 @@ const Controls = (props: ControlsProps) => {
   };
   return (
     <Toolbar>
-      {width >= BREAKPOINTS.lg && (
+      {width >= BREAKPOINTS.md && (
         <View style={[style.startContent]}>
           {renderContent(customStartItems, 'start')}
         </View>
@@ -1201,7 +1162,7 @@ const Controls = (props: ControlsProps) => {
       <View style={[style.centerContent]}>
         {renderContent(customCenterItems, 'center')}
       </View>
-      {width >= BREAKPOINTS.lg && (
+      {width >= BREAKPOINTS.md && (
         <View style={style.endContent}>
           {renderContent(customEndItems, 'end')}
         </View>

package/template/src/components/Navbar.tsx

@@ -580,7 +580,7 @@ const Navbar = (props: NavbarProps) => {
       <View style={style.centerContent}>
         {renderContent(customCenterItems, 'center')}
       </View>
-      {width > BREAKPOINTS.lg || isMobileUA() ? (
+      {width > BREAKPOINTS.sm || isMobileUA() ? (
         <View style={style.endContent}>
           {renderContent(customEndItems, 'end')}
         </View>

package/template/src/components/chat/chatConfigure.native.tsx

@@ -29,6 +29,7 @@ interface ChatMessageAttributes {
   file_name?: string;
   file_url?: string;
   from_platform?: string;
+  channel?: string;
 }
 interface chatConfigureContextInterface {
   open: boolean;
@@ -65,7 +66,7 @@ const ChatConfigure = ({children}) => {
   const chatClient = ChatClient.getInstance();
   const chatManager = chatClient.chatManager;
 
-  const localUid = data?.channel + '_' + data?.uid?.toString();
+  const localUid = data?.uid?.toString();
   const agoraToken = data?.chat?.user_token;
   const {store} = React.useContext(StorageContext);
   const {
@@ -119,11 +120,14 @@ const ChatConfigure = ({children}) => {
             messages[0].chatType === ChatMessageChatType.PeerChat;
           const {msgId, from, body, localTime} = messages[0];
           const chatType = body.type;
-          const fromUser = from.split('_')[1];
-          const {file_ext, file_name, file_url, from_platform} = messages[0]
-            .attributes as ChatMessageAttributes;
+          const fromUser = from;
+          const {file_ext, file_name, file_url, from_platform, channel} =
+            messages[0].attributes as ChatMessageAttributes;
 
-          //@ts-ignore
+          // prevent cross channel msgs
+          if (channel !== data.channel) {
+            return;
+          }
 
           switch (chatType) {
             case ChatMessageType.TXT:
@@ -277,7 +281,7 @@ const ChatConfigure = ({children}) => {
           logger.log(
             LogSource.Internals,
             'CHAT',
-            `Logged in User ${localUid} to Agora Chat Server`,
+            `Logged in Native User ${localUid} to Agora Chat Server`,
           );
           setupMessageListener();
           // adding chat connection event listeners
@@ -291,6 +295,11 @@ const ChatConfigure = ({children}) => {
             onConnected() {
               console.warn('onConnected');
               // once sdk connects to chat server successfully , need to add message listeners
+              logger.log(
+                LogSource.Internals,
+                'CHAT',
+                `Native User ${localUid} to connected to Agora Chat Server`,
+              );
             },
             onDisconnected() {
               console.warn('onDisconnected:');
@@ -305,7 +314,7 @@ const ChatConfigure = ({children}) => {
           logger.error(
             LogSource.Internals,
             'CHAT',
-            `Failed Looger  User ${localUid} to Agora Chat Server`,
+            `Failed Logging Native User ${localUid} from Agora Chat Server`,
             error,
           );
         }
@@ -334,6 +343,9 @@ const ChatConfigure = ({children}) => {
     switch (type) {
       case ChatMessageType.TXT:
         chatMsg = ChatMessage.createTextMessage(to, msg, chatMsgChatType);
+        chatMsg.attributes = {
+          channel: data.channel,
+        };
         break;
       case ChatMessageType.IMAGE:
         chatMsg = ChatMessage.createImageMessage(to, url, chatMsgChatType);
@@ -343,6 +355,7 @@ const ChatConfigure = ({children}) => {
           file_name: option?.ext?.file_name,
           file_url: option?.ext?.file_url, // this local url , when upload util is available for native then will use it
           from_platform: 'native',
+          channel: data.channel,
         };
 
         console.warn('Image msg to be sent', chatMsg);
@@ -358,6 +371,7 @@ const ChatConfigure = ({children}) => {
           file_name: option?.ext?.file_name,
           file_url: option?.url, // this local url , when upload util is available for native then will use it
           from_platform: 'native',
+          channel: data.channel,
         };
         console.warn('File msg to be sent', chatMsg);
         break;
@@ -381,13 +395,9 @@ const ChatConfigure = ({children}) => {
 
           // this is local user messages
           if (option.chatType === SDKChatType.SINGLE_CHAT) {
-            addMessageToPrivateStore(
-              Number(option.to.split('_')[1]),
-              messageData,
-              true,
-            );
+            addMessageToPrivateStore(Number(option.to), messageData, true);
           } else {
-            addMessageToStore(Number(option.from.split('_')[1]), messageData);
+            addMessageToStore(Number(option.from), messageData);
           }
         }
       })

package/template/src/components/chat/chatConfigure.tsx

@@ -77,6 +77,8 @@ const ChatConfigure = ({children}) => {
   useEffect(() => {
     const initializeChatSDK = async () => {
       try {
+        // disable Chat SDK logs
+        AgoraChat.logger.disableAll();
         const CHAT_APP_KEY = `${$config.CHAT_ORG_NAME}#${$config.CHAT_APP_NAME}`;
         // Initializes the Web client.
         newConn = new AgoraChat.connection({
@@ -84,10 +86,10 @@ const ChatConfigure = ({children}) => {
         });
         // Logs into Agora Chat.
         const result = await newConn.open({
-          user: data?.channel + '_' + data?.uid?.toString(),
+          user: data?.uid?.toString(),
           agoraToken: data.chat.user_token,
         });
-        logger.debug(
+        logger.log(
           LogSource.Internals,
           'CHAT',
           `Logged in User ${data.uid} to Agora Chat Server`,
@@ -97,16 +99,29 @@ const ChatConfigure = ({children}) => {
         newConn.addEventHandler('connection&message', {
           // app is connected to chat server
           onConnected: () => {
-            console.log('%cChatSDK: connected to chat server', 'color: blue');
+            logger.log(
+              LogSource.Internals,
+              'CHAT',
+              `User  ${data.uid} connected to Agora Chat Server`,
+            );
           },
 
           onFileMessage: message => {
+            if (message?.ext?.channel !== data?.channel) {
+              return;
+            }
+            logger.debug(
+              LogSource.Internals,
+              'CHAT',
+              `Received File Message`,
+              message,
+            );
             const fileUrl =
               message.ext?.from_platform === 'native'
                 ? message.url
                 : message.ext.file_url;
 
-            const fromUser = message?.from.split('_')[1];
+            const fromUser = message?.from;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
@@ -151,12 +166,21 @@ const ChatConfigure = ({children}) => {
             }
           },
           onImageMessage: message => {
+            if (message?.ext?.channel !== data?.channel) {
+              return;
+            }
+            logger.debug(
+              LogSource.Internals,
+              'CHAT',
+              `Received Img Message`,
+              message,
+            );
             const fileUrl =
               message.ext?.from_platform === 'native'
                 ? message.url
                 : message.ext.file_url;
 
-            const fromUser = message?.from.split('_')[1];
+            const fromUser = message?.from;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
@@ -203,14 +227,17 @@ const ChatConfigure = ({children}) => {
           },
           // text message is recieved
           onTextMessage: message => {
-            console.log(
-              '%cChatSDK: received msg: %s. from: %s',
-              'color: blue',
-              JSON.stringify(message, null, 2),
-              defaultContentRef.current[message.from]?.name,
+            if (message?.ext?.channel !== data?.channel) {
+              return;
+            }
+            logger.debug(
+              LogSource.Internals,
+              'CHAT',
+              `Received Text Message`,
+              message,
             );
 
-            const fromUser = message?.from.split('_')[1];
+            const fromUser = message?.from;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               // show to notifcation- group msg received
@@ -262,20 +289,14 @@ const ChatConfigure = ({children}) => {
           },
           // on token expired
           onTokenExpired: () => {
-            console.log('%cChatSDK: token has expired', 'color: blue');
+            logger.log(LogSource.Internals, 'CHAT', 'ChatSDK Token expired');
           },
           onError: error => {
-            console.log('%cChatSDK: error', 'color: blue', error);
+            logger.error(LogSource.Internals, 'CHAT', 'ChatSDK Error', error);
           },
         });
         connRef.current = newConn;
-        logger.debug(LogSource.Internals, 'CHAT', 'Initialized Chat SDK');
       } catch (error) {
-        console.log(
-          '%cChatSDK: initialization error: %s',
-          'color: red',
-          JSON.stringify(error, null, 2),
-        );
         logger.error(
           LogSource.Internals,
           'CHAT',
@@ -289,7 +310,7 @@ const ChatConfigure = ({children}) => {
     initializeChatSDK();
     return () => {
       newConn.close();
-      logger.debug(
+      logger.log(
         LogSource.Internals,
         'CHAT',
         `Logging out User ${data.uid} from Agora Chat Server`,
@@ -304,6 +325,9 @@ const ChatConfigure = ({children}) => {
     if (connRef.current) {
       //TODO thumb and url of actual image uploaded available in file upload complete
       const localFileUrl = option?.ext?.file_url || '';
+      //add channel name so to prevent cross channel message mixup when same user joins two diff channels
+      // this is filtered on msgRecived event
+      option.ext = {...option?.ext, channel: data?.channel};
       //@ts-ignore
       const msg = AgoraChat.message.create(option);
       connRef.current
@@ -331,13 +355,9 @@ const ChatConfigure = ({children}) => {
           //todo chattype as per natue type
           // this is local user messages
           if (option.chatType === SDKChatType.SINGLE_CHAT) {
-            addMessageToPrivateStore(
-              Number(option?.to.split('_')[1]),
-              messageData,
-              true,
-            );
+            addMessageToPrivateStore(Number(option?.to), messageData, true);
           } else {
-            addMessageToStore(Number(option?.from.split('_')[1]), messageData);
+            addMessageToStore(Number(option?.from), messageData);
           }
         })
         .catch(error => {
@@ -402,11 +422,9 @@ const ChatConfigure = ({children}) => {
     const CHAT_APP_KEY = `${$config.CHAT_ORG_NAME}#${$config.CHAT_APP_NAME}`;
     const uploadObj = {
       onFileUploadProgress: (data: ProgressEvent) => {
-        console.log('Chat-SDK: upload inprogress', data);
         setUploadStatus(UploadStatus.IN_PROGRESS);
       },
       onFileUploadComplete: (data: any) => {
-        console.log('Chat-SDK: upload success', data);
         const url = `${data.uri}/${data.entities[0].uuid}?em-redirect=true&share-secret=${data.entities[0]['share-secret']}`;
         //TODO: handle for multiple uploads
         setUploadedFiles(prev => {
@@ -415,7 +433,6 @@ const ChatConfigure = ({children}) => {
         setUploadStatus(UploadStatus.SUCCESS);
       },
       onFileUploadError: (error: any) => {
-        console.log('Chat-SDK: upload error', error);
         logger.error(LogSource.Internals, 'CHAT', 'Attachment upload failed');
         setUploadStatus(UploadStatus.FAILURE);
       },
@@ -451,7 +468,12 @@ const ChatConfigure = ({children}) => {
       connRef.current
         .recallMessage(option)
         .then(res => {
-          console.log('recall success', res);
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            'Chat Message Reacalled Success',
+            res,
+          );
         })
         .catch(err => {
           logger.debug(

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

@@ -490,12 +490,7 @@ const ActionSheetContent = props => {
       componentName: 'recording',
       component: isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null,
     },
-  ];
-
-  if (
-    !(defaultItemsConfig?.more?.fields?.['virtual-background']?.hide === 'yes')
-  ) {
-    defaultItems.push({
+    {
       default: true,
       order: 7,
       hide: 'no',
@@ -505,45 +500,42 @@ const ActionSheetContent = props => {
         $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM ? (
           <VBIcon />
         ) : null,
-    });
-  }
-  defaultItems.push({
-    default: true,
-    order: 8,
-    hide: 'no',
-    align: 'start',
-    componentName: 'switch-camera',
-    component:
-      !isAudioRoom &&
-      (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
-  });
-  defaultItems.push({
-    default: true,
-    order: 9,
-    hide: 'no',
-    align: 'start',
-    componentName: 'layout',
-    component: <LayoutIcon />,
-  });
-  defaultItems.push({
-    default: true,
-    order: 10,
-    hide: 'no',
-    align: 'start',
-    componentName: 'settings',
-    component: <SettingsIcon />,
-  });
-  defaultItems.push({
-    default: true,
-    order: 11,
-    hide: 'no',
-    align: 'start',
-    componentName: 'invite',
-    component: <ShareIcon />,
-  });
-
-  if (!(defaultItemsConfig?.more?.fields?.caption?.hide === 'yes')) {
-    defaultItems.push({
+    },
+    {
+      default: true,
+      order: 8,
+      hide: 'no',
+      align: 'start',
+      componentName: 'switch-camera',
+      component:
+        !isAudioRoom &&
+        (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
+    },
+    {
+      default: true,
+      order: 9,
+      hide: 'no',
+      align: 'start',
+      componentName: 'layout',
+      component: <LayoutIcon />,
+    },
+    {
+      default: true,
+      order: 10,
+      hide: 'no',
+      align: 'start',
+      componentName: 'settings',
+      component: <SettingsIcon />,
+    },
+    {
+      default: true,
+      order: 11,
+      hide: 'no',
+      align: 'start',
+      componentName: 'invite',
+      component: <ShareIcon />,
+    },
+    {
       default: true,
       order: 12,
       hide: 'no',
@@ -554,18 +546,16 @@ const ActionSheetContent = props => {
           onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
         />
       ),
-    });
-  }
-  if (!(defaultItemsConfig?.more?.fields?.transcript?.hide === 'yes')) {
-    defaultItems.push({
+    },
+    {
       default: true,
       order: 13,
       hide: 'no',
       align: 'start',
       componentName: 'transcript',
       component: <TranscriptIconBtn />,
-    });
-  }
+    },
+  ];
 
   const isHidden = i => {
     return i?.hide === 'yes';
@@ -655,11 +645,13 @@ const CarouselWrapper = ({data}) => {
 
   const isPaginationRequired = slides.length > 1;
 
-  return (
-    <View style={{flexDirection: 'row'}}>
-      <Carousel data={slides} isPaginationRequired={isPaginationRequired} />
-    </View>
-  );
+  if (isPaginationRequired)
+    return (
+      <View style={{flexDirection: 'row'}}>
+        <Carousel data={slides} />
+      </View>
+    );
+  return <View style={styles.row}>{slides[0].component}</View>;
 };
 
 export default ActionSheetContent;

package/template/src/subComponents/ChatInput.native.tsx

@@ -150,10 +150,8 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
         ? SDKChatType.SINGLE_CHAT
         : SDKChatType.GROUP_CHAT,
       type: ChatMessageType.TXT,
-      from: data.channel + '_' + data.uid.toString(),
-      to: privateChatUser
-        ? data.channel + '_' + privateChatUser.toString()
-        : groupID,
+      from: data.uid.toString(),
+      to: privateChatUser ? privateChatUser.toString() : groupID,
       msg: message,
     };
     sendChatSDKMessage(option);

package/template/src/subComponents/ChatInput.tsx

@@ -145,17 +145,13 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       return;
     }
 
-    debugger;
-    console.log(data);
     const option = {
       chatType: privateChatUser
         ? SDKChatType.SINGLE_CHAT
         : SDKChatType.GROUP_CHAT,
       type: ChatMessageType.TXT,
-      from: data.channel + '_' + data.uid.toString(),
-      to: privateChatUser
-        ? data.channel + '_' + privateChatUser.toString()
-        : groupID,
+      from: data.uid.toString(),
+      to: privateChatUser ? privateChatUser.toString() : groupID,
       msg: message,
     };
     sendChatSDKMessage(option);

package/template/src/subComponents/chat/ChatActionMenu.tsx

@@ -62,7 +62,7 @@ export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
   const {defaultContent} = useContent();
 
   const {
-    data: {isHost, chat, channel},
+    data: {isHost, chat},
   } = useRoomInfo();
 
   const groupID = chat.group_id;
@@ -167,13 +167,7 @@ export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
           confirmLabel={confirmLabel}
           confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
           onConfirmClick={() => {
-            deleteAttachment(
-              msgId,
-              privateChatUser
-                ? channel + '_' + recallFromUser
-                : recallFromUser.toString(),
-              chatType,
-            );
+            deleteAttachment(msgId, recallFromUser.toString(), chatType);
             if (chatType === SDKChatType.SINGLE_CHAT) {
               removeMessageFromPrivateStore(msgId, isLocal);
             }

package/template/src/subComponents/chat/ChatAttachment.native.tsx

@@ -128,13 +128,11 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
         const option = {
           type: isImageUploaded ? ChatMessageType.IMAGE : ChatMessageType.FILE,
           url: filePath,
-          to: privateChatUser
-            ? data.channel + '_' + privateChatUser.toString()
-            : groupID,
+          to: privateChatUser ? privateChatUser.toString() : groupID,
           chatType: privateChatUser
             ? SDKChatType.SINGLE_CHAT
             : SDKChatType.GROUP_CHAT,
-          from: data.channel + '_' + data.uid.toString(),
+          from: data.uid.toString(),
           fileName: result[0].name,
           ext: {
             file_length: result[0].size,
@@ -173,13 +171,9 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
 
           // this is local user messages
           if (message.chatType === ChatMessageChatType.PeerChat) {
-            addMessageToPrivateStore(
-              Number(message.to.split('_')[1]),
-              messageData,
-              true,
-            );
+            addMessageToPrivateStore(Number(message.to), messageData, true);
           } else {
-            addMessageToStore(Number(message.from.split('_')[1]), messageData);
+            addMessageToStore(Number(message.from), messageData);
           }
 
           setUploadStatus(UploadStatus.SUCCESS);

package/template/src/subComponents/chat/ChatSendButton.tsx

@@ -80,10 +80,8 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
         : SDKChatType.GROUP_CHAT,
       type: msgType as ChatMessageType,
       msg: msgType === ChatMessageType.TXT ? message : '', // currenlt not supporting combinarion msg (file+txt)
-      from: data.channel + '_' + data.uid.toString(),
-      to: selectedUserId
-        ? data.channel + '_' + selectedUserId.toString()
-        : groupID,
+      from: data.uid.toString(),
+      to: selectedUserId ? selectedUserId.toString() : groupID,
       ext: {
         file_length,
         file_ext,

package/template/src/subComponents/chat/ImagePopup.tsx

@@ -61,7 +61,7 @@ const ImagePopup = (props: ImagePopupProps) => {
     React.useState(false);
   const {privateChatUser} = useChatUIControls();
   const {
-    data: {isHost, chat, channel},
+    data: {isHost, chat},
   } = useRoomInfo();
   const {downloadAttachment, deleteAttachment} = useChatConfigure();
   const {removeMessageFromPrivateStore, removeMessageFromStore} =
@@ -284,13 +284,7 @@ const ImagePopup = (props: ImagePopupProps) => {
           confirmLabel={confirmLabel}
           confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
           onConfirmClick={() => {
-            deleteAttachment(
-              msgId,
-              privateChatUser
-                ? channel + '_' + recallFromUser
-                : recallFromUser.toString(),
-              chatType,
-            );
+            deleteAttachment(msgId, recallFromUser.toString(), chatType);
             if (chatType === SDKChatType.SINGLE_CHAT) {
               removeMessageFromPrivateStore(msgId, isLocal);
             }