fix: hide chat controls and show disabled notice instead (#16168)

lang/main.json

@@ -109,6 +109,7 @@
         }
     },
     "chat": {
+        "disabled": "Sending chat messages is disabled.",
         "enter": "Enter room",
         "error": "Error: your message was not sent. Reason: {{error}}",
         "fieldPlaceHolder": "Aa",

react/features/chat/components/native/ChatInputBar.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { Platform, View, ViewStyle } from 'react-native';
+import { Platform, TextStyle, View, ViewStyle } from 'react-native';
+import { Text } from 'react-native-paper';
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
@@ -92,6 +93,18 @@ class ChatInputBar extends Component<IProps, IState> {
             inputBarStyles = styles.inputBarNarrow;
         }
 
+        if (this.props._isSendGroupChatDisabled && !this.props._privateMessageRecipientId) {
+            return (
+                <View
+                    id = 'no-messages-message'
+                    style = { styles.disabledSendWrapper as ViewStyle }>
+                    <Text style = { styles.emptyComponentText as TextStyle }>
+                        { this.props.t('chat.disabled') }
+                    </Text>
+                </View>
+            );
+        }
+
         return (
             <View
                 id = 'chat-input'
@@ -112,8 +125,7 @@ class ChatInputBar extends Component<IProps, IState> {
                     returnKeyType = 'send'
                     value = { this.state.message } />
                 <IconButton
-                    disabled = { !this.state.message
-                        || (this.props._isSendGroupChatDisabled && !this.props._privateMessageRecipientId) }
+                    disabled = { !this.state.message }
                     id = { this.props.t('chat.sendButton') }
                     onPress = { this._onSubmit }
                     src = { IconSend }

react/features/chat/components/native/styles.ts

@@ -38,6 +38,11 @@ export default {
         flex: 1
     },
 
+    chatDisabled: {
+        padding: BaseTheme.spacing[2],
+        textAlign: 'center'
+    },
+
     emptyComponentText: {
         color: BaseTheme.palette.text03,
         textAlign: 'center'
@@ -115,6 +120,15 @@ export default {
         maxWidth: '80%'
     },
 
+    disabledSendWrapper: {
+        alignSelf: 'center',
+        flex: 0,
+        padding: BoxModel.padding,
+        paddingBottom: '8%',
+        paddingTop: '8%',
+        maxWidth: '80%'
+    },
+
     /**
      * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
      */

react/features/chat/components/web/ChatInput.tsx

@@ -35,6 +35,12 @@ const styles = (_theme: Theme, { _chatWidth }: IProps) => {
                 backgroundColor: '#131519',
                 borderTop: '1px solid #A4B8D1'
             }
+        },
+        chatDisabled: {
+            borderTop: `1px solid ${_theme.palette.ui02}`,
+            boxSizing: 'border-box' as const,
+            padding: _theme.spacing(4),
+            textAlign: 'center' as const,
         }
     };
 };
@@ -159,7 +165,15 @@ class ChatInput extends Component<IProps, IState> {
      */
     override render() {
         const classes = withStyles.getClasses(this.props);
+        const hideInput = this.props._isSendGroupChatDisabled && !this.props._privateMessageRecipientId;
 
+        if (hideInput) {
+            return (
+                <div className = { classes.chatDisabled }>
+                    {this.props.t('chat.disabled')}
+                </div>
+            );
+        }
 
         return (
             <div className = { `chat-input-container${this.state.message.trim().length ? ' populated' : ''}` }>
@@ -188,8 +202,7 @@ class ChatInput extends Component<IProps, IState> {
                         value = { this.state.message } />
                     <Button
                         accessibilityLabel = { this.props.t('chat.sendButton') }
-                        disabled = { !this.state.message.trim()
-                            || (this.props._isSendGroupChatDisabled && !this.props._privateMessageRecipientId) }
+                        disabled = { !this.state.message.trim() }
                         icon = { IconSend }
                         onClick = { this._onSubmitMessage }
                         size = { isMobileBrowser() ? 'large' : 'medium' } />