78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
import { useAvatarChange } from "@/app/providers/AvatarProvider/useChangeAvatar";
|
|
import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
|
|
import { imagePrepareForNetworkTransfer } from "@/app/utils/utils";
|
|
import { Avatar, Box, Flex, Overlay } from "@mantine/core";
|
|
import { useFileDialog } from "@mantine/hooks";
|
|
import { IconCamera } from "@tabler/icons-react";
|
|
import { useState } from "react";
|
|
|
|
interface ActionAvatarProps {
|
|
title: string;
|
|
publicKey: string;
|
|
forceChangeable?: boolean;
|
|
}
|
|
|
|
export function ActionAvatar(props : ActionAvatarProps) {
|
|
const [overlay, setOverlay] = useState(false);
|
|
const publicKey = usePublicKey();
|
|
const changeAvatar = useAvatarChange();
|
|
const avatars = useAvatars(props.publicKey, true);
|
|
const {open} = useImageViewer();
|
|
|
|
const fileDialog = useFileDialog({
|
|
multiple: false,
|
|
accept: 'image/*',
|
|
onChange: async (files) => {
|
|
if(!files){
|
|
return;
|
|
}
|
|
if(files.length == 0){
|
|
return;
|
|
}
|
|
const file = files[0];
|
|
const base64Image = await imagePrepareForNetworkTransfer(file);
|
|
changeAvatar(base64Image, props.publicKey);
|
|
}
|
|
});
|
|
|
|
const onClickAvatar = () => {
|
|
if(props.publicKey != publicKey && !props.forceChangeable){
|
|
open(avatars.map(a => ({src: a.avatar, timestamp: a.timestamp})), 0);
|
|
return;
|
|
}
|
|
fileDialog.open();
|
|
}
|
|
|
|
return (
|
|
<Flex align={'center'} justify={'center'}>
|
|
<Box
|
|
w={120} h={120}
|
|
onMouseEnter={() => setOverlay(true)}
|
|
onMouseLeave={() => setOverlay(false)}
|
|
style={{
|
|
cursor: 'pointer'
|
|
}}
|
|
onClick={onClickAvatar}
|
|
pos={'relative'}>
|
|
<Avatar
|
|
size={120}
|
|
radius={120}
|
|
mx="auto"
|
|
name={props.title.trim() || props.publicKey}
|
|
color={'initials'}
|
|
src={avatars.length > 0 ?
|
|
avatars[0].avatar
|
|
: undefined}
|
|
>
|
|
</Avatar>
|
|
{(overlay && (props.publicKey == publicKey || props.forceChangeable)) && <Overlay zIndex={99} radius={120}>
|
|
<Flex align={'center'} justify={'center'} h={'100%'} gap={5} opacity={0.8}>
|
|
<IconCamera stroke={2} color="white" size={40}></IconCamera>
|
|
</Flex>
|
|
</Overlay>}
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
} |