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

package/template/src/subComponents/LocalVideoMute.tsx

@@ -9,61 +9,208 @@
  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 {useScreenshare} from './screenshare/useScreenshare';
+import {isAndroid} from '../utils/common';
+import {isIOS} from '../utils/common';
+import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {isMobileUA} from '../utils/common';
+import {useToolbar} from '../utils/useToolbar';
+import {
+  I18nDeviceStatus,
+  livestreamingCameraTooltipText,
+  toolbarItemCameraText,
+  toolbarItemCameraTooltipText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {useToolbarProps} from '../atoms/ToolbarItem';
 /**
  * A component to mute / unmute the local video
  */
 export interface LocalVideoMuteProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  render?: (onPress: () => void, isVideoEnabled: boolean) => JSX.Element;
+  disabled?: boolean;
+  iconProps?: (
     isVideoEnabled: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+    isPermissionDenied: boolean,
+  ) => Partial<ImageIconProps>;
+  showWarningIcon?: boolean;
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+
+  const {rtcProps} = useContext(PropsContext);
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
   const local = useLocalUserInfo();
+  const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
-  //commented for v1 release
-  //const videoLabel = useString('toggleVideoButton')();
-  const videoLabel = 'Video';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {position} = useToolbar();
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+
+  const videoButtonLabel = useString<I18nDeviceStatus>(toolbarItemCameraText);
+  const videoButtonTooltip = useString<I18nDeviceStatus>(
+    toolbarItemCameraTooltipText,
+  );
+
+  const lstooltip = useString<boolean>(livestreamingCameraTooltipText);
   const onPress = () => {
+    //if screensharing is going on native - to turn on video screenshare should be turn off
+    //show confirm popup to stop the screenshare
+    logger.log(
+      LogSource.Internals,
+      'LOCAL_MUTE',
+      'toggle mute/unmute local video',
+      {
+        isVideoEnabled,
+        permissionDenied,
+      },
+    );
     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
+    ? videoButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)
+    : isVideoEnabled
+    ? videoButtonLabel(I18nDeviceStatus.ON)
+    : videoButtonLabel(I18nDeviceStatus.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 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 || videoLabel : '',
+      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 = videoLabel;
+  if (isOnActionSheet) {
+    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
+        ? videoButtonTooltip(I18nDeviceStatus.PERMISSION_DENIED)
+        : isVideoEnabled
+        ? videoButtonTooltip(I18nDeviceStatus.ON)
+        : videoButtonTooltip(I18nDeviceStatus.OFF)
+      : '';
+    if (
+      //precall mobile/mobile web UI - mute button should not show the label
+      (!callActive && isMobileUA()) ||
+      //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?.videoForceDisabled
+  ) {
+    iconButtonProps.iconProps = {
+      ...iconButtonProps.iconProps,
+      name: 'video-off',
+      tintColor: $config.SEMANTIC_NEUTRAL,
+    };
+    iconButtonProps.toolTipMessage =
+      showToolTip && !local?.videoForceDisabled
+        ? lstooltip(isHandRaised(local.uid))
+        : '';
+    iconButtonProps.disabled = true;
+  }
   return props?.render ? (
-    props.render(onPress, isVideoEnabled, buttonTemplateName)
+    props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <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

@@ -54,7 +54,7 @@ const LogoutButton = () => {
   };
 
   const login = () => {
-    history.push('/authenticate');
+    history.push('/login');
   };
 
   return (
@@ -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',
   },
 });

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, {useContext, useState} from 'react';
 import {
   View,
@@ -12,10 +11,19 @@ import {
 } from 'react-native';
 import {useString} from '../utils/useString';
 import {networkIconsObject} from '../components/NetworkQualityContext';
-import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
-import {isWebInternal} from '../utils/common';
+//import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
+import {isMobileUA, isWebInternal} from '../utils/common';
 import NetworkQualityContext from '../components/NetworkQualityContext';
-import {RenderInterface, UidType} from '../../agora-rn-uikit';
+import {ContentInterface, UidType} from '../../agora-rn-uikit';
+import ThemeConfig from '../theme';
+import ImageIcon from '../atoms/ImageIcon';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {useLayout, useContent} from 'customization-api';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import {
+  NetworkQualities,
+  videoTileNetworkQuailtyLabel,
+} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  *
@@ -28,77 +36,61 @@ import {RenderInterface, UidType} from '../../agora-rn-uikit';
  *
  */
 interface NetworkQualityPillProps {
-  user: RenderInterface;
-  primaryColor: any;
-  small?: boolean;
-  rootStyle?: StyleProp<ViewStyle>;
+  uid: UidType;
 }
 const NetworkQualityPill = (props: NetworkQualityPillProps) => {
-  const {user, primaryColor, small, rootStyle} = props;
+  const {uid} = props;
+  const {defaultContent} = useContent();
   const [networkTextVisible, setNetworkTextVisible] = useState(false);
-  //commented for v1 release
-  //const getLabel = useString<NetworkQualities>('networkQualityLabel');
-  const getLabel = (quality: string) => {
-    switch (quality) {
-      case 'unknown':
-        return 'Unknown';
-      case 'excellent':
-        return 'Excellent';
-      case 'good':
-        return 'Good';
-      case 'bad':
-        return 'Bad';
-      case 'veryBad':
-        return 'Very Bad';
-      case 'unpublished':
-        return 'Unpublished';
-      case 'loading':
-        return 'Loading';
-      default:
-        return 'Loading';
-    }
-  };
+  const getLabel = useString<NetworkQualities>(videoTileNetworkQuailtyLabel);
+
   const networkQualityStat = useContext(NetworkQualityContext);
-  const networkStat = networkQualityStat[user.uid]
-    ? networkQualityStat[user.uid]
-    : user.audio || user.video
+  const networkStat = networkQualityStat[uid]
+    ? networkQualityStat[uid]
+    : defaultContent[uid]?.audio || defaultContent[uid]?.video
     ? 8
     : 7;
-
+  const {activeUids, customContent} = useContent();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
+  const {currentLayout} = useLayout();
+  const reduceSpace =
+    isMobileUA() && activeUidsLen > 4 && currentLayout === getGridLayoutName();
   return (
     <View
+      testID="videocall-networkpill"
       style={[
         style.networkPill,
+        style.rootStyle,
         {
-          opacity: networkTextVisible ? 1 : 0.8,
+          backgroundColor: networkTextVisible
+            ? networkIconsObject[networkStat].tint +
+              hexadecimalTransparency['50%']
+            : $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%'],
         },
-        rootStyle,
+        reduceSpace ? {top: 2, right: 2} : {},
       ]}>
-      <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'}
+      <PlatformSpecificWrapper
+        {...{
+          networkTextVisible,
+          setNetworkTextVisible,
+          reduceSpace,
+          activeUidsLen,
+        }}>
+        <View>
+          <ImageIcon
+            iconType="plain"
+            tintColor={
+              networkTextVisible
+                ? $config.PRIMARY_ACTION_TEXT_COLOR
+                : networkIconsObject[networkStat].tint +
+                  hexadecimalTransparency['30%']
+            }
+            name={networkIconsObject[networkStat].icon}
+            iconSize={16}
           />
         </View>
         {networkTextVisible && (
-          <Text
-            textBreakStrategy={'simple'}
-            style={[
-              style.networkPillText,
-              {fontSize: small ? 14 : 15, userSelect: 'none'},
-            ]}>
+          <Text textBreakStrategy={'simple'} style={style.networkPillText}>
             {getLabel(networkIconsObject[networkStat].text)}
           </Text>
         )}
@@ -111,6 +103,8 @@ const PlatformSpecificWrapper = ({
   networkTextVisible,
   setNetworkTextVisible,
   children,
+  reduceSpace,
+  activeUidsLen,
 }: any) => {
   return !isWebInternal() ? (
     <Pressable
@@ -119,6 +113,7 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
       }}
       onPress={() => {
         setNetworkTextVisible((visible: boolean) => !visible);
@@ -132,8 +127,9 @@ const PlatformSpecificWrapper = ({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
+        padding: reduceSpace && activeUidsLen > 12 ? 2 : 8,
       }}
-      onClick={(e) => {
+      onClick={e => {
         e.preventDefault();
         setNetworkTextVisible((visible: boolean) => !visible);
       }}
@@ -150,12 +146,13 @@ const PlatformSpecificWrapper = ({
 
 const style = StyleSheet.create({
   networkPill: {
-    height: 30,
-    backgroundColor: $config.SECONDARY_FONT_COLOR + 'bb',
     position: 'absolute',
     zIndex: 2,
-    paddingHorizontal: 0,
-    borderRadius: 15,
+    borderRadius: 50,
+  },
+  rootStyle: {
+    top: 8,
+    right: 8,
   },
   networkPillContent: {
     display: 'flex',
@@ -163,27 +160,11 @@ const style = StyleSheet.create({
     alignItems: 'center',
   },
   networkPillText: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 30,
-    fontSize: 15,
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '600',
-    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',
+    marginLeft: 8,
   },
 });
 

package/template/src/subComponents/OpenInNativeButton.tsx

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

package/template/src/subComponents/Recording.tsx

@@ -10,56 +10,69 @@
 *********************************************
 */
 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 {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
 import {useString} from '../utils/useString';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from '../components/styles';
+import {toolbarItemRecordingText} from '../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../atoms/ToolbarItem';
 
 export interface RecordingButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isRecordingActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  render?: (onPress: () => void, isRecordingActive: boolean) => JSX.Element;
 }
 
 const Recording = (props: RecordingButtonProps) => {
-  const {startRecording, stopRecording, isRecordingActive} = useRecording();
-  //commented for v1 release
-  //const recordingButton = useString<boolean>('recordingButton');
-  const recordingButton = (recording: boolean) =>
-    recording ? 'Recording' : 'Record';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {startRecording, inProgress, isRecordingActive} = useRecording();
+  const recordingButton = useString<boolean>(toolbarItemRecordingText);
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {setShowStopRecordingPopup} = useVideoCall();
   const onPress = () => {
     if (!isRecordingActive) {
       startRecording && startRecording();
     } else {
-      stopRecording && stopRecording();
+      setShowStopRecordingPopup(true);
     }
   };
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: isRecordingActive ? 'recordingActiveIcon' : 'recordingIcon',
-    onPress,
-    color: isRecordingActive ? '#FD0845' : $config.PRIMARY_COLOR,
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isRecordingActive ? 'stop-recording' : 'recording',
+      tintColor: isRecordingActive
+        ? $config.SEMANTIC_ERROR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      text: showLabel ? label || recordingButton(isRecordingActive) : '',
+      textColor: $config.FONT_COLOR,
+    },
+    onPress: onPressCustom || onPress,
+    disabled: inProgress,
+    containerStyle: inProgress ? {opacity: 0.6} : {},
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = Styles.fullWidthButton as Object;
-  } else {
-    btnTemplateProps.btnText = recordingButton(isRecordingActive);
-    btnTemplateProps.style = Styles.localButton as Object;
+  if (isOnActionSheet) {
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
   }
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
-    props.render(onPress, isRecordingActive, buttonTemplateName)
+    props.render(onPress, isRecordingActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 };