agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/NetworkQualityContext.tsx

@@ -12,7 +12,7 @@
 import React, {createContext, useState} from 'react';
 import {UidType, useLocalUid} from '../../agora-rn-uikit';
 import useMount from './useMount';
-import {IconsInterface} from '../atoms/CustomIcon';
+import icons from '../assets/icons';
 import {NetworkQualities} from '../language/default-labels/videoCallScreenLabels';
 import {useRtc} from 'customization-api';
 
@@ -30,54 +30,54 @@ import {useRtc} from 'customization-api';
  */
 export const networkIconsObject: {
   [key: number]: {
-    icon: keyof IconsInterface;
+    icon: string;
     tint: string;
     text: NetworkQualities;
   };
 } = {
   0: {
-    icon: 'connection-unsupported',
-    tint: $config.SEMANTIC_NEUTRAL,
+    icon: icons.networkIcons['Unsupported'],
+    tint: 'primary',
     text: 'unknown',
   },
   1: {
-    icon: 'connection-good',
-    tint: $config.SEMANTIC_SUCCESS,
+    icon: icons.networkIcons['Excellent'],
+    tint: '#2BD900',
     text: 'excellent',
   },
   2: {
-    icon: 'connection-good',
-    tint: $config.SEMANTIC_SUCCESS,
+    icon: icons.networkIcons['Good'],
+    tint: '#FFEE00',
     text: 'good',
   },
   3: {
-    icon: 'connection-bad',
-    tint: $config.SEMANTIC_WARNING,
+    icon: icons.networkIcons['Bad'],
+    tint: '#F8AA00',
     text: 'bad',
   },
   4: {
-    icon: 'connection-bad',
-    tint: $config.SEMANTIC_WARNING,
+    icon: icons.networkIcons['Bad'],
+    tint: '#F8AA00',
     text: 'bad',
   },
   5: {
-    icon: 'connection-very-bad',
-    tint: $config.SEMANTIC_ERROR,
+    icon: icons.networkIcons['VeryBad'],
+    tint: 'red',
     text: 'veryBad',
   },
   6: {
-    icon: 'connection-very-bad',
-    tint: $config.SEMANTIC_ERROR,
+    icon: icons.networkIcons['VeryBad'],
+    tint: 'red',
     text: 'veryBad',
   },
   7: {
-    icon: 'connection-unpublished',
-    tint: $config.SEMANTIC_NEUTRAL,
+    icon: icons.networkIcons['Unsupported'],
+    tint: 'primary',
     text: 'unpublished',
   },
   8: {
-    icon: 'connection-loading',
-    tint: $config.SEMANTIC_NEUTRAL,
+    icon: icons.networkIcons['Loading'],
+    tint: 'primary',
     text: 'loading',
   },
 };

package/template/src/components/ParticipantsView.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {useContext, useState} from 'react';
-import {View, Text, StyleSheet, ScrollView} 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 ParticipantSectionTitle from './participants/ParticipantSectionTitle';
@@ -18,77 +18,43 @@ import AllHostParticipants from './participants/AllHostParticipants';
 import AllAudienceParticipants from './participants/AllAudienceParticipants';
 import CurrentLiveStreamRequestsView from '../subComponents/livestream/CurrentLiveStreamRequestsView';
 import {useString} from '../utils/useString';
-import {isMobileUA, isWebInternal, useIsSmall} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import {useLiveStreamDataContext} from './contexts/LiveStreamDataContext';
-import {numFormatter} from '../utils';
-import ChatContext from './ChatContext';
-import {useSidePanel} from '../utils/useSidePanel';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
-import TertiaryButton from '../atoms/TertiaryButton';
-import HostControlView from './HostControlView';
-import {ButtonTemplateName} from '../utils/useButtonTemplate';
-import Spacer from '../atoms/Spacer';
-import IconButton from '../atoms/IconButton';
-import ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import CommonStyles from './CommonStyles';
-import SidePanelHeader, {
-  SidePanelStyles,
-} from '../subComponents/SidePanelHeader';
-import {useVideoMeetingData} from './contexts/VideoMeetingDataContext';
-import {useLayout, useRender} from 'customization-api';
-import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
-import {PeopleHeader} from '../pages/video-call/SidePanelHeader';
-
-const ParticipantView = (props) => {
-  const {activeUids} = useRender();
+const ParticipantView = () => {
   const {liveStreamData, audienceUids, hostUids} = useLiveStreamDataContext();
-  const {
-    attendeeUids: attendeeUidsVideoMeeting,
-    hostUids: hostUidsVideoMeeting,
-  } = useVideoMeetingData();
-  const {onlineUsersCount} = useContext(ChatContext);
-  const {sidePanel, setSidePanel} = useSidePanel();
   const {rtcProps} = useContext(PropsContext);
-  const {showHeader = true} = props;
   //commented for v1 release
   // const hostLabel = useString('hostLabel')();
   // const audienceLabel = useString('audienceLabel')();
   // const participantsLabel = useString('participantsLabel')();
   const hostLabel = 'Host';
   const audienceLabel = 'Audience';
-  const attendeeLabel = 'Attendee';
-  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
+  const participantsLabel = 'Participants';
   const {
     data: {isHost},
   } = useMeetingInfo();
-  const isSmall = useIsSmall();
-  //video meeting
-  const [showHostSection, setShowHostSection] = useState(true);
-  const [showParticipantSection, setShowParticipantSection] = useState(true);
-  //live streaming
-  const [showTempHostSection, setShowTempHostSection] = useState(true);
-  const [showAudienceSection, setShowAudienceSection] = useState(true);
-  const {currentLayout} = useLayout();
+  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;
   return (
     <View
-      testID="videocall-participants"
-      style={[
-        isMobileUA()
-          ? //mobile and mobile web
-            CommonStyles.sidePanelContainerNative
-          : isSmall()
-          ? // desktop minimized
-            CommonStyles.sidePanelContainerWebMinimzed
-          : // desktop maximized
-            CommonStyles.sidePanelContainerWeb,
-        isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-          ? {marginVertical: 4}
-          : {},
-      ]}>
-      {showHeader && <PeopleHeader />}
-      <ScrollView style={[style.bodyContainer]}>
+      style={
+        isWebInternal()
+          ? isSmall
+            ? style.participantViewNative
+            : style.participantView
+          : style.participantViewNative
+      }>
+      <View style={[style.padding10]}>
+        <View style={style.lineUnderHeading}>
+          <Text style={style.mainHeading}>{participantsLabel}</Text>
+        </View>
+      </View>
+      <ScrollView style={[style.bodyContainer, style.padding10]}>
         {$config.EVENT_MODE ? (
           <>
             {
@@ -103,51 +69,38 @@ const ParticipantView = (props) => {
                    */
                   <>
                     {/* a) Live streaming view */}
-                    <CurrentLiveStreamRequestsView userList={liveStreamData} />
+                    <View style={style.participantsection}>
+                      <CurrentLiveStreamRequestsView
+                        p_style={style}
+                        userList={liveStreamData}
+                      />
+                    </View>
                     {/* b) Host view with remote controls*/}
-                    <ParticipantSectionTitle
-                      title={hostLabel}
-                      count={hostUids.length}
-                      isOpen={showHostSection}
-                      onPress={() => setShowHostSection(!showHostSection)}
-                    />
-                    {showHostSection ? (
-                      <AllHostParticipants
-                        emptyMessage={'No Host has joined yet.'}
-                        uids={hostUids}
-                        isMobile={isSmall()}
-                        updateActionSheet={props.updateActionSheet}
-                        handleClose={props.handleClose}
+                    <View style={style.participantsection}>
+                      <ParticipantSectionTitle
+                        title={hostLabel}
+                        count={hostUids.length}
                       />
-                    ) : (
-                      <Spacer size={1} />
-                    )}
+                      <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={hostLabel}
                       count={hostUids.length}
-                      isOpen={showTempHostSection}
-                      onPress={() =>
-                        setShowTempHostSection(!showTempHostSection)
-                      }
                     />
-                    {showTempHostSection ? (
-                      <AllAudienceParticipants
-                        emptyMessage={'No Host has joined yet.'}
-                        uids={hostUids}
-                        isMobile={isSmall()}
-                        updateActionSheet={props.updateActionSheet}
-                        handleClose={props.handleClose}
-                      />
-                    ) : (
-                      <Spacer size={1} />
-                    )}
-                  </>
+                    <AllAudienceParticipants
+                      uids={hostUids}
+                      p_style={style}
+                      isHost={isHost}
+                    />
+                  </View>
                 ))
             }
             {
@@ -155,120 +108,144 @@ const ParticipantView = (props) => {
                *  Audience views all hosts without remote controls
                */
               rtcProps?.role == ClientRole.Audience && (
-                <>
+                <View style={style.participantsection}>
                   <ParticipantSectionTitle
                     title={hostLabel}
                     count={hostUids.length}
-                    isOpen={showHostSection}
-                    onPress={() => setShowHostSection(!showHostSection)}
                   />
-                  {showHostSection ? (
-                    <AllAudienceParticipants
-                      emptyMessage={'No Host has joined yet.'}
-                      uids={hostUids}
-                      isMobile={isSmall()}
-                      updateActionSheet={props.updateActionSheet}
-                      handleClose={props.handleClose}
-                    />
-                  ) : (
-                    <Spacer size={1} />
-                  )}
-                </>
+                  <AllAudienceParticipants
+                    uids={hostUids}
+                    p_style={style}
+                    isHost={isHost}
+                  />
+                </View>
               )
             }
             {
               /* Everyone can see audience */
-              <>
+              <View style={style.participantsection}>
                 <ParticipantSectionTitle
                   title={audienceLabel}
                   count={audienceUids.length}
-                  isOpen={showAudienceSection}
-                  onPress={() => setShowAudienceSection(!showAudienceSection)}
                 />
-                {showAudienceSection ? (
-                  <AllAudienceParticipants
-                    emptyMessage={'No Audience has joined yet.'}
-                    uids={audienceUids}
-                    isMobile={isSmall()}
-                    updateActionSheet={props.updateActionSheet}
-                    handleClose={props.handleClose}
-                  />
-                ) : (
-                  <></>
-                )}
-              </>
+                <AllAudienceParticipants
+                  uids={audienceUids}
+                  p_style={style}
+                  isHost={isHost}
+                />
+              </View>
             }
           </>
         ) : (
-          <>
-            <AllHostParticipants
-              emptyMessage={'No Users has joined yet'}
-              uids={activeUids}
-              isMobile={isSmall()}
-              updateActionSheet={props.updateActionSheet}
-              handleClose={props.handleClose}
-            />
-            {/* <ParticipantSectionTitle
-              title={hostLabel}
-              count={hostUidsVideoMeeting.length}
-              isOpen={showHostSection}
-              onPress={() => setShowHostSection(!showHostSection)}
-            /> */}
-            {/* {showHostSection ? (
-              <AllHostParticipants
-                emptyMessage={'No Host has joined yet'}
-                uids={hostUidsVideoMeeting}
-                isMobile={isSmall()}
-                updateActionSheet={props.updateActionSheet}
-                handleClose={props.handleClose}
-              />
-            ) : (
-              <Spacer size={1} />
-            )} */}
-            {/* <ParticipantSectionTitle
-              title={attendeeLabel}
-              count={attendeeUidsVideoMeeting.length}
-              isOpen={showParticipantSection}
-              onPress={() => setShowParticipantSection(!showParticipantSection)}
-            /> */}
-            {/* {showParticipantSection ? (
-              <AllHostParticipants
-                emptyMessage={'No Attendee has joined yet'}
-                uids={attendeeUidsVideoMeeting}
-                isMobile={isSmall()}
-                updateActionSheet={props.updateActionSheet}
-                handleClose={props.handleClose}
-              />
-            ) : (
-              <></>
-            )} */}
-          </>
+          <View style={style.participantsection}>
+            <View style={style.participantContainer}>
+              <AllHostParticipants p_style={style} isHost={isHost} />
+            </View>
+          </View>
         )}
       </ScrollView>
 
-      {isHost && (
-        <View style={style.footer}>
-          {/*  <CopyJoinInfo showTeritaryButton /> */}
-          <HostControlView />
-        </View>
-      )}
+      <View
+        style={{
+          width: '100%',
+          height: 50,
+          alignSelf: 'flex-end',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <CopyJoinInfo showText={true} />
+      </View>
     </View>
   );
 };
 
 const style = StyleSheet.create({
-  footer: {
+  padding10: {
+    padding: 10,
+  },
+  lineUnderHeading: {
+    borderBottomWidth: 2,
+    borderBottomColor: $config.PRIMARY_COLOR,
+  },
+  participantView: {
+    width: '20%',
+    minWidth: 200,
+    maxWidth: 300,
+    flex: 1,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    shadowColor: $config.PRIMARY_FONT_COLOR + '80',
+    shadowOpacity: 0.5,
+    shadowOffset: {width: -2, height: 0},
+    shadowRadius: 3,
+  },
+  participantViewNative: {
+    position: 'absolute',
+    zIndex: 5,
     width: '100%',
-    padding: 12,
-    height: 'auto',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    height: '100%',
+    right: 0,
+    top: 0,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
   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: 'column',
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  participantRow: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  participantActionContainer: {
+    flexDirection: 'row',
+    paddingRight: 5,
+    justifyContent: 'flex-end',
+  },
+  actionBtnIcon: {
+    width: 25,
+    height: 25,
+  },
+  participantText: {
+    lineHeight: 24,
+    fontSize: isWebInternal() ? 18 : 16,
+    flexDirection: 'row',
+    letterSpacing: 0.3,
+    color: $config.PRIMARY_FONT_COLOR,
+    fontWeight: '300',
+  },
+  participantTextSmall: {
+    fontSize: isWebInternal() ? 14 : 12,
+  },
+  dummyView: {
+    flex: 0.5,
+    opacity: 0,
+    marginHorizontal: 5,
+  },
 });
 
 export default ParticipantView;