agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

package/template/src/subComponents/ChatInput.tsx

@@ -9,87 +9,163 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useRef} from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  Image,
-  TextInput as Ti,
-  UIManager,
-} from 'react-native';
-import ChatContext from '../components/ChatContext';
+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} from '../utils/common';
+import {useFpe} from 'fpe-api';
+import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
+
+export interface ChatSendButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+export const ChatSendButton = (props: ChatSendButtonProps) => {
+  const {
+    selectedChatUserId: selectedUserId,
+    message,
+    setMessage,
+  } = useChatUIControl();
+  const {sendChatMessage} = useChatMessages();
+  const onPress = () => {
+    if (!selectedUserId) {
+      sendChatMessage(message);
+      setMessage && setMessage('');
+    } else {
+      sendChatMessage(message, selectedUserId);
+      setMessage && setMessage('');
+    }
+  };
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <TouchableOpacity style={style.chatInputButton} onPress={onPress}>
+      <Image
+        source={{
+          uri: icons.send,
+        }}
+        style={style.chatInputButtonIcon}
+        resizeMode={'contain'}
+      />
+    </TouchableOpacity>
+  );
+};
+export interface ChatTextInputProps {
+  render?: (
+    message: string,
+    onChangeText: (text: string) => void,
+    onSubmitEditing: () => void,
+    chatMessageInputPlaceholder: string,
+  ) => JSX.Element;
+}
+export const ChatTextInput = (props: ChatTextInputProps) => {
+  const {
+    selectedChatUserId: selectedUserId,
+    message,
+    setMessage,
+  } = useChatUIControl();
+  const {sendChatMessage} = useChatMessages();
+  //commented for v1 release
+  // const chatMessageInputPlaceholder = useString(
+  //   'chatMessageInputPlaceholder',
+  // )();
+  const chatMessageInputPlaceholder = 'Type your message..';
+  const onChangeText = (text: string) => setMessage(text);
+  const onSubmitEditing = () => {
+    if (!selectedUserId) {
+      sendChatMessage(message);
+      setMessage('');
+    } else {
+      sendChatMessage(message, selectedUserId);
+      setMessage('');
+    }
+  };
+
+  return props?.render ? (
+    props.render(
+      message,
+      onChangeText,
+      onSubmitEditing,
+      chatMessageInputPlaceholder,
+    )
+  ) : (
+    <TextInput
+      value={message}
+      onChangeText={onChangeText}
+      style={{
+        borderRadius: 10,
+        backgroundColor: $config.PRIMARY_FONT_COLOR + '10',
+        borderWidth: 1,
+        color: $config.PRIMARY_FONT_COLOR,
+        textAlign: 'left',
+        height: 40,
+        paddingVertical: 10,
+        flex: 1,
+        alignSelf: 'center',
+      }}
+      blurOnSubmit={false}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={chatMessageInputPlaceholder}
+      placeholderTextColor={$config.PRIMARY_FONT_COLOR}
+      autoCorrect={false}
+    />
+  );
+};
 
 /**
  * Input component for the Chat interface
  */
-const ChatInput = (props: any) => {
+const ChatInput = () => {
   const {primaryColor} = useContext(ColorContext);
-  const [message, onChangeMessage] = useState('');
-  // const [height, setHeight] = useState(0);
-  const {privateActive, selectedUserID} = props;
-  const {sendMessage, sendMessageToUid} = useContext(ChatContext);
+  const {ChatInputComponent, ChatSendButtonComponent} = useFpe((data) => {
+    let components: {
+      ChatInputComponent: React.ComponentType<ChatTextInputProps>;
+      ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
+    } = {
+      ChatInputComponent: ChatTextInput,
+      ChatSendButtonComponent: ChatSendButton,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.chat &&
+      //   typeof data?.components?.videoCall?.chat === 'object'
+      // ) {
+      //   if (
+      //     data?.components?.videoCall?.chat?.chatInput &&
+      //     typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
+      //   ) {
+      //     components.ChatInputComponent =
+      //       data?.components?.videoCall?.chat?.chatInput;
+      //   }
+      //   if (
+      //     data?.components?.videoCall?.chat?.chatSentButton &&
+      //     typeof data?.components?.videoCall?.chat?.chatSentButton !==
+      //       'object' &&
+      //     isValidReactComponent(
+      //       data?.components?.videoCall?.chat?.chatSentButton,
+      //     )
+      //   ) {
+      //     components.ChatSendButtonComponent =
+      //       data?.components?.videoCall?.chat?.chatSentButton;
+      //   }
+      // }
+    }
+    return components;
+  });
 
   return (
     <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>
-      <TextInput
-        value={message}
-        // onContentSizeChange={(event) => {
-        // causes infinite react state update on ctrl+A -> delete
-        // setHeight(event.nativeEvent.contentSize.height);
-        // }}
-        onChangeText={(text) => onChangeMessage(text)}
-        style={{
-          borderRadius: 10,
-          backgroundColor: $config.PRIMARY_FONT_COLOR + '10',
-          borderWidth: 1,
-          color: $config.PRIMARY_FONT_COLOR,
-          textAlign: 'left',
-          height: 40,
-          paddingVertical: 10,
-          flex: 1,
-          alignSelf: 'center',
-        }}
-        blurOnSubmit={false}
-        onSubmitEditing={() => {
-          // console.log('!click');
-          if (!privateActive) {
-            sendMessage(message);
-            onChangeMessage('');
-          } else {
-            sendMessageToUid(message, selectedUserID);
-            onChangeMessage('');
-          }
-        }}
-        placeholder="Type your message.."
-        placeholderTextColor={$config.PRIMARY_FONT_COLOR}
-        autoCorrect={false}
-      />
-      <TouchableOpacity
-        style={style.chatInputButton}
-        onPress={() => {
-          if (!privateActive) {
-            sendMessage(message);
-            onChangeMessage('');
-            // setHeight(40);
-          } else {
-            sendMessageToUid(message, selectedUserID);
-            onChangeMessage('');
-            // setHeight(40);
-          }
-        }}>
-        <Image
-          source={{
-            uri: icons.send,
-          }}
-          style={style.chatInputButtonIcon}
-          resizeMode={'contain'}
-        />
-      </TouchableOpacity>
+      <ChatInputComponent />
+      <ChatSendButtonComponent />
     </View>
   );
 };

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -9,78 +9,63 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
-import Clipboard from './Clipboard';
-import {gql, useQuery} from '@apollo/client';
-import icons from '../assets/icons';
-import platform from '../subComponents/Platform';
+import React, {useEffect} from 'react';
+import {StyleSheet} from 'react-native';
 import {useParams} from '../components/Router';
-import Toast from '../../react-native-toast-message';
-import {BtnTemplate} from '../../agora-rn-uikit';
+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';
 
-const SHARE = gql`
-  query share($passphrase: String!) {
-    share(passphrase: $passphrase) {
-      passphrase {
-        host
-        view
-      }
-      channel
-      title
-      pstn {
-        number
-        dtmf
-      }
-    }
-  }
-`;
+export interface CopyJoinInfoProps {
+  showText?: boolean;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
 
-const ParticipantView = (props: {showText?: boolean}) => {
+const CopyJoinInfo = (props: CopyJoinInfoProps) => {
   const {phrase} = useParams<{phrase: string}>();
-  const {data, loading, error} = useQuery(SHARE, {
-    variables: {passphrase: phrase},
-  });
-  const copyToClipboard = () => {
-    Toast.show({text1: 'Copied to Clipboard', visibilityTime: 1000});
-    if (data && !loading) {
-      let stringToCopy = '';
-      if ($config.FRONTEND_ENDPOINT) {
-        stringToCopy += `Meeting - ${data.share.title}\nURL for Attendee: ${$config.FRONTEND_ENDPOINT}/${data.share.passphrase.view}`;
-        if (data.share.passphrase.host) {
-          stringToCopy += `\nURL for Host: ${$config.FRONTEND_ENDPOINT}/${data.share.passphrase.host}`;
-        }
-      } else {
-        if (platform === 'web') {
-          stringToCopy += `Meeting - ${data.share.title}\nURL for Attendee: ${window.location.origin}/${data.share.passphrase.view}`;
-          if (data.share.passphrase.host) {
-            stringToCopy += `\nURL for Host: ${window.location.origin}/${data.share.passphrase.host}`;
-          }
-        } else {
-          stringToCopy += `Meeting - ${data.share.title}\nAttendee Meeting ID: ${data.share.passphrase.view}`;
-          if (data.share.passphrase.host) {
-            stringToCopy += `\nHost Meeting ID: ${data.share.passphrase.host}`;
-          }
-        }
-      }
-      if (data.share.pstn) {
-        stringToCopy += `\nPSTN Number: ${data.share.pstn.number}\nPSTN Pin: ${data.share.pstn.dtmf}`;
-      }
-      console.log('Copying string to clipboard:', stringToCopy);
-      Clipboard.setString(stringToCopy);
-      // Clipboard.setString(JSON.stringify(data));
-    }
+  const getMeeting = useGetMeetingPhrase();
+  const {copyShareLinkToClipboard} = useShareLink();
+  //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 onPress = () =>
+    copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: 'clipboard',
   };
+  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 (
-    <BtnTemplate
-      disabled={!data}
-      style={style.backButton}
-      onPress={() => copyToClipboard()}
-      name={'clipboard'}
-      btnText={props.showText ? 'Copy Meeting Invite' : ''}
-      color={$config.PRIMARY_FONT_COLOR}
-    />
+  return props?.render ? (
+    props.render(onPress, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
@@ -101,4 +86,4 @@ const style = StyleSheet.create({
   },
 });
 
-export default ParticipantView;
+export default CopyJoinInfo;

package/template/src/subComponents/Error.tsx

@@ -9,17 +9,21 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, { useContext, useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import { useHistory } from '../components/Router';
-
-const Error = (props: { error: { name: string; message: string }, showBack?: boolean }) => {
+import React, {useContext, useState} from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+import {useString} from '../utils/useString';
+import {ErrorContext} from '../components/common';
+import {useHistory} from '../components/Router';
 
+const Error = (props: {
+  error: {name: string; message: string};
+  showBack?: boolean;
+}) => {
+  const {resetError} = useContext(ErrorContext);
   const history = useHistory();
+  //commented for v1 release
+  //const goBackButton = useString('goBackButton')();
+  const goBackButton = 'Go back';
   return (
     <View
       style={{
@@ -45,20 +49,27 @@ const Error = (props: { error: { name: string; message: string }, showBack?: boo
         }}>
         {props.error.name}
       </Text>
-      <Text style={{ textAlign: 'center', padding:4 }}>{props.error.message}</Text>
-      {props.showBack ? <TouchableOpacity
-        style={{ alignSelf: 'center' }}
-        onPress={() => history.replace('./')}>
-        <Text
-          style={{
-            fontWeight: '500',
-            textAlign: 'center',
-            textDecorationLine: 'underline',
+      <Text style={{textAlign: 'center', padding: 4}}>
+        {props.error.message}
+      </Text>
+      {props.showBack ? (
+        <TouchableOpacity
+          style={{alignSelf: 'center'}}
+          onPress={() => {
+            resetError && resetError();
+            history.replace('./');
           }}>
-          Go back
-                </Text>
-      </TouchableOpacity> : null}
+          <Text
+            style={{
+              fontWeight: '500',
+              textAlign: 'center',
+              textDecorationLine: 'underline',
+            }}>
+            {goBackButton}
+          </Text>
+        </TouchableOpacity>
+      ) : null}
     </View>
-  )
-}
-export default Error;
+  );
+};
+export default Error;

package/template/src/subComponents/LanguageSelector.tsx

@@ -0,0 +1,85 @@
+/*
+********************************************
+ 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, {useContext} from 'react';
+import {Picker, StyleSheet, Text} from 'react-native';
+import ColorContext from '../components/ColorContext';
+import {useLanguage} from '../language/useLanguage';
+import {useFpe} from 'fpe-api';
+import {useString} from '../utils/useString';
+import {DEFAULT_I18_DATA} from '../language';
+
+const LanguageSelector = () => {
+  const {primaryColor} = useContext(ColorContext);
+  const {languageCode, setLanguageCode} = useLanguage();
+  const languageData = useFpe((data) => data?.i18n);
+  //commented for v1 release
+  //const languageText = useString('language')();
+  const languageText = 'Language';
+  if (!languageData || !languageData.length) {
+    return <></>;
+  }
+
+  if (
+    languageData.length === 1 &&
+    languageData[0].locale === DEFAULT_I18_DATA.locale
+  ) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Text style={style.heading}>{languageText}</Text>
+      <Picker
+        selectedValue={languageCode}
+        style={[{borderColor: primaryColor}, style.popupPicker]}
+        onValueChange={(itemValue) => setLanguageCode(itemValue)}>
+        {languageData.map((item) => {
+          return (
+            <Picker.Item
+              label={item.label || item.locale}
+              value={item.locale}
+              key={item.locale}
+            />
+          );
+        })}
+        {!languageData.filter((i) => i.locale === DEFAULT_I18_DATA.locale)
+          .length ? (
+          <Picker.Item
+            label={DEFAULT_I18_DATA.label || DEFAULT_I18_DATA.locale}
+            value={DEFAULT_I18_DATA.locale}
+            key={DEFAULT_I18_DATA.locale}
+          />
+        ) : null}
+      </Picker>
+    </>
+  );
+};
+
+const style = StyleSheet.create({
+  heading: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+    // marginBottom: 20,
+    alignSelf: 'center',
+  },
+  popupPicker: {
+    height: 30,
+    marginBottom: 10,
+    borderRadius: 50,
+    paddingHorizontal: 15,
+    fontSize: 15,
+    minHeight: 35,
+  },
+});
+
+export default LanguageSelector;

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

@@ -0,0 +1,163 @@
+import React, {SetStateAction} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Modal,
+  Dimensions,
+} from 'react-native';
+import {ImageIcon} from '../../agora-rn-uikit';
+import useCustomLayout from '../pages/video-call/CustomLayout';
+import {useLayout} from '../utils/useLayout';
+
+const deviceHeight = Dimensions.get('screen').height;
+interface LayoutIconDropdownProps {
+  dropdownPosition: {
+    top: number;
+    right: number;
+  };
+  showDropdown: boolean;
+  setShowDropdown: React.Dispatch<SetStateAction<boolean>>;
+}
+
+const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
+  const {showDropdown, setShowDropdown} = props;
+  const layouts = useCustomLayout();
+  const {activeLayoutName, setActiveLayoutName} = useLayout();
+  const selectedItemHighlighter = (isSelected: boolean) => {
+    return <View style={isSelected ? style.highlighter : {}} />;
+  };
+  const renderDropdown = () => {
+    const data = layouts.map((item, index) => {
+      let onPress = () => {
+        setActiveLayoutName(item.name);
+        setShowDropdown(false);
+      };
+      let content = [];
+      let BtnTemplateLocal = [
+        item?.iconName ? (
+          <ImageIcon
+            key={'btnTemplateNameDropdown' + index}
+            style={style.btnHolderCustom}
+            name={item?.iconName}
+          />
+        ) : (
+          <ImageIcon
+            key={'btnTemplateIconDropdown' + index}
+            style={style.btnHolderCustom}
+            icon={item.icon}
+          />
+        ),
+      ];
+      content.push(
+        <TouchableOpacity
+          style={style.dropdownIconContainer}
+          onPress={onPress}
+          key={'dropdownLayoutIcon' + index}>
+          <>
+            <View style={style.highlighterContainer}>
+              {selectedItemHighlighter(item.name === activeLayoutName)}
+            </View>
+            <View style={{flex: 1}}>{BtnTemplateLocal}</View>
+            <View style={style.layoutNameContainer}>
+              <Text numberOfLines={2} style={style.layoutNameText}>
+                {item.label}
+              </Text>
+            </View>
+          </>
+        </TouchableOpacity>,
+      );
+      return content;
+    });
+    return (
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={showDropdown}
+        onRequestClose={() => {
+          setShowDropdown(false);
+        }}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setShowDropdown(false);
+          }}>
+          <View style={style.backDrop} />
+        </TouchableWithoutFeedback>
+        <View style={style.dropdownContentContainer}>{data}</View>
+      </Modal>
+    );
+  };
+  return <>{renderDropdown()}</>;
+};
+
+const style = StyleSheet.create({
+  layoutNameContainer: {
+    flex: 3,
+    justifyContent: 'center',
+    paddingHorizontal: 5,
+  },
+  layoutNameText: {
+    textAlign: 'left',
+  },
+  highlighterContainer: {
+    flex: 0.3,
+    justifyContent: 'center',
+  },
+  highlighter: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+    height: 1,
+    width: 1,
+    borderRadius: 10,
+    borderWidth: 4,
+    borderColor: $config.PRIMARY_COLOR,
+  },
+  dropdownIconContainer: {
+    flexDirection: 'row',
+    maxHeight: 40,
+    marginVertical: 5,
+  },
+  navItem: {
+    height: '100%',
+    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,
+  },
+  dropdownContentContainer: {
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    width: '70%',
+    marginTop: (1 / 3) * deviceHeight,
+    marginBottom: 30,
+    borderRadius: 10,
+    padding: 10,
+  },
+  btnHolderCustom: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+});
+
+export default LayoutIconDropdown;