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

This commit is contained in:
RoyceDa
2026-02-19 21:43:27 +02:00
parent a38a331cd1
commit 53535d68e0
7 changed files with 147 additions and 54 deletions

View File

@@ -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>

View File

@@ -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>
</>
)}