mirror of
https://github.com/vector-im/element-call.git
synced 2026-07-12 18:39:19 +00:00
e11c04ac87
On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates. (Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations 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 {
|
|
VideoCallSolidIcon,
|
|
VoiceCallSolidIcon,
|
|
EndCallIcon,
|
|
} from "@vector-im/compound-design-tokens/assets/web/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
|
|
import { useBehavior } from "../useBehavior";
|
|
|
|
interface Props {
|
|
vm: RingingMediaViewModel;
|
|
}
|
|
|
|
export const RingingStatus: FC<Props> = ({ vm }) => {
|
|
const { t } = useTranslation();
|
|
const pickupState = useBehavior(vm.pickupState$);
|
|
const Icon =
|
|
pickupState === "ringing"
|
|
? vm.intent === "video"
|
|
? VideoCallSolidIcon
|
|
: VoiceCallSolidIcon
|
|
: EndCallIcon;
|
|
|
|
return (
|
|
<>
|
|
<Icon aria-hidden />
|
|
{pickupState === "ringing"
|
|
? t("video_tile.calling")
|
|
: t("video_tile.call_ended")}
|
|
</>
|
|
);
|
|
};
|