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

package/template/src/pages/VideoCall.tsx

@@ -52,6 +52,7 @@ import {WhiteboardProvider} from '../components/contexts/WhiteboardContext';
 import {useWakeLock} from '../components/useWakeLock';
 import StorageContext from '../components/StorageContext';
 import SDKEvents from '../utils/SdkEvents';
+import {UserPreferenceProvider} from '../components/useUserPreference';
 
 enum RnEncryptionEnum {
   /**
@@ -114,6 +115,7 @@ const VideoCall: React.FC = () => {
       : false,
     role: ClientRole.Broadcaster,
     geoFencing: $config.GEO_FENCING,
+    audioRoom: $config.AUDIO_ROOM,
   });
 
   const useJoin = useJoinMeeting();
@@ -128,11 +130,11 @@ const VideoCall: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    try {
-      useJoin(phrase);
-    } catch (error) {
-      setGlobalErrorMessage(error);
-    }
+    useJoin(phrase)
+      .then(() => {})
+      .catch((error) => {
+        setGlobalErrorMessage(error);
+      });
   }, []);
 
   const data = useMeetingInfo();
@@ -158,6 +160,7 @@ const VideoCall: React.FC = () => {
         screenShareToken: data.screenShareToken,
         role: data.isHost ? ClientRole.Broadcaster : ClientRole.Audience,
         geoFencing: $config.GEO_FENCING,
+        audioRoom: $config.AUDIO_ROOM,
       });
 
       // 1. Store the display name from API
@@ -200,65 +203,67 @@ const VideoCall: React.FC = () => {
                 <DeviceConfigure>
                   <ChatUIControlProvider>
                     <ChatNotificationProvider>
-                      <ChatMessagesProvider>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
+                      <SidePanelProvider
+                        value={{
+                          sidePanel,
+                          setSidePanel,
+                        }}>
+                        <ChatMessagesProvider>
                           <ScreenShareProvider>
                             <RtmConfigure
                               setRecordingActive={setRecordingActive}
                               callActive={callActive}>
-                              <WhiteboardProvider>
-                                <LayoutProvider
-                                  value={{
-                                    activeLayoutName,
-                                    setActiveLayoutName,
-                                  }}>
-                                  <RecordingProvider
+                              <UserPreferenceProvider>
+                                <WhiteboardProvider>
+                                  <LayoutProvider
                                     value={{
-                                      setRecordingActive,
-                                      isRecordingActive,
+                                      activeLayoutName,
+                                      setActiveLayoutName,
                                     }}>
-                                    <ScreenshareConfigure>
-                                      <LiveStreamContextProvider
-                                        value={{
-                                          setRtcProps,
-                                          rtcProps,
-                                          callActive,
-                                        }}>
-                                        <LiveStreamDataProvider>
-                                          <LocalUserContext
-                                            localUid={rtcProps?.uid || 0}>
-                                            <CustomUserContextHolder>
-                                              <NetworkQualityProvider>
-                                                {callActive ? (
-                                                  <VideoCallScreen />
-                                                ) : $config.PRECALL ? (
-                                                  <PreCallProvider
-                                                    value={{
-                                                      callActive,
-                                                      setCallActive,
-                                                    }}>
-                                                    <Precall />
-                                                  </PreCallProvider>
-                                                ) : (
-                                                  <></>
-                                                )}
-                                              </NetworkQualityProvider>
-                                            </CustomUserContextHolder>
-                                          </LocalUserContext>
-                                        </LiveStreamDataProvider>
-                                      </LiveStreamContextProvider>
-                                    </ScreenshareConfigure>
-                                  </RecordingProvider>
-                                </LayoutProvider>
-                              </WhiteboardProvider>
+                                    <RecordingProvider
+                                      value={{
+                                        setRecordingActive,
+                                        isRecordingActive,
+                                      }}>
+                                      <ScreenshareConfigure>
+                                        <LiveStreamContextProvider
+                                          value={{
+                                            setRtcProps,
+                                            rtcProps,
+                                            callActive,
+                                          }}>
+                                          <LiveStreamDataProvider>
+                                            <LocalUserContext
+                                              localUid={rtcProps?.uid || 0}>
+                                              <CustomUserContextHolder>
+                                                <NetworkQualityProvider>
+                                                  {callActive ? (
+                                                    <VideoCallScreen />
+                                                  ) : $config.PRECALL ? (
+                                                    <PreCallProvider
+                                                      value={{
+                                                        callActive,
+                                                        setCallActive,
+                                                      }}>
+                                                      <Precall />
+                                                    </PreCallProvider>
+                                                  ) : (
+                                                    <></>
+                                                  )}
+                                                </NetworkQualityProvider>
+                                              </CustomUserContextHolder>
+                                            </LocalUserContext>
+                                          </LiveStreamDataProvider>
+                                        </LiveStreamContextProvider>
+                                      </ScreenshareConfigure>
+                                    </RecordingProvider>
+                                  </LayoutProvider>
+                                </WhiteboardProvider>
+                              </UserPreferenceProvider>
                             </RtmConfigure>
                           </ScreenShareProvider>
-                        </SidePanelProvider>
-                      </ChatMessagesProvider>
+                        </ChatMessagesProvider>
+                      </SidePanelProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
                 </DeviceConfigure>

package/template/src/pages/video-call/CustomUserContextHolder.tsx

@@ -2,11 +2,19 @@ import React from 'react';
 import {useFpe} from 'fpe-api';
 
 const CustomUserContextHolder: React.FC<{children: any}> = (props) => {
-  //commented for v1 release
-  // const fpeCustomContext = useFpe((config) => config?.customUserContext);
-  // if (fpeCustomContext) {
-  //   fpeCustomContext();
-  // }
+  const useUserContext = useFpe((config) => {
+    if (
+      config?.components?.videoCall &&
+      typeof config?.components?.videoCall === 'object' &&
+      config?.components?.videoCall?.useUserContext &&
+      typeof config?.components?.videoCall?.useUserContext === 'function'
+    ) {
+      return config?.components?.videoCall?.useUserContext;
+    } else {
+      return () => {};
+    }
+  });
+  useUserContext();
   return props.children;
 };
 export default CustomUserContextHolder;

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -95,14 +95,13 @@ const VideoCallScreen = () => {
         components.BottombarComponent = data?.components?.videoCall.bottomBar;
       }
 
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall.topBar &&
-      //   typeof data?.components?.videoCall.topBar !== 'object' &&
-      //   isValidReactComponent(data?.components?.videoCall.topBar)
-      // ) {
-      //   components.TopbarComponent = data?.components?.videoCall.topBar;
-      // }
+      if (
+        data?.components?.videoCall.topBar &&
+        typeof data?.components?.videoCall.topBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topBar;
+      }
 
       if (
         data?.components?.videoCall.participantsPanel &&
@@ -128,13 +127,17 @@ const VideoCallScreen = () => {
   });
 
   useEffect(() => {
-    new Promise((res) =>
-      rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-        res(devices);
-      }),
-    ).then((devices: MediaDeviceInfo[]) => {
-      SDKEvents.emit('join', meetingTitle, devices, isHost);
-    });
+    /**
+     * Commenting this code as getDevices API is web only
+     * The below code fails on native app
+     */
+    // new Promise((res) =>
+    //   rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
+    //     res(devices);
+    //   }),
+    // ).then((devices: MediaDeviceInfo[]) => {
+    //   SDKEvents.emit('join', meetingTitle, devices, isHost);
+    // });
   }, []);
 
   return VideocallComponent ? (

package/template/src/rtm/RTMEngine.ts

@@ -30,6 +30,11 @@ class RTMEngine {
     await this.engine.createClient($config.APP_ID);
   }
 
+  private async destroyClientInstance() {
+    await this.engine.logout();
+    await this.engine.destroyClient();
+  }
+
   private constructor() {
     if (RTMEngine._instance) {
       return RTMEngine._instance;
@@ -53,6 +58,14 @@ class RTMEngine {
   get channelUid() {
     return this.channelId;
   }
+  destroy() {
+    try {
+      this.destroyClientInstance();
+      RTMEngine._instance = null;
+    } catch (error) {
+      console.log('Error destroying instance error: ', error);
+    }
+  }
 }
 
 export default RTMEngine;

package/template/src/rtm/utils.ts

@@ -30,7 +30,7 @@ export const timeNow = () => new Date().getTime();
 export const getMessageTime = (ts?: number): number => {
   if (!ts) return timeNow();
   try {
-    const timestamp = new Date(ts).getHours();
+    const timestamp = new Date(ts).getTime();
     return isNaN(timestamp) ? timeNow() : timestamp;
   } catch (error) {
     return timeNow();

package/template/src/rtm-events/EventUtils.ts

@@ -245,6 +245,9 @@ const EventUtils = (function () {
       }
       return this;
     },
+    clear() {
+      _events = {};
+    },
     // 1. To add multiple listeners
     // addListeners(evt: string, listeners: any) {
     //   if (Array.isArray(listeners)) {

package/template/src/rtm-events/EventsQueue.ts

@@ -27,10 +27,16 @@ const EventsQueue = (function () {
     },
     dequeue() {
       if (_eventsQueue.length == 0) return;
-      _eventsQueue.shift();
+      return _eventsQueue.pop();
     },
-    printQueue() {
-      return _eventsQueue;
+    isEmpty() {
+      return _eventsQueue.length === 0;
+    },
+    size() {
+      return _eventsQueue.length;
+    },
+    clear() {
+      _eventsQueue = [];
     },
   };
 })();

package/template/src/rtm-events/constants.ts

@@ -26,7 +26,8 @@ const ROLE_ATTRIBUTE = 'role';
 // 3. CHAT MESSAGES
 const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
 const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
-
+// 4. NAME ATTRIBUTE
+const NAME_ATTRIBUTE = 'name';
 const EventNames = {
   RECORDING_ATTRIBUTE,
   RAISED_ATTRIBUTE,
@@ -34,6 +35,7 @@ const EventNames = {
   PUBLIC_CHAT_MESSAGE,
   PRIVATE_CHAT_MESSAGE,
   SCREENSHARE_ATTRIBUTE,
+  NAME_ATTRIBUTE,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

package/template/src/subComponents/ChatBubble.tsx

@@ -21,11 +21,19 @@ import useUserList from '../utils/useUserList';
 const ChatBubble = (props: ChatBubbleProps) => {
   const {renderList} = useUserList();
   const {primaryColor} = useContext(ColorContext);
-  let {isLocal, message, timestamp, uid} = props;
+  let {
+    isLocal,
+    message,
+    createdTimestamp,
+    uid,
+    isDeleted,
+    msgId,
+    updatedTimestamp,
+  } = props;
   let time =
-    new Date(parseInt(timestamp)).getHours() +
+    new Date(parseInt(createdTimestamp)).getHours() +
     ':' +
-    new Date(parseInt(timestamp)).getMinutes();
+    new Date(parseInt(createdTimestamp)).getMinutes();
   const handleUrl = (url: string) => {
     if (isWeb) {
       window.open(url, '_blank');
@@ -36,7 +44,17 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-  return (
+  return props?.render ? (
+    props.render(
+      isLocal,
+      message,
+      createdTimestamp,
+      uid,
+      msgId,
+      isDeleted,
+      updatedTimestamp,
+    )
+  ) : (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
         <Text style={isLocal ? style.timestampTextLocal : style.timestampText}>

package/template/src/subComponents/ChatContainer.tsx

@@ -26,7 +26,7 @@ import {useLocalUid} from '../../agora-rn-uikit';
 import {ImageIcon} from '../../agora-rn-uikit';
 import TextWithTooltip from './TextWithTooltip';
 import {useFpe} from 'fpe-api';
-import {isWeb} from '../utils/common';
+import {isValidReactComponent, isWeb} from '../utils/common';
 import {useString} from '../utils/useString';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
 import useUserList from '../utils/useUserList';
@@ -38,13 +38,14 @@ import usePrivateMessages from '../utils/usePrivateMessages';
  * It retrieves all the messages from the appropriate stores (Message store an provate message store)
  * and maps it to a ChatBubble
  */
-const ChatContainer = (props: any) => {
+const ChatContainer = (props?: {
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+}) => {
   const {renderList} = useUserList();
   const messageStore = useGroupMessages();
   const getPrivateMessage = usePrivateMessages();
   const privateMessageStore = getPrivateMessage();
   const {height, width} = useWindowDimensions();
-  const {selectPrivate} = props;
   const {
     privateActive,
     selectedChatUserId: selectedUserID,
@@ -66,20 +67,24 @@ const ChatContainer = (props: any) => {
       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?.chatBubble &&
-      //     typeof data?.components?.videoCall?.chat?.chatBubble !== 'object' &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatBubble)
-      //   ) {
-      //     components.ChatBubbleComponent =
-      //       data?.components?.videoCall?.chat?.chatBubble;
-      //   }
-      // }
+      //commented for v1 release
+      if (
+        data?.components?.videoCall?.chat &&
+        typeof data?.components?.videoCall?.chat === 'object'
+      ) {
+        if (
+          data?.components?.videoCall?.chat?.chatBubble &&
+          typeof data?.components?.videoCall?.chat?.chatBubble !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall?.chat?.chatBubble)
+        ) {
+          components.ChatBubbleComponent =
+            data?.components?.videoCall?.chat?.chatBubble;
+        }
+      }
+    } else {
+      if (props?.chatBubble && isValidReactComponent(props?.chatBubble)) {
+        components.ChatBubbleComponent = props?.chatBubble;
+      }
     }
     return components;
   });
@@ -124,9 +129,12 @@ const ChatContainer = (props: any) => {
               <ChatBubbleComponent
                 isLocal={localUid === message.uid}
                 message={message.msg}
-                timestamp={message.ts}
+                createdTimestamp={message.createdTimestamp}
+                updatedTimestamp={message.updatedTimestamp}
                 uid={message.uid}
                 key={message.ts}
+                msgId={message.msgId}
+                isDeleted={message.isDeleted}
               />
             </>
           ))
@@ -135,9 +143,12 @@ const ChatContainer = (props: any) => {
             <ChatBubbleComponent
               isLocal={localUid === message.uid}
               message={message.msg}
-              timestamp={message.ts}
+              createdTimestamp={message.createdTimestamp}
+              updatedTimestamp={message.updatedTimestamp}
               uid={message.uid}
               key={message.ts}
+              msgId={message.msgId}
+              isDeleted={message.isDeleted}
             />
           ))
         ) : (

package/template/src/subComponents/ChatInput.tsx

@@ -119,7 +119,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 /**
  * Input component for the Chat interface
  */
-const ChatInput = () => {
+const ChatInput = (props: {
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+}) => {
   const {primaryColor} = useContext(ColorContext);
   const {ChatInputComponent, ChatSendButtonComponent} = useFpe((data) => {
     let components: {
@@ -133,31 +136,40 @@ const ChatInput = () => {
       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?.chatInput &&
-      //     typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-      //   ) {
-      //     components.ChatInputComponent =
-      //       data?.components?.videoCall?.chat?.chatInput;
-      //   }
-      //   if (
-      //     data?.components?.videoCall?.chat?.chatSentButton &&
-      //     typeof data?.components?.videoCall?.chat?.chatSentButton !==
-      //       'object' &&
-      //     isValidReactComponent(
-      //       data?.components?.videoCall?.chat?.chatSentButton,
-      //     )
-      //   ) {
-      //     components.ChatSendButtonComponent =
-      //       data?.components?.videoCall?.chat?.chatSentButton;
-      //   }
-      // }
+      if (
+        data?.components?.videoCall?.chat &&
+        typeof data?.components?.videoCall?.chat === 'object'
+      ) {
+        if (
+          data?.components?.videoCall?.chat?.chatInput &&
+          typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
+        ) {
+          components.ChatInputComponent =
+            data?.components?.videoCall?.chat?.chatInput;
+        }
+        if (
+          data?.components?.videoCall?.chat?.chatSentButton &&
+          typeof data?.components?.videoCall?.chat?.chatSentButton !==
+            'object' &&
+          isValidReactComponent(
+            data?.components?.videoCall?.chat?.chatSentButton,
+          )
+        ) {
+          components.ChatSendButtonComponent =
+            data?.components?.videoCall?.chat?.chatSentButton;
+        }
+      }
+    } else {
+      if (props?.chatInput && isValidReactComponent(props.chatInput)) {
+        components.ChatInputComponent = props.chatInput;
+      }
+      if (
+        props?.chatSendButton &&
+        isValidReactComponent(props.chatSendButton)
+      ) {
+        components.ChatSendButtonComponent = props.chatSendButton;
+      }
     }
     return components;
   });

package/template/src/subComponents/SelectDevice.tsx

@@ -117,7 +117,7 @@ const SelectDevice = () => {
     <View>
       <View style={{marginTop: 15}}></View>
       <View>
-        <SelectVideoDevice />
+        {!$config.AUDIO_ROOM && <SelectVideoDevice />}
         <SelectAudioDevice />
       </View>
       <View style={{marginTop: 15}}></View>

package/template/src/subComponents/recording/useRecording.tsx

@@ -91,7 +91,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
   //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
   const recordingStartedText = (active: boolean) =>
     active ? 'Recording Started' : 'Recording Stopped';
-  const {executePresenterQuery} = useRecordingLayoutQuery();
+  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
   const {screenShareData} = useScreenContext();
 
@@ -156,9 +156,20 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 2. set the local recording state to true to update the UI
           setRecordingActive(true);
           // 3. set the presenter mode if screen share is active
-          if (Object.values(screenShareData).some((item) => item.isActive)) {
-            console.log('Executing presenter query');
-            executePresenterQuery();
+          // 3.a Get the most recent screenshare uid
+          const sorted = Object.entries(screenShareData)
+            .filter((el) => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
+            .sort((a, b) => b[1].ts - a[1].ts);
+
+          const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
+          if (activeScreenshareUid) {
+            console.log(
+              'screenshare: Executing presenter query for screenuid',
+              activeScreenshareUid,
+            );
+            executePresenterQuery(parseInt(activeScreenshareUid));
+          } else {
+            executeNormalQuery();
           }
         }
       })

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
-import {PropsContext} from '../../../agora-rn-uikit';
+import {UidType} from '../../../agora-rn-uikit';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -19,10 +19,16 @@ const SET_NORMAL = gql`
 function useRecordingLayoutQuery() {
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
-  const {screenShareUid} = useContext(PropsContext).rtcProps;
   const {phrase} = useParams<any>();
-
-  const executePresenterQuery = () => {
+  /**
+   * @param screenShareUid
+   * Default : Grid
+   * Below query changes the layout to vertical and passed UID is maxed view
+   * This should be called only when screenshare is actively going on
+   * and we want that as the main view
+   * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
+   */
+  const executePresenterQuery = (screenShareUid: UidType) => {
     setPresenterQuery({
       variables: {
         uid: screenShareUid,