feature(layout): Only use one place to store presentationIsOpen

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 {
           />
         </Styled.Center>
         <Styled.Right>
-          {!isOldMinimizeButtonEnabled ||
-            (isOldMinimizeButtonEnabled && isLayoutSwapped && !isPresentationDisabled)
-            ? (
-              <PresentationOptionsContainer
-                isLayoutSwapped={isLayoutSwapped}
-                toggleSwapLayout={toggleSwapLayout}
-                layoutContextDispatch={layoutContextDispatch}
-                hasPresentation={isThereCurrentPresentation}
-                hasExternalVideo={isSharingVideo}
-                hasScreenshare={hasScreenshare}
-              />
-            )
-            : null}
+          <PresentationOptionsContainer
+            isLayoutSwapped={isLayoutSwapped}
+            toggleSwapLayout={toggleSwapLayout}
+            layoutContextDispatch={layoutContextDispatch}
+            hasPresentation={isThereCurrentPresentation}
+            hasExternalVideo={isSharingVideo}
+            hasScreenshare={hasScreenshare}
+          />
           {isRaiseHandButtonEnabled
             ? (
               <Styled.RaiseHandButton

bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx

@@ -15,10 +15,7 @@ import CaptionsService from '/imports/ui/components/captions/service';
 import { layoutSelectOutput, layoutDispatch } from '../layout/context';
 import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service';
 
-import MediaService, {
-  getSwapLayout,
-  shouldEnableSwapLayout,
-} from '../media/service';
+import MediaService from '../media/service';
 
 const ActionsBarContainer = (props) => {
   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,

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 (
       <Styled.ActionsBar
@@ -507,7 +510,10 @@ class App extends Component {
           }
         }
       >
-        {actionsbar}
+        <ActionsBarContainer
+          setMeetingLayout={setMeetingLayout}
+          isLayoutSwapped={isLayoutSwapped}
+	/>
       </Styled.ActionsBar>
     );
   }
@@ -569,11 +575,11 @@ class App extends Component {
           <SidebarContentContainer />
           <NavBarContainer main="new" />
           {this.renderWebcamsContainer()}
-          {shouldShowPresentation ? <PresentationAreaContainer /> : null}
-          {shouldShowScreenshare ? <ScreenshareContainer /> : null}
+          {shouldShowPresentation ? <PresentationAreaContainer isLayoutSwapped={isLayoutSwapped} /> : null}
+          {shouldShowScreenshare ? <ScreenshareContainer isLayoutSwapped={isLayoutSwapped} /> : null}
           {
             shouldShowExternalVideo
-              ? <ExternalVideoContainer isPresenter={isPresenter} />
+              ? <ExternalVideoContainer isLayoutSwapped={isLayoutSwapped} isPresenter={isPresenter} />
               : null
           }
           {this.renderCaptions()}

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: <ActionsBarContainer />,
-};
-
 const intlMessages = defineMessages({
   waitingApprovalMessage: {
     id: 'app.guest.waiting',
@@ -124,7 +114,6 @@ const AppContainer = (props) => {
     ? (
       <App
         {...{
-          actionsbar: <ActionsBarContainer setMeetingLayout={setMeetingLayout} />,
           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;

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,

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);

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

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}

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,

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,

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

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);
+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);

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;

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

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();