diff --git a/bigbluebutton-html5/imports/startup/client/base.jsx b/bigbluebutton-html5/imports/startup/client/base.jsx index db9afa1ea225770ed1dd0bdbd91fb7fadb375c7e..5186879e1cdfc392bccfdd07b968e7c9d21452bb 100755 --- a/bigbluebutton-html5/imports/startup/client/base.jsx +++ b/bigbluebutton-html5/imports/startup/client/base.jsx @@ -19,7 +19,8 @@ import { notify } from '/imports/ui/services/notification'; import deviceInfo from '/imports/utils/deviceInfo'; import { invalidateCookie } from '/imports/ui/components/audio/audio-modal/service'; import getFromUserSettings from '/imports/ui/services/users-settings'; -import LayoutManager from '/imports/ui/components/layout/layout-manager'; +import LayoutManagerComponent from '/imports/ui/components/layout/layout-manager/component'; +import LayoutManagerContainer from '/imports/ui/components/layout/layout-manager/container'; import { withLayoutContext } from '/imports/ui/components/layout/context'; import VideoService from '/imports/ui/components/video-provider/service'; import DebugWindow from '/imports/ui/components/debug-window/component' @@ -275,7 +276,7 @@ class Base extends Component { return ( <Fragment> {meetingExist && Auth.loggedIn && <DebugWindow />} - {meetingExist && Auth.loggedIn && <LayoutManager />} + {meetingExist && Auth.loggedIn && <LayoutManagerContainer />} { (!meetingExisted && !meetingExist && Auth.loggedIn) ? <LoadingScreen /> diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx index 2a753e41e691c006b45037cf560efc094057f38c..3a8ef187fa811bdc7fd232b5cde24388be85c5e0 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import cx from 'classnames'; import Button from '/imports/ui/components/button/component'; -import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager'; +import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component'; import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container'; import withShortcutHelper from '/imports/ui/components/shortcut-help/service'; import { styles } from './styles.scss'; diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 24a20f126d6d9509b6a3f80186b12191e27e7edf..a16cae807c56a641bf35d1e88779d426db4d57a5 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -28,7 +28,7 @@ import { withDraggableContext } from '../media/webcam-draggable-overlay/context' import { styles } from './styles'; import { makeCall } from '/imports/ui/services/api'; import ConnectionStatusService from '/imports/ui/components/connection-status/service'; -import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager'; +import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component'; const MOBILE_MEDIA = 'only screen and (max-width: 40em)'; const APP_CONFIG = Meteor.settings.public.app; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx similarity index 98% rename from bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx rename to bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx index 8e663bb94b92db8641d17ecd813c601eb754dd6c..a7f1d6e596e992dff2c7c431fae7483d2795194c 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx @@ -35,7 +35,7 @@ const PRESENTATIONAREA_MIN_WIDTH = 385; // Value based on presentation toolbar const storageLayoutData = () => Storage.getItem('layoutData'); -class LayoutManager extends Component { +class LayoutManagerComponent extends Component { static calculatesPresentationSize( mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight, ) { @@ -111,8 +111,11 @@ class LayoutManager extends Component { } componentDidUpdate(prevProps) { - const { layoutContextState } = this.props; - const { layoutContextState: prevLayoutContextState } = prevProps; + const { layoutContextState, screenIsShared } = this.props; + const { + layoutContextState: prevLayoutContextState, + screenIsShared: prevScreenIsShared + } = prevProps; const { numUsersVideo, } = layoutContextState; @@ -120,7 +123,8 @@ class LayoutManager extends Component { numUsersVideo: prevNumUsersVideo, } = prevLayoutContextState; - if (numUsersVideo !== prevNumUsersVideo) { + if (numUsersVideo !== prevNumUsersVideo + || prevScreenIsShared !== screenIsShared) { setTimeout(() => this.setLayoutSizes(), 500); } } @@ -767,7 +771,7 @@ class LayoutManager extends Component { left: firstPanel.width + secondPanel.width, }; - const { presentationWidth, presentationHeight } = LayoutManager.calculatesPresentationSize( + const { presentationWidth, presentationHeight } = LayoutManagerComponent.calculatesPresentationSize( mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight, ); @@ -820,7 +824,7 @@ class LayoutManager extends Component { } } -export default withLayoutConsumer(LayoutManager); +export default withLayoutConsumer(LayoutManagerComponent); export { USERLIST_MIN_WIDTH, USERLIST_MAX_WIDTH, diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/container.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/container.jsx new file mode 100644 index 0000000000000000000000000000000000000000..c38735a33e9a61f1fe8e3f42d80be4a7959ef564 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/container.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { withTracker } from 'meteor/react-meteor-data'; +import Auth from '/imports/ui/services/auth'; +import Screenshare from '/imports/api/screenshare'; +import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service'; +import LayoutManagerComponent from '/imports/ui/components/layout/layout-manager/component'; + +const LayoutManagerContainer = ({ screenIsShared }) => { + return <LayoutManagerComponent {...{ screenIsShared }} />; +}; + +export default withTracker(() => { + return { + screenIsShared: isVideoBroadcasting(), + }; +})(LayoutManagerContainer); diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx index e3b78e881f1938e4d59b14b797b9c106f6ee92b7..bf32aa466b8feee5b09f2f25947d635ec8c052df 100644 --- a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx @@ -9,7 +9,7 @@ import VideoProviderContainer from '/imports/ui/components/video-provider/contai import { styles } from '../styles.scss'; import Storage from '../../../services/storage/session'; import { withLayoutConsumer } from '/imports/ui/components/layout/context'; -import { WEBCAMSAREA_MIN_PERCENT, PRESENTATIONAREA_MIN_WIDTH } from '/imports/ui/components/layout/layout-manager'; +import { WEBCAMSAREA_MIN_PERCENT, PRESENTATIONAREA_MIN_WIDTH } from '/imports/ui/components/layout/layout-manager/component'; const propTypes = { swapLayout: PropTypes.bool, diff --git a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx index ce2e351abf5fef6a4332fc513e3f257b6ca3ae84..26539dd308e7ce42621cf399f699490537553814 100755 --- a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx @@ -21,7 +21,7 @@ import { POLL_MAX_WIDTH, NOTE_MIN_WIDTH, NOTE_MAX_WIDTH, -} from '/imports/ui/components/layout/layout-manager'; +} from '/imports/ui/components/layout/layout-manager/component'; const intlMessages = defineMessages({ chatLabel: {