agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -9,6 +9,11 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {getPinnedLayoutName} from '../pages/video-call/DefaultLayouts';
 import {useContent} from 'customization-api';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
+import {useString} from '../utils/useString';
+import {
+  toolbarItemLayoutOptionGridText,
+  toolbarItemLayoutOptionSidebarText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 interface LayoutIconDropdownProps {
   modalPosition?: {
@@ -35,11 +40,15 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
     modalPosition = {top: 0, left: 0},
     onHoverPlaceHolder = 'horizontal',
   } = props;
-  const {activeUids} = useContent();
+  const {activeUids, customContent} = useContent();
+
   const layouts = useLayoutsData();
   const {setLayout, currentLayout} = useLayout();
   const isMobileView = isMobileUA();
 
+  const gridLabel = useString(toolbarItemLayoutOptionGridText)();
+  const sidebarLabel = useString(toolbarItemLayoutOptionSidebarText)();
+
   const renderDropdown = () => {
     const data = layouts.map((item, index) => {
       let onPress = () => {
@@ -48,7 +57,9 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
       };
       let content = [];
       const disabled =
-        item.name === getPinnedLayoutName() && activeUids?.length === 1
+        item.name === getPinnedLayoutName() &&
+        //activeUids?.filter((i) => customContent[i])?.length === 1
+        activeUids?.length === 1
           ? true
           : false;
       let iconButtonProps: IconButtonProps = {
@@ -88,7 +99,12 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
             marginTop: 0,
           },
           //text: $config.ICON_TEXT ? item.label : '',
-          text: item.label,
+          text:
+            item?.translationKey === toolbarItemLayoutOptionGridText
+              ? gridLabel
+              : item?.translationKey === toolbarItemLayoutOptionSidebarText
+              ? sidebarLabel
+              : item.label,
           textColor: $config.FONT_COLOR,
         },
       };

package/template/src/subComponents/Loading.tsx

@@ -0,0 +1,60 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {StyleSheet, View, Text, ActivityIndicator} from 'react-native';
+import ThemeConfig from '../../src/theme';
+
+const Loading = (props: {
+  text: string;
+  background?: string;
+  indicatorColor?: string;
+  textColor?: string;
+}) => {
+  const {
+    text,
+    background = 'rgba(0,0,0,0.9)',
+    indicatorColor = $config.PRIMARY_ACTION_BRAND_COLOR,
+    textColor = $config.SECONDARY_ACTION_COLOR,
+  } = props;
+
+  return (
+    <View style={[styles.overlay, {backgroundColor: background}]}>
+      <ActivityIndicator size="large" color={indicatorColor} />
+      <Text style={[styles.loadingText, {color: textColor}]}>{text}</Text>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    zIndex: 2,
+
+    borderRadius: 15,
+  },
+  loadingText: {
+    alignSelf: 'center',
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginTop: 8,
+  },
+});
+
+export default Loading;

package/template/src/subComponents/LocalAudioMute.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   ToggleState,
   PermissionState,
@@ -17,6 +17,8 @@ import {
   ClientRole,
   PropsContext,
   useLocalUid,
+  DispatchContext,
+  RtcContext,
 } from '../../agora-rn-uikit';
 import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
 import Styles from '../components/styles';
@@ -28,6 +30,18 @@ import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {ToolbarPosition, 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 events from '../rtm-events-api';
+import {controlMessageEnum} from '../components/ChatContext';
+import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local audio
@@ -35,37 +49,65 @@ import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 export interface LocalAudioMuteProps {
   plainIconHoverEffect?: boolean;
   showToolTip?: boolean;
-  showLabel?: boolean;
   iconProps?: (
     isAudioEnabled: boolean,
     isPermissionDenied: boolean,
   ) => Partial<ImageIconProps>;
   render?: (onPress: () => void, isAudioEnabled: boolean) => JSX.Element;
   disabled?: boolean;
-  isOnActionSheet?: boolean;
   showWarningIcon?: boolean;
-  isMobileView?: boolean;
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
+  useEffect(() => {
+    events.on(controlMessageEnum.disableButton, async ({payload}) => {
+      try {
+        const data = JSON.parse(payload);
+        if (data && data?.button === MUTE_REMOTE_TYPE.audio) {
+          if (data?.action === true) {
+            RtcEngineUnsafe.muteLocalAudioStream(true);
+            dispatch({
+              type: 'LocalMuteAudio',
+              value: [0, true],
+            });
+          } else {
+            dispatch({
+              type: 'LocalMuteAudio',
+              value: [0, false],
+            });
+          }
+        }
+      } catch (error) {
+        console.log('debugging error on disableButton');
+      }
+    });
+  }, []);
+
   const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
   } = useRoomInfo();
+  const {position} = useToolbar();
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
+  const {isOnActionSheet, isOnFirstRow, 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 {
-    showToolTip = false,
-    showLabel = $config.ICON_TEXT,
-    disabled = false,
-    isOnActionSheet = false,
-    showWarningIcon = true,
-    isMobileView = false,
-  } = props;
-  //commented for v1 release
-  //const audioLabel = useString('toggleAudioButton')();
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
 
   const onPress = () => {
     localMute(MUTE_LOCAL_TYPE.audio);
@@ -77,10 +119,10 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
   const audioLabel = permissionDenied
-    ? 'Mic'
+    ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
     : isAudioEnabled
-    ? 'Mic On'
-    : 'Mic Off';
+    ? micButtonLabel(I18nDeviceStatus.ON)
+    : micButtonLabel(I18nDeviceStatus.OFF);
 
   let iconProps: IconButtonProps['iconProps'] = {
     showWarningIcon: permissionDenied && showWarningIcon ? true : false,
@@ -113,22 +155,56 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     onPress,
     iconProps,
     btnTextProps: {
-      text: showLabel ? audioLabel : '',
+      text: showLabel && callActive && !isMobileUA() ? 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 == ClientRole.Audience;
+    const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+
+    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 (!isMobileView) {
+  if (!isOnActionSheet) {
     iconButtonProps.toolTipMessage = showToolTip
       ? permissionDenied
-        ? 'Give Permissions'
+        ? micButtonTooltip(I18nDeviceStatus.PERMISSION_DENIED)
         : isAudioEnabled
-        ? 'Disable Mic'
-        : 'Enable Mic'
+        ? 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 (
@@ -140,21 +216,21 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
-    $config.EVENT_MODE &&
-    $config.RAISE_HAND &&
-    !isHost
+    (rtcProps.role == ClientRole.Audience &&
+      $config.EVENT_MODE &&
+      $config.RAISE_HAND &&
+      !isHost) ||
+    local.localAudioForceDisabled
   ) {
     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.toolTipMessage =
+      showToolTip && !local.localAudioForceDisabled
+        ? lstooltip(isHandRaised(local.uid))
+        : '';
     iconButtonProps.disabled = true;
   }
 

package/template/src/subComponents/LocalEndCall.tsx

@@ -1,18 +1,27 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
+import {isAndroid, isIOS, useContent, useRoomInfo} from 'customization-api';
 import EndcallPopup from './EndcallPopup';
-import StorageContext from '../components/StorageContext';
-import {Prompt, useParams} from '../components/Router';
+import {Prompt} 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';
+import useSTTAPI from './caption/useSTTAPI';
+import {useCaption} from './caption/useCaption';
+import {useScreenshare} from './screenshare/useScreenshare';
+import {DispatchContext, PropsContext} from '../../agora-rn-uikit';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import RTMEngine from '../rtm/RTMEngine';
+import {useAuth} from '../../src/auth/AuthProvider';
+import {ENABLE_AUTH} from '../../src/auth/config';
+import {useString} from '../../src/utils/useString';
+import {toolbarItemLeaveText} from '../../src/language/default-labels/videoCallScreenLabels';
+import {useCustomization} from 'customization-implementation';
 
 export interface LocalEndcallProps {
-  showLabel?: boolean;
-  isOnActionSheet?: boolean;
   render?: (onPress: () => void) => JSX.Element;
+  customExit?: () => void;
 }
 
 /* For android only, bg audio */
@@ -24,28 +33,76 @@ const stopForegroundService = () => {
 };
 
 const LocalEndcall = (props: LocalEndcallProps) => {
+  const {isScreenshareActive, stopUserScreenShare} = useScreenshare();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
   const {isToolbarMenuItem} = useToolbarMenu();
   const {dispatch} = useContext(DispatchContext);
-  const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
-  //commented for v1 release
-  //const endCallLabel = useString('endCallButton')();
-  const endCallLabel = 'Leave';
-  const {setStore} = useContext(StorageContext);
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const endCallLabel = useString(toolbarItemLeaveText)();
+  const {defaultContent} = useContent();
   const [endcallVisible, setEndcallVisible] = useState(false);
-  const {phrase} = useParams<{phrase: string}>();
+  const {stop} = useSTTAPI();
+  const {isSTTActive} = useCaption();
   const onPress = () => {
     setEndcallVisible(true);
   };
+  const [endCallState, setEndCallState] = useState(false);
+  const {rtcProps} = useContext(PropsContext);
+  const {authLogout, authLogin} = useAuth();
 
-  const endCall = async () => {
+  const beforeEndCall = useCustomization(
+    data =>
+      data?.lifecycle?.useBeforeEndCall && data?.lifecycle?.useBeforeEndCall(),
+  );
+
+  const executeEndCall = async () => {
+    if (beforeEndCall) {
+      try {
+        beforeEndCall(isHost);
+      } catch (error) {
+        console.error('ERROR on useBeforeEndCall hook', error);
+      }
+    }
     setTimeout(() => {
       dispatch({
         type: 'EndCall',
-        value: [],
+        value: [isHost, false],
       });
     });
     // stopping foreground servie on end call
     stopForegroundService();
+    // stopping STT on call end,if only last user is remaining in call
+    const usersInCall = Object.entries(defaultContent).filter(
+      item => item[1].type === 'rtc',
+    );
+    usersInCall.length === 1 && isSTTActive && stop();
+    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
+    if (!ENABLE_AUTH) {
+      // await authLogout();
+      await authLogin();
+    }
+  };
+
+  useEffect(() => {
+    if (!isScreenshareActive && endCallState) {
+      executeEndCall();
+      setEndCallState(false);
+    }
+  }, [isScreenshareActive, endCallState]);
+
+  const endCall = async () => {
+    if (props?.customExit) {
+      props.customExit();
+    } else {
+      if ((isAndroid() || isIOS()) && isScreenshareActive) {
+        stopUserScreenShare();
+        setEndCallState(true);
+      } else {
+        executeEndCall();
+      }
+    }
   };
 
   let iconButtonProps: IconButtonProps = {
@@ -55,7 +112,7 @@ const LocalEndcall = (props: LocalEndcallProps) => {
       iconBackgroundColor: $config.SEMANTIC_ERROR,
       iconContainerStyle: !isOnActionSheet && {
         width: 72,
-        height: 52,
+        height: $config.ICON_TEXT ? 52 : 48,
       },
     },
     onPress,
@@ -64,6 +121,25 @@ const LocalEndcall = (props: LocalEndcallProps) => {
       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)

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,33 +1,57 @@
 import React, {useContext} from 'react';
+import {Text, ViewStyle} from 'react-native';
 import {useString} from '../utils/useString';
-import {PropsContext, ToggleState} from '../../agora-rn-uikit';
+import {ClientRole, PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
-import {useLocalUserInfo, useRtc} from 'customization-api';
+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';
 
 export interface LocalSwitchCameraProps {
-  showLabel?: boolean;
   render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
-  disabled?: boolean;
+  showText?: boolean;
+  iconBackgroundColor?: string;
+  iconSize?: number;
+  iconContainerStyle?: ViewStyle;
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
   const {isToolbarMenuItem} = useToolbarMenu();
   const {callbacks} = useContext(PropsContext);
+  const {isScreenshareActive} = useScreenshare();
   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 {isOnActionSheet, showLabel} = useActionSheet();
+  const {
+    showText = true,
+    iconBackgroundColor,
+    iconSize,
+    iconContainerStyle = {},
+  } = props;
 
+  const switchCameraText = useString(toolbarItemSwitchCameraText)();
+
+  const {rtcProps} = useContext(PropsContext);
+  const isLiveStream = $config.EVENT_MODE;
+  const isAudience = rtcProps?.role == ClientRole.Audience;
+  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const showTitle = showText ? showLabel : false;
   const onPress = () => {
     RtcEngineUnsafe.switchCamera();
     callbacks?.SwitchCamera && callbacks.SwitchCamera();
   };
-  const isVideoEnabled = local.video === ToggleState.enabled;
+  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',
@@ -35,11 +59,26 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
         isVideoEnabled || !disabled
           ? $config.SECONDARY_ACTION_COLOR
           : $config.SEMANTIC_NEUTRAL,
+      ...(iconBackgroundColor && {iconBackgroundColor}),
+      ...(iconSize && {iconSize}),
+      iconContainerStyle: iconContainerStyle,
     },
-    disabled: !isVideoEnabled || disabled ? true : false,
+    disabled: disabled,
     onPress: onPress,
+    btnTextProps: {
+      text: showTitle ? 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)
   ) : isToolbarMenuItem ? (