Merge pull request #11529 from ramonlsouza/issue-11071

Fix openPanel errors related to polling and shared notes

bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss

@@ -112,7 +112,7 @@
 
 .error,
 .info,
-.space {
+.spacer {
   height: var(--max-chat-input-msg-height);
   max-height: var(--max-chat-input-msg-height);
 }

bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx

@@ -15,6 +15,10 @@ const USERLIST_MIN_WIDTH = 150;
 const USERLIST_MAX_WIDTH = 240;
 const CHAT_MIN_WIDTH = 150;
 const CHAT_MAX_WIDTH = 335;
+const POLL_MIN_WIDTH = 320;
+const POLL_MAX_WIDTH = 400;
+const NOTE_MIN_WIDTH = 340;
+const NOTE_MAX_WIDTH = 800;
 const NAVBAR_HEIGHT = 85;
 const ACTIONSBAR_HEIGHT = 42;
 
@@ -160,6 +164,22 @@ class LayoutManager extends Component {
         },
       },
     );
+    layoutContextDispatch(
+      {
+        type: 'setPollSize',
+        value: {
+          width: layoutSizes.pollSize.width,
+        },
+      },
+    );
+    layoutContextDispatch(
+      {
+        type: 'setNoteSize',
+        value: {
+          width: layoutSizes.noteSize.width,
+        },
+      },
+    );
     layoutContextDispatch(
       {
         type: 'setBreakoutRoomSize',
@@ -204,6 +224,12 @@ class LayoutManager extends Component {
       chatSize: {
         width: layoutSizes.chatSize.width,
       },
+      pollSize: {
+        width: layoutSizes.pollSize.width,
+      },
+      noteSize: {
+        width: layoutSizes.noteSize.width,
+      },
       breakoutRoomSize: {
         width: layoutSizes.breakoutRoomSize.width,
       },
@@ -263,6 +289,8 @@ class LayoutManager extends Component {
     const {
       userListSize: userListSizeContext,
       chatSize: chatSizeContext,
+      pollSize: pollSizeContext,
+      noteSize: noteSizeContext,
       breakoutRoomSize: breakoutRoomSizeContext,
     } = layoutContextState;
     const openPanel = Session.get('openPanel');
@@ -270,15 +298,22 @@ class LayoutManager extends Component {
 
     let storageUserListWidth;
     let storageChatWidth;
+    let storagePollWidth;
+    let storageNoteWidth;
     let storageBreakoutRoomWidth;
+
     if (storageLData) {
       storageUserListWidth = storageLData.userListSize.width;
       storageChatWidth = storageLData.chatSize.width;
+      storagePollWidth = storageLData.pollSize.width;
+      storageNoteWidth = storageLData.noteSize.width;
       storageBreakoutRoomWidth = storageLData.breakoutRoomSize.width;
     }
 
     let newUserListSize;
     let newChatSize;
+    let newPollSize;
+    let newNoteSize;
     let newBreakoutRoomSize;
 
     if (panelChanged && userListSizeContext.width !== 0) {
@@ -305,6 +340,30 @@ class LayoutManager extends Component {
       };
     }
 
+    if (panelChanged && pollSizeContext.width !== 0) {
+      newPollSize = pollSizeContext;
+    } else if (!storagePollWidth) {
+      newPollSize = {
+        width: min(max((windowWidth() * 0.2), POLL_MIN_WIDTH), POLL_MAX_WIDTH),
+      };
+    } else {
+      newPollSize = {
+        width: storagePollWidth,
+      };
+    }
+
+    if (panelChanged && noteSizeContext.width !== 0) {
+      newNoteSize = noteSizeContext;
+    } else if (!storageNoteWidth) {
+      newNoteSize = {
+        width: min(max((windowWidth() * 0.2), NOTE_MIN_WIDTH), NOTE_MAX_WIDTH),
+      };
+    } else {
+      newNoteSize = {
+        width: storageNoteWidth,
+      };
+    }
+
     if (panelChanged && breakoutRoomSizeContext.width !== 0) {
       newBreakoutRoomSize = breakoutRoomSizeContext;
     } else if (!storageBreakoutRoomWidth) {
@@ -325,18 +384,60 @@ class LayoutManager extends Component {
         newBreakoutRoomSize = {
           width: 0,
         };
+        newPollSize = {
+          width: 0,
+        };
+        newNoteSize = {
+          width: 0,
+        };
+        break;
+      }
+      case 'poll': {
+        newChatSize = {
+          width: 0,
+        };
+        newNoteSize = {
+          width: 0,
+        };
+        newBreakoutRoomSize = {
+          width: 0,
+        };
+        break;
+      }
+      case 'note': {
+        newChatSize = {
+          width: 0,
+        };
+        newPollSize = {
+          width: 0,
+        };
+        newBreakoutRoomSize = {
+          width: 0,
+        };
         break;
       }
       case 'chat': {
         newBreakoutRoomSize = {
           width: 0,
         };
+        newPollSize = {
+          width: 0,
+        };
+        newNoteSize = {
+          width: 0,
+        };
         break;
       }
       case 'breakoutroom': {
         newChatSize = {
           width: 0,
         };
+        newPollSize = {
+          width: 0,
+        };
+        newNoteSize = {
+          width: 0,
+        };
         break;
       }
       case '': {
@@ -349,6 +450,12 @@ class LayoutManager extends Component {
         newBreakoutRoomSize = {
           width: 0,
         };
+        newPollSize = {
+          width: 0,
+        };
+        newNoteSize = {
+          width: 0,
+        };
         break;
       }
       default: {
@@ -359,6 +466,8 @@ class LayoutManager extends Component {
     return {
       newUserListSize,
       newChatSize,
+      newPollSize,
+      newNoteSize,
       newBreakoutRoomSize,
     };
   }
@@ -485,15 +594,23 @@ class LayoutManager extends Component {
     const {
       newUserListSize,
       newChatSize,
+      newPollSize,
+      newNoteSize,
       newBreakoutRoomSize,
     } = panelsSize;
 
     const firstPanel = newUserListSize;
+
     let secondPanel = {
       width: 0,
     };
+
     if (newChatSize.width > 0) {
       secondPanel = newChatSize;
+    } else if (newPollSize.width > 0) {
+      secondPanel = newPollSize;
+    } else if (newNoteSize.width > 0) {
+      secondPanel = newNoteSize;
     } else if (newBreakoutRoomSize.width > 0) {
       secondPanel = newBreakoutRoomSize;
     }
@@ -544,6 +661,8 @@ class LayoutManager extends Component {
       mediaBounds: newMediaBounds,
       userListSize: newUserListSize,
       chatSize: newChatSize,
+      pollSize: newPollSize,
+      noteSize: newNoteSize,
       breakoutRoomSize: newBreakoutRoomSize,
       webcamsAreaSize: newWebcamsAreaSize,
       presentationAreaSize: newPresentationAreaSize,
@@ -562,6 +681,10 @@ export {
   USERLIST_MAX_WIDTH,
   CHAT_MIN_WIDTH,
   CHAT_MAX_WIDTH,
+  POLL_MIN_WIDTH,
+  POLL_MAX_WIDTH,
+  NOTE_MIN_WIDTH,
+  NOTE_MAX_WIDTH,
   NAVBAR_HEIGHT,
   ACTIONSBAR_HEIGHT,
   WEBCAMSAREA_MIN_PERCENT,

bigbluebutton-html5/imports/ui/components/meeting-ended/component.jsx

@@ -90,7 +90,11 @@ const propTypes = {
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
   code: PropTypes.string.isRequired,
-  reason: PropTypes.string.isRequired,
+  reason: PropTypes.string,
+};
+
+const defaultProps = {
+  reason: null,
 };
 
 class MeetingEnded extends PureComponent {
@@ -300,5 +304,6 @@ class MeetingEnded extends PureComponent {
 }
 
 MeetingEnded.propTypes = propTypes;
+MeetingEnded.defaultProps = defaultProps;
 
 export default injectIntl(MeetingEnded);

bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx

@@ -17,6 +17,10 @@ import {
   USERLIST_MAX_WIDTH,
   CHAT_MIN_WIDTH,
   CHAT_MAX_WIDTH,
+  POLL_MIN_WIDTH,
+  POLL_MAX_WIDTH,
+  NOTE_MIN_WIDTH,
+  NOTE_MAX_WIDTH,
 } from '/imports/ui/components/layout/layout-manager';
 
 const intlMessages = defineMessages({
@@ -53,14 +57,6 @@ const DEFAULT_PANEL_WIDTH = 340;
 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;
-const POLL_MAX_WIDTH = 400;
-
-// Variables for resizing shared notes.
-const NOTE_MIN_WIDTH = DEFAULT_PANEL_WIDTH;
-const NOTE_MAX_WIDTH = 800;
-
 // Variables for resizing captions.
 const CAPTIONS_MIN_WIDTH = DEFAULT_PANEL_WIDTH;
 const CAPTIONS_MAX_WIDTH = 400;