From 2d04f3852cc13fdf61d89d01bd4c8f46f8485b89 Mon Sep 17 00:00:00 2001 From: robertpin Date: Thu, 22 Jul 2021 13:17:42 +0300 Subject: [PATCH] fix(reactions) Moved reactions behind feature flag --- config.js | 3 + css/_reactions-menu.scss | 10 +- react/features/base/flags/constants.js | 6 + .../toolbox/components/native/OverflowMenu.js | 19 +++- .../components/native/RaiseHandButton.js | 105 ++++++++++++++++++ .../toolbox/components/native/Toolbox.js | 21 +++- .../toolbox/components/web/RaiseHandButton.js | 83 ++++++++++++++ .../toolbox/components/web/Toolbox.js | 99 +++++++++++------ 8 files changed, 298 insertions(+), 48 deletions(-) create mode 100644 react/features/toolbox/components/native/RaiseHandButton.js create mode 100644 react/features/toolbox/components/web/RaiseHandButton.js diff --git a/config.js b/config.js index 223256f6e..1cca741b1 100644 --- a/config.js +++ b/config.js @@ -70,6 +70,9 @@ var config = { // callStatsThreshold: 5 // enable callstats for 5% of the users. }, + // Enables reactions feature. + enableReactions: false, + // Disables ICE/UDP by filtering out local and remote UDP candidates in // signalling. // webrtcIceUdpDisable: false, diff --git a/css/_reactions-menu.scss b/css/_reactions-menu.scss index 2301db282..0a09a1be5 100644 --- a/css/_reactions-menu.scss +++ b/css/_reactions-menu.scss @@ -90,7 +90,7 @@ width: 20%; bottom: 0; left: 40%; - height: 48px; + height: 0; } .reactions-menu-popup-container, @@ -111,8 +111,8 @@ $reactionCount: 20; line-height: 32px; width: 32px; height: 32px; - top: 32px; - left: 10px; + top: 0; + left: 20px; opacity: 0; z-index: 1; @@ -123,8 +123,8 @@ $reactionCount: 20; @for $i from 1 through $reactionCount { &.reaction-#{$i} { animation: animation-#{$i} 5s forwards ease-in-out; - top: #{random(50, 0)}px; - left: #{random(-10, 10)}px; + top: #{random(-40, 10)}px; + left: #{random(0, 30)}px; } } } diff --git a/react/features/base/flags/constants.js b/react/features/base/flags/constants.js index 692b27d8e..58207213d 100644 --- a/react/features/base/flags/constants.js +++ b/react/features/base/flags/constants.js @@ -214,3 +214,9 @@ export const VIDEO_SHARE_BUTTON_ENABLED = 'video-share.enabled'; * Default: disabled (false). */ export const WELCOME_PAGE_ENABLED = 'welcomepage.enabled'; + +/** + * Flag indicating if the reactions feature should be enabled. + * Default: disabled (false). + */ +export const REACTIONS_ENABLED = 'reactions.enabled'; diff --git a/react/features/toolbox/components/native/OverflowMenu.js b/react/features/toolbox/components/native/OverflowMenu.js index d9f5e2986..ec4666aa5 100644 --- a/react/features/toolbox/components/native/OverflowMenu.js +++ b/react/features/toolbox/components/native/OverflowMenu.js @@ -4,6 +4,7 @@ import React, { PureComponent } from 'react'; import { ColorSchemeRegistry } from '../../../base/color-scheme'; import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog'; +import { getFeatureFlag, REACTIONS_ENABLED } from '../../../base/flags'; import { connect } from '../../../base/redux'; import { StyleType } from '../../../base/styles'; import { SharedDocumentButton } from '../../../etherpad'; @@ -22,6 +23,7 @@ import MuteEveryoneButton from '../MuteEveryoneButton'; import MuteEveryonesVideoButton from '../MuteEveryonesVideoButton'; import AudioOnlyButton from './AudioOnlyButton'; +import RaiseHandButton from './RaiseHandButton'; import ScreenSharingButton from './ScreenSharingButton.js'; import ToggleCameraButton from './ToggleCameraButton'; @@ -50,6 +52,11 @@ type Props = { */ _width: number, + /** + * Whether or not the reactions feature is enabled. + */ + _reactionsEnabled: boolean, + /** * Used for hiding the dialog when the selection was completed. */ @@ -102,7 +109,7 @@ class OverflowMenu extends PureComponent { * @returns {ReactElement} */ render() { - const { _bottomSheetStyles, _width } = this.props; + const { _bottomSheetStyles, _width, _reactionsEnabled } = this.props; const toolbarButtons = getMovableButtons(_width); const buttonProps = { @@ -128,13 +135,14 @@ class OverflowMenu extends PureComponent { return ( + renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand') + ? this._renderReactionMenu + : null }> {!toolbarButtons.has('invite') && } + {!_reactionsEnabled && !toolbarButtons.has('raisehand') && } {!toolbarButtons.has('togglecamera') && } @@ -194,7 +202,8 @@ function _mapStateToProps(state) { return { _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'), _isOpen: isDialogOpen(state, OverflowMenu_), - _width: state['features/base/responsive-ui'].clientWidth + _width: state['features/base/responsive-ui'].clientWidth, + _reactionsEnabled: getFeatureFlag(state, REACTIONS_ENABLED, false) }; } diff --git a/react/features/toolbox/components/native/RaiseHandButton.js b/react/features/toolbox/components/native/RaiseHandButton.js new file mode 100644 index 000000000..cdbf4fd43 --- /dev/null +++ b/react/features/toolbox/components/native/RaiseHandButton.js @@ -0,0 +1,105 @@ +// @flow + +import { type Dispatch } from 'redux'; + +import { + createToolbarEvent, + sendAnalytics +} from '../../../analytics'; +import { RAISE_HAND_ENABLED, getFeatureFlag } from '../../../base/flags'; +import { translate } from '../../../base/i18n'; +import { IconRaisedHand } from '../../../base/icons'; +import { + getLocalParticipant, + raiseHand +} from '../../../base/participants'; +import { connect } from '../../../base/redux'; +import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; + +/** + * The type of the React {@code Component} props of {@link RaiseHandButton}. + */ +type Props = AbstractButtonProps & { + + /** + * The local participant. + */ + _localParticipant: Object, + + /** + * Whether the participant raused their hand or not. + */ + _raisedHand: boolean, + + /** + * The redux {@code dispatch} function. + */ + dispatch: Dispatch +}; + +/** + * An implementation of a button to raise or lower hand. + */ +class RaiseHandButton extends AbstractButton { + accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand'; + icon = IconRaisedHand; + label = 'toolbar.raiseYourHand'; + toggledLabel = 'toolbar.lowerYourHand'; + + /** + * Handles clicking / pressing the button. + * + * @override + * @protected + * @returns {void} + */ + _handleClick() { + this._toggleRaisedHand(); + } + + /** + * Indicates whether this button is in toggled state or not. + * + * @override + * @protected + * @returns {boolean} + */ + _isToggled() { + return this.props._raisedHand; + } + + /** + * Toggles the rased hand status of the local participant. + * + * @returns {void} + */ + _toggleRaisedHand() { + const enable = !this.props._raisedHand; + + sendAnalytics(createToolbarEvent('raise.hand', { enable })); + + this.props.dispatch(raiseHand(enable)); + } +} + +/** + * Maps part of the Redux state to the props of this component. + * + * @param {Object} state - The Redux state. + * @param {Object} ownProps - The properties explicitly passed to the component instance. + * @private + * @returns {Props} + */ +function _mapStateToProps(state, ownProps): Object { + const _localParticipant = getLocalParticipant(state); + const enabled = getFeatureFlag(state, RAISE_HAND_ENABLED, true); + const { visible = enabled } = ownProps; + + return { + _localParticipant, + _raisedHand: _localParticipant.raisedHand, + visible + }; +} + +export default translate(connect(_mapStateToProps)(RaiseHandButton)); diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index 86d3479c8..cd391a464 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/react/features/toolbox/components/native/Toolbox.js @@ -4,6 +4,7 @@ import React from 'react'; import { SafeAreaView, View } from 'react-native'; import { ColorSchemeRegistry } from '../../../base/color-scheme'; +import { getFeatureFlag, REACTIONS_ENABLED } from '../../../base/flags'; import { connect } from '../../../base/redux'; import { StyleType } from '../../../base/styles'; import { ChatButton } from '../../../chat'; @@ -16,6 +17,7 @@ import HangupButton from '../HangupButton'; import VideoMuteButton from '../VideoMuteButton'; import OverflowMenuButton from './OverflowMenuButton'; +import RaiseHandButton from './RaiseHandButton'; import ToggleCameraButton from './ToggleCameraButton'; import styles from './styles'; @@ -39,6 +41,11 @@ type Props = { */ _width: number, + /** + * Whether or not the reactions feature is enabled. + */ + _reactionsEnabled: boolean, + /** * The redux {@code dispatch} function. */ @@ -56,7 +63,7 @@ function Toolbox(props: Props) { return null; } - const { _styles, _width } = props; + const { _styles, _width, _reactionsEnabled } = props; const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles; const additionalButtons = getMovableButtons(_width); const backgroundToggledStyle = { @@ -86,10 +93,13 @@ function Toolbox(props: Props) { styles = { buttonStylesBorderless } toggledStyles = { backgroundToggledStyle } />} - { additionalButtons.has('raisehand') - && } + toggledStyles = { backgroundToggledStyle } /> + : )} {additionalButtons.has('tileview') && } {additionalButtons.has('invite') && } {additionalButtons.has('togglecamera') @@ -119,7 +129,8 @@ function _mapStateToProps(state: Object): Object { return { _styles: ColorSchemeRegistry.get(state, 'Toolbox'), _visible: isToolboxVisible(state), - _width: state['features/base/responsive-ui'].clientWidth + _width: state['features/base/responsive-ui'].clientWidth, + _reactionsEnabled: getFeatureFlag(state, REACTIONS_ENABLED, false) }; } diff --git a/react/features/toolbox/components/web/RaiseHandButton.js b/react/features/toolbox/components/web/RaiseHandButton.js new file mode 100644 index 000000000..a12242417 --- /dev/null +++ b/react/features/toolbox/components/web/RaiseHandButton.js @@ -0,0 +1,83 @@ +// @flow + +import { translate } from '../../../base/i18n'; +import { IconRaisedHand } from '../../../base/icons'; +import { getLocalParticipant } from '../../../base/participants'; +import { connect } from '../../../base/redux'; +import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; + +type Props = AbstractButtonProps & { + + /** + * Whether or not the local participant's hand is raised. + */ + _raisedHand: boolean, + + /** + * External handler for click action. + */ + handleClick: Function +}; + +/** + * Implementation of a button for toggling raise hand functionality. + */ +class RaiseHandButton extends AbstractButton { + accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand'; + icon = IconRaisedHand + label = 'toolbar.raiseYourHand'; + toggledLabel = 'toolbar.lowerYourHand' + + /** + * Retrieves tooltip dynamically. + */ + get tooltip() { + return this.props._raisedHand ? 'toolbar.lowerYourHand' : 'toolbar.raiseYourHand'; + } + + /** + * Required by linter due to AbstractButton overwritten prop being writable. + * + * @param {string} value - The value. + */ + set tooltip(value) { + return value; + } + + /** + * Handles clicking / pressing the button, and opens the appropriate dialog. + * + * @protected + * @returns {void} + */ + _handleClick() { + this.props.handleClick(); + } + + /** + * Indicates whether this button is in toggled state or not. + * + * @override + * @protected + * @returns {boolean} + */ + _isToggled() { + return this.props._raisedHand; + } +} + +/** + * Function that maps parts of Redux state tree into component props. + * + * @param {Object} state - Redux state. + * @returns {Object} + */ +const mapStateToProps = state => { + const localParticipant = getLocalParticipant(state); + + return { + _raisedHand: localParticipant.raisedHand + }; +}; + +export default translate(connect(mapStateToProps)(RaiseHandButton)); diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index 7f61d6ccd..a82fa7e84 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/react/features/toolbox/components/web/Toolbox.js @@ -85,6 +85,7 @@ import AudioSettingsButton from './AudioSettingsButton'; import FullscreenButton from './FullscreenButton'; import OverflowMenuButton from './OverflowMenuButton'; import ProfileButton from './ProfileButton'; +import RaiseHandButton from './RaiseHandButton'; import Separator from './Separator'; import ShareDesktopButton from './ShareDesktopButton'; import VideoSettingsButton from './VideoSettingsButton'; @@ -213,7 +214,12 @@ type Props = { /** * Returns the selected virtual source object. */ - _virtualSource: Object, + _virtualSource: Object, + + /** + * Whether or not reactions feature is enabled. + */ + _reactionsEnabled: boolean, /** * Invoked to active other features of the app. @@ -259,6 +265,7 @@ class Toolbox extends Component { this._onToolbarOpenVideoQuality = this._onToolbarOpenVideoQuality.bind(this); this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this); this._onToolbarToggleFullScreen = this._onToolbarToggleFullScreen.bind(this); + this._onToolbarToggleRaiseHand = this._onToolbarToggleRaiseHand.bind(this); this._onToolbarToggleScreenshare = this._onToolbarToggleScreenshare.bind(this); this._onShortcutToggleTileView = this._onShortcutToggleTileView.bind(this); this._onEscKey = this._onEscKey.bind(this); @@ -271,7 +278,7 @@ class Toolbox extends Component { * @returns {void} */ componentDidMount() { - const { _toolbarButtons, t, dispatch } = this.props; + const { _toolbarButtons, t, dispatch, _reactionsEnabled } = this.props; const KEYBOARD_SHORTCUTS = [ isToolbarButtonEnabled('videoquality', _toolbarButtons) && { character: 'A', @@ -320,30 +327,32 @@ class Toolbox extends Component { } }); - const REACTION_SHORTCUTS = Object.keys(REACTIONS).map(key => { - const onShortcutSendReaction = () => { - dispatch(addReactionToBuffer(key)); - sendAnalytics(createShortcutEvent( - `reaction.${key}` - )); - }; + if (_reactionsEnabled) { + const REACTION_SHORTCUTS = Object.keys(REACTIONS).map(key => { + const onShortcutSendReaction = () => { + dispatch(addReactionToBuffer(key)); + sendAnalytics(createShortcutEvent( + `reaction.${key}` + )); + }; - return { - character: REACTIONS[key].shortcutChar, - exec: onShortcutSendReaction, - helpDescription: t(`toolbar.reaction${key.charAt(0).toUpperCase()}${key.slice(1)}`), - altKey: true - }; - }); + return { + character: REACTIONS[key].shortcutChar, + exec: onShortcutSendReaction, + helpDescription: t(`toolbar.reaction${key.charAt(0).toUpperCase()}${key.slice(1)}`), + altKey: true + }; + }); - REACTION_SHORTCUTS.forEach(shortcut => { - APP.keyboardshortcut.registerShortcut( - shortcut.character, - null, - shortcut.exec, - shortcut.helpDescription, - shortcut.altKey); - }); + REACTION_SHORTCUTS.forEach(shortcut => { + APP.keyboardshortcut.registerShortcut( + shortcut.character, + null, + shortcut.exec, + shortcut.helpDescription, + shortcut.altKey); + }); + } } /** @@ -375,9 +384,11 @@ class Toolbox extends Component { [ 'A', 'C', 'D', 'R', 'S' ].forEach(letter => APP.keyboardshortcut.unregisterShortcut(letter)); - Object.keys(REACTIONS).map(key => REACTIONS[key].shortcutChar) - .forEach(letter => - APP.keyboardshortcut.unregisterShortcut(letter, true)); + if (this.props._reactionsEnabled) { + Object.keys(REACTIONS).map(key => REACTIONS[key].shortcutChar) + .forEach(letter => + APP.keyboardshortcut.unregisterShortcut(letter, true)); + } } /** @@ -541,7 +552,8 @@ class Toolbox extends Component { const { _feedbackConfigured, _isMobile, - _screenSharing + _screenSharing, + _reactionsEnabled } = this.props; const microphone = { @@ -578,7 +590,8 @@ class Toolbox extends Component { const raisehand = { key: 'raisehand', - Content: ReactionsMenuButton, + Content: _reactionsEnabled ? ReactionsMenuButton : RaiseHandButton, + handleClick: _reactionsEnabled ? null : this._onToolbarToggleRaiseHand, group: 2 }; @@ -1054,6 +1067,23 @@ class Toolbox extends Component { this._doToggleFullScreen(); } + _onToolbarToggleRaiseHand: () => void; + + /** + * Creates an analytics toolbar event and dispatches an action for toggling + * raise hand. + * + * @private + * @returns {void} + */ + _onToolbarToggleRaiseHand() { + sendAnalytics(createToolbarEvent( + 'raise.hand', + { enable: !this.props._raisedHand })); + + this._doToggleRaiseHand(); + } + _onToolbarToggleScreenshare: () => void; /** @@ -1131,7 +1161,8 @@ class Toolbox extends Component { _isMobile, _overflowMenuVisible, _toolbarButtons, - t + t, + _reactionsEnabled } = this.props; const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu'; @@ -1160,7 +1191,7 @@ class Toolbox extends Component { key = 'overflow-menu' onVisibilityChange = { this._onSetOverflowVisible } showMobileReactions = { - overflowMenuButtons.find(({ key }) => key === 'raisehand') + _reactionsEnabled && overflowMenuButtons.find(({ key }) => key === 'raisehand') }>
    { {overflowMenuButtons.map(({ group, key, Content, ...rest }, index, arr) => { const showSeparator = index > 0 && arr[index - 1].group !== group; - return key !== 'raisehand' + return (key !== 'raisehand' || !_reactionsEnabled) && <> {showSeparator && }