The presentation gets the size from the layout manager

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 (<MeetingEnded code={codeError} />);
     }
     // this.props.annotationsHandler.stop();
-    return (
-      <Fragment>
-        <LayoutManager />
-        <AppContainer {...this.props} baseControls={stateControls} />
-      </Fragment>
-    );
+    return (<AppContainer {...this.props} baseControls={stateControls} />);
   }
 
   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)
-        ? <LoadingScreen />
-        : this.renderByState()
+      <Fragment>
+        <LayoutManager
+          layoutContextState={layoutContextState}
+          layoutContextDispatch={layoutContextDispatch}
+        />
+        {
+          (!meetingExisted && !meetingExist && Auth.loggedIn)
+            ? <LoadingScreen />
+            : (
+              <IntlStartup locale={locale} baseControls={stateControls}>
+                {this.renderByState()}
+              </IntlStartup>
+            )
+        }
+      </Fragment>
     );
   }
 }
@@ -389,6 +406,6 @@ const BaseContainer = withTracker(() => {
     loggedIn,
     codeError,
   };
-})(Base);
+})(withLayoutContext(Base));
 
 export default BaseContainer;

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 (
-      <div className={styles.actionsbar}>
+      <div
+        className={styles.actionsbar}
+        style={{
+          height: ACTIONSBAR_HEIGHT,
+        }}
+      >
         <div className={styles.left}>
           <ActionsDropdown {...{
             amIPresenter,

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

@@ -23,6 +23,7 @@ import MediaService from '/imports/ui/components/media/service';
 import ManyWebcamsNotifier from '/imports/ui/components/video-provider/many-users-notify/container';
 import { withDraggableContext } from '../media/webcam-draggable-overlay/context';
 import { styles } from './styles';
+import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager';
 
 const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
 const APP_CONFIG = Meteor.settings.public.app;
@@ -229,7 +230,12 @@ class App extends Component {
     if (!navbar) return null;
 
     return (
-      <header className={styles.navbar}>
+      <header
+        className={styles.navbar}
+        style={{
+          height: NAVBAR_HEIGHT,
+        }}
+      >
         {navbar}
       </header>
     );

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 (
     <LayoutContext.Provider value={{
       layoutContextState,
@@ -95,11 +112,8 @@ const ContextConsumer = Component => props => (
 const withLayoutConsumer = Component => ContextConsumer(Component);
 const withLayoutContext = Component => withProvider(withLayoutConsumer(Component));
 
-export default {
-  LayoutContext,
-};
-
 export {
+  withProvider,
   withLayoutConsumer,
   withLayoutContext,
 };

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 <Fragment />;
+  }
+}
+
+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 (<Fragment />);
-};
-
-export default withLayoutContext(LayoutManager);

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;
 

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 (
-      <div className={styles.navbar}>
+      <div
+        className={styles.navbar}
+      >
         <div className={styles.top}>
           <div className={styles.left}>
             {!isExpanded ? null

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,

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;

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,

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