element-hq / element-hq/element-call
Simplify Call Screen
Nobody has claimed this yet.
- 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?
### 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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