[issue-16954] - new structure and connection status modal transition

bigbluebutton-html5/client/main.html

@@ -149,4 +149,5 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
   <span id="destination"></span>
   <audio id="remote-media" autoplay>
   </audio>
+  <div id="modals-container"></div>
 </body>

bigbluebutton-html5/client/stylesheets/modals.css

@@ -38,3 +38,33 @@
   border: none;
   background-color: transparent;
 }
+
+.modal-low {
+  z-index: 1001;
+}
+
+.modal-medium {
+  z-index: 1002;
+}
+
+.modal-high {
+  z-index: 1003;
+}
+
+/* Within a same priority, hide all but first (FIFO) */
+.modal-low ~ .modal-low, 
+.modal-medium ~ .modal-medium, 
+.modal-high ~ .modal-high {
+  display: none;
+}
+
+/* Hide all low priority modals when a medium or high priority modals are displayed */
+#modals-container:has(.modal-medium) .modal-low, 
+#modals-container:has(.modal-high) .modal-low {
+  display: none;
+}
+
+/* Hide all medium priority modals when a high priority modal is displayed */
+#modals-container:has(.modal-high) .modal-medium {
+  display: none;
+}

bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js

@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { ModalScrollboxVertical } from '/imports/ui/stylesheets/styled-components/scrollable';
 import { borderRadius } from '/imports/ui/stylesheets/styled-components/general';
@@ -21,5 +22,34 @@ const BaseModal = styled(ModalScrollboxVertical)`
 `;
 
 export default {
-  BaseModal,
+  BaseModal: (props) => 
+  { 
+    const { setIsOpen, modalName, children } = props;
+
+    const closeEventHandler = useCallback (() => {
+        setIsOpen(false);
+    } , []);
+    useEffect( () => {
+      // Only add event listener if name is specified
+      if(!modalName) return;
+
+      const closeEventName = `CLOSE_MODAL_${modalName.toUpperCase()}`;
+
+      // Listen to close event on mount
+      document.addEventListener(closeEventName, closeEventHandler);
+
+      // Remove listener on unmount
+      return () => {
+          document.removeEventListener(closeEventName, closeEventHandler);
+      };
+    }, []);
+    console.log(props.priority)
+    return (<BaseModal
+      className={`modal-${props.priority}`}
+      parentSelector={()=>document.querySelector('#modals-container')}
+      {...props}
+    >
+      {children}
+    </BaseModal>
+    )},
 };

bigbluebutton-html5/imports/ui/components/connection-status/button/component.jsx

@@ -19,6 +19,13 @@ const intlMessages = defineMessages({
 });
 
 class ConnectionStatusButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false,
+    }
+  }
+
   renderIcon(level = 'normal') {
     return(
       <Styled.IconWrapper>
@@ -30,11 +37,27 @@ class ConnectionStatusButton extends PureComponent {
     );
   }
 
+  setModalIsOpen = (isOpen) => this.setState({ isModalOpen: isOpen }); 
+
+  renderModal(isModalOpen) {
+    return (
+      isModalOpen ?
+      <ConnectionStatusModalContainer
+        {...{
+          isModalOpen,
+          setModalIsOpen: this.setModalIsOpen
+        }}
+      /> : null
+    )
+  }
+
   render() {
     const {
       intl,
       connected,
     } = this.props;
+    const { isModalOpen } = this.state;
+
 
     if (!connected) {
       return (
@@ -51,13 +74,13 @@ class ConnectionStatusButton extends PureComponent {
             onClick={() => {}}
             data-test="connectionStatusButton"
           />
+          {this.renderModal(isModalOpen)}
         </Styled.ButtonWrapper>
       );
     }
 
     const {
       stats,
-      mountModal,
     } = this.props;
 
     let color;
@@ -89,12 +112,13 @@ class ConnectionStatusButton extends PureComponent {
           size="sm"
           color={color}
           circle
-          onClick={() => mountModal(<ConnectionStatusModalContainer />)}
+          onClick={() => this.setState({isModalOpen: true})}
           data-test="connectionStatusButton"
         />
+        {this.renderModal(isModalOpen)}
       </Styled.ButtonWrapper>
     );
   }
 }
 
-export default injectIntl(withModalMounter(ConnectionStatusButton));
+export default injectIntl(ConnectionStatusButton);

bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx

@@ -134,7 +134,7 @@ const intlMessages = defineMessages({
 });
 
 const propTypes = {
-  closeModal: PropTypes.func.isRequired,
+  setModalIsOpen: PropTypes.func.isRequired,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
@@ -402,7 +402,7 @@ class ConnectionStatusComponent extends PureComponent {
       videoDownloadLabel,
     } = this;
 
-    const { intl, closeModal } = this.props;
+    const { intl, setModalIsOpen } = this.props;
 
     const { networkData } = this.state;
 
@@ -441,7 +441,7 @@ class ConnectionStatusComponent extends PureComponent {
       >
         <Styled.HelperWrapper>
           <Styled.Helper>
-            <ConnectionStatusHelper closeModal={() => closeModal()} />
+            <ConnectionStatusHelper closeModal={() => setModalIsOpen(false)} />
           </Styled.Helper>
         </Styled.HelperWrapper>
         <Styled.NetworkDataContent>
@@ -517,16 +517,20 @@ class ConnectionStatusComponent extends PureComponent {
 
   render() {
     const {
-      closeModal,
+      setModalIsOpen,
       intl,
+      isModalOpen,
     } = this.props;
 
     const { selectedTab } = this.state;
 
     return (
       <Styled.ConnectionStatusModal
-        onRequestClose={() => closeModal()}
+        priority="low"
+        onRequestClose={() => setModalIsOpen(false)}
+        setIsOpen={setModalIsOpen}
         hideBorder
+        isOpen={isModalOpen}
         contentLabel={intl.formatMessage(intlMessages.ariaTitle)}
         data-test="connectionStatusModal"
       >

bigbluebutton-html5/imports/ui/components/connection-status/modal/container.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
-import { withModalMounter } from '/imports/ui/components/common/modal/service';
 import ConnectionStatusService from '../service';
 import ConnectionStatusComponent from './component';
 
 const connectionStatusContainer = props => <ConnectionStatusComponent {...props} />;
 
-export default withModalMounter(withTracker(({ mountModal }) => ({
-  closeModal: () => {
-    mountModal(null);
-  },
+export default withTracker(() => ({
   connectionStatus: ConnectionStatusService.getConnectionStatus(),
-}))(connectionStatusContainer));
+}))(connectionStatusContainer);