agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/src/components/Chat.tsx

@@ -23,12 +23,23 @@ import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
 import {useChatNotification} from './chat-notification/useChatNotification';
 import {useString} from '../utils/useString';
-import {isIOS, isValidReactComponent, isWeb} from '../utils/common';
+import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
 import {useChatUIControl} from './chat-ui/useChatUIControl';
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
+import {ChatBubbleProps} from './ChatContext';
+import {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../subComponents/ChatInput';
+
+interface ChatProps {
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+}
 
-const Chat = () => {
+const Chat = (props?: ChatProps) => {
   // commented for v1 release
   // const groupChatLabel = useString('groupChatLabel')();
   // const privateChatLabel = useString('privateChatLabel')();
@@ -93,7 +104,7 @@ const Chat = () => {
     );
   };
 
-  const {ChatAfterView, ChatBeforeView} = useFpe((data) => {
+  const {ChatAfterView, ChatBeforeView} = useCustomization((data) => {
     let components: {
       ChatAfterView: React.ComponentType;
       ChatBeforeView: React.ComponentType;
@@ -131,7 +142,7 @@ const Chat = () => {
     <>
       <View
         style={
-          isWeb
+          isWebInternal()
             ? !isSmall
               ? style.chatView
               : style.chatViewNative
@@ -190,12 +201,12 @@ const Chat = () => {
         </View>
         {groupActive ? (
           <>
-            <ChatContainer privateActive={privateActive} />
+            <ChatContainer {...props} />
             <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
             <View>
               <View style={style.chatInputContainer}>
                 <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
-                <ChatInput />
+                <ChatInput {...props} />
               </View>
             </View>
           </>
@@ -205,7 +216,7 @@ const Chat = () => {
               <ChatParticipants selectUser={selectUser} />
             ) : (
               <>
-                <ChatContainer selectPrivate={selectPrivate} />
+                <ChatContainer {...props} />
                 <View
                   style={[style.chatInputLineSeparator, {marginBottom: 0}]}
                 />
@@ -214,7 +225,7 @@ const Chat = () => {
                     <View
                       style={[style.chatInputLineSeparator, {opacity: 0.3}]}
                     />
-                    <ChatInput />
+                    <ChatInput {...props} />
                   </View>
                 </View>
               </>
@@ -340,7 +351,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     left: 25,
@@ -354,7 +365,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     right: 20,

package/template/src/components/ChatContext.ts

@@ -16,51 +16,36 @@ import {createContext, SetStateAction} from 'react';
 export interface ChatBubbleProps {
   isLocal: boolean;
   message: string;
-  timestamp: string;
+  createdTimestamp: string;
+  updatedTimestamp?: string;
   uid: UidType;
+  msgId: string;
+  isDeleted: boolean;
   render?: (
     isLocal: boolean,
     message: string,
-    timestamp: string,
+    createdTimestamp: string,
     uid: UidType,
+    msgId: string,
+    isDeleted: boolean,
+    updatedTimestamp?: string,
   ) => JSX.Element;
 }
 
 export interface messageStoreInterface {
-  ts: string;
+  createdTimestamp: string;
+  updatedTimestamp?: string;
   uid: UidType;
   msg: string;
 }
 
-export interface messageEventInterface extends messageStoreInterface {
-  type: messageActionType;
-  source: messageSourceType;
-}
-
-export enum messageSourceType {
-  Core = 'core',
-}
-
-export enum messageChannelType {
-  Private = 'private',
-  Public = 'public',
-}
-
 export enum messageActionType {
   Control = '0',
   Normal = '1',
 }
 
-export enum attrRequestTypes {
-  none = 'NONE',
-}
-
 export interface chatContext {
   hasUserJoinedRTM: boolean;
-  sendMessage: (msg: string) => void;
-  sendMessageToUid: (msg: string, uid: number | string) => void;
-  sendControlMessage: (msg: string) => void;
-  sendControlMessageToUid: (msg: string, uid: number) => void;
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
@@ -72,8 +57,6 @@ export enum controlMessageEnum {
   muteSingleVideo = '3',
   muteSingleAudio = '4',
   kickUser = '5',
-  cloudRecordingActive = '6',
-  cloudRecordingUnactive = '7',
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/Controls.native.tsx

@@ -32,7 +32,9 @@ import LocalSwitchCamera, {
 } from '../subComponents/LocalSwitchCamera';
 
 const Controls = () => {
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   const {rtcProps} = useContext(PropsContext);
 
   return (
@@ -54,17 +56,21 @@ const Controls = () => {
           <View style={{alignSelf: 'center'}}>
             <LocalAudioMute />
           </View>
-          <View style={{alignSelf: 'center'}}>
-            <LocalVideoMute />
-          </View>
+          {!$config.AUDIO_ROOM && (
+            <View style={{alignSelf: 'center'}}>
+              <LocalVideoMute />
+            </View>
+          )}
           {isHost && $config.CLOUD_RECORDING && (
             <View style={{alignSelf: 'baseline'}}>
               <Recording />
             </View>
           )}
-          <View style={{alignSelf: 'center'}}>
-            <LocalSwitchCamera />
-          </View>
+          {!$config.AUDIO_ROOM && (
+            <View style={{alignSelf: 'center'}}>
+              <LocalSwitchCamera />
+            </View>
+          )}
         </>
       )}
       <View style={{alignSelf: 'center'}}>

package/template/src/components/Controls.tsx

@@ -31,7 +31,7 @@ import {ClientRole} from '../../agora-rn-uikit';
 import LiveStreamControls, {
   LiveStreamControlsProps,
 } from './livestream/views/LiveStreamControls';
-import {isIOS, isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
 
@@ -47,8 +47,9 @@ const Controls = () => {
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isDesktop = dim[0] > 1224;
-  const {isHost} = useMeetingInfo();
-
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   return (
     <View
       style={[
@@ -76,10 +77,12 @@ const Controls = () => {
           <View style={{alignSelf: 'center'}}>
             <LocalAudioMute />
           </View>
-          <View style={{alignSelf: 'center'}}>
-            <LocalVideoMute />
-          </View>
-          {isMobileOrTablet() && (
+          {!$config.AUDIO_ROOM && (
+            <View style={{alignSelf: 'center'}}>
+              <LocalVideoMute />
+            </View>
+          )}
+          {!$config.AUDIO_ROOM && isMobileOrTablet() && (
             <View style={{alignSelf: 'center'}}>
               <LocalSwitchCamera />
             </View>
@@ -103,7 +106,7 @@ const Controls = () => {
   );
 };
 
-export const ControlsComponentsArray: [
+type ControlsComponentsArrayProps = [
   (props: LocalAudioMuteProps) => JSX.Element,
   (props: LocalVideoMuteProps) => JSX.Element,
   (props: LocalSwitchCameraProps) => JSX.Element,
@@ -111,7 +114,9 @@ export const ControlsComponentsArray: [
   (props: RecordingButtonProps) => JSX.Element,
   (props: LocalEndcallProps) => JSX.Element,
   (props: LiveStreamControlsProps) => JSX.Element,
-] = [
+];
+
+export const ControlsComponentsArray: ControlsComponentsArrayProps = [
   LocalAudioMute,
   LocalVideoMute,
   LocalSwitchCamera,
@@ -124,23 +129,9 @@ export const ControlsComponentsArray: [
 const style = StyleSheet.create({
   // @ts-ignore
   controlsHolder: {
-    flex: isWeb ? 1.3 : 1.6,
+    flex: isWebInternal() ? 1.3 : 1.6,
     ...controlsHolder,
   },
-  chatNotification: {
-    width: 20,
-    height: 20,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
-    borderRadius: 10,
-    position: 'absolute',
-    left: 25,
-    top: -10,
-  },
 });
 
 export default Controls;

package/template/src/components/DeviceConfigure.tsx

@@ -9,10 +9,11 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect, useCallback} from 'react';
-import {RtcContext, ClientRole} from '../../agora-rn-uikit';
+import React, {useState, useEffect, useCallback} from 'react';
+import {ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 import AgoraRTC from 'agora-rtc-sdk-ng';
+import {useRtc} from 'customization-api';
 
 interface Props {
   userRole: ClientRole;
@@ -33,7 +34,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const [selectedCam, setSelectedCam] = useState('');
   const [selectedMic, setSelectedMic] = useState('');
   const [deviceList, setDeviceList] = useState<any>([]);
-  const rtc = useContext(RtcContext);
+  const rtc = useRtc();
 
   const refreshDevices = useCallback(async () => {
     rtc.RtcEngine.getDevices(function (devices: deviceInfo[]) {

package/template/src/components/EventsConfigure.tsx

@@ -0,0 +1,54 @@
+/*
+********************************************
+ Copyright © 2022 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext, useEffect} from 'react';
+import {RtcContext} from '../../agora-rn-uikit';
+import events from '../rtm-events-api';
+import {controlMessageEnum} from '../components/ChatContext';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const EventsConfigure: React.FC<Props> = (props) => {
+  const {RtcEngine, dispatch} = useContext(RtcContext);
+  useEffect(() => {
+    events.on(controlMessageEnum.muteVideo, () => {
+      RtcEngine.muteLocalVideoStream(true);
+      dispatch({
+        type: 'LocalMuteVideo',
+        value: [0],
+      });
+    });
+    events.on(controlMessageEnum.muteAudio, () => {
+      RtcEngine.muteLocalAudioStream(true);
+      dispatch({
+        type: 'LocalMuteAudio',
+        value: [0],
+      });
+    });
+    events.on(controlMessageEnum.kickUser, () => {
+      dispatch({
+        type: 'EndCall',
+        value: [],
+      });
+    });
+    return () => {
+      events.off(controlMessageEnum.muteVideo);
+      events.off(controlMessageEnum.muteAudio);
+      events.off(controlMessageEnum.kickUser);
+    };
+  }, []);
+
+  return <>{props.children}</>;
+};
+
+export default EventsConfigure;

package/template/src/components/GridVideo.tsx

@@ -9,11 +9,10 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {layoutComponent} from 'fpe-api';
-import React, {useMemo, useContext, useState} from 'react';
+import {layoutComponent, useRtc} from 'customization-api';
+import React, {useMemo, useState} from 'react';
 import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
-import {isWeb} from '../utils/common';
-import {RtcContext} from '../../agora-rn-uikit';
+import {isWebInternal} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
 const layout = (len: number, isDesktop: boolean = true) => {
@@ -35,7 +34,7 @@ const layout = (len: number, isDesktop: boolean = true) => {
 };
 
 const GridVideo: layoutComponent = ({renderData}) => {
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useRtc();
   let onLayout = (e: any) => {
     setDim([
       e.nativeEvent.layout.width,
@@ -74,7 +73,7 @@ const GridVideo: layoutComponent = ({renderData}) => {
                 setPinnedLayout();
               }}
               style={{
-                flex: isWeb ? 1 / dims.c : 1,
+                flex: isWebInternal() ? 1 / dims.c : 1,
                 marginHorizontal: 'auto',
               }}
               key={cidx}>

package/template/src/components/HostControlView.tsx

@@ -11,27 +11,21 @@
 */
 import React from 'react';
 import {View, Text, StyleSheet} from 'react-native';
-import {controlMessageEnum} from './ChatContext';
 import SecondaryButton from '../atoms/SecondaryButton';
 import {useString} from '../utils/useString';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 
 export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
-  const sendCtrlMsg = useSendControlMessage();
+  const muteRemoteAudio = useRemoteMute();
   //commented for v1 release
   //const muteAllAudioButton = useString('muteAllAudioButton')();
   const muteAllAudioButton = 'Mute all audios';
-  const onPress = () =>
-    sendCtrlMsg(
-      CONTROL_MESSAGE_TYPE.controlMessageToEveryOne,
-      controlMessageEnum.muteAudio,
-    );
+  const onPress = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
+
   return props?.render ? (
     props.render(onPress)
   ) : (
@@ -43,15 +37,13 @@ export interface MuteAllVideoButtonProps {
   render?: (onPress: () => void) => JSX.Element;
 }
 export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
-  const sendCtrlMsg = useSendControlMessage();
+  const muteRemoteVideo = useRemoteMute();
+
   //commented for v1 release
   //const muteAllVideoButton = useString('muteAllVideoButton')();
   const muteAllVideoButton = 'Mute all videos';
-  const onPress = () =>
-    sendCtrlMsg(
-      CONTROL_MESSAGE_TYPE.controlMessageToEveryOne,
-      controlMessageEnum.muteVideo,
-    );
+  const onPress = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
+
   return props?.render ? (
     props.render(onPress)
   ) : (
@@ -70,9 +62,11 @@ const HostControlView = () => {
         <View style={style.btnContainer}>
           <MuteAllAudioButton />
         </View>
-        <View style={style.btnContainer}>
-          <MuteAllVideoButton />
-        </View>
+        {!$config.AUDIO_ROOM && (
+          <View style={style.btnContainer}>
+            <MuteAllVideoButton />
+          </View>
+        )}
       </View>
     </>
   );