[issue-16954] - Migrating recording modals components

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -18,7 +18,6 @@ const propTypes = {
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
-  mountModal: PropTypes.func.isRequired,
   amIModerator: PropTypes.bool.isRequired,
   shortcuts: PropTypes.string,
   handleTakePresenter: PropTypes.func.isRequired,
@@ -123,9 +122,10 @@ class ActionsDropdown extends PureComponent {
 
   componentDidUpdate(prevProps) {
     const { amIPresenter: wasPresenter } = prevProps;
-    const { amIPresenter: isPresenter, mountModal } = this.props;
+    const { amIPresenter: isPresenter } = this.props;
+    const { setExternalVideoModalIsOpen,  } = this.state;
     if (wasPresenter && !isPresenter) {
-      mountModal(null);
+      setExternalVideoModalIsOpen(false);
     }
   }
 
@@ -143,7 +143,6 @@ class ActionsDropdown extends PureComponent {
       isPollingEnabled,
       isSelectRandomUserEnabled,
       stopExternalVideoShare,
-      mountModal,
       layoutContextDispatch,
       setMeetingLayout,
       setPushLayout,

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx

@@ -51,7 +51,6 @@ const propTypes = {
   amIModerator: PropTypes.bool,
   record: PropTypes.bool,
   recording: PropTypes.bool,
-  mountModal: PropTypes.func.isRequired,
   time: PropTypes.number,
   allowStartStopRecording: PropTypes.bool.isRequired,
 };
@@ -69,10 +68,14 @@ class RecordingIndicator extends PureComponent {
     this.state = {
       time: (props.time ? props.time : 0),
       shouldNotify: false,
+      isRecordingNotifyModalOpen: false,
+      isRecordingModalOpen: false,
     };
 
     this.incrementTime = this.incrementTime.bind(this);
     this.toggleShouldNotify = this.toggleShouldNotify.bind(this);
+    this.setRecordingNotifyModalIsOpen = this.setRecordingNotifyModalIsOpen.bind(this);
+    this.setRecordingModalIsOpen = this.setRecordingModalIsOpen.bind(this);
   }
 
   toggleShouldNotify() {
@@ -89,7 +92,7 @@ class RecordingIndicator extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { recording, mountModal, getModal, recordingNotificationEnabled } = this.props;
+    const { recording, getModal, recordingNotificationEnabled } = this.props;
     const { shouldNotify } = this.state;
 
     if (!recording) {
@@ -108,7 +111,7 @@ class RecordingIndicator extends PureComponent {
   
       // should only display notification modal when other modals are closed
       if (shouldNotify && !isModalOpen) {
-        mountModal(<RecordingNotifyContainer toggleShouldNotify={this.toggleShouldNotify} />);
+        this.setRecordingNotifyModalIsOpen(true);
       }  
     }
   }
@@ -124,11 +127,18 @@ class RecordingIndicator extends PureComponent {
     }
   }
 
+  setRecordingNotifyModalIsOpen(value) {
+    this.setState({ isRecordingNotifyModalOpen: value });
+  }
+  
+  setRecordingModalIsOpen(value) {
+    this.setState({ isRecordingModalOpen: value });
+  }
+
   render() {
     const {
       record,
       recording,
-      mountModal,
       amIModerator,
       intl,
       allowStartStopRecording,
@@ -137,7 +147,7 @@ class RecordingIndicator extends PureComponent {
       isPhone,
     } = this.props;
 
-    const { time } = this.state;
+    const { time, isRecordingNotifyModalOpen, isRecordingModalOpen } = this.state;
     if (!record) return null;
 
     if (!this.interval && recording) {
@@ -163,7 +173,7 @@ class RecordingIndicator extends PureComponent {
       if (!micUser && !recording) {
         notify(intl.formatMessage(intlMessages.emptyAudioBrdige), 'error', 'warning');
       }
-      mountModal(<RecordingContainer amIModerator={amIModerator} />);
+      this.setRecordingModalIsOpen(true);
       document.activeElement.blur();
     };
 
@@ -223,36 +233,55 @@ class RecordingIndicator extends PureComponent {
     const recordingButton = recording ? recordMeetingButtonWithTooltip : recordMeetingButton;
 
     return (
-      <Fragment>
-        {record
-          ? <Styled.PresentationTitleSeparator aria-hidden>|</Styled.PresentationTitleSeparator>
-          : null}
-        <Styled.RecordingIndicator data-test="recordingIndicator">
-          {showButton
-            ? recordingButton
+      <>
+        <Fragment>
+          {record
+            ? <Styled.PresentationTitleSeparator aria-hidden>|</Styled.PresentationTitleSeparator>
             : null}
+          <Styled.RecordingIndicator data-test="recordingIndicator">
+            {showButton
+              ? recordingButton
+              : null}
 
-          {showButton ? null : (
-            <Tooltip
-              title={`${intl.formatMessage(recording
-                ? intlMessages.notificationRecordingStart
-                : intlMessages.notificationRecordingStop)}`}
-            >
-              <Styled.RecordingStatusViewOnly
-                aria-label={`${intl.formatMessage(recording
+            {showButton ? null : (
+              <Tooltip
+                title={`${intl.formatMessage(recording
                   ? intlMessages.notificationRecordingStart
                   : intlMessages.notificationRecordingStop)}`}
-                  recording={recording}
               >
-                {recordingIndicatorIcon}
+                <Styled.RecordingStatusViewOnly
+                  aria-label={`${intl.formatMessage(recording
+                    ? intlMessages.notificationRecordingStart
+                    : intlMessages.notificationRecordingStop)}`}
+                    recording={recording}
+                >
+                  {recordingIndicatorIcon}
 
-                {recording
-                  ? <Styled.PresentationTitle>{humanizeSeconds(time)}</Styled.PresentationTitle> : null}
-              </Styled.RecordingStatusViewOnly>
-            </Tooltip>
-          )}
-        </Styled.RecordingIndicator>
-      </Fragment>
+                  {recording
+                    ? <Styled.PresentationTitle>{humanizeSeconds(time)}</Styled.PresentationTitle> : null}
+                </Styled.RecordingStatusViewOnly>
+              </Tooltip>
+            )}
+          </Styled.RecordingIndicator>
+        </Fragment>
+        {isRecordingNotifyModalOpen ? <RecordingNotifyContainer 
+          toggleShouldNotify={this.toggleShouldNotify}
+          {...{
+            priority: "high",
+            setIsOpen: this.setRecordingNotifyModalIsOpen,
+            isOpen: isRecordingNotifyModalOpen
+          }}
+        /> : null}
+        {isRecordingModalOpen ? <RecordingContainer 
+          amIModerator={amIModerator}
+          {...{
+            onRequestClose: () => this.setRecordingModalIsOpen(false),
+            priority: "high",
+            setIsOpen: this.setRecordingModalIsOpen,
+            isOpen: isRecordingModalOpen
+          }}
+        /> : null}
+      </>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/component.jsx

@@ -33,7 +33,9 @@ const intlMessages = defineMessages({
 
 const LOGOUT_CODE = '680';
 
-const RecordingNotifyModal = ({ intl, closeModal, toggleShouldNotify }) => {
+const RecordingNotifyModal = (props) => {
+  const { intl, toggleShouldNotify, closeModal } = props;
+
   function skipButtonHandle() {
     makeCall('userLeftMeeting');
     Session.set('codeError', LOGOUT_CODE);
@@ -45,6 +47,7 @@ const RecordingNotifyModal = ({ intl, closeModal, toggleShouldNotify }) => {
       contentLabel={intl.formatMessage(intlMessages.title)}
       shouldShowCloseButton={false}
       title={intl.formatMessage(intlMessages.title)}
+      {...props}
     >
       <Styled.Container>
         <Styled.Description>

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/container.jsx

@@ -1,12 +1,13 @@
 import { withTracker } from 'meteor/react-meteor-data';
-import { withModalMounter } from '/imports/ui/components/common/modal/service';
 import RecordingNotifyModal from './component';
 
-export default withModalMounter(withTracker(({ mountModal, toggleShouldNotify}) => {
+export default withTracker((props) => {
+  const { toggleShouldNotify, setIsOpen } = props;
   return {
     closeModal: () => {
       toggleShouldNotify();
-      mountModal(null);
+      setIsOpen(false);
     },
+    ...props,
   };
-})(RecordingNotifyModal));
+})(RecordingNotifyModal);

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

@@ -74,6 +74,7 @@ class RecordingComponent extends PureComponent {
         title={title}
         description={description}
         disableConfirmButton={!isMeteorConnected}
+        {...this.props}
       />
     );
   }

bigbluebutton-html5/imports/ui/components/recording/container.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
-import { withModalMounter } from '/imports/ui/components/common/modal/service';
 import { makeCall } from '/imports/ui/services/api';
 import { RecordMeetings } from '/imports/api/meetings';
 import Auth from '/imports/ui/services/auth';
@@ -8,13 +7,13 @@ import RecordingComponent from './component';
 
 const RecordingContainer = props => <RecordingComponent {...props} />;
 
-export default withModalMounter(withTracker(({ mountModal }) => {
+export default withTracker(({ setIsOpen }) => {
   const { recording, time } = RecordMeetings.findOne({ meetingId: Auth.meetingID });
 
   return ({
     toggleRecording: () => {
       makeCall('toggleRecording');
-      mountModal(null);
+      setIsOpen(false);
     },
 
     recordingStatus: recording,
@@ -22,4 +21,4 @@ export default withModalMounter(withTracker(({ mountModal }) => {
     isMeteorConnected: Meteor.status().connected,
 
   });
-})(RecordingContainer));
+})(RecordingContainer);