feat(visitors): Hide reactions.

react/features/reactions/components/web/RaiseHandContainerButtons.tsx

@@ -4,17 +4,17 @@ import { useSelector } from 'react-redux';
 import { IReduxState } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
-import { isReactionsButtonEnabled, isReactionsEnabled } from '../../functions.web';
+import { isReactionsButtonEnabled, shouldDisplayReactionsButtons } from '../../functions.web';
 
 import RaiseHandButton from './RaiseHandButton';
 import ReactionsMenuButton from './ReactionsMenuButton';
 
 const RaiseHandContainerButton = (props: AbstractButtonProps) => {
     const reactionsButtonEnabled = useSelector(isReactionsButtonEnabled);
-    const reactionsEnabled = useSelector(isReactionsEnabled);
+    const _shouldDisplayReactionsButtons = useSelector(shouldDisplayReactionsButtons);
     const isNarrowLayout = useSelector((state: IReduxState) => state['features/base/responsive-ui'].isNarrowLayout);
     const showReactionsAsPartOfRaiseHand
-        = !reactionsButtonEnabled && reactionsEnabled && !isNarrowLayout && !isMobileBrowser();
+        = _shouldDisplayReactionsButtons && !reactionsButtonEnabled && !isNarrowLayout && !isMobileBrowser();
 
     return showReactionsAsPartOfRaiseHand
         ? <ReactionsMenuButton

react/features/reactions/components/web/ReactionsMenuButton.tsx

@@ -10,7 +10,7 @@ import AbstractButton, { type IProps as AbstractButtonProps } from '../../../bas
 import ToolboxButtonWithPopup from '../../../base/toolbox/components/web/ToolboxButtonWithPopup';
 import { toggleReactionsMenuVisibility } from '../../actions.web';
 import { IReactionEmojiProps } from '../../constants';
-import { getReactionsQueue, isReactionsEnabled } from '../../functions.any';
+import { getReactionsQueue } from '../../functions.any';
 import { getReactionsMenuVisibility, isReactionsButtonEnabled } from '../../functions.web';
 import { IReactionsMenuParent } from '../../types';
 
@@ -30,11 +30,6 @@ interface IProps extends WithTranslation {
      */
     _reactionsButtonEnabled: boolean;
 
-    /**
-     * Whether or not the reactions are enabled.
-     */
-    _reactionsEnabled: boolean;
-
     /**
      * The button's key.
      */
@@ -93,7 +88,6 @@ const ReactionsButton = translate(connect()(ReactionsButtonImpl));
  */
 function ReactionsMenuButton({
     _reactionsButtonEnabled,
-    _reactionsEnabled,
     _isMobile,
     buttonKey,
     dispatch,
@@ -116,7 +110,7 @@ function ReactionsMenuButton({
         isOpen && toggleReactionsMenu();
     }, [ isOpen, toggleReactionsMenu ]);
 
-    if (!showRaiseHand && (!_reactionsButtonEnabled || !_reactionsEnabled)) {
+    if (!showRaiseHand && !_reactionsButtonEnabled) {
         return null;
     }
 
@@ -184,7 +178,6 @@ function mapStateToProps(state: IReduxState) {
 
     return {
         _reactionsButtonEnabled: isReactionsButtonEnabled(state),
-        _reactionsEnabled: isReactionsEnabled(state),
         _isMobile: isMobileBrowser(),
         isOpen: getReactionsMenuVisibility(state),
         isNarrow: isNarrowLayout,

react/features/reactions/functions.any.ts

@@ -5,6 +5,7 @@ import { REACTIONS_ENABLED } from '../base/flags/constants';
 import { getFeatureFlag } from '../base/flags/functions';
 import { getLocalParticipant } from '../base/participants/functions';
 import { extractFqnFromPath } from '../dynamic-branding/functions.any';
+import { iAmVisitor } from '../visitors/functions';
 
 import { IReactionEmojiProps, REACTIONS, ReactionThreshold, SOUNDS_THRESHOLDS } from './constants';
 import logger from './logger';
@@ -161,3 +162,13 @@ export function isReactionsEnabled(state: IReduxState): boolean {
 
     return !disableReactions;
 }
+
+/**
+ * Returns true if the reactions buttons should be displayed anywhere on the page and false otherwise.
+ *
+ * @param {IReduxState} state - The redux state.
+ * @returns {boolean}
+ */
+export function shouldDisplayReactionsButtons(state: IReduxState): boolean {
+    return isReactionsEnabled(state) && !iAmVisitor(state);
+}

react/features/reactions/functions.web.ts

@@ -1,7 +1,7 @@
 import { IReduxState } from '../app/types';
 import { getToolbarButtons } from '../base/config/functions.web';
 
-import { isReactionsEnabled } from './functions.any';
+import { shouldDisplayReactionsButtons } from './functions.any';
 
 export * from './functions.any';
 
@@ -22,5 +22,5 @@ export function getReactionsMenuVisibility(state: IReduxState): boolean {
  * @returns {boolean}
  */
 export function isReactionsButtonEnabled(state: IReduxState) {
-    return Boolean(getToolbarButtons(state).includes('reactions')) && isReactionsEnabled(state);
+    return Boolean(getToolbarButtons(state).includes('reactions')) && shouldDisplayReactionsButtons(state);
 }

react/features/settings/functions.any.ts

@@ -208,6 +208,7 @@ export function getNotificationsTabProps(stateful: IStateful, showSoundsSettings
         soundsTalkWhileMuted,
         soundsReactions
     } = state['features/base/settings'];
+
     const enableReactions = isReactionsEnabled(state);
     const moderatorMutedSoundsReactions = state['features/base/conference'].startReactionsMuted ?? false;
     const enabledNotifications = getNotificationsMap(stateful);

react/features/toolbox/components/native/OverflowMenu.tsx

@@ -12,7 +12,7 @@ import BreakoutRoomsButton
     from '../../../breakout-rooms/components/native/BreakoutRoomsButton';
 import SharedDocumentButton from '../../../etherpad/components/SharedDocumentButton.native';
 import ReactionMenu from '../../../reactions/components/native/ReactionMenu';
-import { isReactionsEnabled } from '../../../reactions/functions.any';
+import { shouldDisplayReactionsButtons } from '../../../reactions/functions.any';
 import LiveStreamButton from '../../../recording/components/LiveStream/native/LiveStreamButton';
 import RecordButton from '../../../recording/components/Recording/native/RecordButton';
 import SecurityDialogButton
@@ -52,15 +52,15 @@ interface IProps {
      */
     _isSpeakerStatsDisabled?: boolean;
 
-    /**
-     * Whether or not the reactions feature is enabled.
-     */
-    _reactionsEnabled: boolean;
-
     /**
      * Whether the recoding button should be enabled or not.
-     */
-    _recordingEnabled: boolean;
+    */
+   _recordingEnabled: boolean;
+
+   /**
+    * Whether or not any reactions buttons should be displayed.
+    */
+   _shouldDisplayReactionsButtons: boolean;
 
     /**
      * The width of the screen.
@@ -113,7 +113,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
         const {
             _isBreakoutRoomsSupported,
             _isSpeakerStatsDisabled,
-            _reactionsEnabled,
+            _shouldDisplayReactionsButtons,
             _width,
             dispatch
         } = this.props;
@@ -141,12 +141,15 @@ class OverflowMenu extends PureComponent<IProps, IState> {
 
         return (
             <BottomSheet
-                renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand')
+                renderFooter = { _shouldDisplayReactionsButtons && !toolbarButtons.has('raisehand')
                     ? this._renderReactionMenu
                     : undefined }>
                 <OpenCarmodeButton { ...topButtonProps } />
                 <AudioOnlyButton { ...buttonProps } />
-                {!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
+                {
+                    !_shouldDisplayReactionsButtons && !toolbarButtons.has('raisehand')
+                        && <RaiseHandButton { ...buttonProps } />
+                }
                 {/* @ts-ignore */}
                 <Divider style = { styles.divider as ViewStyle } />
                 <SecurityDialogButton { ...buttonProps } />
@@ -206,7 +209,7 @@ function _mapStateToProps(state: IReduxState) {
     return {
         _isBreakoutRoomsSupported: conference?.getBreakoutRooms()?.isSupported(),
         _isSpeakerStatsDisabled: isSpeakerStatsDisabled(state),
-        _reactionsEnabled: isReactionsEnabled(state),
+        _shouldDisplayReactionsButtons: shouldDisplayReactionsButtons(state),
         _width: state['features/base/responsive-ui'].clientWidth
     };
 }

react/features/toolbox/components/native/Toolbox.tsx

@@ -8,7 +8,7 @@ import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry'
 import Platform from '../../../base/react/Platform.native';
 import ChatButton from '../../../chat/components/native/ChatButton';
 import ReactionsMenuButton from '../../../reactions/components/native/ReactionsMenuButton';
-import { isReactionsEnabled } from '../../../reactions/functions.any';
+import { shouldDisplayReactionsButtons } from '../../../reactions/functions.any';
 import TileViewButton from '../../../video-layout/components/TileViewButton';
 import { iAmVisitor } from '../../../visitors/functions';
 import { getMovableButtons, isToolboxVisible } from '../../functions.native';
@@ -38,9 +38,9 @@ interface IProps {
     _iAmVisitor: boolean;
 
     /**
-     * Whether or not the reactions feature is enabled.
+     * Whether or not any reactions buttons should be visible.
      */
-    _reactionsEnabled: boolean;
+    _shouldDisplayReactionsButtons: boolean;
 
     /**
      * The color-schemed stylesheet of the feature.
@@ -65,7 +65,7 @@ interface IProps {
  * @returns {React$Element}.
  */
 function Toolbox(props: IProps) {
-    const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _iAmVisitor, _width } = props;
+    const { _endConferenceSupported, _shouldDisplayReactionsButtons, _styles, _visible, _iAmVisitor, _width } = props;
 
     if (!_visible) {
         return null;
@@ -114,7 +114,7 @@ function Toolbox(props: IProps) {
                 }
                 {!_iAmVisitor && additionalButtons.has('screensharing')
                     && <ScreenSharingButton styles = { buttonStylesBorderless } />}
-                {additionalButtons.has('raisehand') && (_reactionsEnabled && !_iAmVisitor
+                {additionalButtons.has('raisehand') && (_shouldDisplayReactionsButtons
                     ? <ReactionsMenuButton
                         styles = { buttonStylesBorderless }
                         toggledStyles = { backgroundToggledStyle } />
@@ -155,7 +155,7 @@ function _mapStateToProps(state: IReduxState) {
         _visible: isToolboxVisible(state),
         _iAmVisitor: iAmVisitor(state),
         _width: state['features/base/responsive-ui'].clientWidth,
-        _reactionsEnabled: isReactionsEnabled(state)
+        _shouldDisplayReactionsButtons: shouldDisplayReactionsButtons(state)
     };
 }
 

react/features/toolbox/components/web/Toolbox.tsx

@@ -16,7 +16,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import ContextMenu from '../../../base/ui/components/web/ContextMenu';
-import { isReactionsButtonEnabled, isReactionsEnabled } from '../../../reactions/functions.web';
+import { isReactionsButtonEnabled, shouldDisplayReactionsButtons } from '../../../reactions/functions.web';
 import { iAmVisitor } from '../../../visitors/functions';
 import {
     setHangupMenuVisible,
@@ -116,14 +116,14 @@ interface IProps extends WithTranslation {
     _reactionsButtonEnabled: boolean;
 
     /**
-     * Whether or not reactions feature is enabled.
+     * Whether the toolbox should be shifted up or not.
      */
-    _reactionsEnabled: boolean;
+    _shiftUp: boolean;
 
     /**
-     * Whether the toolbox should be shifted up or not.
+     * Whether any reactions buttons should be displayed or not.
      */
-    _shiftUp: boolean;
+    _shouldDisplayReactionsButtons: boolean;
 
     /**
      * The enabled buttons.
@@ -185,8 +185,8 @@ const Toolbox = ({
     _overflowDrawer,
     _overflowMenuVisible,
     _reactionsButtonEnabled,
-    _reactionsEnabled,
     _shiftUp,
+    _shouldDisplayReactionsButtons,
     _toolbarButtons,
     _visible,
     dispatch,
@@ -362,10 +362,11 @@ const Toolbox = ({
 
         const { mainMenuButtons, overflowMenuButtons } = getVisibleButtons();
         const raiseHandInOverflowMenu = overflowMenuButtons.some(({ key }) => key === 'raisehand');
-        const showReactionsInOverflowMenu
-            = (_reactionsEnabled && !_reactionsButtonEnabled
-                && (raiseHandInOverflowMenu || _isNarrowLayout || _isMobile))
-            || overflowMenuButtons.some(({ key }) => key === 'reactions');
+        const showReactionsInOverflowMenu = _shouldDisplayReactionsButtons
+            && (
+                (!_reactionsButtonEnabled && (raiseHandInOverflowMenu || _isNarrowLayout || _isMobile))
+                    || overflowMenuButtons.some(({ key }) => key === 'reactions')
+            );
         const showRaiseHandInReactionsMenu = showReactionsInOverflowMenu && raiseHandInOverflowMenu;
 
         return (
@@ -502,7 +503,6 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     } = state['features/toolbox'];
     const { clientWidth } = state['features/base/responsive-ui'];
     let toolbarButtons = ownProps.toolbarButtons || getToolbarButtons(state);
-    const _reactionsEnabled = isReactionsEnabled(state);
 
     if (iAmVisitor(state)) {
         toolbarButtons = VISITORS_MODE_BUTTONS.filter(e => toolbarButtons.indexOf(e) > -1);
@@ -523,8 +523,8 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         _overflowMenuVisible: overflowMenuVisible,
         _overflowDrawer: overflowDrawer,
         _reactionsButtonEnabled: isReactionsButtonEnabled(state),
-        _reactionsEnabled,
         _shiftUp: state['features/toolbox'].shiftUp,
+        _shouldDisplayReactionsButtons: shouldDisplayReactionsButtons(state),
         _toolbarButtons: toolbarButtons,
         _visible: isToolboxVisible(state)
     };

react/features/toolbox/hooks.web.ts

@@ -21,7 +21,7 @@ import { getParticipantsPaneOpen } from '../participants-pane/functions';
 import { addReactionToBuffer } from '../reactions/actions.any';
 import { toggleReactionsMenuVisibility } from '../reactions/actions.web';
 import { REACTIONS } from '../reactions/constants';
-import { isReactionsEnabled } from '../reactions/functions.any';
+import { shouldDisplayReactionsButtons } from '../reactions/functions.any';
 import { startScreenShareFlow } from '../screen-share/actions.web';
 import { isScreenVideoShared } from '../screen-share/functions';
 import SpeakerStats from '../speaker-stats/components/web/SpeakerStats';
@@ -36,6 +36,7 @@ import { isDesktopShareButtonDisabled } from './functions.web';
 export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
     const dispatch = useDispatch();
     const _isSpeakerStatsDisabled = useSelector(isSpeakerStatsDisabled);
+    const _shouldDisplayReactionsButtons = useSelector(shouldDisplayReactionsButtons);
     const _toolbarButtons = useSelector((state: IReduxState) => toolbarButtons || getToolbarButtons(state));
     const chatOpen = useSelector((state: IReduxState) => state['features/chat'].isOpen);
     const desktopSharingButtonDisabled = useSelector(isDesktopShareButtonDisabled);
@@ -44,7 +45,6 @@ export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
     const gifsEnabled = useSelector(isGifEnabled);
     const participantsPaneOpen = useSelector(getParticipantsPaneOpen);
     const raisedHand = useSelector((state: IReduxState) => hasRaisedHand(getLocalParticipant(state)));
-    const reactionsEnabled = useSelector(isReactionsEnabled);
     const screenSharing = useSelector(isScreenVideoShared);
     const tileViewEnabled = useSelector(shouldDisplayTileView);
 
@@ -253,7 +253,8 @@ export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
             }
         });
 
-        if (reactionsEnabled) {
+        // If the buttons for sending reactions are not displayed we should disable the shortcuts too.
+        if (_shouldDisplayReactionsButtons) {
             const REACTION_SHORTCUTS = Object.keys(REACTIONS).map(key => {
                 const onShortcutSendReaction = () => {
                     dispatch(addReactionToBuffer(key));
@@ -299,13 +300,14 @@ export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
             [ 'A', 'C', 'D', 'P', 'R', 'S', 'W', 'T', 'G' ].forEach(letter =>
                 dispatch(unregisterShortcut(letter)));
 
-            if (reactionsEnabled) {
+            if (_shouldDisplayReactionsButtons) {
                 Object.keys(REACTIONS).map(key => REACTIONS[key].shortcutChar)
                     .forEach(letter =>
                         dispatch(unregisterShortcut(letter, true)));
             }
         };
     }, [
+        _shouldDisplayReactionsButtons,
         chatOpen,
         desktopSharingButtonDisabled,
         desktopSharingEnabled,

resources/prosody-plugins/mod_measure_message_count.lua

@@ -158,7 +158,7 @@ module:hook("muc-occupant-left", function(event)
     local occupant, room = event.occupant, event.room;
     local session = event.origin;
 
-    if session.jitsi_meet_tenant_mismatch then
+    if session and session.jitsi_meet_tenant_mismatch then
         room.jitsi_meet_tenant_mismatch = true;
     end
 end);