From e45b408f7723ba5765c5a76bff16c1648ad72ad4 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 6 Aug 2024 20:06:00 +0200
Subject: [PATCH] Thumbnail: Add a web thumbnail to show in the preview list
 (#4774)

Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>
---
 .../middle/composer/inlineResults/BaseResult.tsx   |  3 ++-
 .../middle/composer/inlineResults/MediaResult.tsx  | 14 ++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/middle/composer/inlineResults/BaseResult.tsx b/src/components/middle/composer/inlineResults/BaseResult.tsx
index 13659384b..38032e968 100644
--- a/src/components/middle/composer/inlineResults/BaseResult.tsx
+++ b/src/components/middle/composer/inlineResults/BaseResult.tsx
@@ -3,6 +3,7 @@ import React, { memo } from '../../../../lib/teact/teact';
 
 import type { ApiWebDocument } from '../../../../api/types';
 
+import { getWebDocumentHash } from '../../../../global/helpers';
 import { getFirstLetters } from '../../../../util/textFormat';
 import renderText from '../../../common/helpers/renderText';
 import { preventMessageInputBlurWithBubbling } from '../../helpers/preventMessageInputBlur';
@@ -34,7 +35,7 @@ const BaseResult: FC<OwnProps> = ({
 }) => {
   let content: TeactNode | undefined;
 
-  const thumbnailDataUrl = useMedia(thumbnail ? `webDocument:${thumbnail.url}` : undefined);
+  const thumbnailDataUrl = useMedia(thumbnail ? getWebDocumentHash(thumbnail) : undefined);
   thumbUrl = thumbUrl || thumbnailDataUrl;
 
   if (thumbUrl) {
diff --git a/src/components/middle/composer/inlineResults/MediaResult.tsx b/src/components/middle/composer/inlineResults/MediaResult.tsx
index acbaa726b..9f4cdb248 100644
--- a/src/components/middle/composer/inlineResults/MediaResult.tsx
+++ b/src/components/middle/composer/inlineResults/MediaResult.tsx
@@ -5,6 +5,7 @@ import type {
   ApiBotInlineMediaResult, ApiBotInlineResult, ApiPhoto, ApiThumbnail, ApiWebDocument,
 } from '../../../../api/types';
 
+import { getPhotoMediaHash, getWebDocumentHash } from '../../../../global/helpers';
 import buildClassName from '../../../../util/buildClassName';
 
 import useLastCallback from '../../../../hooks/useLastCallback';
@@ -36,13 +37,13 @@ const MediaResult: FC<OwnProps> = ({
   if ('thumbnail' in inlineResult) {
     thumbnail = inlineResult.thumbnail;
   }
-  if ('webThumbnail' in inlineResult && isForGallery) {
+  if ('webThumbnail' in inlineResult) {
     webThumbnail = inlineResult.webThumbnail;
   }
 
-  const thumbnailDataUrl = useMedia(webThumbnail ? `webDocument:${webThumbnail.url}` : undefined);
-  const mediaBlobUrl = useMedia(photo && `photo${photo.id}?size=m`);
-  const transitionClassNames = useMediaTransition(mediaBlobUrl);
+  const thumbnailBlobUrl = useMedia(getWebDocumentHash(webThumbnail));
+  const mediaBlobUrl = useMedia(photo && getPhotoMediaHash(photo, 'pictogram'));
+  const transitionClassNames = useMediaTransition(mediaBlobUrl || thumbnailBlobUrl);
 
   const handleClick = useLastCallback(() => {
     onClick(inlineResult);
@@ -51,7 +52,7 @@ const MediaResult: FC<OwnProps> = ({
   if (isForGallery) {
     return (
       <div className="MediaResult chat-item-clickable" onClick={handleClick}>
-        <img src={(photo?.thumbnail?.dataUri) || thumbnailDataUrl} alt="" draggable={false} />
+        <img src={(photo?.thumbnail?.dataUri) || thumbnailBlobUrl} alt="" draggable={false} />
         <img
           src={mediaBlobUrl}
           className={buildClassName('full-media', transitionClassNames)}
@@ -67,7 +68,8 @@ const MediaResult: FC<OwnProps> = ({
   return (
     <BaseResult
       focus={focus}
-      thumbUrl={mediaBlobUrl || (thumbnail?.dataUri || thumbnailDataUrl)}
+      thumbnail={webThumbnail}
+      thumbUrl={mediaBlobUrl || thumbnail?.dataUri}
       transitionClassNames={transitionClassNames}
       title={title}
       description={description}