agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/subComponents/ChatInput.tsx

@@ -9,16 +9,18 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {View, TouchableOpacity, StyleSheet, Image} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import TextInput from '../atoms/TextInput';
-import icons from '../assets/icons';
 import {useString} from '../utils/useString';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
-import {isValidReactComponent} from '../utils/common';
+import {isValidReactComponent, isWebInternal} from '../utils/common';
 import {useCustomization} from 'customization-implementation';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
+import {useRender, useUserName} from 'customization-api';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -29,6 +31,7 @@ export const ChatSendButton = (props: ChatSendButtonProps) => {
     selectedChatUserId: selectedUserId,
     message,
     setMessage,
+    inputActive,
   } = useChatUIControl();
   const {sendChatMessage} = useChatMessages();
   const onPress = () => {
@@ -43,13 +46,15 @@ export const ChatSendButton = (props: ChatSendButtonProps) => {
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <TouchableOpacity style={style.chatInputButton} onPress={onPress}>
-      <Image
-        source={{
-          uri: icons.send,
-        }}
-        style={style.chatInputButtonIcon}
-        resizeMode={'contain'}
+    <TouchableOpacity style={[style.chatInputButton]} onPress={onPress}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={
+          inputActive
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL
+        }
+        name={'send'}
       />
     </TouchableOpacity>
   );
@@ -63,17 +68,24 @@ export interface ChatTextInputProps {
   ) => JSX.Element;
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
+  let chatInputRef = useRef(null);
   const {
     selectedChatUserId: selectedUserId,
     message,
     setMessage,
+    inputActive,
+    privateActive,
   } = useChatUIControl();
   const {sendChatMessage} = useChatMessages();
+  const {renderList} = useRender();
   //commented for v1 release
   // const chatMessageInputPlaceholder = useString(
   //   'chatMessageInputPlaceholder',
   // )();
-  const chatMessageInputPlaceholder = 'Type your message..';
+  const [name] = useUserName();
+  const chatMessageInputPlaceholder = privateActive
+    ? `Private Message to ${renderList[selectedUserId].name}`
+    : `Chat publicly as ${name}...`;
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
     if (!selectedUserId) {
@@ -84,6 +96,15 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       setMessage('');
     }
   };
+  const {setInputActive} = useChatUIControl();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (isWebInternal()) {
+        chatInputRef?.current?.focus();
+      }
+    });
+  }, []);
 
   return props?.render ? (
     props.render(
@@ -94,23 +115,31 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     )
   ) : (
     <TextInput
+      setRef={(ref) => (chatInputRef.current = ref)}
+      onFocus={() => setInputActive(true)}
+      onBlur={() => setInputActive(false)}
       value={message}
       onChangeText={onChangeText}
       style={{
-        borderRadius: 10,
-        backgroundColor: $config.PRIMARY_FONT_COLOR + '10',
-        borderWidth: 1,
-        color: $config.PRIMARY_FONT_COLOR,
+        minHeight: 56,
+        borderRadius: 0,
+        borderBottomLeftRadius: 12,
+        borderWidth: 0,
+        color: $config.FONT_COLOR,
         textAlign: 'left',
-        height: 40,
-        paddingVertical: 10,
+        paddingVertical: 21,
+        paddingLeft: 20,
         flex: 1,
         alignSelf: 'center',
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        fontWeight: '400',
       }}
       blurOnSubmit={false}
       onSubmitEditing={onSubmitEditing}
       placeholder={chatMessageInputPlaceholder}
-      placeholderTextColor={$config.PRIMARY_FONT_COLOR}
+      placeholderTextColor={
+        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      }
       autoCorrect={false}
     />
   );
@@ -176,8 +205,10 @@ const ChatInput = (props: {
     },
   );
 
+  const {inputActive} = useChatUIControl();
+
   return (
-    <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>
+    <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
       <ChatInputComponent />
       <ChatSendButtonComponent />
     </View>
@@ -185,38 +216,22 @@ const ChatInput = (props: {
 };
 
 const style = StyleSheet.create({
-  inputView: {
-    width: '95%',
-    flexDirection: 'row',
-    marginHorizontal: 10,
-    paddingVertical: 15,
+  inputActiveView: {
+    borderTopWidth: 1,
+    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
-  chatInput: {
+  inputView: {
     flex: 1,
-    width: '100%',
-    backgroundColor: $config.PRIMARY_FONT_COLOR,
-    color: $config.PRIMARY_FONT_COLOR,
+    flexDirection: 'row',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderTopWidth: 1,
+    borderTopColor: 'transparent',
   },
   chatInputButton: {
-    width: 30,
-    marginRight: 0,
-    height: 30,
-    borderRadius: 30,
-    alignSelf: 'center',
-    marginHorizontal: 10,
-    backgroundColor: $config.PRIMARY_COLOR,
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  chatInputButtonIcon: {
-    width: '80%',
-    height: '80%',
+    flex: 0.1,
+    borderBottomRightRadius: 12,
     alignSelf: 'center',
-    transform: [
-      {
-        translateX: -2,
-      },
-    ],
+    marginRight: 16,
   },
 });
 export default ChatInput;

package/template/src/subComponents/Checkbox.native.tsx

@@ -11,6 +11,7 @@
 */
 import React, {useContext} from 'react';
 import CheckBox from '@react-native-community/checkbox';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 /**
  * A checkbox component for mobile
@@ -24,12 +25,22 @@ const Checkbox = (props: any) => {
       onValueChange={setUrlCheckbox}
       disabled={props?.disabled}
       tintColors={{
-        true: props?.disabled ? 'grey' : $config.PRIMARY_COLOR,
-        false: props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80,
+        true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
+        false: props?.disabled
+          ? 'grey'
+          : $config.FONT_COLOR + hexadecimalTransparency['80%'],
       }}
-      tintColor={props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80}
-      onCheckColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
-      onTintColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
+      tintColor={
+        props?.disabled
+          ? 'grey'
+          : $config.FONT_COLOR + hexadecimalTransparency['80%']
+      }
+      onCheckColor={
+        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+      }
+      onTintColor={
+        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+      }
     />
   );
 };

package/template/src/subComponents/Checkbox.tsx

@@ -26,8 +26,8 @@ const Checkbox = (props: any) => {
       value={urlCheckbox}
       onValueChange={setUrlCheckbox}
       //@ts-ignore Color prop exists on react-native-web but it not present in @react-native-community/checkbox
-      color={primaryColor}
-      style={styles.check}
+      color={props.color ?? primaryColor}
+      style={{...styles.check, ...props.style}}
     />
   );
 };

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -10,80 +10,58 @@
 *********************************************
 */
 import React, {useEffect} from 'react';
-import {StyleSheet} from 'react-native';
 import {useParams} from '../components/Router';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
-import {useString} from '../utils/useString';
 import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
-import {
-  SHARE_LINK_CONTENT_TYPE,
-  useShareLink,
-} from '../components/useShareLink';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from '../components/styles';
+import TertiaryButton from '../atoms/TertiaryButton';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useVideoCall} from '../components/useVideoCall';
 
 export interface CopyJoinInfoProps {
-  showText?: boolean;
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  showTeritaryButton?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
+  isOnActionSheet?: boolean;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
-  const {phrase} = useParams<{phrase: string}>();
-  const getMeeting = useGetMeetingPhrase();
-  const {copyShareLinkToClipboard} = useShareLink();
+  const {
+    showLabel = $config.ICON_TEXT || false,
+    showTeritaryButton = false,
+    isOnActionSheet = false,
+  } = props;
   //commented for v1 release
   //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Copy Meeting Invite';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  useEffect(() => {
-    getMeeting(phrase);
-  }, [phrase]);
+  const copyMeetingInviteButton = 'Invite';
+  const {setShowInvitePopup} = useVideoCall();
 
-  const onPress = () =>
-    copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
-  let btnTemplateProps: BtnTemplateInterface = {
+  const onPress = () => {
+    setShowInvitePopup(true);
+  };
+  let iconButtonProps: IconButtonProps = {
     onPress: onPress,
-    name: 'clipboard',
+    iconProps: {
+      name: 'share',
+      tintColor: $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      textColor: $config.FONT_COLOR,
+      text: showLabel ? copyMeetingInviteButton : '',
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = copyMeetingInviteButton;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.color = $config.PRIMARY_FONT_COLOR;
-    btnTemplateProps.style = style.backButton;
-    btnTemplateProps.btnText = props.showText ? copyMeetingInviteButton : '';
-  }
+
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
-    props.render(onPress, buttonTemplateName)
+    props.render(onPress)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      {showTeritaryButton ? (
+        <TertiaryButton text="Invite" onPress={onPress} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
+    </>
   );
 };
 
-const style = StyleSheet.create({
-  backButton: {
-    // marginLeft: 5,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignSelf: 'center',
-    width: 28,
-    height: 20,
-  },
-  backIcon: {
-    width: 28,
-    height: 20,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-});
-
 export default CopyJoinInfo;

package/template/src/subComponents/EndcallPopup.tsx

@@ -0,0 +1,107 @@
+import React, {SetStateAction, useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import TertiaryButton from '../atoms/TertiaryButton';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {useIsDesktop} from '../utils/common';
+
+interface EndcallPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  endCall: () => void;
+}
+const EndcallPopup = (props: EndcallPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const leaveMeetingLabelHeading = 'Leave Meeting?';
+  const leaveMeetingLabelSubHeading =
+    'Are you sure you want to leave this meeting?';
+
+  const stayBtnLabel = 'CANCEL';
+  const leaveBtnLabel = 'LEAVE';
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{leaveMeetingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{leaveMeetingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            text={stayBtnLabel}
+            textStyle={styles.btnText}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            text={leaveBtnLabel}
+            textStyle={styles.btnText}
+            onPress={props.endCall}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default EndcallPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    minWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/subComponents/FallbackLogo.tsx

@@ -10,48 +10,130 @@
 *********************************************
 */
 import React from 'react';
-import {Image, Text, View} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import UserAvatar from '../atoms/UserAvatar';
+//import AnimatedRings from '../atoms/AnimatedRings';
+import {useLayout, useRender} from 'customization-api';
+import {BREAKPOINTS, isMobileUA} from '../utils/common';
+import {
+  getGridLayoutName,
+  getPinnedLayoutName,
+} from '../pages/video-call/DefaultLayouts';
 
-export default function FallbackLogo(name: string) {
-  // console.log('!', name);
+export default function FallbackLogo(
+  name: string,
+  isActiveSpeaker?: boolean,
+  hideAvatar?: boolean,
+  isMax?: boolean,
+  avatarSize?: number,
+) {
+  const {activeUids} = useRender();
+  const {currentLayout} = useLayout();
+  const {width} = useWindowDimensions();
+  const isSmall = width < BREAKPOINTS.xl;
+  const iconSize = Math.min(avatarSize, 100);
+  const textSize = Math.min(avatarSize * 0.35, 32);
   return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: '#000',
-        justifyContent: 'center',
-        alignContent: 'center',
-        borderRadius: 15,
-      }}>
-      {/* <Image
-        source={{uri: $config.LOGO}}
-        style={{
-          height: '15%',
-        }}
-        resizeMode="contain"
-      /> */}
-      <View
-        style={{
-          width: 80,
-          height: 80,
-          backgroundColor: $config.PRIMARY_COLOR,
-          alignSelf: 'center',
-          alignContent: 'center',
-          justifyContent: 'center',
-          borderRadius: 10,
-          shadowColor: $config.PRIMARY_COLOR,
-          shadowRadius: 20,
-        }}>
-        <Text
-          style={{
-            color: $config.SECONDARY_FONT_COLOR,
-            fontSize: 20,
-            alignSelf: 'center',
-            textAlign: 'center',
-          }}>
-          {name ? name[0]?.toUpperCase() : 'U'}
-        </Text>
-      </View>
+    <View style={[styles.container]}>
+      {!hideAvatar ? (
+        // <View
+        //   style={[
+        //     styles.activeSpeakerBg,
+        //     (currentLayout === getGridLayoutName() && activeUids.length > 9) ||
+        //     (currentLayout === getPinnedLayoutName() && !isMax)
+        //       ? styles.activeSpeakerBgSmall
+        //       : {},
+        //     {
+        //       backgroundColor: isActiveSpeaker
+        //         ? $config.PRIMARY_ACTION_BRAND_COLOR +
+        //           hexadecimalTransparency['15%']
+        //         : 'transparent',
+        //     },
+        //   ]}>
+        <UserAvatar
+          name={name}
+          //name={avatarSize}
+          containerStyle={[
+            //  styles.avatarBg,
+            {
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconSize / 2,
+            },
+
+            // currentLayout === getPinnedLayoutName() && !isMax
+            //   ? styles.avatarBgSmall
+            //   : {},
+            // (!isMobileUA() &&
+            //   currentLayout === getGridLayoutName() &&
+            //   isSmall &&
+            //   activeUids.length > 9) ||
+            // (!isMobileUA() &&
+            //   currentLayout === getPinnedLayoutName() &&
+            //   isSmall &&
+            //   !isMax)
+            //   ? styles.avatarBgMobileUA
+            //   : {},
+            // isMobileUA() &&
+            // (activeUids.length > 4 ||
+            //   (currentLayout === getPinnedLayoutName() && !isMax))
+            //   ? styles.avatarBgMobileUA
+            //   : {},
+
+            {
+              backgroundColor: isActiveSpeaker
+                ? $config.PRIMARY_ACTION_BRAND_COLOR
+                : $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+            },
+          ]}
+          textStyle={[
+            styles.textStyle,
+            {fontSize: textSize, lineHeight: textSize},
+          ]}
+        />
+      ) : (
+        //</View>
+        <></>
+      )}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    justifyContent: 'center',
+  },
+  // activeSpeakerBg: {
+  //   width: 140,
+  //   height: 140,
+  //   borderRadius: 80,
+  //   alignSelf: 'center',
+  //   justifyContent: 'center',
+  //   color: $config.VIDEO_AUDIO_TILE_COLOR,
+  // },
+  // activeSpeakerBgSmall: {
+  //   width: 80,
+  //   height: 80,
+  // },
+  avatarBg: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+  avatarBgSmall: {
+    width: 60,
+    height: 60,
+  },
+  avatarBgMobileUA: {
+    width: 45,
+    height: 45,
+  },
+  textStyle: {
+    fontSize: 32,
+    lineHeight: 32,
+    fontWeight: '600',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+});

package/template/src/subComponents/LanguageSelector.tsx

@@ -68,7 +68,7 @@ const style = StyleSheet.create({
   heading: {
     fontSize: 20,
     fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.FONT_COLOR,
     // marginBottom: 20,
     alignSelf: 'center',
   },