Move Polling to above slides/webcams and change swapLayout constraints. Closes #5359

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

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import VideoProviderContainer from '/imports/ui/components/video-provider/container';
+import PollingContainer from '/imports/ui/components/polling/container';
+
 import { styles } from './styles';
-import VideoProviderContainer from '../video-provider/container';
 
 const propTypes = {
   children: PropTypes.element.isRequired,
@@ -44,6 +46,7 @@ export default class Media extends Component {
         <div className={!swapLayout ? overlayClassName : contentClassName}>
           { !disableVideo ? <VideoProviderContainer /> : null }
         </div>
+        <PollingContainer />
       </div>
     );
   }

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

@@ -66,7 +66,7 @@ export default withTracker(() => {
   }
 
   data.isScreensharing = MediaService.isVideoBroadcasting();
-  data.swapLayout = getSwapLayout() && usersVideo.length > 0 && viewParticipantsWebcams;
+  data.swapLayout = getSwapLayout();
   data.disableVideo = !viewParticipantsWebcams;
 
   if (data.swapLayout) {

bigbluebutton-html5/imports/ui/components/media/service.js

@@ -2,6 +2,9 @@ import Presentations from '/imports/api/presentations';
 import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service';
 import Auth from '/imports/ui/services/auth';
 import Users from '/imports/api/users';
+import Settings from '/imports/ui/services/settings';
+import VideoService from '/imports/ui/components/video-provider/service';
+import PollingService from '/imports/ui/components/polling/service';
 
 const getPresentationInfo = () => {
   const currentPresentation = Presentations.findOne({
@@ -37,9 +40,20 @@ const toggleSwapLayout = () => {
   swapLayout.tracker.changed();
 };
 
+export const shouldEnableSwapLayout = () => {
+  const { viewParticipantsWebcams } = Settings.dataSaving;
+  const usersVideo = VideoService.getAllUsersVideo();
+  const poll = PollingService.mapPolls();
+
+  return usersVideo.length > 0 // prevent swap without any webcams
+  && viewParticipantsWebcams // prevent swap when dataSaving for webcams is enabled
+  && !poll.pollExists; // prevent swap when there is a poll running
+};
+
 export const getSwapLayout = () => {
   swapLayout.tracker.depend();
-  return swapLayout.value;
+
+  return swapLayout.value && shouldEnableSwapLayout();
 };
 
 export default {
@@ -50,4 +64,5 @@ export default {
   isUserPresenter,
   isVideoBroadcasting,
   toggleSwapLayout,
+  shouldEnableSwapLayout,
 };

bigbluebutton-html5/imports/ui/components/media/styles.scss

@@ -25,11 +25,11 @@
   display: flex;
   order: 1;
   width: 100%;
-  padding: 0 5px 5px;
+  border: 5px solid transparent;
   position: relative;
 
   @include mq($medium-up) {
-    padding: 0 10px 10px;
+    border: 10px solid transparent;
   }
 }
 

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

@@ -36,7 +36,7 @@ const Polling = ({ intl, poll, handleVote }) => (
             <Button
               className={styles.pollingButton}
               color="default"
-              size="lg"
+              size="md"
               label={pollAnswer.key}
               onClick={() => handleVote(poll.pollId, pollAnswer)}
               aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}

bigbluebutton-html5/imports/ui/components/polling/styles.scss

@@ -4,7 +4,6 @@
   order: 2;
   width: 100%;
   display: flex;
-  padding: .8rem;
   align-items: center;
   flex-direction: column;
 }

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import WhiteboardOverlayContainer from '/imports/ui/components/whiteboard/whiteboard-overlay/container';
 import WhiteboardToolbarContainer from '/imports/ui/components/whiteboard/whiteboard-toolbar/container';
-import PollingContainer from '/imports/ui/components/polling/container';
 import CursorWrapperContainer from './cursor/cursor-wrapper-container/container';
 import AnnotationGroupContainer from '../whiteboard/annotation-group/container';
 import PresentationToolbarContainer from './presentation-toolbar/container';
@@ -295,7 +294,6 @@ export default class PresentationArea extends Component {
               this.renderWhiteboardToolbar()
             : null }
         </div>
-        <PollingContainer />
         {this.renderPresentationToolbar()}
       </div>
     );