Video 4893 show network for main participant

[olipyskoty]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• VIDEO-4893

Description

This PR adds the network quality indicator to the main participant. This is the same network quality indicator that is used by the <ParticipantInfo /> component. We decided to move the styling to the <NetworkQualityLevel /> in order to remove the empty boxes from the participant thumbnails in P2P rooms.

GitHub issue: #490

Screenshots:
Main participant === localParticipant:

Main participant !== localParticipant:

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary

[olipyskoty]

@timmydoza I didn't think any unit tests needed to be updated for the <MainParticipantInfo /> as there doesn't appear to be anything related to the network quality in the <ParticipantInfo /> unit tests, but please let me know if I should add some.

[timmydoza]

Looks good! I think that's it. Just one tiny change request.

[timmydoza]

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:

After: