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

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

@@ -1,29 +1,54 @@
+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;
   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.medium,
+    paddingVertical: 12,
+    alignSelf: 'center',
   },
-  count: {
-    fontSize: 13,
-    fontWeight: '500',
+  iconView: {
+    paddingVertical: 8,
+    alignSelf: 'center',
   },
 });

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

@@ -9,20 +9,152 @@
  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.userInfoContainer}>
+            <View style={styles.bgContainerStyle}>
+              <UserAvatar
+                name={props.user.name}
+                containerStyle={styles.containerStyle}
+                textStyle={styles.textStyle}
+              />
+            </View>
+            <View style={{alignSelf: 'center'}}>
+              <Text style={styles.participantNameText}>{props.user.name}</Text>
+            </View>
+          </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>
+          ) : (
+            <></>
+          )}
+        </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,
+    marginRight: 8,
+  },
+  containerStyle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  textStyle: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 10,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+  participantNameText: {
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 15,
+    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',
+  },
+});

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

@@ -0,0 +1,396 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import useRemoteMute, {MUTE_REMOTE_TYPE} from '../../utils/useRemoteMute';
+import {
+  ContentInterface,
+  SidePanelType,
+  useLayout,
+  useLocalUid,
+  useRoomInfo,
+  useContent,
+  useSidePanel,
+} from 'customization-api';
+import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
+import useRemoteRequest, {
+  REQUEST_REMOTE_TYPE,
+} from '../../utils/useRemoteRequest';
+import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
+import {useChatMessages} from '../chat-messages/useChatMessages';
+import {useLiveStreamDataContext} from '../contexts/LiveStreamDataContext';
+import useRemoteEndCall from '../../utils/useRemoteEndCall';
+import LiveStreamContext from '../livestream/LiveStreamContext';
+import {ClientRole, DispatchContext, UidType} from '../../../agora-rn-uikit';
+import {useWindowDimensions} from 'react-native';
+import {
+  LiveStreamControlMessageEnum,
+  RaiseHandValue,
+} from '../livestream/Types';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import RemoveMeetingPopup from '../../subComponents/RemoveMeetingPopup';
+import RemoveScreensharePopup from '../../subComponents/RemoveScreensharePopup';
+import useRemoteEndScreenshare from '../../utils/useRemoteEndScreenshare';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import {useFocus} from '../../utils/useFocus';
+import Toast from '../../../react-native-toast-message';
+import RemoteMutePopup from '../../subComponents/RemoteMutePopup';
+import {calculatePosition, trimText} from '../../utils/common';
+
+interface UserActionMenuOptionsOptionsProps {
+  user: ContentInterface;
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: any;
+  from: 'partcipant' | 'screenshare-participant' | 'video-tile';
+}
+export default function UserActionMenuOptionsOptions(
+  props: UserActionMenuOptionsOptionsProps,
+) {
+  const [showAudioMuteModal, setShowAudioMuteModal] = useState(false);
+  const [showVideoMuteModal, setShowVideoMuteModal] = useState(false);
+  const [isPosCalculated, setIsPosCalculated] = useState(false);
+  const {setFocus} = useFocus();
+  const {stopUserScreenShare} = useScreenshare();
+  const remoteEndScreenshare = useRemoteEndScreenshare();
+  const [removeScreensharePopupVisible, setRemoveScreensharePopupVisible] =
+    useState(false);
+  const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
+  const {setSidePanel} = useSidePanel();
+  const {user, actionMenuVisible, setActionMenuVisible} = props;
+  const {pinnedUid, activeUids} = useContent();
+  const {dispatch} = useContext(DispatchContext);
+  const {setLayout} = useLayout();
+  const localuid = useLocalUid();
+  const {openPrivateChat} = useChatMessages();
+  const {hostUids, audienceUids} = useLiveStreamDataContext();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const remoteRequest = useRemoteRequest();
+  const remoteMute = useRemoteMute();
+  const endRemoteCall = useRemoteEndCall();
+  const {promoteAudienceAsCoHost, raiseHandList} =
+    useContext(LiveStreamContext);
+  const [removeMeetingPopupVisible, setRemoveMeetingPopupVisible] =
+    useState(false);
+
+  useEffect(() => {
+    const items: ActionMenuItem[] = [];
+
+    /**
+     * In VideoMeeting/VoiceChat - Show pin menu for all users
+     * In Livestreaming/AudioLivecast - Show only for host -> i.e who is streaming video/audio. don't show it for audience
+     */
+    if (
+      !$config.EVENT_MODE ||
+      !(
+        $config.EVENT_MODE &&
+        $config.RAISE_HAND &&
+        audienceUids.indexOf(user.uid) !== -1
+      )
+    ) {
+      items.push({
+        disabled: activeUids.length === 1,
+        icon: pinnedUid ? 'unpin-outlined' : 'pin-outlined',
+        onHoverIcon: pinnedUid ? 'unpin-outlined' : 'pin-filled',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        textColor: $config.SECONDARY_ACTION_COLOR,
+        title: pinnedUid
+          ? user.uid === pinnedUid
+            ? 'Unpin'
+            : 'Replace Pin'
+          : 'Pin for me',
+        callback: () => {
+          setActionMenuVisible(false);
+          dispatch({
+            type: 'UserPin',
+            value: [pinnedUid && user.uid === pinnedUid ? 0 : user.uid],
+          });
+          setLayout(getPinnedLayoutName());
+        },
+      });
+    }
+
+    /**
+     * Below menu items for remote user with type rtc(not for screenshare)
+     */
+    if (localuid !== user.uid && user.type === 'rtc') {
+      /**
+       * Chat menu
+       */
+      items.push({
+        icon: 'chat-outlined',
+        onHoverIcon: 'chat-filled',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        textColor: $config.SECONDARY_ACTION_COLOR,
+        title: 'Message Privately',
+        callback: () => {
+          setActionMenuVisible(false);
+          openPrivateChat(user.uid);
+        },
+      });
+
+      /**
+       * Only host can see this menu item - request/mute - video/audio, promote to co host,demote to audience,remove form meeting
+       */
+      if (isHost) {
+        /**
+         * Request/Mute -> Audio/Video
+         * VideoMeeting/Voice chat - show this for all user
+         * Livestreaming/Audio livecast - show this for host user only(because audience not have permission to stream)
+         *
+         * note:
+         * Audio Menu applicable to all vertcials
+         * Video menu applicable to VideoMeeting and Livestreaming
+         */
+        if (
+          !$config.EVENT_MODE ||
+          ($config.EVENT_MODE &&
+            $config.RAISE_HAND &&
+            hostUids.indexOf(user.uid) !== -1)
+        ) {
+          items.push({
+            icon: user.audio ? 'mic-off-outlined' : 'mic-on-outlined',
+            onHoverIcon: user.audio ? 'mic-off-filled' : 'mic-on-filled',
+            iconColor: $config.SECONDARY_ACTION_COLOR,
+            textColor: $config.SECONDARY_ACTION_COLOR,
+            title: user.audio ? 'Mute Audio' : 'Request Audio',
+            callback: () => {
+              setActionMenuVisible(false);
+              user.audio
+                ? setShowAudioMuteModal(true)
+                : remoteRequest(REQUEST_REMOTE_TYPE.audio, user.uid);
+            },
+          });
+          if (!$config.AUDIO_ROOM) {
+            items.push({
+              icon: user.video ? 'video-off-outlined' : 'video-on-outlined',
+              onHoverIcon: user.video ? 'video-off-filled' : 'video-on-filled',
+              iconColor: $config.SECONDARY_ACTION_COLOR,
+              textColor: $config.SECONDARY_ACTION_COLOR,
+              title: user.video ? 'Mute Video' : 'Request Video',
+              callback: () => {
+                setActionMenuVisible(false);
+                user.video
+                  ? setShowVideoMuteModal(true)
+                  : remoteRequest(REQUEST_REMOTE_TYPE.video, user.uid);
+              },
+            });
+          }
+        }
+
+        /**
+         * Promote co host -> show only on Livestreaming and Audio livecast
+         */
+        if (
+          $config.EVENT_MODE &&
+          $config.RAISE_HAND &&
+          hostUids.indexOf(user.uid) === -1
+        ) {
+          items.push({
+            icon: 'promote-outlined',
+            onHoverIcon: 'promote-filled',
+            iconColor: $config.SECONDARY_ACTION_COLOR,
+            textColor: $config.SECONDARY_ACTION_COLOR,
+            title: 'Add as Presenter',
+            callback: () => {
+              setActionMenuVisible(false);
+              promoteAudienceAsCoHost(user.uid);
+            },
+          });
+        }
+        if ($config.EVENT_MODE) {
+          if (
+            raiseHandList[user.uid]?.raised === RaiseHandValue.TRUE &&
+            raiseHandList[user.uid]?.role == ClientRole.Broadcaster
+          ) {
+            items.push({
+              isBase64Icon: true,
+              icon: 'demote-outlined',
+              onHoverIcon: 'demote-filled',
+              iconColor: $config.SECONDARY_ACTION_COLOR,
+              textColor: $config.SECONDARY_ACTION_COLOR,
+              title: 'Remove as Presenter',
+              callback: () => {
+                setActionMenuVisible(false);
+                events.send(
+                  LiveStreamControlMessageEnum.raiseHandRequestRejected,
+                  '',
+                  PersistanceLevel.None,
+                  user.uid,
+                );
+              },
+            });
+          }
+        }
+
+        items.push({
+          icon: 'remove-meeting',
+          iconColor: $config.SEMANTIC_ERROR,
+          textColor: $config.SEMANTIC_ERROR,
+          title: 'Remove From Room',
+          callback: () => {
+            setActionMenuVisible(false);
+            setRemoveMeetingPopupVisible(true);
+          },
+        });
+      }
+    }
+
+    /**
+     * Local User menu item - change name
+     */
+    if (localuid == user.uid && user.type === 'rtc') {
+      items.push({
+        icon: 'pencil-outlined',
+        onHoverIcon: 'pencil-filled',
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        textColor: $config.SECONDARY_ACTION_COLOR,
+        title: 'Change Name',
+        callback: () => {
+          setFocus((prevState) => {
+            return {
+              ...prevState,
+              editName: true,
+            };
+          });
+
+          setActionMenuVisible(false);
+          setSidePanel(SidePanelType.Settings);
+        },
+      });
+    }
+    //Screenshare menu item
+    if (
+      (isHost || localuid === user.parentUid) &&
+      user.type === 'screenshare'
+    ) {
+      items.push({
+        icon: 'remove-meeting',
+        iconColor: $config.SEMANTIC_ERROR,
+        textColor: $config.SEMANTIC_ERROR,
+        title:
+          localuid === user?.parentUid
+            ? 'Stop Screenshare'
+            : 'Remove Screenshare',
+        callback: () => {
+          setActionMenuVisible(false);
+          //for local user directly stop the screenshare
+          if (localuid === user.parentUid) {
+            stopUserScreenShare();
+          }
+          //for remote user show popup and then user will use cta to stop screenshare
+          else {
+            setRemoveScreensharePopupVisible(true);
+          }
+        },
+      });
+    }
+    setActionMenuitems(items);
+  }, [pinnedUid, isHost, raiseHandList, hostUids, user]);
+
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const [modalPosition, setModalPosition] = useState({});
+
+  useEffect(() => {
+    if (actionMenuVisible) {
+      //getting btnRef x,y
+      props.btnRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          localWidth: number,
+          localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          const data = calculatePosition({
+            px,
+            py,
+            localWidth,
+            localHeight,
+            globalHeight,
+            globalWidth,
+          });
+          setModalPosition(data);
+          setIsPosCalculated(true);
+        },
+      );
+    }
+  }, [actionMenuVisible]);
+
+  return (
+    <>
+      {isHost ? (
+        <RemoteMutePopup
+          type="audio"
+          actionMenuVisible={showAudioMuteModal}
+          setActionMenuVisible={setShowAudioMuteModal}
+          name={props?.user.name}
+          modalPosition={modalPosition}
+          onMutePress={() => {
+            remoteMute(MUTE_REMOTE_TYPE.audio, user.uid);
+            setShowAudioMuteModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      {isHost ? (
+        <RemoteMutePopup
+          type="video"
+          actionMenuVisible={showVideoMuteModal}
+          setActionMenuVisible={setShowVideoMuteModal}
+          name={props?.user.name}
+          modalPosition={modalPosition}
+          onMutePress={() => {
+            remoteMute(MUTE_REMOTE_TYPE.video, user.uid);
+            setShowVideoMuteModal(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      {isHost ? (
+        <RemoveScreensharePopup
+          modalVisible={removeScreensharePopupVisible}
+          setModalVisible={setRemoveScreensharePopupVisible}
+          username={user.name}
+          removeScreenShareFromMeeting={() => {
+            props.user.parentUid
+              ? remoteEndScreenshare(props.user.parentUid)
+              : console.log('Parent Uid is not available');
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      {isHost ? (
+        <RemoveMeetingPopup
+          modalVisible={removeMeetingPopupVisible}
+          setModalVisible={setRemoveMeetingPopupVisible}
+          username={user.name}
+          removeUserFromMeeting={() => {
+            Toast.show({
+              type: 'info',
+              text1: `The system will remove ${trimText(
+                user.name,
+              )} from this call after 5 secs.`,
+              visibilityTime: 5000,
+              primaryBtn: null,
+              secondaryBtn: null,
+            });
+            endRemoteCall(user.uid);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+      <ActionMenu
+        from={props.from}
+        actionMenuVisible={actionMenuVisible && isPosCalculated}
+        setActionMenuVisible={setActionMenuVisible}
+        modalPosition={modalPosition}
+        items={actionMenuitems}
+      />
+    </>
+  );
+}