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.
This commit is contained in:
virtuacoplenny 2018-04-26 14:24:52 -07:00 committed by bbaldino
parent 81fc961998
commit 0a0256501c
9 changed files with 486 additions and 391 deletions

View File

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

View File

@ -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;
}
}

Binary file not shown.

View File

@ -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>

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -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'>
{ this.props.t(key) }
</span>
{ showSpinner
? <img
{ _isRecording
? <div className = 'recording-icon'>
<div className = 'recording-icon-background' />
<i className = 'icon-rec' />
</div>
: <div id = 'recordingLabelText'>
{ this.props.t(key) }
</div> }
{ !_isRecording
&& showSpinner
&& <img
className = 'recordingSpinner'
id = 'recordingSpinner'
src = 'images/spin.svg' />
: null }
</span>
src = 'images/spin.svg' /> }
</div>
);
}
}
@ -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,
/**
* An object describing how {@code RecordingLabel} should display its
* contents.
*
* @type {Object}
*/
_isRecording: recordingState === JitsiRecordingStatus.ON,
_labelDisplayConfiguration: labelDisplayConfiguration
};
}