New room list: video room and video call decoration #29693

florianduros · 2025-04-08T15:54:18Z

Task https://github.com/element-hq/wat-internal/issues/204
Figma design

This PR adds decorations for video room and video call in the new room list.

To match the figma design, we needed to change the room avatar component. Since the current room avatar is still using image mask as icon and isn't implementing the new room avatar from the figma design
The new room avatar component is using MVVM architecture
- doesn't implement the notification indicator: this not used anymore in the new room list and in the figma design
- supports currently only the 32px size. We need for each size 2 svg masks (one for presence indicator and one for public/video icons) to create the "hole" in the bottom right of the room avatar. When needed, we can easily add the 40px size (which is only used in the room header?)
- the new room avatar component seems to render quicker. The e2e tests render faster the correct room avatar and the screenshots needs to be updated.

Scenario	Screenshot
Public room
Video room
Video room with unread notifications
EC call
EC call with unread mention and notifications

…on component

florianduros · 2025-04-14T08:33:37Z

src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx

@@ -128,8 +128,8 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState {
    const isSpaceRoom = Boolean(activeSpace);

    const canCreateRoom = hasCreateRoomRights(matrixClient, activeSpace);
-    const canCreateVideoRoom = useFeatureEnabled("feature_video_rooms");


When playing with the video room, I noticed this mistake. We didn't check the room creation rights for video room.

florianduros · 2025-04-14T08:37:49Z

src/components/views/avatars/RoomAvatar.tsx

@@ -144,7 +144,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
    }

    public render(): React.ReactNode {
-        const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;


To be able to add custom class to the RoomAvatar

t3chguy

any chance of this screenshot but in a more narrow room list, so one can see how it behaves when it is running out of space? Also ideally as screenshot tests

The bulk of the screenshot changes seem unrelated to the title of the PR, what's going on there?

florianduros · 2025-04-14T09:04:08Z

any chance of this screenshot but in a more narrow room list, so one can see how it behaves when it is running out of space? Also ideally as screenshot tests

An extreme case that shouldn't happened:

It shouldn't be too narrow cf https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel-2025?node-id=137-93748&t=tjjEf89vpp2aXUfk-4

The bulk of the screenshot changes seem unrelated to the title of the PR, what's going on there?

Cf the description in the PR:

the new room avatar component seems to render quicker. The e2e tests render faster the correct room avatar and the screenshots needs to be updated.

When the screenshot was taken, the room avatar letter weren't yet computed. With the new room avatar, the letter is computed at the moment of the screenshot.

* feat: add video call and EC call to room list item vm * feat: add video call notification decoration to notification decoration component * feat: add video call support to room list item view * feat: add new RoomAvatarView component * feat: deprecate `DecoratedRoomAvatar` * feat: use `RoomAvatarView` in room list item * feat: allow custom class for `RoomAvatar` * test: update notification decoration * test: update room list item view * test: update room list snapshot * test: add tests for room avatar vm * test: add tests for room avatar view * test(e2e): update snapshots * fix: video room creation rights * test: e2e add test for public and video room

@Jujure

https://build.opensuse.org/request/show/1272177 by user dheidler + anag_factory - Version 1.11.99 No changes, just bumping the version to accommodate a new Element Desktop release Version 1.11.98 ## ✨ Features * print better errors in the search view instead of a blocking modal (element-hq/element-web#29724). Contributed by @Jujure. * New room list: video room and video call decoration (element-hq/element-web#29693). Contributed by @florianduros. * Remove Secure Backup, Cross-signing and Cryptography sections in `Security & Privacy` user settings (element-hq/element-web#29088). Contributed by @florianduros. * Allow reporting a room when rejecting an invite. (element-hq/element-web#29570). Contributed by @Half-Shot. * RoomListViewModel: Reset primary and sec

florianduros added the T-Enhancement label Apr 8, 2025

github-actions bot deployed to Netlify April 8, 2025 15:56 View deployment

github-actions bot deployed to EndToEndTests April 8, 2025 16:05 View deployment

github-actions bot deployed to Netlify April 9, 2025 10:15 View deployment

github-actions bot deployed to EndToEndTests April 9, 2025 10:30 View deployment

florianduros force-pushed the florianduros/new-room-list/video-call branch from a898878 to da3ec7f Compare April 9, 2025 13:50

github-actions bot deployed to Netlify April 9, 2025 13:54 View deployment

github-actions bot deployed to EndToEndTests April 9, 2025 14:07 View deployment

florianduros force-pushed the florianduros/new-room-list/video-call branch from da3ec7f to 86d32c6 Compare April 10, 2025 13:52

github-actions bot deployed to Netlify April 10, 2025 13:55 View deployment

github-actions bot deployed to EndToEndTests April 10, 2025 14:10 View deployment

github-actions bot deployed to Netlify April 10, 2025 14:23 View deployment

github-actions bot deployed to EndToEndTests April 10, 2025 14:33 View deployment

florianduros force-pushed the florianduros/new-room-list/video-call branch from b195c51 to 2a86ec1 Compare April 11, 2025 13:45

github-actions bot deployed to Netlify April 11, 2025 13:47 View deployment

github-actions bot deployed to EndToEndTests April 11, 2025 13:50 View deployment

florianduros force-pushed the florianduros/new-room-list/video-call branch from 2a86ec1 to 9bb70b3 Compare April 11, 2025 14:21

github-actions bot deployed to Netlify April 11, 2025 14:23 View deployment

github-actions bot deployed to EndToEndTests April 11, 2025 14:33 View deployment

florianduros force-pushed the florianduros/new-room-list/video-call branch from 9bb70b3 to 98f1984 Compare April 11, 2025 14:43

github-actions bot deployed to Netlify April 11, 2025 14:46 View deployment

github-actions bot deployed to EndToEndTests April 11, 2025 14:55 View deployment

florianduros added 8 commits April 14, 2025 10:01

feat: add video call and EC call to room list item vm

1cce179

feat: add video call notification decoration to notification decorati…

f13d857

…on component

feat: add video call support to room list item view

82080d0

feat: add new RoomAvatarView component

3b99ac8

feat: deprecate DecoratedRoomAvatar

fc46e78

feat: use RoomAvatarView in room list item

a920c19

feat: allow custom class for RoomAvatar

1914058

test: update notification decoration

847cb8b

florianduros added 7 commits April 14, 2025 10:01

test: update room list item view

af1fb0b

test: update room list snapshot

9eb66ba

test: add tests for room avatar vm

df0e455

test: add tests for room avatar view

a823890

test(e2e): update snapshots

d26c00d

fix: video room creation rights

b3f1e9f

test: e2e add test for public and video room

7785d03

florianduros force-pushed the florianduros/new-room-list/video-call branch from 98f1984 to 7785d03 Compare April 14, 2025 08:16

github-actions bot deployed to Netlify April 14, 2025 08:18 View deployment

github-actions bot deployed to EndToEndTests April 14, 2025 08:28 View deployment

florianduros commented Apr 14, 2025

View reviewed changes

florianduros marked this pull request as ready for review April 14, 2025 08:38

florianduros requested a review from a team as a code owner April 14, 2025 08:38

florianduros requested review from dbkr and t3chguy April 14, 2025 08:38

t3chguy reviewed Apr 14, 2025

View reviewed changes

t3chguy approved these changes Apr 14, 2025

View reviewed changes

florianduros added this pull request to the merge queue Apr 14, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 14, 2025

florianduros added this pull request to the merge queue Apr 14, 2025

Merged via the queue into develop with commit 07d5a72 Apr 14, 2025
43 checks passed

florianduros deleted the florianduros/new-room-list/video-call branch April 14, 2025 09:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New room list: video room and video call decoration #29693

New room list: video room and video call decoration #29693

florianduros commented Apr 8, 2025 •

edited

Loading

florianduros Apr 14, 2025 •

edited

Loading

florianduros Apr 14, 2025

t3chguy left a comment

florianduros commented Apr 14, 2025

New room list: video room and video call decoration #29693

New room list: video room and video call decoration #29693

Conversation

florianduros commented Apr 8, 2025 • edited Loading

florianduros Apr 14, 2025 • edited Loading

Choose a reason for hiding this comment

florianduros Apr 14, 2025

Choose a reason for hiding this comment

t3chguy left a comment

Choose a reason for hiding this comment

florianduros commented Apr 14, 2025

florianduros commented Apr 8, 2025 •

edited

Loading

florianduros Apr 14, 2025 •

edited

Loading