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 { IconPhoneOutgoing, IconX } from "@tabler/icons-react";
|
|
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
|
|
|
|
export function MessageCall(props: AttachmentProps) {
|
|
const {
|
|
getPreview,
|
|
} =
|
|
useAttachment(
|
|
props.attachment,
|
|
props.parent,
|
|
);
|
|
const preview = getPreview();
|
|
const callerRole = preview.split("::")[0];
|
|
const duration = parseInt(preview.split("::")[1]);
|
|
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 && <>
|
|
{callerRole == "0" && (
|
|
<IconPhoneOutgoing color={'white'} size={22}></IconPhoneOutgoing>
|
|
)}
|
|
{callerRole == "1" && (
|
|
<IconPhoneOutgoing color={'white'} size={22} style={{
|
|
transform: 'rotate(180deg)'
|
|
}}></IconPhoneOutgoing>
|
|
)}
|
|
</>}
|
|
{error && <>
|
|
<IconX color={'white'} size={22}></IconX>
|
|
</>}
|
|
</Avatar>
|
|
<Flex direction={'column'} gap={5}>
|
|
<Text size={'sm'}>{
|
|
error ? (callerRole == "0" ? "Missed call" : "Rejected call") : (callerRole == "0" ? "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>
|
|
);
|
|
} |