From 3c7b07d07fb0728087a94815fe52703597ca2512 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 1 Mar 2024 14:02:49 -0500 Subject: [PATCH] WebPage: Render document in the web page message (#4329) --- src/api/gramjs/gramjsBuilders/index.ts | 1 - src/components/common/Document.tsx | 4 +++- src/components/common/File.scss | 2 +- src/components/middle/message/Message.tsx | 2 ++ src/components/middle/message/WebPage.scss | 4 ++++ src/components/middle/message/WebPage.tsx | 18 ++++++++++++++++++ .../middle/message/_message-content.scss | 4 ++-- .../message/helpers/buildContentClassName.ts | 4 ++++ src/global/helpers/messageMedia.ts | 16 +++++++++++----- 9 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/api/gramjs/gramjsBuilders/index.ts b/src/api/gramjs/gramjsBuilders/index.ts index 08aff7d95..0a8cd4a6b 100644 --- a/src/api/gramjs/gramjsBuilders/index.ts +++ b/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') ) ) ) || ( diff --git a/src/components/common/Document.tsx b/src/components/common/Document.tsx index 34d254380..652d41e37 100644 --- a/src/components/common/Document.tsx +++ b/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 = ({ 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) || ''; diff --git a/src/components/common/File.scss b/src/components/common/File.scss index 2d551f34d..08f0a6830 100644 --- a/src/components/common/File.scss +++ b/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 */ diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index fc31a156f..d1ffe66eb 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -1226,6 +1226,8 @@ const Message: FC = ({ story={webPageStory} isConnected={isConnected} backgroundEmojiId={sender?.color?.backgroundEmojiId} + shouldWarnAboutSvg={shouldWarnAboutSvg} + autoLoadFileMaxSizeMb={autoLoadFileMaxSizeMb} onMediaClick={handleMediaClick} onCancelMediaTransfer={handleCancelUpload} /> diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index de8b55453..a4843c9de 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -9,6 +9,10 @@ border-radius: 0.25rem; position: relative; overflow: hidden; + + &.with-document { + --file-icon-border-color: var(--accent-background-color); + } &--background-icons { margin: -0.375rem; diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx index 4d60ae946..524f31715 100644 --- a/src/components/middle/message/WebPage.tsx +++ b/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 = ({ story, theme, backgroundEmojiId, + shouldWarnAboutSvg, + autoLoadFileMaxSizeMb, onMediaClick, onCancelMediaTransfer, }) => { @@ -99,6 +104,7 @@ const WebPage: FC = ({ photo, video, type, + document, } = webPage; const isStory = type === WEBPAGE_STORY_TYPE; const isExpiredStory = story && 'isDeleted' in story; @@ -119,6 +125,7 @@ const WebPage: FC = ({ !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 = ({ onCancelUpload={onCancelMediaTransfer} /> )} + {!inPreview && document && ( + + )} {quickButtonLangKey && renderQuickButton(quickButtonLangKey)} diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 128b7311a..5bcfb9dac 100644 --- a/src/components/middle/message/_message-content.scss +++ b/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; diff --git a/src/components/middle/message/helpers/buildContentClassName.ts b/src/components/middle/message/helpers/buildContentClassName.ts index fe39aab4e..6f412cab3 100644 --- a/src/components/middle/message/helpers/buildContentClassName.ts +++ b/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) { diff --git a/src/global/helpers/messageMedia.ts b/src/global/helpers/messageMedia.ts index b780eb31c..05ab086b7 100644 --- a/src/global/helpers/messageMedia.ts +++ b/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;