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

package/package.json

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

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.3",
+  CORE_VERSION: "4.1.19-beta.3",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

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/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