agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/components/StorageContext.tsx

@@ -10,11 +10,23 @@
 *********************************************
 */
 import React, {createContext, ReactChildren, useEffect, useState} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage'; // '@react-native-community/async-storage';
 import useMount from './useMount';
 
+type rememberedDevicesListEntries = Record<
+  string,
+  'switch-on-connect' | 'ignore-on-connect'
+>;
+
 export interface StoreInterface {
-  [key: string]: string | null;
+  token: string;
+  displayName: string;
+  selectedLanguageCode: string;
+  rememberedDevicesList: Record<
+    MediaDeviceInfo['kind'],
+    rememberedDevicesListEntries
+  >;
+  activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
 }
 
 export interface StorageContextInterface {
@@ -26,6 +38,16 @@ export const initStoreValue: StoreInterface = {
   token: null,
   displayName: '',
   selectedLanguageCode: '',
+  rememberedDevicesList: {
+    audioinput: {},
+    audiooutput: {},
+    videoinput: {},
+  },
+  activeDeviceId: {
+    audioinput: '',
+    audiooutput: '',
+    videoinput: '',
+  },
 };
 
 const initStorageContextValue = {
@@ -54,7 +76,12 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           await AsyncStorage.setItem('store', JSON.stringify(initStoreValue));
           setReady(true);
         } else {
-          setStore(JSON.parse(storeString));
+          const storeFromStorage = JSON.parse(storeString);
+          Object.keys(initStoreValue).forEach((key) => {
+            if (!storeFromStorage[key])
+              storeFromStorage[key] = initStoreValue[key];
+          });
+          setStore(storeFromStorage);
           setReady(true);
         }
         console.log('store hydrated', storeString);

package/template/src/components/ToastComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Toast from '../../react-native-toast-message';
+import ToastConfig from '../subComponents/ToastConfig';
+
+const ToastComponent = () => {
+  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+};
+export default ToastComponent;

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -11,9 +11,9 @@
 */
 import {createHook} from 'customization-implementation';
 import React, {useState, useEffect, useRef} from 'react';
-import {useRender} from 'customization-api';
+import {useRender, useRtc} from 'customization-api';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useLocalUid, UidType} from '../../../agora-rn-uikit';
+import {useLocalUid, UidType, RenderInterface} from '../../../agora-rn-uikit';
 import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import {useChatUIControl} from '../chat-ui/useChatUIControl';
@@ -22,6 +22,7 @@ import Toast from '../../../react-native-toast-message';
 import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
 import getUniqueID from '../../utils/getUniqueID';
+import {trimText} from '../../utils/common';
 
 enum ChatMessageActionEnum {
   Create = 'Create_Chat_Message',
@@ -49,6 +50,7 @@ interface ChatMessagesInterface {
   sendChatMessage: (msg: string, toUid?: UidType) => void;
   editChatMessage: (msgId: string, msg: string, toUid?: UidType) => void;
   deleteChatMessage: (msgId: string, toUid?: UidType) => void;
+  openPrivateChat: (toUid: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
@@ -57,9 +59,11 @@ const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
   sendChatMessage: () => {},
   editChatMessage: () => {},
   deleteChatMessage: () => {},
+  openPrivateChat: () => {},
 });
 
 const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
+  const {dispatch} = useRtc();
   const {renderList} = useRender();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
@@ -88,7 +92,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //commented for v1 release
   //const fromText = useString('messageSenderNotificationLabel');
-  const fromText = (name: string) => `From : ${name}`;
+  const fromText = (name: string) => `${name} commented in the public chat`;
+  const privateMessageLabel = 'You’ve received a private message';
   useEffect(() => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
@@ -101,42 +106,74 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     individualActiveRef.current = selectedChatUserId;
   }, [selectedChatUserId]);
 
+  const openPrivateChat = (uidAsNumber) => {
+    //move this logic into ChatContainer
+    // setUnreadPrivateMessageCount(
+    //   unreadPrivateMessageCount -
+    //     (unreadIndividualMessageCount[uidAsNumber] || 0),
+    // );
+    // setUnreadIndividualMessageCount((prevState) => {
+    //   return {
+    //     ...prevState,
+    //     [uidAsNumber]: 0,
+    //   };
+    // });
+    setGroupActive(false);
+    setSelectedChatUserId(uidAsNumber);
+    setPrivateActive(true);
+    setSidePanel(SidePanelType.Chat);
+  };
+
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<RenderInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
+
   React.useEffect(() => {
     const showMessageNotification = (
       msg: string,
       uid: string,
       isPrivateMessage: boolean = false,
     ) => {
+      //don't show group message notification if group chat is open
+      if (!isPrivateMessage && groupActiveRef.current) {
+        return;
+      }
       const uidAsNumber = parseInt(uid);
+      //don't show private message notification if private chat is open
+      if (isPrivateMessage && uidAsNumber === individualActiveRef.current) {
+        return;
+      }
       Toast.show({
-        type: 'success',
-        text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[uidAsNumber]?.name
-          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
+        primaryBtn: null,
+        secondaryBtn: null,
+        type: 'info',
+        text1: isPrivateMessage
+          ? privateMessageLabel
+          : renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(
+              trimText(renderListRef.current.renderList[uidAsNumber]?.name),
+            )
           : '',
-        visibilityTime: 1000,
+        text2: isPrivateMessage
+          ? ''
+          : msg.length > 30
+          ? msg.slice(0, 30) + '...'
+          : msg,
+        visibilityTime: 3000,
         onPress: () => {
           if (isPrivateMessage) {
-            setUnreadPrivateMessageCount(
-              unreadPrivateMessageCount -
-                (unreadIndividualMessageCount[uidAsNumber] || 0),
-            );
-            setUnreadIndividualMessageCount((prevState) => {
-              return {
-                ...prevState,
-                [uidAsNumber]: 0,
-              };
-            });
-            setGroupActive(false);
-            setSelectedChatUserId(uidAsNumber);
-            setPrivateActive(true);
+            openPrivateChat(uidAsNumber);
           } else {
-            setUnreadGroupMessageCount(0);
+            //move this logic into ChatContainer
+            // setUnreadGroupMessageCount(0);
             setPrivateActive(false);
             setSelectedChatUserId(0);
             setGroupActive(true);
+            setSidePanel(SidePanelType.Chat);
           }
-          setSidePanel(SidePanelType.Chat);
         },
       });
     };
@@ -211,6 +248,14 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       const messageData = payload.value;
       switch (messageAction) {
         case ChatMessageActionEnum.Create:
+          //To order chat participant based on recent message
+          try {
+            updateRenderListState(data.sender, {
+              lastMessageTimeStamp: new Date().getTime(),
+            });
+          } catch (error) {
+            console.log("ERROR : couldn't update the last message timestamp");
+          }
           showMessageNotification(messageData.msg, `${data.sender}`, true);
           addMessageToPrivateStore(
             data.sender,
@@ -514,6 +559,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         sendChatMessage,
         editChatMessage,
         deleteChatMessage,
+        openPrivateChat,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

package/template/src/components/chat-ui/useChatUIControl.tsx

@@ -17,9 +17,11 @@ export interface ChatUIControlInterface {
   groupActive: boolean;
   privateActive: boolean;
   selectedChatUserId: UidType;
+  inputActive?: boolean;
   setGroupActive: React.Dispatch<SetStateAction<boolean>>;
   setPrivateActive: React.Dispatch<SetStateAction<boolean>>;
   setSelectedChatUserId: React.Dispatch<SetStateAction<UidType>>;
+  setInputActive: React.Dispatch<SetStateAction<boolean>>;
   message: string;
   setMessage: React.Dispatch<SetStateAction<string>>;
 }
@@ -33,6 +35,8 @@ const ChatUIControlContext = React.createContext<ChatUIControlInterface>({
   setPrivateActive: () => {},
   setSelectedChatUserId: () => {},
   setMessage: () => {},
+  inputActive: false,
+  setInputActive: () => {},
 });
 
 interface ChatUIControlProviderProps {
@@ -42,6 +46,7 @@ interface ChatUIControlProviderProps {
 const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
   const [groupActive, setGroupActive] = useState(false);
   const [privateActive, setPrivateActive] = useState(false);
+  const [inputActive, setInputActive] = useState(false);
   const [selectedChatUserId, setSelectedChatUserId] = useState<UidType>(0);
   const [message, setMessage] = useState('');
   return (
@@ -55,6 +60,8 @@ const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
         setSelectedChatUserId,
         message,
         setMessage,
+        inputActive,
+        setInputActive,
       }}>
       {props.children}
     </ChatUIControlContext.Provider>

package/template/src/components/common/Error.tsx

@@ -10,7 +10,8 @@
 *********************************************
 */
 
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
+import Toast from '../../../react-native-toast-message';
 import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
@@ -44,11 +45,24 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
-  return error && (error.name || error.message) ? (
-    <Error error={error} showBack={true} />
-  ) : (
-    <></>
-  );
+  useEffect(() => {
+    if (error?.name || error?.message) {
+      Toast.show({
+        type: 'error',
+        text1: error.name,
+        text2: error.message,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+      });
+    }
+  }, [error]);
+  return <></>;
+  // return error && (error.name || error.message) ? (
+  //    <Error error={error} showBack={true} />
+  // ) : (
+  //   <></>
+  // );
 };
 export {ErrorContext, ErrorProvider};
 export default CommonError;

package/template/src/components/common/Logo.tsx

@@ -11,26 +11,27 @@
 */
 
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import Logo from '../../subComponents/Logo';
+import {StyleSheet, Image} from 'react-native';
 import {useHasBrandLogo} from '../../utils/common';
-
-const CommonLogo: React.FC = () => {
+const Logo: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
+  const hasLogo = hasBrandLogo();
+  if (!hasLogo) {
+    return null;
+  }
+
   return (
-    <View style={style.nav}>
-      {hasBrandLogo() && <Logo />}
-      {/* <OpenInNativeButton /> */}
-    </View>
+    <Image
+      source={{uri: $config.LOGO}}
+      style={style.logo}
+      resizeMode="contain"
+    />
   );
 };
-export default CommonLogo;
+export default Logo;
 const style = StyleSheet.create({
-  nav: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+  logo: {
+    width: 54,
+    height: 19,
   },
 });

package/template/src/components/contexts/LiveStreamDataContext.tsx

@@ -1,5 +1,11 @@
 import {UidType} from '../../../agora-rn-uikit';
-import React, {createContext, useState, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useReducer,
+  useEffect,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
@@ -40,9 +46,8 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
       const hostList = filterObject(
         renderList,
         ([k, v]) =>
-          (v?.type === 'rtc' ||
-            v?.type === 'live' ||
-            (v?.type === 'screenshare' && v?.video == 1)) &&
+          (v?.type === 'rtc' || v?.type === 'live') && //||
+          //(v?.type === 'screenshare' && v?.video == 1)
           (raiseHandList[k]
             ? raiseHandList[k]?.role == ClientRole.Broadcaster
             : true) &&
@@ -67,7 +72,7 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
     <LiveStreamDataContext.Provider
       value={{
         liveStreamData: raiseHandList,
-        hostUids,
+        hostUids: hostUids,
         audienceUids,
       }}>
       {props.children}

package/template/src/components/contexts/VideoMeetingDataContext.tsx

@@ -1,10 +1,18 @@
-import React, {createContext, useState, useEffect, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useRef,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
 import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
 import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import ChatContext from '../ChatContext';
+import {useRender} from 'customization-api';
 
 export interface VideoMeetingDataInterface {
   hostUids: UidType[];
@@ -22,10 +30,22 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
   const {
     data: {isHost},
   } = useMeetingInfo();
+  const {activeUids} = useRender();
   const {hasUserJoinedRTM} = useContext(ChatContext);
   const localUid = useLocalUid();
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [attendeeUids, setAttendeeUids] = useState<UidType[]>([]);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  const hostUidsRef = useRef({hostUids});
+  const attendeeUidsRef = useRef({attendeeUids});
+
+  useEffect(() => {
+    hostUidsRef.current.hostUids = hostUids;
+  }, [hostUids]);
+
+  useEffect(() => {
+    attendeeUidsRef.current.attendeeUids = attendeeUids;
+  }, [attendeeUids]);
 
   useEffect(() => {
     //set local uid
@@ -36,8 +56,8 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_HOST, (data) => {
       const payload = JSON.parse(data?.payload);
       const hostUid = payload?.uid;
-      if (hostUid && hostUids.indexOf(hostUid) === -1) {
-        setHostUids((prevState) => [...prevState, hostUid]);
+      if (hostUid && hostUidsRef?.current?.hostUids.indexOf(hostUid) === -1) {
+        setHostUids([...hostUidsRef?.current?.hostUids, hostUid]);
       }
     });
 
@@ -45,8 +65,14 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_ATTENDEE, (data) => {
       const payload = JSON.parse(data?.payload);
       const attendeeUid = payload?.uid;
-      if (attendeeUid && attendeeUids.indexOf(attendeeUid) === -1) {
-        setAttendeeUids((prevState) => [...prevState, attendeeUid]);
+      if (
+        attendeeUid &&
+        attendeeUidsRef?.current?.attendeeUids?.indexOf(attendeeUid) === -1
+      ) {
+        setAttendeeUids([
+          ...attendeeUidsRef?.current?.attendeeUids,
+          attendeeUid,
+        ]);
       }
     });
 
@@ -70,11 +96,15 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     }
   }, [isHost, hasUserJoinedRTM]);
 
+  useEffect(() => {
+    forceUpdate();
+  }, [activeUids]);
+
   return (
     <VideoMeetingData.Provider
       value={{
-        hostUids,
-        attendeeUids,
+        hostUids: hostUids.filter((i) => activeUids.indexOf(i) !== -1),
+        attendeeUids: attendeeUids.filter((i) => activeUids.indexOf(i) !== -1),
       }}>
       {props.children}
     </VideoMeetingData.Provider>