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

This commit is contained in:
dimitardelchev93 2021-09-10 01:46:28 +03:00 committed by GitHub
parent 0bad0d9ecf
commit db473dfef5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 62 additions and 21 deletions

View File

@ -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'

View File

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

View File

@ -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));

View File

@ -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;
}