Update video rooms to new design specs

[robintown]

This is a first pass at implementing the changes shown in the Video and voice rooms Figma.

Type: enhancement

Depends on element-hq/element-web#21623.

Closes element-hq/element-web#21515.
Closes element-hq/element-web#21516.
Closes element-hq/element-web#21519.
Closes element-hq/element-web#21526.

---

Here's what your changelog entry will look like:

✨ Features

• Update video rooms to new design specs (#8207). Fixes Detect when the user connects to voice by interacting with a widget directly element-hq/element-web#21515, Voice channel widget should not appear in widgets list element-hq/element-web#21516 Voice is still connected when leaving a voice room element-hq/element-web#21519 and Figure out the room header layout for voice rooms element-hq/element-web#21526.

Preview: https://pr8207--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov]

Codecov Report

Merging #8207 (0e4e8db) into develop (020c1c6) will decrease coverage by 0.12%.
The diff coverage is 37.76%.

❗ Current head 0e4e8db differs from pull request most recent head 1544e5b. Consider uploading reports for the commit 1544e5b to get more accurate results

@@             Coverage Diff             @@
##           develop    #8207      +/-   ##
===========================================
- Coverage    28.80%   28.67%   -0.13%     
===========================================
  Files          852      851       -1     
  Lines        49825    49764      -61     
  Branches     12649    12651       +2     
===========================================
- Hits         14352    14271      -81     
- Misses       35473    35493      +20     

Impacted Files	Coverage Δ
src/Lifecycle.ts	1.15% <0.00%> (-0.01%)	⬇️
src/components/structures/LeftPanel.tsx	0.00% <ø> (ø)
src/components/structures/MatrixChat.tsx	0.46% <0.00%> (ø)
src/components/structures/RoomView.tsx	0.75% <0.00%> (-0.01%)	⬇️
src/components/structures/SpaceRoomView.tsx	4.36% <0.00%> (-0.13%)	⬇️
...components/views/context_menus/RoomContextMenu.tsx	0.68% <0.00%> (-0.04%)	⬇️
src/components/views/dialogs/CreateRoomDialog.tsx	0.79% <0.00%> (ø)
...c/components/views/right_panel/RoomSummaryCard.tsx	15.38% <0.00%> (-0.78%)	⬇️
src/components/views/rooms/RoomList.tsx	3.25% <0.00%> (-0.23%)	⬇️
src/components/views/rooms/RoomListHeader.tsx	1.91% <0.00%> (-0.16%)	⬇️
... and 22 more

[kerryarchibald]

Looks good! I left a bunch of nitpicks, feel free to ignore.

[gaelledel]

• Update the + room drop down with new icon (see in Figma)

• Remove the separator at the top of the room

• Is it possible to have the Join room Vertical like in figma?

• Is it possible to not have the video red status when not joined in the browser?

[gaelledel]

We also need to lift the video room at the very top of the room list if it is in the connected state

[robintown]

Is it possible to have the Join room Vertical like in figma?

It appears horizontally like that if the widget is too small. If you make it larger, it does display vertically like in Figma.

Is it possible to not have the video red status when not joined in the browser?

If your camera is being used by a webpage, that's unavoidable, but do you mean the "Join meeting" screen should have your camera turned off by default?

We also need to lift the video room at the very top of the room list if it is in the connected state

I have some questions about this:

• The room list can be configured to be either ordered by activity, or ordered alphabetically. Should this cause the room to break out of alphabetical order?
• Also, I think it was an intentional decision that the currently selected room never changes its sort order, so that it always stays within the user's current view of the room list. Is it okay to break that in the case of video rooms?

[robintown]

@gaelledel The app needs the 16px version of the video room icon, but it appears that it's a different size from the other icons, even though they're also the 16px versions. Could you update the Compound to make them consistent?

[compgeniuses]

is it possible for an external user to join into a video room, one who has no credentials to the matrix server

[robintown]

@compgeniuses Please take questions to #element-web:matrix.org