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 9607f42) Co-authored-by: fxnm <[email protected]>
mattermost · Dec 6, 2024 · a84249a · a84249a
1 parent fc87d16
commit a84249a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -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;
 }