Add decline button to call notification toast (use new notification event) #30729

toger5 · 2025-09-09T15:14:15Z

This PR adds a couple of new conditions to the IncomingCallToast so that it gets dismissed in the right cases and provides an option to send decline events by pressing a decline button.
Additionally it now is possible to jumpt to the lobby by pressing the toast and joining and skipping the lobby by pressing the join button.

This make EW incompatible with the old style notify events.

Before	After

Signed-off-by: Timo K [email protected]

Checklist

Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

…vent) - This make EW incompatible with the old style notify events. Signed-off-by: Timo K <[email protected]>

Signed-off-by: Timo K <[email protected]>

dbkr

Looks like there are quite a lot of visual changes here - any chance of a screenshot or two?

Also, you have some failing lint jobs.

toger5 · 2025-09-11T09:28:38Z

Looks like there are quite a lot of visual changes here - any chance of a screenshot or two?

you are right screenshots would be great. (I even prepared some yesterday...)

Signed-off-by: Timo K <[email protected]>

florianduros

I kind of thinking that this ui should be in the shared components:

res/css/views/toasts/_IncomingCallToast.pcss

toger5 · 2025-09-11T14:44:23Z

I kind of thinking that this ui should be in the shared components:

@florianduros
is this already sth in the compound tokens? or do you mean i should move this into a new shared component?

florianduros · 2025-09-11T14:56:35Z

@toger5 The shared components are not in compound but in src/shared-components folder of EW. They are using CSS modules, storybook and are pure view component. You can take a look at the existing components when launching the EW storybook.

Signed-off-by: Timo K <[email protected]>

Half-Shot

Looking pretty good, mostly some FYIs from me and a couple of missing tests?

src/i18n/strings/en_EN.json

Half-Shot · 2025-09-11T15:57:28Z

test/unit-tests/Notifier-test.ts

        });

-        it("should not show toast when calling with non-group call event", () => {


Hard to tell with this diff, but are we still testing "should not show toast when calling with non-group call event"?

Half-Shot · 2025-09-11T15:57:45Z

test/unit-tests/Notifier-test.ts

            expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
            spyCallMemberships.mockRestore();
        });

-        it("dismisses call notification when another device answers the call", () => {


Do we still have a test for "dismisses call notification when another device answers the call"?

Yes all the tests are still there (I hope) but you are right this diff makes it hard to see.
To double check i will try to look for the exact tests myself as a little exercise:

this: should not show toast when calling with non-group call event -> has become this should not show toast when calling with a different event type to org.matrix.msc4075.rtc.notification

this: dismisses call notification when another device answers the call -> is now part of the toast itself (dismissing is done in the toast) Dismiss toast if user joins with a remote device

Half-Shot · 2025-09-11T15:58:39Z

src/toasts/IncomingCallToast.tsx

@@ -132,7 +210,10 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
        ),
    );

+    const [skipLobbyToggle, setSkipLobbyToggle] = useState(true);


N.B. For the sake of a few lines this could be extended with a Setting that stores the last value. Not going to block and can be followup PR.

src/toasts/IncomingCallToast.tsx

Half-Shot · 2025-09-11T16:01:58Z

src/toasts/IncomingCallToast.tsx

@@ -31,8 +35,22 @@ import { type Call, CallEvent } from "../models/Call";
 import LegacyCallHandler, { AudioID } from "../LegacyCallHandler";
 import { useEventEmitter } from "../hooks/useEventEmitter";
 import { CallStore, CallStoreEvent } from "../stores/CallStore";
+import LabelledToggleSwitch from "../components/views/elements/LabelledToggleSwitch";


Prefer https://compound.element.io/?path=/docs/compound-web_form-controls-toggle--docs if you can, to reduce our footprint on legacy components :)

The labelled one is very convinient... but should be possible to do with the cmpound one as well.

Signed-off-by: Timo K <[email protected]>

src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css

Signed-off-by: Timo K <[email protected]>

github-actions bot deployed to Netlify September 9, 2025 15:17 View deployment

github-actions bot deployed to EndToEndTests September 9, 2025 15:28 View deployment

toger5 added the T-Enhancement label Sep 10, 2025

toger5 added 7 commits September 10, 2025 16:26

Add decline button to call notification toast (use new notification e…

0f53430

…vent) - This make EW incompatible with the old style notify events. Signed-off-by: Timo K <[email protected]>

update styling for call toast

8b90455

Signed-off-by: Timo K <[email protected]>

skip lobby on join button click / dont skip lobby on toast click

f2406af

Signed-off-by: Timo K <[email protected]>

dismiss toast on remote decline

59a5644

Signed-off-by: Timo K <[email protected]>

fixup docstring and event_id

097e87e

Signed-off-by: Timo K <[email protected]>

Add tests

e5ba48e

Signed-off-by: Timo K <[email protected]>

remove unused var

38ef88e

Signed-off-by: Timo K <[email protected]>

toger5 force-pushed the toger5/decline-call-notify-event branch from dd09d3d to 38ef88e Compare September 10, 2025 14:50

github-actions bot deployed to Netlify September 10, 2025 14:53 View deployment

github-actions bot deployed to EndToEndTests September 10, 2025 15:03 View deployment

test that decline event gets sent

be38f54

Signed-off-by: Timo K <[email protected]>

toger5 marked this pull request as ready for review September 10, 2025 16:10

toger5 requested a review from a team as a code owner September 10, 2025 16:10

toger5 requested review from dbkr and florianduros September 10, 2025 16:10

github-actions bot deployed to Netlify September 10, 2025 16:12 View deployment

github-actions bot deployed to EndToEndTests September 10, 2025 16:23 View deployment

dbkr reviewed Sep 11, 2025

View reviewed changes

make "go to lobby" accessible via keyboard (fix sonar cloud)

1d8d079

Signed-off-by: Timo K <[email protected]>

toger5 requested a review from dbkr September 11, 2025 11:55

github-actions bot deployed to Netlify September 11, 2025 11:57 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 12:08 View deployment

github-actions bot deployed to Netlify September 11, 2025 12:39 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 12:49 View deployment

remove keyboard input

5824840

Signed-off-by: Timo K <[email protected]>

toger5 force-pushed the toger5/decline-call-notify-event branch from 7e8c5db to 5824840 Compare September 11, 2025 13:28

florianduros reviewed Sep 11, 2025

View reviewed changes

res/css/views/toasts/_IncomingCallToast.pcss Outdated Show resolved Hide resolved

Half-Shot self-requested a review September 11, 2025 14:48

review style + toggle for join immediately

53b0a18

Signed-off-by: Timo K <[email protected]>

github-actions bot deployed to Netlify September 11, 2025 15:19 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 15:30 View deployment

fix getNotificationEventSendTs

8e58f85

Signed-off-by: Timo K <[email protected]>

toger5 requested a review from florianduros September 11, 2025 15:46

github-actions bot deployed to Netlify September 11, 2025 15:49 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 16:01 View deployment

Half-Shot reviewed Sep 11, 2025

View reviewed changes

use story component

c5f54be

Signed-off-by: Timo K <[email protected]>

github-actions bot deployed to Netlify September 11, 2025 16:38 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 16:48 View deployment

english text

b0ac9af

Signed-off-by: Timo K <[email protected]>

github-actions bot deployed to Netlify September 11, 2025 17:14 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 17:25 View deployment

dont use legacy toggle

9622a74

Signed-off-by: Timo K <[email protected]>

toger5 requested a review from Half-Shot September 11, 2025 17:31

github-actions bot deployed to Netlify September 11, 2025 17:34 View deployment

github-actions bot deployed to EndToEndTests September 11, 2025 17:45 View deployment

florianduros reviewed Sep 12, 2025

View reviewed changes

github-actions bot deployed to Netlify September 12, 2025 08:15 View deployment

github-actions bot deployed to EndToEndTests September 12, 2025 08:28 View deployment

fix lint

77a4c1e

Signed-off-by: Timo K <[email protected]>

toger5 force-pushed the toger5/decline-call-notify-event branch from ae608d5 to 77a4c1e Compare September 12, 2025 08:33

github-actions bot deployed to Netlify September 12, 2025 08:36 View deployment

github-actions bot deployed to EndToEndTests September 12, 2025 08:46 View deployment

toger5 requested a review from florianduros September 12, 2025 13:00

		});

		it("should not show toast when calling with non-group call event", () => {

Uh oh!

Add decline button to call notification toast (use new notification event) #30729

Are you sure you want to change the base?

Add decline button to call notification toast (use new notification event) #30729

Uh oh!

Conversation

toger5 commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

dbkr left a comment

Choose a reason for hiding this comment

Uh oh!

toger5 commented Sep 11, 2025

Uh oh!

florianduros left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

toger5 commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

florianduros commented Sep 11, 2025

Uh oh!

Half-Shot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Half-Shot Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Half-Shot Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

toger5 Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Half-Shot Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Half-Shot Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

toger5 Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

toger5 commented Sep 9, 2025 •

edited

Loading

toger5 commented Sep 11, 2025 •

edited

Loading