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

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,63 +9,214 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {
-  BtnTemplate,
   ToggleState,
-  BtnTemplateInterface,
+  PermissionState,
+  ClientRoleType,
+  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 {ImageIconProps} from '../atoms/ImageIcon';
+import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useToolbar} from '../utils/useToolbar';
+import {useActionSheet} from '../utils/useActionSheet';
+import {isMobileUA} from '../utils/common';
+import {
+  I18nDeviceStatus,
+  livestreamingMicrophoneTooltipText,
+  toolbarItemMicrophoneText,
+  toolbarItemMicrophoneTooltipText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {useToolbarProps} from '../atoms/ToolbarItem';
+
 /**
  * A component to mute / unmute the local audio
  */
 export interface LocalAudioMuteProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  iconProps?: (
     isAudioEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+    isPermissionDenied: boolean,
+  ) => Partial<ImageIconProps>;
+  render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
+  disabled?: boolean;
+  showWarningIcon?: boolean;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {rtcProps} = useContext(PropsContext);
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const {position} = useToolbar();
   const local = useLocalUserInfo();
+  const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
-  //commented for v1 release
-  //const audioLabel = useString('toggleAudioButton')();
-  const audioLabel = 'Audio';
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
+  const micButtonLabel = useString<I18nDeviceStatus>(toolbarItemMicrophoneText);
+  const micButtonTooltip = useString<I18nDeviceStatus>(
+    toolbarItemMicrophoneTooltipText,
+  );
+
+  const lstooltip = useString<boolean>(livestreamingMicrophoneTooltipText);
 
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+
+  const isAudioEnabled = local.audio === ToggleState.enabled;
+
+  const permissionDenied =
+    local.permissionStatus === PermissionState.REJECTED ||
+    local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
   const onPress = () => {
+    logger.log(
+      LogSource.Internals,
+      'LOCAL_MUTE',
+      'toggle mute/unmute local audio',
+      {
+        isAudioEnabled,
+        permissionDenied,
+      },
+    );
     localMute(MUTE_LOCAL_TYPE.audio);
   };
-  const isAudioEnabled = local.audio === ToggleState.enabled;
+  const audioLabel = permissionDenied
+    ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
+    : isAudioEnabled
+    ? micButtonLabel(I18nDeviceStatus.ON)
+    : micButtonLabel(I18nDeviceStatus.OFF);
+
+  let iconProps: IconButtonProps['iconProps'] = {
+    showWarningIcon: permissionDenied && showWarningIcon ? true : false,
+    name: isAudioEnabled ? 'mic-on' : 'mic-off',
 
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: isAudioEnabled ? 'mic' : 'micOff',
+    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)
+      : {}),
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.style = Styles.localButton as Object;
-    btnTemplateProps.btnText = audioLabel;
+  let iconButtonProps: IconButtonProps = {
+    hoverEffect: !permissionDenied
+      ? props?.plainIconHoverEffect
+        ? true
+        : false
+      : false,
+    hoverEffectStyle: props?.plainIconHoverEffect
+      ? {backgroundColor: $config.ICON_BG_COLOR, borderRadius: 20}
+      : {},
+    onPress: onPressCustom || onPress,
+    iconProps,
+    btnTextProps: {
+      text: showLabel && callActive && !isMobileUA() ? label || audioLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
+    disabled: permissionDenied || disabled ? true : false,
+  };
+
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+    const isBroadCasting =
+      rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
+
+    iconButtonProps.disabled =
+      permissionDenied || ($config.EVENT_MODE && isAudience && !isBroadCasting)
+        ? true
+        : false;
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
+
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+
+  if (!isOnActionSheet) {
+    iconButtonProps.toolTipMessage = showToolTip
+      ? permissionDenied
+        ? micButtonTooltip(I18nDeviceStatus.PERMISSION_DENIED)
+        : isAudioEnabled
+        ? micButtonTooltip(I18nDeviceStatus.ON)
+        : micButtonTooltip(I18nDeviceStatus.OFF)
+      : '';
+    if (
+      //precall mobile/mobile web UI - mute button should not show the label
+      (!callActive && isMobileUA()) ||
+      //desktop web -sidepanel mute button should not show the label
+      (callActive && !position)
+    ) {
+      iconButtonProps.btnTextProps.text = '';
+    }
+  }
+
+  if (
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
+    $config.EVENT_MODE &&
+    !$config.RAISE_HAND
+  ) {
+    return null;
+  }
+
+  if (
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
+      $config.EVENT_MODE &&
+      $config.RAISE_HAND &&
+      !isHost) ||
+    local?.audioForceDisabled
+  ) {
+    iconButtonProps.iconProps = {
+      ...iconButtonProps.iconProps,
+      name: 'mic-off',
+      tintColor: $config.SEMANTIC_NEUTRAL,
+    };
+    iconButtonProps.toolTipMessage =
+      showToolTip && !local?.audioForceDisabled
+        ? lstooltip(isHandRaised(local.uid))
+        : '';
+    iconButtonProps.disabled = true;
   }
 
   return props?.render ? (
-    props.render(onPress, isAudioEnabled, buttonTemplateName)
+    props.render(onPress, isAudioEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 }
 

package/template/src/subComponents/LocalEndCall.tsx

@@ -1,49 +1,131 @@
-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, {useEffect, useState} from 'react';
+import {isAndroid, isIOS} from 'customization-api';
+import EndcallPopup from './EndcallPopup';
+import {Prompt} from '../components/Router';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import ReactNativeForegroundService from '@supersami/rn-foreground-service';
+import {Platform} from 'react-native';
+import {useScreenshare} from './screenshare/useScreenshare';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useString} from '../../src/utils/useString';
+import {toolbarItemLeaveText} from '../../src/language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import useEndCall from '../utils/useEndCall';
+import {useToolbarProps} from '../atoms/ToolbarItem';
 
 export interface LocalEndcallProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void) => JSX.Element;
+  customExit?: () => void;
 }
 
+/* For android only, bg audio */
+export const stopForegroundService = () => {
+  if (Platform.OS === 'android') {
+    ReactNativeForegroundService.stop();
+    logger.debug(
+      LogSource.Internals,
+      'CONTROLS',
+      'Local end call - stopping foreground service, bg audio for android only',
+    );
+  }
+};
+
 const LocalEndcall = (props: LocalEndcallProps) => {
-  const {dispatch} = useRtc();
-  //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: [],
-    });
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: 'callEnd',
-    color: '#FD0845',
-    onPress: onPress,
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isScreenshareActive, stopScreenshare} = useScreenshare();
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const endCallLabel = useString(toolbarItemLeaveText)();
+  const [endcallVisible, setEndcallVisible] = useState(false);
+  const onPress = () => {
+    setEndcallVisible(true);
+  };
+  const [endCallState, setEndCallState] = useState(false);
+  const executeEndCall = useEndCall();
+
+  useEffect(() => {
+    if (!isScreenshareActive && endCallState) {
+      executeEndCall();
+      setEndCallState(false);
+    }
+  }, [isScreenshareActive, endCallState]);
+
+  const endCall = async () => {
+    if (props?.customExit) {
+      props.customExit();
+    } else {
+      if ((isAndroid() || isIOS()) && isScreenshareActive) {
+        stopScreenshare();
+        setEndCallState(true);
+      } else {
+        executeEndCall();
+      }
+    }
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.btnText = endCallLabel;
-    btnTemplateProps.style = Styles.endCall as Object;
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: 'end-call',
+      tintColor: $config.PRIMARY_ACTION_TEXT_COLOR,
+      iconBackgroundColor: $config.SEMANTIC_ERROR,
+      iconContainerStyle: !isOnActionSheet && {
+        width: 72,
+        height: $config.ICON_TEXT ? 52 : 48,
+      },
+    },
+    onPress: onPressCustom || onPress,
+    btnTextProps: {
+      text: showLabel ? label || endCallLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: 'white',
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
   }
+
   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}
+      />
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
+    </>
   );
 };
 export default LocalEndcall;

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,59 +1,91 @@
 import React, {useContext} from 'react';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
+import {ViewStyle} from 'react-native';
 import {useString} from '../utils/useString';
-import {
-  BtnTemplate,
-  PropsContext,
-  ToggleState,
-  BtnTemplateInterface,
-} from '../../agora-rn-uikit';
-import Styles from '../components/styles';
-import {useLocalUserInfo, useRtc} from 'customization-api';
+import {ClientRoleType, PropsContext, ToggleState} from '../../agora-rn-uikit';
+import {isAndroid, isIOS, useLocalUserInfo, useRtc} from 'customization-api';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useScreenshare} from './screenshare/useScreenshare';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {toolbarItemSwitchCameraText} from '../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../atoms/ToolbarItem';
 
 export interface LocalSwitchCameraProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isVideoEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
+  showText?: boolean;
+  iconBackgroundColor?: string;
+  iconSize?: number;
+  iconContainerStyle?: ViewStyle;
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {callbacks} = useContext(PropsContext);
-  const {RtcEngine} = useRtc();
+  const {isScreenshareActive} = useScreenshare();
+  const {RtcEngineUnsafe} = useRtc();
   const local = useLocalUserInfo();
-  //commented for v1 release
-  //const switchCameraButtonText = useString('switchCameraButton')();
-  const switchCameraButtonText = 'Switch';
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {
+    showText = true,
+    iconBackgroundColor,
+    iconSize,
+    iconContainerStyle = {},
+  } = props;
 
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const switchCameraText = useString(toolbarItemSwitchCameraText)();
+
+  const {rtcProps} = useContext(PropsContext);
+  const isLiveStream = $config.EVENT_MODE;
+  const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+  const isBroadCasting = rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
+  const showTitle = showText ? showLabel : false;
   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,
-    onPress: onPress,
-  };
-
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.style = Styles.localButton as Object;
-    btnTemplateProps.btnText = switchCameraButtonText;
-  }
+  const isNativeScreenShareActive =
+    (isAndroid() || isIOS()) && isScreenshareActive;
+  const isVideoEnabled = isNativeScreenShareActive
+    ? false
+    : local.video === ToggleState.enabled;
+  const disabled =
+    (isLiveStream && isAudience && !isBroadCasting) || !isVideoEnabled;
 
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: 'switch-camera',
+      tintColor:
+        isVideoEnabled || !disabled
+          ? $config.SECONDARY_ACTION_COLOR
+          : $config.SEMANTIC_NEUTRAL,
+      ...(iconBackgroundColor && {iconBackgroundColor}),
+      ...(iconSize && {iconSize}),
+      iconContainerStyle: iconContainerStyle,
+    },
+    disabled: disabled,
+    onPress: onPressCustom || onPress,
+    btnTextProps: {
+      text: showTitle ? label || switchCameraText?.replace(' ', '\n') : '',
+      numberOfLines: 2,
+      textStyle: {
+        marginTop: 8,
+        fontSize: 12,
+        fontWeight: '400',
+        fontFamily: 'Source Sans Pro',
+        textAlign: 'center',
+        color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
+      },
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
   return props?.render ? (
-    props.render(onPress, isVideoEnabled, buttonTemplateName)
+    props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 }