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

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

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