Исправлена блокировка потока при вставке изображений, оптимизирован код и ответственность

app/components/DialogInput/DialogInput.tsx

@@ -4,7 +4,7 @@ import { Box, Divider, Flex, Menu, Popover, Text, Transition, useComputedColorSc
 import { IconBarrierBlock, IconCamera, IconDoorExit, IconFile, IconMoodSmile, IconPaperclip, IconSend } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { useBlacklist } from "@/app/providers/BlacklistProvider/useBlacklist";
-import { base64ImageToBlurhash, filePrapareForNetworkTransfer, generateRandomKey, imagePrepareForNetworkTransfer } from "@/app/utils/utils";
+import { filePrapareForNetworkTransfer, generateRandomKey, imagePrepareForNetworkTransfer } from "@/app/utils/utils";
 import { Attachment, AttachmentType } from "@/app/providers/ProtocolProvider/protocol/packets/packet.message";
 import { DialogAttachment } from "../DialogAttachment/DialogAttachment";
 import { PacketTyping } from "@/app/providers/ProtocolProvider/protocol/packets/packet.typeing";
@@ -229,7 +229,7 @@ export function DialogInput() {
             blob: avatars[0].avatar,
             id: generateRandomKey(8),
             type: AttachmentType.AVATAR,
-            preview: await base64ImageToBlurhash(avatars[0].avatar)
+            preview: ""
         }]);
         if(editableDivRef.current){
             editableDivRef.current.focus();
@@ -264,11 +264,12 @@ export function DialogInput() {
                 const file = item.getAsFile();
                 if (file) {
                     const base64Image = await imagePrepareForNetworkTransfer(file);
+                    const attachmentId = generateRandomKey(8);
                     setAttachments([...attachments, {
                         blob: base64Image,
-                        id: generateRandomKey(8),
+                        id: attachmentId,
                         type: AttachmentType.IMAGE,
-                        preview: await base64ImageToBlurhash(base64Image)
+                        preview: ""
                     }]);
                 }
                 if(editableDivRef.current){
@@ -297,9 +298,10 @@ export function DialogInput() {
             return;
         }
         let fileContent = await filePrapareForNetworkTransfer(file);
+        const attachmentId = generateRandomKey(8);
         setAttachments([...attachments, {
             blob: fileContent,
-            id: generateRandomKey(8),
+            id: attachmentId,
             type: AttachmentType.FILE,
             preview: files[0].size + "::" + files[0].name
         }]);

app/components/MessageAttachments/MessageAvatar.tsx

@@ -4,12 +4,12 @@ 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";
+import { blurhashToBase64Image } from "@/app/workers/image/image";
 
 export function MessageAvatar(props: AttachmentProps) {
     const colors = useRosettaColors();
@@ -25,10 +25,12 @@ export function MessageAvatar(props: AttachmentProps) {
     const preview = getPreview();
     const [blob, setBlob] = useState(props.attachment.blob);
     const {lg} = useRosettaBreakpoints();
+    const [blurhashPreview, setBlurhashPreview] = useState("");
 
 
     useEffect(() => {
         constructBlob();
+        constructFromBlurhash();
     }, [downloadStatus]);
 
     const constructBlob = async () => {
@@ -57,6 +59,12 @@ export function MessageAvatar(props: AttachmentProps) {
         }
     }
 
+    const constructFromBlurhash = async () => {
+        if (preview.length < 20) return;
+        const blob = await blurhashToBase64Image(preview, 200, 220);
+        setBlurhashPreview(blob);
+    }
+
     return (
         <Paper withBorder p={'sm'}>
             <Flex gap={'sm'} direction={'row'}>
@@ -79,7 +87,7 @@ export function MessageAvatar(props: AttachmentProps) {
                                 height: 60,
                                 borderRadius: '50%',
                                 objectFit: 'cover'
-                            }} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
+                            }} src={blurhashPreview == "" ? undefined : blurhashPreview}></img>
                         </>
                     )}
                 </AspectRatio>

app/components/MessageAttachments/MessageImage.tsx

@@ -5,10 +5,11 @@ import { AspectRatio, Box, Flex, Overlay, Portal, Text } from "@mantine/core";
 import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { AttachmentProps } from "./MessageAttachments";
-import { blurhashToBase64Image, isMessageDeliveredByTime } from "@/app/utils/utils";
+import { isMessageDeliveredByTime } 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 { blurhashToBase64Image } from "@/app/workers/image/image";
 
 export function MessageImage(props: AttachmentProps) {
     const colors = useRosettaColors();
@@ -25,9 +26,11 @@ export function MessageImage(props: AttachmentProps) {
     const preview = getPreview();
     const [blob, setBlob] = useState(props.attachment.blob);
     const [loadedImage, setLoadedImage] = useState(false);
+    const [blurhashPreview, setBlurhashPreview] = useState("");
 
     useEffect(() => {
         constructBlob();
+        constructFromBlurhash();
     }, [downloadStatus]);
 
     const constructBlob = async () => {
@@ -45,6 +48,12 @@ export function MessageImage(props: AttachmentProps) {
         open(images, 0);
     }
 
+    const constructFromBlurhash = async () => {
+        if (preview.length < 20) return;
+        const blob = await blurhashToBase64Image(preview, 200, 220);
+        setBlurhashPreview(blob);
+    }
+
     const onClick = () => {
         if (downloadStatus == DownloadStatus.DOWNLOADED) {
             openImageViewer();
@@ -83,7 +92,7 @@ export function MessageImage(props: AttachmentProps) {
                         borderRadius: 8,
                         objectFit: 'cover',
                         border: '1px solid ' + colors.borderColor
-                    }} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
+                    }} src={blurhashPreview == "" ? undefined : blurhashPreview}></img>
                 </>
             )}