From a5ebc78d394d83ae0403d12b3f3b033ca98e7ba8 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 5 Jul 2023 13:14:12 +0200
Subject: [PATCH] Message: Blurred edges for shallow media (#3415)

---
 src/components/middle/message/Message.tsx     | 10 ++++-----
 .../middle/message/helpers/mediaDimensions.ts | 21 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index e0b28f5d9..2756af09a 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -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;
diff --git a/src/components/middle/message/helpers/mediaDimensions.ts b/src/components/middle/message/helpers/mediaDimensions.ts
index ade64b617..fd8569034 100644
--- a/src/components/middle/message/helpers/mediaDimensions.ts
+++ b/src/components/middle/message/helpers/mediaDimensions.ts
@@ -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) {