agora-appbuilder-core 4.1.19-beta.2 → 4.1.19-beta.4

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -53,6 +53,7 @@ export interface SidePanelItem {
   name: string;
   title: string;
   component: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
 }
 

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.19-beta.2",
-  CORE_VERSION: "4.1.19-beta.2",
+  CLI_VERSION: "3.1.19-beta.4",
+  CORE_VERSION: "4.1.19-beta.4",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/CustomSidePanel.tsx

@@ -10,23 +10,18 @@
 *********************************************
 */
 import React from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView} from 'react-native';
 import {isMobileUA, isWebInternal, useIsSmall} from '../utils/common';
 import CommonStyles from './CommonStyles';
-import SidePanelHeader, {
-  SidePanelStyles,
-} from '../subComponents/SidePanelHeader';
-import {useLayout} from '../utils/useLayout';
-import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import useCaptionWidth from '../subComponents/caption/useCaptionWidth';
-import {useSidePanel} from '../utils/useSidePanel';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {CustomSidePanelHeader} from '../pages/video-call/SidePanelHeader';
-
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 export interface CustomSidePanelViewInterface {
   name: string;
   title?: string;
   content: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   showHeader?: boolean;
 }
@@ -37,12 +32,12 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
     showHeader = true,
     name,
     title,
+    headerRightSlot,
     onClose,
   } = props;
-  const {currentLayout} = useLayout();
   const {transcriptHeight} = useCaptionWidth();
-  const {setSidePanel} = useSidePanel();
   const isSmall = useIsSmall();
+  const {currentLayout} = useLayout();
 
   return (
     <View
@@ -57,13 +52,18 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
           : // desktop maximized
             CommonStyles.sidePanelContainerWeb,
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-          ? {marginVertical: 4}
+          ? {marginTop: 4}
           : {},
         //@ts-ignore
         transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && (
-        <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
+        <CustomSidePanelHeader
+          name={name}
+          title={title}
+          headerRightSlot={headerRightSlot}
+          onClose={onClose}
+        />
       )}
       <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}

package/template/src/components/RTMConfigure.tsx

@@ -958,6 +958,19 @@ const RtmConfigure = (props: any) => {
         );
         return;
       }
+      if (
+        !parsedValue ||
+        typeof parsedValue !== 'object' ||
+        Array.isArray(parsedValue)
+      ) {
+        logger.debug(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'Ignoring non custom-event RTM payload',
+          {evt, sender, ts},
+        );
+        return;
+      }
       const {payload, persistLevel, source} = parsedValue;
       // Step 1: Set local attributes
       if (persistLevel === PersistanceLevel.Session) {

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -87,6 +87,7 @@ interface UserActionMenuOptionsOptionsProps {
   spotlightUid?: UidType;
   setSpotlightUid?: (uid: UidType) => void;
   items?: UserActionMenuItemsConfig;
+  extraMenuItems?: ActionMenuItem[];
 }
 
 export default function UserActionMenuOptionsOptions(
@@ -102,7 +103,13 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
+  const {
+    user,
+    actionMenuVisible,
+    setActionMenuVisible,
+    spotlightUid,
+    extraMenuItems,
+  } = props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -716,6 +723,24 @@ export default function UserActionMenuOptionsOptions(
       items.push(...customItems);
     }
 
+    if (extraMenuItems?.length) {
+      items.push(
+        ...extraMenuItems.map(item => ({
+          ...item,
+          closeActionMenu: () => {
+            item.closeActionMenu?.();
+            setActionMenuVisible(false);
+          },
+          onPress: item.onPress
+            ? () => {
+                item.onPress?.();
+                setActionMenuVisible(false);
+              }
+            : item.onPress,
+        })),
+      );
+    }
+
     items.sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
 
     setActionMenuitems(items);
@@ -729,6 +754,8 @@ export default function UserActionMenuOptionsOptions(
     secondaryPinnedUid,
     currentLayout,
     spotlightUid,
+    extraMenuItems,
+    setActionMenuVisible,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -291,6 +291,8 @@ const ActionSheet = props => {
               isCustomSidePanel={true}
               customSidePanelProps={{
                 title: sidePanelArray[customSidePanelIndex]?.title,
+                headerRightSlot:
+                  sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                 onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                 name: sidePanelArray[customSidePanelIndex]?.name,
               }}

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

@@ -326,6 +326,8 @@ const ActionSheet = props => {
                 isCustomSidePanel={true}
                 customSidePanelProps={{
                   title: sidePanelArray[customSidePanelIndex]?.title,
+                  headerRightSlot:
+                    sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                   onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                   name: sidePanelArray[customSidePanelIndex]?.name,
                 }}

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

@@ -16,6 +16,7 @@ const ActionSheetHandle = (props: {
   isCustomSidePanel?: boolean;
   customSidePanelProps?: {
     title: string;
+    headerRightSlot?: React.ReactNode;
     onClose?: () => void;
     name: string;
   };

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

@@ -208,6 +208,7 @@ export const VBHeader = () => {
 
 export const CustomSidePanelHeader = (props: {
   title: string;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   name: string;
 }) => {
@@ -217,6 +218,7 @@ export const CustomSidePanelHeader = (props: {
       centerComponent={
         <Text style={SidePanelStyles.heading}>{props?.title}</Text>
       }
+      trailingComponent={props?.headerRightSlot}
       trailingIconName="close"
       trailingIconOnPress={() => {
         setSidePanel(SidePanelType.None);
@@ -224,7 +226,7 @@ export const CustomSidePanelHeader = (props: {
           props?.onClose && props?.onClose();
         } catch (error) {
           console.error(
-            `Error on calling onClose in custom side panel ${name}`,
+            `Error on calling onClose in custom side panel ${props.name}`,
           );
         }
       }}

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

@@ -400,6 +400,9 @@ const VideoCallScreen = () => {
                   <CustomSidePanelView
                     content={SidePanelArray[customSidePanelIndex]?.component}
                     title={SidePanelArray[customSidePanelIndex]?.title}
+                    headerRightSlot={
+                      SidePanelArray[customSidePanelIndex]?.headerRightSlot
+                    }
                     name={SidePanelArray[customSidePanelIndex]?.name}
                     onClose={SidePanelArray[customSidePanelIndex]?.onClose}
                   />

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

@@ -25,6 +25,7 @@ import {
 } from './DefaultLayouts';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
+import type {ActionMenuItem} from '../../atoms/ActionMenu';
 import {
   isMobileUA,
   isValidReactComponent,
@@ -60,6 +61,7 @@ export interface VideoRendererProps {
   CustomChild?: React.ComponentType;
   avatarRadius?: number;
   hideMenuOptions?: boolean;
+  extraMenuItems?: ActionMenuItem[];
   containerStyle?: ViewStyle;
   innerContainerStyle?: ViewStyle;
 }
@@ -69,6 +71,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   CustomChild,
   avatarRadius = 100,
   hideMenuOptions = false,
+  extraMenuItems,
   containerStyle = {},
   innerContainerStyle = {},
 }) => {
@@ -214,6 +217,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
         from={'video-tile'}
         setSpotlightUid={setSpotlightUid}
         spotlightUid={spotlightUid}
+        extraMenuItems={extraMenuItems}
       />
       <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
         <View

package/template/src/subComponents/SidePanelHeader.tsx

@@ -13,6 +13,7 @@ export interface SidePanelHeaderProps {
   leadingIconOnPress?: () => void;
   trailingIconName?: keyof IconsInterface;
   trailingIconOnPress?: () => void;
+  trailingComponent?: React.ReactNode;
   trailingIconName2?: keyof IconsInterface;
   trailingIconOnPress2?: () => void;
   isChat?: boolean;
@@ -56,9 +57,21 @@ const SidePanelHeader = React.forwardRef<View, SidePanelHeaderProps>(
             <View style={{width: 30, height: 'auto'}}></View>
           ) : null}
           {props?.centerComponent ? props.centerComponent : null}
-          <View style={props?.trailingIconName2 && SidePanelStyles.row}>
+          <View
+            style={
+              (props?.trailingIconName2 || props?.trailingComponent) &&
+              SidePanelStyles.row
+            }>
+            {props?.trailingComponent ? props.trailingComponent : null}
             {props?.trailingIconName ? (
-              <View ref={ref} collapsable={false} style={{flex: 1}}>
+              <View
+                ref={ref}
+                collapsable={false}
+                style={
+                  props?.trailingIconName2 || props?.trailingComponent
+                    ? {}
+                    : {flex: 1}
+                }>
                 <IconButton
                   hoverEffect={true}
                   hoverEffectStyle={{
@@ -116,6 +129,7 @@ export const SidePanelStyles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: $config.CARD_LAYER_3_COLOR,
     position: 'relative',
+    zIndex: 1000,
   },
   chatPadding: {
     paddingHorizontal: 16,