Merge pull request #19797 from JoVictorNunes/issue-19181

fix(poll): avoid rendering polling component twice

bigbluebutton-html5/imports/ui/components/polling/container.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import Users from '/imports/api/users';
@@ -10,13 +11,20 @@ import { isPollingEnabled } from '/imports/ui/services/features';
 
 const propTypes = {
   pollExists: PropTypes.bool.isRequired,
+  presentationIsFullscreen: PropTypes.bool.isRequired,
 };
 
-const PollingContainer = ({ pollExists, ...props }) => {
+const PollingContainer = ({ pollExists, presentationIsFullscreen, ...props }) => {
   const currentUser = Users.findOne({ userId: Auth.userID }, { fields: { presenter: 1 } });
   const showPolling = pollExists && !currentUser.presenter && isPollingEnabled();
 
   if (showPolling) {
+    if (presentationIsFullscreen) {
+      return createPortal(
+        <PollingComponent {...props} />,
+        document.getElementById('presentation-polling-placeholder'),
+      );
+    }
     return (
       <PollingComponent {...props} />
     );
@@ -31,6 +39,7 @@ export default withTracker(() => {
     pollExists, handleVote, poll, handleTypedVote,
   } = PollingService.mapPolls();
   const { pollTypes } = PollService;
+  const presentationIsFullscreen = Session.get('presentationIsFullscreen');
 
   if (poll && poll?.pollType) {
     const isResponse = poll.pollType === pollTypes.Response;
@@ -46,5 +55,6 @@ export default withTracker(() => {
     pollTypes,
     isDefaultPoll: PollService.isDefaultPoll,
     isMeteorConnected: Meteor.status().connected,
+    presentationIsFullscreen,
   });
 })(PollingContainer);

bigbluebutton-html5/imports/ui/components/presentation/component.jsx

@@ -428,10 +428,11 @@ class Presentation extends PureComponent {
   onFullscreenChange() {
     const { isFullscreen } = this.state;
     const newIsFullscreen = FullscreenService.isFullScreen(
-      this.refPresentationContainer
+      this.refPresentationContainer,
     );
     if (isFullscreen !== newIsFullscreen) {
       this.setState({ isFullscreen: newIsFullscreen });
+      Session.set('presentationIsFullscreen', newIsFullscreen);
     }
   }
 
@@ -892,7 +893,7 @@ class Presentation extends PureComponent {
                   isToolbarVisible={isToolbarVisible}
                   isViewersAnnotationsLocked={isViewersAnnotationsLocked}
                 />
-                {isFullscreen && <PollingContainer />}
+                <div id="presentation-polling-placeholder" />
               </div>
               {!tldrawIsMounting && (
                 <Styled.PresentationToolbar