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,6 +122,7 @@ class ChatInput extends Component<Props, State> {
         return (
             <div className = { `chat-input-container${this.state.message.trim().length ? ' populated' : ''}` }>
                 <div id = 'chat-input' >
+                    { this.props._areSmileysDisabled ? null : (
                         <div className = 'smiley-input'>
                             <div id = 'smileysarea'>
                                 <div id = 'smileys'>
@@ -132,11 +140,13 @@ class ChatInput extends Component<Props, State> {
                                     </div>
                                 </div>
                             </div>
-                        <div className = { smileysPanelClassName }>
+                            <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;
+}