mirror of
https://github.com/vector-im/element-call.git
synced 2026-02-05 04:15:58 +00:00
4be395500f
* Fix the interactivity of buttons while reconnecting or in earpiece mode When we're in one of these modes, we need to ensure that everything above the overlay (the header and footer buttons) is interactive, while everything obscured by the overlay (the media tiles) is non-interactive and removed from the accessibility tree. It's not a very easy task to trap focus *outside* an element, so the best solution I could come up with is to set tabindex="-1" manually on all interactive elements belonging to the media tiles. * Write a Playwright test for reconnecting * fix lints Signed-off-by: Timo K <toger5@hotmail.de> * fix test Signed-off-by: Timo K <toger5@hotmail.de> * enable http2 for matrx-rtc host to allow the jwt service to talk to the SFU * remove rate limit for delayed events * more time to connect to livekit SFU * Due to a Firefox issue we set the start anchor for the tab test to the Mute microphone button * adapt to most recent Element Web version * Use the "End call" button as proofe for a started call * Currrenty disabled due to recent Element Web - not indicating the number of participants - bypassing Lobby * linting * disable 'can only interact with header and footer while reconnecting' for firefox --------- Signed-off-by: Timo K <toger5@hotmail.de> Co-authored-by: Timo <16718859+toger5@users.noreply.github.com> Co-authored-by: Timo K <toger5@hotmail.de> Co-authored-by: fkwp <github-fkwp@w4ve.de>
111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
/*
|
|
Copyright 2023, 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import {
|
|
type ComponentType,
|
|
type FC,
|
|
type SVGAttributes,
|
|
useCallback,
|
|
useEffect,
|
|
} from "react";
|
|
import {
|
|
Root as DialogRoot,
|
|
Portal as DialogPortal,
|
|
Overlay as DialogOverlay,
|
|
Content as DialogContent,
|
|
Close as DialogClose,
|
|
Title as DialogTitle,
|
|
} from "@radix-ui/react-dialog";
|
|
import classNames from "classnames";
|
|
import { Text } from "@vector-im/compound-web";
|
|
|
|
import styles from "./Toast.module.css";
|
|
import overlayStyles from "./Overlay.module.css";
|
|
|
|
interface Props {
|
|
/**
|
|
* The controlled open state of the toast.
|
|
*/
|
|
open: boolean;
|
|
/**
|
|
* Callback for when the user dismisses the toast.
|
|
*/
|
|
onDismiss: () => void;
|
|
/**
|
|
* A number of milliseconds after which the toast should be automatically
|
|
* dismissed.
|
|
*/
|
|
autoDismiss?: number;
|
|
children: string;
|
|
/**
|
|
* A supporting icon to display within the toast.
|
|
*/
|
|
Icon?: ComponentType<SVGAttributes<SVGElement>>;
|
|
/**
|
|
* Whether the toast should be modal, making it fill the screen (by portalling
|
|
* it into the root of the document) and trap focus until dismissed.
|
|
* @default true
|
|
*/
|
|
modal?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A temporary message shown in an overlay in the center of the screen.
|
|
*/
|
|
export const Toast: FC<Props> = ({
|
|
open,
|
|
onDismiss,
|
|
autoDismiss,
|
|
children,
|
|
Icon,
|
|
modal = true,
|
|
}) => {
|
|
const onOpenChange = useCallback(
|
|
(open: boolean) => {
|
|
if (!open) onDismiss();
|
|
},
|
|
[onDismiss],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (open && autoDismiss !== undefined) {
|
|
const timeout = setTimeout(onDismiss, autoDismiss);
|
|
return (): void => clearTimeout(timeout);
|
|
}
|
|
}, [open, autoDismiss, onDismiss]);
|
|
|
|
const content = (
|
|
<>
|
|
<DialogOverlay
|
|
className={classNames(overlayStyles.bg, overlayStyles.animate)}
|
|
/>
|
|
<DialogContent aria-describedby={undefined} asChild>
|
|
<DialogClose
|
|
className={classNames(
|
|
overlayStyles.overlay,
|
|
overlayStyles.animate,
|
|
styles.toast,
|
|
)}
|
|
>
|
|
<DialogTitle asChild>
|
|
<Text as="h3" size="sm" weight="semibold">
|
|
{children}
|
|
</Text>
|
|
</DialogTitle>
|
|
{Icon && <Icon width={20} height={20} aria-hidden />}
|
|
</DialogClose>
|
|
</DialogContent>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<DialogRoot open={open} onOpenChange={onOpenChange} modal={modal}>
|
|
{modal ? <DialogPortal>{content}</DialogPortal> : content}
|
|
</DialogRoot>
|
|
);
|
|
};
|