Skip to content

Regression: Attachment auto size #28332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 6 commits into from
Mar 9, 2023
Merged

Regression: Attachment auto size #28332

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
437c015
fix: image size in small screens
hugocostadev Mar 8, 2023
f89ea6c
use attachment provider to calculate the max width
ggazzo Mar 8, 2023
4ec041c
use attachment provider to calculate the max width
ggazzo Mar 8, 2023
9a5e663
Merge branch 'develop' into regression/image-size
ggazzo Mar 8, 2023
8852ed2
chore: lint
dougfabris Mar 8, 2023
f69726e
adjusts and lint error
hugocostadev Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 30 additions & 24 deletions apps/meteor/client/components/message/content/attachments/structure/AttachmentImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Dimensions } from '@rocket.chat/core-typings';
import { useAttachmentDimensions } from '@rocket.chat/ui-contexts';
import type { FC, SyntheticEvent } from 'react';
import type { FC } from 'react';
import React, { memo, useState, useMemo } from 'react';

import ImageBox from './image/ImageBox';
Expand Down Expand Up @@ -33,24 +33,13 @@ const getDimensions = (
return { width: (height / originalHeight) * originalWidth, height };
};

interface IPictureLoadEvent extends SyntheticEvent {
target: HTMLImageElement;
}

const AttachmentImage: FC<AttachmentImageProps> = ({ previewUrl, dataSrc, loadImage = true, setLoadImage, src, ...size }) => {
const limits = useAttachmentDimensions();

const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(false);

const [sizes, setSizes] = useState({ width: size?.width || limits.width, height: size?.height || limits.height });

const hasSizes = useMemo(
() =>
size?.width || size?.height
? undefined
: (e: IPictureLoadEvent) => setSizes({ width: e.target.naturalWidth, height: e.target.naturalHeight }),
[size],
);
const sizes = { width: size?.width || limits.width, height: size?.height || limits.height };

const { setHasError, setHasNoError } = useMemo(
() => ({
Expand All @@ -62,8 +51,6 @@ const AttachmentImage: FC<AttachmentImageProps> = ({ previewUrl, dataSrc, loadIm

const dimensions = getDimensions(sizes.width, sizes.height, limits);

const background = previewUrl && `url(${previewUrl}) center center / cover no-repeat fixed`;

if (!loadImage) {
return <Load {...dimensions} {...limits} load={setLoadImage} />;
}
Expand All @@ -73,14 +60,33 @@ const AttachmentImage: FC<AttachmentImageProps> = ({ previewUrl, dataSrc, loadIm
}

return (
<ImageBox
is='picture'
onLoad={hasSizes}
onError={setHasError}
{...(previewUrl && ({ style: { background, boxSizing: 'content-box' } } as any))}
{...dimensions}
>
<img className='gallery-item' data-src={dataSrc || src} src={src} {...dimensions} />
<ImageBox width={dimensions.width} height={loaded ? 'auto' : dimensions.height}>
<img
onError={setHasError}
src={previewUrl}
style={{
opacity: loaded ? 0 : 1,
maxWidth: '100%',
width: loaded ? 'inherit' : dimensions.width,
height: loaded ? 'inherit' : dimensions.height,
transition: 'opacity .1s linear',
position: 'absolute',
}}
/>
<img
className='gallery-item'
onLoad={(): void => setLoaded(true)}
onError={setHasError}
data-src={dataSrc || src}
src={src}
style={{
maxWidth: '100%',
opacity: loaded ? 1 : 0,
width: loaded ? 'inherit' : 0,
height: loaded ? 'inherit' : 0,
zIndex: 1,
}}
/>
</ImageBox>
);
};
Expand Down
1 change: 1 addition & 0 deletions apps/meteor/client/components/message/content/attachments/structure/image/ImageBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ImageBox: FC<ComponentProps<typeof Box>> = (props) => (
borderWidth='default'
borderStyle='solid'
borderColor='extra-light'
position='relative'
{...props}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { useOembedLayout } from '../../hooks/useOembedLayout';
import type { UrlPreviewMetadata } from './UrlPreviewMetadata';

const UrlImagePreview = ({ url }: Pick<UrlPreviewMetadata, 'url'>): ReactElement => {
const { maxWidth: oembedMaxWidth, maxHeight: oembedMaxHeight } = useOembedLayout();
const { maxHeight: oembedMaxHeight } = useOembedLayout();

return (
<Box maxHeight={oembedMaxHeight} maxWidth={oembedMaxWidth}>
<Box maxHeight={oembedMaxHeight} maxWidth={'100%'}>
Comment thread
ggazzo marked this conversation as resolved.
<MessageGenericPreviewImage className='gallery-item' url={url || ''} />
</Box>
);
Expand Down