// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import {IMAGE_MAX_HEIGHT} from '@constants/image'; import {calculateDimensions} from '@utils/images'; /** Preset caps loosely aligned with Adaptive Cards `Image` sizes; `stretch` matches legacy attachment `image_url`. */ export const MM_IMAGE_SIZE_CAPS: Record = { auto: null, xsmall: {maxWidth: 108, maxHeight: 64}, small: {maxWidth: 204, maxHeight: 120}, medium: {maxWidth: 320, maxHeight: 184}, large: {maxWidth: 428, maxHeight: 240}, stretch: {maxWidth: 500, maxHeight: 350}, }; export function resolveMmImageCaps(block: MmImageBlock): {maxWidth?: number; maxHeight?: number} { const size = block.size ?? 'stretch'; const preset = MM_IMAGE_SIZE_CAPS[size]; const maxWidth = block.max_width ?? preset?.maxWidth; const maxHeight = block.max_height ?? preset?.maxHeight; if (size === 'auto' && block.max_width === undefined && block.max_height === undefined) { return {}; } const out: {maxWidth?: number; maxHeight?: number} = {}; if (maxWidth !== undefined) { out.maxWidth = maxWidth; } if (maxHeight !== undefined) { out.maxHeight = maxHeight; } return out; } export type MmBlocksImageLayout = { width: number; height: number; galleryWidth: number; galleryHeight: number; }; export function computeMmBlocksImageLayout( caps: {maxWidth?: number; maxHeight?: number}, layoutWidth: number | undefined, metadata: PostImage | undefined, viewPortWidth: number, ): MmBlocksImageLayout { const viewport = layoutWidth ? Math.min(layoutWidth, viewPortWidth) : viewPortWidth; const maxW = caps.maxWidth ?? viewport; const maxH = caps.maxHeight ?? IMAGE_MAX_HEIGHT; if (metadata?.width && metadata?.height) { const {width, height} = calculateDimensions( metadata.height, metadata.width, Math.min(viewport, maxW), maxH, ); return { width, height, galleryWidth: metadata.width, galleryHeight: metadata.height, }; } const width = Math.min(maxW, viewport); const height = Math.min(maxH, Math.round(width * 0.75)); return { width, height, galleryWidth: width, galleryHeight: height, }; } export function refineMmBlocksImageLayoutFromIntrinsic( intrinsicWidth: number, intrinsicHeight: number, caps: {maxWidth?: number; maxHeight?: number}, layoutWidth: number | undefined, viewPortWidth: number, ): MmBlocksImageLayout { const viewport = layoutWidth ? Math.min(layoutWidth, viewPortWidth) : viewPortWidth; const maxW = caps.maxWidth ?? viewport; const maxH = caps.maxHeight ?? IMAGE_MAX_HEIGHT; const {width, height} = calculateDimensions( intrinsicHeight, intrinsicWidth, Math.min(viewport, maxW), maxH, ); return { width, height, galleryWidth: intrinsicWidth, galleryHeight: intrinsicHeight, }; }