feat: Add configuration to disable chat emoticons #9889 (#9899)

config.js

@@ -1017,6 +1017,9 @@ var config = {
     // Prevent the filmstrip from autohiding when screen width is under a certain threshold
     // disableFilmstripAutohiding: false,
 
+    // Specifies whether the chat emoticons are disabled or not
+    // disableChatSmileys: false,
+
     // Allow all above example options to include a trailing comma and
     // prevent fear when commenting out the last value.
     makeJsonParserHappy: 'even if last key had a trailing comma'

react/features/base/config/configWhitelist.js

@@ -83,6 +83,7 @@ export default [
     'disableAGC',
     'disableAP',
     'disableAudioLevels',
+    'disableChatSmileys',
     'disableDeepLinking',
     'disabledSounds',
     'disableFilmstripAutohiding',

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

@@ -8,6 +8,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
 import { Icon, IconPlane, IconSmile } from '../../../base/icons';
 import { connect } from '../../../base/redux';
+import { areSmileysDisabled } from '../../functions';
 
 import SmileysPanel from './SmileysPanel';
 
@@ -35,7 +36,13 @@ type Props = {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * Whether chat emoticons are disabled.
+     */
+    _areSmileysDisabled: boolean
+
 };
 
 /**
@@ -115,28 +122,31 @@ class ChatInput extends Component<Props, State> {
         return (
             <div className = { `chat-input-container${this.state.message.trim().length ? ' populated' : ''}` }>
                 <div id = 'chat-input' >
-                    <div className = 'smiley-input'>
-                        <div id = 'smileysarea'>
-                            <div id = 'smileys'>
-                                <div
-                                    aria-expanded = { this.state.showSmileysPanel }
-                                    aria-haspopup = 'smileysContainer'
-                                    aria-label = { this.props.t('chat.smileysPanel') }
-                                    className = 'smiley-button'
-                                    onClick = { this._onToggleSmileysPanel }
-                                    onKeyDown = { this._onEscHandler }
-                                    onKeyPress = { this._onToggleSmileysPanelKeyPress }
-                                    role = 'button'
-                                    tabIndex = { 0 }>
-                                    <Icon src = { IconSmile } />
+                    { this.props._areSmileysDisabled ? null : (
+                        <div className = 'smiley-input'>
+                            <div id = 'smileysarea'>
+                                <div id = 'smileys'>
+                                    <div
+                                        aria-expanded = { this.state.showSmileysPanel }
+                                        aria-haspopup = 'smileysContainer'
+                                        aria-label = { this.props.t('chat.smileysPanel') }
+                                        className = 'smiley-button'
+                                        onClick = { this._onToggleSmileysPanel }
+                                        onKeyDown = { this._onEscHandler }
+                                        onKeyPress = { this._onToggleSmileysPanelKeyPress }
+                                        role = 'button'
+                                        tabIndex = { 0 }>
+                                        <Icon src = { IconSmile } />
+                                    </div>
                                 </div>
                             </div>
+                            <div
+                                className = { smileysPanelClassName } >
+                                <SmileysPanel
+                                    onSmileySelect = { this._onSmileySelect } />
+                            </div>
                         </div>
-                        <div className = { smileysPanelClassName }>
-                            <SmileysPanel
-                                onSmileySelect = { this._onSmileySelect } />
-                        </div>
-                    </div>
+                    ) }
                     <div className = 'usrmsg-form'>
                         <TextareaAutosize
                             autoComplete = 'off'
@@ -336,4 +346,19 @@ class ChatInput extends Component<Props, State> {
     }
 }
 
-export default translate(connect()(ChatInput));
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @private
+ * @returns {{
+ *     _areSmileysDisabled: boolean
+ * }}
+ */
+const mapStateToProps = state => {
+    return {
+        _areSmileysDisabled: areSmileysDisabled(state)
+    };
+};
+
+export default translate(connect(mapStateToProps)(ChatInput));

react/features/chat/functions.js

@@ -90,3 +90,15 @@ export function getUnreadMessagesCount(state: Object) {
 
     return nbUnreadMessages;
 }
+
+/**
+ * Get whether the chat smileys are disabled or not.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean} The disabled flag.
+ */
+export function areSmileysDisabled(state: Object) {
+    const disableChatSmileys = state['features/base/config']?.disableChatSmileys === true;
+
+    return disableChatSmileys;
+}