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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.4-beta.7",
+  "version": "4.1.4-beta.8",
   "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-beta.8',
+  CORE_VERSION: '4.1.4-beta.8',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

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/useUserActionMenu.tsx

@@ -1,16 +1,30 @@
 import React, {createContext, useContext, useState, useEffect} from 'react';
-import {UserActionMenuItemsConfig} from 'customization-api';
+import {
+  UidType,
+  UserActionMenuItemsConfig,
+  DispatchContext,
+  useLayout,
+} from 'customization-api';
+import {
+  DefaultLayouts,
+  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 +32,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/pages/video-call/VideoCallScreenWrapper.tsx

@@ -9,6 +9,7 @@ import WhiteboardConfigure from '../../components/whiteboard/WhiteboardConfigure
 import ChatConfigure from '../../components/chat/chatConfigure';
 import {useControlPermissionMatrix} from '../../components/controls/useControlPermissionMatrix';
 import {useContent, useEndCall} from 'customization-api';
+import RTMEngine from '../../../src/rtm/RTMEngine';
 
 const VideoCallScreenWithRecordingBot: React.FC = () => {
   const location = useLocation();
@@ -31,7 +32,10 @@ const VideoCallScreenWrapper: React.FC = () => {
 
   useEffect(() => {
     if (isUserBaned) {
-      endCall();
+      RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
+      setTimeout(() => {
+        endCall();
+      }, 0);
     }
   }, [isUserBaned]);