Video 9513 update disabled video UI

[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-9513

Description

This PR blurs a participant's video whenever their video is switched off. After two seconds, a short message is displayed over the blurred video letting the user know that the video has been switched off to conserve bandwidth. This is so there isn't a quick flash of the message if the video is only switched off for a brief moment.

Also, I've updated the storybook controls so that you can unpublish/publish and switch on/switch off the video tracks individually, or a specific list of fake participants. This is the same behavior as the screenshare storybook controls.

Finally, comparing this branch against the grid view feature branch since main does not have storybook.

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

[timmydoza]

With something like this, we can give the message a nice fade in:

'@keyframes showMessage': {
      '0%': {
        opacity: 0,
        visibility: 'hidden',
      },
      '80%': {
        opacity: 1,
        visibility: 'visible',
      },
      '100%': {
        opacity: 1
      },
    }

No need to use these exact values. Play with it and see what works.

[olipyskoty]

I like the idea of fading the message in, but I'm not sure I'm seeing much of a difference in the UI using your example. I tried changing opacity to something like 0.8 for 80% and that looked kind of glitchy. I did notice that increasing the animationDuration from 0.5s to 1s created a fade in effect. I'm wondering if you're seeing something that I'm not seeing though, so you might need to show me?

[timmydoza]

Hmm, I wasn't originally seeing a fade in, but now I am. Not sure what changed, but it looks good now 👍

[timmydoza]

We can also transition the blur here. Again, try playing with the different values to see what works well. I liked this:

        transition: 'filter 1s cubic-bezier(0.22, 0.61, 0.36, 1)',

The cubic-bezier nonsense came from Chrome's devtools. There's a neat tool to play with easing functions:

[timmydoza]

This text could also have a shadow to make it more readable. Without it, you wouldn't be able to read white text on a white background. I don't know much about text-shadow, but something like this seemed ok: textShadow: '0 0 3px rgba(0, 0, 0, 0.7)',

More info here: https://css-tricks.com/almanac/properties/t/text-shadow/

[timmydoza]

Just make sure that this makes it into MainParticipantInfo too.

[timmydoza]

I think the blur might be a little too much here. I feel like 4 or 5 px could be good for this component. Using a placeholder image a person, it seems a little too blurred:

10px might be good for MainParticipantInfo though, since that component is rendered larger.

Also a fun idea to consider on this line is grayscale: filter: 'blur(4px) grayscale(1)'. Not sure if we want it though.

I think at this point we can put a placeholder image of a real face here and then see what design thinks.

[timmydoza]

Same, let's add this to MainParticpantInfo too.

[olipyskoty]

Created new PR in #731 to avoid large merge conflict