feat(chat): set limit for linkifying and replacing non unicode emoji …

…messages
jitsi · Aug 7, 2024 · 5f8f3c4 · 5f8f3c4
1 parent b1c0cc5
commit 5f8f3c4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/react/features/chat/components/native/ChatMessage.tsx b/react/features/chat/components/native/ChatMessage.tsx
@@ -7,7 +7,7 @@ import Avatar from '../../../base/avatar/components/Avatar';
 import { translate } from '../../../base/i18n/functions';
 import Linkify from '../../../base/react/components/native/Linkify';
 import { isGifMessage } from '../../../gifs/functions.native';
-import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
+import { CHAR_LIMIT, MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import {
     getCanReplyToMessage,
     getFormattedTimestamp,
@@ -73,7 +73,7 @@ class ChatMessage extends Component<IChatMessageProps> {
             messageBubbleStyle.push(styles.lobbyMessageBubble);
         }
 
-        const messageText = replaceNonUnicodeEmojis(getMessageText(this.props.message));
+        const messageText = getMessageText(this.props.message);
 
         return (
             <View style = { styles.messageWrapper as ViewStyle } >
@@ -84,13 +84,7 @@ class ChatMessage extends Component<IChatMessageProps> {
                             { this._renderDisplayName() }
                             { isGifMessage(messageText)
                                 ? <GifMessage message = { messageText } />
-                                : (
-                                    <Linkify
-                                        linkStyle = { styles.chatLink }
-                                        style = { styles.chatMessage }>
-                                        { messageText }
-                                    </Linkify>
-                                )}
+                                : this._renderMessageTextComponent(messageText) }
                             { this._renderPrivateNotice() }
                         </View>
                         { this._renderPrivateReplyButton() }
@@ -104,7 +98,7 @@ class ChatMessage extends Component<IChatMessageProps> {
     /**
      * Renders the avatar of the sender.
      *
-     * @returns {React$Element<*>}
+     * @returns {React.ReactElement<*>}
      */
     _renderAvatar() {
         const { message } = this.props;
@@ -123,7 +117,7 @@ class ChatMessage extends Component<IChatMessageProps> {
     /**
      * Renders the display name of the sender if necessary.
      *
-     * @returns {React$Element<*> | null}
+     * @returns {React.ReactElement<*> | null}
      */
     _renderDisplayName() {
         const { message, showDisplayName } = this.props;
@@ -139,10 +133,36 @@ class ChatMessage extends Component<IChatMessageProps> {
         );
     }
 
+    /**
+     * Renders the message text based on number of characters.
+     *
+     * @param {string} messageText - The message text.
+     * @returns {React.ReactElement<*>}
+     */
+    _renderMessageTextComponent(messageText: string) {
+
+        if (messageText.length >= CHAR_LIMIT) {
+            return (
+                <Text
+                    style = { styles.chatMessage }>
+                    { messageText }
+                </Text>
+            );
+        }
+
+        return (
+            <Linkify
+                linkStyle = { styles.chatLink }
+                style = { styles.chatMessage }>
+                { replaceNonUnicodeEmojis(messageText) }
+            </Linkify>
+        );
+    }
+
     /**
      * Renders the message privacy notice, if necessary.
      *
-     * @returns {React$Element<*> | null}
+     * @returns {React.ReactElement<*> | null}
      */
     _renderPrivateNotice() {
         const { message, knocking } = this.props;
@@ -161,7 +181,7 @@ class ChatMessage extends Component<IChatMessageProps> {
     /**
      * Renders the private reply button, if necessary.
      *
-     * @returns {React$Element<*> | null}
+     * @returns {React.ReactElement<*> | null}
      */
     _renderPrivateReplyButton() {
         const { message, canReply } = this.props;
@@ -186,7 +206,7 @@ class ChatMessage extends Component<IChatMessageProps> {
     /**
      * Renders the time at which the message was sent, if necessary.
      *
-     * @returns {React$Element<*> | null}
+     * @returns {React.ReactElement<*> | null}
      */
     _renderTimestamp() {
         if (!this.props.showTimestamp) {
@@ -205,6 +225,7 @@ class ChatMessage extends Component<IChatMessageProps> {
  * Maps part of the redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
+ * @param {IChatMessageProps} message - Message object.
  * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState, { message }: IChatMessageProps) {

diff --git a/react/features/chat/constants.ts b/react/features/chat/constants.ts
@@ -48,3 +48,5 @@ export const TIMESTAMP_FORMAT = 'H:mm';
  * The namespace for system messages.
  */
 export const MESSAGE_TYPE_SYSTEM = 'system_chat_message';
+
+export const CHAR_LIMIT = 500;
diff --git a/react/features/notifications/components/native/Notification.tsx b/react/features/notifications/components/native/Notification.tsx
@@ -20,6 +20,7 @@ import { INotificationProps } from '../../types';
 import { NotificationsTransitionContext } from '../NotificationsTransition';
 
 import styles from './styles';
+import {CHAR_LIMIT} from "../../../chat/constants";
 
 
 /**
@@ -163,7 +164,7 @@ const Notification = ({
                                 key = { index }
                                 numberOfLines = { 3 }
                                 style = { styles.contentText }>
-                                { replaceNonUnicodeEmojis(line) }
+                                { line.length >= CHAR_LIMIT ? line : replaceNonUnicodeEmojis(line) }
                             </Text>
                         ))
                     }