agora-appbuilder-core 3.0.9 → 4.0.0-api.0

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

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

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

@@ -1,53 +1,124 @@
 import React from 'react';
-import MeParticipant from './MeParticipant';
+import {Text} from 'react-native';
 import ScreenshareParticipants from './ScreenshareParticipants';
-import RemoteParticipants from './RemoteParticipants';
+import Participant from './Participant';
 import {useString} from '../../utils/useString';
-import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {ContentInterface, UidType, useLocalUid} from '../../../agora-rn-uikit';
+import {useRoomInfo, useContent} from 'customization-api';
+import Spacer from '../../atoms/Spacer';
+import {useVideoMeetingData} from '../contexts/VideoMeetingDataContext';
+import {useScreenContext} from '../contexts/ScreenShareContext';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 
 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, activeUids} = useRender();
+  const {defaultContent} = useContent();
   const getParticipantName = (uid: UidType) => {
-    return renderList[uid]?.name || remoteUserDefaultLabel;
+    return defaultContent[uid]?.name || remoteUserDefaultLabel;
+  };
+  const {hostUids} = useVideoMeetingData();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const {
+    isMobile = false,
+    handleClose,
+    updateActionSheet,
+    uids,
+    emptyMessage,
+  } = props;
+
+  const renderScreenShare = (user: ContentInterface) => {
+    if (screenShareData[user.screenUid]?.isActive) {
+      return (
+        <ScreenshareParticipants
+          user={defaultContent[user.screenUid]}
+          key={user.screenUid}
+        />
+      );
+    } else {
+      <></>;
+    }
   };
 
   return (
     <>
-      {/* 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}
-            />
+      {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={defaultContent[localUid]}
+                showControls={true}
+                isHostUser={hostUids.indexOf(localUid) !== -1}
+                key={localUid}
+                isMobile={isMobile}
+                handleClose={handleClose}
+                updateActionSheet={updateActionSheet}
+              />
+              {renderScreenShare(defaultContent[localUid])}
+            </>
           ) : (
-            <RemoteParticipants
-              name={getParticipantName(uid)}
-              p_styles={p_style}
-              user={renderList[uid]}
-              showControls={renderList[uid]?.type === 'rtc'}
-              isHost={isHost}
-              key={uid}
-            />
-          ),
-        )}
+            <></>
+          )}
+          {/* Others Users in the call */}
+          {uids
+            .filter(
+              (uid) => uid !== localUid && defaultContent[uid].type === 'rtc',
+            )
+            .map(
+              (uid) => (
+                // defaultContent[uid]?.type === 'screenshare' ? (
+                //   <ScreenshareParticipants
+                //     name={getParticipantName(uid)}
+                //     key={uid}
+                //   />
+                // ) : (
+                <>
+                  <Participant
+                    isLocal={false}
+                    isAudienceUser={false}
+                    name={getParticipantName(uid)}
+                    user={defaultContent[uid]}
+                    showControls={defaultContent[uid]?.type === 'rtc' && isHost}
+                    isHostUser={hostUids.indexOf(uid) !== -1}
+                    key={uid}
+                    isMobile={isMobile}
+                    handleClose={handleClose}
+                    updateActionSheet={updateActionSheet}
+                  />
+                  {renderScreenShare(defaultContent[uid])}
+                </>
+              ),
+              //),
+            )}
+        </>
+      )}
     </>
   );
 }

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

@@ -0,0 +1,300 @@
+/*
+********************************************
+ 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, {useContext, useRef, useState} from 'react';
+import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
+import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
+import {ClientRole, ContentInterface} from '../../../agora-rn-uikit';
+import UserAvatar from '../../atoms/UserAvatar';
+import {isMobileUA, isWebInternal} from '../../utils/common';
+import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
+import Spacer from '../../atoms/Spacer';
+import useRemoteEndCall from '../../utils/useRemoteEndCall';
+import {useChatMessages} from '../chat-messages/useChatMessages';
+import LocalVideoMute from '../../subComponents/LocalVideoMute';
+import LocalAudioMute from '../../subComponents/LocalAudioMute';
+import RemoveMeetingPopup from '../../subComponents/RemoveMeetingPopup';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import {
+  RaiseHandValue,
+  LiveStreamContext,
+  LiveStreamControlMessageEnum,
+} from '../livestream';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import IconButton from '../../atoms/IconButton';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import useRemoteRequest, {
+  REQUEST_REMOTE_TYPE,
+} from '../../utils/useRemoteRequest';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../../utils/useRemoteMute';
+import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
+import {
+  SidePanelType,
+  useLayout,
+  useContent,
+  useSidePanel,
+} from 'customization-api';
+import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
+import UserActionMenuOptionsOptions from './UserActionMenuOptions';
+interface ParticipantInterface {
+  isLocal: boolean;
+  name: string;
+  user: ContentInterface;
+  showControls: boolean;
+  isHostUser: boolean;
+  isAudienceUser: boolean;
+  isMobile?: boolean;
+  handleClose: () => {};
+  updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
+}
+
+const Participant = (props: ParticipantInterface) => {
+  const {coHostUids} = useContext(LiveStreamContext);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
+  const usercontainerRef = useRef(null);
+  const moreIconRef = useRef(null);
+  const {
+    user,
+    name,
+    showControls,
+    isHostUser,
+    isLocal,
+    isAudienceUser,
+    isMobile = false,
+    handleClose,
+    updateActionSheet,
+  } = props;
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const showModal = () => {
+    setActionMenuVisible((state) => !state);
+  };
+  return (
+    <>
+      <UserActionMenuOptionsOptions
+        actionMenuVisible={actionMenuVisible}
+        setActionMenuVisible={setActionMenuVisible}
+        user={props.user}
+        btnRef={moreIconRef}
+        from={'partcipant'}
+      />
+      <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
+        <View style={styles.container} ref={usercontainerRef}>
+          <View style={styles.bgContainerStyle}>
+            <UserAvatar
+              name={name}
+              containerStyle={styles.containerStyle}
+              textStyle={styles.textStyle}
+            />
+          </View>
+          <View style={{flex: 1, marginHorizontal: 8, alignSelf: 'center'}}>
+            <Text style={styles.participantNameText} numberOfLines={1}>
+              {name}
+            </Text>
+            {isLocal && <Text style={styles.subText}>{'Me'}</Text>}
+            {!isLocal &&
+            $config.EVENT_MODE &&
+            coHostUids.indexOf(user.uid) !== -1 ? (
+              <Text style={styles.subText}>{'Presenter'}</Text>
+            ) : (
+              <></>
+            )}
+          </View>
+          <View style={styles.iconContainer}>
+            {isHovered || actionMenuVisible || isMobileUA() ? (
+              <View
+                ref={moreIconRef}
+                collapsable={false}
+                style={{
+                  width: 24,
+                  height: 24,
+                  alignSelf: 'center',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: 20,
+                }}>
+                <IconButton
+                  hoverEffect={true}
+                  hoverEffectStyle={{
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['20%'],
+                    borderRadius: 20,
+                    padding: 5,
+                  }}
+                  iconProps={{
+                    iconType: 'plain',
+                    name: 'more-menu',
+                    iconSize: 20,
+                    tintColor: $config.SECONDARY_ACTION_COLOR,
+                  }}
+                  onPress={() => {
+                    showModal();
+                  }}
+                />
+              </View>
+            ) : (
+              <Spacer size={24} horizontal={true} />
+            )}
+            {showControls ? (
+              <>
+                <Spacer horizontal={true} size={8} />
+                {!$config.AUDIO_ROOM &&
+                  (isLocal
+                    ? !isAudienceUser && (
+                        <View>
+                          <LocalVideoMute
+                            plainIconHoverEffect={true}
+                            iconProps={(isVideoEnabled, isPermissionDenied) => {
+                              return {
+                                iconSize: 20,
+                                iconType: 'plain',
+                                iconContainerStyle: {padding: 8},
+                                showWarningIcon: false,
+                                tintColor: isVideoEnabled
+                                  ? $config.PRIMARY_ACTION_BRAND_COLOR
+                                  : isPermissionDenied
+                                  ? $config.SEMANTIC_NEUTRAL
+                                  : $config.SEMANTIC_ERROR,
+                              };
+                            }}
+                            showLabel={false}
+                            isMobileView={isMobile}
+                          />
+                        </View>
+                      )
+                    : !isAudienceUser && (
+                        <View>
+                          <RemoteVideoMute
+                            uid={user.uid}
+                            video={user.video}
+                            isHost={isHost}
+                            userContainerRef={usercontainerRef}
+                          />
+                        </View>
+                      ))}
+                {isLocal
+                  ? !isAudienceUser && (
+                      <View>
+                        <LocalAudioMute
+                          plainIconHoverEffect={true}
+                          iconProps={(isAudioEnabled, isPermissionDenied) => {
+                            return {
+                              iconSize: 20,
+                              iconType: 'plain',
+                              iconContainerStyle: {padding: 8},
+                              showWarningIcon: false,
+                              tintColor: isAudioEnabled
+                                ? $config.PRIMARY_ACTION_BRAND_COLOR
+                                : isPermissionDenied
+                                ? $config.SEMANTIC_NEUTRAL
+                                : $config.SEMANTIC_ERROR,
+                            };
+                          }}
+                          showLabel={false}
+                          isMobileView={isMobile}
+                        />
+                      </View>
+                    )
+                  : !isAudienceUser && (
+                      <View>
+                        <RemoteAudioMute
+                          uid={user.uid}
+                          audio={user.audio}
+                          isHost={isHost}
+                          userContainerRef={usercontainerRef}
+                        />
+                      </View>
+                    )}
+              </>
+            ) : (
+              <></>
+            )}
+          </View>
+        </View>
+      </PlatformWrapper>
+    </>
+  );
+};
+export default Participant;
+
+const PlatformWrapper = ({children, showModal, setIsHovered}) => {
+  return isWebInternal() ? (
+    <div
+      style={{}}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+const styles = StyleSheet.create({
+  bgContainerStyle: {
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  containerStyle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  textStyle: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 12,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+  participantNameText: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.tiny,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    flexDirection: 'row',
+    color: $config.FONT_COLOR,
+    textAlign: 'left',
+  },
+  subText: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: ThemeConfig.FontSize.tiny,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+    marginTop: 4,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+  },
+  userInfoContainer: {
+    flexDirection: 'row',
+  },
+  iconContainer: {
+    flexDirection: 'row',
+  },
+  controlsContainer: {
+    backgroundColor: 'red',
+  },
+});

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

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