WebPage: Render document in the web page message (#4329)

src/api/gramjs/gramjsBuilders/index.ts

@@ -365,7 +365,6 @@ export function isMessageWithMedia(message: GramJs.Message | GramJs.UpdateServic
       && (
         media.webpage.photo instanceof GramJs.Photo || (
           media.webpage.document instanceof GramJs.Document
-          && media.webpage.document.mimeType.startsWith('video')
         )
       )
     ) || (

src/components/common/Document.tsx

@@ -13,6 +13,7 @@ import {
   getMessageMediaFormat,
   getMessageMediaHash,
   getMessageMediaThumbDataUri,
+  getMessageWebPageDocument,
   isMessageDocumentVideo,
 } from '../../global/helpers';
 import { getDocumentExtension, getDocumentHasPreview } from './helpers/documentInfo';
@@ -79,7 +80,8 @@ const Document: FC<OwnProps> = ({
   const [isSvgDialogOpen, openSvgDialog, closeSvgDialog] = useFlag();
   const [shouldNotWarnAboutSvg, setShouldNotWarnAboutSvg] = useState(false);
 
-  const document = message.content.document!;
+  const document = message.content.document! || getMessageWebPageDocument(message);
+
   const { fileName, size, timestamp } = document;
   const extension = getDocumentExtension(document) || '';
 

src/components/common/File.scss

@@ -59,7 +59,7 @@
       right: 0;
       border-bottom-left-radius: 0.25rem;
       background: rgba(black, 0.25);
-      border-color: transparent var(--background-color) transparent var(--background-color);
+      border-color: transparent var(--file-icon-border-color, var(--background-color)) transparent var(--file-icon-border-color, var(--background-color));
       border-width: 0 1.125rem 1.125rem 0;
       border-style: solid;
       /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */

src/components/middle/message/Message.tsx

@@ -1226,6 +1226,8 @@ const Message: FC<OwnProps & StateProps> = ({
             story={webPageStory}
             isConnected={isConnected}
             backgroundEmojiId={sender?.color?.backgroundEmojiId}
+            shouldWarnAboutSvg={shouldWarnAboutSvg}
+            autoLoadFileMaxSizeMb={autoLoadFileMaxSizeMb}
             onMediaClick={handleMediaClick}
             onCancelMediaTransfer={handleCancelUpload}
           />

src/components/middle/message/WebPage.scss

@@ -10,6 +10,10 @@
   position: relative;
   overflow: hidden;
   
+  &.with-document {
+    --file-icon-border-color: var(--accent-background-color);
+  }
+
   &--background-icons {
     margin: -0.375rem;
   }

src/components/middle/message/WebPage.tsx

@@ -18,6 +18,7 @@ import useEnsureStory from '../../../hooks/useEnsureStory';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
+import Document from '../../common/Document';
 import EmojiIconBackground from '../../common/embedded/EmojiIconBackground';
 import SafeLink from '../../common/SafeLink';
 import Button from '../../ui/Button';
@@ -44,6 +45,8 @@ type OwnProps = {
   backgroundEmojiId?: string;
   theme: ISettings['theme'];
   story?: ApiTypeStory;
+  shouldWarnAboutSvg?: boolean;
+  autoLoadFileMaxSizeMb?: number;
   onMediaClick?: () => void;
   onCancelMediaTransfer?: () => void;
 };
@@ -62,6 +65,8 @@ const WebPage: FC<OwnProps> = ({
   story,
   theme,
   backgroundEmojiId,
+  shouldWarnAboutSvg,
+  autoLoadFileMaxSizeMb,
   onMediaClick,
   onCancelMediaTransfer,
 }) => {
@@ -99,6 +104,7 @@ const WebPage: FC<OwnProps> = ({
     photo,
     video,
     type,
+    document,
   } = webPage;
   const isStory = type === WEBPAGE_STORY_TYPE;
   const isExpiredStory = story && 'isDeleted' in story;
@@ -119,6 +125,7 @@ const WebPage: FC<OwnProps> = ({
     !photo && !video && !inPreview && 'without-media',
     video && 'with-video',
     !isArticle && 'no-article',
+    document && 'with-document',
     quickButtonLangKey && 'with-quick-button',
   );
 
@@ -193,6 +200,17 @@ const WebPage: FC<OwnProps> = ({
             onCancelUpload={onCancelMediaTransfer}
           />
         )}
+        {!inPreview && document && (
+          <Document
+            message={message}
+            observeIntersection={observeIntersection}
+            autoLoadFileMaxSizeMb={autoLoadFileMaxSizeMb}
+            onMediaClick={handleMediaClick}
+            onCancelUpload={onCancelMediaTransfer}
+            isDownloading={isDownloading}
+            shouldWarnAboutSvg={shouldWarnAboutSvg}
+          />
+        )}
       </div>
       {quickButtonLangKey && renderQuickButton(quickButtonLangKey)}
     </div>

src/components/middle/message/_message-content.scss

@@ -113,7 +113,7 @@
 
   &.with-voice-transcription,
   &:not(.custom-shape) .text-content,
-  &.document {
+  &:not(.web-page).document {
     & > .MessageMeta {
       position: relative;
       top: 0.375rem;
@@ -538,7 +538,7 @@
 }
 
 .message-content.media,
-.WebPage {
+.WebPage:not(.with-document) {
   .media-inner {
     display: flex;
     justify-content: center;

src/components/middle/message/helpers/buildContentClassName.ts

@@ -96,6 +96,10 @@ export function buildContentClassName(
     if (webPage.photo || webPage.video) {
       classNames.push('media');
     }
+
+    if (webPage.document) {
+      classNames.push('document');
+    }
   }
 
   if (invoice && !invoice.extendedMedia) {

src/global/helpers/messageMedia.ts

@@ -104,6 +104,10 @@ export function getMessageDocument(message: MediaContainer) {
   return message.content.document;
 }
 
+export function getMessageWebPageDocument(message: MediaContainer) {
+  return getMessageWebPage(message)?.document;
+}
+
 export function isMessageDocumentPhoto(message: MediaContainer) {
   const document = getMessageDocument(message);
   return document ? document.mediaType === 'photo' : undefined;
@@ -213,8 +217,9 @@ export function getMessageMediaHash(
   const messagePhoto = getMessagePhoto(message) || getMessageWebPagePhoto(message) || getMessageDocumentPhoto(message);
   const actionPhoto = getMessageActionPhoto(message);
   const messageVideo = video || getMessageWebPageVideo(message) || getMessageDocumentVideo(message);
+  const messageDocument = document || getMessageWebPageDocument(message);
 
-  const content = actionPhoto || messagePhoto || messageVideo || sticker || audio || voice || document;
+  const content = actionPhoto || messagePhoto || messageVideo || sticker || audio || voice || messageDocument;
   if (!content) {
     return undefined;
   }
@@ -249,17 +254,17 @@ export function getMessageMediaHash(
         return `${base}?size=${actionPhoto ? 'b' : 'x'}`;
       case 'full':
       case 'download':
-        return document ? base : `${base}?size=${actionPhoto ? 'c' : 'z'}`;
+        return messageDocument ? base : `${base}?size=${actionPhoto ? 'c' : 'z'}`;
     }
   }
 
-  if (document) {
+  if (messageDocument) {
     switch (target) {
       case 'micro':
       case 'pictogram':
       case 'inline':
       case 'preview':
-        if (!getDocumentHasPreview(document) || hasMessageLocalBlobUrl(message)) {
+        if (!getDocumentHasPreview(messageDocument) || hasMessageLocalBlobUrl(message)) {
           return undefined;
         }
 
@@ -353,8 +358,9 @@ export function getMessageMediaFormat(
   const {
     video, audio, voice, document,
   } = message.content;
+  const messageDocument = document || getMessageWebPageDocument(message);
   const isVideo = Boolean(video || getMessageWebPageVideo(message) || isMessageDocumentVideo(message));
-  const size = (video || audio || document)?.size!;
+  const size = (video || audio || messageDocument)?.size!;
   if (target === 'download') {
     if (IS_PROGRESSIVE_SUPPORTED && size > MAX_BUFFER_SIZE && !IS_OPFS_SUPPORTED) {
       return ApiMediaFormat.DownloadUrl;