From 7822831b1e014acce412a45b203e8e9399347372 Mon Sep 17 00:00:00 2001
From: Radium Zheng <ztl8702@msn.com>
Date: Wed, 1 Aug 2018 08:20:31 +1000
Subject: [PATCH] UI: add a "Local Recording" label

---
 css/modals/video-quality/_video-quality.scss  |  4 +
 lang/main.json                                |  4 +-
 .../large-video/components/AbstractLabels.js  | 13 ++++
 .../large-video/components/Labels.web.js      |  5 ++
 .../components/LocalRecordingLabel.js         | 75 +++++++++++++++++++
 .../local-recording/components/index.js       |  1 +
 6 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 react/features/local-recording/components/LocalRecordingLabel.js

diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss
index e5255c7452..f251779c73 100644
--- a/css/modals/video-quality/_video-quality.scss
+++ b/css/modals/video-quality/_video-quality.scss
@@ -168,6 +168,10 @@
         background: #FF5630;
     }
 
+    .circular-label.local-rec {
+        background: #FF5630;
+    }
+
     .circular-label.stream {
         background: #0065FF;
     }
diff --git a/lang/main.json b/lang/main.json
index 22c3bbf960..5598f4e330 100644
--- a/lang/main.json
+++ b/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"
     }
 }
diff --git a/react/features/large-video/components/AbstractLabels.js b/react/features/large-video/components/AbstractLabels.js
index a7a7e0ce89..a1dcc49b3b 100644
--- a/react/features/large-video/components/AbstractLabels.js
+++ b/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 />
+        );
+    }
 }
 
 /**
diff --git a/react/features/large-video/components/Labels.web.js b/react/features/large-video/components/Labels.web.js
index c5e5c53431..4f1755d338 100644
--- a/react/features/large-video/components/Labels.web.js
+++ b/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);
diff --git a/react/features/local-recording/components/LocalRecordingLabel.js b/react/features/local-recording/components/LocalRecordingLabel.js
new file mode 100644
index 0000000000..ef7c023f6b
--- /dev/null
+++ b/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));
diff --git a/react/features/local-recording/components/index.js b/react/features/local-recording/components/index.js
index d1a07a50b8..d8c8b12116 100644
--- a/react/features/local-recording/components/index.js
+++ b/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';