From 66788e9697e8e43087af194fa83c1cdf6b646df3 Mon Sep 17 00:00:00 2001
From: prlanzarin <4529051+prlanzarin@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:39:21 -0300
Subject: [PATCH] fix(reactions): crash when interactionsButton coords are
 absent

The client may crash whenever a emoji rain animation is triggered, but
the interactions button element cannot be located. This happens because
the button coordinates are fetched without checking whether the element
exists.

Get the coordinate fetching method to return null if the
interactionsButton element cannot be located, and ignore the emoji rain
action if that is the case. Whenever no valid coordinates are found, log
an warning so we can track this and figure out what's happening with the
button.

Fix a few typos in the getInteractionsButtonCoordinates method.
---
 .../imports/ui/components/emoji-rain/component.jsx   | 10 +++++++++-
 .../imports/ui/components/emoji-rain/service.js      | 12 ++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
index 8cca52e402..148ecfcefa 100644
--- a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import Settings from '/imports/ui/services/settings';
 import Service from './service';
+import logger from '/imports/startup/client/logger';
 
 const EmojiRain = ({ reactions }) => {
   const containerRef = useRef(null);
@@ -12,9 +13,16 @@ const EmojiRain = ({ reactions }) => {
   const { animations } = Settings.application;
 
   function createEmojiRain(emoji) {
-    const coord = Service.getInteractionsButtonCoordenates();
+    const coord = Service.getInteractionsButtonCoordinates();
     const flyingEmojis = [];
 
+    if (coord == null) {
+      logger.warn({
+        logCode: 'interactions_emoji_rain_no_coord',
+      }, 'No coordinates for interactions button, skipping emoji rain');
+      return;
+    }
+
     for (i = 0; i < NUMBER_OF_EMOJIS; i++) {
       const initialPosition = {
         x: coord.x + coord.width / 8,
diff --git a/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js b/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
index 69b221e8d4..b172559c19 100644
--- a/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
+++ b/bigbluebutton-html5/imports/ui/components/emoji-rain/service.js
@@ -1,9 +1,13 @@
-const getInteractionsButtonCoordenates = () => {
+const getInteractionsButtonCoordinates = () => {
   const el = document.getElementById('interactionsButton');
-  const coordenada = el.getBoundingClientRect();
-  return coordenada;
+
+  if (!el) return null;
+
+  const coordinate = el.getBoundingClientRect();
+
+  return coordinate;
 };
 
 export default {
-  getInteractionsButtonCoordenates,
+  getInteractionsButtonCoordinates,
 };