Increase max displayable image dimensions
Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
This commit is contained in:
parent
42bcec03cc
commit
e03ac4394e
4 changed files with 27 additions and 18 deletions
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue