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 000000000..a3be45a41
Binary files /dev/null and b/images/icon-info.png differ
diff --git a/lang/main.json b/lang/main.json
index d81f8e5a6..b27bb86de 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -859,7 +859,7 @@
"expandedOn": "The meeting is currently being recorded.",
"expandedPending": "Recording is being started...",
"failedToStart": "Recording failed to start",
- "fileSharingdescription": "Share recording with meeting participants",
+ "fileSharingdescription": "Share the recording link with the meeting participants",
"inProgress": "Recording or live streaming in progress",
"limitNotificationDescriptionNative": "Due to high demand your recording will be limited to {{limit}} min. For unlimited recordings try <3>{{app}}3>.",
"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
+ ] }>