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

package/template/src/SDKAppWrapper.tsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useState} from 'react';
+import {fpeConfig, FpeProvider, FpeApiInterface} from 'fpe-api';
+import {installFPE as createFPE} from 'fpe-api/install';
+import SDKEvents from './utils/SdkEvents';
+import App from './App';
+
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: string,
+  ) => void;
+  preJoin: (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
+  ) => void;
+}
+
+export interface AppBuilderSdkApiInterface {
+  addFPE: (fpe: FpeApiInterface) => void;
+  createFPE: (fpe: FpeApiInterface) => FpeApiInterface;
+  joinMeeting: (joinPhrase: string) => void;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    callBack: userEventsMapInterface[T],
+  ) => void;
+  off: (userEventName: keyof userEventsMapInterface) => void;
+}
+
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  addFPE: (fpeConfig: FpeApiInterface) => {
+    SDKEvents.emit('addFpe', fpeConfig);
+  },
+  joinMeeting: (joinPhrase: string) => {
+    SDKEvents.emit('joinMeetingWithPhrase', joinPhrase);
+  },
+  createFPE,
+  on: (userEventName, cb) => {
+    SDKEvents.on(userEventName, cb);
+  },
+  off: (userEventName) => {
+    SDKEvents.off(userEventName);
+  },
+};
+
+const SDKAppWrapper = () => {
+  const [fpe, setFpe] = useState(fpeConfig);
+  useEffect(() => {
+    SDKEvents.on('addFpe', (sdkFpeConfig) => {
+      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      setFpe(sdkFpeConfig);
+    });
+    // Join event consumed in Create.tsx
+  }, []);
+  return (
+    <>
+      <FpeProvider value={fpe}>
+        <App />
+      </FpeProvider>
+    </>
+  );
+};
+
+export default SDKAppWrapper;

package/template/src/atoms/PrimaryButton.tsx

@@ -35,14 +35,20 @@ export default function PrimaryButton(props: ButtonProps) {
         {backgroundColor: props.disabled ? primaryColor + '80' : primaryColor},
       ]}
       {...otherProps}>
-      {props.text ? (
-        <Text style={[styles.primaryButtonText as StyleProp<TextStyle>, {color: '#fff'}]}>
-          {props.text}
-        </Text>
-      ) : (
-        <></>
-      )}
-      {children}
+      <>
+        {props.text ? (
+          <Text
+            style={[
+              styles.primaryButtonText as StyleProp<TextStyle>,
+              {color: '#fff'},
+            ]}>
+            {props.text}
+          </Text>
+        ) : (
+          <></>
+        )}
+        {children}
+      </>
     </Pressable>
   );
 }

package/template/src/atoms/TextInput.tsx

@@ -11,6 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
+import {isWeb} from '../utils/common';
 import {textInput} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
@@ -19,7 +20,13 @@ const PrimaryButton = (props: TextInputProps) => {
   const {style, ...otherProps} = props;
   return (
     <TextInput
-      style={[styles.textInput, styles.textWrapFix, style, styles.noOutline, {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR}]}
+      style={[
+        styles.textInput,
+        styles.textWrapFix,
+        style,
+        styles.noOutline,
+        {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR},
+      ]}
       placeholderTextColor={$config.PRIMARY_FONT_COLOR + '70'}
       {...otherProps}
       autoCorrect={false}
@@ -31,10 +38,11 @@ export default PrimaryButton;
 
 const styles = StyleSheet.create({
   textInput,
-  noOutline: Platform.OS === 'web' ? { outlineStyle: "none" } : {},
+  // @ts-ignore
+  noOutline: isWeb ? {outlineStyle: 'none'} : {},
   textWrapFix: Platform.select({
     ios: {
-      paddingVertical: 5
-    }
-  })
+      paddingVertical: 5,
+    },
+  }),
 });

package/template/src/components/Chat.tsx

@@ -9,25 +9,31 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
+import React, {useState, useContext} from 'react';
 import {
   View,
-  Platform,
   Text,
   StyleSheet,
   TouchableOpacity,
   Dimensions,
-  useWindowDimensions,
 } from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
 import ChatContainer from '../subComponents/ChatContainer';
 import ChatInput from '../subComponents/ChatInput';
 import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
-import chatContext from './ChatContext';
+import {useChatNotification} from './chat-notification/useChatNotification';
+import {useString} from '../utils/useString';
+import {isIOS, isValidReactComponent, isWeb} from '../utils/common';
+import {useChatUIControl} from './chat-ui/useChatUIControl';
+import {useFpe} from 'fpe-api';
+import {UidType} from '../../agora-rn-uikit';
 
-const Chat = (props: any) => {
-  const {height, width} = useWindowDimensions();
+const Chat = () => {
+  // commented for v1 release
+  // const groupChatLabel = useString('groupChatLabel')();
+  // const privateChatLabel = useString('privateChatLabel')();
+  const groupChatLabel = 'Group';
+  const privateChatLabel = 'Private';
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
@@ -35,154 +41,180 @@ const Chat = (props: any) => {
   ]);
   const isSmall = dim[0] < 700;
 
-  const {userList} = useContext(chatContext);
-
   const {
-    setChatDisplayed,
-    pendingPrivateNotification,
-    pendingPublicNotification,
-    lastCheckedPrivateState,
-    privateMessageCountMap,
-    setPrivateMessageLastSeen,
-    setPrivateChatDisplayed,
-  } = props;
-  const {primaryColor} = useContext(ColorContext);
-  const [groupActive, setGroupActive] = useState(true);
-  const [privateActive, setPrivateActive] = useState(false);
-  const [selectedUserID, setSelectedUser] = useState('');
-
-  //Initally private state should be false
-  useEffect(() => {
-    setPrivateChatDisplayed(false);
-  }, []);
+    groupActive,
+    setGroupActive,
+    privateActive,
+    setPrivateActive,
+    setSelectedChatUserId: setSelectedUser,
+  } = useChatUIControl();
+  const {
+    unreadGroupMessageCount,
+    setUnreadGroupMessageCount,
+    unreadPrivateMessageCount,
+    setUnreadPrivateMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadIndividualMessageCount,
+  } = useChatNotification();
 
-  useEffect(() => {
-    if (privateActive && selectedUserID) {
-      setPrivateMessageLastSeen({
-        userId: selectedUserID,
-        lastSeenCount: privateMessageCountMap[selectedUserID],
-      });
-    }
-  }, [pendingPrivateNotification]);
+  const {primaryColor} = useContext(ColorContext);
 
   const selectGroup = () => {
     setPrivateActive(false);
     setGroupActive(true);
-    setPrivateChatDisplayed(false);
+    setUnreadGroupMessageCount(0);
+    setSelectedUser(0);
   };
   const selectPrivate = () => {
     setGroupActive(false);
-    setPrivateChatDisplayed(true);
+    setSelectedUser(0);
+    setPrivateActive(false);
   };
-  const selectUser = (userUID: any) => {
+  const selectUser = (userUID: UidType) => {
     setSelectedUser(userUID);
     setPrivateActive(true);
+    setUnreadIndividualMessageCount((prevState) => {
+      return {
+        ...prevState,
+        [userUID]: 0,
+      };
+    });
+    setUnreadPrivateMessageCount(
+      unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
+    );
   };
 
+  const {ChatAfterView, ChatBeforeView} = useFpe((data) => {
+    let components: {
+      ChatAfterView: React.ComponentType;
+      ChatBeforeView: React.ComponentType;
+    } = {
+      ChatAfterView: React.Fragment,
+      ChatBeforeView: React.Fragment,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.chat &&
+      //   typeof data?.components?.videoCall?.chat === 'object'
+      // ) {
+      //   if (
+      //     data?.components?.videoCall?.chat?.after &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.after)
+      //   ) {
+      //     components.ChatAfterView = data?.components?.videoCall?.chat?.after;
+      //   }
+      //   if (
+      //     data?.components?.videoCall?.chat?.before &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.before)
+      //   ) {
+      //     components.ChatBeforeView = data?.components?.videoCall?.chat?.before;
+      //   }
+      // }
+    }
+    return components;
+  });
+
   return (
-    <View
-      style={
-        Platform.OS === 'web'
-          ? !isSmall
-            ? style.chatView
+    <>
+      <View
+        style={
+          isWeb
+            ? !isSmall
+              ? style.chatView
+              : style.chatViewNative
             : style.chatViewNative
-          : style.chatViewNative
-      }>
-      <View style={style.chatNav}>
-        <TouchableOpacity
-          onPress={selectGroup}
-          style={
-            groupActive
-              ? [style.groupActive, {borderColor: primaryColor}]
-              : [
-                  style.group,
-                  {
-                    borderColor: primaryColor,
-                    borderTopColor: primaryColor + '80',
-                  },
-                ]
-          }>
-          {pendingPublicNotification !== 0 ? (
-            <View style={style.chatNotification}>
-              <Text>{pendingPublicNotification}</Text>
-            </View>
-          ) : null}
-          <Text style={groupActive ? style.groupTextActive : style.groupText}>
-            Group
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={selectPrivate}
-          style={
-            !groupActive
-              ? [style.privateActive, {borderColor: primaryColor}]
-              : [
-                  style.private,
-                  {
-                    borderColor: primaryColor,
-                    borderTopColor: primaryColor + '80',
-                  },
-                ]
-          }>
-          {pendingPrivateNotification !== 0 ? (
-            <View style={style.chatNotification}>
-              <Text>{pendingPrivateNotification}</Text>
-            </View>
-          ) : null}
-          <Text style={!groupActive ? style.groupTextActive : style.groupText}>
-            Private
-          </Text>
-        </TouchableOpacity>
-      </View>
-      {groupActive ? (
-        <>
-          <ChatContainer privateActive={privateActive} />
-          <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-          <View>
-            <View style={style.chatInputContainer}>
-              <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
-              <ChatInput privateActive={privateActive} />
+        }>
+        {/**
+         * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
+         */}
+        <ChatBeforeView />
+        <View style={style.chatNav}>
+          <TouchableOpacity
+            onPress={selectGroup}
+            style={
+              groupActive
+                ? [style.groupActive, {borderColor: primaryColor}]
+                : [
+                    style.group,
+                    {
+                      borderColor: primaryColor,
+                      borderTopColor: primaryColor + '80',
+                    },
+                  ]
+            }>
+            {unreadGroupMessageCount !== 0 ? (
+              <View style={style.chatNotification}>
+                <Text>{unreadGroupMessageCount}</Text>
+              </View>
+            ) : null}
+            <Text style={groupActive ? style.groupTextActive : style.groupText}>
+              {groupChatLabel}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={selectPrivate}
+            style={
+              !groupActive
+                ? [style.privateActive, {borderColor: primaryColor}]
+                : [
+                    style.private,
+                    {
+                      borderColor: primaryColor,
+                      borderTopColor: primaryColor + '80',
+                    },
+                  ]
+            }>
+            {unreadPrivateMessageCount !== 0 ? (
+              <View style={style.chatNotification}>
+                <Text>{unreadPrivateMessageCount}</Text>
+              </View>
+            ) : null}
+            <Text
+              style={!groupActive ? style.groupTextActive : style.groupText}>
+              {privateChatLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        {groupActive ? (
+          <>
+            <ChatContainer privateActive={privateActive} />
+            <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
+            <View>
+              <View style={style.chatInputContainer}>
+                <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
+                <ChatInput />
+              </View>
             </View>
-          </View>
-        </>
-      ) : (
-        <>
-          {!privateActive ? (
-            <ChatParticipants
-              selectUser={selectUser}
-              setPrivateMessageLastSeen={setPrivateMessageLastSeen}
-              privateMessageCountMap={privateMessageCountMap}
-              lastCheckedPrivateState={lastCheckedPrivateState}
-            />
-          ) : (
-            <>
-              <ChatContainer
-                privateActive={privateActive}
-                setPrivateActive={setPrivateActive}
-                selectedUserID={selectedUserID}
-                selectedUsername={
-                  userList[selectedUserID]
-                    ? userList[selectedUserID]?.name + ' '
-                    : 'User '
-                }
-              />
-              <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-              <View>
-                <View style={style.chatInputContainer}>
-                  <View
-                    style={[style.chatInputLineSeparator, {opacity: 0.3}]}
-                  />
-                  <ChatInput
-                    privateActive={privateActive}
-                    selectedUserID={selectedUserID}
-                  />
+          </>
+        ) : (
+          <>
+            {!privateActive ? (
+              <ChatParticipants selectUser={selectUser} />
+            ) : (
+              <>
+                <ChatContainer selectPrivate={selectPrivate} />
+                <View
+                  style={[style.chatInputLineSeparator, {marginBottom: 0}]}
+                />
+                <View>
+                  <View style={style.chatInputContainer}>
+                    <View
+                      style={[style.chatInputLineSeparator, {opacity: 0.3}]}
+                    />
+                    <ChatInput />
+                  </View>
                 </View>
-              </View>
-            </>
-          )}
-        </>
-      )}
-    </View>
+              </>
+            )}
+          </>
+        )}
+        <ChatAfterView />
+      </View>
+    </>
   );
 };
 
@@ -299,7 +331,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     left: 25,
@@ -313,7 +345,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     right: 20,

package/template/src/components/ChatContext.ts

@@ -9,20 +9,20 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import RtmEngine, {RtmAttribute} from 'agora-react-native-rtm';
-import {createContext} from 'react';
-import {rtmEventsInterface} from './RTMEvents';
+import RtmEngine from 'agora-react-native-rtm';
+import {UidType} from '../../agora-rn-uikit';
+import {createContext, SetStateAction} from 'react';
 
-export interface channelMessage {
+export interface ChatBubbleProps {
   isLocal: boolean;
-  msg: string;
-  ts: string;
-  uid: string;
+  message: string;
+  timestamp: string;
+  uid: UidType;
 }
 
 export interface messageStoreInterface {
   ts: string;
-  uid: string;
+  uid: UidType;
   msg: string;
 }
 
@@ -49,23 +49,17 @@ export enum attrRequestTypes {
   none = 'NONE',
 }
 
-interface chatContext {
-  messageStore: messageStoreInterface | any;
-  privateMessageStore: any;
+export interface chatContext {
+  hasUserJoinedRTM: boolean;
   sendMessage: (msg: string) => void;
-  sendMessageToUid: (msg: string, uid: number) => void;
+  sendMessageToUid: (msg: string, uid: number | string) => void;
   sendControlMessage: (msg: string) => void;
   sendControlMessageToUid: (msg: string, uid: number) => void;
-  addOrUpdateLocalUserAttributes: (attributes: RtmAttribute[]) => void;
-  broadcastUserAttributes: (
-    attributes: RtmAttribute[],
-    ctrlMsg: controlMessageEnum,
-  ) => void;
   engine: RtmEngine;
-  localUid: string;
-  userList: any;
+  localUid: UidType;
   onlineUsersCount: number;
-  events: rtmEventsInterface;
+  displayName: string;
+  setDisplayName: React.Dispatch<SetStateAction<string>>;
 }
 
 export enum controlMessageEnum {
@@ -76,8 +70,6 @@ export enum controlMessageEnum {
   kickUser = '5',
   cloudRecordingActive = '6',
   cloudRecordingUnactive = '7',
-  clientRoleChanged = 'CLIENT_ROLE_CHANGED',
-  // TODO move to livestream provider
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/ColorConfigure.tsx

@@ -12,7 +12,7 @@
 import React from 'react';
 import ColorContext from './ColorContext';
 
-const ColorConfigure: React.FC = (props: any) => {
+const ColorConfigure = (props: {children: React.ReactNode}) => {
   const primaryColor = $config.PRIMARY_COLOR;
   console.log(primaryColor);
   return (
@@ -20,7 +20,7 @@ const ColorConfigure: React.FC = (props: any) => {
       value={{
         primaryColor: primaryColor,
       }}>
-      {true ? props.children : <></>}
+      {props.children}
     </ColorContext.Provider>
   );
 };