diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx
index 0234e1752e..b87e798be3 100644
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/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 {
{ !disableVideo ? : null }
+
);
}
diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx
index 8c02ca324d..41d1983b95 100755
--- a/bigbluebutton-html5/imports/ui/components/media/container.jsx
+++ b/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) {
diff --git a/bigbluebutton-html5/imports/ui/components/media/service.js b/bigbluebutton-html5/imports/ui/components/media/service.js
index ce75fdafec..7ac056469d 100644
--- a/bigbluebutton-html5/imports/ui/components/media/service.js
+++ b/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,
};
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 92f597fc5a..3b1a69457a 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/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;
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/polling/component.jsx b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
index 77d09658f8..0c588f6e65 100644
--- a/bigbluebutton-html5/imports/ui/components/polling/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
@@ -36,7 +36,7 @@ const Polling = ({ intl, poll, handleVote }) => (