Change recording indicator to match #5127 changes

bigbluebutton-html5/imports/api/meetings/server/methods.js

@@ -5,5 +5,5 @@ import toggleRecording from './methods/toggleRecording';
 
 Meteor.methods(mapToAcl(['methods.endMeeting', 'methods.toggleRecording'], {
   endMeeting,
-  toggleRecording
+  toggleRecording,
 }));

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

@@ -29,12 +29,20 @@ const intlMessages = defineMessages({
     id: 'app.navBar.recording',
     description: 'label for when the session is being recorded',
   },
+  recordingIndicatorOn: {
+    id: 'app.navBar.recording.on',
+    description: 'label for indicator when the session is being recorded',
+  },
+  recordingIndicatorOff: {
+    id: 'app.navBar.recording.off',
+    description: 'label for indicator when the session is not being recorded',
+  },
 });
 
 const propTypes = {
   presentationTitle: PropTypes.string.isRequired,
   hasUnreadMessages: PropTypes.bool.isRequired,
-  beingRecorded: PropTypes.bool.isRequired,
+  beingRecorded: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -165,6 +173,8 @@ class NavBar extends Component {
   render() {
     const { hasUnreadMessages, beingRecorded, isExpanded, intl } = this.props;
 
+    const recordingMessage = beingRecorded.recording ? 'recordingIndicatorOn' : 'recordingIndicatorOff';
+
     const toggleBtnClasses = {};
     toggleBtnClasses[styles.btn] = true;
     toggleBtnClasses[styles.btnWithNotificationDot] = hasUnreadMessages;
@@ -191,7 +201,11 @@ class NavBar extends Component {
         </div>
         <div className={styles.center} role="banner">
           {this.renderPresentationTitle()}
-          <RecordingIndicator beingRecorded={beingRecorded} title={intl.formatMessage(intlMessages.recordingSession)}/>
+          <span className={styles.presentationTitleSeparator}>|</span>
+          <RecordingIndicator
+            {...beingRecorded}
+            title={intl.formatMessage(intlMessages[recordingMessage])}
+          />
         </div>
         <div className={styles.right}>
           <SettingsDropdownContainer />

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

@@ -29,7 +29,7 @@ export default withRouter(withTracker(({ location, router }) => {
 
   if (meetingObject != null) {
     meetingTitle = meetingObject.meetingProp.name;
-    meetingRecorded = meetingObject.recordProp.recording;
+    meetingRecorded = meetingObject.recordProp;
   }
 
   const checkUnreadMessages = () => {

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

@@ -1,23 +1,21 @@
 import React from 'react';
-import Button from '/imports/ui/components/button/component';
+import Icon from '/imports/ui/components/icon/component';
 import { styles } from './styles';
 
-const RecordingIndicator = ({ beingRecorded, title }) => {
-  if (!beingRecorded) return null;
+const RecordingIndicator = ({ record, allowStartStopRecording, title, recording }) => {
+
+  if (!record || !allowStartStopRecording) return null;
 
   return (
-    <Button
-      hideLabel
-      className={styles.recordBtn}
-      aria-label={title}
-      label={title}
-      icon="record"
-      size="md"
-      circle
-      ghost
-      onClick={() => null}
-    />
-  )
+    <div className={recording ? styles.recording : styles.recordIndicator}>
+      <Icon
+        iconName="record"
+      />
+      <span>
+        {title}
+      </span>
+    </div>
+  );
 };
 
 export default RecordingIndicator;

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

@@ -1,17 +1,33 @@
 @import "../../../stylesheets/variables/_all";
 
-.recordBtn {
+%base {
+  color: $color-gray;
+  font-size: $font-size-base;
+  height: $font-size-base;
+  display: flex;
 
-  &:hover,
-  &:focus {
-    span {
-      background-color: transparent !important;
-      box-shadow: none !important;
-    }
-  }
-
-  i {
-    color: red;
+  span {
+    font-size: $font-size-base;
+    margin: 0 0.5rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+}
+
+.recordIndicator {
+  @extend %base;
+}
+
+.recording {
+  @extend %base;
+
+  i {
+    color: $color-danger;
+  }
+
+  span {
+    color: $color-white;
   }
 
 }

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

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

bigbluebutton-html5/private/locales/en.json

@@ -93,6 +93,8 @@
     "app.navBar.userListToggleBtnLabel": "User List Toggle",
     "app.navBar.toggleUserList.newMessages": "with new message notification",
     "app.navBar.recording": "This session is being recorded",
+    "app.navBar.recording.on": "Recording",
+    "app.navBar.recording.off": "Not recording",
     "app.leaveConfirmation.title": "Leave Session",
     "app.leaveConfirmation.message": "Do you want to leave this meeting?",
     "app.leaveConfirmation.confirmLabel": "Leave",