Create a container for recording indicator

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

@@ -8,7 +8,7 @@ import getFromUserSettings from '/imports/ui/services/users-settings';
 import { defineMessages, injectIntl } from 'react-intl';
 import { styles } from './styles.scss';
 import Button from '../button/component';
-import RecordingIndicator from './recording-indicator/component';
+import RecordingIndicator from './recording-indicator/container';
 import SettingsDropdownContainer from './settings-dropdown/container';
 
 
@@ -77,11 +77,6 @@ class NavBar extends React.PureComponent {
       isBreakoutRoom,
       presentationTitle,
       amIModerator,
-      allowStartStopRecording,
-      autoStartRecording,
-      record,
-      recording,
-      time,
     } = this.props;
 
 
@@ -111,15 +106,8 @@ class NavBar extends React.PureComponent {
         </div>
         <div className={styles.center}>
           <h1 className={styles.presentationTitle}>{presentationTitle}</h1>
-          {record
-            ? <span className={styles.presentationTitleSeparator} aria-hidden>|</span>
-            : null}
+
           <RecordingIndicator
-            allowStartStopRecording={allowStartStopRecording}
-            autoStartRecording={autoStartRecording}
-            record={record}
-            recording={recording}
-            time={time}
             mountModal={mountModal}
             amIModerator={amIModerator}
           />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Session } from 'meteor/session';
-import Meetings, { RecordMeetings } from '/imports/api/meetings';
+import Meetings from '/imports/api/meetings';
 import Users from '/imports/api/users';
 import Auth from '/imports/ui/services/auth';
 import { meetingIsBreakout } from '/imports/ui/components/app/service';
@@ -10,10 +10,9 @@ import getFromUserSettings from '/imports/ui/services/users-settings';
 import userListService from '../user-list/service';
 import Service from './service';
 import NavBar from './component';
-import mapUser from '../../services/user/mapUser';
 
 const PUBLIC_CONFIG = Meteor.settings.public;
-
+const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 const NavBarContainer = ({ children, ...props }) => (
   <NavBar {...props}>
     {children}
@@ -28,7 +27,6 @@ export default withTracker(() => {
   const meetingObject = Meetings.findOne({
     meetingId,
   });
-  const recordObeject = RecordMeetings.findOne({ meetingId });
 
   if (meetingObject != null) {
     meetingTitle = meetingObject.meetingProp.name;
@@ -43,31 +41,15 @@ export default withTracker(() => {
     return hasUnreadMessages;
   };
 
-  RecordMeetings.find({ meetingId: Auth.meetingID }, { fields: { recording: 1 } }).observeChanges({
-    changed: (id, fields) => {
-      if (fields && fields.recording) {
-        this.window.parent.postMessage({ response: 'recordingStarted' }, '*');
-      }
-
-      if (fields && !fields.recording) {
-        this.window.parent.postMessage({ response: 'recordingStopped' }, '*');
-      }
-    },
-  });
-
   const currentUserId = Auth.userID;
   const { connectRecordingObserver, processOutsideToggleRecording } = Service;
   const currentUser = Users.findOne({ userId: Auth.userID });
   const openPanel = Session.get('openPanel');
   const isExpanded = openPanel !== '';
-  const amIModerator = mapUser(currentUser).isModerator;
+  const amIModerator = currentUser.role === ROLE_MODERATOR;
   const isBreakoutRoom = meetingIsBreakout();
   const hasUnreadMessages = checkUnreadMessages();
 
-  const toggleUserList = () => {
-    Session.set('isUserListOpen', !isExpanded);
-  };
-
   return {
     amIModerator,
     isExpanded,
@@ -78,11 +60,5 @@ export default withTracker(() => {
     presentationTitle: meetingTitle,
     hasUnreadMessages,
     isBreakoutRoom,
-    toggleUserList,
-    allowStartStopRecording: !!(recordObeject && recordObeject.allowStartStopRecording),
-    autoStartRecording: recordObeject && recordObeject.autoStartRecording,
-    record: recordObeject && recordObeject.record,
-    recording: recordObeject && recordObeject.recording,
-    time: recordObeject && recordObeject.time,
   };
 })(NavBarContainer);

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import RecordingContainer from '/imports/ui/components/recording/container';
 import humanizeSeconds from '/imports/utils/humanizeSeconds';
 import Tooltip from '/imports/ui/components/tooltip/component';
@@ -162,35 +162,40 @@ class RecordingIndicator extends PureComponent {
     const recordingButton = recording ? recordMeetingButtonWithTooltip : recordMeetingButton;
 
     return (
-      <div className={styles.recordingIndicator}>
-        {showButton
-          ? recordingButton
+      <Fragment>
+        {record
+          ? <span className={styles.presentationTitleSeparator} aria-hidden>|</span>
           : null}
+        <div className={styles.recordingIndicator}>
+          {showButton
+            ? recordingButton
+            : null}
 
-        {showButton ? null : (
-          <Tooltip
-            title={`${intl.formatMessage(recording
-              ? intlMessages.notificationRecordingStart
-              : intlMessages.notificationRecordingStop)}`}
-          >
-            <div
-              aria-label={`${intl.formatMessage(recording
+          {showButton ? null : (
+            <Tooltip
+              title={`${intl.formatMessage(recording
                 ? intlMessages.notificationRecordingStart
                 : intlMessages.notificationRecordingStop)}`}
-              className={styles.recordingStatusViewOnly}
             >
+              <div
+                aria-label={`${intl.formatMessage(recording
+                  ? intlMessages.notificationRecordingStart
+                  : intlMessages.notificationRecordingStop)}`}
+                className={styles.recordingStatusViewOnly}
+              >
 
-              <span
-                className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
-              />
+                <span
+                  className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
+                />
 
-              <div className={styles.presentationTitle}>
-                {recording ? humanizeSeconds(time) : null}
+                <div className={styles.presentationTitle}>
+                  {recording ? humanizeSeconds(time) : null}
+                </div>
               </div>
-            </div>
-          </Tooltip>
-        )}
-      </div>
+            </Tooltip>
+          )}
+        </div>
+      </Fragment>
     );
   }
 }

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import { RecordMeetings } from '/imports/api/meetings';
+import RecordIndicator from './component';
+import Auth from '/imports/ui/services/auth';
+
+const RecordIndicatorContainer = props => (
+  <RecordIndicator {...props} />
+);
+
+export default withTracker(() => {
+  const meetingId = Auth.meetingID;
+  const recordObeject = RecordMeetings.findOne({ meetingId });
+
+  RecordMeetings.find({ meetingId: Auth.meetingID }, { fields: { recording: 1 } }).observeChanges({
+    changed: (id, fields) => {
+      if (fields && fields.recording) {
+        this.window.parent.postMessage({ response: 'recordingStarted' }, '*');
+      }
+
+      if (fields && !fields.recording) {
+        this.window.parent.postMessage({ response: 'recordingStopped' }, '*');
+      }
+    },
+  });
+
+  return {
+    allowStartStopRecording: !!(recordObeject && recordObeject.allowStartStopRecording),
+    autoStartRecording: recordObeject && recordObeject.autoStartRecording,
+    record: recordObeject && recordObeject.record,
+    recording: recordObeject && recordObeject.recording,
+    time: recordObeject && recordObeject.time,
+  };
+})(RecordIndicatorContainer);

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss

@@ -155,3 +155,9 @@
     outline-style: solid;
   }
 }
+
+.presentationTitleSeparator {
+  color: var(--color-gray);
+  font-size: var(--font-size-base);
+  margin: 0 1rem;
+}

bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss

@@ -40,12 +40,6 @@
   }
 }
 
-.presentationTitleSeparator {
-  color: var(--color-gray);
-  font-size: var(--font-size-base);
-  margin: 0 1rem;
-}
-
 .btnWithNotificationDot {
   position: relative;