agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/components/NetworkQualityContext.tsx

@@ -10,9 +10,10 @@
 *********************************************
 */
 import React, {createContext, useContext, useState} from 'react';
-import {RtcContext} from '../../agora-rn-uikit';
+import {RtcContext, UidType, useLocalUid} from '../../agora-rn-uikit';
 import useMount from './useMount';
 import icons from '../assets/icons';
+import {NetworkQualities} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  * Network Icons container object with color and string mapping to network quality stat [ 0 - 8]
@@ -30,59 +31,61 @@ export const networkIconsObject: {
   [key: number]: {
     icon: string;
     tint: string;
-    text: string;
+    text: NetworkQualities;
   };
 } = {
   0: {
     icon: icons.networkIcons['Unsupported'],
     tint: 'primary',
-    text: 'Unknown',
+    text: 'unknown',
   },
   1: {
     icon: icons.networkIcons['Excellent'],
     tint: '#2BD900',
-    text: 'Excellent',
+    text: 'excellent',
   },
   2: {
     icon: icons.networkIcons['Good'],
     tint: '#FFEE00',
-    text: 'Good',
+    text: 'good',
   },
   3: {
     icon: icons.networkIcons['Bad'],
     tint: '#F8AA00',
-    text: 'Bad',
+    text: 'bad',
   },
   4: {
     icon: icons.networkIcons['Bad'],
     tint: '#F8AA00',
-    text: 'Bad',
+    text: 'bad',
   },
   5: {
     icon: icons.networkIcons['VeryBad'],
     tint: 'red',
-    text: 'Very Bad',
+    text: 'veryBad',
   },
   6: {
     icon: icons.networkIcons['VeryBad'],
     tint: 'red',
-    text: 'Very Bad',
+    text: 'veryBad',
   },
   7: {
     icon: icons.networkIcons['Unsupported'],
     tint: 'primary',
-    text: 'Unpublished',
+    text: 'unpublished',
   },
   8: {
     icon: icons.networkIcons['Loading'],
     tint: 'primary',
-    text: 'Loading',
+    text: 'loading',
   },
 };
 
-const initNewtorkQualityStats: {[key in string | number]: number} = {
-  local: 0,
-};
+interface NetworkQualityStatsInterface {
+  [key: number]: number;
+}
+
+const initNewtorkQualityStats: NetworkQualityStatsInterface = {};
 
 const NetworkQualityContext = createContext(initNewtorkQualityStats);
 
@@ -90,15 +93,19 @@ export default NetworkQualityContext;
 
 export const NetworkQualityConsumer = NetworkQualityContext.Consumer;
 
-export const NetworkQualityProvider: React.FC = (props) => {
-  const [networkQualityStats, setNetworkQualityStats] = useState(
-    initNewtorkQualityStats,
-  );
+export const NetworkQualityProvider: React.FC = (props: {
+  children: React.ReactNode;
+}) => {
+  const localUid = useLocalUid();
+  const [networkQualityStats, setNetworkQualityStats] =
+    useState<NetworkQualityStatsInterface>({
+      [localUid]: 0,
+    });
   const {RtcEngine} = useContext(RtcContext);
 
   useMount(() => {
     function handleNetworkQuality(
-      uid: number | string,
+      uid: UidType,
       downlinkQuality: number,
       // Currently unused , potential use might be to take weighted average
       // of this alongside the downlink quality.
@@ -108,14 +115,14 @@ export const NetworkQualityProvider: React.FC = (props) => {
         const updatedNetworkQualityStats = {...prevNetworkQualityStats};
         if (uid === 0) {
           const displayedNetworkQuality =
-          // check if either are unsupported (0)
-          // if not then display whichever is poorer
+            // check if either are unsupported (0)
+            // if not then display whichever is poorer
             downlinkQuality * uplinkQuality !== 0
               ? downlinkQuality < uplinkQuality
                 ? uplinkQuality
                 : downlinkQuality
               : 0;
-          updatedNetworkQualityStats['local'] = displayedNetworkQuality;
+          updatedNetworkQualityStats[localUid] = displayedNetworkQuality;
         } else {
           updatedNetworkQualityStats[uid] = downlinkQuality;
         }

package/template/src/components/ParticipantsView.tsx

@@ -10,42 +10,40 @@
 *********************************************
 */
 import React, {useContext, useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Platform,
-  ScrollView,
-  Dimensions,
-  useWindowDimensions,
-} from 'react-native';
+import {View, Text, StyleSheet, ScrollView, Dimensions} from 'react-native';
 import {PropsContext, ClientRole} from '../../agora-rn-uikit';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
-import chatContext from './ChatContext';
 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';
+import {useString} from '../utils/useString';
+import {isWeb} from '../utils/common';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useLiveStreamDataContext} from './contexts/LiveStreamDataContext';
 
-const ParticipantView = (props: any) => {
-  const {userList} = useContext(chatContext);
+const ParticipantView = () => {
+  const {liveStreamData, audienceUids, hostUids} = useLiveStreamDataContext();
   const {rtcProps} = useContext(PropsContext);
-
+  //commented for v1 release
+  // const hostLabel = useString('hostLabel')();
+  // const audienceLabel = useString('audienceLabel')();
+  // const participantsLabel = useString('participantsLabel')();
+  const hostLabel = 'Host';
+  const audienceLabel = 'Audience';
+  const participantsLabel = 'Participants';
+  const {isHost} = useMeetingInfo();
   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={
-        Platform.OS === 'web'
+        isWeb
           ? isSmall
             ? style.participantViewNative
             : style.participantView
@@ -53,117 +51,102 @@ const ParticipantView = (props: any) => {
       }>
       <View style={[style.padding10]}>
         <View style={style.lineUnderHeading}>
-          <Text style={style.mainHeading}>Participants</Text>
+          <Text style={style.mainHeading}>{participantsLabel}</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>
-                      );
-                    }}
-                  </ParticipantContextConsumer>
-                </>
-              ) : (
-                /** New Host ( earlier was 'audience' and now is host )
-                 *  a) Can view all hosts without remote controls
-                 */
-                <ParticipantContextConsumer>
-                  {({hostList, hostCount}) => {
-                    return (
+        <ScrollView style={[style.bodyContainer, style.padding10]}>
+          {$config.EVENT_MODE ? (
+            <>
+              {
+                /*Live streaming is true            
+                Host and New host view */
+                rtcProps?.role == ClientRole.Broadcaster &&
+                  (isHost ? (
+                    /**
+                     * Original Host
+                     * a) Can view streaming requests
+                     * b) Can view all hosts with remote controls
+                     */
+                    <>
+                      {/* a) Live streaming view */}
                       <View style={style.participantsection}>
-                        <ParticipantSectionTitle
-                          title="Host"
-                          count={hostCount}
-                        />
-                        <AllAudienceParticipants
+                        <CurrentLiveStreamRequestsView
                           p_style={style}
-                          participantList={hostList}
-                          isHost={props.isHost}
+                          userList={liveStreamData}
                         />
                       </View>
-                    );
-                  }}
-                </ParticipantContextConsumer>
-              ))}
-            {/**
-             *  Audience views all hosts without remote controls
-             */}
-            {rtcProps?.role == ClientRole.Audience && (
-              <ParticipantContextConsumer>
-                {({hostList, hostCount}) => {
-                  return (
+                      {/* b) Host view with remote controls*/}
+                      <View style={style.participantsection}>
+                        <ParticipantSectionTitle
+                          title={hostLabel}
+                          count={hostUids.length}
+                        />
+                        <View style={style.participantContainer}>
+                          <AllHostParticipants
+                            p_style={style}
+                            isHost={isHost}
+                          />
+                        </View>
+                      </View>
+                    </>
+                  ) : (
+                    /** New Host ( earlier was 'audience' and now is host )
+                     *  a) Can view all hosts without remote controls
+                     */
                     <View style={style.participantsection}>
-                      <ParticipantSectionTitle title="Host" count={hostCount} />
+                      <ParticipantSectionTitle
+                        title={hostLabel}
+                        count={hostUids.length}
+                      />
                       <AllAudienceParticipants
-                        participantList={hostList}
+                        uids={hostUids}
                         p_style={style}
-                        isHost={props.isHost}
+                        isHost={isHost}
                       />
                     </View>
-                  );
-                }}
-              </ParticipantContextConsumer>
-            )}
-            {/* Everyone can see audience */}
-            <ParticipantContextConsumer>
-              {({audienceList, audienceCount}) => {
-                return (
+                  ))
+              }
+              {
+                /**
+                 *  Audience views all hosts without remote controls
+                 */
+                rtcProps?.role == ClientRole.Audience && (
                   <View style={style.participantsection}>
                     <ParticipantSectionTitle
-                      title="Audience"
-                      count={audienceCount}
+                      title={hostLabel}
+                      count={hostUids.length}
                     />
                     <AllAudienceParticipants
+                      uids={hostUids}
                       p_style={style}
-                      participantList={audienceList}
-                      isHost={props.isHost}
+                      isHost={isHost}
                     />
                   </View>
-                );
-              }}
-            </ParticipantContextConsumer>
-          </ParticipantContextProvider>
-        ) : (
-          <View style={style.participantsection}>
-            <View style={style.participantContainer}>
-              <AllHostParticipants p_style={style} isHost={props.isHost} />
+                )
+              }
+              {
+                /* Everyone can see audience */
+                <View style={style.participantsection}>
+                  <ParticipantSectionTitle
+                    title={audienceLabel}
+                    count={audienceUids.length}
+                  />
+                  <AllAudienceParticipants
+                    uids={audienceUids}
+                    p_style={style}
+                    isHost={isHost}
+                  />
+                </View>
+              }
+            </>
+          ) : (
+            <View style={style.participantsection}>
+              <View style={style.participantContainer}>
+                <AllHostParticipants p_style={style} isHost={isHost} />
+              </View>
             </View>
-          </View>
-        )}
-      </ScrollView>
+          )}
+        </ScrollView>
+      </View>
       <View
         style={{
           width: '100%',
@@ -251,19 +234,14 @@ const style = StyleSheet.create({
   },
   participantText: {
     lineHeight: 24,
-    fontSize: Platform.OS === 'web' ? 18 : 16,
+    fontSize: isWeb ? 18 : 16,
     flexDirection: 'row',
     letterSpacing: 0.3,
     color: $config.PRIMARY_FONT_COLOR,
     fontWeight: '300',
   },
   participantTextSmall: {
-    fontSize: Platform.OS === 'web' ? 14 : 12,
-  },
-  dummyView: {
-    flex: 0.5,
-    opacity: 0,
-    marginHorizontal: 5,
+    fontSize: isWeb ? 14 : 12,
   },
   dummyView: {
     flex: 0.5,