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,6 +517,7 @@ class ApplicationMenu extends BaseMenu {
             </Styled.Col>
           </Styled.Row>
 
+          {isReactionsEnabled && (
             <Styled.Row>
               <Styled.Col aria-hidden="true">
                 <Styled.FormElement>
@@ -534,6 +539,7 @@ class ApplicationMenu extends BaseMenu {
                 </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() {