Increase max displayable image dimensions

Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2025-07-16 15:11:12 -05:00 committed by GitHub
parent 42bcec03cc
commit e03ac4394e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 27 additions and 18 deletions

View file

@ -10,7 +10,7 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
import type { AttachmentForUIType } from '../../types/Attachment';
import {
hasNotResolved,
getImageDimensions,
getImageDimensionsForTimeline,
defaultBlurHash,
isDownloadable,
} from '../../types/Attachment';
@ -65,7 +65,7 @@ export function GIF(props: Props): JSX.Element {
const tapToPlay = useReducedMotion() || _forceTapToPlay;
const videoRef = useRef<HTMLVideoElement | null>(null);
const { height, width } = getImageDimensions(attachment, size);
const { height, width } = getImageDimensionsForTimeline(attachment, size);
const [repeatCount, setRepeatCount] = useState(0);
const [playTime, setPlayTime] = useState(MAX_GIF_TIME);

View file

@ -11,7 +11,7 @@ import type {
import {
areAllAttachmentsVisual,
getAlt,
getImageDimensions,
getImageDimensionsForTimeline,
getThumbnailUrl,
getUrl,
isDownloadable,
@ -189,7 +189,7 @@ export function ImageGrid({
});
if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
const { height, width } = getImageDimensions(
const { height, width } = getImageDimensionsForTimeline(
attachments[0],
isSticker ? stickerSize : undefined
);

View file

@ -61,7 +61,7 @@ import {
canDisplayImage,
getExtensionForDisplay,
getGridDimensions,
getImageDimensions,
getImageDimensionsForTimeline,
hasImage,
hasVideoScreenshot,
isAudio,
@ -2622,7 +2622,7 @@ export class Message extends React.PureComponent<Props, State> {
firstLinkPreview.image &&
shouldUseFullSizeLinkPreviewImage(firstLinkPreview)
) {
const dimensions = getImageDimensions(firstLinkPreview.image);
const dimensions = getImageDimensionsForTimeline(firstLinkPreview.image);
if (dimensions) {
return dimensions.width;
}

View file

@ -48,11 +48,13 @@ import { missingCaseError } from '../util/missingCaseError';
const logging = createLogger('Attachment');
const MAX_WIDTH = 300;
const MAX_HEIGHT = MAX_WIDTH * 1.5;
const MIN_WIDTH = 200;
const MIN_HEIGHT = 50;
const MAX_TIMELINE_IMAGE_WIDTH = 300;
const MAX_TIMELINE_IMAGE_HEIGHT = MAX_TIMELINE_IMAGE_WIDTH * 1.5;
const MIN_TIMELINE_IMAGE_WIDTH = 200;
const MIN_TIMELINE_IMAGE_HEIGHT = 50;
const MAX_DISPLAYABLE_IMAGE_WIDTH = 8192;
const MAX_DISPLAYABLE_IMAGE_HEIGHT = 8192;
// Used for display
export class AttachmentSizeError extends Error {}
@ -706,10 +708,10 @@ export function canDisplayImage(
return Boolean(
height &&
height > 0 &&
height <= 4096 &&
height <= MAX_DISPLAYABLE_IMAGE_HEIGHT &&
width &&
width > 0 &&
width <= 4096
width <= MAX_DISPLAYABLE_IMAGE_WIDTH
);
}
@ -885,26 +887,33 @@ type DimensionsType = {
width: number;
};
export function getImageDimensions(
export function getImageDimensionsForTimeline(
attachment: Pick<AttachmentType, 'width' | 'height'>,
forcedWidth?: number
): DimensionsType {
const { height, width } = attachment;
if (!height || !width) {
return {
height: MIN_HEIGHT,
width: MIN_WIDTH,
height: MIN_TIMELINE_IMAGE_HEIGHT,
width: MIN_TIMELINE_IMAGE_WIDTH,
};
}
const aspectRatio = height / width;
const targetWidth =
forcedWidth || Math.max(Math.min(MAX_WIDTH, width), MIN_WIDTH);
forcedWidth ||
Math.max(
Math.min(MAX_TIMELINE_IMAGE_WIDTH, width),
MIN_TIMELINE_IMAGE_WIDTH
);
const candidateHeight = Math.round(targetWidth * aspectRatio);
return {
width: targetWidth,
height: Math.max(Math.min(MAX_HEIGHT, candidateHeight), MIN_HEIGHT),
height: Math.max(
Math.min(MAX_TIMELINE_IMAGE_HEIGHT, candidateHeight),
MIN_TIMELINE_IMAGE_HEIGHT
),
};
}
@ -938,7 +947,7 @@ export function getGridDimensions(
}
if (attachments.length === 1) {
return getImageDimensions(attachments[0]);
return getImageDimensionsForTimeline(attachments[0]);
}
if (attachments.length === 2) {