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

package/template/src/subComponents/{LayoutIconDropdown.native.tsx → LayoutIconDropdown1.native.tsx}

@@ -8,7 +8,7 @@ import {
   Modal,
   Dimensions,
 } from 'react-native';
-import {ImageIcon} from '../../agora-rn-uikit';
+import ImageIcon from '../atoms/ImageIcon';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {useLayout} from '../utils/useLayout';
 
@@ -40,14 +40,12 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
         item?.iconName ? (
           <ImageIcon
             key={'btnTemplateNameDropdown' + index}
-            style={style.btnHolderCustom}
             name={item?.iconName}
           />
         ) : (
           <ImageIcon
             key={'btnTemplateIconDropdown' + index}
-            style={style.btnHolderCustom}
-            icon={item.icon}
+            name={item?.iconName}
           />
         ),
       ];
@@ -112,7 +110,7 @@ const style = StyleSheet.create({
     width: 1,
     borderRadius: 10,
     borderWidth: 4,
-    borderColor: $config.PRIMARY_COLOR,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
   dropdownIconContainer: {
     flexDirection: 'row',
@@ -124,14 +122,7 @@ const style = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
   },
-  navItemSeparatorHorizontal: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-    width: '100%',
-    height: 1,
-    marginVertical: 10,
-    alignSelf: 'center',
-    opacity: 0.8,
-  },
+
   separaterContainer: {
     flex: 0.5,
     paddingHorizontal: 5,
@@ -145,11 +136,6 @@ const style = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
   },
-  btnHolderCustom: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'contain',
-  },
   backDrop: {
     position: 'absolute',
     top: 0,

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,63 +9,155 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {
-  BtnTemplate,
   ToggleState,
-  BtnTemplateInterface,
+  PermissionState,
+  ImageIcon as UIKitImageIcon,
+  ClientRole,
+  PropsContext,
+  useLocalUid,
 } 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} from 'customization-api';
+import {useLocalUserInfo, useRoomInfo} from 'customization-api';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import ThemeConfig from '../theme';
+import {ImageIconProps} from '../atoms/ImageIcon';
+import useIsHandRaised from '../utils/useIsHandRaised';
 /**
  * A component to mute / unmute the local audio
  */
 export interface LocalAudioMuteProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  showLabel?: boolean;
+  iconProps?: (
     isAudioEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+    isPermissionDenied: boolean,
+  ) => Partial<ImageIconProps>;
+  render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
+  disabled?: boolean;
+  isOnActionSheet?: boolean;
+  showWarningIcon?: boolean;
+  isMobileView?: boolean;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {rtcProps} = useContext(PropsContext);
+  const {
+    data: {isHost},
+  } = useRoomInfo();
   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 audioLabel = useString('toggleAudioButton')();
-  const audioLabel = 'Audio';
-
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
 
   const onPress = () => {
     localMute(MUTE_LOCAL_TYPE.audio);
   };
   const isAudioEnabled = local.audio === ToggleState.enabled;
 
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: isAudioEnabled ? 'mic' : 'micOff',
+  const permissionDenied =
+    local.permissionStatus === PermissionState.REJECTED ||
+    local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
+
+  const audioLabel = permissionDenied
+    ? 'Mic'
+    : isAudioEnabled
+    ? 'Mic On'
+    : 'Mic Off';
+
+  let iconProps: IconButtonProps['iconProps'] = {
+    showWarningIcon: permissionDenied && showWarningIcon ? true : false,
+    name: isAudioEnabled ? 'mic-on' : 'mic-off',
+
+    iconBackgroundColor: isAudioEnabled
+      ? $config.PRIMARY_ACTION_BRAND_COLOR
+      : '',
+    tintColor: isAudioEnabled
+      ? $config.PRIMARY_ACTION_TEXT_COLOR
+      : disabled
+      ? $config.SEMANTIC_NEUTRAL
+      : permissionDenied
+      ? $config.SEMANTIC_NEUTRAL
+      : $config.SEMANTIC_ERROR,
+    ...(props?.iconProps
+      ? props.iconProps(isAudioEnabled, permissionDenied)
+      : {}),
+  };
+
+  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 ? audioLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
+    disabled: permissionDenied || disabled ? true : false,
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.style = Styles.localButton as Object;
-    btnTemplateProps.btnText = audioLabel;
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+
+  if (!isMobileView) {
+    iconButtonProps.toolTipMessage = showToolTip
+      ? permissionDenied
+        ? 'Give Permissions'
+        : isAudioEnabled
+        ? 'Disable Mic'
+        : 'Enable Mic'
+      : '';
+  }
+
+  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: 'mic-off',
+      tintColor: $config.SEMANTIC_NEUTRAL,
+    };
+    iconButtonProps.toolTipMessage = showToolTip
+      ? isHandRaised(local.uid)
+        ? 'Waiting for host to appove the request'
+        : 'Raise Hand in order to turn mic on'
+      : '';
+    iconButtonProps.disabled = true;
   }
 
   return props?.render ? (
-    props.render(onPress, isAudioEnabled, buttonTemplateName)
+    props.render(onPress, isAudioEnabled)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 }
 

package/template/src/subComponents/LocalEndCall.tsx

@@ -1,49 +1,87 @@
-import React, {useContext} from 'react';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
-import Styles from '../components/styles';
-import {useString} from '../utils/useString';
-import {useRtc} from 'customization-api';
-
+import React, {useContext, useState} from 'react';
+import EndcallPopup from './EndcallPopup';
+import StorageContext from '../components/StorageContext';
+import {Prompt, useParams} from '../components/Router';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import ReactNativeForegroundService from '@supersami/rn-foreground-service';
+import {Platform} from 'react-native';
+import {DispatchContext} from '../../agora-rn-uikit';
 export interface LocalEndcallProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  isOnActionSheet?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
 }
 
+/* For android only, bg audio */
+const stopForegroundService = () => {
+  if (Platform.OS === 'android') {
+    ReactNativeForegroundService.stop();
+    console.log('stopping foreground service');
+  }
+};
+
 const LocalEndcall = (props: LocalEndcallProps) => {
-  const {dispatch} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
+  const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
   //commented for v1 release
   //const endCallLabel = useString('endCallButton')();
-  const endCallLabel = 'Hang Up';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  const onPress = () =>
-    dispatch({
-      type: 'EndCall',
-      value: [],
+  const endCallLabel = 'Leave';
+  const {setStore} = useContext(StorageContext);
+  const [endcallVisible, setEndcallVisible] = useState(false);
+  const {phrase} = useParams<{phrase: string}>();
+  const onPress = () => {
+    setEndcallVisible(true);
+  };
+
+  const endCall = async () => {
+    setTimeout(() => {
+      dispatch({
+        type: 'EndCall',
+        value: [],
+      });
     });
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: 'callEnd',
-    color: '#FD0845',
-    onPress: onPress,
+    // stopping foreground servie on end call
+    stopForegroundService();
+  };
+
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: 'end-call',
+      tintColor: $config.PRIMARY_ACTION_TEXT_COLOR,
+      iconBackgroundColor: $config.SEMANTIC_ERROR,
+      iconContainerStyle: !isOnActionSheet && {
+        width: 72,
+        height: 52,
+      },
+    },
+    onPress,
+    btnTextProps: {
+      text: showLabel ? endCallLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.btnText = endCallLabel;
-    btnTemplateProps.style = Styles.endCall as Object;
-  }
   return props?.render ? (
-    props.render(onPress, buttonTemplateName)
+    props.render(onPress)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      <Prompt
+        when={true}
+        message={(location, action) => {
+          if (action === 'POP') {
+            onPress();
+            return false;
+          }
+          return true;
+        }}
+      />
+      <EndcallPopup
+        endCall={endCall}
+        setModalVisible={setEndcallVisible}
+        modalVisible={endcallVisible}
+      />
+      <IconButton {...iconButtonProps} />
+    </>
   );
 };
 export default LocalEndcall;

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,59 +1,46 @@
 import React, {useContext} from 'react';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-import {
-  BtnTemplate,
-  PropsContext,
-  ToggleState,
-  BtnTemplateInterface,
-} from '../../agora-rn-uikit';
+import {PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {useLocalUserInfo, useRtc} from 'customization-api';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
 
 export interface LocalSwitchCameraProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isVideoEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
+  disabled?: boolean;
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
   const {callbacks} = useContext(PropsContext);
-  const {RtcEngine} = useRtc();
+  const {RtcEngineUnsafe} = useRtc();
   const local = useLocalUserInfo();
+  const {showLabel = $config.ICON_TEXT, disabled = false} = props;
   //commented for v1 release
   //const switchCameraButtonText = useString('switchCameraButton')();
   const switchCameraButtonText = 'Switch';
 
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
   const onPress = () => {
-    RtcEngine.switchCamera();
+    RtcEngineUnsafe.switchCamera();
     callbacks?.SwitchCamera && callbacks.SwitchCamera();
   };
   const isVideoEnabled = local.video === ToggleState.enabled;
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: 'switchCamera',
-    disabled: isVideoEnabled ? false : true,
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: 'switch-camera',
+      tintColor:
+        isVideoEnabled || !disabled
+          ? $config.SECONDARY_ACTION_COLOR
+          : $config.SEMANTIC_NEUTRAL,
+    },
+    disabled: !isVideoEnabled || disabled ? true : false,
     onPress: onPress,
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.style = Styles.localButton as Object;
-    btnTemplateProps.btnText = switchCameraButtonText;
-  }
-
   return props?.render ? (
-    props.render(onPress, isVideoEnabled, buttonTemplateName)
+    props.render(onPress, isVideoEnabled)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 }
 

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,61 +9,151 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {
-  BtnTemplate,
   ToggleState,
-  BtnTemplateInterface,
+  PermissionState,
+  ImageIcon as UIKitImageIcon,
+  ClientRole,
+  PropsContext,
 } 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} from 'customization-api';
-
+import {useLocalUserInfo, useRoomInfo} from 'customization-api';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import ThemeConfig from '../theme';
+import {ImageIconProps} from '../atoms/ImageIcon';
+import useIsHandRaised from '../utils/useIsHandRaised';
 /**
  * A component to mute / unmute the local video
  */
 export interface LocalVideoMuteProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  showLabel?: boolean;
+  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
+  disabled?: boolean;
+  isOnActionSheet?: boolean;
+  iconProps?: (
     isVideoEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+    isPermissionDenied: boolean,
+  ) => Partial<ImageIconProps>;
+  showWarningIcon?: boolean;
+  isMobileView?: boolean;
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
+  const {rtcProps} = useContext(PropsContext);
+  const {
+    data: {isHost},
+  } = useRoomInfo();
   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;
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: isVideoEnabled ? 'videocam' : 'videocamOff',
+
+  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)
+      : {}),
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.style = Styles.localButton as Object;
-    btnTemplateProps.btnText = videoLabel;
+  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 (
+    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, buttonTemplateName)
+    props.render(onPress, isVideoEnabled)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 }
 

package/template/src/subComponents/Logo.tsx

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