From dda7568a4816aea0fc5fce3d06fd95dd0ed90696 Mon Sep 17 00:00:00 2001 From: Radium Zheng Date: Wed, 1 Aug 2018 09:51:37 +1000 Subject: [PATCH] UI: refine LocalRecordingInfoDialog --- css/main.scss | 1 + .../local-recording/_local-recording.scss | 92 ++++++++++++++ lang/main.json | 6 +- .../components/LocalRecordingInfoDialog.js | 112 +++++++++++------- 4 files changed, 166 insertions(+), 45 deletions(-) create mode 100644 css/modals/local-recording/_local-recording.scss diff --git a/css/main.scss b/css/main.scss index 87a01c646..e4aff2edc 100644 --- a/css/main.scss +++ b/css/main.scss @@ -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'; diff --git a/css/modals/local-recording/_local-recording.scss b/css/modals/local-recording/_local-recording.scss new file mode 100644 index 000000000..e8a979f96 --- /dev/null +++ b/css/modals/local-recording/_local-recording.scss @@ -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; +} \ No newline at end of file diff --git a/lang/main.json b/lang/main.json index 5598f4e33..2376a8866 100644 --- a/lang/main.json +++ b/lang/main.json @@ -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", diff --git a/react/features/local-recording/components/LocalRecordingInfoDialog.js b/react/features/local-recording/components/LocalRecordingInfoDialog.js index cb30cbd93..1794fceca 100644 --- a/react/features/local-recording/components/LocalRecordingInfoDialog.js +++ b/react/features/local-recording/components/LocalRecordingInfoDialog.js @@ -152,23 +152,18 @@ class LocalRecordingInfoDialog extends Component { cancelTitleKey = { 'dialog.close' } submitDisabled = { true } titleKey = 'localRecording.dialogTitle'> -
-
-
- - {`${t('localRecording.moderator')}:`} - -   - - { isModerator - ? t('localRecording.yes') - : t('localRecording.no') } - -
- { this._renderDurationAndFormat() } - { this._renderModeratorControls() } -
+
+ + {`${t('localRecording.moderator')}:`} + + + { isModerator + ? t('localRecording.yes') + : t('localRecording.no') } +
+ { this._renderModeratorControls() } + { this._renderDurationAndFormat() } ); } @@ -191,10 +186,9 @@ class LocalRecordingInfoDialog extends Component { return (
- + {`${t('localRecording.duration')}:`} -   { durationString === '' ? t('localRecording.durationNA') @@ -202,10 +196,9 @@ class LocalRecordingInfoDialog extends Component {
- + {`${t('localRecording.encoding')}:`} -   { encodingFormat } @@ -219,20 +212,21 @@ class LocalRecordingInfoDialog extends Component { * each participant. * * @private - * @returns {ReactElement} + * @returns {ReactElement|null} */ _renderStats() { const { stats } = this.props; if (stats === undefined) { - return
    ; + return null; } const ids = Object.keys(stats); return ( -
      +
      + { this._renderStatsHeader() } { ids.map((id, i) => this._renderStatsLine(i, id)) } -
    +
); } @@ -245,19 +239,51 @@ class LocalRecordingInfoDialog extends Component { * @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 ( -
  • - {stats[id].displayName || id}: - {stats[id].recordingStats - ? `${stats[id].recordingStats.isRecording - ? t('localRecording.clientState.on') - : t('localRecording.clientState.off')} ` - + `(${stats[id] - .recordingStats.currentSessionToken})` - : t('localRecording.clientState.unknown')} -
    • +
    +
    + +
    +
    + { stats[id].displayName || id } +
    +
    + { stats[id].recordingStats.currentSessionToken } +
    +
    + ); + } + + /** + * Renders the participant stats header line. + * + * @private + * @returns {ReactElement} + */ + _renderStatsHeader() { + const { t } = this.props; + + return ( +
    +
    +
    + { t('localRecording.participant') } +
    +
    + { t('localRecording.sessionToken') } +
    +
    ); } @@ -277,14 +303,8 @@ class LocalRecordingInfoDialog extends Component { return (