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

Message: Blurred edges for shallow media (#3415)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-05 13:14:12 +02:00
parent 44060a239e
commit a5ebc78d39
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,7 +100,6 @@ import { buildContentClassName } from './helpers/buildContentClassName';
import {
getMinMediaWidth,
calculateMediaDimensions,
MIN_MEDIA_WIDTH_WITH_COMMENTS,
MIN_MEDIA_WIDTH_WITH_TEXT,
} from './helpers/mediaDimensions';
import { calculateAlbumLayout } from './helpers/calculateAlbumLayout';
@ -601,12 +600,11 @@ const Message: FC<OwnProps & StateProps> = ({
// Used to display previous result while new one is loading
const previousTranslatedText = usePrevious(translatedText, true);
const currentText = isTranslationPending ? (previousTranslatedText || text) : translatedText;
const currentTranslatedText = translatedText || previousTranslatedText;
const { phoneCall } = action || {};
const isMediaWidthWithCommentButton = (repliesThreadInfo || (hasLinkedChat && isChannel && isLocal))
const isMediaWithCommentButton = (repliesThreadInfo || (hasLinkedChat && isChannel && isLocal))
&& !isInDocumentGroupNotLast
&& messageListType === 'thread'
&& !noComments;
@ -749,17 +747,17 @@ const Message: FC<OwnProps & StateProps> = ({
}
if (width) {
if (width < (isMediaWidthWithCommentButton ? MIN_MEDIA_WIDTH_WITH_COMMENTS : MIN_MEDIA_WIDTH_WITH_TEXT)) {
if (width < MIN_MEDIA_WIDTH_WITH_TEXT) {
contentWidth = width;
}
calculatedWidth = Math.max(getMinMediaWidth(Boolean(currentText), isMediaWidthWithCommentButton), width);
calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMediaWithCommentButton), width);
if (invoice?.extendedMedia && calculatedWidth - width > NO_MEDIA_CORNERS_THRESHOLD) {
noMediaCorners = true;
}
}
} else if (albumLayout) {
calculatedWidth = Math.max(
getMinMediaWidth(Boolean(currentText), isMediaWidthWithCommentButton), albumLayout.containerStyle.width,
getMinMediaWidth(text?.text, isMediaWithCommentButton), albumLayout.containerStyle.width,
);
if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) {
noMediaCorners = true;

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

@ -9,17 +9,16 @@ import {
getMessageWebPageVideo,
} from '../../../../global/helpers';
export const MIN_MEDIA_WIDTH_WITH_COMMENTS = 20 * REM;
export const MIN_MEDIA_WIDTH_WITH_TEXT = 15 * REM;
const MIN_MEDIA_WIDTH_WITH_TEXT_AND_COMMENTS = 20 * REM;
const MIN_MEDIA_WIDTH = 7 * REM;
export const MIN_MEDIA_HEIGHT = 5 * REM;
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(hasText?: boolean, hasCommentButton?: boolean) {
return hasText
? (hasCommentButton ? MIN_MEDIA_WIDTH_WITH_TEXT_AND_COMMENTS : MIN_MEDIA_WIDTH_WITH_TEXT)
: (hasCommentButton ? MIN_MEDIA_WIDTH_WITH_COMMENTS : MIN_MEDIA_WIDTH);
export function getMinMediaWidth(text?: string, hasCommentButton?: boolean) {
return (text?.length ?? 0) > MIN_MESSAGE_LENGTH_FOR_BLUR || hasCommentButton
? MIN_MEDIA_WIDTH_WITH_TEXT
: MIN_MEDIA_WIDTH;
}
export function calculateMediaDimensions(
@ -35,8 +34,8 @@ export function calculateMediaDimensions(
? calculateInlineImageDimensions(photo, isOwn, asForwarded, isWebPagePhoto, noAvatars, isMobile)
: calculateVideoDimensions(video!, isOwn, asForwarded, isWebPageVideo, noAvatars, isMobile);
const hasText = Boolean(getMessageText(message));
const minMediaWidth = getMinMediaWidth(hasText);
const messageText = getMessageText(message);
const minMediaWidth = getMinMediaWidth(messageText);
let stretchFactor = 1;
if (width < minMediaWidth && minMediaWidth - width < SMALL_IMAGE_THRESHOLD) {