Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video 4893 show network for main participant #499

Merged
merged 8 commits into from
Apr 22, 2021
+165 −144
Merged

Video 4893 show network for main participant #499

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e28217
move styling to NetworkQualityIndicator component
olipyskoty Apr 20, 2021
7ffa143
add props and styling to NetworkQualityIndicator
olipyskoty Apr 20, 2021
6ffdd7d
add NetworkQualityIndiator to MainParticipant info
olipyskoty Apr 20, 2021
a0bffde
update snapshot test due to css changes
olipyskoty Apr 20, 2021
57da066
update pixels to ems
olipyskoty Apr 20, 2021
79e4d54
Merge branch 'master' into VIDEO-4893-show-network-for-main-participant
olipyskoty Apr 20, 2021
b6c3ef8
correct css changes
olipyskoty Apr 21, 2021
40e72a9
align items to center of main participant identity info
olipyskoty Apr 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/components/MainParticipantInfo/MainParticipantInfo.tsx
View file
Open in desktop
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,11 @@ 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',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the network container increased the height of the identity div just a little bit, which is totally fine. But it looks like things aren't centered vertically now. Let's add align-items: 'center', to the identity class.

Before:
image

After:
image

},
infoContainer: {
position: 'absolute',
Expand Down Expand Up @@ -107,13 +108,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
Open in desktop
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
Open in desktop
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