ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Album: Fix shift on small screens (#6276)

Browse Source
This commit is contained in:
zubiden 2025-09-30 16:52:26 +02:00 committed by Alexander Zinchuk
parent 3e19a911e1
commit 0b6c61f9d0
6 changed files with 30 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/middle/message/Message.tsx
View File

@ -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<OwnProps & StateProps> = ({
const sizeCalculations = useMemo(() => {
let calculatedWidth;
let contentWidth: number | undefined;
let noMediaCorners = false;
let style = '';
let reactionsMaxWidth;
@ -962,21 +960,14 @@ const Message: FC<OwnProps & StateProps> = ({
}
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<OwnProps & StateProps> = ({
}
return {
contentWidth, noMediaCorners, style, reactionsMaxWidth,
contentWidth, style, reactionsMaxWidth,
};
}, [
albumLayout, asForwarded, extraPadding, hasSubheader, invoice?.extendedMedia, isAlbum, isMediaWithCommentButton,
@ -997,7 +988,7 @@ const Message: FC<OwnProps & StateProps> = ({
]);
const {
contentWidth, noMediaCorners, style, reactionsMaxWidth,
contentWidth, style, reactionsMaxWidth,
} = sizeCalculations;
function renderMessageText(isForAnimation?: boolean) {
@ -1098,7 +1089,6 @@ const Message: FC<OwnProps & StateProps> = ({
asForwarded && 'forwarded-message',
hasForwardedCustomShape && 'forwarded-custom-shape',
hasSubheader && 'with-subheader',
noMediaCorners && 'no-media-corners',
);
const hasCustomAppendix = isLastInGroup
&& (!hasText || (isInvertedMedia && !hasFactCheck && reactionsPosition !== 'inside')) && !withCommentButton;

13
src/components/middle/message/SponsoredMessage.tsx
View File

@ -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<OwnProps & StateProps> = ({
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<OwnProps & StateProps> = ({
}
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<OwnProps & StateProps> = ({
return {
contentWidth, noMediaCorners, style,
};
}, [photo, video, isMobile]);
}, [photo, video, isMobile, text?.text]);
const {
contentWidth, style,

9
src/components/middle/message/_message-content.scss
View File

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

6
src/components/middle/message/helpers/calculateAlbumLayout.ts
View File

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

15
src/components/middle/message/helpers/mediaDimensions.ts
View File

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

8
src/hooks/useAppLayout.ts
View File

@ -16,10 +16,10 @@ type MediaQueryCacheKey = 'mobile' | 'tablet' | 'landscape' | 'touch';
const mediaQueryCache = new Map<MediaQueryCacheKey, MediaQueryList>();
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;