UI: add a "Local Recording" label

css/modals/video-quality/_video-quality.scss

@@ -168,6 +168,10 @@
         background: #FF5630;
     }
 
+    .circular-label.local-rec {
+        background: #FF5630;
+    }
+
     .circular-label.stream {
         background: #0065FF;
     }

lang/main.json

@@ -692,6 +692,8 @@
             "notModerator": "You are not the moderator. You cannot start or stop local recording."
         },
         "yes": "Yes",
-        "no": "No"
+        "no": "No",
+        "label": "LOR",
+        "labelToolTip": "Local recording is engaged"
     }
 }

react/features/large-video/components/AbstractLabels.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 
 import { isFilmstripVisible } from '../../filmstrip';
+import { LocalRecordingLabel } from '../../local-recording';
 import { RecordingLabel } from '../../recording';
 import { VideoQualityLabel } from '../../video-quality';
 import { TranscribingLabel } from '../../transcribing/';
@@ -63,6 +64,18 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
             <TranscribingLabel />
         );
     }
+
+    /**
+     * Renders the {@code LocalRecordingLabel}.
+     *
+     * @returns {React$Element}
+     * @protected
+     */
+    _renderLocalRecordingLabel() {
+        return (
+            <LocalRecordingLabel />
+        );
+    }
 }
 
 /**

react/features/large-video/components/Labels.web.js

@@ -85,6 +85,9 @@ class Labels extends AbstractLabels<Props, State> {
                     this._renderRecordingLabel(
                         JitsiRecordingConstants.mode.STREAM)
                 }
+                {
+                    this._renderLocalRecordingLabel()
+                }
                 {
                     this._renderTranscribingLabel()
                 }
@@ -100,6 +103,8 @@ class Labels extends AbstractLabels<Props, State> {
     _renderVideoQualityLabel: () => React$Element<*>
 
     _renderTranscribingLabel: () => React$Element<*>
+
+    _renderLocalRecordingLabel: () => React$Element<*>
 }
 
 export default connect(_mapStateToProps)(Labels);

react/features/local-recording/components/LocalRecordingLabel.js

@@ -0,0 +1,75 @@
+// @flow
+
+import Tooltip from '@atlaskit/tooltip';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n/index';
+import { CircularLabel } from '../../base/label/index';
+
+
+/**
+ * The type of the React {@code Component} props of {@link LocalRecordingLabel}.
+ */
+type Props = {
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * Whether local recording is engaged or not.
+     */
+    isEngaged: boolean
+};
+
+/**
+ * React Component for displaying a label when local recording is engaged.
+ *
+ * @extends Component
+ */
+class LocalRecordingLabel extends Component<Props> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        if (!this.props.isEngaged) {
+            return null;
+        }
+
+        return (
+            <Tooltip
+                content = { this.props.t('localRecording.labelToolTip') }
+                position = { 'left' }>
+                <CircularLabel
+                    className = 'local-rec'
+                    label = { this.props.t('localRecording.label') } />
+            </Tooltip>
+        );
+    }
+
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code LocalRecordingLabel} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { isEngaged } = state['features/local-recording'];
+
+    return {
+        isEngaged
+    };
+}
+
+export default translate(connect(_mapStateToProps)(LocalRecordingLabel));

react/features/local-recording/components/index.js

@@ -1,4 +1,5 @@
 export { default as LocalRecordingButton } from './LocalRecordingButton';
+export { default as LocalRecordingLabel } from './LocalRecordingLabel';
 export {
     default as LocalRecordingInfoDialog
 } from './LocalRecordingInfoDialog';