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

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,100 @@ 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 (
-                      <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 (
+          <>
+            {
+              /*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
-                        participantList={hostList}
+                      <CurrentLiveStreamRequestsView
                         p_style={style}
-                        isHost={props.isHost}
+                        userList={liveStreamData}
                       />
                     </View>
-                  );
-                }}
-              </ParticipantContextConsumer>
-            )}
-            {/* Everyone can see audience */}
-            <ParticipantContextConsumer>
-              {({audienceList, audienceCount}) => {
-                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="Audience"
-                      count={audienceCount}
+                      title={hostLabel}
+                      count={hostUids.length}
                     />
                     <AllAudienceParticipants
+                      uids={hostUids}
                       p_style={style}
-                      participantList={audienceList}
-                      isHost={props.isHost}
+                      isHost={isHost}
                     />
                   </View>
-                );
-              }}
-            </ParticipantContextConsumer>
-          </ParticipantContextProvider>
+                ))
+            }
+            {
+              /**
+               *  Audience views all hosts without remote controls
+               */
+              rtcProps?.role == ClientRole.Audience && (
+                <View style={style.participantsection}>
+                  <ParticipantSectionTitle
+                    title={hostLabel}
+                    count={hostUids.length}
+                  />
+                  <AllAudienceParticipants
+                    uids={hostUids}
+                    p_style={style}
+                    isHost={isHost}
+                  />
+                </View>
+              )
+            }
+            {
+              /* 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={props.isHost} />
+              <AllHostParticipants p_style={style} isHost={isHost} />
             </View>
           </View>
         )}
       </ScrollView>
+
       <View
         style={{
           width: '100%',
@@ -251,19 +232,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,

package/template/src/components/PinnedVideo.tsx

@@ -16,32 +16,17 @@ import {
   Dimensions,
   StyleSheet,
   Text,
-  Image,
   Pressable,
-  useWindowDimensions,
 } from 'react-native';
-import {MinUidConsumer} from '../../agora-rn-uikit';
 import {RtcContext} from '../../agora-rn-uikit';
-import {MaxVideoView} from '../../agora-rn-uikit';
-import {MaxUidConsumer} from '../../agora-rn-uikit';
-import chatContext from './ChatContext';
-import ColorContext from './ColorContext';
 import {layoutProps} from '../../theme.json';
-import FallbackLogo from '../subComponents/FallbackLogo';
-import {ImageIcon} from '../../agora-rn-uikit';
-import ScreenShareNotice from '../subComponents/ScreenShareNotice';
-import {RFValue} from 'react-native-responsive-fontsize';
+import {layoutComponent} from 'fpe-api';
+import RenderComponent from '../pages/video-call/RenderComponent';
 const {topPinned} = layoutProps;
-import networkQualityContext from './NetworkQualityContext';
-import {NetworkQualityPill} from '../subComponents/NetworkQualityPill';
-import TextWithTooltip from '../subComponents/TextWithTooltip';
 
-const PinnedVideo = () => {
-  const {height, width} = useWindowDimensions();
-  const {primaryColor} = useContext(ColorContext);
-  const networkQualityStat = useContext(networkQualityContext);
+const PinnedVideo: layoutComponent = ({renderData}) => {
   const [collapse, setCollapse] = useState(false);
-  const [dim, setDim] = useState([
+  const [dim, setDim] = useState<[number, number, boolean]>([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
     Dimensions.get('window').width > Dimensions.get('window').height,
@@ -54,7 +39,9 @@ const PinnedVideo = () => {
     }, 20);
   };
   const isSidePinnedlayout = topPinned === true ? false : dim[2]; // if either explicity set to false or auto evaluation
-  const {userList, localUid} = useContext(chatContext);
+  const [maxUid, ...minUids] = renderData;
+  const {dispatch} = useContext(RtcContext);
+
   return (
     <View
       style={{
@@ -77,13 +64,6 @@ const PinnedVideo = () => {
             borderRadius: 50,
             justifyContent: 'center',
           }}>
-          {/* <Image
-            source={{
-              uri: icons.micOff,
-            }}
-            style={[style.MicIcon]}
-            resizeMode={'contain'}
-          /> */}
           <Text
             style={{
               alignSelf: 'center',
@@ -100,107 +80,36 @@ const PinnedVideo = () => {
         <ScrollView
           horizontal={!isSidePinnedlayout}
           decelerationRate={0}
-          // snapToInterval={
-          //   dim[2] ? dim[0] * 0.1125 + 2 : ((dim[1] / 3.6) * 16) / 9
-          // }
-          // snapToAlignment={'center'}
           style={
             isSidePinnedlayout
               ? {width: '20%', paddingHorizontal: 8}
               : {flex: 1}
           }>
-          <RtcContext.Consumer>
-            {(data) => (
-              <MinUidConsumer>
-                {(minUsers) =>
-                  minUsers.map((user) => (
-                    <Pressable
-                      style={
-                        isSidePinnedlayout
-                          ? {
-                              width: '100%',
-                              height: dim[0] * 0.1125 + 2, // width * 20/100 * 9/16 + 2
-                              zIndex: 40,
-                              paddingBottom: 8,
-                            }
-                          : {
-                              width: ((dim[1] / 3) * 16) / 9 / 2 + 12, //dim[1] /4.3
-                              height: '100%',
-                              zIndex: 40,
-                              paddingRight: 8,
-                              paddingVertical: 4,
-                            }
-                      }
-                      key={user.uid}
-                      onPress={() => {
-                        data.dispatch({type: 'SwapVideo', value: [user]});
-                      }}>
-                      <View style={style.flex1}>
-                        <NetworkQualityPill
-                          networkStat={
-                            networkQualityStat[user.uid]
-                              ? networkQualityStat[user.uid]
-                              : user.audio || user.video
-                              ? 8
-                              : 7
-                          }
-                          primaryColor={primaryColor}
-                          rootStyle={{left: 5, top: 5}}
-                          small
-                        />
-                        <MaxVideoView
-                          fallback={() => {
-                            if (user.uid === 'local') {
-                              return FallbackLogo(userList[localUid]?.name);
-                            } else if (String(user.uid)[0] === '1') {
-                              return FallbackLogo('PSTN User');
-                            } else {
-                              return FallbackLogo(userList[user.uid]?.name);
-                            }
-                          }}
-                          user={user}
-                          key={user.uid}
-                        />
-                        <View style={style.nameHolder}>
-                          <View style={[style.MicBackdrop]}>
-                            <ImageIcon
-                              name={user.audio ? 'mic' : 'micOff'}
-                              color={user.audio ? primaryColor : 'red'}
-                              style={style.MicIcon}
-                            />
-                          </View>
-                          <View style={{flex:1}}>
-                            <TextWithTooltip 
-                              value={user.uid === 'local'
-                              ? userList[localUid]
-                                ? userList[localUid].name + ' '
-                                : 'You '
-                              : userList[user.uid]
-                              ? userList[user.uid].name + ' '
-                              : user.uid === 1
-                              ? (userList[localUid]?.name + "'s screen ")
-                              : String(user.uid)[0] === '1'
-                              ? 'PSTN User '
-                              : 'User '}
-                              style={[
-                                style.name,
-                                {
-                                  fontSize: RFValue(
-                                    14,
-                                    height > width ? height : width,
-                                  ),
-                                },
-                              ]}
-                            />
-                          </View>
-                        </View>
-                      </View>
-                    </Pressable>
-                  ))
-                }
-              </MinUidConsumer>
-            )}
-          </RtcContext.Consumer>
+          {minUids.map((minUid, i) => (
+            <Pressable
+              style={
+                isSidePinnedlayout
+                  ? {
+                      width: '100%',
+                      height: dim[0] * 0.1125 + 2, // width * 20/100 * 9/16 + 2
+                      zIndex: 40,
+                      paddingBottom: 8,
+                    }
+                  : {
+                      width: ((dim[1] / 3) * 16) / 9 / 2 + 12, //dim[1] /4.3
+                      height: '100%',
+                      zIndex: 40,
+                      paddingRight: 8,
+                      paddingVertical: 4,
+                    }
+              }
+              key={'minVideo' + i}
+              onPress={() => {
+                dispatch({type: 'SwapVideo', value: [minUid]});
+              }}>
+              <RenderComponent uid={minUid} />
+            </Pressable>
+          ))}
         </ScrollView>
       )}
       <View
@@ -211,70 +120,9 @@ const PinnedVideo = () => {
               : style.width80
             : style.flex4
         }>
-        <MaxUidConsumer>
-          {(maxUsers) => (
-            <>
-              <View style={style.flex1}>
-                <ScreenShareNotice uid={maxUsers[0].uid} />
-                <NetworkQualityPill
-                  networkStat={
-                    networkQualityStat[maxUsers[0].uid]
-                      ? networkQualityStat[maxUsers[0].uid]
-                      : maxUsers[0].audio || maxUsers[0].video
-                      ? 8
-                      : 7
-                  }
-                  primaryColor={primaryColor}
-                  rootStyle={{
-                    marginLeft: 25,
-                    top: 8,
-                    right: 10,
-                  }}
-                  small
-                />
-                <MaxVideoView
-                  fallback={() => {
-                    if (maxUsers[0].uid === 'local') {
-                      return FallbackLogo(userList[localUid]?.name);
-                    } else if (String(maxUsers[0].uid)[0] === '1') {
-                      return FallbackLogo('PSTN User');
-                    } else {
-                      return FallbackLogo(userList[maxUsers[0].uid]?.name);
-                    }
-                  }}
-                  user={maxUsers[0]}
-                  key={maxUsers[0].uid}
-                />
-                <View style={style.nameHolder}>
-                  <View style={[style.MicBackdrop]}>
-                    <ImageIcon
-                      name={maxUsers[0].audio ? 'mic' : 'micOff'}
-                      color={maxUsers[0].audio ? primaryColor : 'red'}
-                      style={style.MicIcon}
-                    />
-                  </View>
-                  <View style={{flex:1}}>
-                    <TextWithTooltip 
-                      value={maxUsers[0].uid === 'local'
-                      ? userList[localUid]
-                        ? userList[localUid].name + ' '
-                        : 'You '
-                      : userList[maxUsers[0].uid]
-                      ? userList[maxUsers[0].uid].name + ' '
-                      : maxUsers[0].uid === 1
-                      ? (userList[localUid].name + "'s screen ")
-                      : 'User '}
-                      style={[
-                        style.name,
-                        {fontSize: RFValue(14, height > width ? height : width)},
-                      ]}
-                    />
-                  </View>
-                </View>
-              </View>
-            </>
-          )}
-        </MaxUidConsumer>
+        <View style={style.flex1} key={'maxVideo' + maxUid}>
+          <RenderComponent uid={maxUid} />
+        </View>
       </View>
     </View>
   );
@@ -298,7 +146,12 @@ const style = StyleSheet.create({
     zIndex: 5,
     maxWidth: '100%',
   },
-  name: {color: $config.PRIMARY_FONT_COLOR, lineHeight: 25, fontWeight: '700', flexShrink: 1},
+  name: {
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 25,
+    fontWeight: '700',
+    flexShrink: 1,
+  },
   MicBackdrop: {
     width: 20,
     height: 20,