Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Hide advanced video settings by default, ref #415

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-22 19:22:42 +02:00
parent 21f2018e71
commit 6426a4d89e
20 changed files with 261 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

478
app/src/components/Settings/MediaSettings.js
View File

@ -95,6 +95,9 @@ const MediaSettings = ({
{
const intl = useIntl();
const [ audioSettingsOpen, setAudioSettingsOpen ] = React.useState(false);
const [ videoSettingsOpen, setVideoSettingsOpen ] = React.useState(false);
const resolutions = [ {
value : 'low',
label : intl.formatMessage({
@ -152,13 +155,6 @@ const MediaSettings = ({
else
audioOutputDevices = [];
const [ open, setOpen ] = React.useState(true);
const advancedAudioSettings = () =>
{
setOpen(!open);
};
return (
<React.Fragment>
<form className={classes.setting} autoComplete='off'>
@ -205,118 +201,130 @@ const MediaSettings = ({
}
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.resolution || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateWebcam({ newResolution: event.target.value });
}}
name='Video resolution'
autoWidth
className={classes.selectEmpty}
>
{resolutions.map((resolution, index) =>
{
return (
<MenuItem key={index} value={resolution.value}>
{resolution.label}
</MenuItem>
);
<List className={classes.root} component='nav'>
<ListItem button onClick={() => setVideoSettingsOpen(!videoSettingsOpen)}>
<ListItemText primary={intl.formatMessage({
id : 'settings.showAdvancedVideo',
defaultMessage : 'Advanced video settings'
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.resolution'
defaultMessage='Select your video resolution'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.frameRate || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateWebcam({ newFrameRate: event.target.value });
}}
name='Frame rate'
autoWidth
className={classes.selectEmpty}
>
{ [ 1, 5, 10, 15, 20, 25, 30 ].map((frameRate) =>
{
return (
<MenuItem key={frameRate} value={frameRate}>
{frameRate}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.frameRate'
defaultMessage='Select your video frame rate'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.screenSharingResolution || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateScreenSharing({ newResolution: event.target.value });
}}
name='Screen sharing resolution'
autoWidth
className={classes.selectEmpty}
>
{resolutions.map((resolution, index) =>
{
return (
<MenuItem key={index} value={resolution.value}>
{resolution.label}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.screenSharingResolution'
defaultMessage='Select your screen sharing resolution'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.screenSharingFrameRate || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateScreenSharing({ newFrameRate: event.target.value });
}}
name='Frame rate'
autoWidth
className={classes.selectEmpty}
>
{ [ 1, 5, 10, 15, 20, 25, 30 ].map((screenSharingFrameRate) =>
{
return (
<MenuItem key={screenSharingFrameRate} value={screenSharingFrameRate}>
{screenSharingFrameRate}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.screenSharingFrameRate'
defaultMessage='Select your screen sharing frame rate'
/>
</FormHelperText>
</FormControl>
{videoSettingsOpen ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={videoSettingsOpen} timeout='auto'>
<FormControl className={classes.formControl}>
<Select
value={settings.resolution || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateWebcam({ newResolution: event.target.value });
}}
name='Video resolution'
autoWidth
className={classes.selectEmpty}
>
{resolutions.map((resolution, index) =>
{
return (
<MenuItem key={index} value={resolution.value}>
{resolution.label}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.resolution'
defaultMessage='Select your video resolution'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.frameRate || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateWebcam({ newFrameRate: event.target.value });
}}
name='Frame rate'
autoWidth
className={classes.selectEmpty}
>
{ [ 1, 5, 10, 15, 20, 25, 30 ].map((frameRate) =>
{
return (
<MenuItem key={frameRate} value={frameRate}>
{frameRate}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.frameRate'
defaultMessage='Select your video frame rate'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.screenSharingResolution || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateScreenSharing({ newResolution: event.target.value });
}}
name='Screen sharing resolution'
autoWidth
className={classes.selectEmpty}
>
{resolutions.map((resolution, index) =>
{
return (
<MenuItem key={index} value={resolution.value}>
{resolution.label}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.screenSharingResolution'
defaultMessage='Select your screen sharing resolution'
/>
</FormHelperText>
</FormControl>
<FormControl className={classes.formControl}>
<Select
value={settings.screenSharingFrameRate || ''}
onChange={(event) =>
{
if (event.target.value)
roomClient.updateScreenSharing({ newFrameRate: event.target.value });
}}
name='Frame rate'
autoWidth
className={classes.selectEmpty}
>
{ [ 1, 5, 10, 15, 20, 25, 30 ].map((screenSharingFrameRate) =>
{
return (
<MenuItem key={screenSharingFrameRate} value={screenSharingFrameRate}>
{screenSharingFrameRate}
</MenuItem>
);
})}
</Select>
<FormHelperText>
<FormattedMessage
id='settings.screenSharingFrameRate'
defaultMessage='Select your screen sharing frame rate'
/>
</FormHelperText>
</FormControl>
</Collapse>
</List>
</form>
<form className={classes.setting} autoComplete='off'>
<FormControl className={classes.formControl}>
@ -357,10 +365,8 @@ const MediaSettings = ({
}
</FormHelperText>
</FormControl>
</form>
{ 'audioOutputSupportedBrowsers' in window.config &&
window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
<form className={classes.setting} autoComplete='off'>
{ 'audioOutputSupportedBrowsers' in window.config &&
window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
<FormControl className={classes.formControl}>
<Select
value={settings.selectedAudioOutputDevice || ''}
@ -404,122 +410,122 @@ const MediaSettings = ({
}
</FormHelperText>
</FormControl>
</form>
}
<List className={classes.root} component='nav'>
<ListItem button onClick={advancedAudioSettings}>
<ListItemText primary={intl.formatMessage({
id : 'settings.showAdvancedAudio',
defaultMessage : 'Show advanced audio settings'
})}
/>
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={!open} timeout='auto'>
<List component='div'>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.echoCancellation}
onChange={
(event) =>
{
setEchoCancellation(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.echoCancellation',
defaultMessage : 'Echo cancellation'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.autoGainControl} onChange={
(event) =>
{
setAutoGainControl(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.autoGainControl',
defaultMessage : 'Auto gain control'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.noiseSuppression} onChange={
(event) =>
{
setNoiseSuppression(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.noiseSuppression',
defaultMessage : 'Noise suppression'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.voiceActivatedUnmute} onChange={
(event) =>
{
setVoiceActivatedUnmute(event.target.checked);
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.voiceActivatedUnmute',
defaultMessage : 'Voice activated unmute'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<div className={classes.margin} />
<Typography gutterBottom>
{
intl.formatMessage({
id : 'settings.noiseThreshold',
defaultMessage : 'Noise threshold'
})
}:
</Typography>
<NoiseSlider className={classnames(classes.slider, classnames.setting)}
key={'noise-threshold-slider'}
min={-100}
value={settings.noiseThreshold}
max={0}
valueLabelDisplay={'auto'}
onChange={
(event, value) =>
}
<List className={classes.root} component='nav'>
<ListItem button onClick={() => setAudioSettingsOpen(!audioSettingsOpen)}>
<ListItemText primary={intl.formatMessage({
id : 'settings.showAdvancedAudio',
defaultMessage : 'Advanced audio settings'
})}
/>
{audioSettingsOpen ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={audioSettingsOpen} timeout='auto'>
<List component='div'>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.echoCancellation}
onChange={
(event) =>
{
setEchoCancellation(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.echoCancellation',
defaultMessage : 'Echo cancellation'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.autoGainControl} onChange={
(event) =>
{
setAutoGainControl(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.autoGainControl',
defaultMessage : 'Auto gain control'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.noiseSuppression} onChange={
(event) =>
{
setNoiseSuppression(event.target.checked);
roomClient.updateMic();
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.noiseSuppression',
defaultMessage : 'Noise suppression'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<FormControlLabel
className={classnames(classes.setting, classes.switchLabel)}
control={
<Switch color='secondary'
checked={settings.voiceActivatedUnmute} onChange={
(event) =>
{
setVoiceActivatedUnmute(event.target.checked);
}}
/>}
labelPlacement='start'
label={intl.formatMessage({
id : 'settings.voiceActivatedUnmute',
defaultMessage : 'Voice activated unmute'
})}
/>
</ListItem>
<ListItem className={classes.nested}>
<div className={classes.margin} />
<Typography gutterBottom>
{
roomClient._setNoiseThreshold(value);
}}
marks={[ { value: volume, label: `${volume} dB` } ]}
/>
</ListItem>
</List>
</Collapse>
</List>
intl.formatMessage({
id : 'settings.noiseThreshold',
defaultMessage : 'Noise threshold'
})
}:
</Typography>
<NoiseSlider className={classnames(classes.slider, classnames.setting)}
key={'noise-threshold-slider'}
min={-100}
value={settings.noiseThreshold}
max={0}
valueLabelDisplay={'auto'}
onChange={
(event, value) =>
{
roomClient._setNoiseThreshold(value);
}}
marks={[ { value: volume, label: `${volume} dB` } ]}
/>
</ListItem>
</List>
</Collapse>
</List>
</form>
</React.Fragment>
);
};

1
app/src/translations/cn.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/cs.json
View File

@ -143,6 +143,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/de.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Audiosignal bei Benachrichtigungen",
"settings.showNotifications": "Zeige Benachrichtigungen",
"settings.buttonControlBar": "Separate seitliche Medienwerkzeugleiste",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": "Erweiterte Audio-Einstellungen",
"settings.echoCancellation": "Echounterdrückung",
"settings.autoGainControl": "Automatische Pegelregelung (Audioeingang)",

1
app/src/translations/dk.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/el.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/en.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Notification sounds",
"settings.showNotifications": "Show notifications",
"settings.buttonControlBar": "Separate media controls",
"settings.showAdvancedVideo": "Advanced video settings",
"settings.showAdvancedAudio": "Advanced audio settings",
"settings.echoCancellation": "Echo cancellation",
"settings.autoGainControl": "Auto gain control",

1
app/src/translations/es.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/fr.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/hr.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Zvuk obavijesti",
"settings.showNotifications": "Prikaži obavijesti",
"settings.buttonControlBar": "Razdvoji upravljanje medijima",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": "Poništavanje jeke",
"settings.autoGainControl": "Automatsko upravljanje jačinom zvuka",

1
app/src/translations/hu.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Értesítések hangjelzéssel",
"settings.showNotifications": "Értesítések megjelenítése",
"settings.buttonControlBar": "Médiavezérlő gombok leválasztása",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": "Speciális hang beállítások",
"settings.echoCancellation": "Visszhangelnyomás",
"settings.autoGainControl": "Automatikus hangerő",

1
app/src/translations/it.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Suoni di notifica",
"settings.showNotifications": "Mostra notifiche",
"settings.buttonControlBar": "Controlli media separati",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": "Cancellazione echo",
"settings.autoGainControl": "Controllo guadagno automatico",

1
app/src/translations/lv.json
View File

@ -138,6 +138,7 @@
"settings.notificationSounds": "Paziņojumu skaņas",
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/nb.json
View File

@ -140,6 +140,7 @@
"settings.advancedMode": "Avansert modus",
"settings.permanentTopBar": "Permanent topplinje",
"settings.lastn": "Antall videoer synlig",
"settings.showAdvancedVideo": "Avanserte videoinnstillinger",
"settings.showAdvancedAudio": "Avanserte audioinnstillinger",
"settings.hiddenControls": "Skjul media knapper",
"settings.notificationSounds": "Varslingslyder",

1
app/src/translations/pl.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": "Powiadomienia dźwiękiem",
"settings.showNotifications": "Pokaż powiadomienia",
"settings.buttonControlBar": "Rozdziel kontrolki mediów",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": "Usuwanie echa",
"settings.autoGainControl": "Auto korekta wzmocnienia",

1
app/src/translations/pt.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/ro.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/tr.json
View File

@ -141,6 +141,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,

1
app/src/translations/tw.json
View File

@ -143,6 +143,7 @@
"settings.notificationSounds": "通知音效",
"settings.showNotifications": "顯示通知",
"settings.buttonControlBar": "獨立控制按鈕",
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": "回音消除",
"settings.autoGainControl": "自動增益控制",

1
app/src/translations/uk.json
View File

@ -144,6 +144,7 @@
"settings.notificationSounds": null,
"settings.showNotifications": null,
"settings.buttonControlBar": null,
"settings.showAdvancedVideo": null,
"settings.showAdvancedAudio": null,
"settings.echoCancellation": null,
"settings.autoGainControl": null,