feat(recording): new label for live streaming (#2890)

css/_font.scss

@@ -201,3 +201,6 @@
 .icon-rec:before {
   content: "\e92b";
 }
+.icon-live:before {
+  content: "\e92c";
+}

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

@@ -174,22 +174,30 @@
 
     .recording-icon,
     .recording-icon i {
-        color: rgb(255, 86, 48);
         line-height: $videoStateIndicatorSize;
         font-size: $videoStateIndicatorSize;
         opacity: 0.9;
         position: relative;
     }
 
+    .icon-rec {
+        color: #FF5630;
+    }
+
+    .icon-live {
+        color: #0065FF;
+    }
+
     .recording-icon-background {
         background: white;
-        height: 25%;
+        border-radius: 50%;
+        height: calc(#{$videoStateIndicatorSize} - 1px);
         left: 50%;
         opacity: 0.9;
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 80%;
+        width: calc(#{$videoStateIndicatorSize} - 1px);
     }
 
     #recordingLabelText {

fonts/jitsi.svg

@@ -69,4 +69,5 @@
 <glyph unicode="&#xe929;" glyph-name="SD" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM281.6 451.175c1.925-47.075 40.95-76.65 101.15-76.65 63.35 0 102.375 31.15 102.375 82.075 0 39.2-21.875 61.075-72.625 71.75l-30.45 6.475c-29.575 6.3-41.65 15.225-41.65 30.8 0 19.25 17.5 31.5 43.925 31.5 25.55 0 44.1-13.3 46.55-33.25h49.7c-1.575 44.975-40.95 76.125-96.6 76.125-58.275 0-96.6-31.325-96.6-78.925 0-38.5 22.575-62.475 68.6-72.1l32.9-7c30.975-6.65 43.575-15.925 43.575-32.025 0-19.075-19.425-32.375-46.9-32.375-29.75 0-50.4 13.125-52.85 33.6h-51.1zM535 633.7v-252.7h99.4c75.6 0 118.475 46.025 118.475 128.1 0 79.1-43.4 124.6-118.475 124.6h-99.4zM587.85 588.55v-162.4h38.15c46.725 0 72.975 28.7 72.975 82.075 0 51.1-27.125 80.325-72.975 80.325h-38.15z" />
 <glyph unicode="&#xe92a;" glyph-name="camera-take-picture" d="M725.333 512c0-117.821-95.513-213.333-213.333-213.333s-213.333 95.513-213.333 213.333c0 117.821 95.513 213.333 213.333 213.333s213.333-95.513 213.333-213.333zM512 256c141.385 0 256 114.615 256 256s-114.615 256-256 256v0c-141.385 0-256-114.615-256-256s114.615-256 256-256v0zM512 213.333c-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667v0c164.949 0 298.667-133.718 298.667-298.667s-133.718-298.667-298.667-298.667v0z" />
 <glyph unicode="&#xe92b;" glyph-name="rec" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM581.333 433.782h-110.595v59.233h104.338v40.332h-104.338v56.87h110.595v43.539h-161.665v-243.512h161.665v43.539zM738.771 384c58.849 0 101.802 36.282 106.029 88.933h-49.717c-4.904-26.832-26.888-44.045-56.143-44.045-38.556 0-62.4 31.895-62.4 83.196s23.844 83.027 62.231 83.027c29.086 0 51.239-18.394 56.143-46.407h49.717c-3.72 52.989-48.026 91.296-105.86 91.296-70.855 0-114.485-48.77-114.485-127.916 0-79.314 43.798-128.084 114.485-128.084zM230.27 478.502h41.769l45.489-88.258h57.834l-51.408 96.19c28.072 11.138 44.306 38.138 44.306 69.189 0 48.432-32.976 78.133-86.582 78.133h-102.478v-243.512h51.070v88.258zM230.27 592.58v-74.927h44.813c25.704 0 40.754 13.838 40.754 37.295 0 23.119-15.896 37.632-41.262 37.632h-44.306z" />
+<glyph unicode="&#xe92c;" glyph-name="live" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM298.225 430.025h-112.35v206.5h-52.85v-252.525h165.2v46.025zM399.025 384v252.525h-52.85v-252.525h52.85zM591.525 384l84.175 252.525h-56.875l-56.35-193.025h-3.15l-57.4 193.025h-59.675l85.4-252.525h63.875zM886.050 429.15h-114.45v61.425h107.975v41.825h-107.975v58.975h114.45v45.15h-167.3v-252.525h167.3v45.15z" />
 </font></defs></svg>

react/features/recording/components/RecordingLabel.web.js

@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 import { translate } from '../../base/i18n';
 import { JitsiRecordingStatus } from '../../base/lib-jitsi-meet';
 
+import { RECORDING_TYPES } from '../constants';
+
 /**
  * Implements a React {@link Component} which displays the current state of
  * conference recording. Currently it uses CSS to display itself automatically
@@ -43,6 +45,12 @@ class RecordingLabel extends Component {
          */
         _labelDisplayConfiguration: PropTypes.object,
 
+        /**
+         * Whether the recording feature is live streaming (jibri) or is file
+         * recording (jirecon).
+         */
+        _recordingType: PropTypes.string,
+
         /**
          * Invoked to obtain translated string.
          */
@@ -93,7 +101,11 @@ class RecordingLabel extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const { _isRecording, _labelDisplayConfiguration } = this.props;
+        const {
+            _isRecording,
+            _labelDisplayConfiguration,
+            _recordingType
+        } = this.props;
         const { centered, key, showSpinner } = _labelDisplayConfiguration || {};
 
         const isVisible = Boolean(key);
@@ -114,7 +126,11 @@ class RecordingLabel extends Component {
                 { _isRecording
                     ? <div className = 'recording-icon'>
                         <div className = 'recording-icon-background' />
-                        <i className = 'icon-rec' />
+                        <i
+                            className = {
+                                _recordingType === RECORDING_TYPES.JIBRI
+                                    ? 'icon-live'
+                                    : 'icon-rec' } />
                     </div>
                     : <div id = 'recordingLabelText'>
                         { this.props.t(key) }
@@ -139,20 +155,23 @@ class RecordingLabel extends Component {
  * @returns {{
  *     _filmstripVisible: boolean,
  *     _isRecording: boolean,
- *     _labelDisplayConfiguration: Object
+ *     _labelDisplayConfiguration: Object,
+ *     _recordingType: string
  * }}
  */
 function _mapStateToProps(state) {
     const { visible } = state['features/filmstrip'];
     const {
         labelDisplayConfiguration,
-        recordingState
+        recordingState,
+        recordingType
     } = state['features/recording'];
 
     return {
         _filmstripVisible: visible,
         _isRecording: recordingState === JitsiRecordingStatus.ON,
-        _labelDisplayConfiguration: labelDisplayConfiguration
+        _labelDisplayConfiguration: labelDisplayConfiguration,
+        _recordingType: recordingType
     };
 }