diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index ac4f357cc..faf941c09 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -139,7 +139,7 @@ import { getCustomEmojiSize } from '../composer/helpers/customEmoji'; import { buildContentClassName } from './helpers/buildContentClassName'; import { calculateAlbumLayout } from './helpers/calculateAlbumLayout'; import getSingularPaidMedia from './helpers/getSingularPaidMedia'; -import { calculateMediaDimensions, getMinMediaWidth, MIN_MEDIA_WIDTH_WITH_TEXT } from './helpers/mediaDimensions'; +import { calculateMediaDimensions, getMinMediaWidth, getMinMediaWidthWithText } from './helpers/mediaDimensions'; import useAppLayout from '../../../hooks/useAppLayout'; import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers'; @@ -341,7 +341,6 @@ type QuickReactionPosition = | 'in-meta'; const NBSP = '\u00A0'; -const NO_MEDIA_CORNERS_THRESHOLD = 18; const QUICK_REACTION_SIZE = 1.75 * REM; const EXTRA_SPACE_FOR_REACTIONS = 2.25 * REM; const MAX_REASON_LENGTH = 200; @@ -930,7 +929,6 @@ const Message: FC = ({ const sizeCalculations = useMemo(() => { let calculatedWidth; let contentWidth: number | undefined; - let noMediaCorners = false; let style = ''; let reactionsMaxWidth; @@ -962,21 +960,14 @@ const Message: FC = ({ } if (width) { - if (width < MIN_MEDIA_WIDTH_WITH_TEXT) { + if (width < getMinMediaWidthWithText(isMobile)) { contentWidth = width; } - calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMediaWithCommentButton), width); - if (!asForwarded && invoice?.extendedMedia && calculatedWidth - width > NO_MEDIA_CORNERS_THRESHOLD) { - noMediaCorners = true; - } + calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMobile, isMediaWithCommentButton), width); } } else if (albumLayout) { - calculatedWidth = Math.max( - getMinMediaWidth(text?.text, isMediaWithCommentButton), albumLayout.containerStyle.width, - ); - if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) { - noMediaCorners = true; - } + const minWidth = getMinMediaWidth(text?.text, isMobile, isMediaWithCommentButton); + calculatedWidth = Math.max(minWidth, albumLayout.containerStyle.width); } if (calculatedWidth) { @@ -989,7 +980,7 @@ const Message: FC = ({ } return { - contentWidth, noMediaCorners, style, reactionsMaxWidth, + contentWidth, style, reactionsMaxWidth, }; }, [ albumLayout, asForwarded, extraPadding, hasSubheader, invoice?.extendedMedia, isAlbum, isMediaWithCommentButton, @@ -997,7 +988,7 @@ const Message: FC = ({ ]); const { - contentWidth, noMediaCorners, style, reactionsMaxWidth, + contentWidth, style, reactionsMaxWidth, } = sizeCalculations; function renderMessageText(isForAnimation?: boolean) { @@ -1098,7 +1089,6 @@ const Message: FC = ({ asForwarded && 'forwarded-message', hasForwardedCustomShape && 'forwarded-custom-shape', hasSubheader && 'with-subheader', - noMediaCorners && 'no-media-corners', ); const hasCustomAppendix = isLastInGroup && (!hasText || (isInvertedMedia && !hasFactCheck && reactionsPosition !== 'inside')) && !withCommentButton; diff --git a/src/components/middle/message/SponsoredMessage.tsx b/src/components/middle/message/SponsoredMessage.tsx index d29c0449c..c773e7c6d 100644 --- a/src/components/middle/message/SponsoredMessage.tsx +++ b/src/components/middle/message/SponsoredMessage.tsx @@ -23,7 +23,7 @@ import { IS_ANDROID } from '../../../util/browser/windowEnvironment'; import buildClassName from '../../../util/buildClassName'; import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities'; import { preventMessageInputBlur } from '../helpers/preventMessageInputBlur'; -import { calculateMediaDimensions, getMinMediaWidth, MIN_MEDIA_WIDTH_WITH_TEXT } from './helpers/mediaDimensions'; +import { calculateMediaDimensions, getMinMediaWidth, getMinMediaWidthWithText } from './helpers/mediaDimensions'; import useAppLayout from '../../../hooks/useAppLayout'; import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers'; @@ -116,9 +116,10 @@ const SponsoredMessage: FC = ({ hideSponsored(); }); + const content = message && getMessageContent(message); const { - photo, video, - } = message ? getMessageContent(message) : { photo: undefined, video: undefined }; + photo, video, text, + } = content || {}; const isGif = video?.isGif; const hasMedia = Boolean(photo || video); @@ -173,10 +174,10 @@ const SponsoredMessage: FC = ({ } if (width) { - if (width < MIN_MEDIA_WIDTH_WITH_TEXT) { + if (width < getMinMediaWidthWithText(isMobile)) { contentWidth = width; } - calculatedWidth = Math.max(getMinMediaWidth(), width); + calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMobile), width); } } @@ -187,7 +188,7 @@ const SponsoredMessage: FC = ({ return { contentWidth, noMediaCorners, style, }; - }, [photo, video, isMobile]); + }, [photo, video, isMobile, text?.text]); const { contentWidth, style, diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index aca40c213..ae1234eac 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -595,15 +595,6 @@ } } - .no-media-corners { - --border-top-left-radius: 0; - --border-top-right-radius: 0; - - .Album { - margin-inline: auto !important; - } - } - &.custom-shape.is-via-bot { font-size: inherit !important; diff --git a/src/components/middle/message/helpers/calculateAlbumLayout.ts b/src/components/middle/message/helpers/calculateAlbumLayout.ts index 805486aa4..7487d7721 100644 --- a/src/components/middle/message/helpers/calculateAlbumLayout.ts +++ b/src/components/middle/message/helpers/calculateAlbumLayout.ts @@ -46,7 +46,7 @@ export type IAlbumLayout = { containerStyle: ApiDimensions; }; -function getRatios(messages: ApiMessage[], isSingleMessage?: boolean, isMobile?: boolean) { +function getRatios(messages: ApiMessage[], isSingleMessage: boolean, isMobile: boolean) { const isOutgoing = messages[0].isOutgoing; const allMedia = (isSingleMessage ? messages[0].content.paidMedia!.extendedMedia.map((media) => ( @@ -108,10 +108,10 @@ export function calculateAlbumLayout( isOwn: boolean, noAvatars: boolean, album: IAlbum, - isMobile?: boolean, + isMobile: boolean, ): IAlbumLayout { const spacing = 2; - const ratios = getRatios(album.messages, album.isPaidMedia, isMobile); + const ratios = getRatios(album.messages, Boolean(album.isPaidMedia), isMobile); const proportions = getProportions(ratios); const averageRatio = getAverageRatio(ratios); const albumCount = ratios.length; diff --git a/src/components/middle/message/helpers/mediaDimensions.ts b/src/components/middle/message/helpers/mediaDimensions.ts index aa57d5547..80b4e5ed0 100644 --- a/src/components/middle/message/helpers/mediaDimensions.ts +++ b/src/components/middle/message/helpers/mediaDimensions.ts @@ -9,13 +9,16 @@ import { const SMALL_IMAGE_THRESHOLD = 12; const MIN_MESSAGE_LENGTH_FOR_BLUR = 40; -export const MIN_MEDIA_WIDTH_WITH_TEXT = 20 * REM; const MIN_MEDIA_WIDTH = SMALL_IMAGE_THRESHOLD * REM; export const MIN_MEDIA_HEIGHT = 5 * REM; -export function getMinMediaWidth(text?: string, hasCommentButton?: boolean) { - return (text?.length ?? 0) > MIN_MESSAGE_LENGTH_FOR_BLUR || hasCommentButton - ? MIN_MEDIA_WIDTH_WITH_TEXT +export function getMinMediaWidthWithText(isMobile: boolean) { + return (isMobile ? 14 : 20) * REM; +} + +export function getMinMediaWidth(text: string = '', isMobile: boolean, hasCommentButton?: boolean) { + return text.length > MIN_MESSAGE_LENGTH_FOR_BLUR || hasCommentButton + ? getMinMediaWidthWithText(isMobile) : MIN_MEDIA_WIDTH; } @@ -34,7 +37,7 @@ export function calculateMediaDimensions({ isInWebPage?: boolean; asForwarded?: boolean; noAvatars?: boolean; - isMobile?: boolean; + isMobile: boolean; }) { const isPhoto = media.mediaType === 'photo'; const isVideo = media.mediaType === 'video'; @@ -45,7 +48,7 @@ export function calculateMediaDimensions({ : isVideo ? calculateVideoDimensions(media, isOwn, asForwarded, isWebPageVideo, noAvatars, isMobile) : calculateExtendedPreviewDimensions(media, isOwn, asForwarded, isInWebPage, noAvatars, isMobile); - const minMediaWidth = getMinMediaWidth(messageText); + const minMediaWidth = getMinMediaWidth(messageText, isMobile); let stretchFactor = 1; if (width < minMediaWidth && minMediaWidth - width < SMALL_IMAGE_THRESHOLD) { diff --git a/src/hooks/useAppLayout.ts b/src/hooks/useAppLayout.ts index 401c4937c..a9a7d8f00 100644 --- a/src/hooks/useAppLayout.ts +++ b/src/hooks/useAppLayout.ts @@ -16,10 +16,10 @@ type MediaQueryCacheKey = 'mobile' | 'tablet' | 'landscape' | 'touch'; const mediaQueryCache = new Map(); const callbacks = createCallbackManager(); -let isMobile: boolean | undefined; -let isTablet: boolean | undefined; -let isLandscape: boolean | undefined; -let isTouchScreen: boolean | undefined; +let isMobile: boolean; +let isTablet: boolean; +let isLandscape: boolean; +let isTouchScreen: boolean; export function getIsMobile() { return isMobile;