mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Increase max displayable image dimensions

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
ts/components/conversation/GIF.tsx
View file

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

4
ts/components/conversation/ImageGrid.tsx
View file

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

4
ts/components/conversation/Message.tsx
View file

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

33
ts/types/Attachment.ts
View file

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