agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,151 +9,61 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
+  BtnTemplate,
   ToggleState,
-  PermissionState,
-  ImageIcon as UIKitImageIcon,
-  ClientRole,
-  PropsContext,
+  BtnTemplateInterface,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
 import Styles from '../components/styles';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-import {useLocalUserInfo, useMeetingInfo} from 'customization-api';
-import IconButton, {IconButtonProps} from '../atoms/IconButton';
-import ThemeConfig from '../theme';
-import {ImageIconProps} from '../atoms/ImageIcon';
-import useIsHandRaised from '../utils/useIsHandRaised';
+import {useLocalUserInfo} from 'customization-api';
+
 /**
  * A component to mute / unmute the local video
  */
 export interface LocalVideoMuteProps {
-  plainIconHoverEffect?: boolean;
-  showToolTip?: boolean;
-  showLabel?: boolean;
-  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
-  disabled?: boolean;
-  isOnActionSheet?: boolean;
-  iconProps?: (
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
     isVideoEnabled: boolean,
-    isPermissionDenied: boolean,
-  ) => Partial<ImageIconProps>;
-  showWarningIcon?: boolean;
-  isMobileView?: boolean;
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
-  const {rtcProps} = useContext(PropsContext);
-  const {
-    data: {isHost},
-  } = useMeetingInfo();
   const local = useLocalUserInfo();
-  const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
-  const {
-    showToolTip = false,
-    showLabel = $config.ICON_TEXT,
-    disabled = false,
-    isOnActionSheet = false,
-    showWarningIcon = true,
-    isMobileView = false,
-  } = props;
   //commented for v1 release
   //const videoLabel = useString('toggleVideoButton')();
-
+  const videoLabel = 'Video';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
   const onPress = () => {
     localMute(MUTE_LOCAL_TYPE.video);
   };
   const isVideoEnabled = local.video === ToggleState.enabled;
-
-  const permissionDenied =
-    local.permissionStatus === PermissionState.REJECTED ||
-    local.permissionStatus === PermissionState.GRANTED_FOR_MIC_ONLY;
-
-  const videoLabel = permissionDenied
-    ? 'Video'
-    : isVideoEnabled
-    ? 'Video On'
-    : 'Video Off';
-
-  let iconProps: IconButtonProps['iconProps'] = {
-    showWarningIcon: permissionDenied && showWarningIcon ? true : false,
-    name: isVideoEnabled ? 'video-on' : 'video-off',
-    iconBackgroundColor: isVideoEnabled
-      ? $config.PRIMARY_ACTION_BRAND_COLOR
-      : '',
-    tintColor: isVideoEnabled
-      ? $config.PRIMARY_ACTION_TEXT_COLOR
-      : disabled
-      ? $config.SEMANTIC_NEUTRAL
-      : permissionDenied
-      ? $config.SEMANTIC_NEUTRAL
-      : $config.SEMANTIC_ERROR,
-    ...(props?.iconProps
-      ? props.iconProps(isVideoEnabled, permissionDenied)
-      : {}),
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: isVideoEnabled ? 'videocam' : 'videocamOff',
   };
 
-  let iconButtonProps: IconButtonProps = {
-    hoverEffect: !permissionDenied
-      ? props?.plainIconHoverEffect
-        ? true
-        : false
-      : false,
-    hoverEffectStyle: props?.plainIconHoverEffect
-      ? {backgroundColor: $config.ICON_BG_COLOR, borderRadius: 20}
-      : {},
-    onPress,
-    iconProps,
-    btnTextProps: {
-      text: showLabel ? videoLabel : '',
-      textColor: $config.FONT_COLOR,
-    },
-    disabled: permissionDenied || disabled ? true : false,
-  };
-
-  iconButtonProps.isOnActionSheet = isOnActionSheet;
-  if (!isMobileView) {
-    iconButtonProps.toolTipMessage = showToolTip
-      ? permissionDenied
-        ? 'Give Permissions'
-        : isVideoEnabled
-        ? 'Disable Camera'
-        : 'Enable Camera'
-      : '';
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.style = Styles.localButton as Object;
+    btnTemplateProps.btnText = videoLabel;
   }
 
-  if (
-    rtcProps.role == ClientRole.Audience &&
-    $config.EVENT_MODE &&
-    !$config.RAISE_HAND
-  ) {
-    return null;
-  }
-
-  if (
-    rtcProps.role == ClientRole.Audience &&
-    $config.EVENT_MODE &&
-    $config.RAISE_HAND &&
-    !isHost
-  ) {
-    iconButtonProps.iconProps = {
-      ...iconButtonProps.iconProps,
-      name: 'video-off',
-      tintColor: $config.SEMANTIC_NEUTRAL,
-    };
-    iconButtonProps.toolTipMessage = showToolTip
-      ? isHandRaised(local.uid)
-        ? 'Waiting for host to appove the request'
-        : 'Raise Hand in order to turn video on'
-      : '';
-    iconButtonProps.disabled = true;
-  }
   return props?.render ? (
-    props.render(onPress, isVideoEnabled)
+    props.render(onPress, isVideoEnabled, buttonTemplateName)
   ) : (
-    <IconButton {...iconButtonProps} />
+    <BtnTemplate {...btnTemplateProps} />
   );
 }
 

package/template/src/subComponents/Logo.tsx

@@ -20,7 +20,7 @@ export default function Logo() {
   const history = useHistory();
 
   return (
-    <TouchableOpacity onPress={() => history.replace('/')}>
+    <TouchableOpacity onPress={() => history.replace('/')} style={styles.marginAuto}>
       <Image
         source={{uri: $config.LOGO}}
         style={styles.logo}
@@ -32,8 +32,8 @@ export default function Logo() {
 
 const styles = StyleSheet.create({
   logo: {
-    minWidth: 60,
-    minHeight: 30,
+    width: '100%',
+    height: '100%',
   },
   marginAuto: {
     width: '30%',
@@ -41,5 +41,6 @@ const styles = StyleSheet.create({
     minWidth: 60,
     minHeight: 30,
     // height: 'auto',
+    marginHorizontal: 'auto',
   },
 });

package/template/src/subComponents/LogoutButton.tsx

@@ -87,7 +87,7 @@ const style = StyleSheet.create({
     fontWeight: '500',
     textAlign: 'center',
     textAlignVertical: 'center',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     textDecorationLine: 'underline',
   },
 });

package/template/src/subComponents/NetworkQualityPill.tsx

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

package/template/src/subComponents/OpenInNativeButton.tsx

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

package/template/src/subComponents/Recording.tsx

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

package/template/src/subComponents/RemoteAudioMute.tsx

@@ -9,23 +9,17 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useRef, useState} from 'react';
-import {useWindowDimensions} from 'react-native';
-import {UidType} from '../../agora-rn-uikit';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {BtnTemplate, 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.
@@ -33,84 +27,36 @@ export interface RemoteAudioMuteProps {
  * If the local user is not a host, it simply renders an image
  */
 const RemoteAudioMute = (props: RemoteAudioMuteProps) => {
-  const btnRef = useRef(null);
-  const {isHost = false, userContainerRef} = props;
+  const {isHost = false} = 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 (
-    <>
-      <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,
-        }}
-      />
-    </>
+    <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'}
+    />
   );
 };
 
+const style = StyleSheet.create({
+  buttonIconMic: {
+    width: 25,
+    height: 24,
+  },
+});
+
 export default RemoteAudioMute;