agora-appbuilder-core 2.3.0-beta.2 → 2.3.0-beta.22

package/template/fpe-api/typeDefinition.ts

@@ -19,6 +19,7 @@ import {
 } from '../agora-rn-uikit';
 import {i18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
+export type {RenderInterface, RenderStateInterface, UidType};
 export type {
   ChatTextInputProps,
   ChatSendButtonProps,
@@ -45,7 +46,9 @@ export interface PreCallInterface extends BeforeAndAfterInterface {
   joinButton?: React.ComponentType;
   textBox?: React.ComponentType;
 }
-export interface ChatCmpInterface extends BeforeAndAfterInterface {
+export interface ChatCmpInterface {
+  //commented for v1 release
+  //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
   chatInput?: React.ComponentType<ChatTextInputProps>;
   chatSentButton?: React.ComponentType<ChatSendButtonProps>;
@@ -81,14 +84,14 @@ export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
 
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  //topBar?: React.ComponentType;
+  topBar?: React.ComponentType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   bottomBar?: React.ComponentType;
-  // commented for v1 release
-  //chat?: ChatCmpInterface;
+  chat?: ChatCmpInterface;
   customContent?: renderComponentObjectInterface;
   customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
+  useUserContext?: () => void;
 }
 
 export type ComponentsInterface = {
@@ -138,6 +141,4 @@ export interface FpeApiInterface {
   //   useBeforeJoin?: CustomHookType;
   //   useBeforeCreate?: CustomHookType;
   // };
-  // commented for v1 release
-  //customUserContext?: () => any;
 }

package/template/fpe-api/utils.ts

@@ -15,38 +15,36 @@ export {default as useIsHost} from '../src/utils/isHostUser';
 export {default as useIsAttendee} from '../src/utils/IsAttendeeUser';
 export {default as useIsPSTN} from '../src/utils/isPSTNUser';
 export {default as useUserList} from '../src/utils/useUserList';
-// commented for v1 release
-//export {default as useGroupMessages} from '../src/utils/useGroupMessages';
-//export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
+export {default as useGroupMessages} from '../src/utils/useGroupMessages';
+export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
 export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
 export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
 export {default as useSetName} from '../src/utils/useSetName';
 export {default as useGetName} from '../src/utils/useGetName';
-// commented for v1 release
-//export {useSidePanel} from '../src/utils/useSidePanel';
-// commented for v1 release
-// export {
-//   default as useUnreadMessageCount,
-//   UNREAD_MESSAGE_COUNT_TYPE,
-// } from '../src/utils/useUnreadMessageCount';
-// export {
-//   default as useSetUnreadMessageCount,
-//   SET_UNREAD_MESSAGE_COUNT_TYPE,
-// } from '../src/utils/useSetUnreadMessageCount';
+export {useSidePanel} from '../src/utils/useSidePanel';
+export {
+  default as useUnreadMessageCount,
+  UNREAD_MESSAGE_COUNT_TYPE,
+} from '../src/utils/useUnreadMessageCount';
+export {
+  default as useSetUnreadMessageCount,
+  SET_UNREAD_MESSAGE_COUNT_TYPE,
+} from '../src/utils/useSetUnreadMessageCount';
 export {default as useNavigateTo} from '../src/utils/useNavigateTo';
 export {default as useNavParams} from '../src/utils/useNavParams';
 export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
 export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
-// commented for v1 release
-// export {
-//   default as useSendMessage,
-//   MESSAGE_TYPE,
-// } from '../src/utils/useSendMessage';
-// export {controlMessageEnum} from '../src/components/ChatContext';
-// export {
-//   default as useSendControlMessage,
-//   CONTROL_MESSAGE_TYPE,
-// } from '../src/utils/useSendControlMessage';
+export {
+  default as useSendMessage,
+  MESSAGE_TYPE,
+} from '../src/utils/useSendMessage';
+export {default as useEditMessage} from '../src/utils/useEditMessage';
+export {default as useDeleteMessage} from '../src/utils/useDeleteMessage';
+export {controlMessageEnum} from '../src/components/ChatContext';
+export {
+  default as useSendControlMessage,
+  CONTROL_MESSAGE_TYPE,
+} from '../src/utils/useSendControlMessage';
 export {
   MUTE_LOCAL_TYPE,
   default as useMuteToggleLocal,
@@ -59,4 +57,13 @@ export {
 export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
 
 //export common function
-export * from '../src/utils/common';
+export {
+  hasBrandLogo,
+  isAndroid,
+  isArray,
+  isIOS,
+  isValidReactComponent,
+  isWeb,
+  shouldAuthenticate,
+} from '../src/utils/common';
+export {useLocalUid} from '../agora-rn-uikit';

package/template/global.d.ts

@@ -75,9 +75,10 @@ interface ConfigInterface {
   RAISE_HAND: boolean;
   GEO_FENCING: boolean;
   LOG_ENABLED: boolean;
+  AUDIO_ROOM: boolean;
 }
 declare var $config: ConfigInterface;
-declare module 'test-fpe'{
-  const data:{}
+declare module 'test-fpe' {
+  const data: {};
   export default data;
 }

package/template/index.rsdk.tsx

@@ -12,16 +12,27 @@
 /**
  * @format
  */
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
 import React from 'react';
+import * as RN from 'react-native-web';
+import jsonFile from './config.json';
+
 export * from 'fpe-api';
+export * from 'fpe-implementation';
 
 interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
   View: React.FC;
 }
 
 const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
-    ...AppBuilderSdkApi,
-    View: SDKAppWrapper,
-  }
+  ...AppBuilderSdkApi,
+  View: SDKAppWrapper,
+};
+
+let config: ConfigInterface = jsonFile as unknown as ConfigInterface;
+
+export {React, RN, config};
 export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -1,9 +1,16 @@
 import {AppRegistry} from 'react-native';
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
+import React from 'react';
+import * as RN from 'react-native-web';
+import jsonFile from './config.json';
+
 export * from 'fpe-api';
+export * from 'fpe-implementation';
 
-interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
-}
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
 
 const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
 
@@ -24,4 +31,7 @@ class AppBuilder extends HTMLElement {
 
 customElements.define('app-builder', AppBuilder);
 
+let config: ConfigInterface = jsonFile as unknown as ConfigInterface;
+
+export {React, RN, config};
 export default AppBuilderWebSdkApi;

package/template/package.json

@@ -18,7 +18,6 @@
     "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
     "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
     "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
-    "react-sdk-esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
     "electron:start": "cross-env NODE_ENV=development gulp electron_development",
     "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
@@ -32,7 +31,9 @@
     "icons:android": "react-native set-icon --path ./build/icon.png",
     "icons:ios": "react-native set-icon --path ./build/icon.png",
     "package:mac": "npm run mac:build && electron-builder --publish=always",
-    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js "
+    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js ",
+    "make-rsdk-ts-defs": "cross-env TARGET=rsdk NODE_ENV=production gulp makeRsdkTsDefs",
+    "make-wsdk-ts-defs": "cross-env TARGET=wsdk NODE_ENV=production gulp makeWsdkTsDefs"
   },
   "publish": [
     {
@@ -61,6 +62,7 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
+    "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",

package/template/react-native-toast-message/src/index.js

@@ -353,14 +353,14 @@ class Toast extends Component {
 
     const translateY = animation.interpolate({
       inputRange: [0, 1, 2],
-      outputRange: [0, 1, 0]
+      outputRange
     });
 
     return [
       styles.base,
       styles[position],
       {
-        opacity: translateY
+        transform: [{ translateY }]
       }
     ];
   }
@@ -378,11 +378,7 @@ class Toast extends Component {
       <Animated.View
         testID='animatedView'
         onLayout={this.onLayout}
-        style={[
-          baseStyle,
-          style,
-          { zIndex: 100, display: this.state.isVisible || this.state.inProgress ? 'flex' : 'none' }
-        ]} //added zindex
+        style={[baseStyle, style, { zIndex: 100 }]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}
       </Animated.View>

package/template/react-native-toast-message/src/{index.wsdk.js → index.sdk.tsx}

@@ -381,7 +381,7 @@ class Toast extends Component {
         style={[
           baseStyle,
           style,
-          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none', backgroundColor:'red' }
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none' }
         ]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}

package/template/react-native-toast-message/src/styles.sdk.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  base: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    right: 0
+  },
+  top: {
+    top: 30
+  },
+  bottom: {
+    bottom: 0
+  }
+});

package/template/src/SDKAppWrapper.tsx

@@ -50,7 +50,7 @@ const SDKAppWrapper = () => {
   const [fpe, setFpe] = useState(fpeConfig);
   useEffect(() => {
     SDKEvents.on('addFpe', (sdkFpeConfig) => {
-      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      console.log('SDKEvents: addFpe event called');
       setFpe(sdkFpeConfig);
     });
     // Join event consumed in Create.tsx

package/template/src/components/Chat.tsx

@@ -27,8 +27,17 @@ import {isIOS, isValidReactComponent, isWeb} from '../utils/common';
 import {useChatUIControl} from './chat-ui/useChatUIControl';
 import {useFpe} from 'fpe-api';
 import {UidType} from '../../agora-rn-uikit';
+import {ChatBubbleProps} from './ChatContext';
+import {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../subComponents/ChatInput';
 
-const Chat = () => {
+const Chat = (props?: {
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+}) => {
   // commented for v1 release
   // const groupChatLabel = useString('groupChatLabel')();
   // const privateChatLabel = useString('privateChatLabel')();
@@ -59,6 +68,15 @@ const Chat = () => {
 
   const {primaryColor} = useContext(ColorContext);
 
+  React.useEffect(() => {
+    return () => {
+      // reset both the active tabs
+      setGroupActive(false);
+      setPrivateActive(false);
+      setSelectedUser(0);
+    };
+  }, []);
+
   const selectGroup = () => {
     setPrivateActive(false);
     setGroupActive(true);
@@ -181,12 +199,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>
           </>
@@ -196,7 +214,7 @@ const Chat = () => {
               <ChatParticipants selectUser={selectUser} />
             ) : (
               <>
-                <ChatContainer selectPrivate={selectPrivate} />
+                <ChatContainer {...props} />
                 <View
                   style={[style.chatInputLineSeparator, {marginBottom: 0}]}
                 />
@@ -205,7 +223,7 @@ const Chat = () => {
                     <View
                       style={[style.chatInputLineSeparator, {opacity: 0.3}]}
                     />
-                    <ChatInput />
+                    <ChatInput {...props} />
                   </View>
                 </View>
               </>

package/template/src/components/ChatContext.ts

@@ -16,12 +16,25 @@ 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,
+    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;
 }
@@ -58,8 +71,6 @@ export interface chatContext {
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
-  displayName: string;
-  setDisplayName: React.Dispatch<SetStateAction<string>>;
 }
 
 export enum controlMessageEnum {

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

@@ -54,17 +54,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

@@ -76,10 +76,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>

package/template/src/components/HostControlView.tsx

@@ -70,9 +70,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>
     </>
   );

package/template/src/components/Navbar.tsx

@@ -364,7 +364,7 @@ const Navbar = () => {
             }
           : {},
       ]}>
-      {isRecordingActive && !isMobileOrTablet() ? (
+      {isRecordingActive ? (
         <View
           style={[
             style.recordingView,
@@ -379,17 +379,19 @@ const Navbar = () => {
             }}
             color="#FD0845"
           />
-          <Text
-            style={{
-              fontSize: isWeb ? 16 : 12,
-              color: '#FD0845',
-              fontWeight: '400',
-              alignSelf: 'center',
-              textAlign: 'center',
-              flex: 1,
-            }}>
-            {recordingLabel}
-          </Text>
+          {!isMobileOrTablet() && (
+            <Text
+              style={{
+                fontSize: isWeb ? 16 : 12,
+                color: '#FD0845',
+                fontWeight: '400',
+                alignSelf: 'center',
+                textAlign: 'center',
+                flex: 1,
+              }}>
+              {recordingLabel}
+            </Text>
+          )}
         </View>
       ) : (
         <></>
@@ -517,7 +519,7 @@ const style = StyleSheet.create({
     height: 35,
     maxHeight: 30,
     position: 'absolute',
-    left: 10,
+    left: isMobileOrTablet() ? '50%' : 10,
     paddingHorizontal: 5,
     flexDirection: 'row',
     alignItems: 'center',