62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import { useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
|
|
import { AttachmentProps } from "./MessageAttachments";
|
|
import { Avatar, Box, Flex, Text } from "@mantine/core";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { IconPhoneIncoming, IconPhoneOutgoing, IconX } from "@tabler/icons-react";
|
|
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
|
|
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
|
|
|
export function MessageCall(props: AttachmentProps) {
|
|
const {
|
|
getPreview,
|
|
} =
|
|
useAttachment(
|
|
props.attachment,
|
|
props.parent,
|
|
);
|
|
const publicKey = usePublicKey();
|
|
const preview = getPreview();
|
|
const caller = props.parent.from == publicKey;
|
|
const duration = parseInt(preview);
|
|
const colors = useRosettaColors();
|
|
const error = duration == 0;
|
|
|
|
return (
|
|
<Box p={'sm'} style={{
|
|
background: colors.mainColor,
|
|
border: '1px solid ' + colors.borderColor,
|
|
borderRadius: 8,
|
|
minWidth: 200,
|
|
minHeight: 60
|
|
}}>
|
|
<Flex gap={'sm'} direction={'row'}>
|
|
<Avatar bg={error ? colors.error : colors.brandColor} size={40}>
|
|
{!error && <>
|
|
{!caller && (
|
|
<IconPhoneIncoming color={'white'} size={22}></IconPhoneIncoming>
|
|
)}
|
|
{caller && (
|
|
<IconPhoneOutgoing color={'white'} size={22}></IconPhoneOutgoing>
|
|
)}
|
|
</>}
|
|
{error && <>
|
|
<IconX color={'white'} size={22}></IconX>
|
|
</>}
|
|
</Avatar>
|
|
<Flex direction={'column'} gap={5}>
|
|
<Text size={'sm'}>{
|
|
error ? (!caller ? "Missed call" : "Rejected call") : (!caller ? "Incoming call" : "Outgoing call")
|
|
}</Text>
|
|
{!error &&
|
|
<Text size={'xs'} c={colors.chevrons.active}>
|
|
{translateDurationToTime(duration)}
|
|
</Text>
|
|
}
|
|
{error && <Text size={'xs'} c={colors.error}>
|
|
Call was not answered or was rejected
|
|
</Text>}
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
} |