'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/components/MessageAttachments/MessageAvatar.tsx
+++ b/app/components/MessageAttachments/MessageAvatar.tsx
@@ -0,0 +1,111 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
+import { AspectRatio, Button, Flex, Paper, Text } from "@mantine/core";
+import { IconArrowDown } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+import { AttachmentProps } from "./MessageAttachments";
+import { blurhashToBase64Image } from "@/app/utils/utils";
+import { AnimatedRoundedProgress } from "../AnimatedRoundedProgress/AnimatedRoundedProgress";
+import { ImageToView } from "@/app/providers/ImageViewerProvider/ImageViewerProvider";
+import { DownloadStatus, useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
+import { PopoverLockIconAvatar } from "../PopoverLockIconAvatar/PopoverLockIconAvatar";
+import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
+
+export function MessageAvatar(props: AttachmentProps) {
+    const colors = useRosettaColors();
+    const {
+        downloadPercentage, 
+        //uploadedPercentage, 
+        download, 
+        downloadStatus,
+        getBlob,
+        getPreview} = useAttachment(props.attachment, props.chacha_key_plain);
+    const mainRef = useRef<HTMLDivElement>(null);
+    const { open } = useImageViewer();
+    const preview = getPreview();
+    const [blob, setBlob] = useState(props.attachment.blob);
+    const {lg} = useRosettaBreakpoints();
+
+
+    useEffect(() => {
+        constructBlob();
+    }, [downloadStatus]);
+
+    const constructBlob = async () => {
+        let blob = await getBlob();
+        setBlob(blob);
+    }
+
+    const openImageViewer = () => {
+        const images: ImageToView[] = [{
+            src: blob,
+            caption: props.text,
+            timestamp: props.timestamp
+        }];
+
+        open(images, 0);
+    }
+
+    const onClick = () => {
+        if (downloadStatus == DownloadStatus.DOWNLOADED) {
+            openImageViewer();
+            return;
+        }
+        if (downloadStatus == DownloadStatus.NOT_DOWNLOADED) {
+            download();
+            return;
+        }
+    }
+
+    return (
+        <Paper withBorder p={'sm'}>
+            <Flex gap={'sm'} direction={'row'}>
+                <AspectRatio onClick={onClick} ref={mainRef} style={{
+                    height: 60,
+                    width: 60,
+                    userSelect: 'none'
+                }} ratio={16 / 9} pos={'relative'}>
+                    {blob != "" && (
+                        <img style={{
+                            height: 60,
+                            width: 60,
+                            borderRadius: '50%',
+                            objectFit: 'cover'
+                        }} src={blob}></img>)}
+                    {downloadStatus != DownloadStatus.DOWNLOADED && downloadStatus != DownloadStatus.PENDING && preview.length >= 20 && (
+                        <>
+                            <img style={{
+                                width: 60,
+                                height: 60,
+                                borderRadius: '50%',
+                                objectFit: 'cover'
+                            }} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
+                        </>
+                    )}
+                </AspectRatio>
+                <Flex direction={"column"}>
+                    <Flex direction={'row'} gap={5} align={'center'}>
+                        <Text fw={500} fz={'sm'}>Avatar</Text>
+                        <PopoverLockIconAvatar></PopoverLockIconAvatar>
+                    </Flex>
+                    <Text fz={'xs'} c={'dimmed'}>
+                        An avatar image shared in the message.
+                    </Text>
+                    {downloadStatus != DownloadStatus.DOWNLOADED && (
+                        <Flex direction={'row'} mt={'xs'} justify={'flex-end'} align={'center'} gap={'sm'}>
+                            {lg && <Text fz={9} c={'dimmed'}>Avatars are end-to-end encrypted</Text>}
+                            <Flex align={'center'}>
+                                {downloadStatus == DownloadStatus.NOT_DOWNLOADED && 
+                                    <Button leftSection={<IconArrowDown size={14}></IconArrowDown>} size={'xs'} variant={'light'} onClick={download}>Download</Button>
+                                }
+                                {downloadStatus == DownloadStatus.DOWNLOADING && 
+                                    <Button leftSection={<AnimatedRoundedProgress size={14} color={colors.brandColor} value={downloadPercentage}></AnimatedRoundedProgress>} size={'xs'} variant={'light'}>Download</Button>
+                                }
+                            </Flex>
+                        </Flex>                        
+                    )}
+                </Flex>
+            </Flex>
+        </Paper>
+    );
+}