From c60a51e671cbb8b7144d042cc843bf7cf310e703 Mon Sep 17 00:00:00 2001 From: Calinteodor Date: Tue, 8 Mar 2022 18:08:36 +0200 Subject: [PATCH] feat(recording) mobile and web ui updates --- css/_recording.scss | 78 ++++++++++++++++- images/icon-info.png | Bin 0 -> 14344 bytes lang/main.json | 3 +- react/features/base/ui/Tokens.js | 7 ++ .../Recording/StartRecordingDialogContent.js | 82 +++++++++++++++--- .../components/Recording/styles.native.js | 64 +++++++++++--- .../components/Recording/styles.web.js | 4 + 7 files changed, 206 insertions(+), 32 deletions(-) create mode 100644 images/icon-info.png diff --git a/css/_recording.scss b/css/_recording.scss index 866cbccf6..a1f60b7de 100644 --- a/css/_recording.scss +++ b/css/_recording.scss @@ -7,22 +7,23 @@ flex-direction: column; .recording-header { + align-items: center; display: flex; flex: 0; flex-direction: row; justify-content: space-between; - padding-top: 32px; .recording-title { display: inline-flex; align-items: center; - font-size: 16px; + font-size: 14px; margin-left: 16px; } } .recording-header-line { border-top: 1px solid #5e6d7a; + padding-top: 32px; } .recording-switch-disabled { @@ -34,10 +35,79 @@ align-items: center; } + .file-sharing-icon-container { + background-color: #525252; + border-radius: 4px; + height: 40px; + justify-content: center; + width: 56px; + } + + .cloud-content-recording-icon-container { + background-color: #FFFFFF; + border-radius: 4px; + height: 40px; + justify-content: center; + width: 40px; + } + + .jitsi-recording-header { + margin-bottom: 32px; + } + + .jitsi-content-recording-icon-container-with-switch { + background-color: #FFFFFF; + border-radius: 4px; + height: 40px; + width: 56px; + } + + .jitsi-content-recording-icon-container-without-switch { + background-color: #FFFFFF; + border-radius: 4px; + height: 40px; + width: 46px; + } + .recording-icon { - width: 32px; - height: 32px; + height: 40px; object-fit: contain; + width: 40px; + } + + .content-recording-icon { + height: 18px; + margin: 10px 0 0 10px; + object-fit: contain; + width: 18px; + } + + .recording-file-sharing-icon { + height: 18px; + object-fit: contain; + width: 18px; + } + + .recording-info{ + background-color: #FFD740; + color: black; + display: inline-flex; + margin: 32px 0; + width: 100%; + } + + .recording-info-icon { + align-self: center; + height: 14px; + margin: 0 24px 0 16px; + object-fit: contain; + width: 14px; + } + + .recording-info-title { + display: inline-flex; + font-size: 14px; + width: 290px } .recording-switch { diff --git a/images/icon-info.png b/images/icon-info.png new file mode 100644 index 0000000000000000000000000000000000000000..a3be45a410792e6308e5f0854c4a1d3d272a88d2 GIT binary patch literal 14344 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.", "limitNotificationDescriptionWeb": "Due to high demand your recording will be limited to {{limit}} min. For unlimited recordings try {{app}}.", @@ -874,6 +874,7 @@ "rec": "REC", "serviceDescription": "Your recording will be saved by the recording service", "serviceDescriptionCloud": "Cloud recording", + "serviceDescriptionCloudInfo": "Recorded meetings are automatically cleared 24h after their recording time.", "serviceName": "Recording service", "sessionAlreadyActive": "This session is already being recorded or live streamed.", "signIn": "Sign in", diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js index d8603b9c3..a204f412e 100644 --- a/react/features/base/ui/Tokens.js +++ b/react/features/base/ui/Tokens.js @@ -44,6 +44,7 @@ export const colors = { warning05: '#F8AE1A', warning06: '#FFD600', + warning07: '#FFD740', disabled01: '#00000040', @@ -166,6 +167,9 @@ export const colorMap = { // Text for saved input values text06: 'surface03', + // Text info + text07Info: 'surface02', + // error messages textError: 'error06', @@ -265,6 +269,9 @@ export const colorMap = { // Color for indicating a raised hand warning02: 'warning06', + // Color for indicating recording info + warning03: 'warning07', + // Color for disabled tab tab01Disabled: 'disabled01', diff --git a/react/features/recording/components/Recording/StartRecordingDialogContent.js b/react/features/recording/components/Recording/StartRecordingDialogContent.js index f28e5aecd..fa104e7fd 100644 --- a/react/features/recording/components/Recording/StartRecordingDialogContent.js +++ b/react/features/recording/components/Recording/StartRecordingDialogContent.js @@ -26,7 +26,14 @@ import { isVpaasMeeting } from '../../../jaas/functions'; import { RECORDING_TYPES } from '../../constants'; import { getRecordingDurationEstimation } from '../../functions'; -import { DROPBOX_LOGO, ICON_CLOUD, JITSI_LOGO, TRACK_COLOR } from './styles'; +import { + DROPBOX_LOGO, + ICON_CLOUD, + ICON_INFO, + ICON_USERS, + JITSI_LOGO, + TRACK_COLOR +} from './styles'; type Props = { @@ -149,8 +156,9 @@ class StartRecordingDialogContent extends Component { className = 'recording-dialog' style = { styles.container }> { this._renderNoIntegrationsContent() } - { this._renderIntegrationsContent() } { this._renderFileSharingContent() } + { this._renderUploadToTheCloudInfo() } + { this._renderIntegrationsContent() } ); } @@ -182,14 +190,11 @@ class StartRecordingDialogContent extends Component { - + style = { styles.header }> + { ); } + /** + * Renders the info in case recording is uploaded to the cloud. + * + * @returns {React$Component} + */ + _renderUploadToTheCloudInfo() { + const { + _dialogStyles, + _styles: styles, + isVpaas, + selectedRecordingService, + t + } = this.props; + + if (isVpaas + || selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE) { + return null; + } + + return ( + + + + { t('recording.serviceDescriptionCloudInfo') } + + + ); + } + /** * Renders the content in case no integrations were enabled. * @@ -242,15 +287,23 @@ class StartRecordingDialogContent extends Component { const icon = isVpaas ? ICON_CLOUD : JITSI_LOGO; const label = isVpaas ? t('recording.serviceDescriptionCloud') : t('recording.serviceDescription'); + const jitsiContentRecordingIconContainer + = this.props.integrationsEnabled + ? 'jitsi-content-recording-icon-container-with-switch' + : 'jitsi-content-recording-icon-container-without-switch'; + const contentRecordingClass = isVpaas + ? 'cloud-content-recording-icon-container' + : jitsiContentRecordingIconContainer; + const jitsiRecordingHeaderClass = !isVpaas && 'jitsi-recording-header'; return ( - + @@ -327,7 +380,10 @@ class StartRecordingDialogContent extends Component { + style = { [ + styles.headerIntegrations, + _dialogStyles.topBorderContainer + ] }>