agora-appbuilder-core 2.0.2 → 2.1.0

package/template/src/components/participants/ParticipantName.tsx

@@ -0,0 +1,47 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, StyleSheet, useWindowDimensions, Platform} from 'react-native';
+import TextWithToolTip from '../../subComponents/TextWithTooltip';
+import {RFValue} from 'react-native-responsive-fontsize';
+
+const ParticipantName = ({value}: {value: string}) => {
+  const {height, width} = useWindowDimensions();
+  const fontSize = Platform.OS === 'web' ? 14 : 16;
+  return (
+    <View style={{flex: 1}}>
+      <TextWithToolTip
+        value={value}
+        style={[
+          style.participantText,
+          {
+            fontSize: RFValue(fontSize, height > width ? height : width),
+          },
+        ]}
+      />
+    </View>
+  );
+};
+export default ParticipantName;
+
+const style = StyleSheet.create({
+  participantText: {
+    flex: 1,
+    fontWeight: '500',
+    flexDirection: 'row',
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 20,
+    paddingHorizontal: 5,
+    textAlign: 'left',
+    flexShrink: 1,
+  },
+});

package/template/src/components/participants/ParticipantSectionTitle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+
+interface PropsInterface {
+  title: string;
+  count?: number;
+}
+
+export default function ParticipantSectionTitle(props: PropsInterface) {
+  const {title, count = 0} = props;
+  return (
+    <Text style={style.subheading}>
+      {title} {count > 0 && <Text style={style.count}>({count})</Text>}
+    </Text>
+  );
+}
+
+const style = StyleSheet.create({
+  subheading: {
+    fontSize: 15,
+    letterSpacing: 0.8,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+  },
+  count: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+});

package/template/src/components/participants/RemoteParticipants.tsx

@@ -0,0 +1,69 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, Text} from 'react-native';
+import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
+import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
+import {ApprovedLiveStreamControlsView} from '../../subComponents/livestream';
+import RemoteEndCall from '../../subComponents/RemoteEndCall';
+import ParticipantName from './ParticipantName';
+
+interface remoteParticipantsInterface {
+  p_styles: any;
+  name: string;
+  user: any;
+  showControls: boolean;
+  isHost: boolean;
+}
+
+const RemoteParticipants = (props: remoteParticipantsInterface) => {
+  const {p_styles, user, name, showControls, isHost} = props;
+
+  return (
+    <View style={p_styles.participantRow}>
+      <ParticipantName value={name} />
+      {showControls ? (
+        <View style={p_styles.participantActionContainer}>
+          {$config.EVENT_MODE && (
+            <ApprovedLiveStreamControlsView
+              p_styles={p_styles}
+              uid={user.uid}
+            />
+          )}
+          <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>
+            <RemoteEndCall uid={user.uid} isHost={isHost} />
+          </View>
+          <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>
+            <RemoteAudioMute
+              uid={user.uid}
+              audio={user.audio}
+              isHost={isHost}
+            />
+          </View>
+          <View style={[p_styles.actionBtnIcon]}>
+            <RemoteVideoMute
+              uid={user.uid}
+              video={user.video}
+              isHost={isHost}
+            />
+          </View>
+        </View>
+      ) : (
+        <></>
+        // <View style={p_styles.dummyView}>
+        //   <Text>Remote screen sharing</Text>
+        // </View>
+      )}
+    </View>
+  );
+};
+export default RemoteParticipants;

package/template/src/components/participants/ScreenshareParticipants.tsx

@@ -0,0 +1,28 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {View, Text} from 'react-native';
+import ParticipantName from './ParticipantName';
+
+const ScreenshareParticipants = (props: any) => {
+  const {p_styles, name} = props;
+  return (
+    <View style={p_styles.participantRow}>
+      <ParticipantName value={name} />
+      <View style={p_styles.dummyView}>
+        {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
+        <Text>local screen sharing</Text>
+      </View>
+    </View>
+  );
+};
+export default ScreenshareParticipants;

package/template/src/components/participants/context/ParticipantContext.tsx

@@ -0,0 +1,97 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {createContext} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
+import chatContext from '../../ChatContext';
+import {UserType} from '../../../components/RTMConfigure';
+import {filterObject} from '../../../utils';
+import {
+  ClientRole,
+  MinUidContext,
+  MaxUidContext,
+} from '../../../../agora-rn-uikit';
+
+interface ParticipantContext {
+  hostList: any;
+  audienceList: any;
+  hostCount: number;
+  audienceCount: number;
+}
+
+const ParticipantContext = createContext(null as unknown as ParticipantContext);
+
+export const ParticipantContextProvider: React.FC = (props: any) => {
+  const [hostCount, setHostCount] = useState(0);
+  const [hostList, setHostList] = useState({});
+  const [audienceList, setAudienceList] = useState({});
+  const [audienceCount, setAudienceCount] = useState(0);
+
+  const {userList, localUid} = useContext(chatContext);
+  // For host list which are publishing
+  const min = useContext(MinUidContext);
+  const max = useContext(MaxUidContext);
+
+  useEffect(() => {
+    const hostList = [...min, ...max].reduce((acc, cur) => {
+      if (
+        cur.uid === 'local' &&
+        userList[localUid]?.role == ClientRole.Audience
+      ) {
+        // If local user skip
+        return acc;
+      }
+      const userUID =
+        cur.uid === 'local'
+          ? localUid
+          : cur.uid == 1
+          ? userList[localUid].screenUid
+          : cur.uid;
+
+      return {
+        ...acc,
+        [userUID]: {...userList[userUID]},
+      };
+    }, {});
+    setHostList(hostList);
+    setHostCount(Object.keys(hostList).length);
+  }, [min, max, userList]);
+
+  useEffect(() => {
+    if (Object.keys(userList).length !== 0) {
+      const audienceList = filterObject(
+        userList,
+        ([k, v]) =>
+          v?.type === UserType.Normal &&
+          v?.role == ClientRole.Audience &&
+          !v.offline,
+      );
+      setAudienceList(audienceList);
+      setAudienceCount(Object.keys(audienceList).length);
+    }
+  }, [userList]);
+
+  return (
+    <ParticipantContext.Provider
+      value={{
+        hostList,
+        audienceList,
+        hostCount,
+        audienceCount,
+      }}>
+      {props.children}
+    </ParticipantContext.Provider>
+  );
+};
+
+export const ParticipantContextConsumer = ParticipantContext.Consumer;
+
+export default ParticipantContext;

package/template/src/components/styles.ts

@@ -65,6 +65,19 @@ const styles = {
     marginHorizontal: 0,
     backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
   },
+  liveStreamHostControlBtns: {
+    width: 20,
+    height: 20,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    marginHorizontal: 0,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+  },
   minCloseBtn: {
     alignItems: 'center',
     justifyContent: 'center',

package/template/src/pages/Create.tsx

@@ -10,7 +10,14 @@
 *********************************************
 */
 import React, {useEffect, useState} from 'react';
-import {View, Text, StyleSheet, Dimensions, ScrollView, Platform} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+  Platform,
+} from 'react-native';
 import {useHistory} from '../components/Router';
 import Checkbox from '../subComponents/Checkbox';
 import {gql, useMutation} from '@apollo/client';
@@ -74,10 +81,10 @@ const Create = () => {
   console.log('mutation data', data);
 
   useEffect(() => {
-    if(Platform.OS === 'web'){
+    if (Platform.OS === 'web') {
       document.title = $config.APP_NAME;
     }
-  },[])
+  }, []);
 
   const createRoom = () => {
     if (roomTitle !== '') {
@@ -121,7 +128,7 @@ const Create = () => {
     //   style={style.full}
     //   resizeMode={'cover'}>
     // <KeyboardAvoidingView behavior={'height'} style={style.main}>
-    <ScrollView contentContainerStyle={style.main}>      
+    <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
         {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
@@ -141,16 +148,20 @@ const Create = () => {
               />
               <View style={{paddingVertical: 10}}>
                 <View style={style.checkboxHolder}>
-                  <Checkbox
-                    value={hostControlCheckbox}
-                    onValueChange={setHostControlCheckbox}
-                  />
-                  <Text style={style.checkboxTitle}>
-                    Restrict Host Controls{' '}
-                    {!hostControlCheckbox
-                      ? '(Everyone is a Host)'
-                      : '(Separate host link)'}
-                  </Text>
+                  {$config.EVENT_MODE ? (
+                    <></>
+                  ) : (
+                    <>
+                      <Checkbox
+                        disabled={$config.EVENT_MODE}
+                        value={hostControlCheckbox}
+                        onValueChange={setHostControlCheckbox}
+                      />
+                      <Text style={style.checkboxTitle}>
+                        Restrict Host Controls (Separate host link)
+                      </Text>
+                    </>
+                  )}
                 </View>
                 {$config.PSTN ? (
                   <View style={style.checkboxHolder}>