Убрана темная подолжка у фотографий
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,44 +84,6 @@ 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'}>
|
|
||||||
{!error && (
|
|
||||||
<Box style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: 50,
|
|
||||||
height: 40,
|
|
||||||
width: 40,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}>
|
|
||||||
{downloadPercentage > 0 ? (
|
|
||||||
<AnimatedRoundedProgress size={40} value={downloadPercentage} color="white"></AnimatedRoundedProgress>
|
|
||||||
) : (
|
|
||||||
<IconArrowDown size={25} color={'white'} />
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{error && (
|
|
||||||
<Box p={'xs'} style={{
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
||||||
borderRadius: 8,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 4
|
|
||||||
}}>
|
|
||||||
<Text size={'xs'} c={'white'}>
|
|
||||||
Image expired
|
|
||||||
</Text>
|
|
||||||
<IconFlameFilled size={15} style={{
|
|
||||||
fontSmooth: 'always'
|
|
||||||
}} color={'white'} />
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</Overlay>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -149,6 +110,43 @@ export function MessageImage(props: AttachmentProps) {
|
|||||||
<IconCircleX size={40} color={colors.error} />
|
<IconCircleX size={40} color={colors.error} />
|
||||||
</Overlay>
|
</Overlay>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{(downloadStatus == DownloadStatus.NOT_DOWNLOADED || downloadStatus == DownloadStatus.DOWNLOADING) && (<Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
|
||||||
|
{!error && (
|
||||||
|
<Box style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: 50,
|
||||||
|
height: 40,
|
||||||
|
width: 40,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}>
|
||||||
|
{downloadPercentage > 0 ? (
|
||||||
|
<AnimatedRoundedProgress size={40} value={downloadPercentage} color="white"></AnimatedRoundedProgress>
|
||||||
|
) : (
|
||||||
|
<IconArrowDown size={25} color={'white'} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<Box p={'xs'} style={{
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: 8,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4
|
||||||
|
}}>
|
||||||
|
<Text size={'xs'} c={'white'}>
|
||||||
|
Image expired
|
||||||
|
</Text>
|
||||||
|
<IconFlameFilled size={15} style={{
|
||||||
|
fontSmooth: 'always'
|
||||||
|
}} color={'white'} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Flex>)}
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user