Убрана темная подолжка у фотографий
This commit is contained in:
@@ -18,7 +18,7 @@ export function MessageImage(props: AttachmentProps) {
|
|||||||
download,
|
download,
|
||||||
downloadStatus,
|
downloadStatus,
|
||||||
getBlob,
|
getBlob,
|
||||||
getPreview} = useAttachment(props.attachment, props.chacha_key_plain);
|
getPreview } = useAttachment(props.attachment, props.chacha_key_plain);
|
||||||
const mainRef = useRef<HTMLDivElement>(null);
|
const mainRef = useRef<HTMLDivElement>(null);
|
||||||
const error = downloadStatus == DownloadStatus.ERROR;
|
const error = downloadStatus == DownloadStatus.ERROR;
|
||||||
const { open } = useImageViewer();
|
const { open } = useImageViewer();
|
||||||
@@ -55,7 +55,6 @@ export function MessageImage(props: AttachmentProps) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.info(downloadStatus);
|
|
||||||
return (
|
return (
|
||||||
<AspectRatio onClick={onClick} ref={mainRef} style={{
|
<AspectRatio onClick={onClick} ref={mainRef} style={{
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
@@ -85,8 +84,34 @@ export function MessageImage(props: AttachmentProps) {
|
|||||||
objectFit: 'cover',
|
objectFit: 'cover',
|
||||||
border: '1px solid ' + colors.borderColor
|
border: '1px solid ' + colors.borderColor
|
||||||
}} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
|
}} src={/*block render???*/blurhashToBase64Image(preview, 200, 220)}></img>
|
||||||
<Overlay center h={'100%'} radius={8} opacity={1} color="transparent">
|
</>
|
||||||
<Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
|
)}
|
||||||
|
|
||||||
|
{(props.delivered == DeliveredMessageState.WAITING && uploadedPercentage > 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)) &&
|
||||||
|
<Portal target={mainRef.current!}>
|
||||||
|
<Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
|
||||||
|
<Box style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: 50,
|
||||||
|
height: 40,
|
||||||
|
width: 40,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}>
|
||||||
|
<AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</Portal>}
|
||||||
|
{(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED &&
|
||||||
|
!isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)
|
||||||
|
)) && (
|
||||||
|
<Overlay center h={'100%'} radius={8} color="#000" opacity={0.85}>
|
||||||
|
<IconCircleX size={40} color={colors.error} />
|
||||||
|
</Overlay>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(downloadStatus == DownloadStatus.NOT_DOWNLOADED || downloadStatus == DownloadStatus.DOWNLOADING) && (<Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
|
||||||
{!error && (
|
{!error && (
|
||||||
<Box style={{
|
<Box style={{
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
@@ -121,34 +146,7 @@ export function MessageImage(props: AttachmentProps) {
|
|||||||
}} color={'white'} />
|
}} color={'white'} />
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Flex>
|
</Flex>)}
|
||||||
</Overlay>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(props.delivered == DeliveredMessageState.WAITING && uploadedPercentage > 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)) &&
|
|
||||||
<Portal target={mainRef.current!}>
|
|
||||||
<Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
|
|
||||||
<Box style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: 50,
|
|
||||||
height: 40,
|
|
||||||
width: 40,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}>
|
|
||||||
<AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
</Portal>}
|
|
||||||
{(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED &&
|
|
||||||
!isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)
|
|
||||||
)) && (
|
|
||||||
<Overlay center h={'100%'} radius={8} color="#000" opacity={0.85}>
|
|
||||||
<IconCircleX size={40} color={colors.error} />
|
|
||||||
</Overlay>
|
|
||||||
)}
|
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user