agora-appbuilder-core 4.0.13 → 4.0.15

package/template/src/subComponents/ChatInput.tsx

@@ -9,59 +9,61 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useRef} from 'react';
-import {
-  View,
-  StyleSheet,
-  ActivityIndicator,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
+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 {useString} from '../utils/useString';
-import {isWeb, isWebInternal} from '../utils/common';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {isValidReactComponent, isWebInternal} from '../utils/common';
+import {useCustomization} from 'customization-implementation';
 import {
   ChatType,
-  UploadStatus,
   useChatUIControls,
-  MIN_HEIGHT,
-  MAX_HEIGHT,
-  LINE_HEIGHT,
-  MAX_TEXT_MESSAGE_SIZE,
 } from '../components/chat-ui/useChatUIControls';
-import {useContent, useRoomInfo, useUserName} from 'customization-api';
+import {useContent, useUserName} from 'customization-api';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
-import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji';
-import {useChatConfigure} from '../components/chat/chatConfigure';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {ChatAttachmentButton} from './chat/ChatAttachment';
-import ChatSendButton from './chat/ChatSendButton';
-import {
-  ChatMessageType,
-  SDKChatType,
-} from '../components/chat-messages/useChatMessages';
 import {
-  groupChatLiveInputPlaceHolderText,
-  groupChatMeetingInputPlaceHolderText,
+  groupChatInputPlaceHolderText,
   privateChatInputPlaceHolderText,
-  chatSendErrorTextSizeToastHeading,
-  chatSendErrorTextSizeToastSubHeading,
 } from '../language/default-labels/videoCallScreenLabels';
-import ChatUploadStatus from './chat/ChatUploadStatus';
-import {AttachmentBubble} from './ChatBubble';
-import IconButton from '../atoms/IconButton';
-import Toast from '../../react-native-toast-message';
 
-const ChatPanel = () => {
-  return (
-    <View style={style.chatPanelContainer}>
-      <View style={style.chatPanel}>
-        <ChatAttachmentButton />
-        <ChatEmojiButton />
-      </View>
-      <ChatSendButton />
-    </View>
+export interface ChatSendButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+export const ChatSendButton = (props: ChatSendButtonProps) => {
+  const {
+    privateChatUser: selectedUserId,
+    message,
+    setMessage,
+    inputActive,
+  } = useChatUIControls();
+  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}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={
+          inputActive
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL
+        }
+        name={'send'}
+      />
+    </TouchableOpacity>
   );
 };
 export interface ChatTextInputProps {
@@ -74,48 +76,16 @@ export interface ChatTextInputProps {
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
   let chatInputRef = useRef(null);
-  const {
-    privateChatUser,
-    message,
-    setMessage,
-    inputActive,
-    setInputActive,
-    chatType,
-    uploadStatus,
-    uploadedFiles,
-    setUploadedFiles,
-    inputHeight,
-    setInputHeight,
-  } = useChatUIControls();
+  const {privateChatUser, message, setMessage, inputActive, chatType} =
+    useChatUIControls();
+  const {sendChatMessage} = useChatMessages();
   const {defaultContent} = useContent();
-  const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
-
-  React.useEffect(() => {
-    if (message.length === 0) {
-      setInputHeight(MIN_HEIGHT);
-    }
-  }, [message]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (isWebInternal()) {
-        chatInputRef?.current?.focus();
-      }
-    });
-  }, []);
-
-  const {data} = useRoomInfo();
+  //commented for v1 release
+  // const chatMessageInputPlaceholder = useString(
+  //   'chatMessageInputPlaceholder',
+  // )();
   const [name] = useUserName();
-  const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
-  const errorSubHeadingSize = useString(chatSendErrorTextSizeToastSubHeading);
-
-  const isUploadStatusShown =
-    uploadStatus === UploadStatus.IN_PROGRESS ||
-    uploadStatus === UploadStatus.FAILURE;
-
-  const groupChatInputPlaceHolder = $config.EVENT_MODE
-    ? useString(groupChatLiveInputPlaceHolderText)
-    : useString(groupChatMeetingInputPlaceHolderText);
+  const groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
   const privateChatInputPlaceHolder = useString(
     privateChatInputPlaceHolderText,
   );
@@ -124,59 +94,25 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     chatType === ChatType.Private
       ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
       : groupChatInputPlaceHolder(name);
-
-  const onChangeText = (text: string) => {
-    setMessage(text);
-  };
+  const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
-    if (message.length === 0) return;
-    const groupID = data.chat.group_id;
-
-    if (message.length >= MAX_TEXT_MESSAGE_SIZE * 1024) {
-      Toast.show({
-        leadingIconName: 'alert',
-        type: 'error',
-        text1: toastHeadingSize,
-        text2: errorSubHeadingSize(MAX_TEXT_MESSAGE_SIZE.toString()),
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      return;
-    }
-
-    const option = {
-      chatType: privateChatUser
-        ? SDKChatType.SINGLE_CHAT
-        : SDKChatType.GROUP_CHAT,
-      type: ChatMessageType.TXT,
-      from: data.uid.toString(),
-      to: privateChatUser ? privateChatUser.toString() : groupID,
-      msg: message,
-    };
-    sendChatSDKMessage(option);
-    setInputHeight(MIN_HEIGHT);
-    setMessage('');
-  };
-
-  // with multiline textinput enter prints /n
-  const handleKeyPress = ({nativeEvent}) => {
-    if (nativeEvent.key === 'Enter' && !nativeEvent.shiftKey) {
-      onSubmitEditing();
-      nativeEvent.preventDefault();
+    if (!privateChatUser) {
+      sendChatMessage(message);
+      setMessage('');
+    } else {
+      sendChatMessage(message, privateChatUser);
+      setMessage('');
     }
   };
+  const {setInputActive} = useChatUIControls();
 
-  const handleContentSizeChange = e => {
-    const contentHeight = e.nativeEvent.contentSize.height;
-    const lines = Math.floor((contentHeight - 24) / LINE_HEIGHT);
-    const newHeight = lines < 5 ? LINE_HEIGHT * lines + 24 + 2 : MAX_HEIGHT; // Assuming lineHeight is LINE_HEIGHT
-    setInputHeight(newHeight);
-  };
-
-  const handleUploadRetry = () => {
-    uploadAttachment(uploadedFiles[0]);
-  };
+  useEffect(() => {
+    setTimeout(() => {
+      if (isWebInternal()) {
+        chatInputRef?.current?.focus();
+      }
+    });
+  }, []);
 
   return props?.render ? (
     props.render(
@@ -186,104 +122,34 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       chatMessageInputPlaceholder,
     )
   ) : (
-    <>
-      {uploadedFiles.length > 0 ? (
-        <View
-          style={[
-            style.attachmentContainer,
-            isUploadStatusShown
-              ? {
-                  borderTopLeftRadius: 0,
-                  borderTopRightRadius: 0,
-                  borderTopWidth: 0,
-                }
-              : {borderRadius: 8, borderTopWidth: 1},
-          ]}>
-          {uploadedFiles.map((file, index) => (
-            <AttachmentBubble
-              key={index}
-              fileName={file.file_name}
-              fileExt={file.file_ext}
-              isFullWidth={true}
-              fileType={file.file_type}
-              secondaryComponent={
-                uploadStatus === UploadStatus.IN_PROGRESS ? (
-                  <ActivityIndicator />
-                ) : uploadStatus === UploadStatus.FAILURE ? (
-                  <TouchableOpacity onPress={handleUploadRetry}>
-                    <Text style={style.btnRetry}>{'Retry'}</Text>
-                  </TouchableOpacity>
-                ) : uploadStatus === UploadStatus.SUCCESS ? (
-                  <View>
-                    <IconButton
-                      hoverEffect={true}
-                      hoverEffectStyle={{
-                        backgroundColor:
-                          $config.CARD_LAYER_5_COLOR +
-                          hexadecimalTransparency['20%'],
-                        borderRadius: 20,
-                      }}
-                      iconProps={{
-                        iconType: 'plain',
-                        iconSize: 20,
-                        iconContainerStyle: {
-                          padding: 2,
-                        },
-                        name: 'close',
-                        tintColor: $config.SECONDARY_ACTION_COLOR,
-                      }}
-                      onPress={() => {
-                        setUploadedFiles(prev => []);
-                      }}
-                    />
-                  </View>
-                ) : null
-              }
-            />
-          ))}
-        </View>
-      ) : (
-        <TextInput
-          setRef={ref => (chatInputRef.current = ref)}
-          onFocus={() => setInputActive(true)}
-          onBlur={() => setInputActive(false)}
-          value={message}
-          multiline={true}
-          onChangeText={onChangeText}
-          textAlignVertical="top"
-          scrollEnabled={true}
-          style={{
-            color: $config.FONT_COLOR,
-            textAlign: 'left',
-            width: '100%',
-            alignSelf: 'center',
-            fontFamily: ThemeConfig.FontFamily.sansPro,
-            fontWeight: '400',
-            height: inputHeight,
-            padding: 12,
-            fontSize: ThemeConfig.FontSize.small,
-            lineHeight: LINE_HEIGHT,
-            borderWidth: 1,
-            borderColor:
-              $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
-            backgroundColor: $config.CARD_LAYER_2_COLOR,
-            borderRadius: 8,
-            borderTopRightRadius: isUploadStatusShown ? 0 : 8,
-            borderTopLeftRadius: isUploadStatusShown ? 0 : 8,
-            maxHeight: MAX_HEIGHT,
-          }}
-          blurOnSubmit={false}
-          onSubmitEditing={onSubmitEditing}
-          placeholder={chatMessageInputPlaceholder}
-          placeholderTextColor={
-            $config.FONT_COLOR + hexadecimalTransparency['40%']
-          }
-          autoCorrect={false}
-          onKeyPress={handleKeyPress}
-          onContentSizeChange={handleContentSizeChange}
-        />
-      )}
-    </>
+    <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,
+        textAlign: 'left',
+        paddingVertical: 21,
+        paddingLeft: 20,
+        flex: 1,
+        alignSelf: 'center',
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        fontWeight: '400',
+      }}
+      blurOnSubmit={false}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={chatMessageInputPlaceholder}
+      placeholderTextColor={
+        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      }
+      autoCorrect={false}
+    />
   );
 };
 
@@ -291,23 +157,11 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
  * Input component for the Chat interface
  */
 export const ChatInput = () => {
-  const {inputActive, showEmojiPicker} = useChatUIControls();
-
+  const {inputActive} = useChatUIControls();
   return (
-    <View
-      style={[
-        {flex: 1},
-        showEmojiPicker
-          ? {backgroundColor: 'transparent'}
-          : {backgroundColor: $config.CARD_LAYER_1_COLOR},
-        // inputActive ? style.inputActiveView : {},
-      ]}>
-      {showEmojiPicker && <ChatEmojiPicker />}
-      <View style={style.inputView}>
-        <ChatUploadStatus />
-        <ChatTextInput />
-        <ChatPanel />
-      </View>
+    <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
+      <ChatTextInput />
+      <ChatSendButton />
     </View>
   );
 };
@@ -317,22 +171,12 @@ const style = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
-  attachmentContainer: {
-    paddingHorizontal: 12,
-    paddingTop: 12,
-    paddingBottom: 40,
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
-    borderRadius: 8,
-  },
   inputView: {
     flex: 1,
-    flexDirection: 'column',
+    flexDirection: 'row',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
     borderTopWidth: 1,
     borderTopColor: 'transparent',
-    paddingHorizontal: 12,
-    paddingBottom: 8,
   },
   chatInputButton: {
     flex: 0.1,
@@ -340,25 +184,5 @@ const style = StyleSheet.create({
     alignSelf: 'center',
     marginRight: 16,
   },
-  emojiPicker: {
-    width: '100%',
-  },
-  chatPanelContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingTop: 4,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-  },
-  chatPanel: {
-    flexDirection: 'row',
-  },
-  btnRetry: {
-    color: $config.PRIMARY_ACTION_BRAND_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: 12,
-    fontWeight: '600',
-  },
 });
 export default ChatInput;

package/template/src/subComponents/RemoteMutePopup.tsx

@@ -26,7 +26,6 @@ import {
   requestConfirmationPopoverPrimaryBtnText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../language/default-labels/commonLabels';
-import InlinePopup from '../../src/atoms/InlinePopup';
 
 export interface RemoteMutePopupProps {
   actionMenuVisible: boolean;
@@ -59,6 +58,7 @@ const RemoteMutePopup = (props: RemoteMutePopupProps) => {
     muteConfirmationPopoverContent,
   );
 
+  const {height} = useWindowDimensions();
   const {
     actionMenuVisible,
     setActionMenuVisible,
@@ -96,20 +96,139 @@ const RemoteMutePopup = (props: RemoteMutePopupProps) => {
     btnLabel = muteAllLabel;
     //message = `Mute everyone's ${props.type} on the call?`;
   }
-  const cancelTxt =
-    cancelLabel.charAt(0).toUpperCase() + cancelLabel.slice(1).toLowerCase();
 
   return (
-    <InlinePopup
-      actionMenuVisible={actionMenuVisible}
-      setActionMenuVisible={setActionMenuVisible}
-      modalPosition={modalPosition}
-      message={message}
-      cancelLabel={cancelTxt}
-      confirmLabel={btnLabel}
-      onConfirmClick={props.onMutePress}
-    />
+    <View>
+      <Modal
+        testID="action-menu"
+        animationType="none"
+        transparent={true}
+        visible={actionMenuVisible}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setActionMenuVisible(false);
+          }}>
+          <View
+            style={[
+              styles.backDrop,
+              isMobileOrTablet()
+                ? {
+                    backgroundColor:
+                      $config.HARD_CODED_BLACK_COLOR +
+                      hexadecimalTransparency['50%'],
+                  }
+                : {},
+            ]}
+          />
+        </TouchableWithoutFeedback>
+        <View
+          style={
+            isMobileOrTablet()
+              ? [styles.modalViewUA, {marginTop: height / 3}]
+              : [styles.modalView, modalPosition]
+          }>
+          <View style={styles.container}>
+            <Text style={styles.messageStyle}>{message}</Text>
+            <View style={styles.btnContainer}>
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.setActionMenuVisible(false)}>
+                      <Text style={styles.btnText}>
+                        {cancelLabel?.toLowerCase()}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+              <Spacer size={8} horizontal={true} />
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => props.onMutePress()}>
+                      <Text style={styles.btnText}>{btnLabel}</Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
   );
 };
 
 export default RemoteMutePopup;
+
+const styles = StyleSheet.create({
+  onHoverBtnStyle: {
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: 8,
+  },
+  container: {
+    paddingHorizontal: 12,
+    paddingTop: 24,
+    paddingBottom: 14,
+  },
+  messageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    paddingBottom: 18,
+  },
+  btnText: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  modalView: {
+    position: 'absolute',
+    width: 290,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  modalViewUA: {
+    alignSelf: 'center',
+    maxWidth: '80%',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/template/src/subComponents/caption/CaptionContainer.tsx

@@ -67,12 +67,8 @@ const CaptionContainer = () => {
           },
           //@ts-ignore
           isCaptionNotFullWidth && {
-            maxWidth: `calc(100% - ${SIDE_PANEL_MAX_WIDTH} - ${
-              SIDE_PANEL_GAP + 1
-            }px )`,
-            width: `calc(100% - ${SIDE_PANEL_MIN_WIDTH}px - ${
-              SIDE_PANEL_GAP + 1
-            }px )`,
+            maxWidth: `calc(100% - ${SIDE_PANEL_MAX_WIDTH} - ${SIDE_PANEL_GAP}px )`,
+            width: `calc(100% - ${SIDE_PANEL_MIN_WIDTH}px - ${SIDE_PANEL_GAP}px )`,
           },
         ]}>
         <View

package/template/src/subComponents/recording/useRecording.tsx

@@ -238,7 +238,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         url: `${recordinghostURL}/${passphrase}`,
         webpage_ready_timeout: 10,
         encryption: $config.ENCRYPTION_ENABLED,
-        mode: 'web',
       }),
     })
       .then((res: any) => {
@@ -247,7 +246,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           logger.debug(
             LogSource.NetworkRest,
             'recording_start',
-            'start recording successfully',
+            'start recording successfull',
             res,
           );
           /**
@@ -322,7 +321,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       },
       body: JSON.stringify({
         passphrase: roomId.host,
-        mode: 'web',
       }),
     })
       .then(res => {

package/template/src/utils/SdkMethodEvents.ts

@@ -11,6 +11,7 @@ export interface SdkMethodEvents {
     roomid: string | Partial<RoomInfoContextInterface['data']>,
     skipPrecall?: boolean,
     username?: string,
+    preference?: {disableShareTile: boolean},
   ): RoomInfoContextInterface['data'];
   microphoneDevice: (deviceId: deviceId) => void;
   speakerDevice: (deviceId: deviceId) => void;

package/template/src/utils/common.tsx

@@ -306,8 +306,25 @@ function hexToRgb(hex: string): [number, number, number] {
       ]
     : [0, 0, 0];
 }
+const updateToolbarDefaultConfig = (data, defaultItemsConfig) => {
+  return data?.map(i => {
+    if (
+      i?.componentName &&
+      defaultItemsConfig &&
+      defaultItemsConfig[i?.componentName]
+    ) {
+      return {
+        ...i,
+        ...defaultItemsConfig[i?.componentName],
+      };
+    } else {
+      return i;
+    }
+  });
+};
 
 export {
+  updateToolbarDefaultConfig,
   useIsDesktop,
   useIsSmall,
   BREAKPOINTS,