agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/ChatInput.tsx

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

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

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

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -10,58 +10,80 @@
 *********************************************
 */
 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 TertiaryButton from '../atoms/TertiaryButton';
-import IconButton, {IconButtonProps} from '../atoms/IconButton';
-import {useVideoCall} from '../components/useVideoCall';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../components/useShareLink';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import Styles from '../components/styles';
 
 export interface CopyJoinInfoProps {
-  showLabel?: boolean;
-  showTeritaryButton?: boolean;
-  render?: (onPress: () => void) => JSX.Element;
-  isOnActionSheet?: boolean;
+  showText?: boolean;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
-  const {
-    showLabel = $config.ICON_TEXT || false,
-    showTeritaryButton = false,
-    isOnActionSheet = false,
-  } = props;
+  const {phrase} = useParams<{phrase: string}>();
+  const getMeeting = useGetMeetingPhrase();
+  const {copyShareLinkToClipboard} = useShareLink();
   //commented for v1 release
   //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Invite';
-  const {setShowInvitePopup} = useVideoCall();
+  const copyMeetingInviteButton = 'Copy Meeting Invite';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  useEffect(() => {
+    getMeeting(phrase);
+  }, [phrase]);
 
-  const onPress = () => {
-    setShowInvitePopup(true);
-  };
-  let iconButtonProps: IconButtonProps = {
+  const onPress = () =>
+    copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
+  let btnTemplateProps: BtnTemplateInterface = {
     onPress: onPress,
-    iconProps: {
-      name: 'share',
-      tintColor: $config.SECONDARY_ACTION_COLOR,
-    },
-    btnTextProps: {
-      textColor: $config.FONT_COLOR,
-      text: showLabel ? copyMeetingInviteButton : '',
-    },
+    name: 'clipboard',
   };
-
-  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  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 : '';
+  }
 
   return props?.render ? (
-    props.render(onPress)
+    props.render(onPress, buttonTemplateName)
   ) : (
-    <>
-      {showTeritaryButton ? (
-        <TertiaryButton text="Invite" onPress={onPress} />
-      ) : (
-        <IconButton {...iconButtonProps} />
-      )}
-    </>
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
+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/FallbackLogo.tsx

@@ -10,130 +10,48 @@
 *********************************************
 */
 import React from 'react';
-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';
+import {Image, Text, View} from 'react-native';
 
-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);
+export default function FallbackLogo(name: string) {
+  // console.log('!', name);
   return (
-    <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
+      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>
   );
 }
-
-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.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     // marginBottom: 20,
     alignSelf: 'center',
   },

package/template/src/subComponents/{LayoutIconDropdown1.native.tsx → LayoutIconDropdown.native.tsx}

@@ -8,7 +8,7 @@ import {
   Modal,
   Dimensions,
 } from 'react-native';
-import ImageIcon from '../atoms/ImageIcon';
+import {ImageIcon} from '../../agora-rn-uikit';
 import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {useLayout} from '../utils/useLayout';
 
@@ -40,12 +40,14 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
         item?.iconName ? (
           <ImageIcon
             key={'btnTemplateNameDropdown' + index}
+            style={style.btnHolderCustom}
             name={item?.iconName}
           />
         ) : (
           <ImageIcon
             key={'btnTemplateIconDropdown' + index}
-            name={item?.iconName}
+            style={style.btnHolderCustom}
+            icon={item.icon}
           />
         ),
       ];
@@ -110,7 +112,7 @@ const style = StyleSheet.create({
     width: 1,
     borderRadius: 10,
     borderWidth: 4,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderColor: $config.PRIMARY_COLOR,
   },
   dropdownIconContainer: {
     flexDirection: 'row',
@@ -122,7 +124,14 @@ const style = StyleSheet.create({
     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,
@@ -136,6 +145,11 @@ const style = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
   },
+  btnHolderCustom: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
   backDrop: {
     position: 'absolute',
     top: 0,