fix(poll): avoid rendering polling component twice

This commit is contained in:
João Victor 2024-03-14 11:20:08 -03:00
parent 578daa130a
commit 64c4567d06
2 changed files with 14 additions and 3 deletions

View File

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

View File

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