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

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -9,17 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import React, {useRef, useState} from 'react';
+import {useWindowDimensions} from 'react-native';
+import {UidType} from '../../agora-rn-uikit';
 import useIsPSTN from '../utils/useIsPSTN';
 import useMutePSTN from '../utils/useMutePSTN';
+import Styles from '../components/styles';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
-
+import IconButton from '../atoms/IconButton';
+import RemoteMutePopup from './RemoteMutePopup';
+import {I18nMuteType, useContent} from 'customization-api';
+import {calculatePosition} from '../utils/common';
+import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 export interface RemoteAudioMuteProps {
   uid: UidType;
   audio: boolean;
   isHost: boolean;
+  userContainerRef: any;
 }
 /**
  * Component to mute / unmute remote audio.
@@ -27,36 +33,84 @@ export interface RemoteAudioMuteProps {
  * If the local user is not a host, it simply renders an image
  */
 const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
-  const {isHost = false} = props;
+  const btnRef = useRef(null);
+  const {isHost = false, userContainerRef} = props;
   const muteRemoteAudio = useRemoteMute();
-
+  const requestRemoteAudio = useRemoteRequest();
+  const [showModal, setShowModal] = useState(false);
+  const [pos, setPos] = useState({});
+  const {defaultContent} = useContent();
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const onPress = () => {
+    if (isPSTN(props.uid)) {
+      try {
+        mutePSTN(props.uid);
+      } catch (error) {
+        console.error('An error occurred while muting the PSTN user.');
+      }
+    } else {
+      props?.audio
+        ? muteRemoteAudio(MUTE_REMOTE_TYPE.audio, props.uid)
+        : requestRemoteAudio(REQUEST_REMOTE_TYPE.audio, props.uid);
+    }
+    setShowModal(false);
+  };
   return (
-    <BtnTemplate
-      disabled={!isHost}
-      onPress={() => {
-        if (isPSTN(props.uid)) {
-          try {
-            mutePSTN(props.uid);
-          } catch (error) {
-            console.error('An error occurred while muting the PSTN user.');
-          }
-        } else {
-          muteRemoteAudio(MUTE_REMOTE_TYPE.audio, props.uid);
-        }
-      }}
-      style={style.buttonIconMic}
-      name={props.audio ? 'mic' : 'micOff'}
-    />
+    <>
+      <RemoteMutePopup
+        action={props?.audio ? 'mute' : 'request'}
+        type={I18nMuteType.audio}
+        actionMenuVisible={showModal}
+        setActionMenuVisible={setShowModal}
+        name={defaultContent[props.uid]?.name}
+        modalPosition={pos}
+        onMutePress={onPress}
+      />
+      <IconButton
+        setRef={ref => (btnRef.current = ref)}
+        disabled={!isHost}
+        onPress={() => {
+          btnRef?.current?.measure(
+            (
+              _fx: number,
+              _fy: number,
+              localWidth: number,
+              localHeight: number,
+              px: number,
+              py: number,
+            ) => {
+              const data = calculatePosition({
+                px,
+                py,
+                localHeight,
+                localWidth,
+                globalHeight,
+                globalWidth,
+              });
+              setPos(data);
+              setShowModal(true);
+            },
+          );
+        }}
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 20,
+        }}
+        iconProps={{
+          iconContainerStyle: {padding: 8},
+          iconSize: 20,
+          iconType: 'plain',
+          name: props.audio ? 'mic-on' : 'mic-off',
+          tintColor: props.audio
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL,
+        }}
+      />
+    </>
   );
 };
 
-const style = StyleSheet.create({
-  buttonIconMic: {
-    width: 25,
-    height: 24,
-  },
-});
-
 export default RemoteAudioMute;

package/template/src/subComponents/RemoteEndCall.tsx

@@ -11,7 +11,8 @@
 */
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import IconButton from '../atoms/IconButton';
+import {UidType} from '../../agora-rn-uikit';
 import useRemoteEndCall from '../utils/useRemoteEndCall';
 
 export interface RemoteEndCallProps {
@@ -21,13 +22,15 @@ export interface RemoteEndCallProps {
 const RemoteEndCall = (props: RemoteEndCallProps) => {
   const endRemoteCall = useRemoteEndCall();
   return props.isHost && String(props.uid)[0] !== '1' ? (
-    <BtnTemplate
+    <IconButton
       style={style.remoteButton}
+      iconProps={{
+        name: 'remove',
+        tintColor: '#FD0845',
+      }}
       onPress={() => {
         endRemoteCall(props.uid);
       }}
-      color="#FD0845"
-      name={'remoteEndCall'} // earlier was endCall, added remoteEndCall
     />
   ) : (
     <></>
@@ -46,7 +49,7 @@ const style = StyleSheet.create({
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    backgroundColor: $config.SECONDARY_ACTION_COLOR,
   },
 });
 

package/template/src/subComponents/RemoteMutePopup.tsx

@@ -0,0 +1,115 @@
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+import ThemeConfig from '../theme';
+import Spacer from '../atoms/Spacer';
+import PlatformWrapper from '../utils/PlatformWrapper';
+import {isMobileOrTablet} from 'customization-api';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useString} from '../utils/useString';
+import {
+  I18nMuteConfirmation,
+  I18nMuteType,
+  I18nRequestConfirmation,
+  muteAllConfirmationPopoverContent,
+  muteAllConfirmationPopoverPrimaryBtnText,
+  muteConfirmationPopoverContent,
+  muteConfirmationPopoverPrimaryBtnText,
+  requestConfirmationPopoverContent,
+  requestConfirmationPopoverPrimaryBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
+import InlinePopup from '../../src/atoms/InlinePopup';
+
+export interface RemoteMutePopupProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  name: string;
+  onMutePress: () => void;
+  type: I18nMuteType;
+  action?: 'mute' | 'request';
+}
+
+const RemoteMutePopup = (props: RemoteMutePopupProps) => {
+  const cancelLabel = useString(cancelText)();
+  const muteLabel = useString(muteConfirmationPopoverPrimaryBtnText)();
+  const muteAllLabel = useString(muteAllConfirmationPopoverPrimaryBtnText)();
+  const requestLabel = useString(requestConfirmationPopoverPrimaryBtnText)();
+
+  const muteAllConfirmation = useString<I18nMuteType>(
+    muteAllConfirmationPopoverContent,
+  );
+  const requestConfirmation = useString<I18nRequestConfirmation>(
+    requestConfirmationPopoverContent,
+  );
+  const muteConfirmation = useString<I18nMuteConfirmation>(
+    muteConfirmationPopoverContent,
+  );
+
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    modalPosition,
+    action = 'mute',
+  } = props;
+  let message = '';
+  let btnLabel = '';
+
+  if (props.name) {
+    //mute action
+    if (action === 'mute') {
+      message = muteConfirmation({
+        name: props?.name,
+        type: props.type,
+      });
+      btnLabel = muteLabel;
+      //message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
+    }
+    //request action
+    else {
+      message = requestConfirmation({
+        name: props?.name,
+        type: props?.type,
+      });
+      btnLabel = requestLabel;
+      // if (props?.type === 'audio') {
+      //   //message = `Request ${props.name} to turn on their microphone?`;
+      // } else {
+      //   //message = `Request ${props.name} to turn on their camera?`;
+      // }
+    }
+  } else {
+    message = muteAllConfirmation(props?.type);
+    btnLabel = muteAllLabel;
+    //message = `Mute everyone's ${props.type} on the call?`;
+  }
+  const cancelTxt =
+    cancelLabel.charAt(0).toUpperCase() + cancelLabel.slice(1).toLowerCase();
+
+  return (
+    <InlinePopup
+      actionMenuVisible={actionMenuVisible}
+      setActionMenuVisible={setActionMenuVisible}
+      modalPosition={modalPosition}
+      message={message}
+      cancelLabel={cancelTxt}
+      confirmLabel={btnLabel}
+      onConfirmClick={props.onMutePress}
+    />
+  );
+};
+
+export default RemoteMutePopup;

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -9,11 +9,15 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {BtnTemplate, UidType} from '../../agora-rn-uikit';
+import React, {useState, useRef} from 'react';
+import {useWindowDimensions} from 'react-native';
+import {UidType} from '../../agora-rn-uikit';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
-
+import IconButton from '../atoms/IconButton';
+import RemoteMutePopup from './RemoteMutePopup';
+import {I18nMuteType, useContent} from 'customization-api';
+import {calculatePosition} from '../utils/common';
+import useRemoteRequest, {REQUEST_REMOTE_TYPE} from '../utils/useRemoteRequest';
 /**
  * Component to mute / unmute remote video.
  * Sends a control message to another user over RTM if the local user is a host.
@@ -23,30 +27,79 @@ export interface RemoteVideoMuteProps {
   uid: UidType;
   video: boolean;
   isHost: boolean;
+  userContainerRef: any;
 }
 const RemoteVideoMute = (props: RemoteVideoMuteProps) => {
-  const {isHost = false} = props;
+  const btnRef = useRef(null);
+  const {isHost = false, userContainerRef} = props;
   const muteRemoteVideo = useRemoteMute();
-
+  const requestRemoteVideo = useRemoteRequest();
+  const [showModal, setShowModal] = useState(false);
+  const [pos, setPos] = useState({});
+  const {defaultContent} = useContent();
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const onPress = () => {
+    props?.video
+      ? muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid)
+      : requestRemoteVideo(REQUEST_REMOTE_TYPE.video, props.uid);
+    setShowModal(false);
+  };
   return String(props.uid)[0] !== '1' ? (
-    <BtnTemplate
-      disabled={!isHost}
-      onPress={() => {
-        muteRemoteVideo(MUTE_REMOTE_TYPE.video, props.uid);
-      }}
-      style={style.buttonIconCam}
-      name={props.video ? 'videocam' : 'videocamOff'}
-    />
+    <>
+      <RemoteMutePopup
+        action={props?.video ? 'mute' : 'request'}
+        type={I18nMuteType.video}
+        actionMenuVisible={showModal}
+        setActionMenuVisible={setShowModal}
+        name={defaultContent[props.uid]?.name}
+        modalPosition={pos}
+        onMutePress={onPress}
+      />
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 20,
+        }}
+        setRef={ref => (btnRef.current = ref)}
+        disabled={!isHost}
+        onPress={() => {
+          btnRef?.current?.measure(
+            (
+              _fx: number,
+              _fy: number,
+              localWidth: number,
+              localHeight: number,
+              px: number,
+              py: number,
+            ) => {
+              const data = calculatePosition({
+                px,
+                py,
+                localHeight,
+                localWidth,
+                globalHeight,
+                globalWidth,
+              });
+              setPos(data);
+              setShowModal(true);
+            },
+          );
+        }}
+        iconProps={{
+          iconContainerStyle: {padding: 8},
+          name: props?.video ? 'video-on' : 'video-off',
+          iconSize: 20,
+          iconType: 'plain',
+          tintColor: props.video
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL,
+        }}
+      />
+    </>
   ) : (
     <></>
   );
 };
 
-const style = StyleSheet.create({
-  buttonIconCam: {
-    width: 25,
-    height: 25,
-  },
-});
-
 export default RemoteVideoMute;

package/template/src/subComponents/RemoveMeetingPopup.tsx

@@ -0,0 +1,122 @@
+import React, {SetStateAction, useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import TertiaryButton from '../atoms/TertiaryButton';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {useIsDesktop} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  removeUserFromRoomPopupHeading,
+  removeUserFromRoomPopupPrimaryBtnText,
+  removeUserFromRoomPopupSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
+
+interface RemoveMeetingPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  removeUserFromMeeting: () => void;
+  username: string;
+}
+const RemoveMeetingPopup = (props: RemoveMeetingPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const removeMeetingLabelHeading = useString(removeUserFromRoomPopupHeading);
+  const removeMeetingLabelSubHeading = useString(
+    removeUserFromRoomPopupSubHeading,
+  );
+
+  const cancelBtnLabel = useString(cancelText)();
+  const removeBtnLabel = useString(removeUserFromRoomPopupPrimaryBtnText)();
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>
+        {removeMeetingLabelHeading(props?.username)}
+      </Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>
+        {removeMeetingLabelSubHeading(props?.username)}
+      </Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={removeBtnLabel}
+            onPress={() => {
+              props.removeUserFromMeeting();
+              props.setModalVisible(false);
+            }}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default RemoveMeetingPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/subComponents/RemoveScreensharePopup.tsx

@@ -0,0 +1,124 @@
+import React, {SetStateAction, useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import TertiaryButton from '../atoms/TertiaryButton';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {useIsDesktop} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  removeScreenshareFromRoomPopupHeading,
+  removeScreenshareFromRoomPopupPrimaryBtnText,
+  removeScreenshareFromRoomPopupSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
+
+interface RemoveScreensharePopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  removeScreenShareFromMeeting: () => void;
+  username: string;
+}
+const RemoveScreensharePopup = (props: RemoveScreensharePopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const removeMeetingLabelHeading = useString(
+    removeScreenshareFromRoomPopupHeading,
+  )();
+  const removeMeetingLabelSubHeading = useString(
+    removeScreenshareFromRoomPopupSubHeading,
+  );
+
+  const cancelBtnLabel = useString(cancelText)();
+  const removeBtnLabel = useString(
+    removeScreenshareFromRoomPopupPrimaryBtnText,
+  )();
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{removeMeetingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>
+        {removeMeetingLabelSubHeading(props?.username)}
+      </Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={removeBtnLabel}
+            onPress={() => {
+              props.removeScreenShareFromMeeting();
+              props.setModalVisible(false);
+            }}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default RemoveScreensharePopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
+  },
+});