Add multiple screen share previews instead of line indicators

[mgcm]

Content

Usability for showing that a call has multiple active screen shares is not user-friendly nor intuitive.

This PR proposes to have multiple screen share previews below the active spotlight layer, making sure they are tappable / clickable and easily discoverable.

I have iterated on my initial proposal (see #4114) and moved towards the suggested design concept.

My current concern is that by showing other non-active screen share previews, we are now taking up more bandwidth, even if requesting a lower res / fps layer.

Disclaimer

• I am contributing this as a Matrix community member, on my own free time.
• This PR was assisted by an LLM.

Motivation and context

See #4114

Screenshots / GIFs

Checklist

• A linked, pre-approved issue exists for this feature or UI change.
• I have read CONTRIBUTING.md in full.
• Pull request includes screenshots or videos for any UI changes.
• Tests written for new code (and existing touched code where feasible).
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[CLAassistant]

All committers have signed the CLA.

[BillCarsonFr]

Thanks @mgcm, it looks nice.

As I told you this is something we want to move forward, will it be ok for you if I merger this PR on a new branch so that we can collaborate to finish the feature?

• Adapt the design for mobile landscape / portrait
• Some adjustements on the thumbnails look n feel
• Some fixes on safari
• playwright

Regarding your concern for bandwith, let's try to check and get some numbers for the additional bandwith taken by the new low res layer, compared to now

[mgcm]

Thanks @mgcm, it looks nice.

As I told you this is something we want to move forward, will it be ok for you if I merger this PR on a new branch so that we can collaborate to finish the feature?

fine by me, do what you must to move the needle 👍