Skip to content

Commit

Permalink
Video 4893 show network for main participant (#499)
Browse files Browse the repository at this point in the history
  • Loading branch information
@olipyskoty
olipyskoty authored Apr 22, 2021
1 parent 8469ce6 commit 3e6fe63
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 144 deletions.
21 changes: 13 additions & 8 deletions src/components/MainParticipantInfo/MainParticipantInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import useTrack from '../../hooks/useTrack/useTrack';
import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
import useParticipantIsReconnecting from '../../hooks/useParticipantIsReconnecting/useParticipantIsReconnecting';
import AudioLevelIndicator from '../AudioLevelIndicator/AudioLevelIndicator';
import NetworkQualityLevel from '../NetworkQualityLevel/NetworkQualityLevel';

const useStyles = makeStyles((theme: Theme) => ({
container: {
Expand All @@ -24,11 +25,12 @@ const useStyles = makeStyles((theme: Theme) => ({
background: 'rgba(0, 0, 0, 0.5)',
color: 'white',
padding: '0.1em 0.3em 0.1em 0',
fontSize: '1.2em',
display: 'inline-flex',
'& svg': {
marginLeft: '0.3em',
},
marginRight: '0.4em',
alignItems: 'center',
},
infoContainer: {
position: 'absolute',
Expand Down Expand Up @@ -107,13 +109,16 @@ export default function MainParticipantInfo({ participant, children }: MainParti
})}
>
<div className={classes.infoContainer}>
<div className={classes.identity}>
<AudioLevelIndicator audioTrack={audioTrack} />
<Typography variant="body1" color="inherit">
{participant.identity}
{isLocal && ' (You)'}
{screenSharePublication && ' - Screen'}
</Typography>
<div style={{ display: 'flex' }}>
<div className={classes.identity}>
<AudioLevelIndicator audioTrack={audioTrack} />
<Typography variant="body1" color="inherit">
{participant.identity}
{isLocal && ' (You)'}
{screenSharePublication && ' - Screen'}
</Typography>
</div>
<NetworkQualityLevel participant={localParticipant} />
</div>
</div>
{(!isVideoEnabled || isVideoSwitchedOff) && (
Expand Down
54 changes: 34 additions & 20 deletions src/components/NetworkQualityLevel/NetworkQualityLevel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,27 @@
import React from 'react';
import { styled } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import { Participant } from 'twilio-video';
import useParticipantNetworkQualityLevel from '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel';

const Container = styled('div')({
display: 'flex',
alignItems: 'flex-end',
'& div': {
width: '2px',
marginRight: '1px',
'&:not(:last-child)': {
borderRight: 'none',
const useStyles = makeStyles({
outerContainer: {
width: '2em',
height: '2em',
padding: '0.9em',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(0, 0, 0, 0.5)',
},
innerContainer: {
display: 'flex',
alignItems: 'flex-end',
'& div': {
width: '2px',
marginRight: '1px',
'&:not(:last-child)': {
borderRight: 'none',
},
},
},
});
Expand All @@ -19,21 +30,24 @@ const STEP = 3;
const BARS_ARRAY = [0, 1, 2, 3, 4];

export default function NetworkQualityLevel({ participant }: { participant: Participant }) {
const classes = useStyles();
const networkQualityLevel = useParticipantNetworkQualityLevel(participant);

if (networkQualityLevel === null) return null;

return (
<Container>
{BARS_ARRAY.map(level => (
<div
key={level}
style={{
height: `${STEP * (level + 1)}px`,
background: networkQualityLevel > level ? 'white' : 'rgba(255, 255, 255, 0.2)',
}}
/>
))}
</Container>
<div className={classes.outerContainer}>
<div className={classes.innerContainer}>
{BARS_ARRAY.map(level => (
<div
key={level}
style={{
height: `${STEP * (level + 1)}px`,
background: networkQualityLevel > level ? 'white' : 'rgba(255, 255, 255, 0.2)',
}}
/>
))}
</div>
</div>
);
}
222 changes: 117 additions & 105 deletions src/components/NetworkQualityLevel/__snapshots__/NetworkQualityLevel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,141 +2,153 @@

exports[`the NetworkQualityLevel component should render correctly for level 0 1`] = `
<div
className="div-root-1"
className="makeStyles-outerContainer-1"
>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "3px",
className="makeStyles-innerContainer-2"
>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "3px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "6px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "6px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "9px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "9px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "12px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "12px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "15px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "15px",
}
}
}
/>
/>
</div>
</div>
`;

exports[`the NetworkQualityLevel component should render correctly for level 3 1`] = `
<div
className="div-root-1"
className="makeStyles-outerContainer-1"
>
<div
style={
Object {
"background": "white",
"height": "3px",
className="makeStyles-innerContainer-2"
>
<div
style={
Object {
"background": "white",
"height": "3px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "6px",
/>
<div
style={
Object {
"background": "white",
"height": "6px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "9px",
/>
<div
style={
Object {
"background": "white",
"height": "9px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "12px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "12px",
}
}
}
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "15px",
/>
<div
style={
Object {
"background": "rgba(255, 255, 255, 0.2)",
"height": "15px",
}
}
}
/>
/>
</div>
</div>
`;

exports[`the NetworkQualityLevel component should render correctly for level 5 1`] = `
<div
className="div-root-1"
className="makeStyles-outerContainer-1"
>
<div
style={
Object {
"background": "white",
"height": "3px",
className="makeStyles-innerContainer-2"
>
<div
style={
Object {
"background": "white",
"height": "3px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "6px",
/>
<div
style={
Object {
"background": "white",
"height": "6px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "9px",
/>
<div
style={
Object {
"background": "white",
"height": "9px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "12px",
/>
<div
style={
Object {
"background": "white",
"height": "12px",
}
}
}
/>
<div
style={
Object {
"background": "white",
"height": "15px",
/>
<div
style={
Object {
"background": "white",
"height": "15px",
}
}
}
/>
/>
</div>
</div>
`;
Loading

0 comments on commit 3e6fe63

Please sign in to comment.