mirror of
https://github.com/vector-im/element-web.git
synced 2025-11-09 04:31:15 +01:00
Add decline button to call notification toast (use new notification event) (#30729)
* Add decline button to call notification toast (use new notification event) - This make EW incompatible with the old style notify events. Signed-off-by: Timo K <toger5@hotmail.de> * update styling for call toast Signed-off-by: Timo K <toger5@hotmail.de> * skip lobby on join button click / dont skip lobby on toast click Signed-off-by: Timo K <toger5@hotmail.de> * dismiss toast on remote decline Signed-off-by: Timo K <toger5@hotmail.de> * fixup docstring and event_id Signed-off-by: Timo K <toger5@hotmail.de> * Add tests Signed-off-by: Timo K <toger5@hotmail.de> * remove unused var Signed-off-by: Timo K <toger5@hotmail.de> * test that decline event gets sent Signed-off-by: Timo K <toger5@hotmail.de> * make "go to lobby" accessible via keyboard (fix sonar cloud) Signed-off-by: Timo K <toger5@hotmail.de> * remove keyboard input Signed-off-by: Timo K <toger5@hotmail.de> * fix lint Signed-off-by: Timo K <toger5@hotmail.de> * use actual button Signed-off-by: Timo K <toger5@hotmail.de> * review style + toggle for join immediately Signed-off-by: Timo K <toger5@hotmail.de> * fix `getNotificationEventSendTs` Signed-off-by: Timo K <toger5@hotmail.de> * use story component Signed-off-by: Timo K <toger5@hotmail.de> * english text Signed-off-by: Timo K <toger5@hotmail.de> * dont use legacy toggle Signed-off-by: Timo K <toger5@hotmail.de> * fix lint Signed-off-by: Timo K <toger5@hotmail.de> * review Signed-off-by: Timo K <toger5@hotmail.de> * review (mostly docs) Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo
GitHub
parent
3c13f55b74
commit
0783f27f33
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
@ -11,76 +11,52 @@ Please see LICENSE files in the repository root for full details.
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
pointer-events: initial; /* restore pointer events so the user can accept/decline */
|
||||
width: 250px;
|
||||
|
||||
$closeButtonSize: 16px;
|
||||
$closeButtonSize: var(--cpd-space-4x);
|
||||
|
||||
.mx_IncomingCallToast_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
gap: var(--cpd-space-4x);
|
||||
padding: var(--cpd-space-3x);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_IncomingCallToast_info {
|
||||
margin-bottom: $spacing-16;
|
||||
|
||||
.mx_IncomingCallToast_room {
|
||||
display: inline-block;
|
||||
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
/* Prevent overlap with the close button */
|
||||
width: calc(100% - $closeButtonSize - 2 * $spacing-4);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_message {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
.mx_LiveContentSummary {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
.mx_LiveContentSummary_participants::before {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.mx_IncomingCallToast_message {
|
||||
font-size: var(--cpd-font-size-body-lg);
|
||||
line-height: var(--cpd-font-size-heading-sm);
|
||||
width: calc(100% - $closeButtonSize - 2 * var(--cpd-space-1x));
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_joinButton {
|
||||
position: relative;
|
||||
.mx_LiveContentSummary_participants::before {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
bottom: $spacing-4;
|
||||
right: $spacing-4;
|
||||
.mx_IncomingCallToast_buttons {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_actionButton {
|
||||
position: relative;
|
||||
|
||||
align-self: flex-end;
|
||||
|
||||
box-sizing: border-box;
|
||||
min-width: 120px;
|
||||
|
||||
padding: $spacing-4 0;
|
||||
|
||||
line-height: $font-24px;
|
||||
padding: var(--cpd-space-1x) 0;
|
||||
padding-right: var(--cpd-space-4x);
|
||||
line-height: var(--cpd-space-6x);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IncomingCallToast_closeButton {
|
||||
position: absolute;
|
||||
|
||||
top: $spacing-4;
|
||||
right: $spacing-4;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
height: $closeButtonSize;
|
||||
@ -99,4 +75,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
.mx_IncomingCallToast_toggleWithLabel {
|
||||
display: flex;
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ import {
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { type PermissionChanged as PermissionChangedEvent } from "@matrix-org/analytics-events/types/typescript/PermissionChanged";
|
||||
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
|
||||
import { type IRTCNotificationContent, MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
|
||||
|
||||
import { MatrixClientPeg } from "./MatrixClientPeg";
|
||||
import { PosthogAnalytics } from "./PosthogAnalytics";
|
||||
@ -45,7 +45,7 @@ import { mediaFromMxc } from "./customisations/Media";
|
||||
import ErrorDialog from "./components/views/dialogs/ErrorDialog";
|
||||
import { SdkContextClass } from "./contexts/SDKContext";
|
||||
import { localNotificationsAreSilenced, createLocalNotificationSettingsIfNeeded } from "./utils/notifications";
|
||||
import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
|
||||
import { getIncomingCallToastKey, getNotificationEventSendTs, IncomingCallToast } from "./toasts/IncomingCallToast";
|
||||
import ToastStore from "./stores/ToastStore";
|
||||
import { stripPlainReply } from "./utils/Reply";
|
||||
import { BackgroundAudio } from "./audio/BackgroundAudio";
|
||||
@ -486,41 +486,33 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
|
||||
private performCustomEventHandling(ev: MatrixEvent): void {
|
||||
const cli = MatrixClientPeg.safeGet();
|
||||
const room = cli.getRoom(ev.getRoomId());
|
||||
const type = ev.getType();
|
||||
const thisUserHasConnectedDevice =
|
||||
room && MatrixRTCSession.callMembershipsForRoom(room).some((m) => m.sender === cli.getUserId());
|
||||
|
||||
if (EventType.GroupCallMemberPrefix === type && thisUserHasConnectedDevice) {
|
||||
const content = ev.getContent();
|
||||
|
||||
if (typeof content.call_id !== "string") {
|
||||
logger.warn(
|
||||
"Received malformatted GroupCallMemberPrefix event. Did not contain 'call_id' of type 'string'",
|
||||
);
|
||||
return;
|
||||
}
|
||||
// One of our devices has joined the call, so dismiss it.
|
||||
ToastStore.sharedInstance().dismissToast(getIncomingCallToastKey(content.call_id, room.roomId));
|
||||
}
|
||||
// Check maximum age (<= 15 seconds) of a call notify event that will trigger a ringing notification
|
||||
else if (EventType.CallNotify === type && (ev.getAge() ?? 0) < 15000 && !thisUserHasConnectedDevice) {
|
||||
const content = ev.getContent();
|
||||
if (EventType.RTCNotification === ev.getType() && !thisUserHasConnectedDevice) {
|
||||
const content = ev.getContent() as IRTCNotificationContent;
|
||||
const roomId = ev.getRoomId();
|
||||
const eventId = ev.getId();
|
||||
|
||||
if (typeof content.call_id !== "string") {
|
||||
logger.warn("Received malformatted CallNotify event. Did not contain 'call_id' of type 'string'");
|
||||
// Check maximum age of a call notification event that will trigger a ringing notification
|
||||
if (Date.now() - getNotificationEventSendTs(ev) > content.lifetime) {
|
||||
logger.warn("Received outdated RTCNotification event.");
|
||||
return;
|
||||
}
|
||||
if (!roomId) {
|
||||
logger.warn("Could not get roomId for CallNotify event");
|
||||
logger.warn("Could not get roomId for RTCNotification event");
|
||||
return;
|
||||
}
|
||||
if (!eventId) {
|
||||
logger.warn("Could not get eventId for RTCNotification event");
|
||||
return;
|
||||
}
|
||||
ToastStore.sharedInstance().addOrReplaceToast({
|
||||
key: getIncomingCallToastKey(content.call_id, roomId),
|
||||
key: getIncomingCallToastKey(eventId, roomId),
|
||||
priority: 100,
|
||||
component: IncomingCallToast,
|
||||
bodyClassName: "mx_IncomingCallToast",
|
||||
props: { notifyEvent: ev },
|
||||
props: { notificationEvent: ev },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -3987,6 +3987,7 @@
|
||||
"connection_lost": "Connectivity to the server has been lost",
|
||||
"connection_lost_description": "You cannot place calls without a connection to the server.",
|
||||
"consulting": "Consulting with %(transferTarget)s. <a>Transfer to %(transferee)s</a>",
|
||||
"decline_call": "Decline",
|
||||
"default_device": "Default Device",
|
||||
"dial": "Dial",
|
||||
"dialpad": "Dialpad",
|
||||
@ -4038,6 +4039,7 @@
|
||||
"show_sidebar_button": "Show sidebar",
|
||||
"silence": "Silence call",
|
||||
"silenced": "Notifications silenced",
|
||||
"skip_lobby_toggle_option": "Join immediately",
|
||||
"start_screenshare": "Start sharing your screen",
|
||||
"stop_screenshare": "Stop sharing your screen",
|
||||
"too_many_calls": "Too Many Calls",
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.avatarWithDetails {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 12px;
|
||||
background-color: var(--cpd-color-gray-200);
|
||||
padding: var(--cpd-space-2x);
|
||||
gap: var(--cpd-space-2x);
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: var(--cpd-font-size-body-md);
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: var(--cpd-font-size-body-sm);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { type Meta, type StoryObj } from "@storybook/react-vite/*";
|
||||
|
||||
import { AvatarWithDetails } from "./AvatarWithDetails";
|
||||
|
||||
const meta = {
|
||||
title: "Avatar/AvatarWithDetails",
|
||||
component: AvatarWithDetails,
|
||||
tags: ["autodocs"],
|
||||
args: {
|
||||
avatar: <div style={{ width: 40, height: 40, backgroundColor: "#888", borderRadius: "50%" }} />,
|
||||
details: "Details about the avatar go here",
|
||||
title: "Room Name",
|
||||
},
|
||||
} satisfies Meta<typeof AvatarWithDetails>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
export const Default: Story = {};
|
||||
@ -0,0 +1,21 @@
|
||||
/*
|
||||
Copyright 2025 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { composeStories } from "@storybook/react-vite";
|
||||
import { render } from "jest-matrix-react";
|
||||
import React from "react";
|
||||
|
||||
import * as stories from "./AvatarWithDetails.stories.tsx";
|
||||
|
||||
const { Default } = composeStories(stories);
|
||||
|
||||
describe("AvatarWithDetails", () => {
|
||||
it("renders a textual event", () => {
|
||||
const { container } = render(<Default />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,65 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type ComponentProps, type ElementType, type JSX, type PropsWithChildren } from "react";
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
import styles from "./AvatarWithDetails.module.css";
|
||||
import { Flex } from "../../utils/Flex";
|
||||
|
||||
export type AvatarWithDetailsProps<C extends ElementType> = {
|
||||
/**
|
||||
* The HTML tag.
|
||||
* @default "div"
|
||||
*/
|
||||
as?: C;
|
||||
/**
|
||||
* The CSS class name.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The title/label next to the avatar. Usually the user or room name.
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* A label with details to display under the avatar title.
|
||||
* Commonly used to display the number of participants in a room.
|
||||
*/
|
||||
details: React.ReactNode;
|
||||
/** The avatar to display. */
|
||||
avatar: React.ReactNode;
|
||||
} & ComponentProps<C>;
|
||||
|
||||
/**
|
||||
* A component to display an avatar with a title next to it in a grey box.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <AvatarWithDetails title="Room Name" details="10 participants" className="custom-class" />
|
||||
* ```
|
||||
*/
|
||||
export function AvatarWithDetails<C extends React.ElementType = "div">({
|
||||
as,
|
||||
className,
|
||||
details,
|
||||
avatar,
|
||||
title,
|
||||
...props
|
||||
}: PropsWithChildren<AvatarWithDetailsProps<C>>): JSX.Element {
|
||||
const Component = as || "div";
|
||||
|
||||
return (
|
||||
<Component className={classNames(styles.avatarWithDetails, className)} {...props}>
|
||||
{avatar}
|
||||
<Flex direction="column">
|
||||
<span className={styles.title}>{title}</span>
|
||||
<span className={styles.details}>{details}</span>
|
||||
</Flex>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AvatarWithDetails renders a textual event 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="avatarWithDetails"
|
||||
>
|
||||
<div
|
||||
style="width: 40px; height: 40px; background-color: rgb(136, 136, 136); border-radius: 50%;"
|
||||
/>
|
||||
<div
|
||||
class="flex"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span
|
||||
class="title"
|
||||
>
|
||||
Room Name
|
||||
</span>
|
||||
<span
|
||||
class="details"
|
||||
>
|
||||
Details about the avatar go here
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
8
src/shared-components/avatar/AvatarWithDetails/index.tsx
Normal file
8
src/shared-components/avatar/AvatarWithDetails/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
export { AvatarWithDetails } from "./AvatarWithDetails";
|
||||
@ -7,9 +7,13 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type JSX, useCallback, useEffect, useState } from "react";
|
||||
import { type MatrixEvent, type RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
|
||||
import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix";
|
||||
import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web";
|
||||
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
|
||||
import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
|
||||
import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
|
||||
|
||||
import { _t } from "../languageHandler";
|
||||
import RoomAvatar from "../components/views/avatars/RoomAvatar";
|
||||
@ -31,8 +35,36 @@ import { type Call, CallEvent } from "../models/Call";
|
||||
import LegacyCallHandler, { AudioID } from "../LegacyCallHandler";
|
||||
import { useEventEmitter } from "../hooks/useEventEmitter";
|
||||
import { CallStore, CallStoreEvent } from "../stores/CallStore";
|
||||
import { AvatarWithDetails } from "../shared-components/avatar/AvatarWithDetails";
|
||||
|
||||
export const getIncomingCallToastKey = (callId: string, roomId: string): string => `call_${callId}_${roomId}`;
|
||||
/**
|
||||
* Get the key for the incoming call toast. A combination of the event ID and room ID.
|
||||
* @param notificationEventId The ID of the notification event.
|
||||
* @param roomId The ID of the room.
|
||||
* @returns The key for the incoming call toast.
|
||||
*/
|
||||
export const getIncomingCallToastKey = (notificationEventId: string, roomId: string): string =>
|
||||
`call_${notificationEventId}_${roomId}`;
|
||||
|
||||
/**
|
||||
* Get the ts when the notification event was sent.
|
||||
* This can be either the origin_server_ts or a ts the sender of this event claims as
|
||||
* the time they sent it (sender_ts).
|
||||
* The origin_server_ts is the fallback if sender_ts seems wrong.
|
||||
* @param event The RTCNotification event.
|
||||
* @returns The timestamp to use as the expect start time to apply the `lifetime` to.
|
||||
*/
|
||||
export const getNotificationEventSendTs = (event: MatrixEvent): number => {
|
||||
const content = event.getContent() as Partial<IRTCNotificationContent>;
|
||||
const sendTs = content.sender_ts;
|
||||
if (sendTs && Math.abs(sendTs - event.getTs()) >= 15000) {
|
||||
logger.warn(
|
||||
"Received RTCNotification event. With large sender_ts origin_server_ts offset -> using origin_server_ts",
|
||||
);
|
||||
return event.getTs();
|
||||
}
|
||||
return sendTs ?? event.getTs();
|
||||
};
|
||||
const MAX_RING_TIME_MS = 90 * 1000;
|
||||
|
||||
interface JoinCallButtonWithCallProps {
|
||||
@ -49,11 +81,11 @@ function JoinCallButtonWithCall({ onClick, call, disabledTooltip }: JoinCallButt
|
||||
return (
|
||||
<Tooltip description={disTooltip ?? _t("voip|video_call")}>
|
||||
<Button
|
||||
className="mx_IncomingCallToast_joinButton"
|
||||
className="mx_IncomingCallToast_actionButton"
|
||||
onClick={onClick}
|
||||
disabled={disTooltip != undefined}
|
||||
kind="primary"
|
||||
Icon={VideoCallIcon}
|
||||
Icon={CheckIcon}
|
||||
size="sm"
|
||||
>
|
||||
{_t("action|join")}
|
||||
@ -62,12 +94,52 @@ function JoinCallButtonWithCall({ onClick, call, disabledTooltip }: JoinCallButt
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
notifyEvent: MatrixEvent;
|
||||
interface DeclineCallButtonWithNotificationEventProps {
|
||||
onDeclined: (e: ButtonEvent) => void;
|
||||
notificationEvent: MatrixEvent;
|
||||
room?: Room;
|
||||
}
|
||||
|
||||
export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
const roomId = notifyEvent.getRoomId()!;
|
||||
function DeclineCallButtonWithNotificationEvent({
|
||||
notificationEvent,
|
||||
room,
|
||||
onDeclined,
|
||||
}: DeclineCallButtonWithNotificationEventProps): JSX.Element {
|
||||
const [declining, setDeclining] = useState(false);
|
||||
const onClick = useCallback(
|
||||
async (e: ButtonEvent) => {
|
||||
e.stopPropagation();
|
||||
setDeclining(true);
|
||||
await room?.client.sendRtcDecline(room.roomId, notificationEvent.getId() ?? "");
|
||||
onDeclined(e);
|
||||
},
|
||||
[notificationEvent, onDeclined, room?.client, room?.roomId],
|
||||
);
|
||||
return (
|
||||
<Tooltip description={_t("voip|decline_call")}>
|
||||
<Button
|
||||
className="mx_IncomingCallToast_actionButton"
|
||||
onClick={onClick}
|
||||
kind="primary"
|
||||
destructive
|
||||
disabled={declining}
|
||||
Icon={CrossIcon}
|
||||
size="sm"
|
||||
>
|
||||
{_t("action|decline")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
notificationEvent: MatrixEvent;
|
||||
}
|
||||
|
||||
export function IncomingCallToast({ notificationEvent }: Props): JSX.Element {
|
||||
const roomId = notificationEvent.getRoomId()!;
|
||||
// Use a partial type so ts still helps us to not miss any type checks.
|
||||
const notificationContent = notificationEvent.getContent() as Partial<IRTCNotificationContent>;
|
||||
const room = MatrixClientPeg.safeGet().getRoom(roomId) ?? undefined;
|
||||
const call = useCall(roomId);
|
||||
const [connectedCalls, setConnectedCalls] = useState<Call[]>(Array.from(CallStore.instance.connectedCalls));
|
||||
@ -77,33 +149,52 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
const otherCallIsOngoing = connectedCalls.find((call) => call.roomId !== roomId);
|
||||
// Start ringing if not already.
|
||||
useEffect(() => {
|
||||
const isRingToast = (notifyEvent.getContent() as unknown as { notify_type: string })["notify_type"] == "ring";
|
||||
const isRingToast = notificationContent.notification_type == "ring";
|
||||
if (isRingToast && !LegacyCallHandler.instance.isPlaying(AudioID.Ring)) {
|
||||
LegacyCallHandler.instance.play(AudioID.Ring);
|
||||
}
|
||||
}, [notifyEvent]);
|
||||
}, [notificationContent.notification_type]);
|
||||
|
||||
// Stop ringing on dismiss.
|
||||
const dismissToast = useCallback((): void => {
|
||||
ToastStore.sharedInstance().dismissToast(
|
||||
getIncomingCallToastKey(notifyEvent.getContent().call_id ?? "", roomId),
|
||||
);
|
||||
const notificationId = notificationEvent.getId();
|
||||
if (!notificationId) {
|
||||
logger.warn("Could not get eventId for RTCNotification event");
|
||||
return;
|
||||
}
|
||||
ToastStore.sharedInstance().dismissToast(getIncomingCallToastKey(notificationId, roomId));
|
||||
LegacyCallHandler.instance.pause(AudioID.Ring);
|
||||
}, [notifyEvent, roomId]);
|
||||
}, [notificationEvent, roomId]);
|
||||
|
||||
// Dismiss if session got ended remotely.
|
||||
const onCall = useCallback(
|
||||
(call: Call, callRoomId: string): void => {
|
||||
const roomId = notifyEvent.getRoomId();
|
||||
const roomId = notificationEvent.getRoomId();
|
||||
if (!roomId && roomId !== callRoomId) return;
|
||||
if (call === null || call.participants.size === 0) {
|
||||
dismissToast();
|
||||
}
|
||||
},
|
||||
[dismissToast, notifyEvent],
|
||||
[dismissToast, notificationEvent],
|
||||
);
|
||||
|
||||
// Dismiss if antother device from this user joins.
|
||||
// Dismiss if session got declined remotely.
|
||||
const onTimelineChange = useCallback(
|
||||
(ev: MatrixEvent) => {
|
||||
const userId = room?.client.getUserId();
|
||||
if (
|
||||
ev.getType() === EventType.RTCDecline &&
|
||||
userId !== undefined &&
|
||||
ev.getSender() === userId && // It is our decline not someone elses
|
||||
ev.relationEventId === notificationEvent.getId() // The event declines this ringing toast.
|
||||
) {
|
||||
dismissToast();
|
||||
}
|
||||
},
|
||||
[dismissToast, notificationEvent, room?.client],
|
||||
);
|
||||
|
||||
// Dismiss if another device from this user joins.
|
||||
const onParticipantChange = useCallback(
|
||||
(participants: Map<RoomMember, Set<string>>, prevParticipants: Map<RoomMember, Set<string>>) => {
|
||||
if (Array.from(participants.keys()).some((p) => p.userId == room?.client.getUserId())) {
|
||||
@ -115,7 +206,8 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
|
||||
// Dismiss on timeout.
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(dismissToast, MAX_RING_TIME_MS);
|
||||
const lifetime = notificationContent.lifetime ?? MAX_RING_TIME_MS;
|
||||
const timeout = setTimeout(dismissToast, getNotificationEventSendTs(notificationEvent) + lifetime - Date.now());
|
||||
return () => clearTimeout(timeout);
|
||||
});
|
||||
|
||||
@ -132,7 +224,10 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
),
|
||||
);
|
||||
|
||||
const [skipLobbyToggle, setSkipLobbyToggle] = useState(true);
|
||||
|
||||
// Dismiss on clicking join.
|
||||
// If the skip lobby option is undefined, it will use to the shift key state to decide if the lobby is skipped.
|
||||
const onJoinClick = useCallback(
|
||||
(e: ButtonEvent): void => {
|
||||
e.stopPropagation();
|
||||
@ -142,11 +237,11 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
action: Action.ViewRoom,
|
||||
room_id: room?.roomId,
|
||||
view_call: true,
|
||||
skipLobby: "shiftKey" in e ? e.shiftKey : false,
|
||||
skipLobby: skipLobbyToggle ?? ("shiftKey" in e ? e.shiftKey : false),
|
||||
metricsTrigger: undefined,
|
||||
});
|
||||
},
|
||||
[room],
|
||||
[room, skipLobbyToggle],
|
||||
);
|
||||
|
||||
// Dismiss on closing toast.
|
||||
@ -161,35 +256,47 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
|
||||
|
||||
useEventEmitter(CallStore.instance, CallStoreEvent.Call, onCall);
|
||||
useEventEmitter(call ?? undefined, CallEvent.Participants, onParticipantChange);
|
||||
useEventEmitter(room, RoomEvent.Timeline, onTimelineChange);
|
||||
|
||||
const callLiveContentSummary = call ? (
|
||||
<LiveContentSummaryWithCall call={call} />
|
||||
) : (
|
||||
<LiveContentSummary
|
||||
type={LiveContentType.Video}
|
||||
text={_t("common|video")}
|
||||
active={false}
|
||||
participantCount={0}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<>
|
||||
<div>
|
||||
<RoomAvatar room={room ?? undefined} size="24px" />
|
||||
</div>
|
||||
<div className="mx_IncomingCallToast_content">
|
||||
<div className="mx_IncomingCallToast_info">
|
||||
<span className="mx_IncomingCallToast_room">
|
||||
{room ? room.name : _t("voip|call_toast_unknown_room")}
|
||||
</span>
|
||||
<div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
|
||||
{call ? (
|
||||
<LiveContentSummaryWithCall call={call} />
|
||||
) : (
|
||||
<LiveContentSummary
|
||||
type={LiveContentType.Video}
|
||||
text={_t("common|video")}
|
||||
active={false}
|
||||
participantCount={0}
|
||||
/>
|
||||
)}
|
||||
<div className="mx_IncomingCallToast_message">
|
||||
<VideoCallIcon width="20px" height="20px" style={{ position: "relative", top: "4px" }} />{" "}
|
||||
{_t("voip|video_call_started")}
|
||||
</div>
|
||||
<JoinCallButtonWithCall
|
||||
onClick={onJoinClick}
|
||||
call={call}
|
||||
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
|
||||
<AvatarWithDetails
|
||||
avatar={<RoomAvatar room={room ?? undefined} size="32px" />}
|
||||
details={callLiveContentSummary}
|
||||
title={room ? room.name : _t("voip|call_toast_unknown_room")}
|
||||
/>
|
||||
<div className="mx_IncomingCallToast_toggleWithLabel">
|
||||
<span>{_t("voip|skip_lobby_toggle_option")}</span>
|
||||
<ToggleInput onChange={(e) => setSkipLobbyToggle(e.target.checked)} checked={skipLobbyToggle} />
|
||||
</div>
|
||||
<div className="mx_IncomingCallToast_buttons">
|
||||
<DeclineCallButtonWithNotificationEvent
|
||||
notificationEvent={notificationEvent}
|
||||
room={room}
|
||||
onDeclined={onCloseClick}
|
||||
/>
|
||||
<JoinCallButtonWithCall
|
||||
onClick={onJoinClick}
|
||||
call={call}
|
||||
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AccessibleButton
|
||||
className="mx_IncomingCallToast_closeButton"
|
||||
|
||||
@ -204,6 +204,7 @@ export function createTestClient(): MatrixClient {
|
||||
sendTyping: jest.fn().mockResolvedValue({}),
|
||||
sendMessage: jest.fn().mockResolvedValue({}),
|
||||
sendStateEvent: jest.fn().mockResolvedValue(undefined),
|
||||
sendRtcDecline: jest.fn().mockResolvedValue(undefined),
|
||||
getSyncState: jest.fn().mockReturnValue("SYNCING"),
|
||||
generateClientSecret: () => "t35tcl1Ent5ECr3T",
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
|
||||
@ -385,33 +385,49 @@ describe("Notifier", () => {
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
const emitCallNotifyEvent = (type?: string, roomMention = true) => {
|
||||
const callEvent = mkEvent({
|
||||
type: type ?? EventType.CallNotify,
|
||||
const emitCallNotificationEvent = (
|
||||
params: {
|
||||
type?: string;
|
||||
roomMention?: boolean;
|
||||
lifetime?: number;
|
||||
ts?: number;
|
||||
} = {},
|
||||
) => {
|
||||
const { type, roomMention, lifetime, ts } = {
|
||||
type: EventType.RTCNotification,
|
||||
roomMention: true,
|
||||
lifetime: 30000,
|
||||
ts: Date.now(),
|
||||
...params,
|
||||
};
|
||||
const notificationEvent = mkEvent({
|
||||
type: type,
|
||||
user: "@alice:foo",
|
||||
room: roomId,
|
||||
ts,
|
||||
content: {
|
||||
"application": "m.call",
|
||||
"notification_type": "ring",
|
||||
"m.relation": { rel_type: "m.reference", event_id: "$memberEventId" },
|
||||
"m.mentions": { user_ids: [], room: roomMention },
|
||||
"notify_type": "ring",
|
||||
"call_id": "abc123",
|
||||
lifetime,
|
||||
"sender_ts": ts,
|
||||
},
|
||||
event: true,
|
||||
});
|
||||
emitLiveEvent(callEvent);
|
||||
return callEvent;
|
||||
emitLiveEvent(notificationEvent);
|
||||
return notificationEvent;
|
||||
};
|
||||
|
||||
it("shows group call toast", () => {
|
||||
const notifyEvent = emitCallNotifyEvent();
|
||||
const notificationEvent = emitCallNotificationEvent();
|
||||
|
||||
expect(ToastStore.sharedInstance().addOrReplaceToast).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
key: getIncomingCallToastKey(notifyEvent.getContent().call_id ?? "", roomId),
|
||||
key: getIncomingCallToastKey(notificationEvent.getId() ?? "", roomId),
|
||||
priority: 100,
|
||||
component: IncomingCallToast,
|
||||
bodyClassName: "mx_IncomingCallToast",
|
||||
props: { notifyEvent },
|
||||
props: { notificationEvent },
|
||||
}),
|
||||
);
|
||||
});
|
||||
@ -439,59 +455,19 @@ describe("Notifier", () => {
|
||||
const roomSession = MatrixRTCSession.roomSessionForRoom(mockClient, testRoom);
|
||||
|
||||
mockClient.matrixRTC.getRoomSession.mockReturnValue(roomSession);
|
||||
emitCallNotifyEvent();
|
||||
emitCallNotificationEvent();
|
||||
expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
|
||||
spyCallMemberships.mockRestore();
|
||||
});
|
||||
|
||||
it("dismisses call notification when another device answers the call", () => {
|
||||
const notifyEvent = emitCallNotifyEvent();
|
||||
const spyCallMemberships = jest.spyOn(MatrixRTCSession, "callMembershipsForRoom");
|
||||
it("should not show toast when calling with a different event type to org.matrix.msc4075.rtc.notification", () => {
|
||||
emitCallNotificationEvent({ type: "event_type" });
|
||||
|
||||
expect(ToastStore.sharedInstance().addOrReplaceToast).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
key: getIncomingCallToastKey(notifyEvent.getContent().call_id ?? "", roomId),
|
||||
priority: 100,
|
||||
component: IncomingCallToast,
|
||||
bodyClassName: "mx_IncomingCallToast",
|
||||
props: { notifyEvent },
|
||||
}),
|
||||
);
|
||||
// Mock ourselves joining the call.
|
||||
spyCallMemberships.mockReturnValue([
|
||||
new CallMembership(
|
||||
mkEvent({
|
||||
event: true,
|
||||
room: testRoom.roomId,
|
||||
user: userId,
|
||||
type: EventType.GroupCallMemberPrefix,
|
||||
content: {},
|
||||
}),
|
||||
{
|
||||
call_id: "123",
|
||||
application: "m.call",
|
||||
focus_active: { type: "livekit" },
|
||||
foci_preferred: [],
|
||||
device_id: "DEVICE",
|
||||
},
|
||||
),
|
||||
]);
|
||||
const callEvent = mkEvent({
|
||||
type: EventType.GroupCallMemberPrefix,
|
||||
user: "@alice:foo",
|
||||
room: roomId,
|
||||
content: {
|
||||
call_id: "abc123",
|
||||
},
|
||||
event: true,
|
||||
});
|
||||
emitLiveEvent(callEvent);
|
||||
expect(ToastStore.sharedInstance().dismissToast).toHaveBeenCalled();
|
||||
spyCallMemberships.mockRestore();
|
||||
expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should not show toast when calling with non-group call event", () => {
|
||||
emitCallNotifyEvent("event_type");
|
||||
it("should not show notification event is expired", () => {
|
||||
emitCallNotificationEvent({ ts: Date.now() - 40000 });
|
||||
|
||||
expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
import React from "react";
|
||||
import { render, screen, cleanup, fireEvent, waitFor } from "jest-matrix-react";
|
||||
import { mocked, type Mocked } from "jest-mock";
|
||||
import { type Mock, mocked, type Mocked } from "jest-mock";
|
||||
import {
|
||||
Room,
|
||||
RoomStateEvent,
|
||||
@ -16,9 +16,13 @@ import {
|
||||
MatrixEventEvent,
|
||||
type MatrixClient,
|
||||
type RoomMember,
|
||||
EventType,
|
||||
RoomEvent,
|
||||
type IRoomTimelineData,
|
||||
type ISendEventResponse,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { type ClientWidgetApi, Widget } from "matrix-widget-api";
|
||||
import { type ICallNotifyContent } from "matrix-js-sdk/src/matrixrtc";
|
||||
import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
|
||||
|
||||
import {
|
||||
useMockedCalls,
|
||||
@ -27,6 +31,7 @@ import {
|
||||
mkRoomMember,
|
||||
setupAsyncStoreWithClient,
|
||||
resetAsyncStoreWithClient,
|
||||
mkEvent,
|
||||
} from "../../test-utils";
|
||||
import defaultDispatcher from "../../../src/dispatcher/dispatcher";
|
||||
import { Action } from "../../../src/dispatcher/actions";
|
||||
@ -35,15 +40,21 @@ import { CallStore } from "../../../src/stores/CallStore";
|
||||
import { WidgetMessagingStore } from "../../../src/stores/widgets/WidgetMessagingStore";
|
||||
import DMRoomMap from "../../../src/utils/DMRoomMap";
|
||||
import ToastStore from "../../../src/stores/ToastStore";
|
||||
import { getIncomingCallToastKey, IncomingCallToast } from "../../../src/toasts/IncomingCallToast";
|
||||
import {
|
||||
getIncomingCallToastKey,
|
||||
getNotificationEventSendTs,
|
||||
IncomingCallToast,
|
||||
} from "../../../src/toasts/IncomingCallToast";
|
||||
import LegacyCallHandler, { AudioID } from "../../../src/LegacyCallHandler";
|
||||
import { CallEvent } from "../../../src/models/Call";
|
||||
|
||||
describe("IncomingCallToast", () => {
|
||||
useMockedCalls();
|
||||
|
||||
let client: Mocked<MatrixClient>;
|
||||
let room: Room;
|
||||
let notifyContent: ICallNotifyContent;
|
||||
let notificationEvent: MatrixEvent;
|
||||
|
||||
let alice: RoomMember;
|
||||
let bob: RoomMember;
|
||||
let call: MockedCall;
|
||||
@ -64,10 +75,23 @@ describe("IncomingCallToast", () => {
|
||||
document.body.appendChild(audio);
|
||||
|
||||
room = new Room("!1:example.org", client, "@alice:example.org");
|
||||
notifyContent = {
|
||||
call_id: "",
|
||||
getRoomId: () => room.roomId,
|
||||
} as unknown as ICallNotifyContent;
|
||||
const ts = Date.now();
|
||||
const notificationContent = {
|
||||
"notification_type": "notification",
|
||||
"m.relation": { rel_type: "m.reference", event_id: "$memberEventId" },
|
||||
"m.mentions": { user_ids: [], room: true },
|
||||
"lifetime": 3000,
|
||||
"sender_ts": ts,
|
||||
} as unknown as IRTCNotificationContent;
|
||||
notificationEvent = mkEvent({
|
||||
type: EventType.RTCNotification,
|
||||
user: "@userId:matrix.org",
|
||||
content: notificationContent,
|
||||
room: room.roomId,
|
||||
ts,
|
||||
id: "$notificationEventId",
|
||||
event: true,
|
||||
});
|
||||
alice = mkRoomMember(room.roomId, "@alice:example.org");
|
||||
bob = mkRoomMember(room.roomId, "@bob:example.org");
|
||||
|
||||
@ -104,8 +128,12 @@ describe("IncomingCallToast", () => {
|
||||
});
|
||||
|
||||
const renderToast = () => {
|
||||
call.event.getContent = () => notifyContent as any;
|
||||
render(<IncomingCallToast notifyEvent={call.event} />);
|
||||
call.event.getContent = () =>
|
||||
({
|
||||
call_id: "",
|
||||
getRoomId: () => room.roomId,
|
||||
}) as any;
|
||||
render(<IncomingCallToast notificationEvent={notificationEvent} />);
|
||||
};
|
||||
|
||||
it("correctly shows all the information", () => {
|
||||
@ -124,14 +152,13 @@ describe("IncomingCallToast", () => {
|
||||
});
|
||||
|
||||
it("start ringing on ring notify event", () => {
|
||||
call.event.getContent = () =>
|
||||
({
|
||||
...notifyContent,
|
||||
notify_type: "ring",
|
||||
}) as any;
|
||||
const oldContent = notificationEvent.getContent() as IRTCNotificationContent;
|
||||
(notificationEvent as unknown as { getContent: () => IRTCNotificationContent }).getContent = () => {
|
||||
return { ...oldContent, notification_type: "ring" } as IRTCNotificationContent;
|
||||
};
|
||||
|
||||
const playMock = jest.spyOn(LegacyCallHandler.instance, "play");
|
||||
render(<IncomingCallToast notifyEvent={call.event} />);
|
||||
render(<IncomingCallToast notificationEvent={notificationEvent} />);
|
||||
expect(playMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@ -143,15 +170,44 @@ describe("IncomingCallToast", () => {
|
||||
screen.getByText("Video");
|
||||
|
||||
screen.getByRole("button", { name: "Join" });
|
||||
screen.getByRole("button", { name: "Decline" });
|
||||
screen.getByRole("button", { name: "Close" });
|
||||
});
|
||||
|
||||
it("joins the call and closes the toast", async () => {
|
||||
it("opens the call directly and closes the toast when pressing on the join button", async () => {
|
||||
renderToast();
|
||||
|
||||
const dispatcherSpy = jest.fn();
|
||||
const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
|
||||
|
||||
// click on the avatar (which is the example used for pressing on any area other than the buttons)
|
||||
fireEvent.click(screen.getByRole("button", { name: "Join" }));
|
||||
await waitFor(() =>
|
||||
expect(dispatcherSpy).toHaveBeenCalledWith({
|
||||
action: Action.ViewRoom,
|
||||
room_id: room.roomId,
|
||||
skipLobby: true,
|
||||
view_call: true,
|
||||
}),
|
||||
);
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
|
||||
defaultDispatcher.unregister(dispatcherRef);
|
||||
});
|
||||
|
||||
it("opens the call lobby and closes the toast when configured like that", async () => {
|
||||
renderToast();
|
||||
|
||||
const dispatcherSpy = jest.fn();
|
||||
const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
|
||||
|
||||
fireEvent.click(screen.getByRole("switch", {}));
|
||||
|
||||
// click on the avatar (which is the example used for pressing on any area other than the buttons)
|
||||
fireEvent.click(screen.getByRole("button", { name: "Join" }));
|
||||
await waitFor(() =>
|
||||
expect(dispatcherSpy).toHaveBeenCalledWith({
|
||||
@ -163,12 +219,13 @@ describe("IncomingCallToast", () => {
|
||||
);
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
|
||||
defaultDispatcher.unregister(dispatcherRef);
|
||||
});
|
||||
|
||||
it("Dismiss toast if user starts call and skips lobby when using shift key click", async () => {
|
||||
renderToast();
|
||||
|
||||
@ -186,7 +243,28 @@ describe("IncomingCallToast", () => {
|
||||
);
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
|
||||
defaultDispatcher.unregister(dispatcherRef);
|
||||
});
|
||||
|
||||
it("Dismiss toast if user joins with a remote device", async () => {
|
||||
renderToast();
|
||||
|
||||
const dispatcherSpy = jest.fn();
|
||||
const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
|
||||
|
||||
call.emit(
|
||||
CallEvent.Participants,
|
||||
new Map([[mkRoomMember(room.roomId, "@userId:matrix.org"), new Set(["a"])]]),
|
||||
new Map(),
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
|
||||
@ -202,7 +280,7 @@ describe("IncomingCallToast", () => {
|
||||
fireEvent.click(screen.getByRole("button", { name: "Close" }));
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
|
||||
@ -220,7 +298,7 @@ describe("IncomingCallToast", () => {
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
@ -233,7 +311,7 @@ describe("IncomingCallToast", () => {
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
@ -244,8 +322,136 @@ describe("IncomingCallToast", () => {
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notifyContent.call_id, room.roomId),
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("closes toast when a decline event was received", async () => {
|
||||
(toastStore.dismissToast as Mock).mockReset();
|
||||
renderToast();
|
||||
|
||||
room.emit(
|
||||
RoomEvent.Timeline,
|
||||
mkEvent({
|
||||
user: "@userId:matrix.org",
|
||||
type: EventType.RTCDecline,
|
||||
content: { "m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" } },
|
||||
event: true,
|
||||
}),
|
||||
room,
|
||||
undefined,
|
||||
false,
|
||||
{} as unknown as IRoomTimelineData,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("does not close toast when a decline event for another user was received", async () => {
|
||||
(toastStore.dismissToast as Mock).mockReset();
|
||||
renderToast();
|
||||
|
||||
room.emit(
|
||||
RoomEvent.Timeline,
|
||||
mkEvent({
|
||||
user: "@userIdNotMe:matrix.org",
|
||||
type: EventType.RTCDecline,
|
||||
content: { "m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" } },
|
||||
event: true,
|
||||
}),
|
||||
room,
|
||||
undefined,
|
||||
false,
|
||||
{} as unknown as IRoomTimelineData,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).not.toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("does not close toast when a decline event for another notification Event was received", async () => {
|
||||
(toastStore.dismissToast as Mock).mockReset();
|
||||
renderToast();
|
||||
|
||||
room.emit(
|
||||
RoomEvent.Timeline,
|
||||
mkEvent({
|
||||
user: "@userId:matrix.org",
|
||||
type: EventType.RTCDecline,
|
||||
content: { "m.relates_to": { event_id: "$otherNotificationEventRelation", rel_type: "m.reference" } },
|
||||
event: true,
|
||||
}),
|
||||
room,
|
||||
undefined,
|
||||
false,
|
||||
{} as unknown as IRoomTimelineData,
|
||||
);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).not.toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("sends a decline event when clicking the decline button and only dismiss after sending", async () => {
|
||||
(toastStore.dismissToast as Mock).mockReset();
|
||||
|
||||
renderToast();
|
||||
|
||||
const { promise, resolve } = Promise.withResolvers<ISendEventResponse>();
|
||||
client.sendRtcDecline.mockImplementation(() => {
|
||||
return promise;
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Decline" }));
|
||||
|
||||
expect(toastStore.dismissToast).not.toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
);
|
||||
expect(client.sendRtcDecline).toHaveBeenCalledWith("!1:example.org", "$notificationEventId");
|
||||
|
||||
resolve({ event_id: "$declineEventId" });
|
||||
|
||||
await waitFor(() =>
|
||||
expect(toastStore.dismissToast).toHaveBeenCalledWith(
|
||||
getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("getNotificationEventSendTs returns the correct ts", () => {
|
||||
const eventOriginServerTs = mkEvent({
|
||||
user: "@userId:matrix.org",
|
||||
type: EventType.RTCNotification,
|
||||
content: {
|
||||
"m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" },
|
||||
"sender_ts": 222_000,
|
||||
},
|
||||
event: true,
|
||||
ts: 1111,
|
||||
});
|
||||
|
||||
const eventSendTs = mkEvent({
|
||||
user: "@userId:matrix.org",
|
||||
type: EventType.RTCNotification,
|
||||
content: {
|
||||
"m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" },
|
||||
"sender_ts": 2222,
|
||||
},
|
||||
event: true,
|
||||
ts: 1111,
|
||||
});
|
||||
|
||||
expect(getNotificationEventSendTs(eventOriginServerTs)).toBe(1111);
|
||||
expect(getNotificationEventSendTs(eventSendTs)).toBe(2222);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user