element-hq / element-hq/element-call

Simplify Call Screen

Open
#4,214 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

T-Enhancement
Dominant language
TypeScript
Stars
996
Forks
215
Avg merge
1d 6h
Merged PRs (30d)
54

Description

### Your use case

It isn't apparent that the shortcuts on the top right still applies in a call, not simply to start one.
#### What would you like to do?
**1.** Remove the header line.
**2.** Reduce number of shortcuts in call.
- Hide Threads button.
- Hide or remove Room-info button. https://github.com/element-hq/element-web/issues/33586#issue-4499402650

**3.** Add button to hide **other participants** in Spotlight mode (the right pointing arrow in the spotlight tile).
**4.** include 3 dot menu in spotlight tile (bottom right of tile).
- Invert colour scheme to match display-name pill.

**6** Reduce saturation of end-call button https://github.com/element-hq/element-web/issues/34856.
**7.** Replace spotlight and grid toggle with Expand and Full-screen buttons respectively.
- Expand button should hide the room list and expands the call interface into the newly available space.

**8.** Make the expand and grid toggle a single icon toggle and move it to the main cluster of controls. (in the mock up it sits next to the end-call button).

#### Why would you like to do it?
- Reduce visual noise.
- Make the useful shortcuts for a call apparent.
- Reduce visual prominence of the end-call button.
#### How would you like to achieve it?

Image

### Have you considered any alternatives?

> **3.** Add button to hide **other participants** in Spotlight mode (the right pointing arrow in the spotlight tile).
1. Make the arrow white.
2. Adding a background and making the icon black & white like the display-name pill.
- Or white, with translucent black background.

### Additional context

https://github.com/element-hq/element-web/issues/34619#issuecomment-5448529125
https://github.com/element-hq/element-call/issues/4199#issue-5243084405

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by reviewing the attached mockup and the linked Element Call and Element Web issues, then locate the call-screen UI entry point. Done means the requested shortcut, participant, menu, layout, fullscreen, and end-call-button changes are implemented consistently with the stated visual goals.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
audio-video-rtc, design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.