fix(reactions): Show when received even if UI is disabled

css/_reactions-menu.scss

@@ -104,7 +104,7 @@
 	}
 }
 
-.reactions-animations-container {
+.reactions-animations-overflow-container {
 	position: absolute;
 	width: 20%;
 	bottom: 0;
@@ -117,6 +117,13 @@
 	position: relative;
 }
 
+.reactions-animations-container {
+	left: 50%;
+	bottom: 0px;
+	display: inline-block;
+	position: absolute;
+}
+
 $reactionCount: 20;
 
 @function random($min, $max) {

react/features/conference/components/web/Conference.tsx

@@ -23,6 +23,7 @@ import { getOverlayToRender } from '../../../overlay/functions.web';
 import ParticipantsPane from '../../../participants-pane/components/web/ParticipantsPane';
 import Prejoin from '../../../prejoin/components/web/Prejoin';
 import { isPrejoinPageVisible } from '../../../prejoin/functions';
+import ReactionAnimations from '../../../reactions/components/web/ReactionsAnimations';
 import { toggleToolboxVisible } from '../../../toolbox/actions.any';
 import { fullScreenChanged, showToolbox } from '../../../toolbox/actions.web';
 import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
@@ -260,6 +261,7 @@ class Conference extends AbstractConference<IProps, any> {
                     { _showLobby && <LobbyScreen />}
                 </div>
                 <ParticipantsPane />
+                <ReactionAnimations />
             </div>
         );
     }

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { getReactionsQueue, isReactionsEnabled, shouldDisplayReactionsButtons } from '../../functions.any';
+
+import ReactionEmoji from './ReactionEmoji';
+
+/**
+ * Renders the reactions animations in the case when there is no buttons displayed.
+ *
+ * @returns {ReactNode}
+ */
+export default function ReactionAnimations() {
+    const reactionsQueue = useSelector(getReactionsQueue);
+    const _shouldDisplayReactionsButtons = useSelector(shouldDisplayReactionsButtons);
+    const reactionsEnabled = useSelector(isReactionsEnabled);
+
+    if (reactionsEnabled && !_shouldDisplayReactionsButtons) {
+        return (<div className = 'reactions-animations-container'>
+            {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
+                index = { index }
+                key = { uid }
+                reaction = { reaction }
+                uid = { uid } />))}
+        </div>);
+    }
+
+    return null;
+}

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

@@ -220,7 +220,7 @@ const OverflowMenuButton = ({
                                 </div>
                             </>
                         </Drawer>
-                        {showReactionsMenu && <div className = 'reactions-animations-container'>
+                        {showReactionsMenu && <div className = 'reactions-animations-overflow-container'>
                             {reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
                                 index = { index }
                                 key = { uid }