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

Show quality indicator on me view. Fix "Me" text on me view on hover on extra videos and screen sharing.

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-10 23:08:43 +02:00
parent 7ab388a714
commit a7557e3e15
3 changed files with 105 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/src/components/Containers/Me.js
View File

@ -290,6 +290,28 @@ const Me = (props) =>
'margin' : spacing
};
let audioScore = null;
if (micProducer && micProducer.score)
{
audioScore =
micProducer.score.reduce(
(prev, curr) =>
(prev.score < curr.score ? prev : curr)
);
}
let videoScore = null;
if (webcamProducer && webcamProducer.score)
{
videoScore =
webcamProducer.score.reduce(
(prev, curr) =>
(prev.score < curr.score ? prev : curr)
);
}
return (
<React.Fragment>
<div
@ -576,6 +598,7 @@ const Me = (props) =>
<VideoView
isMe
VideoView
advancedMode={advancedMode}
peer={me}
displayName={settings.displayName}
@ -584,6 +607,8 @@ const Me = (props) =>
videoVisible={videoVisible}
audioCodec={micProducer && micProducer.codec}
videoCodec={webcamProducer && webcamProducer.codec}
audioScore={audioScore}
videoScore={videoScore}
onChangeDisplayName={(displayName) =>
{
roomClient.changeDisplayName(displayName);
@ -627,6 +652,18 @@ const Me = (props) =>
style={spacingStyle}
>
<div className={classes.viewContainer} style={style}>
<p className={
classnames(
classes.meTag,
hover ? 'hover' : null,
smallContainer ? 'smallContainer' : null
)}
>
<FormattedMessage
id='room.me'
defaultMessage='ME'
/>
</p>
<div
className={classnames(
classes.controls,
@ -653,13 +690,6 @@ const Me = (props) =>
}, 2000);
}}
>
<p className={hover ? 'hover' : null}>
<FormattedMessage
id='room.me'
defaultMessage='ME'
/>
</p>
<Tooltip title={webcamTip} placement='left'>
{ smallContainer ?
<IconButton
@ -742,40 +772,18 @@ const Me = (props) =>
style={spacingStyle}
>
<div className={classes.viewContainer} style={style}>
<div
className={classnames(
classes.controls,
settings.hiddenControls ? 'hide' : null,
hover ? 'hover' : null
<p className={
classnames(
classes.meTag,
hover ? 'hover' : null,
smallContainer ? 'smallContainer' : null
)}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
{
if (touchTimeout)
clearTimeout(touchTimeout);
setHover(true);
}}
onTouchEnd={() =>
{
if (touchTimeout)
clearTimeout(touchTimeout);
touchTimeout = setTimeout(() =>
{
setHover(false);
}, 2000);
}}
>
<p className={hover ? 'hover' : null}>
<FormattedMessage
id='room.me'
defaultMessage='ME'
/>
</p>
</div>
<FormattedMessage
id='room.me'
defaultMessage='ME'
/>
</p>
<VideoView
isMe

3
app/src/components/Containers/Peer.js
View File

@ -394,6 +394,7 @@ const Peer = (props) =>
</div>
<VideoView
showQuality
advancedMode={advancedMode}
peer={peer}
displayName={peer.displayName}
@ -589,6 +590,7 @@ const Peer = (props) =>
</div>
<VideoView
showQuality
advancedMode={advancedMode}
peer={peer}
displayName={peer.displayName}
@ -730,6 +732,7 @@ const Peer = (props) =>
</Tooltip>
</div>
<VideoView
showQuality
advancedMode={advancedMode}
videoContain
consumerSpatialLayers={

103
app/src/components/VideoContainers/VideoView.js
View File

@ -152,6 +152,7 @@ class VideoView extends React.PureComponent
{
const {
isMe,
showQuality,
isScreen,
displayName,
showPeerInfo,
@ -177,58 +178,63 @@ class VideoView extends React.PureComponent
videoHeight
} = this.state;
let quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
let quality = null;
if (videoScore || audioScore)
if (showQuality)
{
const score = videoScore ? videoScore : audioScore;
quality = <SignalCellularOffIcon style={{ color: red[500] }}/>;
switch (score.producerScore)
if (videoScore || audioScore)
{
case 0:
case 1:
const score = videoScore ? videoScore : audioScore;
switch (isMe ? score.score : score.producerScore)
{
quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
break;
}
case 2:
case 3:
{
quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
break;
}
case 4:
case 5:
case 6:
{
quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
break;
}
case 7:
case 8:
case 9:
{
quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
break;
}
case 10:
{
quality = null;
break;
}
default:
{
break;
case 0:
case 1:
{
quality = <SignalCellular0BarIcon style={{ color: red[500] }}/>;
break;
}
case 2:
case 3:
{
quality = <SignalCellular1BarIcon style={{ color: red[500] }}/>;
break;
}
case 4:
case 5:
case 6:
{
quality = <SignalCellular2BarIcon style={{ color: orange[500] }}/>;
break;
}
case 7:
case 8:
case 9:
{
quality = <SignalCellular3BarIcon style={{ color: yellow[500] }}/>;
break;
}
case 10:
{
quality = null;
break;
}
default:
{
break;
}
}
}
}
@ -258,7 +264,7 @@ class VideoView extends React.PureComponent
<p>{videoWidth}x{videoHeight}</p>
}
</div>
{ !isMe &&
{ showQuality &&
<div className={classnames(classes.box, 'right')}>
{
quality
@ -438,6 +444,7 @@ class VideoView extends React.PureComponent
VideoView.propTypes =
{
isMe : PropTypes.bool,
showQuality : PropTypes.bool,
isScreen : PropTypes.bool,
displayName : PropTypes.string,
showPeerInfo : PropTypes.bool,