Dense Video Layout in Riff Video Chat Meetings

[jaedoucette]

Describe the ideal solution or feature request

As a user entering a video chat meeting, I want to see the other people in the meeting arranged in portrait-style windows with a grid layout, freeing up approximately half the screen to view other information.

Each user's video stream should be displayed in a "portrait" view. This view should be exactly the same width as the current width of the user's own preview of their own video stream. It should be twice as tall as it is wide.

Meetings with more than 5 participants do not need to be supported by this layout.

In a 5 person meeting, participants should be arranged in a grid, with thin strips of background separating participants. The strips should be approximately 20% the width of the portraits A mockup of this design is shown here: https://docs.google.com/drawings/d/1M-Ufib1RSktQ86GktR00tuen8sph__k-E_6Ijj0bjq0/edit?usp=sharing

In meetings with fewer than 4 meetings exactly the same layout should be used, but, since there are fewer participants, some cells in the grid layout should be left empty. In a 4 person meeting, the cell in the bottom right should be left empty: https://docs.google.com/drawings/d/1-vLl9jDR3sHUfu6Dooz9oJqGWlj7va0RG7EIcKbpQfU/edit?usp=sharing

In meetings with 3 participants, the two bottom cells should be left empty: https://docs.google.com/drawings/d/1YWyLx87fSCQGm_HN8a-Hy2UFChvf6oNj6ONoJgte11A/edit?usp=sharing

In meetings with 2 participants, all cells except the top left cell should be left empty.

Existing Riff Platform functionality should be left unchanged (e.g. the menu options at the top of the screen, user accounts, etc.).

Acceptance Criteria:

• [ ] After starting a video chat via this build of Riff, video streams are laid out as described above.
• [ ] The layouts work as expected with 1, 2, 3, or 4 other participants.
• [ ] When a user leaves the meeting the video streams for the other participants should be re-organized to match the layout specification for the number of participants remaining.
• [ ] The layout leaves approximately half the screen free on a variety of conventional displays and aspect ratios. It does not need to achieve this on screens smaller than 13'' wide, or on screens with unconventional aspect ratios.

How does this tie into our current product?

To make room for a shared text document, which will be used in the grant experiment, and perhaps in future in the main products, we need a layout that looks good while freeing up at least a third of the horizontal space on the user's screen.

This version of the feature does not need to be the final version that is integrated into the main product. As such, its design does not need to be ideal, but it does need to be reliable. Favor simple vs. maintainable design, and assume that the branch created for this feature is not going to be integrated into production.

Who asked for this?

John, as part of the grant experiment.

[jaedoucette]

@adonahue @ebporter Feedback welcome!

[adonahue]

@jaedoucette - a couple of thoughts / comments. Happy to chat if you have questions.

• I would break the AWS set up into a separate story. I think it probably blocks the ability to test anything in the other stories and it could be done in parallel to the actual dev work.
• You don't specify one way or another, but I'm assuming all the other MM functionality and labeling that we have today, should remain the same.
• In order to get more screen real-estate for the iframe and document, consider a stacked design that just appends to the bottom as people join. Something like this: https://drive.google.com/open?id=1etMns_abdTk46hdowBxsPwCTgNGJEomc
• Is it ok for all the other Riff functionality to stay in place (top nav, ability to create a profile, etc.), or does anything specifically need to get stripped out?
• How have they gotten into the room? Is there any functionality that needs to be specified around that?
• Are there any other test-able pieces to the story that should be listed in the Acceptance Criteria?