haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: refine LocalRecordingInfoDialog

This commit is contained in:
Radium Zheng 2018-08-01 09:51:37 +10:00
parent 4550848eac
commit dda7568a48
4 changed files with 166 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/main.scss
View File

@ -45,6 +45,7 @@
@import 'modals/settings/settings';
@import 'modals/speaker_stats/speaker_stats';
@import 'modals/video-quality/video-quality';
@import 'modals/local-recording/local-recording';
@import 'videolayout_default';
@import 'notice';
@import 'popup_menu';

92
css/modals/local-recording/_local-recording.scss Normal file
View File

@ -0,0 +1,92 @@
.localrec-participant-stats {
list-style: none;
padding: 0;
width: 100%;
font-weight: 500;
.localrec-participant-stats-item__status-dot {
position: relative;
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
margin: 0 auto;
&.status-on {
background: green;
}
&.status-off {
background: gray;
}
&.status-unknown {
background: darkgoldenrod;
}
&.status-error {
background: darkred;
}
}
.localrec-participant-stats-item__status,
.localrec-participant-stats-item__name,
.localrec-participant-stats-item__sessionid {
display: inline-block;
margin: 5px 0;
vertical-align: middle;
}
.localrec-participant-stats-item__status {
width: 5%;
}
.localrec-participant-stats-item__name {
width: 40%;
}
.localrec-participant-stats-item__sessionid {
width: 55%;
}
.localrec-participant-stats-item__name,
.localrec-participant-stats-item__sessionid {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.localrec-control-info-label {
font-weight: bold;
}
.localrec-control-info-label:after {
content: ' ';
}
.localrec-control-action-link {
display: inline-block;
line-height: 1.5em;
a {
cursor: pointer;
vertical-align: middle;
}
}
.localrec-control-action-link:before {
color: $linkFontColor;
content: '\2022';
font-size: 1.5em;
padding: 0 10px;
vertical-align: middle;
}
.localrec-control-action-link:first-child:before {
content: '';
padding: 0;
}
.localrec-control-action-links {
font-weight: bold;
margin-top: 10px;
white-space: nowrap;
}

6
lang/main.json
View File

@ -672,14 +672,16 @@
"localRecording": {
"localRecording": "Local Recording",
"dialogTitle": "Local Recording Controls",
"start": "Start",
"stop": "Stop",
"start": "Start Recording",
"stop": "Stop Recording",
"moderator": "Moderator",
"me": "Me",
"duration": "Duration",
"durationNA": "N/A",
"encoding": "Encoding",
"participantStats": "Participant Stats",
"participant": "Participant",
"sessionToken": "Session Token",
"clientState": {
"on": "On",
"off": "Off",

112
react/features/local-recording/components/LocalRecordingInfoDialog.js
View File

@ -152,23 +152,18 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
cancelTitleKey = { 'dialog.close' }
submitDisabled = { true }
titleKey = 'localRecording.dialogTitle'>
<div className = 'info-dialog'>
<div className = 'info-dialog-column'>
<div>
<span className = 'info-label'>
{`${t('localRecording.moderator')}:`}
</span>
<span className = 'spacer'>&nbsp;</span>
<span className = 'info-value'>
{ isModerator
? t('localRecording.yes')
: t('localRecording.no') }
</span>
</div>
{ this._renderDurationAndFormat() }
{ this._renderModeratorControls() }
</div>
<div className = 'localrec-control'>
<span className = 'localrec-control-info-label'>
{`${t('localRecording.moderator')}:`}
</span>
<span className = 'info-value'>
{ isModerator
? t('localRecording.yes')
: t('localRecording.no') }
</span>
</div>
{ this._renderModeratorControls() }
{ this._renderDurationAndFormat() }
</Dialog>
);
}
@ -191,10 +186,9 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
return (
<div>
<div>
<span className = 'info-label'>
<span className = 'localrec-control-info-label'>
{`${t('localRecording.duration')}:`}
</span>
<span className = 'spacer'>&nbsp;</span>
<span className = 'info-value'>
{ durationString === ''
? t('localRecording.durationNA')
@ -202,10 +196,9 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
</span>
</div>
<div>
<span className = 'info-label'>
<span className = 'localrec-control-info-label'>
{`${t('localRecording.encoding')}:`}
</span>
<span className = 'spacer'>&nbsp;</span>
<span className = 'info-value'>
{ encodingFormat }
</span>
@ -219,20 +212,21 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
* each participant.
*
* @private
* @returns {ReactElement}
* @returns {ReactElement|null}
*/
_renderStats() {
const { stats } = this.props;
if (stats === undefined) {
return <ul />;
return null;
}
const ids = Object.keys(stats);
return (
<ul>
<div className = 'localrec-participant-stats' >
{ this._renderStatsHeader() }
{ ids.map((id, i) => this._renderStatsLine(i, id)) }
</ul>
</div>
);
}
@ -245,19 +239,51 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
* @returns {ReactElement}
*/
_renderStatsLine(lineKey, id) {
const { stats, t } = this.props;
const { stats } = this.props;
let statusClass = 'localrec-participant-stats-item__status-dot ';
statusClass += stats[id].recordingStats
? stats[id].recordingStats.isRecording
? 'status-on'
: 'status-off'
: 'status-unknown';
return (
<li key = { lineKey }>
<span>{stats[id].displayName || id}: </span>
<span>{stats[id].recordingStats
? `${stats[id].recordingStats.isRecording
? t('localRecording.clientState.on')
: t('localRecording.clientState.off')} `
+ `(${stats[id]
.recordingStats.currentSessionToken})`
: t('localRecording.clientState.unknown')}</span>
</li>
<div
className = 'localrec-participant-stats-item'
key = { lineKey } >
<div className = 'localrec-participant-stats-item__status'>
<span className = { statusClass } />
</div>
<div className = 'localrec-participant-stats-item__name'>
{ stats[id].displayName || id }
</div>
<div className = 'localrec-participant-stats-item__sessionid'>
{ stats[id].recordingStats.currentSessionToken }
</div>
</div>
);
}
/**
* Renders the participant stats header line.
*
* @private
* @returns {ReactElement}
*/
_renderStatsHeader() {
const { t } = this.props;
return (
<div className = 'localrec-participant-stats-item'>
<div className = 'localrec-participant-stats-item__status' />
<div className = 'localrec-participant-stats-item__name'>
{ t('localRecording.participant') }
</div>
<div className = 'localrec-participant-stats-item__sessionid'>
{ t('localRecording.sessionToken') }
</div>
</div>
);
}
@ -277,14 +303,8 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
return (
<div>
<div>
<span className = 'info-label'>
{`${t('localRecording.participantStats')}:`}
</span>
</div>
{ this._renderStats() }
<div className = 'info-dialog-action-links'>
<div className = 'info-dialog-action-link'>
<div className = 'localrec-control-action-links'>
<div className = 'localrec-control-action-link'>
{ isEngaged ? <a
onClick = { this._onStop }>
{ t('localRecording.stop') }
@ -296,6 +316,12 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
}
</div>
</div>
<div>
<span className = 'localrec-control-info-label'>
{`${t('localRecording.participantStats')}:`}
</span>
</div>
{ this._renderStats() }
</div>
);
}