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 }) => (