agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -0,0 +1,330 @@
+/*
+********************************************
+ 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 {ContentInterface, UidType} 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 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';
+
+import WaitingRoomButton from '../../subComponents/waiting-rooms/WaitingRoomControls';
+import {useString} from '../../utils/useString';
+import {
+  peoplePanelMeText,
+  peoplePanelPresenterText,
+} from '../../language/default-labels/videoCallScreenLabels';
+interface ParticipantInterface {
+  isLocal: boolean;
+  name: string;
+  user: ContentInterface;
+  showControls: boolean;
+  isHostUser: boolean;
+  isAudienceUser: boolean;
+  isMobile?: boolean;
+  waitingRoomUser?: boolean;
+  handleClose: () => {};
+  updateActionSheet: (screenName: 'chat' | 'participants' | 'settings') => {};
+  uid?: UidType;
+  screenUid?: UidType;
+}
+
+const Participant = (props: ParticipantInterface) => {
+  const metext = useString(peoplePanelMeText)();
+  const presentertext = useString(peoplePanelPresenterText)();
+  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,
+    waitingRoomUser = false,
+    uid,
+    screenUid,
+  } = 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}>{metext}</Text>}
+            {!isLocal &&
+            $config.EVENT_MODE &&
+            coHostUids.indexOf(user.uid) !== -1 ? (
+              <Text style={styles.subText}>{presentertext}</Text>
+            ) : (
+              <></>
+            )}
+          </View>
+          <View style={styles.iconContainer}>
+            {(isHovered || actionMenuVisible || isMobileUA()) &&
+            !waitingRoomUser ? (
+              <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} />
+            )}
+            {waitingRoomUser ? (
+              <>
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={false}
+                />
+                <Spacer horizontal={true} size={8} />
+                <WaitingRoomButton
+                  uid={uid}
+                  screenUid={screenUid}
+                  isAccept={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,
+                              };
+                            }}
+                          />
+                        </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,
+                            };
+                          }}
+                        />
+                      </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',
+    alignItems: 'center',
+    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',
   },
 });

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

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

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

@@ -9,20 +9,150 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {View, Text} from 'react-native';
-import ParticipantName from './ParticipantName';
+import React, {useRef, useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import ThemeConfig from '../../theme';
+import UserAvatar from '../../atoms/UserAvatar';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {ContentInterface} from 'customization-api';
+import {isWebInternal, isMobileUA} from '../../utils/common';
+import IconButton from '../../atoms/IconButton';
+import UserActionMenuOptionsOptions from './UserActionMenuOptions';
 
-const ScreenshareParticipants = (props: any) => {
-  const {p_styles, name} = props;
+const ScreenshareParticipants = (props: {user: ContentInterface}) => {
+  const screenshareRef = useRef();
+  const [isHovered, setIsHovered] = useState(false);
+  const [actionMenuVisible, setActionMenuVisible] = useState(false);
+
+  const showModal = () => {
+    setActionMenuVisible(state => !state);
+  };
   return (
-    <View style={p_styles.participantRow}>
-      <ParticipantName value={name} />
-      <View style={p_styles.dummyView}>
-        {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
-        <Text>local screen sharing</Text>
-      </View>
-    </View>
+    <>
+      {/* {renderActionMenu()} */}
+      <UserActionMenuOptionsOptions
+        actionMenuVisible={actionMenuVisible}
+        setActionMenuVisible={setActionMenuVisible}
+        user={props.user}
+        btnRef={screenshareRef}
+        from={'screenshare-participant'}
+      />
+      <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
+        <View style={styles.container}>
+          <View style={styles.bgContainerStyle}>
+            <UserAvatar
+              name={props.user.name}
+              containerStyle={styles.containerStyle}
+              textStyle={styles.textStyle}
+            />
+          </View>
+          <View style={{flex: 1, marginHorizontal: 8, alignSelf: 'center'}}>
+            <Text style={styles.participantNameText} numberOfLines={1}>
+              {props.user.name}
+            </Text>
+          </View>
+          {true ? (
+            <View
+              style={styles.iconContainer}
+              ref={screenshareRef}
+              collapsable={false}>
+              {isHovered || actionMenuVisible || isMobileUA() ? (
+                //todo mobile by default it should show
+                <View
+                  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>
+              ) : (
+                <View style={{width: 24, height: 24, opacity: 0}} />
+              )}
+            </View>
+          ) : (
+            <View style={{width: 24, height: 24, opacity: 0}} />
+          )}
+        </View>
+      </PlatformWrapper>
+    </>
   );
 };
 export default ScreenshareParticipants;
+
+const PlatformWrapper = ({children, showModal, setIsHovered}) => {
+  return isWebInternal() ? (
+    <div
+      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: 12,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    flexDirection: 'row',
+    color: $config.FONT_COLOR,
+    textAlign: 'left',
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+  },
+  userInfoContainer: {
+    flexDirection: 'row',
+  },
+  iconContainer: {
+    flexDirection: 'row',
+  },
+});