small layout fixes; enable clientside auto mute for > 4 peers

auto_join_3.3
Stefan Otto 2020-03-28 00:09:49 +01:00
parent 76adbf1d69
commit de0cb99656
2 changed files with 23 additions and 18 deletions

View File

@ -2477,7 +2477,11 @@ export default class RoomClient
{ {
if (this._mediasoupDevice.canProduce('audio')) if (this._mediasoupDevice.canProduce('audio'))
if (!this._muted) if (!this._muted)
this.enableMic(); {
await this.enableMic();
if (peers.length > 4)
this.muteMic();
}
if (joinVideo && this._mediasoupDevice.canProduce('video')) if (joinVideo && this._mediasoupDevice.canProduce('video'))
this.enableWebcam(); this.enableWebcam();

View File

@ -78,31 +78,32 @@ const styles = (theme) =>
alignItems : 'flex-end', alignItems : 'flex-end',
padding : theme.spacing(1), padding : theme.spacing(1),
zIndex : 21, zIndex : 21,
opacity : 0, opacity : 1,
transition : 'opacity 0.3s', transition : 'opacity 0.3s',
touchAction : 'none', touchAction : 'none',
pointerEvents : 'none', pointerEvents : 'none',
'&.hover' :
{
opacity : 1
},
'& p' : '& p' :
{ {
position : 'absolute', position : 'absolute',
float : 'left', float : 'left',
top : '50%', top : '50%',
left : '50%', left : '50%',
transform : 'translate(-50%, -50%)', transform : 'translate(-50%, -50%)',
color : 'rgba(255, 255, 255, 0.5)', color : 'rgba(255, 255, 255, 0.5)',
fontSize : '7em', fontSize : '7em',
margin : 0 margin : 0,
opacity : 0,
'&.hover' :
{
opacity : 1
},
} }
}, },
ptt : ptt :
{ {
position : 'absolute', position : 'absolute',
float : 'left', float : 'left',
bottom : '10%', top : '10%',
left : '50%', left : '50%',
transform : 'translate(-50%, 0%)', transform : 'translate(-50%, 0%)',
color : 'rgba(255, 255, 255, 0.7)', color : 'rgba(255, 255, 255, 0.7)',
@ -112,7 +113,7 @@ const styles = (theme) =>
padding : '15px', padding : '15px',
borderRadius : '20px', borderRadius : '20px',
textAlign : 'center', textAlign : 'center',
opacity : 0, opacity : 0,
'&.enabled' : '&.enabled' :
{ {
opacity : 1 opacity : 1
@ -292,7 +293,7 @@ const Me = (props) =>
> >
<div className={classnames(classes.viewContainer)} style={style}> <div className={classnames(classes.viewContainer)} style={style}>
<div <div
className={classnames(classes.controls, 'hover')} className={classnames(classes.controls)}
onMouseOver={() => setHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)} onMouseOut={() => setHover(false)}
onTouchStart={() => onTouchStart={() =>
@ -313,7 +314,7 @@ const Me = (props) =>
}, 2000); }, 2000);
}} }}
> >
<p className={classnames(hover ? 'hover' : null)}> <p className={classnames(hover && 'hover')}>
<FormattedMessage <FormattedMessage
id='room.me' id='room.me'
defaultMessage='ME' defaultMessage='ME'