only display reactions bar toggle if reactions are enabled

bigbluebutton-html5/imports/ui/components/settings/component.jsx

@@ -94,6 +94,7 @@ const propTypes = {
   updateSettings: PropTypes.func.isRequired,
   availableLocales: PropTypes.objectOf(PropTypes.array).isRequired,
   showToggleLabel: PropTypes.bool.isRequired,
+  isReactionsEnabled: PropTypes.bool.isRequired,
 };
 
 class Settings extends Component {
@@ -173,6 +174,7 @@ class Settings extends Component {
       selectedLayout,
       isScreenSharingEnabled,
       isVideoEnabled,
+      isReactionsEnabled,
     } = this.props;
 
     const {
@@ -225,6 +227,7 @@ class Settings extends Component {
             layoutContextDispatch={layoutContextDispatch}
             selectedLayout={selectedLayout}
             isPresenter={isPresenter}
+            isReactionsEnabled={isReactionsEnabled}
           />
         </Styled.SettingsTabPanel>
         <Styled.SettingsTabPanel selectedClassName="is-selected">

bigbluebutton-html5/imports/ui/components/settings/container.jsx

@@ -4,6 +4,7 @@ import SettingsService from '/imports/ui/services/settings';
 import Settings from './component';
 import { layoutDispatch } from '../layout/context';
 import { isScreenSharingEnabled } from '/imports/ui/services/features';
+import UserReactionService from '/imports/ui/components/user-reaction/service';
 
 import {
   getUserRoles,
@@ -32,4 +33,5 @@ export default withTracker((props) => ({
   showToggleLabel: false,
   isScreenSharingEnabled: isScreenSharingEnabled(),
   isVideoEnabled: Meteor.settings.public.kurento.enableVideo,
+  isReactionsEnabled: UserReactionService.isEnabled(),
 }))(SettingsContainer);

bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx

@@ -411,7 +411,11 @@ class ApplicationMenu extends BaseMenu {
 
   render() {
     const {
-      allLocales, intl, showToggleLabel, displaySettingsStatus,
+      allLocales,
+      intl,
+      showToggleLabel,
+      displaySettingsStatus,
+      isReactionsEnabled,
     } = this.props;
     const {
       isLargestFontSize, isSmallestFontSize, settings,
@@ -513,27 +517,29 @@ class ApplicationMenu extends BaseMenu {
             </Styled.Col>
           </Styled.Row>
 
-          <Styled.Row>
-            <Styled.Col aria-hidden="true">
-              <Styled.FormElement>
-                <Styled.Label>
-                  {intl.formatMessage(intlMessages.autoCloseReactionsBarLabel)}
-                </Styled.Label>
-              </Styled.FormElement>
-            </Styled.Col>
-            <Styled.Col>
-              <Styled.FormElementRight>
-                {displaySettingsStatus(settings.autoCloseReactionsBar)}
-                <Toggle
-                  icons={false}
-                  defaultChecked={settings.autoCloseReactionsBar}
-                  onChange={() => this.handleToggle('autoCloseReactionsBar')}
-                  ariaLabel={`${intl.formatMessage(intlMessages.autoCloseReactionsBarLabel)} - ${displaySettingsStatus(settings.autoCloseReactionsBar, false)}`}
-                  showToggleLabel={showToggleLabel}
-                />
-              </Styled.FormElementRight>
-            </Styled.Col>
-          </Styled.Row>
+          {isReactionsEnabled && (
+            <Styled.Row>
+              <Styled.Col aria-hidden="true">
+                <Styled.FormElement>
+                  <Styled.Label>
+                    {intl.formatMessage(intlMessages.autoCloseReactionsBarLabel)}
+                  </Styled.Label>
+                </Styled.FormElement>
+              </Styled.Col>
+              <Styled.Col>
+                <Styled.FormElementRight>
+                  {displaySettingsStatus(settings.autoCloseReactionsBar)}
+                  <Toggle
+                    icons={false}
+                    defaultChecked={settings.autoCloseReactionsBar}
+                    onChange={() => this.handleToggle('autoCloseReactionsBar')}
+                    ariaLabel={`${intl.formatMessage(intlMessages.autoCloseReactionsBarLabel)} - ${displaySettingsStatus(settings.autoCloseReactionsBar, false)}`}
+                    showToggleLabel={showToggleLabel}
+                  />
+                </Styled.FormElementRight>
+              </Styled.Col>
+            </Styled.Row>
+          )}
 
           <Styled.Row>
             <Styled.Col>

bigbluebutton-html5/imports/ui/services/features/index.js

@@ -85,7 +85,10 @@ export function isPresentationEnabled() {
 }
 
 export function isReactionsEnabled() {
-  return getDisabledFeatures().indexOf('reactions') === -1;
+  const USER_REACTIONS_ENABLED = Meteor.settings.public.userReaction.enabled;
+  const REACTIONS_BUTTON_ENABLED = Meteor.settings.public.app.reactionsButton.enabled;
+
+  return getDisabledFeatures().indexOf('reactions') === -1 && USER_REACTIONS_ENABLED && REACTIONS_BUTTON_ENABLED;
 }
 
 export function isTimerFeatureEnabled() {