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

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>
   );
 };

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

@@ -10,76 +10,86 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Image,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
-import {LocalUserContext} from '../../agora-rn-uikit';
-import {
-  LocalAudioMute,
-  LocalVideoMute,
-  SwitchCamera,
-  Endcall,
-  PropsContext,
-  ClientRole,
-} from '../../agora-rn-uikit';
-import Recording from '../subComponents/Recording';
-import LiveStreamControls from './livestream/views/LiveStreamControls';
+import {View, StyleSheet} from 'react-native';
+import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import LocalAudioMute, {
+  LocalAudioMuteProps,
+} from '../subComponents/LocalAudioMute';
+import LocalVideoMute, {
+  LocalVideoMuteProps,
+} from '../subComponents/LocalVideoMute';
+import Recording, {RecordingButtonProps} from '../subComponents/Recording';
+import LiveStreamControls, {
+  LiveStreamControlsProps,
+} from './livestream/views/LiveStreamControls';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import ScreenshareButton, {
+  ScreenshareButtonProps,
+} from '../subComponents/screenshare/ScreenshareButton';
+import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
+import LocalSwitchCamera, {
+  LocalSwitchCameraProps,
+} from '../subComponents/LocalSwitchCamera';
 
-const Controls = (props: any) => {
-  const {setRecordingActive, recordingActive, isHost} = props;
+const Controls = () => {
+  const {isHost} = useMeetingInfo();
   const {rtcProps} = useContext(PropsContext);
 
   return (
-    <LocalUserContext>
-      <View style={style.bottomBar}>
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <LiveStreamControls showControls={true} />
-        ) : (
-          <>
-            {/**
-             * In event mode when raise hand feature is active
-             * and audience is promoted to host, the audience can also
-             * demote himself
-             */}
-            {$config.EVENT_MODE && (
-              <LiveStreamControls
-                showControls={
-                  rtcProps?.role == ClientRole.Broadcaster && !isHost
-                }
-              />
-            )}
-            <View style={{alignSelf: 'center'}}>
-              <LocalAudioMute />
-            </View>
-            <View style={{alignSelf: 'center'}}>
-              <LocalVideoMute />
-            </View>
-            {isHost && $config.CLOUD_RECORDING && (
-              <View style={{alignSelf: 'baseline'}}>
-                <Recording
-                  recordingActive={recordingActive}
-                  setRecordingActive={setRecordingActive}
-                />
-              </View>
-            )}
-            <View style={{alignSelf: 'center'}}>
-              <SwitchCamera />
+    <View style={style.bottomBar}>
+      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+        <LiveStreamControls showControls={true} />
+      ) : (
+        <>
+          {/**
+           * In event mode when raise hand feature is active
+           * and audience is promoted to host, the audience can also
+           * demote himself
+           */}
+          {$config.EVENT_MODE && (
+            <LiveStreamControls
+              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
+            />
+          )}
+          <View style={{alignSelf: 'center'}}>
+            <LocalAudioMute />
+          </View>
+          <View style={{alignSelf: 'center'}}>
+            <LocalVideoMute />
+          </View>
+          {isHost && $config.CLOUD_RECORDING && (
+            <View style={{alignSelf: 'baseline'}}>
+              <Recording />
             </View>
-          </>
-        )}
-        <View style={{alignSelf: 'center'}}>
-          <Endcall />
-        </View>
+          )}
+          <View style={{alignSelf: 'center'}}>
+            <LocalSwitchCamera />
+          </View>
+        </>
+      )}
+      <View style={{alignSelf: 'center'}}>
+        <LocalEndcall />
       </View>
-    </LocalUserContext>
+    </View>
   );
 };
-
+export const ControlsComponentsArray: [
+  (props: LocalAudioMuteProps) => JSX.Element,
+  (props: LocalVideoMuteProps) => JSX.Element,
+  (props: LocalSwitchCameraProps) => JSX.Element,
+  (props: ScreenshareButtonProps) => JSX.Element,
+  (props: RecordingButtonProps) => JSX.Element,
+  (props: LocalEndcallProps) => JSX.Element,
+  (props: LiveStreamControlsProps) => JSX.Element,
+] = [
+  LocalAudioMute,
+  LocalVideoMute,
+  LocalSwitchCamera,
+  ScreenshareButton,
+  Recording,
+  LocalEndcall,
+  LiveStreamControls,
+];
 const style = StyleSheet.create({
   bottomBar: {
     flex: 1,