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

… messages (#14979) * feat(chat): set limit for linkifying and replacing non unicode emoji messages
jitsi · Aug 7, 2024 · 7641dda · 7641dda
1 parent 26021b2
commit 7641dda
Show file tree

Hide file tree

Showing 3 changed files with 43 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,37 @@ 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
+                    selectable = { true }
+                    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 +182,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 +207,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 +226,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
@@ -1,3 +1,8 @@
+/**
+ * Maximum number of characters allowed.
+ */
+export const CHAR_LIMIT = 500;
+
 /**
  * The size of the chat. Equal to $sidebarWidth SCSS variable.
  */

diff --git a/react/features/notifications/components/native/Notification.tsx b/react/features/notifications/components/native/Notification.tsx
@@ -14,6 +14,7 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import Button from '../../../base/ui/components/native/Button';
 import IconButton from '../../../base/ui/components/native/IconButton';
 import { BUTTON_MODES, BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { CHAR_LIMIT } from '../../../chat/constants';
 import { replaceNonUnicodeEmojis } from '../../../chat/functions';
 import { NOTIFICATION_ICON, NOTIFICATION_TYPE } from '../../constants';
 import { INotificationProps } from '../../types';
@@ -163,7 +164,7 @@ const Notification = ({
                                 key = { index }
                                 numberOfLines = { 3 }
                                 style = { styles.contentText }>
-                                { replaceNonUnicodeEmojis(line) }
+                                { line.length >= CHAR_LIMIT ? line : replaceNonUnicodeEmojis(line) }
                             </Text>
                         ))
                     }