feat(recording) mobile and web ui updates

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: 40px;
-        height: 32px;
         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 {

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 <a href={{url}} rel='noopener noreferrer' target='_blank'>{{app}}</a>.",
@@ -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",

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',
 

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<Props> {
                 className = 'recording-dialog'
                 style = { styles.container }>
                 { this._renderNoIntegrationsContent() }
-                { this._renderIntegrationsContent() }
                 { this._renderFileSharingContent() }
+                { this._renderUploadToTheCloudInfo() }
+                { this._renderIntegrationsContent() }
             </Container>
         );
     }
@@ -182,14 +190,11 @@ class StartRecordingDialogContent extends Component<Props> {
             <Container
                 className = 'recording-header'
                 key = 'fileSharingSetting'
-                style = { [
+                style = { styles.header }>
-                    styles.header,
+                <Container className = 'recording-icon-container file-sharing-icon-container'>
-                    _dialogStyles.topBorderContainer
-                ] }>
-                <Container className = 'recording-icon-container'>
                     <Image
-                        className = 'recording-icon'
+                        className = 'recording-file-sharing-icon'
-                        src = { ICON_CLOUD }
+                        src = { ICON_USERS }
                         style = { styles.recordingIcon } />
                 </Container>
                 <Text
@@ -212,6 +217,46 @@ class StartRecordingDialogContent extends Component<Props> {
         );
     }
 
+    /**
+     * 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 (
+            <Container
+                className = 'recording-info'
+                key = 'cloudUploadInfo'
+                style = { styles.headerInfo }>
+                <Image
+                    className = 'recording-info-icon'
+                    src = { ICON_INFO }
+                    style = { styles.recordingInfoIcon } />
+                <Text
+                    className = 'recording-info-title'
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.titleInfo
+                    }}>
+                    { t('recording.serviceDescriptionCloudInfo') }
+                </Text>
+            </Container>
+        );
+    }
+
     /**
      * Renders the content in case no integrations were enabled.
      *
@@ -242,15 +287,23 @@ class StartRecordingDialogContent extends Component<Props> {
 
         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 (
             <Container
-                className = 'recording-header'
+                className = { `recording-header ${jitsiRecordingHeaderClass}` }
                 key = 'noIntegrationSetting'
                 style = { styles.header }>
-                <Container className = 'recording-icon-container'>
+                <Container className = { contentRecordingClass }>
                     <Image
-                        className = 'recording-icon'
+                        className = 'content-recording-icon'
                         src = { icon }
                         style = { styles.recordingIcon } />
                 </Container>
@@ -327,7 +380,10 @@ class StartRecordingDialogContent extends Component<Props> {
             <Container>
                 <Container
                     className = 'recording-header recording-header-line'
-                    style = { styles.header }>
+                    style = { [
+                        styles.headerIntegrations,
+                        _dialogStyles.topBorderContainer
+                    ] }>
                     <Container
                         className = 'recording-icon-container'>
                         <Image

react/features/recording/components/Recording/styles.native.js

@@ -6,6 +6,8 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const DROPBOX_LOGO = require('../../../../../images/dropboxLogo_square.png');
 export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
+export const ICON_INFO = require('../../../../../images/icon-info.png');
+export const ICON_USERS = require('../../../../../images/icon-users.png');
 export const JITSI_LOGO = require('../../../../../images/jitsiLogo_square.png');
 export const TRACK_COLOR = BaseTheme.palette.ui15;
 
@@ -14,6 +16,29 @@ export const TRACK_COLOR = BaseTheme.palette.ui15;
 // the special case(s) of the recording feature below.
 const _PADDING = BoxModel.padding * 1.5;
 
+
+const header = {
+    alignItems: 'center',
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: _PADDING,
+    paddingTop: _PADDING
+};
+
+const recordingIcon = {
+    width: BaseTheme.spacing[4],
+    height: BaseTheme.spacing[4]
+};
+
+const title = {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'left',
+    paddingLeft: BoxModel.padding
+};
+
 export default {
     /**
      * Container for the StartRecordingDialog screen.
@@ -24,7 +49,6 @@ export default {
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'center',
-        paddingHorizontal: BaseTheme.spacing[3],
         paddingTop: BaseTheme.spacing[3]
     },
 
@@ -52,12 +76,20 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
     },
 
     header: {
-        alignItems: 'center',
+        ...header,
-        flex: 0,
+        marginHorizontal: BaseTheme.spacing[3]
-        flexDirection: 'row',
+    },
-        justifyContent: 'space-between',
+
-        paddingBottom: _PADDING,
+    headerIntegrations: {
-        paddingTop: _PADDING
+        ...header,
+        paddingHorizontal: BaseTheme.spacing[3]
+    },
+
+    headerInfo: {
+        ...header,
+        backgroundColor: BaseTheme.palette.warning03,
+        marginBottom: BaseTheme.spacing[4],
+        paddingHorizontal: BaseTheme.spacing[3]
     },
 
     loggedIn: {
@@ -65,8 +97,11 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
     },
 
     recordingIcon: {
-        width: BaseTheme.spacing[4],
+        ...recordingIcon
-        height: BaseTheme.spacing[4]
+    },
+
+    recordingInfoIcon: {
+        ...recordingIcon
     },
 
     recordingText: {
@@ -86,11 +121,12 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
     },
 
     title: {
-        flex: 1,
+        ...title
-        fontSize: 16,
+    },
-        fontWeight: 'bold',
+
-        textAlign: 'left',
+    titleInfo: {
-        paddingLeft: BoxModel.padding
+        ...title,
+        color: BaseTheme.palette.text07Info
     },
 
     text: {

react/features/recording/components/Recording/styles.web.js

@@ -8,6 +8,10 @@ export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
 
 export const ICON_CLOUD = 'images/icon-cloud.png';
 
+export const ICON_INFO = 'images/icon-info.png';
+
+export const ICON_USERS = 'images/icon-users.png';
+
 export const JITSI_LOGO = 'images/jitsiLogo_square.png';
 
 export const TRACK_COLOR = BaseTheme.palette.ui15;