feat(recording): new icon when recording is active (#2884)

- Update font files to add new icon.
- Update markup and style so the icon has a small background
  to fill in the text of the icon.
- Remove some css transitions that don't seem to do much.

css/_font.scss

@@ -198,3 +198,6 @@
 .icon-camera-take-picture:before {
   content: "\e92a";
 }
+.icon-rec:before {
+  content: "\e92b";
+}

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

@@ -153,6 +153,12 @@
     position: absolute;
     box-sizing: border-box;
 
+    &.is-recording {
+        background: none;
+        opacity: 0.9;
+        padding: 0;
+    }
+
     i {
         line-height: $videoStateIndicatorSize;
     }
@@ -165,6 +171,30 @@
         min-width: $videoStateIndicatorSize;
         text-align: center;
     }
+
+    .recording-icon,
+    .recording-icon i {
+        color: rgb(255, 86, 48);
+        line-height: $videoStateIndicatorSize;
+        font-size: $videoStateIndicatorSize;
+        opacity: 0.9;
+        position: relative;
+    }
+
+    .recording-icon-background {
+        background: white;
+        height: 25%;
+        left: 50%;
+        opacity: 0.9;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+    }
+
+    #recordingLabelText {
+        display: inline-block;
+    }
 }
 
 .centeredVideoLabel.moveToCorner {
@@ -186,8 +216,6 @@
     &.moveToCorner {
         bottom: auto;
         transform: none;
-        -webkit-transition: all 2s 2s linear;
-        transition: all 2s 2s linear;
     }
 }
 

fonts/jitsi.svg

@@ -68,4 +68,5 @@
 <glyph unicode="&#xe928;" glyph-name="LD" 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-512zM472.4 433.325h-112.35v206.5h-52.85v-252.525h165.2v46.025zM520.35 640v-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.4zM573.2 594.85v-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="&#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" />
 </font></defs></svg>

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
+import { JitsiRecordingStatus } from '../../base/lib-jitsi-meet';
 
 /**
  * Implements a React {@link Component} which displays the current state of
@@ -25,6 +26,11 @@ class RecordingLabel extends Component {
          */
         _filmstripVisible: PropTypes.bool,
 
+        /**
+         * Whether or not the conference is currently being recorded.
+         */
+        _isRecording: PropTypes.bool,
+
         /**
          * An object to describe the {@code RecordingLabel} content. If no
          * translation key to display is specified, the label will apply CSS to
@@ -87,12 +93,13 @@ class RecordingLabel extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const { _labelDisplayConfiguration } = this.props;
+        const { _isRecording, _labelDisplayConfiguration } = this.props;
         const { centered, key, showSpinner } = _labelDisplayConfiguration || {};
 
         const isVisible = Boolean(key);
         const rootClassName = [
             'video-state-indicator centeredVideoLabel',
+            _isRecording ? 'is-recording' : '',
             isVisible ? 'show-inline' : '',
             centered ? '' : 'moveToCorner',
             this.state.filmstripBecomingVisible ? 'opening' : '',
@@ -101,19 +108,24 @@ class RecordingLabel extends Component {
         ].join(' ');
 
         return (
-            <span
+            <div
                 className = { rootClassName }
                 id = 'recordingLabel'>
-                <span id = 'recordingLabelText'>
+                { _isRecording
-                    { this.props.t(key) }
+                    ? <div className = 'recording-icon'>
-                </span>
+                        <div className = 'recording-icon-background' />
-                { showSpinner
+                        <i className = 'icon-rec' />
-                    ? <img
+                    </div>
+                    : <div id = 'recordingLabelText'>
+                        { this.props.t(key) }
+                    </div> }
+                { !_isRecording
+                    && showSpinner
+                    && <img
                         className = 'recordingSpinner'
                         id = 'recordingSpinner'
-                        src = 'images/spin.svg' />
+                        src = 'images/spin.svg' /> }
-                    : null }
+            </div>
-            </span>
         );
     }
 }
@@ -126,27 +138,20 @@ class RecordingLabel extends Component {
  * @private
  * @returns {{
  *     _filmstripVisible: boolean,
+ *     _isRecording: boolean,
  *     _labelDisplayConfiguration: Object
  * }}
  */
 function _mapStateToProps(state) {
     const { visible } = state['features/filmstrip'];
-    const { labelDisplayConfiguration } = state['features/recording'];
+    const {
+        labelDisplayConfiguration,
+        recordingState
+    } = state['features/recording'];
 
     return {
-        /**
-         * Whether or not the filmstrip is currently set to be displayed.
-         *
-         * @type {boolean}
-         */
         _filmstripVisible: visible,
-
+        _isRecording: recordingState === JitsiRecordingStatus.ON,
-        /**
-         * An object describing how {@code RecordingLabel} should display its
-         * contents.
-         *
-         * @type {Object}
-         */
         _labelDisplayConfiguration: labelDisplayConfiguration
     };
 }