From a84249a92f797c5404c9216aaa447baf6a0e8763 Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Fri, 6 Dec 2024 07:51:12 +0100 Subject: [PATCH] fix: fixed image overflow in message attachments (#8361) (#8398) * fix: fixed image overflow in message attachments * fix: fixed image overflow in message attachments (cherry picked from commit 9607f42243fa7a1d953cb0c4281de9e7f0b2f46a) Co-authored-by: fxnm <47592197+fxnm@users.noreply.github.com> --- .../attachment_image/index.tsx | 2 +- app/constants/image.ts | 2 ++ app/utils/images/index.ts | 15 +++++++++++++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx b/app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx index f46fd44b130..a00eeb36b36 100644 --- a/app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx +++ b/app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx @@ -57,7 +57,7 @@ const AttachmentImage = ({imageUrl, imageMetadata, layoutWidth, location, postId const [error, setError] = useState(false); const fileId = useRef(generateId('uid')).current; const isTablet = useIsTablet(); - const {height, width} = calculateDimensions(imageMetadata.height, imageMetadata.width, layoutWidth || getViewPortWidth(false, isTablet)); + const {height, width} = calculateDimensions(imageMetadata.height, imageMetadata.width, layoutWidth || getViewPortWidth(false, isTablet, true)); const style = getStyleSheet(theme); const onError = useCallback(() => { diff --git a/app/constants/image.ts b/app/constants/image.ts index bd7d073709e..d1dcc76f085 100644 --- a/app/constants/image.ts +++ b/app/constants/image.ts @@ -6,6 +6,7 @@ export const IMAGE_MIN_DIMENSION = 50; export const MAX_GIF_SIZE = 100 * 1024 * 1024; export const VIEWPORT_IMAGE_OFFSET = 70; export const VIEWPORT_IMAGE_REPLY_OFFSET = 11; +export const VIEWPORT_IMAGE_ATTACHMENT_OFFSET = 31.5; // (2 * 12) MessageAttachment Padding + (2,5 + 5) AttachmentImage Padding export const MAX_RESOLUTION = 7680 * 4320; // 8K, ~33MPX export default { @@ -15,4 +16,5 @@ export default { MAX_RESOLUTION, VIEWPORT_IMAGE_OFFSET, VIEWPORT_IMAGE_REPLY_OFFSET, + VIEWPORT_IMAGE_ATTACHMENT_OFFSET, }; diff --git a/app/utils/images/index.ts b/app/utils/images/index.ts index e023d3e50f1..1f2faa4efe6 100644 --- a/app/utils/images/index.ts +++ b/app/utils/images/index.ts @@ -4,7 +4,14 @@ import {Dimensions} from 'react-native'; import {View} from '@constants'; -import {IMAGE_MAX_HEIGHT, IMAGE_MIN_DIMENSION, MAX_GIF_SIZE, VIEWPORT_IMAGE_OFFSET, VIEWPORT_IMAGE_REPLY_OFFSET} from '@constants/image'; +import { + IMAGE_MAX_HEIGHT, + IMAGE_MIN_DIMENSION, + MAX_GIF_SIZE, + VIEWPORT_IMAGE_ATTACHMENT_OFFSET, + VIEWPORT_IMAGE_OFFSET, + VIEWPORT_IMAGE_REPLY_OFFSET, +} from '@constants/image'; export const calculateDimensions = (height?: number, width?: number, viewPortWidth = 0, viewPortHeight = 0) => { 'worklet'; @@ -47,7 +54,7 @@ export const calculateDimensions = (height?: number, width?: number, viewPortWid }; }; -export function getViewPortWidth(isReplyPost: boolean, tabletOffset = false) { +export function getViewPortWidth(isReplyPost: boolean, tabletOffset = false, imageAttachmentOffset = false) { const {width, height} = Dimensions.get('window'); let portraitPostWidth = Math.min(width, height) - VIEWPORT_IMAGE_OFFSET; @@ -59,6 +66,10 @@ export function getViewPortWidth(isReplyPost: boolean, tabletOffset = false) { portraitPostWidth -= VIEWPORT_IMAGE_REPLY_OFFSET; } + if (imageAttachmentOffset) { + portraitPostWidth -= VIEWPORT_IMAGE_ATTACHMENT_OFFSET; + } + return portraitPostWidth; }