Increase max displayable image dimensions
This commit is contained in:
parent
149b7d4f8b
commit
eb9476c291
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 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);
|
||||||
|
|
|
@ -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
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue