agora-appbuilder-core 4.1.4-beta.7 → 4.1.4

package/package.json

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

package/template/customization-api/typeDefinition.ts

@@ -94,6 +94,10 @@ export interface VideoCallInterface extends BeforeAndAfterInterface {
     title: string;
     renderComponent?: React.ComponentType;
   };
+  hostControls?: {
+    audioControl?: React.ComponentType;
+    videoControl?: React.ComponentType;
+  };
 }
 
 export type ComponentsInterface = {

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.4-beta.7',
-  CORE_VERSION: '4.1.4-beta.7',
+  CLI_VERSION: '3.1.4',
+  CORE_VERSION: '4.1.4',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/atoms/ActionMenu.tsx

@@ -49,6 +49,7 @@ export interface ActionMenuItem {
   disabled?: boolean;
   iconSize?: number;
   hide?: ToolbarItemHide;
+  type?: string;
 }
 export interface ActionMenuProps {
   from: string;
@@ -200,6 +201,7 @@ const ActionMenu = (props: ActionMenuProps) => {
         onHoverContent = undefined,
         iconSize = 20,
         titleStyle = {},
+        type = '',
       } = item;
       return (
         <PlatformWrapper key={props.from + '_' + title + index}>
@@ -232,6 +234,7 @@ const ActionMenu = (props: ActionMenuProps) => {
                     closeActionMenu={closeActionMenu}
                     targetUid={uid}
                     hostMeetingId={roomId?.host}
+                    targetUidType={type}
                   />
                 </TouchableOpacity>
               ) : (

package/template/src/atoms/UserActionMenuPreset.tsx

@@ -57,6 +57,7 @@ export type AttendeeRemoteActionKeys = 'view-in-large' | 'message-privately';
 export interface UserActionMenuDefaultItem {
   hide?: boolean;
   order?: number;
+  disabled?: boolean;
   onPress?: () => void; // replace existing logic
   onAction?: (uid?: UidType, hostMeetingId?: string) => void; // add additional logic
   visibility?: ActionVisibility[]; // to whom  custom action item should be visible , build in actions menu is already handled
@@ -64,6 +65,7 @@ export interface UserActionMenuDefaultItem {
     closeActionMenu: () => void;
     targetUid: UidType;
     hostMeetingId?: string;
+    targetUidType: string;
   }>; // to override default component or add new
 }
 export type UserActionDefaultItemsConfig = {

package/template/src/components/HostControlView.tsx

@@ -16,12 +16,13 @@ import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 import TertiaryButton from '../atoms/TertiaryButton';
 import Spacer from '../atoms/Spacer';
 import RemoteMutePopup from '../subComponents/RemoteMutePopup';
-import {calculatePosition} from '../utils/common';
+import {calculatePosition, isValidReactComponent} from '../utils/common';
 import {
   I18nMuteType,
   peoplePanelMuteAllMicBtnText,
   peoplePanelTurnoffAllCameraBtnText,
 } from '../language/default-labels/videoCallScreenLabels';
+import {useCustomization} from 'customization-implementation';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -145,17 +146,52 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
 };
 
 const HostControlView = () => {
+  const {AudioControlComponent, VideoControlComponent} = useCustomization(
+    data => {
+      let components: {
+        AudioControlComponent: React.ComponentType;
+        VideoControlComponent: React.ComponentType;
+      } = {
+        AudioControlComponent:
+          MuteAllAudioButton as React.ComponentType<MuteAllAudioButtonProps>,
+        VideoControlComponent:
+          MuteAllVideoButton as React.ComponentType<MuteAllVideoButtonProps>,
+      };
+
+      if (
+        data?.components?.videoCall?.hostControls?.audioControl &&
+        isValidReactComponent(
+          data?.components?.videoCall?.hostControls?.audioControl,
+        )
+      ) {
+        components.AudioControlComponent =
+          data?.components?.videoCall?.hostControls?.audioControl;
+      }
+
+      if (
+        data?.components?.videoCall?.hostControls?.videoControl &&
+        isValidReactComponent(
+          data?.components?.videoCall?.hostControls?.videoControl,
+        )
+      ) {
+        components.VideoControlComponent =
+          data?.components?.videoCall?.hostControls?.videoControl;
+      }
+
+      return components;
+    },
+  );
   return (
     // <View style={style.container}>
     <>
       {!$config.AUDIO_ROOM && (
         <View style={{display: 'flex', flex: 1}}>
-          <MuteAllVideoButton />
+          <VideoControlComponent />
         </View>
       )}
       <Spacer horizontal size={16} />
       <View style={{display: 'flex', flex: 1}}>
-        <MuteAllAudioButton />
+        <AudioControlComponent />
       </View>
     </>
     // </View>

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

@@ -206,8 +206,8 @@ export default function UserActionMenuOptionsOptions(
           if (!viewInLargeConfig.hide && !isPinned) {
             items.push({
               key: viewInLargeKey,
-              disabled: isOnlyOneActive,
-              order: viewInLargeConfig.order ?? 4,
+              disabled: viewInLargeConfig.disabled ?? isOnlyOneActive,
+              order: viewInLargeConfig.order ?? 0,
               icon: isPinned ? 'unpin-outlined' : 'pin-outlined',
               onHoverIcon: isPinned ? 'unpin-filled' : 'pin-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
@@ -268,8 +268,8 @@ export default function UserActionMenuOptionsOptions(
           if (!pinToTopConfig.hide) {
             items.push({
               key: pinToTopKey,
-              disabled: isOnlyOneActive,
-              order: pinToTopConfig.order ?? 0,
+              disabled: pinToTopConfig.disabled ?? isOnlyOneActive,
+              order: pinToTopConfig.order ?? 1,
               icon: isPinnedToTop ? 'unpin-outlined' : 'pin-outlined',
               onHoverIcon: isPinnedToTop ? 'unpin-filled' : 'pin-filled',
               iconColor: $config.SECONDARY_ACTION_COLOR,
@@ -359,6 +359,7 @@ export default function UserActionMenuOptionsOptions(
       if (!messageConfig.hide && $config.CHAT) {
         items.push({
           key: messageKey,
+          disabled: messageConfig.disable ?? false,
           order: messageConfig.order ?? 2,
           icon: 'chat-outlined',
           onHoverIcon: 'chat-filled',
@@ -430,6 +431,7 @@ export default function UserActionMenuOptionsOptions(
           if (!muteAudioConfig.hide) {
             items.push({
               key: muteAudioKey,
+              disabled: muteAudioConfig.disabled ?? false,
               order: muteAudioConfig.order ?? 3,
               icon: isMuted ? 'mic-off-outlined' : 'mic-on-outlined',
               onHoverIcon: isMuted ? 'mic-off-filled' : 'mic-on-filled',
@@ -456,6 +458,7 @@ export default function UserActionMenuOptionsOptions(
           if (!$config.AUDIO_ROOM && !muteVideoConfig.hide) {
             items.push({
               key: muteVideoKey,
+              disabled: muteVideoConfig.disabled ?? false,
               order: muteVideoConfig.order ?? 4,
               icon: isVideoMuted ? 'video-off-outlined' : 'video-on-outlined',
               onHoverIcon: isVideoMuted
@@ -544,7 +547,8 @@ export default function UserActionMenuOptionsOptions(
         if (!removeConfig.hide) {
           items.push({
             key: removeKey,
-            order: removeConfig.order ?? 10,
+            disabled: removeConfig.disabled ?? false,
+            order: removeConfig.order ?? 5,
             icon: 'remove-meeting',
             iconColor: $config.SEMANTIC_ERROR,
             textColor: $config.SEMANTIC_ERROR,
@@ -586,7 +590,8 @@ export default function UserActionMenuOptionsOptions(
     ) {
       items.push({
         key: changeNameKey,
-        order: changeNameConfig.order ?? 5,
+        disabled: changeNameConfig.disabled ?? false,
+        order: changeNameConfig.order ?? 6,
         icon: 'pencil-outlined',
         onHoverIcon: 'pencil-filled',
         iconColor: $config.SECONDARY_ACTION_COLOR,
@@ -635,7 +640,8 @@ export default function UserActionMenuOptionsOptions(
     ) {
       items.push({
         key: removeScreenshareKey,
-        order: removeScreenshareConfig.order ?? 10,
+        disabled: removeScreenshareConfig.disabled ?? false,
+        order: removeScreenshareConfig.order ?? 7,
         icon: 'remove-meeting',
         iconColor: $config.SEMANTIC_ERROR,
         textColor: $config.SEMANTIC_ERROR,
@@ -679,12 +685,14 @@ export default function UserActionMenuOptionsOptions(
           }
           return {
             key,
-            order: config.order ?? 99,
+            order: config.order ?? 8,
             component: config.component,
             closeActionMenu: () => {
               setActionMenuVisible(false);
             },
             uid: user.uid,
+            disabled: config.disabled ?? false,
+            type: user.type,
           };
         });
 

package/template/src/components/useUserActionMenu.tsx

@@ -1,16 +1,29 @@
 import React, {createContext, useContext, useState, useEffect} from 'react';
-import {UserActionMenuItemsConfig} from 'customization-api';
+import {
+  UidType,
+  UserActionMenuItemsConfig,
+  DispatchContext,
+  useLayout,
+} from 'customization-api';
+import {
+  getGridLayoutName,
+  getPinnedLayoutName,
+} from '../pages/video-call/DefaultLayouts';
 
 interface UserActionMenuContextType {
   userActionMenuItems: UserActionMenuItemsConfig;
   updateUserActionMenuItems: React.Dispatch<
     React.SetStateAction<UserActionMenuItemsConfig>
   >;
+  pinForEveryone: (uid: UidType) => void;
+  unPinForEveryone: () => void;
 }
 
 const UserActionMenuContext = createContext<UserActionMenuContextType>({
   userActionMenuItems: {},
   updateUserActionMenuItems: () => {},
+  pinForEveryone: () => {},
+  unPinForEveryone: () => {},
 });
 
 export const UserActionMenuProvider: React.FC<{children: React.ReactNode}> = ({
@@ -18,10 +31,33 @@ export const UserActionMenuProvider: React.FC<{children: React.ReactNode}> = ({
 }) => {
   const [userActionMenuItems, updateUserActionMenuItems] =
     useState<UserActionMenuItemsConfig>({});
+  const {dispatch} = useContext(DispatchContext);
+  const {setLayout} = useLayout();
+
+  const pinForEveryone = (uid: UidType) => {
+    dispatch({
+      type: 'UserPin',
+      value: [uid],
+    });
+    setLayout(getPinnedLayoutName());
+  };
+
+  const unPinForEveryone = () => {
+    dispatch({
+      type: 'UserPin',
+      value: [0],
+    });
+    setLayout(getGridLayoutName());
+  };
 
   return (
     <UserActionMenuContext.Provider
-      value={{userActionMenuItems, updateUserActionMenuItems}}>
+      value={{
+        userActionMenuItems,
+        updateUserActionMenuItems,
+        pinForEveryone,
+        unPinForEveryone,
+      }}>
       {children}
     </UserActionMenuContext.Provider>
   );

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

@@ -80,6 +80,11 @@ const ChatParticipants = (props: any) => {
             } else {
               const userId = i;
               const userInfo = defaultContent[userId];
+
+              // if user is not in active uids, then skip it
+              if (!activeUids.includes(userId)) {
+                return false;
+              }
               //video meeting with waiting room
               if (
                 $config.ENABLE_WAITING_ROOM &&