From 830c44702fecf18a1c53eb1bfe5bc9da2b21346c Mon Sep 17 00:00:00 2001 From: Lucas Zawacki Date: Wed, 9 Feb 2022 19:45:43 +0000 Subject: [PATCH] feature(layout): Only use one place to store presentationIsOpen --- .../ui/components/actions-bar/component.jsx | 22 +++++------- .../ui/components/actions-bar/container.jsx | 8 +---- .../imports/ui/components/app/component.jsx | 18 ++++++---- .../imports/ui/components/app/container.jsx | 15 +------- .../external-video-player/component.jsx | 4 --- .../external-video-player/container.jsx | 4 +-- .../imports/ui/components/media/service.js | 34 +------------------ .../ui/components/presentation/component.jsx | 2 ++ .../ui/components/presentation/container.jsx | 9 +---- .../presentation-toolbar/container.jsx | 5 +-- .../ui/components/screenshare/component.jsx | 26 ++------------ .../ui/components/screenshare/container.jsx | 23 ++++++------- .../ui/components/webcam/container.jsx | 4 +-- .../reactive-annotation/container.jsx | 6 ---- .../whiteboard/annotations/poll/component.jsx | 7 +--- 15 files changed, 46 insertions(+), 141 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx index 2f7de4d303..993d3a98a8 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx @@ -34,7 +34,6 @@ class ActionsBar extends PureComponent { shortcuts, layoutContextDispatch, actionsBarStyle, - isOldMinimizeButtonEnabled, setMeetingLayout, } = this.props; @@ -81,19 +80,14 @@ class ActionsBar extends PureComponent { /> - {!isOldMinimizeButtonEnabled || - (isOldMinimizeButtonEnabled && isLayoutSwapped && !isPresentationDisabled) - ? ( - - ) - : null} + {isRaiseHandButtonEnabled ? ( { const actionsBarStyle = layoutSelectOutput((i) => i.actionBar); @@ -49,13 +46,11 @@ const POLLING_ENABLED = Meteor.settings.public.poll.enabled; const PRESENTATION_DISABLED = Meteor.settings.public.layout.hidePresentation; const SELECT_RANDOM_USER_ENABLED = Meteor.settings.public.selectRandomUser.enabled; const RAISE_HAND_BUTTON_ENABLED = Meteor.settings.public.app.raiseHandActionButton.enabled; -const OLD_MINIMIZE_BUTTON_ENABLED = Meteor.settings.public.presentation.oldMinimizeButton; export default withTracker(() => ({ amIModerator: Service.amIModerator(), stopExternalVideoShare: ExternalVideoService.stopWatching, enableVideo: getFromUserSettings('bbb_enable_video', Meteor.settings.public.kurento.enableVideo), - isLayoutSwapped: getSwapLayout() && shouldEnableSwapLayout(), toggleSwapLayout: MediaService.toggleSwapLayout, handleTakePresenter: Service.takePresenterRole, currentSlidHasContent: PresentationService.currentSlidHasContent(), @@ -68,7 +63,6 @@ export default withTracker(() => ({ isPresentationDisabled: PRESENTATION_DISABLED, isSelectRandomUserEnabled: SELECT_RANDOM_USER_ENABLED, isRaiseHandButtonEnabled: RAISE_HAND_BUTTON_ENABLED, - isOldMinimizeButtonEnabled: OLD_MINIMIZE_BUTTON_ENABLED, isThereCurrentPresentation: Presentations.findOne({ meetingId: Auth.meetingID, current: true }, { fields: {} }), allowExternalVideo: Meteor.settings.public.externalVideoPlayer.enabled, diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index f01cc44bc4..8dfc1d91f0 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -46,6 +46,8 @@ import Settings from '/imports/ui/services/settings'; import { registerTitleView } from '/imports/utils/dom-utils'; import GlobalStyles from '/imports/ui/stylesheets/styled-components/globalStyles'; +import ActionsBarContainer from '../actions-bar/container'; + const MOBILE_MEDIA = 'only screen and (max-width: 40em)'; const APP_CONFIG = Meteor.settings.public.app; const DESKTOP_FONT_SIZE = APP_CONFIG.desktopFontSize; @@ -483,13 +485,14 @@ class App extends Component { renderActionsBar() { const { - actionsbar, intl, actionsBarStyle, hideActionsBar, + setMeetingLayout, + isLayoutSwapped, } = this.props; - if (!actionsbar || hideActionsBar) return null; + if (hideActionsBar) return null; return ( - {actionsbar} + ); } @@ -569,11 +575,11 @@ class App extends Component { {this.renderWebcamsContainer()} - {shouldShowPresentation ? : null} - {shouldShowScreenshare ? : null} + {shouldShowPresentation ? : null} + {shouldShowScreenshare ? : null} { shouldShowExternalVideo - ? + ? : null } {this.renderCaptions()} diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx index 122c1c213f..7250d6b6e3 100755 --- a/bigbluebutton-html5/imports/ui/components/app/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx @@ -31,19 +31,9 @@ import { import { withModalMounter, getModal } from '/imports/ui/components/common/modal/service'; import App from './component'; -import ActionsBarContainer from '../actions-bar/container'; const CUSTOM_STYLE_URL = Meteor.settings.public.app.customStyleUrl; -const propTypes = { - actionsbar: PropTypes.node, - meetingLayout: PropTypes.string.isRequired, -}; - -const defaultProps = { - actionsbar: , -}; - const intlMessages = defineMessages({ waitingApprovalMessage: { id: 'app.guest.waiting', @@ -124,7 +114,6 @@ const AppContainer = (props) => { ? ( , actionsBarStyle, captionsStyle, currentUserId, @@ -134,6 +123,7 @@ const AppContainer = (props) => { pushLayout, meetingLayoutUpdatedAt, presentationIsOpen: isPresenter ? presentationIsOpen : layoutPresOpen, + isLayoutSwapped: !presentationIsOpen, cameraPosition: isPresenter ? cameraDock.position : layoutCamPosition, focusedCamera: isPresenter ? focusedId : layoutFocusedCam, presentationVideoRate: isPresenter ? presentationVideoRate : layoutRate, @@ -267,6 +257,3 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls }) isModalOpen: !!getModal(), }; })(AppContainer))); - -AppContainer.defaultProps = defaultProps; -AppContainer.propTypes = propTypes; diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx index 82e4fe2ced..34d9b9f715 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx @@ -151,8 +151,6 @@ class VideoPlayer extends Component { componentDidMount() { const { - getSwapLayout, - toggleSwapLayout, layoutContextDispatch, hidePresentation, } = this.props; @@ -165,8 +163,6 @@ class VideoPlayer extends Component { VideoPlayer.clearVideoListeners(); this.registerVideoListeners(); - if (getSwapLayout()) toggleSwapLayout(layoutContextDispatch); - if (hidePresentation) { layoutContextDispatch({ type: ACTIONS.SET_PRESENTATION_IS_OPEN, diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx index b66223c8b8..3196475163 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/container.jsx @@ -9,7 +9,7 @@ import { layoutSelectOutput, layoutDispatch, } from '../layout/context'; -import MediaService, { getSwapLayout } from '/imports/ui/components/media/service'; +import MediaService from '/imports/ui/components/media/service'; import getFromUserSettings from '/imports/ui/services/users-settings'; const ExternalVideoContainer = (props) => { @@ -46,8 +46,6 @@ export default withTracker(({ isPresenter }) => { inEchoTest, isPresenter, videoUrl: getVideoUrl(), - getSwapLayout, - toggleSwapLayout: MediaService.toggleSwapLayout, hidePresentation: getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation), }; })(ExternalVideoContainer); diff --git a/bigbluebutton-html5/imports/ui/components/media/service.js b/bigbluebutton-html5/imports/ui/components/media/service.js index e9abd488af..d4d5ef0d32 100755 --- a/bigbluebutton-html5/imports/ui/components/media/service.js +++ b/bigbluebutton-html5/imports/ui/components/media/service.js @@ -39,28 +39,11 @@ function shouldShowOverlay() { } const swapLayout = { - value: getFromUserSettings('bbb_auto_swap_layout', LAYOUT_CONFIG.autoSwapLayout), - tracker: new Tracker.Dependency(), -}; - -const setSwapLayout = (layoutContextDispatch) => { - const hidePresentation = getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation); - - swapLayout.value = getFromUserSettings('bbb_auto_swap_layout', LAYOUT_CONFIG.autoSwapLayout); - swapLayout.tracker.changed(); - - if (!hidePresentation) { - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: !swapLayout.value, - }); - } + value: getFromUserSettings('bbb_auto_swap_layout', LAYOUT_CONFIG.autoSwapLayout) || getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation), }; const toggleSwapLayout = (layoutContextDispatch) => { - window.dispatchEvent(new Event('togglePresentationHide')); swapLayout.value = !swapLayout.value; - swapLayout.tracker.changed(); layoutContextDispatch({ type: ACTIONS.SET_PRESENTATION_IS_OPEN, @@ -68,18 +51,6 @@ const toggleSwapLayout = (layoutContextDispatch) => { }); }; -export const shouldEnableSwapLayout = () => { - if (!PRESENTATION_CONFIG.oldMinimizeButton) { - return true; - } - return !shouldShowScreenshare() && !shouldShowExternalVideo(); -} - -export const getSwapLayout = () => { - swapLayout.tracker.depend(); - return swapLayout.value; -}; - export default { getPresentationInfo, shouldShowWhiteboard, @@ -88,7 +59,4 @@ export default { shouldShowOverlay, isVideoBroadcasting, toggleSwapLayout, - shouldEnableSwapLayout, - getSwapLayout, - setSwapLayout, }; diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx index 0beab0c07a..e595eb3d49 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx @@ -683,6 +683,7 @@ class Presentation extends PureComponent { fullscreenElementId, fullscreenContext, layoutContextDispatch, + isLayoutSwapped, } = this.props; const { zoom, fitToWidth } = this.state; @@ -705,6 +706,7 @@ class Presentation extends PureComponent { toolbarWidth, fullscreenElementId, layoutContextDispatch, + isLayoutSwapped, }} currentSlideNum={currentSlide.num} presentationId={currentSlide.presentationId} diff --git a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx index bd7397ed83..90377727f6 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx @@ -1,9 +1,5 @@ import React, { useContext } from 'react'; import { withTracker } from 'meteor/react-meteor-data'; -import MediaService, { - getSwapLayout, - shouldEnableSwapLayout, -} from '/imports/ui/components/media/service'; import { notify } from '/imports/ui/services/notification'; import PresentationService from './service'; import { Slides } from '/imports/api/slides'; @@ -51,7 +47,7 @@ const PresentationContainer = ({ presentationPodIds, mountPresentation, ...props layoutContextDispatch, numCameras, ...props, - userIsPresenter: userIsPresenter && !layoutSwapped, + userIsPresenter, presentationBounds: presentation, layoutType, fullscreenContext, @@ -71,7 +67,6 @@ const fetchedpresentation = {}; export default withTracker(({ podId }) => { const currentSlide = PresentationService.getCurrentSlide(podId); const presentationIsDownloadable = PresentationService.isPresentationDownloadable(podId); - const layoutSwapped = getSwapLayout() && shouldEnableSwapLayout(); let slidePosition; if (currentSlide) { @@ -127,8 +122,6 @@ export default withTracker(({ podId }) => { notify, zoomSlide: PresentationToolbarService.zoomSlide, podId, - layoutSwapped, - toggleSwapLayout: MediaService.toggleSwapLayout, publishedPoll: Meetings.findOne({ meetingId: Auth.meetingID }, { fields: { publishedPoll: 1, diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx index 24c01246be..adcfd7e82e 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { withTracker } from 'meteor/react-meteor-data'; import PresentationService from '/imports/ui/components/presentation/service'; -import MediaService from '/imports/ui/components/media/service'; +import Service from '/imports/ui/components/actions-bar/service'; import PollService from '/imports/ui/components/poll/service'; import { makeCall } from '/imports/ui/services/api'; import PresentationToolbar from './component'; @@ -54,7 +54,8 @@ export default withTracker((params) => { }; return { - layoutSwapped: MediaService.getSwapLayout() && MediaService.shouldEnableSwapLayout(), + amIPresenter: Service.amIPresenter(), + userIsPresenter: PresentationService.isPresenter(podId), numberOfSlides: PresentationToolbarService.getNumberOfSlides(podId, presentationId), nextSlide: PresentationToolbarService.nextSlide, previousSlide: PresentationToolbarService.previousSlide, diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx index daa02f7ac4..347f042465 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx @@ -77,7 +77,6 @@ class ScreenshareComponent extends React.Component { constructor() { super(); this.state = { - restoreOnUnmount: true, loaded: false, autoplayBlocked: false, isStreamHealthy: false, @@ -101,7 +100,7 @@ class ScreenshareComponent extends React.Component { componentDidMount() { const { - getSwapLayout, + isLayoutSwapped, toggleSwapLayout, layoutContextDispatch, intl, @@ -119,22 +118,10 @@ class ScreenshareComponent extends React.Component { notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop'); - if (getSwapLayout()) { - toggleSwapLayout(layoutContextDispatch) - this.setState({ restoreOnUnmount: false }); - }; - layoutContextDispatch({ type: ACTIONS.SET_HAS_SCREEN_SHARE, value: true, }); - - if (hidePresentation) { - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: true, - }); - } } componentDidUpdate(prevProps) { @@ -151,10 +138,8 @@ class ScreenshareComponent extends React.Component { intl, fullscreenContext, layoutContextDispatch, - hidePresentation, toggleSwapLayout, } = this.props; - const { restoreOnUnmount } = this.state; screenshareHasEnded(); window.removeEventListener('screensharePlayFailed', this.handlePlayElementFailed); unsubscribeFromStreamStateChange('screenshare', this.onStreamStateChange); @@ -180,13 +165,6 @@ class ScreenshareComponent extends React.Component { }); } - if (hidePresentation || !restoreOnUnmount) { - layoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_OPEN, - value: false, - }); - toggleSwapLayout(layoutContextDispatch); - } } handleAllowAutoplay() { @@ -505,4 +483,4 @@ ScreenshareComponent.propTypes = { }).isRequired, isPresenter: PropTypes.bool.isRequired, enableVolumeControl: PropTypes.bool.isRequired, -}; \ No newline at end of file +}; diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx index 79972f2414..a9719a53b0 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx @@ -1,10 +1,6 @@ import React, { useContext } from 'react'; import { withTracker } from 'meteor/react-meteor-data'; import Auth from '/imports/ui/services/auth'; -import MediaService, { - getSwapLayout, - shouldEnableSwapLayout, -} from '/imports/ui/components/media/service'; import { isVideoBroadcasting, isGloballyBroadcasting, @@ -14,6 +10,7 @@ import { layoutSelect, layoutSelectOutput, layoutDispatch } from '../layout/cont import getFromUserSettings from '/imports/ui/services/users-settings'; import { UsersContext } from '/imports/ui/components/components-data/users-context/context'; import { shouldEnableVolumeControl } from './service'; +import MediaService from '/imports/ui/components/media/service'; const ScreenshareContainer = (props) => { const screenShare = layoutSelectOutput((i) => i.screenShare); @@ -50,11 +47,13 @@ const ScreenshareContainer = (props) => { const LAYOUT_CONFIG = Meteor.settings.public.layout; -export default withTracker(() => ({ - isGloballyBroadcasting: isGloballyBroadcasting(), - getSwapLayout, - shouldEnableSwapLayout, - toggleSwapLayout: MediaService.toggleSwapLayout, - hidePresentation: getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation), - enableVolumeControl: shouldEnableVolumeControl(), -}))(ScreenshareContainer); \ No newline at end of file +export default withTracker(() => { + const user = Users.findOne({ userId: Auth.userID }, { fields: { presenter: 1 } }); + return { + isGloballyBroadcasting: isGloballyBroadcasting(), + isPresenter: user.presenter, + toggleSwapLayout: MediaService.toggleSwapLayout, + hidePresentation: getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation), + enableVolumeControl: shouldEnableVolumeControl(), + }; +})(ScreenshareContainer); diff --git a/bigbluebutton-html5/imports/ui/components/webcam/container.jsx b/bigbluebutton-html5/imports/ui/components/webcam/container.jsx index a374126ade..66ab344b2a 100644 --- a/bigbluebutton-html5/imports/ui/components/webcam/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/webcam/container.jsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { withModalMounter } from '/imports/ui/components/common/modal/service'; import { withTracker } from 'meteor/react-meteor-data'; -import MediaService, { getSwapLayout, shouldEnableSwapLayout } from '/imports/ui/components/media/service'; +import MediaService from '/imports/ui/components/media/service'; import Auth from '/imports/ui/services/auth'; import breakoutService from '/imports/ui/components/breakout-room/service'; import VideoService from '/imports/ui/components/video-provider/service'; @@ -92,7 +92,7 @@ export default withModalMounter(withTracker(() => { const { streams: usersVideo } = VideoService.getVideoStreams(); data.usersVideo = usersVideo; - data.swapLayout = (getSwapLayout() || !hasPresentation) && shouldEnableSwapLayout(); + data.swapLayout = !hasPresentation; if (data.swapLayout) { data.floatingOverlay = true; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotation-factory/reactive-annotation/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotation-factory/reactive-annotation/container.jsx index 259fd9f2f7..5ae80fbf7f 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotation-factory/reactive-annotation/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotation-factory/reactive-annotation/container.jsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withTracker } from 'meteor/react-meteor-data'; -import MediaService, { getSwapLayout, shouldEnableSwapLayout } from '/imports/ui/components/media/service'; import ReactiveAnnotationService from './service'; import ReactiveAnnotation from './component'; import Auth from '/imports/ui/services/auth'; @@ -41,11 +40,6 @@ export default withTracker((params) => { Meteor.settings.public.presentation.restoreOnUpdate, ); - if (restoreOnUpdate && isViewer) { - const layoutSwapped = getSwapLayout() && shouldEnableSwapLayout(); - if (layoutSwapped) MediaService.toggleSwapLayout(); - } - return { annotation, }; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx index 25044d31e7..e439bb65f5 100644 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx @@ -4,10 +4,6 @@ import PollService from '/imports/ui/components/poll/service'; import caseInsensitiveReducer from '/imports/utils/caseInsensitiveReducer'; import { injectIntl, defineMessages } from 'react-intl'; import Styled from './styles'; -import { - getSwapLayout, - shouldEnableSwapLayout, -} from '/imports/ui/components/media/service'; const intlMessages = defineMessages({ pollResultAria: { @@ -77,11 +73,10 @@ class PollDrawComponent extends Component { } componentDidMount() { - const { annotation } = this.props; + const { annotation, isLayoutSwapped } = this.props; const { pollType, numResponders } = annotation; if (pollType === PollService.pollTypes.Response && numResponders === 0) return; - const isLayoutSwapped = getSwapLayout() && shouldEnableSwapLayout(); if (isLayoutSwapped) return; this.pollInitialCalculation();