agora-appbuilder-core 2.0.2 → 2.0.3-rc1

package/template/src/components/ParticipantsView.tsx

@@ -15,43 +15,32 @@ import {
   Text,
   StyleSheet,
   Platform,
-  TouchableOpacity,
-  Image,
   ScrollView,
   Dimensions,
-  useWindowDimensions
 } from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
-import {MinUidConsumer} from '../../agora-rn-uikit';
-import {MaxUidConsumer} from '../../agora-rn-uikit';
-import {LocalAudioMute, LocalVideoMute} from '../../agora-rn-uikit';
-import {LocalUserContext} from '../../agora-rn-uikit';
+import {PropsContext, ClientRole} from '../../agora-rn-uikit';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
-import RemoteAudioMute from '../subComponents/RemoteAudioMute';
-import RemoteVideoMute from '../subComponents/RemoteVideoMute';
-import RemoteEndCall from '../subComponents/RemoteEndCall';
 import chatContext from './ChatContext';
-import Clipboard from '../subComponents/Clipboard';
-import ColorContext from './ColorContext';
-import {gql, useQuery} from '@apollo/client';
-import icons from '../assets/icons';
-import platform from '../subComponents/Platform';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {UserType} from './RTMConfigure';
-import styles from './styles';
-import TextWithToolTip from '../subComponents/TextWithTooltip'
+import ParticipantSectionTitle from './participants/ParticipantSectionTitle';
+import AllHostParticipants from './participants/AllHostParticipants';
+import AllAudienceParticipants from './participants/AllAudienceParticipants';
+import CurrentLiveStreamRequestsView from '../subComponents/livestream/CurrentLiveStreamRequestsView';
+import {
+  ParticipantContextProvider,
+  ParticipantContextConsumer,
+} from './participants/context/ParticipantContext';
 
 const ParticipantView = (props: any) => {
-  const {height, width} = useWindowDimensions();
-  const {userList, localUid} = useContext(chatContext);
-  const {primaryColor} = useContext(ColorContext);
+  const {userList} = useContext(chatContext);
+  const {rtcProps} = useContext(PropsContext);
+
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isSmall = dim[0] < 700;
-  let fontSize = Platform.OS === 'web' ? 14 : 16
+
   return (
     <View
       style={
@@ -61,108 +50,118 @@ const ParticipantView = (props: any) => {
             : style.participantView
           : style.participantViewNative
       }>
-      <TouchableOpacity style={style.backButton}>
-        {/* onPress={() => props.setSidePanel(SidePanelType.None)}> */}
-        {/* <Image
-          resizeMode={'contain'}
-          style={style.backIcon}
-          source={{uri: icons.backBtn}}
-        /> */}
-        <Text style={style.heading}>Participants</Text>
-      </TouchableOpacity>
-      <ScrollView style={{flex: 1}}>
-        <MinUidConsumer>
-          {(minUsers) => (
-            <MaxUidConsumer>
-              {(maxUser) =>
-                [...minUsers, ...maxUser].map((user) =>
-                  user.uid === 'local' ? (
-                    <View style={style.participantContainer} key={user.uid}>
-                      <View style={{flex:1}}>
-                        <TextWithToolTip 
-                          value={userList[localUid] ? userList[localUid].name + ' ' : 'You '} 
-                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
-                        />
-                      </View>
-                      <View style={style.participantButtonContainer}>
-                        <LocalUserContext>
-                          <View
-                            style={[style.actionBtnIcon, {marginRight: 10}]}>
-                            <LocalAudioMute btnText=" " variant="text" />
-                          </View>
-                          <View style={style.actionBtnIcon}>
-                            <LocalVideoMute btnText=" " variant="text" />
-                          </View>
-                        </LocalUserContext>
-                      </View>
-                    </View>
-                  ) : user.uid === 1 ? (
-                    <View style={style.participantContainer} key={user.uid}>
-                      <View style={{flex:1}}>
-                        <TextWithToolTip 
-                          value={userList[localUid]
-                            ? userList[localUid].name + "'s screenshare "
-                            : 'Your screenshare '} 
-                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
-                        />
-                      </View>
-                      <View style={style.dummyView}>
-                          {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
-                          <Text>local screen sharing</Text>
-                      </View>
-                    </View>
-                  ) : (
-                    <View style={style.participantContainer} key={user.uid} >
-                      <View style={{flex:1}}>
-                        <TextWithToolTip 
-                          value={userList[user.uid]
-                            ? userList[user.uid].name + ' '
-                            : String(user.uid)[0] === '1'
-                            ? 'PSTN User '
-                            : 'User '} 
-                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
-                        />
-                      </View>
-                      {userList[user.uid]?.type !== UserType.ScreenShare ? (
-                        <View style={style.participantButtonContainer}>
-                          <View style={style.actionBtnIcon}>
-                            <RemoteEndCall
-                              uid={user.uid}
-                              isHost={props.isHost}
-                            />
-                          </View>
-                          <View
-                            style={[
-                              style.actionBtnIcon,
-                              {marginLeft: 10, marginRight: 5},
-                            ]}>
-                            <RemoteAudioMute
-                              uid={user.uid}
-                              audio={user.audio}
-                              isHost={props.isHost}
-                            />
-                          </View>
-                          <View style={[style.actionBtnIcon, {marginRight:5}]}>
-                            <RemoteVideoMute
-                              uid={user.uid}
-                              video={user.video}
+      <View style={[style.padding10]}>
+        <View style={style.lineUnderHeading}>
+          <Text style={style.mainHeading}>Participants</Text>
+        </View>
+      </View>
+      <ScrollView style={[style.bodyContainer, style.padding10]}>
+        {$config.EVENT_MODE ? (
+          // Live streaming is true
+          <ParticipantContextProvider>
+            {/* Host and New host view */}
+            {rtcProps?.role == ClientRole.Broadcaster &&
+              (props.isHost ? (
+                /**
+                 * Original Host
+                 * a) Can view streaming requests
+                 * b) Can view all hosts with remote controls
+                 */
+                <>
+                  {/* a) Live streaming view */}
+                  <View style={style.participantsection}>
+                    <CurrentLiveStreamRequestsView
+                      p_style={style}
+                      userList={userList}
+                    />
+                  </View>
+                  {/* b) Host view with remote controls*/}
+                  <ParticipantContextConsumer>
+                    {({hostCount}) => {
+                      return (
+                        <View style={style.participantsection}>
+                          <ParticipantSectionTitle
+                            title="Host"
+                            count={hostCount}
+                          />
+                          <View style={style.participantContainer}>
+                            <AllHostParticipants
+                              p_style={style}
                               isHost={props.isHost}
                             />
                           </View>
                         </View>
-                      ) : (
-                        <View style={style.dummyView}>
-                          {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
-                          <Text>remote screen sharing</Text>
-                        </View>
-                      )}
+                      );
+                    }}
+                  </ParticipantContextConsumer>
+                </>
+              ) : (
+                /** New Host ( earlier was 'audience' and now is host )
+                 *  a) Can view all hosts without remote controls
+                 */
+                <ParticipantContextConsumer>
+                  {({hostList, hostCount}) => {
+                    return (
+                      <View style={style.participantsection}>
+                        <ParticipantSectionTitle
+                          title="Host"
+                          count={hostCount}
+                        />
+                        <AllAudienceParticipants
+                          p_style={style}
+                          participantList={hostList}
+                          isHost={props.isHost}
+                        />
+                      </View>
+                    );
+                  }}
+                </ParticipantContextConsumer>
+              ))}
+            {/**
+             *  Audience views all hosts without remote controls
+             */}
+            {rtcProps?.role == ClientRole.Audience && (
+              <ParticipantContextConsumer>
+                {({hostList, hostCount}) => {
+                  return (
+                    <View style={style.participantsection}>
+                      <ParticipantSectionTitle title="Host" count={hostCount} />
+                      <AllAudienceParticipants
+                        participantList={hostList}
+                        p_style={style}
+                        isHost={props.isHost}
+                      />
                     </View>
-                  ),
-                )
-              }
-            </MaxUidConsumer>
-          )}
-        </MinUidConsumer>
+                  );
+                }}
+              </ParticipantContextConsumer>
+            )}
+            {/* Everyone can see audience */}
+            <ParticipantContextConsumer>
+              {({audienceList, audienceCount}) => {
+                return (
+                  <View style={style.participantsection}>
+                    <ParticipantSectionTitle
+                      title="Audience"
+                      count={audienceCount}
+                    />
+                    <AllAudienceParticipants
+                      p_style={style}
+                      participantList={audienceList}
+                      isHost={props.isHost}
+                    />
+                  </View>
+                );
+              }}
+            </ParticipantContextConsumer>
+          </ParticipantContextProvider>
+        ) : (
+          <View style={style.participantsection}>
+            <View style={style.participantContainer}>
+              <AllHostParticipants p_style={style} isHost={props.isHost} />
+            </View>
+          </View>
+        )}
       </ScrollView>
       <View
         style={{
@@ -180,18 +179,23 @@ const ParticipantView = (props: any) => {
 };
 
 const style = StyleSheet.create({
+  padding10: {
+    padding: 10,
+  },
+  lineUnderHeading: {
+    borderBottomWidth: 2,
+    borderBottomColor: $config.PRIMARY_COLOR,
+  },
   participantView: {
     width: '20%',
     minWidth: 200,
     maxWidth: 300,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
     flex: 1,
-    paddingTop: 20,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
     shadowColor: $config.PRIMARY_FONT_COLOR + '80',
     shadowOpacity: 0.5,
     shadowOffset: {width: -2, height: 0},
     shadowRadius: 3,
-    // borderLeftWidth: 1
   },
   participantViewNative: {
     position: 'absolute',
@@ -202,82 +206,65 @@ const style = StyleSheet.create({
     top: 0,
     backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
-  heading: {
-    fontSize: 24,
-    fontWeight: '700',
-    textAlign: 'center',
+  bodyContainer: {
+    flex: 1,
+  },
+  participantsection: {
+    marginBottom: 25,
+  },
+  mainHeading: {
+    fontSize: 20,
+    letterSpacing: 0.8,
+    lineHeight: 30,
+    color: $config.PRIMARY_FONT_COLOR,
+  },
+  infoText: {
+    fontSize: 12,
+    letterSpacing: 0.8,
+    fontStyle: 'italic',
     color: $config.PRIMARY_FONT_COLOR,
   },
   participantContainer: {
     width: '100%',
     display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    marginVertical: 2,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    // height: 10,
-    paddingLeft: 10,
-    paddingRight: 10,
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    flexDirection: 'column',
+    paddingTop: 10,
+    paddingBottom: 20,
   },
-  participantText: {
-    flex: 1,
-    fontWeight: '500',
+  participantRow: {
+    width: '100%',
+    display: 'flex',
     flexDirection: 'row',
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 20,
-    paddingHorizontal: 5,
-    textAlign:'left',
-    flexShrink: 1 
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
   },
-  participantButtonContainer: {
-    flex: 0.5,
+  participantActionContainer: {
     flexDirection: 'row',
-    paddingRight: 5,
-    justifyContent:'flex-end'
-  },
-  secondaryBtn: {
+    paddingRight: 10,
     alignSelf: 'center',
-    width: '60%',
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 3,
-    maxWidth: 400,
-    minHeight: 42,
-    minWidth: 200,
-    marginTop: 'auto',
+    alignItems: 'center',
   },
-  secondaryBtnText: {
-    width: '100%',
-    height: 45,
-    lineHeight: 45,
-    fontSize: 16,
-    textAlign: 'center',
-    fontWeight: '500',
-    textAlignVertical: 'center',
-    color: $config.PRIMARY_COLOR,
+  actionBtnIcon: {
+    width: 25,
+    height: 25,
   },
-  backButton: {
-    // marginLeft: 5,
+  participantText: {
+    lineHeight: 24,
+    fontSize: Platform.OS === 'web' ? 18 : 16,
     flexDirection: 'row',
-    justifyContent: 'center',
-    alignSelf: 'center',
+    letterSpacing: 0.3,
+    color: $config.PRIMARY_FONT_COLOR,
+    fontWeight: '300',
   },
-  backIcon: {
-    width: 20,
-    height: 12,
-    alignSelf: 'center',
-    justifyContent: 'center',
-    tintColor: $config.PRIMARY_FONT_COLOR,
+  participantTextSmall: {
+    fontSize: Platform.OS === 'web' ? 14 : 12,
   },
-  actionBtnIcon: {
-    width: 25,
-    height: 25,
+  dummyView: {
+    flex: 0.5,
+    opacity: 0,
+    marginHorizontal: 5,
   },
-  dummyView:{
-    flex: 0.5,opacity:0, marginHorizontal: 5
-  }
 });
 
 export default ParticipantView;

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

@@ -9,39 +9,60 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  ImageBackground,
-  Platform,
-} from 'react-native';
+import React, {useContext, useEffect} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
 import {MaxUidContext} from '../../agora-rn-uikit';
 import {MaxVideoView} from '../../agora-rn-uikit';
 import {
   LocalAudioMute,
   LocalVideoMute,
   SwitchCamera,
+  ClientRole,
+  PropsContext,
 } from '../../agora-rn-uikit';
 import {LocalUserContext} from '../../agora-rn-uikit';
 import {RtcContext} from '../../agora-rn-uikit';
-// import ColorContext from './ColorContext';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import PrimaryButton from '../atoms/PrimaryButton';
 
 const Precall = (props: any) => {
-  // const {primaryColor} = useContext(ColorContext);
   const maxUsers = useContext(MaxUidContext);
   const rtc = useContext(RtcContext);
+  const {rtcProps} = useContext(PropsContext);
   rtc.RtcEngine.startPreview();
-  const {setCallActive, queryComplete, username, setUsername, error} = props;
+
+  const {setCallActive, queryComplete, username, setUsername, error, title} =
+    props;
+
+  const [buttonText, setButtonText] = React.useState('Join Room');
+
+  useEffect(() => {
+    let clientRole = '';
+    if (rtcProps?.role == 1) {
+      clientRole = 'Host';
+    }
+    if (rtcProps?.role == 2) {
+      clientRole = 'Audience';
+    }
+    setButtonText(
+      $config.EVENT_MODE ? `Join Room as ${clientRole}` : `Join Room`,
+    );
+  }, [rtcProps?.role]);
+
+  const isAudienceInLiveStreaming = () =>
+    $config.EVENT_MODE && rtcProps?.role == ClientRole.Audience;
+
+  const meetingTitle = () => (
+    <>
+      <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
+        {title}
+      </Text>
+      <View style={{height: 25}} />
+    </>
+  );
+
   return (
-    // <ImageBackground
-    //   style={style.full}
-    //   resizeMode={'cover'}>
     <View style={style.full}>
       <View style={style.heading}>
         <Text style={style.headingText}>Precall </Text>
@@ -57,70 +78,59 @@ const Precall = (props: any) => {
         }}>
         {error ? <Error error={error} showBack={true} /> : <></>}
       </View>
-      <View style={style.full}>
-        <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
-      </View>
-      {Platform.OS === 'ios' ? (
-        <View style={style.textInputHolder}>
-          <TextInput
-            value={username}
-            onChangeText={(text) => {
-              setUsername(text);
-            }}
-            onSubmitEditing={() => {}}
-            placeholder={queryComplete ? 'Display name*' : 'Getting name...'}
-          />
-        </View>
-      ) : (
-        <View style={style.textInputHolder}>
-          <TextInput
-            value={username}
-            onChangeText={(text) => {
-              setUsername(text);
-            }}
-            onSubmitEditing={() => {}}
-            placeholder={queryComplete ? 'Display name*' : 'Getting name...'}
-            editable={queryComplete}
-          />
+      {meetingTitle()}
+      {!isAudienceInLiveStreaming() && (
+        <View style={style.full}>
+          <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
         </View>
       )}
-      <View style={{height: 20}} />
-      <View style={style.controls}>
-        <LocalUserContext>
-          <View style={style.width50}>
-            <LocalVideoMute />
-          </View>
-          <View style={style.width50} />
-          <View style={style.width50}>
-            <LocalAudioMute />
-          </View>
-          <View style={style.width50} />
-          <View style={style.width50}>
-            <SwitchCamera />
-          </View>
-        </LocalUserContext>
+      <View style={style.textInputHolder}>
+        <TextInput
+          value={username}
+          onChangeText={(text) => {
+            setUsername(text);
+          }}
+          onSubmitEditing={() => {}}
+          placeholder={queryComplete ? 'Display name*' : 'Getting name...'}
+          editable={queryComplete}
+        />
       </View>
-      <View
-        // onPress={() => setCallActive(true)}
-        // disabled={!queryComplete}
-        style={{marginBottom: 50}}>
-        {/* <Text style={style.buttonText}> */}
-        {/* {queryComplete ? 'Join Room' : 'Loading...'} */}
-        {/* </Text> */}
-        {/* </TouchableOpacity> */}
+      <View style={{height: 20}} />
+      {!isAudienceInLiveStreaming() && (
+        <View style={style.controls}>
+          <LocalUserContext>
+            <View style={style.width50}>
+              <LocalVideoMute />
+            </View>
+            <View style={style.width50} />
+            <View style={style.width50}>
+              <LocalAudioMute />
+            </View>
+            <View style={style.width50} />
+            <View style={style.width50}>
+              <SwitchCamera />
+            </View>
+          </LocalUserContext>
+        </View>
+      )}
+      <View style={{marginBottom: 50, alignItems: 'center'}}>
         <PrimaryButton
-          text={'Join Room'}
+          text={buttonText}
           disabled={!queryComplete || username.trim() === ''}
           onPress={() => setCallActive(true)}
         />
       </View>
-      {/* </ImageBackground> */}
     </View>
   );
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
+  full: {
+    flex: 1,
+    paddingLeft: 15,
+    paddingRight: 15,
+    justifyContent: 'center',
+  },
   heading: {flex: 0.1, justifyContent: 'center'},
   headingText: {
     fontSize: 24,
@@ -130,7 +140,7 @@ const style = StyleSheet.create({
   },
   textInputHolder: {
     flex: 0.1,
-    alignSelf: 'center',
+    alignItems: 'center',
     paddingTop: 20,
     width: '100%',
   },
@@ -141,8 +151,6 @@ const style = StyleSheet.create({
     borderWidth: 2,
     color: $config.PRIMARY_FONT_COLOR,
     fontSize: 16,
-    // marginBottom: 15,
-    // maxWidth: 400,
     minHeight: 45,
     alignSelf: 'center',
   },
@@ -180,6 +188,12 @@ const style = StyleSheet.create({
     textAlignVertical: 'center',
     color: $config.SECONDARY_FONT_COLOR,
   },
+  titleHeading: {
+    fontSize: 22,
+    fontWeight: '700',
+    textAlign: 'center',
+    color: $config.SECONDARY_FONT_COLOR,
+  },
 });
 
 export default Precall;