agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -1,14 +1,17 @@
 import React, {SetStateAction, useContext} from 'react';
-import {View, StyleSheet, TouchableWithoutFeedback, Modal} from 'react-native';
-import {isMobileUA, isWebInternal} from '../utils/common';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
+import {isWebInternal} from '../utils/common';
+import {ImageIcon} from '../../agora-rn-uikit';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {useLayout} from '../utils/useLayout';
-import IconButton, {IconButtonProps} from '../atoms/IconButton';
-import Spacer from '../atoms/Spacer';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
-import {useRender} from 'customization-api';
-import isMobileOrTablet from '../utils/isMobileOrTablet';
+import DimensionContext from '../components/dimension/DimensionContext';
 
 interface LayoutIconDropdownProps {
   modalPosition?: {
@@ -19,27 +22,31 @@ interface LayoutIconDropdownProps {
   };
   showDropdown: boolean;
   setShowDropdown: React.Dispatch<SetStateAction<boolean>>;
-  caretPosition?: {
-    top?: number;
-    right?: number;
-    left?: number;
-    bottom?: number;
-  };
-  onHoverPlaceHolder?: 'vertical' | 'horizontal';
 }
 
 const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
   const {
     showDropdown,
     setShowDropdown,
-    modalPosition = {top: 0, left: 0},
-    onHoverPlaceHolder = 'horizontal',
+    modalPosition = {top: 45, right: 15, bottom: undefined, left: undefined},
   } = props;
-  const {activeUids} = useRender();
-  const layouts = useLayoutsData();
-  const {setLayout, currentLayout} = useLayout();
-  const isMobileView = isMobileUA();
+  const {getDimensionData} = useContext(DimensionContext);
+  const {isDesktop, dim} = getDimensionData();
 
+  const layouts = useLayoutsData();
+  const {currentLayout, setLayout} = useLayout();
+  const renderSeparatorHorizontal = () => {
+    return isWebInternal() && isDesktop ? (
+      <View style={style.navItem}>
+        <View style={style.navItemSeparatorHorizontal}></View>
+      </View>
+    ) : (
+      <View style={{marginHorizontal: 2}}></View>
+    );
+  };
+  const selectedItemHighlighter = (isSelected: boolean) => {
+    return <View style={isSelected ? style.highlighter : {}} />;
+  };
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
@@ -47,108 +54,53 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
         setShowDropdown(false);
       };
       let content = [];
-      const disabled =
-        item.name === getPinnedLayoutName() && activeUids?.length === 1
-          ? true
-          : false;
-      let iconButtonProps: IconButtonProps = {
-        disabled,
-        hoverEffect: disabled
-          ? false
-          : currentLayout !== item.name
-          ? true
-          : false,
-        hoverEffectStyle: {
-          backgroundColor:
-            $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
-        },
-        containerStyle: {
-          opacity: disabled ? 0.4 : 1,
-          flexDirection: 'row',
-          marginHorizontal: 8,
-          marginTop: 8,
-          marginBottom: layouts.length - 1 === index ? 8 : 0,
-          borderRadius: 4,
-          backgroundColor:
-            currentLayout === item.name
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : 'transparent',
-        },
-        onPress,
-        iconProps: {
-          iconContainerStyle: {
-            padding: 10,
-          },
-          iconType: 'plain',
-          name:
-            item.iconName === 'pinned' && isMobileView
-              ? 'list-view'
-              : item.iconName,
-          tintColor: $config.SECONDARY_ACTION_COLOR,
-        },
-        btnTextProps: {
-          textStyle: {
-            marginTop: 0,
-          },
-          //text: $config.ICON_TEXT ? item.label : '',
-          text: item.label,
-          textColor: $config.FONT_COLOR,
-        },
-      };
+      let BtnTemplateLocal = [
+        item?.iconName ? (
+          <ImageIcon
+            key={'btnTemplateNameDropdown' + index}
+            style={style.btnHolderCustom}
+            name={item?.iconName}
+          />
+        ) : (
+          <ImageIcon
+            key={'btnTemplateIconDropdown' + index}
+            style={style.btnHolderCustom}
+            icon={item.icon}
+          />
+        ),
+      ];
       content.push(
-        <IconButton key={'layout_button' + item.name} {...iconButtonProps} />,
+        <TouchableOpacity
+          key={'dropdownLayoutIcon' + index}
+          style={style.dropdownInnerIconContainer}
+          onPress={onPress}>
+          <>
+            <View style={style.highlighterContainer}>
+              {selectedItemHighlighter(item.name === currentLayout)}
+            </View>
+            <View style={{flex: 1}}>{BtnTemplateLocal}</View>
+            <View style={style.layoutNameContainer}>
+              <Text numberOfLines={2} style={style.layoutNameText}>
+                {item.label}
+              </Text>
+            </View>
+          </>
+        </TouchableOpacity>,
       );
+      if (layouts.length - 1 !== index) {
+        content.push(
+          <View
+            style={style.separaterContainer}
+            key={'navLayoutIconSeparater' + index}>
+            {renderSeparatorHorizontal()}
+          </View>,
+        );
+      }
       return content;
     });
-
-    let viewContent = (
-      <View style={[style.dropdownContainer, modalPosition]}>
-        <View
-          style={[
-            {
-              width: 20,
-              height: 20,
-              backgroundColor: $config.CARD_LAYER_4_COLOR,
-              position: 'absolute',
-              borderRadius: 2,
-              transform: [{rotate: '45deg'}],
-              zIndex: -1,
-            },
-            props?.caretPosition,
-          ]}></View>
-        {!isMobileUA() && (
-          <View
-            style={[
-              {
-                zIndex: -2,
-                position: 'absolute',
-              },
-              onHoverPlaceHolder === 'vertical'
-                ? {width: 20, height: '100%', bottom: 0, right: -20}
-                : {width: '100%', height: 20, bottom: -20},
-            ]}
-          />
-        )}
-        <View
-          style={{
-            flex: 1,
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-          }}>
-          {data}
-        </View>
-      </View>
-    );
-
-    return !isMobileOrTablet() ? (
-      showDropdown ? (
-        viewContent
-      ) : (
-        <></>
-      )
-    ) : (
+    return (
       <Modal
-        animationType="none"
+        animationType="fade"
         transparent={true}
         visible={showDropdown}
         onRequestClose={() => {
@@ -160,7 +112,18 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
           }}>
           <View style={style.backDrop} />
         </TouchableWithoutFeedback>
-        {viewContent}
+        <View
+          style={[
+            style.dropdownContainer,
+            {
+              top: modalPosition?.top,
+              right: modalPosition?.right,
+              left: modalPosition?.left,
+              bottom: modalPosition?.bottom,
+            },
+          ]}>
+          {data}
+        </View>
       </Modal>
     );
   };
@@ -168,20 +131,60 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
 };
 
 const style = StyleSheet.create({
+  layoutNameContainer: {
+    flex: 2,
+    justifyContent: 'center',
+    paddingHorizontal: 5,
+  },
+  layoutNameText: {
+    textAlign: 'left',
+  },
+  highlighter: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+    height: 1,
+    width: 1,
+    borderRadius: 10,
+    borderWidth: 4,
+    borderColor: $config.PRIMARY_COLOR,
+  },
+  highlighterContainer: {flex: 0.5, justifyContent: 'center'},
+  dropdownInnerIconContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    minHeight: 40,
+  },
+  navItem: {
+    height: '100%',
+    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,
+  },
   dropdownContainer: {
-    width: 140,
     position: 'absolute',
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 8,
-    zIndex: 999,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {
-      width: 0,
-      height: -4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 1,
+    marginTop: 5,
+    width: 160,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    paddingVertical: 10,
+  },
+  btnHolderCustom: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
   },
   backDrop: {
     position: 'absolute',

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,155 +9,63 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React from 'react';
 import {
+  BtnTemplate,
   ToggleState,
-  PermissionState,
-  ImageIcon as UIKitImageIcon,
-  ClientRole,
-  PropsContext,
-  useLocalUid,
+  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 audio
  */
 export interface LocalAudioMuteProps {
-  plainIconHoverEffect?: boolean;
-  showToolTip?: boolean;
-  showLabel?: boolean;
-  iconProps?: (
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
     isAudioEnabled: boolean,
-    isPermissionDenied: boolean,
-  ) => Partial<ImageIconProps>;
-  render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
-  disabled?: boolean;
-  isOnActionSheet?: boolean;
-  showWarningIcon?: boolean;
-  isMobileView?: boolean;
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
-  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 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;
 
-  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,
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: isAudioEnabled ? 'mic' : 'micOff',
   };
 
-  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;
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.style = Styles.localButton as Object;
+    btnTemplateProps.btnText = audioLabel;
   }
 
   return props?.render ? (
-    props.render(onPress, isAudioEnabled)
+    props.render(onPress, isAudioEnabled, buttonTemplateName)
   ) : (
-    <IconButton {...iconButtonProps} />
+    <BtnTemplate {...btnTemplateProps} />
   );
 }
 

package/template/src/subComponents/LocalEndCall.tsx

@@ -1,87 +1,49 @@
-import React, {useContext, useState} from 'react';
+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 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';
+
 export interface LocalEndcallProps {
-  showLabel?: boolean;
-  isOnActionSheet?: boolean;
-  render?: (onPress: () => void) => JSX.Element;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => 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 {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
   //commented for v1 release
   //const endCallLabel = useString('endCallButton')();
-  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: [],
-      });
+  const endCallLabel = 'Hang Up';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () =>
+    dispatch({
+      type: 'EndCall',
+      value: [],
     });
-    // 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,
-    },
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: 'callEnd',
+    color: '#FD0845',
+    onPress: onPress,
   };
 
+  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)
+    props.render(onPress, buttonTemplateName)
   ) : (
-    <>
-      <Prompt
-        when={true}
-        message={(location, action) => {
-          if (action === 'POP') {
-            onPress();
-            return false;
-          }
-          return true;
-        }}
-      />
-      <EndcallPopup
-        endCall={endCall}
-        setModalVisible={setEndcallVisible}
-        modalVisible={endcallVisible}
-      />
-      <IconButton {...iconButtonProps} />
-    </>
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 export default LocalEndcall;

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,46 +1,59 @@
 import React, {useContext} from 'react';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-import {PropsContext, ToggleState} from '../../agora-rn-uikit';
+import {
+  BtnTemplate,
+  PropsContext,
+  ToggleState,
+  BtnTemplateInterface,
+} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {useLocalUserInfo, useRtc} from 'customization-api';
-import IconButton, {IconButtonProps} from '../atoms/IconButton';
 
 export interface LocalSwitchCameraProps {
-  showLabel?: boolean;
-  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
-  disabled?: boolean;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isVideoEnabled: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
   const {callbacks} = useContext(PropsContext);
   const {RtcEngine} = 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();
     callbacks?.SwitchCamera && callbacks.SwitchCamera();
   };
   const isVideoEnabled = local.video === ToggleState.enabled;
-  let iconButtonProps: IconButtonProps = {
-    iconProps: {
-      name: 'switch-camera',
-      tintColor:
-        isVideoEnabled || !disabled
-          ? $config.SECONDARY_ACTION_COLOR
-          : $config.SEMANTIC_NEUTRAL,
-    },
-    disabled: !isVideoEnabled || disabled ? true : false,
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: 'switchCamera',
+    disabled: isVideoEnabled ? false : true,
     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)
+    props.render(onPress, isVideoEnabled, buttonTemplateName)
   ) : (
-    <IconButton {...iconButtonProps} />
+    <BtnTemplate {...btnTemplateProps} />
   );
 }