From ad6ee4fdb00bcdfabf776c406b53b4a5260fb6d4 Mon Sep 17 00:00:00 2001 From: Vitor Mateus De Almeida Date: Sat, 20 Jun 2020 23:24:36 -0300 Subject: [PATCH] Fix exception when screenshare is running --- .../chat/alert/push-alert/component.jsx | 1 - .../ui/components/layout/layout-manager.jsx | 82 ++++++++++++++++--- .../imports/ui/components/media/container.jsx | 2 +- .../imports/ui/components/media/service.js | 1 - .../webcam-draggable-overlay/component.jsx | 1 - .../ui/components/screenshare/component.jsx | 5 +- 6 files changed, 74 insertions(+), 18 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/push-alert/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/push-alert/component.jsx index d6543993a7..db51df75ae 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/push-alert/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/push-alert/component.jsx @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import _ from 'lodash'; import injectNotify from '/imports/ui/components/toast/inject-notify/component'; import { Session } from 'meteor/session'; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx index 2b5008bebb..f953fe9f13 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx @@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react'; import Storage from '/imports/ui/services/storage/session'; import { Session } from 'meteor/session'; import { withLayoutConsumer } from '/imports/ui/components/layout/context'; +import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service'; const windowWidth = () => window.innerWidth; const windowHeight = () => window.innerHeight; @@ -217,9 +218,20 @@ class LayoutManager extends Component { defineWebcamPlacement(mediaAreaWidth, mediaAreaHeight, presentationWidth, presentationHeight) { const { layoutContextDispatch, layoutContextState } = this.props; const { autoArrangeLayout } = layoutContextState; + const isScreenShare = isVideoBroadcasting(); if (!autoArrangeLayout) return; + if (isScreenShare) { + layoutContextDispatch( + { + type: 'setWebcamsPlacement', + value: 'top', + }, + ); + return; + } + if ((mediaAreaWidth - presentationWidth) > (mediaAreaHeight - presentationHeight)) { layoutContextDispatch( { @@ -335,6 +347,8 @@ class LayoutManager extends Component { const autoArrangeLayout = Storage.getItem('autoArrangeLayout'); const webcamsAreaUserSetsHeight = Storage.getItem('webcamsAreaUserSetsHeight'); const webcamsAreaUserSetsWidth = Storage.getItem('webcamsAreaUserSetsWidth'); + const isScreenShare = isVideoBroadcasting(); + let webcamsAreaWidth; let webcamsAreaHeight; @@ -345,6 +359,18 @@ class LayoutManager extends Component { }; } + if (isScreenShare) { + webcamsAreaWidth = mediaAreaWidth; + webcamsAreaHeight = (mediaAreaHeight - presentationHeight) + < (mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT) + ? mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT + : mediaAreaHeight - presentationHeight; + return { + webcamsAreaWidth, + webcamsAreaHeight, + }; + } + if (autoArrangeLayout) { if (webcamsPlacement === 'left' || webcamsPlacement === 'right') { webcamsAreaWidth = (mediaAreaWidth - presentationWidth) @@ -426,6 +452,23 @@ class LayoutManager extends Component { }; } + calculatesScreenShareAreaSize( + mediaAreaWidth, mediaAreaHeight, webcamAreaWidth, webcamAreaHeight, + ) { + const { layoutContextState } = this.props; + const { numUsersVideo } = layoutContextState; + if (numUsersVideo < 1) { + return { + screenShareAreaWidth: mediaAreaWidth, + screenShareAreaHeight: mediaAreaHeight - 20, + }; + } + return { + screenShareAreaWidth: mediaAreaWidth, + screenShareAreaHeight: mediaAreaHeight - webcamAreaHeight - 30, + }; + } + calculatesLayout(panelChanged = false) { const { layoutContextState, @@ -467,6 +510,8 @@ class LayoutManager extends Component { left: firstPanel.width + secondPanel.width, }; + const isScreenShare = isVideoBroadcasting(); + const { presentationWidth, presentationHeight } = LayoutManager.calculatesPresentationSize( mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight, ); @@ -479,26 +524,36 @@ class LayoutManager extends Component { mediaAreaWidth, mediaAreaHeight, presentationWidth, presentationHeight, ); - const { presentationAreaWidth, presentationAreaHeight } = this.calculatesPresentationAreaSize( - mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight, - ); - const newWebcamsAreaSize = { width: webcamsAreaWidth, height: webcamsAreaHeight, }; - let newPresentationAreaSize; - if (!presentationIsFullscreen) { - newPresentationAreaSize = { - width: presentationAreaWidth || 0, - height: presentationAreaHeight || 0, + let newScreenShareAreaSize; + + if (isScreenShare) { + const { screenShareAreaWidth, screenShareAreaHeight } = this.calculatesPresentationAreaSize( + mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight, + ); + newScreenShareAreaSize = { + width: screenShareAreaWidth, + height: screenShareAreaHeight, }; } else { - newPresentationAreaSize = { - width: windowWidth(), - height: windowHeight(), - }; + const { presentationAreaWidth, presentationAreaHeight } = this.calculatesPresentationAreaSize( + mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight, + ); + if (!presentationIsFullscreen) { + newPresentationAreaSize = { + width: presentationAreaWidth || 0, + height: presentationAreaHeight || 0, + }; + } else { + newPresentationAreaSize = { + width: windowWidth(), + height: windowHeight(), + }; + } } return { @@ -508,6 +563,7 @@ class LayoutManager extends Component { breakoutRoomSize: newBreakoutRoomSize, webcamsAreaSize: newWebcamsAreaSize, presentationAreaSize: newPresentationAreaSize, + screenShareAreaSize: newScreenShareAreaSize, }; } diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx index 03aa57fc15..e139e3957c 100755 --- a/bigbluebutton-html5/imports/ui/components/media/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/media/container.jsx @@ -9,7 +9,7 @@ import VideoService from '/imports/ui/components/video-provider/service'; import getFromUserSettings from '/imports/ui/services/users-settings'; import { withModalMounter } from '/imports/ui/components/modal/service'; import Media from './component'; -import MediaService, { getSwapLayout, shouldEnableSwapLayout } from './service'; +import MediaService, { getSwapLayout, shouldEnableSwapLayout } from '/imports/ui/components/media/service'; import PresentationPodsContainer from '../presentation-pod/container'; import ScreenshareContainer from '../screenshare/container'; import DefaultContent from '../presentation/default-content/component'; diff --git a/bigbluebutton-html5/imports/ui/components/media/service.js b/bigbluebutton-html5/imports/ui/components/media/service.js index d8d1906839..4a0670f044 100755 --- a/bigbluebutton-html5/imports/ui/components/media/service.js +++ b/bigbluebutton-html5/imports/ui/components/media/service.js @@ -4,7 +4,6 @@ import { getVideoUrl } from '/imports/ui/components/external-video-player/servic import Auth from '/imports/ui/services/auth'; import Users from '/imports/api/users'; import Settings from '/imports/ui/services/settings'; -import PollingService from '/imports/ui/components/polling/service'; import getFromUserSettings from '/imports/ui/services/users-settings'; const LAYOUT_CONFIG = Meteor.settings.public.layout; 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 aad046c55f..16be859865 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 @@ -4,7 +4,6 @@ import cx from 'classnames'; import PropTypes from 'prop-types'; import Resizable from 're-resizable'; import { isMobile, isIPad13 } from 'react-device-detect'; -import _ from 'lodash'; import { withDraggableConsumer } from './context'; import VideoProviderContainer from '/imports/ui/components/video-provider/container'; import { styles } from '../styles.scss'; diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx index 3781cbab9c..d745ad70b8 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx @@ -170,7 +170,10 @@ class ScreenshareComponent extends React.Component {