f509c06cc6
* Add a global control for toggling earpiece mode This will be used by Element X to show an earpiece toggle button in the header. * Add an earpiece overlay * Fix header The header needs to be passed forward as a string to some components and as a bool (hideHeader) to others. Also use a enum instead of string options. * fix top clipping with header * hide app bar in pip * revert android overlay app_bar * Modernize AppBarContext * Style header icon color as desired and switch earpice/speaker icon * fix initial selection when using controlled media * Add "Back to video" button * fix tests * remove dead code * add snapshot test * fix back to video button * Request capability to learn the room name We now need the room name in order to implement the mobile (widget-based) designs with the app bar. * Test the CallViewModel output switcher directly --------- Co-authored-by: Timo <toger5@hotmail.de>
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
/*
|
|
Copyright 2025 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 FC } from "react";
|
|
import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
|
|
import { EarpieceIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import styles from "./EarpieceOverlay.module.css";
|
|
|
|
interface Props {
|
|
show: boolean;
|
|
onBackToVideoPressed?: (() => void) | null;
|
|
}
|
|
|
|
export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={styles.overlay} data-show={show}>
|
|
<BigIcon className={styles.icon}>
|
|
<EarpieceIcon aria-hidden />
|
|
</BigIcon>
|
|
<Heading as="h2" weight="semibold" size="md">
|
|
{t("earpiece.overlay_title")}
|
|
</Heading>
|
|
<Text>{t("earpiece.overlay_description")}</Text>
|
|
<Button
|
|
kind="primary"
|
|
size="sm"
|
|
onClick={() => {
|
|
onBackToVideoPressed?.();
|
|
}}
|
|
>
|
|
{t("earpiece.overlay_back_button")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|