agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/components/StorageContext.tsx

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

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, useRtc} from 'customization-api';
+import {useRender} from 'customization-api';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useLocalUid, UidType, RenderInterface} from '../../../agora-rn-uikit';
+import {useLocalUid, UidType} from '../../../agora-rn-uikit';
 import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import {useChatUIControl} from '../chat-ui/useChatUIControl';
@@ -22,7 +22,6 @@ 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',
@@ -50,7 +49,6 @@ 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>({
@@ -59,11 +57,9 @@ 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();
@@ -92,8 +88,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
   //commented for v1 release
   //const fromText = useString('messageSenderNotificationLabel');
-  const fromText = (name: string) => `${name} commented in the public chat`;
-  const privateMessageLabel = 'You’ve received a private message';
+  const fromText = (name: string) => `From : ${name}`;
   useEffect(() => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
@@ -106,74 +101,42 @@ 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({
-        primaryBtn: null,
-        secondaryBtn: null,
-        type: 'info',
-        text1: isPrivateMessage
-          ? privateMessageLabel
-          : renderListRef.current.renderList[uidAsNumber]?.name
-          ? fromText(
-              trimText(renderListRef.current.renderList[uidAsNumber]?.name),
-            )
+        type: 'success',
+        text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
+        text2: renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
           : '',
-        text2: isPrivateMessage
-          ? ''
-          : msg.length > 30
-          ? msg.slice(0, 30) + '...'
-          : msg,
-        visibilityTime: 3000,
+        visibilityTime: 1000,
         onPress: () => {
           if (isPrivateMessage) {
-            openPrivateChat(uidAsNumber);
+            setUnreadPrivateMessageCount(
+              unreadPrivateMessageCount -
+                (unreadIndividualMessageCount[uidAsNumber] || 0),
+            );
+            setUnreadIndividualMessageCount((prevState) => {
+              return {
+                ...prevState,
+                [uidAsNumber]: 0,
+              };
+            });
+            setGroupActive(false);
+            setSelectedChatUserId(uidAsNumber);
+            setPrivateActive(true);
           } else {
-            //move this logic into ChatContainer
-            // setUnreadGroupMessageCount(0);
+            setUnreadGroupMessageCount(0);
             setPrivateActive(false);
             setSelectedChatUserId(0);
             setGroupActive(true);
-            setSidePanel(SidePanelType.Chat);
           }
+          setSidePanel(SidePanelType.Chat);
         },
       });
     };
@@ -248,14 +211,6 @@ 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,
@@ -559,7 +514,6 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         sendChatMessage,
         editChatMessage,
         deleteChatMessage,
-        openPrivateChat,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

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

@@ -17,11 +17,9 @@ 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>>;
 }
@@ -35,8 +33,6 @@ const ChatUIControlContext = React.createContext<ChatUIControlInterface>({
   setPrivateActive: () => {},
   setSelectedChatUserId: () => {},
   setMessage: () => {},
-  inputActive: false,
-  setInputActive: () => {},
 });
 
 interface ChatUIControlProviderProps {
@@ -46,7 +42,6 @@ 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 (
@@ -60,8 +55,6 @@ const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
         setSelectedChatUserId,
         message,
         setMessage,
-        inputActive,
-        setInputActive,
       }}>
       {props.children}
     </ChatUIControlContext.Provider>

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

@@ -10,8 +10,7 @@
 *********************************************
 */
 
-import React, {useContext, useEffect, useState} from 'react';
-import Toast from '../../../react-native-toast-message';
+import React, {useContext, useState} from 'react';
 import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
@@ -45,24 +44,11 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
-  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} />
-  // ) : (
-  //   <></>
-  // );
+  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,27 +11,26 @@
 */
 
 import React from 'react';
-import {StyleSheet, Image} from 'react-native';
+import {View, StyleSheet} from 'react-native';
+import Logo from '../../subComponents/Logo';
 import {useHasBrandLogo} from '../../utils/common';
-const Logo: React.FC = () => {
-  const hasBrandLogo = useHasBrandLogo();
-  const hasLogo = hasBrandLogo();
-  if (!hasLogo) {
-    return null;
-  }
 
+const CommonLogo: React.FC = () => {
+  const hasBrandLogo = useHasBrandLogo();
   return (
-    <Image
-      source={{uri: $config.LOGO}}
-      style={style.logo}
-      resizeMode="contain"
-    />
+    <View style={style.nav}>
+      {hasBrandLogo() && <Logo />}
+      {/* <OpenInNativeButton /> */}
+    </View>
   );
 };
-export default Logo;
+export default CommonLogo;
 const style = StyleSheet.create({
-  logo: {
-    width: 54,
-    height: 19,
+  nav: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });

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

@@ -1,11 +1,5 @@
 import {UidType} from '../../../agora-rn-uikit';
-import React, {
-  createContext,
-  useState,
-  useContext,
-  useReducer,
-  useEffect,
-} from 'react';
+import React, {createContext, useState, useContext} from 'react';
 import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
@@ -46,8 +40,9 @@ 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) &&
@@ -72,7 +67,7 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
     <LiveStreamDataContext.Provider
       value={{
         liveStreamData: raiseHandList,
-        hostUids: hostUids,
+        hostUids,
         audienceUids,
       }}>
       {props.children}

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

@@ -1,18 +1,10 @@
-import React, {
-  createContext,
-  useState,
-  useEffect,
-  useContext,
-  useReducer,
-  useRef,
-} from 'react';
+import React, {createContext, useState, useEffect, useContext} 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[];
@@ -30,22 +22,10 @@ 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
@@ -56,8 +36,8 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_HOST, (data) => {
       const payload = JSON.parse(data?.payload);
       const hostUid = payload?.uid;
-      if (hostUid && hostUidsRef?.current?.hostUids.indexOf(hostUid) === -1) {
-        setHostUids([...hostUidsRef?.current?.hostUids, hostUid]);
+      if (hostUid && hostUids.indexOf(hostUid) === -1) {
+        setHostUids((prevState) => [...prevState, hostUid]);
       }
     });
 
@@ -65,14 +45,8 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_ATTENDEE, (data) => {
       const payload = JSON.parse(data?.payload);
       const attendeeUid = payload?.uid;
-      if (
-        attendeeUid &&
-        attendeeUidsRef?.current?.attendeeUids?.indexOf(attendeeUid) === -1
-      ) {
-        setAttendeeUids([
-          ...attendeeUidsRef?.current?.attendeeUids,
-          attendeeUid,
-        ]);
+      if (attendeeUid && attendeeUids.indexOf(attendeeUid) === -1) {
+        setAttendeeUids((prevState) => [...prevState, attendeeUid]);
       }
     });
 
@@ -96,15 +70,11 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     }
   }, [isHost, hasUserJoinedRTM]);
 
-  useEffect(() => {
-    forceUpdate();
-  }, [activeUids]);
-
   return (
     <VideoMeetingData.Provider
       value={{
-        hostUids: hostUids.filter((i) => activeUids.indexOf(i) !== -1),
-        attendeeUids: attendeeUids.filter((i) => activeUids.indexOf(i) !== -1),
+        hostUids,
+        attendeeUids,
       }}>
       {props.children}
     </VideoMeetingData.Provider>