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
bbaldino
parent
81fc961998
commit
0a0256501c
|
|
@ -198,3 +198,6 @@
|
|||
.icon-camera-take-picture:before {
|
||||
content: "\e92a";
|
||||
}
|
||||
.icon-rec:before {
|
||||
content: "\e92b";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
fonts/jitsi.eot
BIN
fonts/jitsi.eot
Binary file not shown.
|
|
@ -68,4 +68,5 @@
|
|||
<glyph unicode="" 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="" 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="" 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="" 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 |
BIN
fonts/jitsi.ttf
BIN
fonts/jitsi.ttf
Binary file not shown.
BIN
fonts/jitsi.woff
BIN
fonts/jitsi.woff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue