agora-appbuilder-core 2.0.2 → 2.1.0

package/template/src/pages/VideoCall.tsx

@@ -12,8 +12,12 @@
 import React, {useState, useContext, useEffect} from 'react';
 import {View, StyleSheet, Text, Platform} from 'react-native';
 
-import {RtcConfigure} from '../../agora-rn-uikit';
-import {PropsProvider} from '../../agora-rn-uikit';
+import {
+  RtcConfigure,
+  PropsProvider,
+  ClientRole,
+  ChannelProfile,
+} from '../../agora-rn-uikit';
 import Navbar from '../components/Navbar';
 import Precall from '../components/Precall';
 import ParticipantsView from '../components/ParticipantsView';
@@ -27,7 +31,6 @@ import Chat from '../components/Chat';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import {gql, useQuery} from '@apollo/client';
-// import Watermark from '../subComponents/Watermark';
 import StorageContext from '../components/StorageContext';
 import Logo from '../subComponents/Logo';
 import hasBrandLogo from '../utils/hasBrandLogo';
@@ -40,12 +43,14 @@ import {videoView} from '../../theme.json';
 import Layout from '../subComponents/LayoutEnum';
 import Toast from '../../react-native-toast-message';
 import {NetworkQualityProvider} from '../components/NetworkQualityContext';
+import {LiveStreamContextProvider} from '../components/livestream';
+import ScreenshareConfigure from '../subComponents/screenshare/ScreenshareConfigure';
 
 const useChatNotification = (
   messageStore: string | any[],
   privateMessageStore: string | any[],
   chatDisplayed: boolean,
-  isPrivateChatDisplayed: boolean
+  isPrivateChatDisplayed: boolean,
 ) => {
   // store the last checked state from the messagestore, to identify unread messages
   const [lastCheckedPublicState, setLastCheckedPublicState] = useState(0);
@@ -54,7 +59,7 @@ const useChatNotification = (
     if (chatDisplayed && !isPrivateChatDisplayed) {
       setLastCheckedPublicState(messageStore.length);
     }
-  }, [messageStore,isPrivateChatDisplayed]);
+  }, [messageStore, isPrivateChatDisplayed]);
 
   const setPrivateMessageLastSeen = ({userId, lastSeenCount}) => {
     setLastCheckedPrivateState((prevState) => {
@@ -70,7 +75,12 @@ const useChatNotification = (
   ];
 };
 
-const NotificationControl = ({children, chatDisplayed, setSidePanel, isPrivateChatDisplayed}) => {
+const NotificationControl = ({
+  children,
+  chatDisplayed,
+  setSidePanel,
+  isPrivateChatDisplayed,
+}) => {
   const {messageStore, privateMessageStore, userList, localUid, events} =
     useContext(ChatContext);
   const [
@@ -79,7 +89,12 @@ const NotificationControl = ({children, chatDisplayed, setSidePanel, isPrivateCh
     lastCheckedPrivateState,
     setLastCheckedPrivateState,
     setPrivateMessageLastSeen,
-  ] = useChatNotification(messageStore, privateMessageStore, chatDisplayed, isPrivateChatDisplayed);
+  ] = useChatNotification(
+    messageStore,
+    privateMessageStore,
+    chatDisplayed,
+    isPrivateChatDisplayed,
+  );
 
   const pendingPublicNotification =
     messageStore.length - lastCheckedPublicState;
@@ -246,7 +261,7 @@ const VideoCall: React.FC = () => {
   const [chatDisplayed, setChatDisplayed] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
-  const [isPrivateChatDisplayed, setPrivateChatDisplayed] = useState(false)
+  const [isPrivateChatDisplayed, setPrivateChatDisplayed] = useState(false);
   const {phrase} = useParams();
   const [errorMessage, setErrorMessage] = useState(null);
   const [isHost, setIsHost] = React.useState(false);
@@ -264,6 +279,7 @@ const VideoCall: React.FC = () => {
     encryption: $config.ENCRYPTION_ENABLED
       ? {key: null, mode: RnEncryptionEnum.AES128XTS, screenKey: null}
       : false,
+    role: ClientRole.Broadcaster,
   });
 
   const {data, loading, error} = useQuery(
@@ -281,6 +297,7 @@ const VideoCall: React.FC = () => {
       // console.log('error data', data);
       if (!errorMessage) {
         setErrorMessage(error);
+        queryComplete ? {} : setQueryComplete(true);
       }
       return;
     }
@@ -305,9 +322,13 @@ const VideoCall: React.FC = () => {
           : false,
         screenShareUid: data.joinChannel.screenShare.uid,
         screenShareToken: data.joinChannel.screenShare.rtc,
+        role: data.joinChannel.isHost
+          ? ClientRole.Broadcaster
+          : ClientRole.Audience,
       });
       setIsHost(data.joinChannel.isHost);
       setTitle(data.joinChannel.title);
+
       console.log('query done: ', data, queryComplete);
       // 1. Store the display name from API
       if (data.getUser) {
@@ -333,168 +354,184 @@ const VideoCall: React.FC = () => {
     }
   }, [username]);
 
-  // throw new Error("My first Sentry error!");
   return (
     <>
-      {queryComplete || !callActive ? (
-        <>
-          <PropsProvider
-            value={{
-              rtcProps: {
-                ...rtcProps,
-                callActive,
-              },
-              callbacks,
-              styleProps,
-            }}>
-            <RtcConfigure>
-              <DeviceConfigure>
-                <RtmConfigure
-                  setRecordingActive={setRecordingActive}
-                  name={username}
-                  callActive={callActive}>
-                  {callActive ? (
-                    <View style={style.full}>
-                      <NotificationControl
-                        setSidePanel={setSidePanel}
-                        chatDisplayed={sidePanel === SidePanelType.Chat}
-                        isPrivateChatDisplayed={isPrivateChatDisplayed}
-                        >
-                        {({
-                          pendingPublicNotification,
-                          pendingPrivateNotification,
-                          setLastCheckedPublicState,
-                          lastCheckedPublicState,
-                          lastCheckedPrivateState,
-                          setLastCheckedPrivateState,
-                          privateMessageCountMap,
-                          setPrivateMessageLastSeen,
-                        }) => (
-                          <>
-                            <Navbar
-                              sidePanel={sidePanel}
+      {queryComplete ? (
+        queryComplete || !callActive ? (
+          <>
+            <PropsProvider
+              value={{
+                rtcProps: {
+                  ...rtcProps,
+                  callActive,
+                },
+                callbacks,
+                styleProps,
+                mode: $config.EVENT_MODE
+                  ? ChannelProfile.LiveBroadcasting
+                  : ChannelProfile.Communication,
+              }}>
+              <RtcConfigure>
+                <DeviceConfigure userRole={rtcProps.role}>
+                  <RtmConfigure
+                    setRecordingActive={setRecordingActive}
+                    name={username}
+                    callActive={callActive}>
+                    <ScreenshareConfigure
+                      setLayout={setLayout}
+                      recordingActive={recordingActive}>
+                      <LiveStreamContextProvider
+                        setRtcProps={setRtcProps}
+                        isHost={isHost}>
+                        {callActive ? (
+                          <View style={style.full}>
+                            <NotificationControl
                               setSidePanel={setSidePanel}
-                              layout={layout}
-                              setLayout={setLayout}
-                              recordingActive={recordingActive}
-                              setRecordingActive={setRecordingActive}
-                              isHost={isHost}
-                              title={title}
-                              pendingMessageLength={
-                                pendingPublicNotification +
-                                pendingPrivateNotification
-                              }
-                              setLastCheckedPublicState={
-                                setLastCheckedPublicState
-                              }
-                            />
-                            <NetworkQualityProvider>
-                              <View
-                                style={[
-                                  style.videoView,
-                                  {backgroundColor: '#ffffff00'},
-                                ]}>
-                                {layout === Layout.Pinned ? (
-                                  <PinnedVideo />
-                                ) : (
-                                  <GridVideo setLayout={setLayout} />
-                                )}
-                                {sidePanel === SidePanelType.Participants ? (
-                                  <ParticipantsView
-                                    isHost={isHost}
-                                    // setParticipantsView={setParticipantsView}
+                              chatDisplayed={sidePanel === SidePanelType.Chat}
+                              isPrivateChatDisplayed={isPrivateChatDisplayed}>
+                              {({
+                                pendingPublicNotification,
+                                pendingPrivateNotification,
+                                setLastCheckedPublicState,
+                                lastCheckedPublicState,
+                                lastCheckedPrivateState,
+                                setLastCheckedPrivateState,
+                                privateMessageCountMap,
+                                setPrivateMessageLastSeen,
+                              }) => (
+                                <>
+                                  <Navbar
+                                    sidePanel={sidePanel}
                                     setSidePanel={setSidePanel}
+                                    layout={layout}
+                                    setLayout={setLayout}
+                                    recordingActive={recordingActive}
+                                    setRecordingActive={setRecordingActive}
+                                    isHost={isHost}
+                                    title={title}
+                                    pendingMessageLength={
+                                      pendingPublicNotification +
+                                      pendingPrivateNotification
+                                    }
+                                    setLastCheckedPublicState={
+                                      setLastCheckedPublicState
+                                    }
                                   />
-                                ) : (
-                                  <></>
-                                )}
-                                {sidePanel === SidePanelType.Chat ? (
-                                  $config.CHAT ? (
-                                    <Chat
-                                      setPrivateChatDisplayed={setPrivateChatDisplayed}
-                                      privateMessageCountMap={
-                                        privateMessageCountMap
-                                      }
-                                      pendingPublicNotification={
-                                        pendingPublicNotification
-                                      }
-                                      pendingPrivateNotification={
+                                  <NetworkQualityProvider>
+                                    <View
+                                      style={[
+                                        style.videoView,
+                                        {backgroundColor: '#ffffff00'},
+                                      ]}>
+                                      {layout === Layout.Pinned ? (
+                                        <PinnedVideo />
+                                      ) : (
+                                        <GridVideo setLayout={setLayout} />
+                                      )}
+                                      {sidePanel ===
+                                      SidePanelType.Participants ? (
+                                        <ParticipantsView
+                                          isHost={isHost}
+                                          // setParticipantsView={setParticipantsView}
+                                          setSidePanel={setSidePanel}
+                                        />
+                                      ) : (
+                                        <></>
+                                      )}
+                                      {sidePanel === SidePanelType.Chat ? (
+                                        $config.CHAT ? (
+                                          <Chat
+                                            setPrivateChatDisplayed={
+                                              setPrivateChatDisplayed
+                                            }
+                                            privateMessageCountMap={
+                                              privateMessageCountMap
+                                            }
+                                            pendingPublicNotification={
+                                              pendingPublicNotification
+                                            }
+                                            pendingPrivateNotification={
+                                              pendingPrivateNotification
+                                            }
+                                            setPrivateMessageLastSeen={
+                                              setPrivateMessageLastSeen
+                                            }
+                                            lastCheckedPrivateState={
+                                              lastCheckedPrivateState
+                                            }
+                                          />
+                                        ) : (
+                                          <></>
+                                        )
+                                      ) : (
+                                        <></>
+                                      )}
+                                      {sidePanel === SidePanelType.Settings ? (
+                                        <SettingsView
+                                          isHost={isHost}
+                                          // setParticipantsView={setParticipantsView}
+                                          setSidePanel={setSidePanel}
+                                        />
+                                      ) : (
+                                        <></>
+                                      )}
+                                    </View>
+                                  </NetworkQualityProvider>
+                                  {Platform.OS !== 'web' &&
+                                  sidePanel === SidePanelType.Chat ? (
+                                    <></>
+                                  ) : (
+                                    <Controls
+                                      setLayout={setLayout}
+                                      recordingActive={recordingActive}
+                                      setRecordingActive={setRecordingActive}
+                                      // chatDisplayed={chatDisplayed}
+                                      // setChatDisplayed={setChatDisplayed}
+                                      isHost={isHost}
+                                      // participantsView={participantsView}
+                                      // setParticipantsView={setParticipantsView}
+                                      sidePanel={sidePanel}
+                                      setSidePanel={setSidePanel}
+                                      pendingMessageLength={
+                                        pendingPublicNotification +
                                         pendingPrivateNotification
                                       }
-                                      setPrivateMessageLastSeen={
-                                        setPrivateMessageLastSeen
-                                      }
-                                      lastCheckedPrivateState={
-                                        lastCheckedPrivateState
+                                      setLastCheckedPublicState={
+                                        setLastCheckedPublicState
                                       }
                                     />
-                                  ) : (
-                                    <></>
-                                  )
-                                ) : (
-                                  <></>
-                                )}
-                                {sidePanel === SidePanelType.Settings ? (
-                                  <SettingsView
-                                    isHost={isHost}
-                                    // setParticipantsView={setParticipantsView}
-                                    setSidePanel={setSidePanel}
-                                  />
-                                ) : (
-                                  <></>
-                                )}
-                              </View>
-                            </NetworkQualityProvider>
-                            {Platform.OS !== 'web' &&
-                            sidePanel === SidePanelType.Chat ? (
-                              <></>
-                            ) : (
-                              <Controls
-                                setLayout={setLayout}
-                                recordingActive={recordingActive}
-                                setRecordingActive={setRecordingActive}
-                                // chatDisplayed={chatDisplayed}
-                                // setChatDisplayed={setChatDisplayed}
-                                isHost={isHost}
-                                // participantsView={participantsView}
-                                // setParticipantsView={setParticipantsView}
-                                sidePanel={sidePanel}
-                                setSidePanel={setSidePanel}
-                                pendingMessageLength={
-                                  pendingPublicNotification +
-                                  pendingPrivateNotification
-                                }
-                                setLastCheckedPublicState={
-                                  setLastCheckedPublicState
-                                }
-                              />
-                            )}
-                          </>
+                                  )}
+                                </>
+                              )}
+                            </NotificationControl>
+                          </View>
+                        ) : $config.PRECALL ? (
+                          <Precall
+                            error={errorMessage}
+                            username={username}
+                            setUsername={setUsername}
+                            setCallActive={setCallActive}
+                            queryComplete={queryComplete}
+                            title={title}
+                          />
+                        ) : (
+                          <></>
                         )}
-                      </NotificationControl>
-                    </View>
-                  ) : $config.PRECALL ? (
-                    <Precall
-                      error={errorMessage}
-                      username={username}
-                      setUsername={setUsername}
-                      setCallActive={setCallActive}
-                      queryComplete={queryComplete}
-                      title={title}
-                    />
-                  ) : (
-                    <></>
-                  )}
-                </RtmConfigure>
-              </DeviceConfigure>
-            </RtcConfigure>
-          </PropsProvider>
-        </>
+                      </LiveStreamContextProvider>
+                    </ScreenshareConfigure>
+                  </RtmConfigure>
+                </DeviceConfigure>
+              </RtcConfigure>
+            </PropsProvider>
+          </>
+        ) : (
+          <View style={style.loader}>
+            <View style={style.loaderLogo}>{hasBrandLogo && <Logo />}</View>
+            <Text style={style.loaderText}>Starting Call. Just a second.</Text>
+          </View>
+        )
       ) : (
-        <View style={style.loader}>
-          <View style={style.loaderLogo}>{hasBrandLogo && <Logo />}</View>
-          <Text style={style.loaderText}>Starting Call. Just a second.</Text>
-        </View>
+        <></>
       )}
     </>
   );
@@ -519,6 +556,7 @@ const styleProps = {
     muteRemoteVideo: styles.remoteButton,
     remoteSwap: styles.remoteButton,
     minCloseBtnStyles: styles.minCloseBtn,
+    liveStreamHostControlBtns: styles.liveStreamHostControlBtns,
   },
   BtnStyles: styles.remoteButton,
 };

package/template/src/subComponents/ChatBubble.tsx

@@ -19,7 +19,10 @@ const ChatBubble = (props: channelMessage) => {
   const {userList} = useContext(ChatContext);
   const {primaryColor} = useContext(ColorContext);
   let {isLocal, msg, ts, uid} = props;
-  let time = new Date(ts).getHours() + ':' + new Date(ts).getMinutes();
+  let time =
+    new Date(parseInt(ts)).getHours() +
+    ':' +
+    new Date(parseInt(ts)).getMinutes();
   const handleUrl = (url: string) => {
     if (Platform.OS === 'web') {
       window.open(url, '_blank');

package/template/src/subComponents/ChatContainer.tsx

@@ -13,12 +13,10 @@ import React, {useContext, useRef} from 'react';
 import {
   View,
   ScrollView,
-  Text,
-  TouchableOpacity,
   StyleSheet,
-  Image,
   Platform,
-  useWindowDimensions
+  Text,
+  useWindowDimensions,
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
@@ -32,14 +30,17 @@ import TextWithTooltip from './TextWithTooltip';
  * and maps it to a ChatBubble
  */
 const ChatContainer = (props: any) => {
+  const {userList} = useContext(ChatContext);
   const {height, width} = useWindowDimensions();
-  const {selectedUser, privateActive, setPrivateActive, selectedUsername} =
+  const {selectedUserID, privateActive, setPrivateActive, selectedUsername} =
     props;
   const {messageStore, localUid, privateMessageStore} = useContext(ChatContext);
+
   const scrollViewRef = useRef<ScrollView>(null);
+
   return (
     <View style={style.containerView}>
-      {privateActive ? (
+      {privateActive && (
         <View style={style.row}>
           <View style={style.backButton}>
             <BtnTemplate
@@ -48,12 +49,19 @@ const ChatContainer = (props: any) => {
               name={'backBtn'}
             />
           </View>
-          <View style={{flex:1}}>
-            <TextWithTooltip style={[style.name, {flexShrink: 1,fontSize: RFValue(16, height > width ? height : width)}]} value={selectedUsername} />
+          <View style={{flex: 1}}>
+            <TextWithTooltip
+              style={[
+                style.name,
+                {
+                  flexShrink: 1,
+                  fontSize: RFValue(16, height > width ? height : width),
+                },
+              ]}
+              value={selectedUsername}
+            />
           </View>
         </View>
-      ) : (
-        <></>
       )}
       <ScrollView
         ref={scrollViewRef}
@@ -72,8 +80,8 @@ const ChatContainer = (props: any) => {
               />
             );
           })
-        ) : privateMessageStore[selectedUser.uid] ? (
-          privateMessageStore[selectedUser.uid].map((message: any) => {
+        ) : privateMessageStore[selectedUserID] ? (
+          privateMessageStore[selectedUserID].map((message: any) => {
             return (
               <ChatBubble
                 isLocal={localUid === message.uid}
@@ -87,6 +95,11 @@ const ChatContainer = (props: any) => {
         ) : (
           <></>
         )}
+        {userList[selectedUserID]?.offline && (
+          <View style={style.infoTextView}>
+            <Text style={style.infoText}>User is offline</Text>
+          </View>
+        )}
       </ScrollView>
     </View>
   );
@@ -97,16 +110,16 @@ const style = StyleSheet.create({
   row: {
     flexDirection: 'row',
     marginTop: 2,
-    alignItems: 'center',
+    alignItems: 'baseline',
     paddingVertical: 10,
     ...Platform.select({
-      android:{
-        height: 40
+      android: {
+        height: 40,
+      },
+      ios: {
+        height: 40,
       },
-      ios:{
-        height: 40
-      }
-    })
+    }),
   },
   backButton: {
     marginHorizontal: 10,
@@ -117,11 +130,22 @@ const style = StyleSheet.create({
     fontWeight: Platform.OS === 'web' ? '500' : '700',
     color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
-    marginRight: 10
+    marginRight: 10,
   },
   backIcon: {
     width: 20,
     height: 20,
   },
+  infoTextView: {
+    marginVertical: 2,
+    flexDirection: 'row',
+  },
+  infoText: {
+    color: $config.PRIMARY_FONT_COLOR + '60',
+    fontWeight: '500',
+    fontSize: 14,
+    flex: 1,
+    textAlign: 'center',
+  },
 });
 export default ChatContainer;

package/template/src/subComponents/ChatInput.tsx

@@ -31,15 +31,11 @@ const ChatInput = (props: any) => {
   const {primaryColor} = useContext(ColorContext);
   const [message, onChangeMessage] = useState('');
   // const [height, setHeight] = useState(0);
-  const {privateActive, selectedUser} = props;
+  const {privateActive, selectedUserID} = props;
   const {sendMessage, sendMessageToUid} = useContext(ChatContext);
 
   return (
-    <View
-      style={[
-        style.inputView,
-        {borderColor: primaryColor, height: 40}
-      ]}>
+    <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>
       <TextInput
         value={message}
         // onContentSizeChange={(event) => {
@@ -64,13 +60,10 @@ const ChatInput = (props: any) => {
           if (!privateActive) {
             sendMessage(message);
             onChangeMessage('');
-            // setHeight(40);
           } else {
-            sendMessageToUid(message, selectedUser.uid);
+            sendMessageToUid(message, selectedUserID);
             onChangeMessage('');
-            // setHeight(40);
           }
-          // UIManager.focus(inputRef.current);
         }}
         placeholder="Type your message.."
         placeholderTextColor={$config.PRIMARY_FONT_COLOR}
@@ -84,7 +77,7 @@ const ChatInput = (props: any) => {
             onChangeMessage('');
             // setHeight(40);
           } else {
-            sendMessageToUid(message, selectedUser.uid);
+            sendMessageToUid(message, selectedUserID);
             onChangeMessage('');
             // setHeight(40);
           }
@@ -116,7 +109,6 @@ const style = StyleSheet.create({
   },
   chatInputButton: {
     width: 30,
-    // width: '10%',
     marginRight: 0,
     height: 30,
     borderRadius: 30,

package/template/src/subComponents/Checkbox.native.tsx

@@ -22,13 +22,14 @@ const Checkbox = (props: any) => {
     <CheckBox
       value={urlCheckbox}
       onValueChange={setUrlCheckbox}
+      disabled={props?.disabled}
       tintColors={{
-        true: $config.PRIMARY_COLOR,
-        false: $config.PRIMARY_FONT_COLOR + 80,
+        true: props?.disabled ? 'grey' : $config.PRIMARY_COLOR,
+        false: props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80,
       }}
-      tintColor={$config.PRIMARY_FONT_COLOR + 80}
-      onCheckColor={$config.PRIMARY_COLOR}
-      onTintColor={$config.PRIMARY_COLOR}
+      tintColor={props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80}
+      onCheckColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
+      onTintColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
     />
   );
 };