Merge pull request #20005 from prlanzarin/u27/fix/crash-getBoundingClientRect-emojirain

[2.7] fix(reactions): crash when interactionsButton coords are absent

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,

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,
 };