Обмен ключами шифрования DH
This commit is contained in:
@@ -3,8 +3,9 @@ import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
||||
import { CallContextValue, CallState } from "@/app/providers/CallProvider/CallProvider";
|
||||
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
|
||||
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
||||
import { Avatar, Box, Flex, Text } from "@mantine/core";
|
||||
import { Avatar, Box, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
|
||||
import { IconChevronLeft, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneX, IconQrcode, IconVolume, IconVolumeOff, IconX } from "@tabler/icons-react";
|
||||
import { KeyImage } from "../KeyImage/KeyImage";
|
||||
|
||||
export interface CallProps {
|
||||
context: CallContextValue;
|
||||
@@ -20,10 +21,14 @@ export function Call(props: CallProps) {
|
||||
setSound,
|
||||
setMuted,
|
||||
setShowCallView,
|
||||
muted} = props.context;
|
||||
muted,
|
||||
getKeyCast,
|
||||
accept
|
||||
} = props.context;
|
||||
const [userInfo] = useUserInformation(activeCall);
|
||||
const avatars = useAvatars(activeCall);
|
||||
const colors = useRosettaColors();
|
||||
const theme = useMantineTheme();
|
||||
|
||||
return (
|
||||
<Box pos={'absolute'} top={0} left={0} w={'100%'} h={'100vh'} style={{
|
||||
@@ -39,7 +44,25 @@ export function Call(props: CallProps) {
|
||||
<Text fw={500}>Back</Text>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<IconQrcode size={24}></IconQrcode>
|
||||
<Popover width={300} withArrow>
|
||||
<Popover.Target>
|
||||
<IconQrcode size={24}></IconQrcode>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={'xs'}>
|
||||
<Flex direction={'row'} align={'center'} gap={'xs'}>
|
||||
<Text maw={300} c={'dimmed'} fz={'xs'}>
|
||||
This call is secured by 256 bit end-to-end encryption. Only you and the recipient can read or listen to the content of this call.
|
||||
</Text>
|
||||
<KeyImage radius={0} colors={[
|
||||
theme.colors.blue[1],
|
||||
theme.colors.blue[2],
|
||||
theme.colors.blue[3],
|
||||
theme.colors.blue[4],
|
||||
theme.colors.blue[5]
|
||||
]} size={80} keyRender={getKeyCast()}></KeyImage>
|
||||
</Flex>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction={'column'} mt={'xl'} style={{
|
||||
@@ -50,8 +73,9 @@ export function Call(props: CallProps) {
|
||||
{callState == CallState.ACTIVE && (<Text fz={14} c={'#FFF'}>{translateDurationToTime(duration)}</Text>)}
|
||||
{callState == CallState.CONNECTING && (<Text fz={14} c={'#FFF'}>Connecting...</Text>)}
|
||||
{callState == CallState.INCOMING && (<Text fz={14} c={'#FFF'}>Incoming call...</Text>)}
|
||||
{callState == CallState.KEY_EXCHANGE && (<Text fz={14} c={'#FFF'}>Exchanging encryption keys...</Text>)}
|
||||
<Flex gap={'xl'} align={'center'} justify={'center'} mt={'xl'}>
|
||||
{callState == CallState.ACTIVE || callState == CallState.CONNECTING && (
|
||||
{callState == CallState.ACTIVE || callState == CallState.CONNECTING || callState == CallState.KEY_EXCHANGE && (
|
||||
<>
|
||||
<Box w={50} onClick={() => setSound(!sound)} style={{
|
||||
borderRadius: 25,
|
||||
@@ -93,7 +117,7 @@ export function Call(props: CallProps) {
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
<Box w={userInfo.title != "Rosetta" ? 50 : 100} onClick={close} style={{
|
||||
<Box w={userInfo.title != "Rosetta" ? 50 : 100} onClick={accept} style={{
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer'
|
||||
}} h={userInfo.title != "Rosetta" ? 50 : 100} bg={colors.success}>
|
||||
|
||||
Reference in New Issue
Block a user