toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed image overflow in message attachments (#8361) (#8398)

Browse source 
* fix: fixed image overflow in message attachments

* fix: fixed image overflow in message attachments

(cherry picked from commit 9607f42243)

Co-authored-by: fxnm <47592197+fxnm@users.noreply.github.com>
This commit is contained in:
Mattermost Build 2024-12-06 07:51:12 +01:00 committed by GitHub
parent fc87d16578
commit a84249a92f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/post_list/post/body/content/message_attachments/attachment_image/index.tsx
View file

@ -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(() => {

2
app/constants/image.ts
View file

@ -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,
};

15
app/utils/images/index.ts
View file

@ -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;
}