mirror of
https://github.com/vector-im/element-call.git
synced 2026-01-30 03:15:55 +00:00
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>
91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
/*
|
|
Copyright 2022-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 FC, type ReactElement, type ReactNode, useEffect } from "react";
|
|
import classNames from "classnames";
|
|
import { useTranslation } from "react-i18next";
|
|
import * as Sentry from "@sentry/react";
|
|
import { logger } from "matrix-js-sdk/lib/logger";
|
|
import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
|
|
|
import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
|
|
import styles from "./FullScreenView.module.css";
|
|
import { useUrlParams } from "./UrlParams";
|
|
import { RichError } from "./RichError";
|
|
import { ErrorView } from "./ErrorView";
|
|
import { type WidgetHelpers } from "./widget.ts";
|
|
|
|
interface FullScreenViewProps {
|
|
className?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const FullScreenView: FC<FullScreenViewProps> = ({
|
|
className,
|
|
children,
|
|
}) => {
|
|
const { header } = useUrlParams();
|
|
return (
|
|
<div className={classNames(styles.page, className)}>
|
|
{header === "standard" && (
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav />
|
|
</Header>
|
|
)}
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface ErrorPageProps {
|
|
error: Error | unknown;
|
|
widget: WidgetHelpers | null;
|
|
}
|
|
|
|
// Due to this component being used as the crash fallback for Sentry, which has
|
|
// weird type requirements, we can't just give this a type of FC<ErrorPageProps>
|
|
export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
|
|
const { t } = useTranslation();
|
|
useEffect(() => {
|
|
logger.error(error);
|
|
Sentry.captureException(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<FullScreenView>
|
|
{error instanceof RichError ? (
|
|
error.richMessage
|
|
) : (
|
|
<ErrorView
|
|
widget={widget}
|
|
Icon={ErrorSolidIcon}
|
|
title={t("error.generic")}
|
|
rageshake
|
|
fatal
|
|
>
|
|
<p>{t("error.generic_description")}</p>
|
|
</ErrorView>
|
|
)}
|
|
</FullScreenView>
|
|
);
|
|
};
|
|
|
|
export const LoadingPage: FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<FullScreenView>
|
|
<h1>{t("common.loading")}</h1>
|
|
</FullScreenView>
|
|
);
|
|
};
|