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