agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, {useContext, useState} from 'react';
 import {
   View,
@@ -12,10 +11,15 @@ import {
 } from 'react-native';
 import {useString} from '../utils/useString';
 import {networkIconsObject} from '../components/NetworkQualityContext';
-import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
-import {isWebInternal} from '../utils/common';
+//import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
+import {isMobileUA, isWebInternal} from '../utils/common';
 import NetworkQualityContext from '../components/NetworkQualityContext';
 import {RenderInterface, UidType} from '../../agora-rn-uikit';
+import ThemeConfig from '../theme';
+import ImageIcon from '../atoms/ImageIcon';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useLayout, useRender} from 'customization-api';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 
 /**
  *
@@ -29,31 +33,28 @@ import {RenderInterface, UidType} from '../../agora-rn-uikit';
  */
 interface NetworkQualityPillProps {
   user: RenderInterface;
-  primaryColor: any;
-  small?: boolean;
-  rootStyle?: StyleProp<ViewStyle>;
 }
 const NetworkQualityPill = (props: NetworkQualityPillProps) => {
-  const {user, primaryColor, small, rootStyle} = props;
+  const {user} = props;
   const [networkTextVisible, setNetworkTextVisible] = useState(false);
   //commented for v1 release
   //const getLabel = useString<NetworkQualities>('networkQualityLabel');
   const getLabel = (quality: string) => {
     switch (quality) {
       case 'unknown':
-        return 'Unknown';
+        return 'Network Unsupported';
       case 'excellent':
-        return 'Excellent';
+        return 'Excellent Network';
       case 'good':
-        return 'Good';
+        return 'Good Network';
       case 'bad':
-        return 'Bad';
+        return 'Bad Network';
       case 'veryBad':
-        return 'Very Bad';
+        return 'Very Bad Network';
       case 'unpublished':
-        return 'Unpublished';
+        return 'Network Unpublished';
       case 'loading':
-        return 'Loading';
+        return 'Network Loading';
       default:
         return 'Loading';
     }
@@ -64,41 +65,48 @@ const NetworkQualityPill = (props: NetworkQualityPillProps) => {
     : user.audio || user.video
     ? 8
     : 7;
-
+  const {activeUids} = useRender();
+  const {currentLayout} = useLayout();
+  const reduceSpace =
+    isMobileUA() &&
+    activeUids.length > 4 &&
+    currentLayout === getGridLayoutName();
   return (
     <View
+      testID="videocall-networkpill"
       style={[
         style.networkPill,
+        style.rootStyle,
         {
-          opacity: networkTextVisible ? 1 : 0.8,
+          backgroundColor: networkTextVisible
+            ? networkIconsObject[networkStat].tint +
+              hexadecimalTransparency['50%']
+            : $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%'],
         },
-        rootStyle,
+        reduceSpace ? {top: 2, right: 2} : {},
       ]}>
-      <PlatformSpecificWrapper {...{networkTextVisible, setNetworkTextVisible}}>
-        <View style={[style.networkIndicatorBackdrop]}>
-          <Image
-            source={{
-              uri: networkIconsObject[networkStat].icon,
-            }}
-            style={[
-              style.networkIcon,
-              {
-                tintColor:
-                  networkIconsObject[networkStat].tint === 'primary'
-                    ? primaryColor
-                    : networkIconsObject[networkStat].tint,
-              },
-            ]}
-            resizeMode={'contain'}
+      <PlatformSpecificWrapper
+        {...{
+          networkTextVisible,
+          setNetworkTextVisible,
+          reduceSpace,
+          activeUids,
+        }}>
+        <View>
+          <ImageIcon
+            iconType="plain"
+            tintColor={
+              networkTextVisible
+                ? $config.PRIMARY_ACTION_TEXT_COLOR
+                : networkIconsObject[networkStat].tint +
+                  hexadecimalTransparency['30%']
+            }
+            name={networkIconsObject[networkStat].icon}
+            iconSize={16}
           />
         </View>
         {networkTextVisible && (
-          <Text
-            textBreakStrategy={'simple'}
-            style={[
-              style.networkPillText,
-              {fontSize: small ? 14 : 15, userSelect: 'none'},
-            ]}>
+          <Text textBreakStrategy={'simple'} style={style.networkPillText}>
             {getLabel(networkIconsObject[networkStat].text)}
           </Text>
         )}
@@ -111,6 +119,8 @@ const PlatformSpecificWrapper = ({
   networkTextVisible,
   setNetworkTextVisible,
   children,
+  reduceSpace,
+  activeUids,
 }: any) => {
   return !isWebInternal() ? (
     <Pressable
@@ -119,6 +129,7 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
       }}
       onPress={() => {
         setNetworkTextVisible((visible: boolean) => !visible);
@@ -132,6 +143,7 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
       }}
       onClick={(e) => {
         e.preventDefault();
@@ -150,12 +162,13 @@ const PlatformSpecificWrapper = ({
 
 const style = StyleSheet.create({
   networkPill: {
-    height: 30,
-    backgroundColor: $config.SECONDARY_FONT_COLOR + 'bb',
     position: 'absolute',
     zIndex: 2,
-    paddingHorizontal: 0,
-    borderRadius: 15,
+    borderRadius: 50,
+  },
+  rootStyle: {
+    top: 8,
+    right: 8,
   },
   networkPillContent: {
     display: 'flex',
@@ -163,27 +176,11 @@ const style = StyleSheet.create({
     alignItems: 'center',
   },
   networkPillText: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 30,
-    fontSize: 15,
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '600',
-    marginLeft: 5,
-    marginRight: 15,
-  },
-  networkIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-  },
-  networkIndicatorBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignSelf: 'center',
-    marginLeft: 5,
-    marginRight: 5,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    justifyContent: 'center',
+    marginLeft: 8,
   },
 });
 

package/template/src/subComponents/OpenInNativeButton.tsx

@@ -37,13 +37,13 @@ const OpenInNativeButton = () => {
 
 const style = StyleSheet.create({
   btn: {
-    backgroundColor: $config.PRIMARY_COLOR,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     // width: 110,
     flex: 1,
     paddingHorizontal: 10,
     height: 30,
     // borderWidth: 1,
-    // borderColor: $config.PRIMARY_COLOR,
+    // borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     borderRadius: 100,
     // marginTop: 5,
     // marginRight: 10,
@@ -53,7 +53,7 @@ const style = StyleSheet.create({
     lineHeight: 29,
     // fontWeight: '500',
     textAlign: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
+    color: $config.SECONDARY_ACTION_COLOR,
   },
 });
 

package/template/src/subComponents/Recording.tsx

@@ -10,56 +10,55 @@
 *********************************************
 */
 import React from 'react';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
 import {useRecording} from './recording/useRecording';
-import {useString} from '../utils/useString';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from '../components/styles';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useVideoCall} from '../components/useVideoCall';
 
 export interface RecordingButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isRecordingActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  render?: (onPress: () => void, isRecordingActive: boolean) => JSX.Element;
+  isOnActionSheet?: boolean;
 }
 
 const Recording = (props: RecordingButtonProps) => {
-  const {startRecording, stopRecording, isRecordingActive} = useRecording();
+  const {startRecording, inProgress, isRecordingActive} = useRecording();
   //commented for v1 release
   //const recordingButton = useString<boolean>('recordingButton');
   const recordingButton = (recording: boolean) =>
-    recording ? 'Recording' : 'Record';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+    recording ? 'Stop Rec' : 'Record';
+  const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
+  const {setShowStopRecordingPopup} = useVideoCall();
   const onPress = () => {
     if (!isRecordingActive) {
       startRecording && startRecording();
     } else {
-      stopRecording && stopRecording();
+      setShowStopRecordingPopup(true);
     }
   };
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: isRecordingActive ? 'recordingActiveIcon' : 'recordingIcon',
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isRecordingActive ? 'stop-recording' : 'recording',
+      tintColor: isRecordingActive
+        ? $config.SEMANTIC_ERROR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      text: showLabel ? recordingButton(isRecordingActive) : '',
+      textColor: $config.FONT_COLOR,
+    },
     onPress,
-    color: isRecordingActive ? '#FD0845' : $config.PRIMARY_COLOR,
+    disabled: inProgress,
+    containerStyle: inProgress ? {opacity: 0.6} : {},
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.btnText = recordingButton(isRecordingActive);
-    btnTemplateProps.style = Styles.localButton as Object;
-  }
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
-    props.render(onPress, isRecordingActive, buttonTemplateName)
+    props.render(onPress, isRecordingActive)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      <IconButton {...iconButtonProps} />
+    </>
   );
 };
 

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 {useRender} 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 {renderList} = useRender();
   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="audio"
+        actionMenuVisible={showModal}
+        setActionMenuVisible={setShowModal}
+        name={renderList[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,193 @@
+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';
+
+export interface ActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  name: string;
+  onMutePress: () => void;
+  type: 'video' | 'audio';
+  action?: 'mute' | 'request';
+}
+
+const RemoteMutePopup = (props: ActionMenuProps) => {
+  const {height} = useWindowDimensions();
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    modalPosition,
+    action = 'mute',
+  } = props;
+  let message = '';
+
+  if (props.name) {
+    //mute action
+    if (action === 'mute') {
+      message = `Mute ${props.name}'s ${props.type} for everyone on the call? Only ${props.name} can unmute themselves.`;
+    }
+    //request action
+    else {
+      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 = `Mute everyone's ${props.type} on the call?`;
+  }
+
+  return (
+    <View>
+      <Modal
+        testID="action-menu"
+        animationType="none"
+        transparent={true}
+        visible={actionMenuVisible}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setActionMenuVisible(false);
+          }}>
+          <View
+            style={[
+              styles.backDrop,
+              isMobileOrTablet()
+                ? {
+                    backgroundColor:
+                      $config.HARD_CODED_BLACK_COLOR +
+                      hexadecimalTransparency['50%'],
+                  }
+                : {},
+            ]}
+          />
+        </TouchableWithoutFeedback>
+        <View
+          style={
+            isMobileOrTablet()
+              ? [styles.modalViewUA, {marginTop: height / 3}]
+              : [styles.modalView, modalPosition]
+          }>
+          <View style={styles.container}>
+            <Text style={styles.messageStyle}>{message}</Text>
+            <View style={styles.btnContainer}>
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.setActionMenuVisible(false)}>
+                      <Text style={styles.btnText}>Cancel</Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+              <Spacer size={8} horizontal={true} />
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.onMutePress()}>
+                      <Text style={styles.btnText}>
+                        {action === 'mute' ? 'Mute' : 'Request'}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default RemoteMutePopup;
+
+const styles = StyleSheet.create({
+  onHoverBtnStyle: {
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: 8,
+  },
+  container: {
+    paddingHorizontal: 12,
+    paddingTop: 24,
+    paddingBottom: 14,
+  },
+  messageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    paddingBottom: 18,
+  },
+  btnText: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  modalView: {
+    position: 'absolute',
+    width: 290,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  modalViewUA: {
+    alignSelf: 'center',
+    maxWidth: '80%',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});