VoIP/Call UX/UI proposal

[SimonBrandner]

Introduction

Over the last few days, I've been thinking about what I wrote down in #16084. I’ve got a little bored and this is how it has ended up. I am aware that there may already be a plan from the dev team. But I thought I'd share my thoughts anyway.

My design aims to be as simple as possible without sacrificing any functionality. I think the UX/UI I propose really starts to be useful with more than two feeds. So if Matrix-native group calls aren't going to be implemented, maybe a different UX/UI, should be considered. But if the ability to have multiple outgoing streams would be added (webcam and screen sharing), I think this would also be a great solution. The UX/UI I came up with is very similar to what Discord currently has.

Basics

The callView should be resizable, and there should be a button to expand it to its full height.

If no feed is coming from a user, we use their profile picture as a replacement.

I suggest we introduce the following variables: focusedFeed and pinnedFeeds. The description of how we set these variables is in the behaviour section.

Views

We introduce three views a focusedView, a gridView and a pinnedView. The following table shows which view we present to the user based on variable values.

View	Condition
gridView	!focusedFeed && pinnedFeeds.length == 0
focusedView	focusedFeed != undefined
pinnedView	!focusedFeed && pinnedFeeds.length > 0

gridView

The gridView is what you know from many apps (zoom for example). It shows all the feeds in a grid.

focusedView

The focusedView presents the user with the focusedFeed and a sidebar with the rest of the feeds. It should be possible to scroll, resize, hide and possibly reorder the sidebar.

pinnedView

The pinnedView has a gridView with all the feeds listed in pinnedFeeds. And it has a sidebar with the remaining feeds.

Behaviour

On feed click

All feeds should be clickable. If the user clicks on the focusedFeed, we set the focusedFeed to undefined. If the user clicks any other feed, we set the focusedFeed to that feed.

On join

In 1:1 calls we set the focusedFeed to the remote webcam feed. In group calls, we set the focusedFeed to undefined.

On user started screen sharing

We set the focusedFeed to the incoming screen sharing feed. There should be the possibility to turn this behaviour off in the settings.

The rest

There are some other things I haven't mentioned here (autofocusing, for example). That is because these things aren't dependent on the basic design.

Endnotes

Please leave some feedback!