From 297154f78a8b511b2d9987b328932fede603494e Mon Sep 17 00:00:00 2001 From: Vitor Mateus Date: Wed, 25 Mar 2020 09:52:23 -0300 Subject: [PATCH] The presentation gets the size from the layout manager --- .../imports/startup/client/base.jsx | 39 ++- .../ui/components/actions-bar/component.jsx | 8 +- .../imports/ui/components/app/component.jsx | 8 +- .../imports/ui/components/layout/context.jsx | 32 +- .../ui/components/layout/layout-manager.jsx | 327 ++++++++++++------ .../webcam-draggable-overlay/context.jsx | 2 +- .../ui/components/nav-bar/component.jsx | 9 +- .../imports/ui/components/nav-bar/styles.scss | 1 - .../ui/components/panel-manager/component.jsx | 131 +++++-- .../ui/components/presentation/component.jsx | 31 +- .../private/config/settings.yml | 2 +- 11 files changed, 419 insertions(+), 171 deletions(-) diff --git a/bigbluebutton-html5/imports/startup/client/base.jsx b/bigbluebutton-html5/imports/startup/client/base.jsx index 07063ce484..54995be0b6 100755 --- a/bigbluebutton-html5/imports/startup/client/base.jsx +++ b/bigbluebutton-html5/imports/startup/client/base.jsx @@ -19,6 +19,8 @@ import { notify } from '/imports/ui/services/notification'; import deviceInfo from '/imports/utils/deviceInfo'; import getFromUserSettings from '/imports/ui/services/users-settings'; import LayoutManager from '/imports/ui/components/layout/layout-manager'; +import { withLayoutContext } from '/imports/ui/components/layout/context'; +import IntlStartup from '/imports/startup/client/intl'; const CHAT_CONFIG = Meteor.settings.public.chat; const CHAT_ENABLED = CHAT_CONFIG.enabled; @@ -204,22 +206,37 @@ class Base extends Component { return (); } // this.props.annotationsHandler.stop(); - return ( - - - - - ); + return (); } render() { - const { meetingExist } = this.props; + const { + meetingExist, + locale, + layoutContextState, + layoutContextDispatch, + } = this.props; + + const { updateLoadingState } = this; + const stateControls = { updateLoadingState }; const { meetingExisted } = this.state; return ( - (!meetingExisted && !meetingExist && Auth.loggedIn) - ? - : this.renderByState() + + + { + (!meetingExisted && !meetingExist && Auth.loggedIn) + ? + : ( + + {this.renderByState()} + + ) + } + ); } } @@ -389,6 +406,6 @@ const BaseContainer = withTracker(() => { loggedIn, codeError, }; -})(Base); +})(withLayoutContext(Base)); export default BaseContainer; diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx index cbb2f601bf..8c01afd478 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx @@ -7,6 +7,7 @@ import AudioControlsContainer from '../audio/audio-controls/container'; import JoinVideoOptionsContainer from '../video-provider/video-button/container'; import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container'; import PresentationOptionsContainer from './presentation-options/component'; +import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager'; class ActionsBar extends PureComponent { render() { @@ -45,7 +46,12 @@ class ActionsBar extends PureComponent { actionBarClasses[styles.mobileLayoutSwapped] = isLayoutSwapped && amIPresenter; return ( -
+
+
{navbar}
); diff --git a/bigbluebutton-html5/imports/ui/components/layout/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context.jsx index 2364ab7c57..56eef52c34 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context.jsx @@ -1,8 +1,12 @@ -import React, { createContext, useReducer, useEffect } from 'react'; +import React, { createContext, useReducer } from 'react'; -const LayoutContext = createContext(); +export const LayoutContext = createContext(); const initialState = { + windowSize: { + width: 0, + height: 0, + }, userListSize: { width: 0, }, @@ -17,10 +21,20 @@ const initialState = { width: 0, height: 0, }, + presentationIsFullscreen: null, }; const reducer = (state, action) => { switch (action.type) { + case 'setWindowSize': { + return { + ...state, + windowSize: { + width: action.value.width, + height: action.value.height, + }, + }; + } case 'setUserListSize': { return { ...state, @@ -55,6 +69,12 @@ const reducer = (state, action) => { }, }; } + case 'setPresentationFullscreen': { + return { + ...state, + presentationIsFullscreen: action.value, + }; + } default: { throw new Error('Unexpected action'); } @@ -65,9 +85,6 @@ const ContextProvider = (props) => { const [layoutContextState, layoutContextDispatch] = useReducer(reducer, initialState); const { children } = props; - useEffect(() => { - }); - return ( props => ( const withLayoutConsumer = Component => ContextConsumer(Component); const withLayoutContext = Component => withProvider(withLayoutConsumer(Component)); -export default { - LayoutContext, -}; - export { + withProvider, withLayoutConsumer, withLayoutContext, }; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx index ebcfd32984..36c625b374 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx @@ -1,115 +1,147 @@ -import React, { useEffect, Fragment } from 'react'; -import { withLayoutContext } from './context'; +import React, { Component, Fragment } from 'react'; +// import { withLayoutConsumer } from './context'; import Storage from '/imports/ui/services/storage/session'; +import { Session } from 'meteor/session'; const windowWidth = () => window.innerWidth; +const windowHeight = () => window.innerHeight; const min = (value1, value2) => (value1 <= value2 ? value1 : value2); const max = (value1, value2) => (value1 >= value2 ? value1 : value2); +// values based on sass file const USERLIST_MIN_WIDTH = 150; -const USERLIST_MAX_WIDTH = 250; +const USERLIST_MAX_WIDTH = 240; const CHAT_MIN_WIDTH = 150; -const CHAT_MAX_WIDTH = 350; +const CHAT_MAX_WIDTH = 335; +const NAVBAR_HEIGHT = 85; +const ACTIONSBAR_HEIGHT = 42; const storageLayoutData = () => Storage.getItem('layoutData'); -const calculaLayout = () => { - const userListSize = { - width: min(max((windowWidth() * 0.1), USERLIST_MIN_WIDTH), USERLIST_MAX_WIDTH), - }; - const chatSize = { - width: min(max((windowWidth() * 0.2), CHAT_MIN_WIDTH), CHAT_MAX_WIDTH), - }; - const webcamsAreaSize = { - width: windowWidth() - (userListSize.width + chatSize.width), - }; - const presentationAreaSize = { - width: windowWidth() - (userListSize.width + chatSize.width), - }; - return { - userListSize, - chatSize, - webcamsAreaSize, - presentationAreaSize, - }; -}; +class LayoutManager extends Component { + constructor(props) { + super(props); -const setInitialValues = (props) => { - const { layoutContextDispatch } = props; - const layoutSizes = calculaLayout(); - - let userListWidth; - let chatWidth; - let webcamsAreaWidth; - let presentationAreaWidth; - let storageWindowWidth; - - if (storageLayoutData()) { - storageWindowWidth = storageLayoutData().windowSize.width; - userListWidth = storageLayoutData().userListSize.width; - chatWidth = storageLayoutData().chatSize.width; - webcamsAreaWidth = storageLayoutData().webcamsAreaSize.width; - presentationAreaWidth = storageLayoutData().presentationAreaSize.width; + this.setLayoutSizes = this.setLayoutSizes.bind(this); + this.calculaLayout = this.calculaLayout.bind(this); } - userListWidth = !userListWidth || userListWidth === 0 || windowWidth() !== storageWindowWidth - ? layoutSizes.userListSize.width - : userListWidth; + componentDidMount() { + this.setLayoutSizes(); + window.addEventListener('resize', _.throttle(() => this.setLayoutSizes(), 200)); - chatWidth = !chatWidth || chatWidth === 0 || windowWidth() !== storageWindowWidth - ? layoutSizes.chatSize.width - : chatWidth; + window.addEventListener('userListResizeChanged', () => { + const userlistChanged = true; + const chatChanged = false; + this.setLayoutSizes(userlistChanged, chatChanged); + }); + window.addEventListener('chatResizeChanged', () => { + const userlistChanged = false; + const chatChanged = true; + this.setLayoutSizes(userlistChanged, chatChanged); + }); + } - webcamsAreaWidth = !webcamsAreaWidth - || webcamsAreaWidth === 0 - || windowWidth() !== storageWindowWidth - ? windowWidth() - (userListWidth + chatWidth) - : webcamsAreaWidth; + setLayoutSizes(userlistChanged = false, chatChanged = false) { + const { layoutContextDispatch } = this.props; - presentationAreaWidth = !presentationAreaWidth - || presentationAreaWidth === 0 - || windowWidth() !== storageWindowWidth - ? windowWidth() - (userListWidth + chatWidth) - : presentationAreaWidth; + let userListWidth; + let chatWidth; + let webcamsAreaWidth; + let presentationAreaWidth; + let webcamsAreaHeight; + let storageWindowWidth; + let presentationAreaHeight; - layoutContextDispatch( - { - type: 'setUserListSize', - value: { - width: userListWidth, + const layoutSizes = this.calculaLayout(userlistChanged, chatChanged); + // Get storage data and set in size variables + const storageLData = storageLayoutData(); + if (storageLData) { + storageWindowWidth = storageLData.windowSize.width; + userListWidth = storageLData.userListSize.width; + chatWidth = storageLData.chatSize.width; + webcamsAreaWidth = storageLData.webcamsAreaSize.width; + webcamsAreaHeight = storageLData.webcamsAreaSize.height; + presentationAreaWidth = storageLData.presentationAreaSize.width; + presentationAreaHeight = storageLData.presentationAreaSize.height; + } + + // If storage data does not exist or window size is changed or layout is changed + // (userlist or chat list size changed) + // Get size from calc function + if (!userListWidth + || windowWidth() !== storageWindowWidth + || userlistChanged + || chatChanged) { + userListWidth = layoutSizes.userListSize.width; + } + if (!chatWidth + || windowWidth() !== storageWindowWidth + || chatChanged + || userlistChanged) { + chatWidth = layoutSizes.chatSize.width; + } + if (!storageLayoutData() || windowWidth() !== storageWindowWidth) { + webcamsAreaWidth = layoutSizes.webcamsAreaSize.width; + webcamsAreaHeight = layoutSizes.webcamsAreaSize.height; + } + if (!storageLayoutData() + || windowWidth() !== storageWindowWidth + || layoutSizes.presentationAreaSize.width !== storageLayoutData().presentationAreaSize.width + || userlistChanged + || chatChanged) { + presentationAreaWidth = layoutSizes.presentationAreaSize.width; + presentationAreaHeight = layoutSizes.presentationAreaSize.height; + } + + layoutContextDispatch( + { + type: 'setWindowSize', + value: { + width: windowWidth(), + height: windowHeight(), + }, }, - }, - ); + ); + layoutContextDispatch( + { + type: 'setUserListSize', + value: { + width: userListWidth, + }, + }, + ); + layoutContextDispatch( + { + type: 'setChatSize', + value: { + width: chatWidth, + }, + }, + ); + layoutContextDispatch( + { + type: 'setWebcamsAreaSize', + value: { + width: webcamsAreaWidth, + height: webcamsAreaHeight, + }, + }, + ); + layoutContextDispatch( + { + type: 'setPresentationAreaSize', + value: { + width: presentationAreaWidth, + height: presentationAreaHeight, + }, + }, + ); - layoutContextDispatch( - { - type: 'setChatSize', - value: { - width: chatWidth, - }, - }, - ); - layoutContextDispatch( - { - type: 'setWebcamsAreaSize', - value: { - width: webcamsAreaWidth, - }, - }, - ); - layoutContextDispatch( - { - type: 'setPresentationAreaSize', - value: { - width: presentationAreaWidth, - }, - }, - ); - - const newLayoutData = () => ( - { + const newLayoutData = { windowSize: { width: windowWidth(), + height: windowHeight(), }, userListSize: { width: userListWidth, @@ -119,24 +151,111 @@ const setInitialValues = (props) => { }, webcamsAreaSize: { width: webcamsAreaWidth, - height: 0, + height: webcamsAreaHeight, }, presentationAreaSize: { width: presentationAreaWidth, - height: 0, + height: presentationAreaHeight, }, + }; + + Storage.setItem('layoutData', newLayoutData); + } + + calculaLayout(userlistChanged = false, chatChanged = false) { + const { layoutContextState } = this.props; + const { + userListSize: userListSizeContext, + chatSize: chatSizeContext, + presentationIsFullscreen, + } = layoutContextState; + const openPanel = Session.get('openPanel'); + + const storageLData = storageLayoutData(); + let storageUserListWidth; + let storageChatWidth; + if (storageLData) { + storageUserListWidth = storageLData.userListSize.width; + storageChatWidth = storageLData.chatSize.width; } - ); - Storage.setItem('layoutData', newLayoutData()); + let newUserListSize; + let newChatSize; + if (userlistChanged || chatChanged) { + newUserListSize = userListSizeContext; + newChatSize = chatSizeContext; + } else { + if (!storageUserListWidth) { + newUserListSize = { + width: min(max((windowWidth() * 0.1), USERLIST_MIN_WIDTH), USERLIST_MAX_WIDTH), + }; + } else { + newUserListSize = { + width: storageUserListWidth, + }; + } + if (!storageChatWidth) { + newChatSize = { + width: min(max((windowWidth() * 0.2), CHAT_MIN_WIDTH), CHAT_MAX_WIDTH), + }; + } else { + newChatSize = { + width: storageChatWidth, + }; + } + } + + if (openPanel === 'userlist') { + newChatSize = { + width: 0, + }; + } + + if (!openPanel) { + newUserListSize = { + width: 0, + }; + newChatSize = { + width: 0, + }; + } + + const newWebcamsAreaSize = { + width: windowWidth() - (newUserListSize.width + newChatSize.width), + }; + + let newPresentationAreaSize; + if (!presentationIsFullscreen) { + newPresentationAreaSize = { + width: windowWidth() - (newUserListSize.width + newChatSize.width), + height: windowHeight() - (NAVBAR_HEIGHT + ACTIONSBAR_HEIGHT), + }; + } else { + newPresentationAreaSize = { + width: windowWidth(), + height: windowHeight(), + }; + } + + return { + userListSize: newUserListSize, + chatSize: newChatSize, + webcamsAreaSize: newWebcamsAreaSize, + presentationAreaSize: newPresentationAreaSize, + }; + } + + render() { + return ; + } +} + +export default LayoutManager; +export { + USERLIST_MIN_WIDTH, + USERLIST_MAX_WIDTH, + CHAT_MIN_WIDTH, + CHAT_MAX_WIDTH, + NAVBAR_HEIGHT, + ACTIONSBAR_HEIGHT, }; - -const LayoutManager = (props) => { - useEffect(() => { - setInitialValues(props); - }, []); - - return (); -}; - -export default withLayoutContext(LayoutManager); diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx index a0981de896..34b0e8935b 100644 --- a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx @@ -1,5 +1,5 @@ import React, { createContext, useReducer, useEffect } from 'react'; -import Storage from '../../../services/storage/session'; +import Storage from '/imports/ui/services/storage/session'; const { webcamsDefaultPlacement } = Meteor.settings.public.layout; diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx index 0a23e1e2c2..fa019c0176 100755 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Session } from 'meteor/session'; import cx from 'classnames'; @@ -12,6 +12,7 @@ import Button from '../button/component'; import RecordingIndicator from './recording-indicator/container'; import TalkingIndicatorContainer from '/imports/ui/components/nav-bar/talking-indicator/container'; import SettingsDropdownContainer from './settings-dropdown/container'; +import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager'; const intlMessages = defineMessages({ @@ -41,7 +42,7 @@ const defaultProps = { shortcuts: '', }; -class NavBar extends PureComponent { +class NavBar extends Component { static handleToggleUserList() { Session.set( 'openPanel', @@ -89,7 +90,9 @@ class NavBar extends PureComponent { ariaLabel += hasUnreadMessages ? (` ${intl.formatMessage(intlMessages.newMessages)}`) : ''; return ( -
+
{!isExpanded ? null diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss index b3e4205a47..0040f6a63a 100755 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss @@ -11,7 +11,6 @@ .navbar { display: flex; flex-direction: column; - height:var(--mobile-nav-height); } .top, diff --git a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx index 1c867fa59c..bdc3c0d502 100755 --- a/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import BreakoutRoomContainer from '/imports/ui/components/breakout-room/container'; import UserListContainer from '/imports/ui/components/user-list/container'; @@ -11,6 +11,13 @@ import { defineMessages, injectIntl } from 'react-intl'; import Resizable from 're-resizable'; import { styles } from '/imports/ui/components/app/styles'; import _ from 'lodash'; +import { withLayoutConsumer } from '/imports/ui/components/layout/context'; +import { + USERLIST_MIN_WIDTH, + USERLIST_MAX_WIDTH, + CHAT_MIN_WIDTH, + CHAT_MAX_WIDTH, +} from '/imports/ui/components/layout/layout-manager'; const intlMessages = defineMessages({ chatLabel: { @@ -43,12 +50,8 @@ const propTypes = { const DEFAULT_PANEL_WIDTH = 340; // Variables for resizing user-list. -const USERLIST_MIN_WIDTH_PX = 150; -const USERLIST_MAX_WIDTH_PX = 240; - -// Variables for resizing chat. -const CHAT_MIN_WIDTH = 150; -const CHAT_MAX_WIDTH = 350; +const USERLIST_MIN_WIDTH_PX = USERLIST_MIN_WIDTH; +const USERLIST_MAX_WIDTH_PX = USERLIST_MAX_WIDTH; // Variables for resizing poll. const POLL_MIN_WIDTH = 320; @@ -66,11 +69,9 @@ const CAPTIONS_MAX_WIDTH = 400; const WAITING_MIN_WIDTH = DEFAULT_PANEL_WIDTH; const WAITING_MAX_WIDTH = 800; -const dispatchResizeEvent = () => window.dispatchEvent(new Event('resize')); - -class PanelManager extends PureComponent { - constructor() { - super(); +class PanelManager extends Component { + constructor(props) { + super(props); this.padKey = _.uniqueId('resize-pad-'); this.userlistKey = _.uniqueId('userlist-'); @@ -81,23 +82,95 @@ class PanelManager extends PureComponent { this.captionsKey = _.uniqueId('captions-'); this.waitingUsers = _.uniqueId('waitingUsers-'); + const { layoutContextState } = props; + const { userListSize, chatSize } = layoutContextState; + this.state = { - chatWidth: DEFAULT_PANEL_WIDTH, + chatWidth: chatSize.width, pollWidth: DEFAULT_PANEL_WIDTH, - userlistWidth: 180, + userlistWidth: userListSize.width, noteWidth: DEFAULT_PANEL_WIDTH, captionsWidth: DEFAULT_PANEL_WIDTH, waitingWidth: DEFAULT_PANEL_WIDTH, }; + + this.setUserListWidth = this.setUserListWidth.bind(this); } - componentDidUpdate(prevProps) { - const { openPanel } = this.props; - const { openPanel: oldOpenPanel } = prevProps; + shouldComponentUpdate(prevProps) { + const { layoutContextState } = this.props; + const { layoutContextState: prevLayoutContextState } = prevProps; + const { userListSize, chatSize } = layoutContextState; + const { userListSize: prevUserListSize, chatSize: prevChatSize } = prevLayoutContextState; - if (openPanel !== oldOpenPanel) { - window.dispatchEvent(new Event('resize')); + if ((layoutContextState !== prevLayoutContextState) + && (userListSize.width === prevUserListSize.width + && chatSize.width === prevChatSize.width)) return false; + return true; + } + + + componentDidUpdate(prevProps) { + const { chatWidth, userlistWidth } = this.state; + const { layoutContextState } = this.props; + const { userListSize, chatSize } = layoutContextState; + const { layoutContextState: oldLayoutContextState } = prevProps; + const { userListSize: oldUserListSize, chatSize: oldChatSize } = oldLayoutContextState; + + if (userListSize.width !== oldUserListSize.width && userListSize.width !== userlistWidth) { + this.setUserListWidth(userListSize.width); } + if (chatSize.width !== oldChatSize.width && chatSize.width !== chatWidth) { + this.setChatWidth(chatSize.width); + } + } + + setUserListWidth(userlistWidth) { + this.setState({ userlistWidth }); + } + + setChatWidth(chatWidth) { + this.setState({ chatWidth }); + } + + userListResizeStop(addvalue) { + const { userlistWidth } = this.state; + const { layoutContextDispatch } = this.props; + + this.setState({ + userlistWidth: userlistWidth + addvalue, + }); + + layoutContextDispatch( + { + type: 'setUserListSize', + value: { + width: userlistWidth + addvalue, + }, + }, + ); + + window.dispatchEvent(new Event('userListResizeChanged')); + } + + chatResizeStop(addvalue) { + const { chatWidth } = this.state; + const { layoutContextDispatch } = this.props; + + this.setState({ + chatWidth: chatWidth + addvalue, + }); + + layoutContextDispatch( + { + type: 'setChatSize', + value: { + width: chatWidth + addvalue, + }, + }, + ); + + window.dispatchEvent(new Event('chatResizeChanged')); } renderUserList() { @@ -145,11 +218,9 @@ class PanelManager extends PureComponent { enable={resizableEnableOptions} key={this.userlistKey} size={{ width: userlistWidth }} - onResize={dispatchResizeEvent} + // onResize={dispatchResizeEvent} onResizeStop={(e, direction, ref, d) => { - this.setState({ - userlistWidth: userlistWidth + d.width, - }); + this.userListResizeStop(d.width); }} > {this.renderUserList()} @@ -194,11 +265,9 @@ class PanelManager extends PureComponent { enable={resizableEnableOptions} key={this.chatKey} size={{ width: chatWidth }} - onResize={dispatchResizeEvent} + // onResize={dispatchResizeEvent} onResizeStop={(e, direction, ref, d) => { - this.setState({ - chatWidth: chatWidth + d.width, - }); + this.chatResizeStop(d.width); }} > {this.renderChat()} @@ -243,7 +312,7 @@ class PanelManager extends PureComponent { enable={resizableEnableOptions} key={this.noteKey} size={{ width: noteWidth }} - onResize={dispatchResizeEvent} + // onResize={dispatchResizeEvent} onResizeStop={(e, direction, ref, d) => { this.setState({ noteWidth: noteWidth + d.width, @@ -292,7 +361,7 @@ class PanelManager extends PureComponent { enable={resizableEnableOptions} key={this.captionsKey} size={{ width: captionsWidth }} - onResize={dispatchResizeEvent} + // onResize={dispatchResizeEvent} onResizeStop={(e, direction, ref, d) => { this.setState({ captionsWidth: captionsWidth + d.width, @@ -341,7 +410,7 @@ class PanelManager extends PureComponent { enable={resizableEnableOptions} key={this.waitingUsers} size={{ width: waitingWidth }} - onResize={dispatchResizeEvent} + // onResize={dispatchResizeEvent} onResizeStop={(e, direction, ref, d) => { this.setState({ waitingWidth: waitingWidth + d.width, @@ -469,6 +538,6 @@ class PanelManager extends PureComponent { } } -export default injectIntl(PanelManager); +export default injectIntl(withLayoutConsumer(PanelManager)); PanelManager.propTypes = propTypes; diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx index adf8f4e09b..996bccb883 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx @@ -18,6 +18,7 @@ import FullscreenService from '../fullscreen-button/service'; import FullscreenButtonContainer from '../fullscreen-button/container'; import { withDraggableConsumer } from '../media/webcam-draggable-overlay/context'; import Icon from '/imports/ui/components/icon/component'; +import { withLayoutConsumer } from '/imports/ui/components/layout/context'; const intlMessages = defineMessages({ presentationLabel: { @@ -84,7 +85,7 @@ class PresentationArea extends PureComponent { componentDidMount() { // adding an event listener to scale the whiteboard on 'resize' events sent by chat/userlist etc - window.addEventListener('resize', this.onResize); + // window.addEventListener('resize', this.onResize); this.getInitialPresentationSizes(); this.refPresentationContainer.addEventListener('fullscreenchange', this.onFullscreenChange); @@ -109,7 +110,15 @@ class PresentationArea extends PureComponent { isViewer, toggleSwapLayout, restoreOnUpdate, + layoutContextState, } = this.props; + const { presentationAreaSize } = layoutContextState; + const { layoutContextState: prevLayoutContextState } = prevProps; + const { presentationAreaSize: prevPresentationAreaSize } = prevLayoutContextState; + + if (presentationAreaSize !== prevPresentationAreaSize) { + this.handleResize(); + } const { width: prevWidth, height: prevHeight } = prevProps.slidePosition; const { width: currWidth, height: currHeight } = slidePosition; @@ -141,23 +150,25 @@ class PresentationArea extends PureComponent { const positionChanged = slidePosition.viewBoxHeight !== prevProps.slidePosition.viewBoxHeight || slidePosition.viewBoxWidth !== prevProps.slidePosition.viewBoxWidth; const pollPublished = publishedPoll && !prevProps.publishedPoll; - if (slideChanged || positionChanged || pollPublished || presentationChanged) { + if (slideChanged || positionChanged || pollPublished) { toggleSwapLayout(); } } } componentWillUnmount() { - window.removeEventListener('resize', this.onResize); + // window.removeEventListener('resize', this.onResize); this.refPresentationContainer.removeEventListener('fullscreenchange', this.onFullscreenChange); } onFullscreenChange() { + const { layoutContextDispatch } = this.props; const { isFullscreen } = this.state; const newIsFullscreen = FullscreenService.isFullScreen(this.refPresentationContainer); if (isFullscreen !== newIsFullscreen) { this.setState({ isFullscreen: newIsFullscreen }); - window.dispatchEvent(new Event('resize')); + layoutContextDispatch({ type: 'setPresentationFullscreen', value: newIsFullscreen }); + // window.dispatchEvent(new Event('resize')); } } @@ -178,8 +189,10 @@ class PresentationArea extends PureComponent { } getPresentationSizesAvailable() { - const { userIsPresenter, multiUser } = this.props; + const { userIsPresenter, multiUser, layoutContextState } = this.props; const { refPresentationArea, refWhiteboardArea } = this; + const { presentationAreaSize } = layoutContextState; + const presentationSizes = {}; if (refPresentationArea && refWhiteboardArea) { @@ -194,8 +207,10 @@ class PresentationArea extends PureComponent { ({ clientWidth, clientHeight } = refWhiteboardArea); } - presentationSizes.presentationAreaHeight = clientHeight - this.getToolbarHeight(); - presentationSizes.presentationAreaWidth = clientWidth; + presentationSizes.presentationAreaHeight = presentationAreaSize.height - this.getToolbarHeight(); + presentationSizes.presentationAreaWidth = presentationAreaSize.width; + // presentationSizes.presentationAreaHeight = clientHeight - this.getToolbarHeight(); + // presentationSizes.presentationAreaWidth = clientWidth; } return presentationSizes; } @@ -736,7 +751,7 @@ class PresentationArea extends PureComponent { } } -export default injectIntl(withDraggableConsumer(PresentationArea)); +export default injectIntl(withDraggableConsumer(withLayoutConsumer(PresentationArea))); PresentationArea.propTypes = { intl: intlShape.isRequired, diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml index 638445528b..ee84d0dd72 100755 --- a/bigbluebutton-html5/private/config/settings.yml +++ b/bigbluebutton-html5/private/config/settings.yml @@ -88,7 +88,7 @@ public: enableNetworkMonitoring: false packetLostThreshold: 10 kurento: - wsUrl: HOST + wsUrl: wss://bbb23.bbbvm.imdt.com.br/bbb-webrtc-sfu chromeDefaultExtensionKey: akgoaoikmbmhcopjgakkcepdgdgkjfbc chromeDefaultExtensionLink: https://chrome.google.com/webstore/detail/bigbluebutton-screenshare/akgoaoikmbmhcopjgakkcepdgdgkjfbc chromeExtensionKey: KEY