agora-appbuilder-core 4.0.13 → 4.0.15

package/template/src/atoms/ActionMenu.tsx

@@ -32,7 +32,6 @@ export interface ActionMenuItem {
   onHoverCallback?: (isHovered: boolean) => void;
   onHoverContent?: JSX.Element;
   disabled?: boolean;
-  iconSize?: number;
 }
 export interface ActionMenuProps {
   from: string;
@@ -76,7 +75,6 @@ const ActionMenu = (props: ActionMenuProps) => {
           disabled = false,
           onHoverCallback = undefined,
           onHoverContent = undefined,
-          iconSize = 20,
         },
         index,
       ) => (
@@ -112,7 +110,7 @@ const ActionMenu = (props: ActionMenuProps) => {
                       base64={isBase64Icon}
                       base64TintColor={iconColor}
                       iconType="plain"
-                      iconSize={iconSize}
+                      iconSize={20}
                       icon={externalIconString}
                       tintColor={iconColor}
                     />
@@ -121,7 +119,7 @@ const ActionMenu = (props: ActionMenuProps) => {
                       base64={isBase64Icon}
                       base64TintColor={iconColor}
                       iconType="plain"
-                      iconSize={iconSize}
+                      iconSize={20}
                       name={
                         isHovered && onHoverIcon && !disabled
                           ? onHoverIcon
@@ -224,7 +222,6 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     zIndex: 1,
     elevation: 1,
-    minWidth: 180,
   },
   rowHoveredMiddleItems: {
     backgroundColor:

package/template/src/atoms/CustomIcon.tsx

@@ -6,8 +6,7 @@ Steps to add/remove icons:
 4. Generate a new Font File
 5. Download Zip folder , replace iconmoon.ttf file in ./src/assets/font/iconmoon.ttf with downloded
 6. Replace selection.json and font-styles.css content 
-7. [Deprecated RN >.69] Run npx react-native link react-native-vector-icons to copy in the android/app/src/main/assets/fonts directory and in Info.plist (for Android and iOS respectively).
-8. Run npx react-native-asset to add icons to android / ios
+7. Run npx react-native link react-native-vector-icons to copy in the android/app/src/main/assets/fonts directory and in Info.plist (for Android and iOS respectively).
 */
 
 import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
@@ -131,20 +130,5 @@ export interface IconsInterface {
   'fit-to-screen': string;
   warning: string;
   'view-only': string;
-  chat_send: string;
-  chat_send_fill: string;
-  chat_emoji: string;
-  chat_emoji_fill: string;
-  chat_attachment_pdf: string;
-  chat_attachment_doc: string;
-  chat_attachment_image: string;
-  chat_attachment_unknown: string;
-  chat_gif: string;
-  chat_gif_fill: string;
-  chat_attachment: string;
-  reply: string;
-  delete: string;
-  reply_all: string;
-  block_user: string;
   'play-circle': string;
 }

package/template/src/atoms/ImageIcon.tsx

@@ -18,13 +18,11 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 export interface ImageIconProps {
   tintColor?: string;
   name?: keyof IconsInterface;
-  hoverIconName?: keyof IconsInterface;
   icon?: string;
   iconSize?: number;
   iconContainerStyle?: ViewStyle;
   iconBackgroundColor?: string;
   base64?: boolean;
-  hoverBase64?: boolean;
   base64TintColor?: string;
   iconType?: 'round' | 'plain';
   isHovered?: boolean;
@@ -37,16 +35,13 @@ const ImageIcon = (props: ImageIconProps) => {
   let defaultSize = $config.ICON_TEXT ? 26 : 24;
   const {
     name,
-    hoverIconName = name,
     icon = undefined,
     iconSize = defaultSize,
     tintColor,
     base64 = false,
-    hoverBase64 = false,
     base64TintColor = '',
     iconType = 'round',
     iconContainerStyle,
-    isHovered,
   } = props;
   return (
     <View
@@ -83,18 +78,11 @@ const ImageIcon = (props: ImageIconProps) => {
         ) : (
           <></>
         )}
-        {isHovered && hoverBase64 ? (
+        {base64 ? (
           <UIKitImageIcon
             tintColor={base64TintColor}
             //@ts-ignore
-            name={hoverIconName}
-            style={{width: iconSize, height: iconSize}}
-          />
-        ) : base64 ? (
-          <UIKitImageIcon
-            tintColor={base64TintColor}
-            //@ts-ignore
-            name={isHovered ? hoverIconName : name}
+            name={name}
             style={{width: iconSize, height: iconSize}}
           />
         ) : icon ? (
@@ -104,11 +92,7 @@ const ImageIcon = (props: ImageIconProps) => {
             style={{width: iconSize, height: iconSize}}
           />
         ) : name ? (
-          <CustomIcon
-            name={isHovered ? hoverIconName : name}
-            color={tintColor}
-            size={iconSize}
-          />
+          <CustomIcon name={name} color={tintColor} size={iconSize} />
         ) : (
           <></>
         )}

package/template/src/atoms/Popup.tsx

@@ -22,11 +22,8 @@ interface PopupProps extends ModalProps {
   showCloseIcon?: boolean;
   children: React.ReactNode;
   contentContainerStyle?: ViewStyle;
-  bodyContainerStyle?: ViewStyle;
-  closeBtnStyle?: ViewStyle;
   containerStyle?: ViewStyle;
   cancelable?: boolean;
-  headerComponent?: React.ReactNode;
 }
 const Popup = (props: PopupProps) => {
   const {
@@ -37,9 +34,6 @@ const Popup = (props: PopupProps) => {
     children,
     showCloseIcon,
     cancelable = true,
-    bodyContainerStyle = {},
-    closeBtnStyle = {},
-    headerComponent = null,
     ...otherProps
   } = props;
 
@@ -68,12 +62,10 @@ const Popup = (props: PopupProps) => {
         </TouchableWithoutFeedback>
 
         <View style={[styles.modalView, props?.contentContainerStyle]}>
-          {title || showCloseIcon || headerComponent ? (
+          {title || showCloseIcon ? (
             <>
               <View style={styles.header}>
-                {title && <Text style={styles.title}>{title}</Text>}
-                {headerComponent}
-
+                <Text style={styles.title}>{title}</Text>
                 {showCloseIcon ? (
                   <View>
                     <IconButton
@@ -86,7 +78,6 @@ const Popup = (props: PopupProps) => {
                         iconType: 'plain',
                         iconContainerStyle: {
                           padding: isMobileUA() ? 0 : 5,
-                          ...closeBtnStyle,
                         },
                         name: 'close',
                         tintColor: $config.SECONDARY_ACTION_COLOR,
@@ -106,12 +97,12 @@ const Popup = (props: PopupProps) => {
                 <></>
               )}
 
-              {title ? <Spacer size={32} /> : null}
+              <Spacer size={32} />
             </>
           ) : (
             <></>
           )}
-          <View style={bodyContainerStyle}>{children}</View>
+          {children}
         </View>
       </View>
     </Modal>

package/template/src/atoms/ToolbarPreset.tsx

@@ -7,21 +7,62 @@ import {isMobileUA} from '../utils/common';
 import NavbarMobile from '../components/NavbarMobile';
 import ActionSheet from '../pages/video-call/ActionSheet';
 
+export type ToolbarDefaultItemName =
+  //bottom bar
+
+  //left
+  | 'layout'
+  | 'invite'
+  //center
+  | 'local-audio'
+  | 'local-video'
+  | 'screenshare'
+  | 'recording'
+  | 'switch-camera'
+  | 'end-call'
+  | 'raise-hand'
+  | 'more'
+
+  //topbar
+  | 'meeting-title'
+  | 'participant-count'
+  | 'recording-status'
+  | 'chat'
+  | 'participant'
+  | 'settings';
+
+export type ToolbarDefaultItemConfig = {
+  [key in ToolbarDefaultItemName]?: ToolbarDefaultItem;
+};
+
+export type ToolbarItemAlign = 'start' | 'center' | 'end';
+export type ToolbarItemHide = 'yes' | 'no';
+
+export interface ToolbarDefaultItem {
+  component?: () => JSX.Element;
+  align?: ToolbarItemAlign;
+  hide?: ToolbarItemHide;
+  order?: number;
+}
+
 export interface ToolbarCustomItem {
   component: () => JSX.Element;
-  align: 'start' | 'center' | 'end';
-  hide: 'yes' | 'no' | 'never';
+  align: ToolbarItemAlign;
+  hide: ToolbarItemHide;
   order?: number;
 }
+export type ToolbarPresetAlign = 'top' | 'bottom' | 'right' | 'left';
 
 export interface ToolbarBottomPresetProps {
-  align: 'bottom';
+  align: ToolbarPresetAlign;
   customItems?: Array<ToolbarCustomItem>;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
   snapPointsMinMax: [number, number];
 }
 export interface ToolbarOtherPresetProps {
-  align: 'top' | 'left' | 'right';
+  align: ToolbarPresetAlign;
   customItems?: Array<ToolbarCustomItem>;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
   snapPointsMinMax?: never;
 }
 
@@ -50,9 +91,14 @@ const ToolbarPreset = (props: ToolbarPresetProps) => {
       <NavbarMobile
         customItems={props?.customItems}
         includeDefaultItems={true}
+        defaultItemsConfig={props?.defaultItemsConfig}
       />
     ) : (
-      <Navbar customItems={props?.customItems} includeDefaultItems={true} />
+      <Navbar
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+        defaultItemsConfig={props?.defaultItemsConfig}
+      />
     );
   } else if (align === 'bottom') {
     return isMobileUA() ? (
@@ -60,9 +106,14 @@ const ToolbarPreset = (props: ToolbarPresetProps) => {
         customItems={props?.customItems}
         includeDefaultItems={true}
         snapPointsMinMax={props?.snapPointsMinMax}
+        defaultItemsConfig={props?.defaultItemsConfig}
       />
     ) : (
-      <Controls customItems={props?.customItems} includeDefaultItems={true} />
+      <Controls
+        customItems={props?.customItems}
+        includeDefaultItems={true}
+        defaultItemsConfig={props?.defaultItemsConfig}
+      />
     );
   } else {
     return null;

package/template/src/auth/AuthProvider.tsx

@@ -493,11 +493,6 @@ const AuthProvider = (props: AuthProviderProps) => {
             );
             throw new Error('Token not received');
           } else {
-            isWeb() &&
-              sessionStorage.setItem(
-                'user_id',
-                JSON.parse(atob(response.token?.split('.')[1]))?.user_id,
-              );
             enableTokenAuth(response.token)
               .then(() => {
                 //set auth enabled on useEffect

package/template/src/auth/config.ts

@@ -24,12 +24,6 @@ export const getPlatformId = (): string => {
   return platformID;
 };
 
-export const getUserId = (): string => {
-  if (!isWeb()) return null;
-  const userId = sessionStorage.getItem('user_id');
-  return userId;
-};
-
 export const getRequestHeaders = () => {
   return {
     'X-Project-ID': $config.PROJECT_ID,
@@ -52,10 +46,7 @@ export const getOriginURL = () => {
   return isWeb() ? `${window.location.origin}` : `${$config.FRONTEND_ENDPOINT}`;
 };
 
-export const GET_UNAUTH_FLOW_API_ENDPOINT = () => {
-  const userId = getUserId();
-  const userIdParam = userId ? `&user_id=${userId}` : '';
-  return `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
+export const GET_UNAUTH_FLOW_API_ENDPOINT = () =>
+  `${$config.BACKEND_ENDPOINT}/v1/login?project_id=${
     $config.PROJECT_ID
-  }&platform_id=${getPlatformId()}${userIdParam}`;
-};
+  }&platform_id=${getPlatformId()}`;

package/template/src/components/Chat.tsx

@@ -53,8 +53,7 @@ const Chat = (props?: ChatProps) => {
   const {setSidePanel} = useSidePanel();
   const {showHeader = true} = props;
   const {isRecordingBot} = useIsRecordingBot();
-  const {chatType, setChatType, setPrivateChatUser, showEmojiPicker} =
-    useChatUIControls();
+  const {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
 
   const {
     unreadGroupMessageCount,
@@ -163,11 +162,6 @@ const Chat = (props?: ChatProps) => {
             : {},
           // @ts-ignore
           transcriptHeight && !isMobileUA() && {height: transcriptHeight},
-          showEmojiPicker && {
-            backgroundColor:
-              $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60'],
-          },
-          ,
         ]}>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view

package/template/src/components/ChatContext.ts

@@ -12,7 +12,6 @@
 import RtmEngine from 'agora-react-native-rtm';
 import {UidType} from '../../agora-rn-uikit';
 import {createContext, SetStateAction} from 'react';
-import {ChatMessageType} from './chat-messages/useChatMessages';
 
 export interface ChatBubbleProps {
   isLocal: boolean;
@@ -23,13 +22,7 @@ export interface ChatBubbleProps {
   msgId: string;
   isDeleted: boolean;
   isSameUser: boolean;
-  type: ChatMessageType;
-  thumb?: string;
-  url?: string;
-  fileName?: string;
-  ext?: string;
   previousMessageCreatedTimestamp?: string;
-
   render?: (
     isLocal: boolean,
     message: string,
@@ -39,11 +32,6 @@ export interface ChatBubbleProps {
     isDeleted: boolean,
     updatedTimestamp: string,
     isSameUser: boolean,
-    type: ChatMessageType,
-    thumb?: string,
-    url?: string,
-    fileName?: string,
-    ext?: string,
     previousMessageCreatedTimestamp?: string,
   ) => JSX.Element;
 }

package/template/src/components/CommonStyles.ts

@@ -2,7 +2,7 @@ import {StyleSheet} from 'react-native';
 import ThemeConfig from '../theme';
 
 export const SIDE_PANEL_MAX_WIDTH = '20%';
-export const SIDE_PANEL_MIN_WIDTH = 372;
+export const SIDE_PANEL_MIN_WIDTH = 338;
 export const SIDE_PANEL_GAP = 8;
 export const CAPTION_CONTAINER_HEIGHT = 144;
 export const MOBILE_CAPTION_CONTAINER_HEIGHT = 115;
@@ -11,7 +11,7 @@ const CommonStyles = StyleSheet.create({
   sidePanelContainerWeb: {
     flex: 1,
     maxWidth: SIDE_PANEL_MAX_WIDTH,
-    minWidth: 372,
+    minWidth: 338,
     borderRadius: ThemeConfig.BorderRadius.small,
     marginLeft: SIDE_PANEL_GAP,
     backgroundColor: $config.CARD_LAYER_1_COLOR,

package/template/src/components/Controls.tsx

@@ -37,6 +37,7 @@ import {
   isWeb,
   isWebInternal,
   useIsDesktop,
+  updateToolbarDefaultConfig,
 } from '../utils/common';
 import {RoomInfoContextInterface, useRoomInfo} from './room-info/useRoomInfo';
 import LocalEndcall from '../subComponents/LocalEndCall';
@@ -68,7 +69,11 @@ import ImageIcon from '../atoms/ImageIcon';
 import useGetName from '../utils/useGetName';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem from '../atoms/ToolbarItem';
-import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {
+  ToolbarCustomItem,
+  ToolbarDefaultItem,
+  ToolbarDefaultItemConfig,
+} from '../atoms/ToolbarPreset';
 
 import {BoardColor, whiteboardContext} from './whiteboard/WhiteboardConfigure';
 import {RoomPhase} from 'white-web-sdk';
@@ -780,20 +785,6 @@ export const InviteToolbarItem = () => {
     </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);
@@ -919,65 +910,90 @@ export const LocalEndcallToolbarItem = (
   );
 };
 
-const defaultCenterItems: ToolbarCustomItem[] = [
+const defaultItems: ToolbarDefaultItem[] = [
   {
     align: 'start',
-    component: RaiseHandToolbarItem,
+    component: LayoutToolbarItem,
+    componentName: 'layout',
     order: 0,
     hide: 'no',
   },
   {
     align: 'start',
-    component: LocalAudioToolbarItem,
+    component: InviteToolbarItem,
+    componentName: 'invite',
     order: 1,
     hide: 'no',
   },
   {
     align: 'start',
+    component: RaiseHandToolbarItem,
+    componentName: 'raise-hand',
+    order: 0,
+    hide: 'no',
+  },
+  {
+    align: 'center',
+    component: LocalAudioToolbarItem,
+    componentName: 'local-audio',
+    order: 1,
+    hide: 'no',
+  },
+  {
+    align: 'center',
     component: LocalVideoToolbarItem,
+    componentName: 'local-video',
     order: 2,
     hide: 'no',
   },
   {
-    align: 'start',
+    align: 'center',
     component: SwitchCameraToolbarItem,
+    componentName: 'switch-camera',
     order: 3,
     hide: 'no',
   },
   {
-    align: 'start',
+    align: 'center',
     component: ScreenShareToolbarItem,
+    componentName: 'screenshare',
     order: 4,
     hide: 'no',
   },
   {
-    align: 'start',
+    align: 'center',
     component: RecordingToolbarItem,
+    componentName: 'recording',
     order: 5,
     hide: 'no',
   },
   {
-    align: 'start',
+    align: 'center',
     component: MoreButtonToolbarItem,
+    componentName: 'more',
     order: 6,
     hide: 'no',
   },
   {
-    align: 'start',
+    align: 'center',
+    componentName: 'end-call',
     component: LocalEndcallToolbarItem,
     order: 7,
     hide: 'no',
   },
 ];
 
-const defaultEndItems: ToolbarCustomItem[] = [];
-
 export interface ControlsProps {
   customItems?: ToolbarCustomItem[];
   includeDefaultItems?: boolean;
+  defaultItemsConfig?: ToolbarDefaultItemConfig;
 }
 const Controls = (props: ControlsProps) => {
-  const {customItems = [], includeDefaultItems = true} = props;
+  const {
+    customItems = [],
+    includeDefaultItems = true,
+    defaultItemsConfig = {},
+  } = props;
   const {width} = useWindowDimensions();
   const {defaultContent} = useContent();
   const {setLanguage, setMeetingTranscript, setIsSTTActive} = useCaption();
@@ -1083,18 +1099,30 @@ const Controls = (props: ControlsProps) => {
     return i?.hide === 'yes';
   };
   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/Leftbar.tsx

@@ -25,21 +25,21 @@ export interface LeftbarProps {
 }
 const Leftbar = (props: LeftbarProps) => {
   const {customItems = [], includeDefaultItems = true} = props;
-  const isHidden = (i) => {
+  const isHidden = i => {
     return i?.hide === 'yes';
   };
   const customStartItems = customItems
-    ?.filter((i) => i?.align === 'start' && !isHidden(i))
+    ?.filter(i => i?.align === 'start' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultStartItems : [])
     ?.sort(CustomToolbarSort);
 
   const customCenterItems = customItems
-    ?.filter((i) => i?.align === 'center' && !isHidden(i))
+    ?.filter(i => i?.align === 'center' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultCenterItems : [])
     ?.sort(CustomToolbarSort);
 
   const customEndItems = customItems
-    ?.filter((i) => i?.align === 'end' && !isHidden(i))
+    ?.filter(i => i?.align === 'end' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultEndItems : [])
     ?.sort(CustomToolbarSort);