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

feat(recording) mobile and web ui updates

This commit is contained in:
Calinteodor 2022-03-08 18:08:36 +02:00 committed by GitHub
parent 4b95a5d6cb
commit c60a51e671
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 206 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
css/_recording.scss
View File

@ -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 {

BIN
images/icon-info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
lang/main.json
View File

@ -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",

7
react/features/base/ui/Tokens.js
View File

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

82
react/features/recording/components/Recording/StartRecordingDialogContent.js
View File

@ -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 = { [
styles.header,
_dialogStyles.topBorderContainer
] }>
<Container className = 'recording-icon-container'>
style = { styles.header }>
<Container className = 'recording-icon-container file-sharing-icon-container'>
<Image
className = 'recording-icon'
src = { ICON_CLOUD }
className = 'recording-file-sharing-icon'
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

64
react/features/recording/components/Recording/styles.native.js
View File

@ -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',
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
paddingBottom: _PADDING,
paddingTop: _PADDING
...header,
marginHorizontal: BaseTheme.spacing[3]
},
headerIntegrations: {
...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],
height: BaseTheme.spacing[4]
...recordingIcon
},
recordingInfoIcon: {
...recordingIcon
},
recordingText: {
@ -86,11 +121,12 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
},
title: {
flex: 1,
fontSize: 16,
fontWeight: 'bold',
textAlign: 'left',
paddingLeft: BoxModel.padding
...title
},
titleInfo: {
...title,
color: BaseTheme.palette.text07Info
},
text: {

4
react/features/recording/components/Recording/styles.web.js
View File

@ -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;