agora-appbuilder-core 3.0.10 → 3.0.11

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

@@ -1,102 +1,36 @@
 import React, {useContext} from 'react';
-import {Text} from 'react-native';
+import {View, Text} from 'react-native';
+import RemoteEndCall from '../../subComponents/RemoteEndCall';
+import ParticipantName from '../../components/participants/ParticipantName';
 import chatContext from '../ChatContext';
 import {useString} from '../../utils/useString';
-import {
-  RenderInterface,
-  UidType,
-  useMeetingInfo,
-  useRender,
-} from 'customization-api';
-import Participant from './Participant';
-import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
-import {useScreenContext} from '../contexts/ScreenShareContext';
-import ScreenshareParticipants from './ScreenshareParticipants';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useRender} from 'customization-api';
 
 const AllAudienceParticipants = (props: any) => {
-  const {screenShareData} = useScreenContext();
-  const {
-    uids,
-    isMobile = false,
-    handleClose,
-    updateActionSheet,
-    emptyMessage,
-  } = props;
+  const {p_style, isHost, uids} = props;
   const {renderList} = useRender();
   const {localUid} = useContext(chatContext);
   //commented for v1 release
   //const participantListPlaceholder = useString('participantListPlaceholder')();
-  const remoteUserDefaultLabel = 'User';
-  const getParticipantName = (uid: UidType) => {
-    return renderList[uid]?.name || remoteUserDefaultLabel;
-  };
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
-  const {hostUids} = useLiveStreamDataContext();
-
-  const renderScreenShare = (user: RenderInterface) => {
-    if (screenShareData[user.screenUid]?.isActive) {
-      return (
-        <ScreenshareParticipants
-          user={renderList[user.screenUid]}
-          key={user.screenUid}
-        />
-      );
-    } else {
-      <></>;
-    }
-  };
-
+  const participantListPlaceholder = 'No one has joined yet';
   return (
-    <>
+    <View style={p_style.participantContainer}>
       {uids.length == 0 ? (
-        emptyMessage ? (
-          <Text
-            style={{
-              alignSelf: 'center',
-              paddingVertical: 20,
-              fontFamily: 'Source Sans Pro',
-              fontWeight: '400',
-              fontSize: 14,
-              color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
-            }}>
-            {emptyMessage}
-          </Text>
-        ) : (
-          <></>
-        )
+        <Text style={p_style.infoText}>{participantListPlaceholder}</Text>
       ) : (
         <>
-          {/**Audience should see his name first */}
+          {/* Audience should see his name first */}
           {uids.filter((i) => i === localUid).length ? (
-            <>
-              <Participant
-                isLocal={true}
-                name={getParticipantName(localUid)}
-                user={renderList[localUid]}
-                isAudienceUser={
-                  $config.EVENT_MODE && hostUids.indexOf(localUid) !== -1
-                    ? false
-                    : true
-                }
-                showControls={
-                  (renderList[localUid]?.type === 'rtc' && isHost) ||
-                  (renderList[localUid]?.type === 'rtc' &&
-                    $config.EVENT_MODE &&
-                    hostUids.indexOf(localUid) !== -1)
-                    ? true
-                    : false
-                }
-                isHostUser={false}
-                key={localUid}
-                isMobile={isMobile}
-                handleClose={handleClose}
-                updateActionSheet={updateActionSheet}
-              />
-              {renderScreenShare(renderList[localUid])}
-            </>
+            <View style={p_style.participantRow} key={'local' + 0}>
+              <ParticipantName value={renderList[localUid]?.name} />
+              {isHost && (
+                <View style={p_style.participantActionContainer}>
+                  <View style={[p_style.actionBtnIcon]}>
+                    <RemoteEndCall uid={localUid} isHost={isHost} />
+                  </View>
+                </View>
+              )}
+            </View>
           ) : (
             <></>
           )}
@@ -104,25 +38,20 @@ const AllAudienceParticipants = (props: any) => {
           {uids
             .filter((i) => i !== localUid)
             .map((uid: any, index: number) => (
-              <>
-                <Participant
-                  isLocal={false}
-                  name={getParticipantName(uid)}
-                  user={renderList[uid]}
-                  showControls={renderList[uid]?.type === 'rtc' && isHost}
-                  isAudienceUser={true}
-                  isHostUser={false}
-                  key={uid}
-                  isMobile={isMobile}
-                  handleClose={handleClose}
-                  updateActionSheet={updateActionSheet}
-                />
-                {renderScreenShare(renderList[uid])}
-              </>
+              <View style={p_style.participantRow} key={index}>
+                <ParticipantName value={renderList[uid]?.name} />
+                {isHost && (
+                  <View style={p_style.participantActionContainer}>
+                    <View style={[p_style.actionBtnIcon]}>
+                      <RemoteEndCall uid={uid} isHost={isHost} />
+                    </View>
+                  </View>
+                )}
+              </View>
             ))}
         </>
       )}
-    </>
+    </View>
   );
 };
 

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

@@ -1,122 +1,53 @@
 import React from 'react';
-import {Text} from 'react-native';
+import MeParticipant from './MeParticipant';
 import ScreenshareParticipants from './ScreenshareParticipants';
-import Participant from './Participant';
+import RemoteParticipants from './RemoteParticipants';
 import {useString} from '../../utils/useString';
-import {RenderInterface, UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useMeetingInfo, useRender} from 'customization-api';
-import Spacer from '../../atoms/Spacer';
-import {useVideoMeetingData} from '../contexts/VideoMeetingDataContext';
-import {useScreenContext} from '../contexts/ScreenShareContext';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {UidType, useLocalUid} from '../../../agora-rn-uikit';
+import {useRender} from 'customization-api';
 
 export default function AllHostParticipants(props: any) {
+  const {p_style, isHost} = props;
   const localUid = useLocalUid();
-  const {screenShareData} = useScreenContext();
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-  const {renderList} = useRender();
+  const {renderList, activeUids} = useRender();
   const getParticipantName = (uid: UidType) => {
     return renderList[uid]?.name || remoteUserDefaultLabel;
   };
-  const {hostUids} = useVideoMeetingData();
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
-  const {
-    isMobile = false,
-    handleClose,
-    updateActionSheet,
-    uids,
-    emptyMessage,
-  } = props;
-
-  const renderScreenShare = (user: RenderInterface) => {
-    if (screenShareData[user.screenUid]?.isActive) {
-      return (
-        <ScreenshareParticipants
-          user={renderList[user.screenUid]}
-          key={user.screenUid}
-        />
-      );
-    } else {
-      <></>;
-    }
-  };
 
   return (
     <>
-      {uids.length == 0 ? (
-        emptyMessage ? (
-          <Text
-            style={{
-              alignSelf: 'center',
-              paddingVertical: 20,
-              fontFamily: 'Source Sans Pro',
-              fontWeight: '400',
-              fontSize: 14,
-              color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
-            }}>
-            {emptyMessage}
-          </Text>
-        ) : (
-          <></>
-        )
-      ) : (
-        <>
-          <Spacer size={4} />
-          {/* User should see his name first */}
-          {uids.filter((uid) => uid === localUid).length > 0 ? (
-            <>
-              <Participant
-                isLocal={true}
-                isAudienceUser={false}
-                name={getParticipantName(localUid)}
-                user={renderList[localUid]}
-                showControls={true}
-                isHostUser={hostUids.indexOf(localUid) !== -1}
-                key={localUid}
-                isMobile={isMobile}
-                handleClose={handleClose}
-                updateActionSheet={updateActionSheet}
-              />
-              {renderScreenShare(renderList[localUid])}
-            </>
-          ) : (
-            <></>
-          )}
-          {/* Others Users in the call */}
-          {uids
-            .filter((uid) => uid !== localUid && renderList[uid].type === 'rtc')
-            .map(
-              (uid) => (
-                // renderList[uid]?.type === 'screenshare' ? (
-                //   <ScreenshareParticipants
-                //     name={getParticipantName(uid)}
-                //     key={uid}
-                //   />
-                // ) : (
-                <>
-                  <Participant
-                    isLocal={false}
-                    isAudienceUser={false}
-                    name={getParticipantName(uid)}
-                    user={renderList[uid]}
-                    showControls={renderList[uid]?.type === 'rtc' && isHost}
-                    isHostUser={hostUids.indexOf(uid) !== -1}
-                    key={uid}
-                    isMobile={isMobile}
-                    handleClose={handleClose}
-                    updateActionSheet={updateActionSheet}
-                  />
-                  {renderScreenShare(renderList[uid])}
-                </>
-              ),
-              //),
-            )}
-        </>
+      {/* User should see his name first */}
+      {activeUids.filter((uid) => uid === localUid).length > 0 && (
+        <MeParticipant
+          name={getParticipantName(localUid)}
+          p_style={p_style}
+          key={localUid}
+        />
       )}
+      {/* Others Users in the call */}
+      {activeUids
+        .filter((uid) => uid !== localUid)
+        .map((uid) =>
+          renderList[uid]?.type === 'screenshare' ? (
+            <ScreenshareParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              key={uid}
+            />
+          ) : (
+            <RemoteParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              user={renderList[uid]}
+              showControls={renderList[uid]?.type === 'rtc'}
+              isHost={isHost}
+              key={uid}
+            />
+          ),
+        )}
     </>
   );
 }

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

@@ -0,0 +1,38 @@
+/*
+********************************************
+ 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} from 'react-native';
+import {ButtonTemplateName} from '../../utils/useButtonTemplate';
+import LocalAudioMute from '../../subComponents/LocalAudioMute';
+import LocalVideoMute from '../../subComponents/LocalVideoMute';
+import ParticipantName from './ParticipantName';
+
+const MeParticipant = (props: any) => {
+  const {p_style, name} = props;
+
+  return (
+    <View style={p_style.participantRow}>
+      <ParticipantName value={name} />
+      <View style={p_style.participantActionContainer}>
+        <View style={[p_style.actionBtnIcon, {marginRight: 10}]}>
+          <LocalAudioMute buttonTemplateName={ButtonTemplateName.topBar} />
+        </View>
+        {!$config.AUDIO_ROOM && (
+          <View style={p_style.actionBtnIcon}>
+            <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+export default MeParticipant;

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

@@ -10,13 +10,7 @@
 *********************************************
 */
 import React from 'react';
-import {
-  View,
-  StyleSheet,
-  useWindowDimensions,
-  Platform,
-  Text,
-} from 'react-native';
+import {View, StyleSheet, useWindowDimensions, Platform} from 'react-native';
 import TextWithToolTip from '../../subComponents/TextWithTooltip';
 import {RFValue} from 'react-native-responsive-fontsize';
 import {isWebInternal} from '../../utils/common';
@@ -42,13 +36,13 @@ export default ParticipantName;
 
 const style = StyleSheet.create({
   participantText: {
-    fontWeight: '400',
-    fontSize: 12,
-    lineHeight: 15,
-    fontFamily: 'Source Sans Pro',
+    flex: 1,
+    fontWeight: '500',
     flexDirection: 'row',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 20,
+    paddingHorizontal: 5,
     textAlign: 'left',
-    textTransform: 'capitalize',
+    flexShrink: 1,
   },
 });

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

@@ -1,54 +1,29 @@
-import ImageIcon from '../../atoms/ImageIcon';
 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import ThemeConfig from '../../theme';
+import {StyleSheet, Text} from 'react-native';
 
 interface PropsInterface {
   title: string;
   count?: number;
-  isOpen?: boolean;
-  onPress?: () => void;
 }
 
 export default function ParticipantSectionTitle(props: PropsInterface) {
   const {title, count = 0} = props;
   return (
-    <TouchableOpacity
-      style={style.container}
-      onPress={() => props?.onPress && props?.onPress()}>
-      <Text style={style.subheading}>
-        {title} {count > 0 ? '(' + count + ')' : ''}
-      </Text>
-      <View style={style.iconView}>
-        <ImageIcon
-          iconType="plain"
-          name={props?.isOpen ? 'arrow-up' : 'arrow-down'}
-          iconSize={20}
-          tintColor={$config.SECONDARY_ACTION_COLOR}
-        />
-      </View>
-    </TouchableOpacity>
+    <Text style={style.subheading}>
+      {title} {count > 0 && <Text style={style.count}>({count})</Text>}
+    </Text>
   );
 }
 
 const style = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    paddingHorizontal: 20,
-  },
   subheading: {
-    fontSize: 12,
-    fontFamily: 'Source Sans Pro',
+    fontSize: 15,
+    letterSpacing: 0.8,
     fontWeight: '700',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    paddingVertical: 12,
-    alignSelf: 'center',
+    color: $config.PRIMARY_FONT_COLOR,
   },
-  iconView: {
-    paddingVertical: 8,
-    alignSelf: 'center',
+  count: {
+    fontSize: 13,
+    fontWeight: '500',
   },
 });

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

@@ -0,0 +1,71 @@
+/*
+********************************************
+ 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} 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';
+import {RenderInterface} from '../../../agora-rn-uikit';
+
+interface remoteParticipantsInterface {
+  p_styles: any;
+  name: string;
+  user: RenderInterface;
+  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>
+          {!$config.AUDIO_ROOM && (
+            <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;