Video 10788 track switch off UI #745
Conversation
There was a problem hiding this comment.
Looks good! We may want to try it out in a real room with a throttled connection.
Also, I noticed that the transitions aren't quite right when a participant is made the dominant speaker:
Here, "test1" is already showing the "Low Bandwidth" message in the sidebar, but as they move to the dominant speaker we see the fade to black transition again. I'm not exactly sure what the fix here would be but we can chat about it.
| isSwitchedOff: { | ||
| opacity: 1, | ||
| visibility: 'visible', | ||
| transition: 'all 0.5s linear 2s', |
There was a problem hiding this comment.
Not sure about the 2s delay. This would display a frozen video for 2 seconds before it fades to black. Seems a little long. I'm not sure I like it because it means that the UI allows the user to be confused about the frozen video for 2 seconds before we reveal what is going on. I think we might just want to let the user know right away. A fade could still be fine though.
| @@ -173,7 +189,17 @@ export default function MainParticipantInfo({ participant, children }: MainParti | |||
| </Tooltip> | |||
| )} | |||
| </div> | |||
| {(!isVideoEnabled || isVideoSwitchedOff) && ( | |||
| <div | |||
| className={clsx(classes.avatarContainer, classes.trackSwitchOffContainer, { | |||
There was a problem hiding this comment.
Wondering if avatarContainer could be renamed to something more generic since it's now being used to contain something that isn't an avatar.
| trackSwitchOffContainer: { | ||
| opacity: 0, | ||
| visibility: 'hidden', | ||
| transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', | ||
| }, | ||
| isSwitchedOff: { | ||
| opacity: 1, | ||
| visibility: 'visible', | ||
| transition: 'all 0.5s linear', | ||
| }, |
There was a problem hiding this comment.
| trackSwitchOffContainer: { | |
| opacity: 0, | |
| visibility: 'hidden', | |
| transition: 'all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)', | |
| }, | |
| isSwitchedOff: { | |
| opacity: 1, | |
| visibility: 'visible', | |
| transition: 'all 0.5s linear', | |
| }, |
Don't think these are needed. Otherwise looks good!
Contributing to Twilio
Pull Request Details
JIRA link(s):
Description
This PR updates the track switch off UI for v2 rooms according to the new figma designs. See PR #731 for the old designs where we blurred the video.
Burndown
Before review
npm testBefore merge