VoIP/Call UX/UI proposal

## 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!