ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message / WebPage: Proper processing for square images and no text data (#2032)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-09-14 00:30:02 +02:00
parent ba407708ca
commit 12cfec3898
2 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/middle/message/WebPage.scss
View File

@ -31,19 +31,21 @@
&,
& img,
& canvas,
&.small-image img {
border-radius: var(--border-radius-messages-small) !important;
}
&.square-image {
width: 5rem;
height: 5rem;
width: 100%;
height: 100%;
min-height: 0;
margin-bottom: 0 !important;
canvas,
img {
width: 100%;
height: 100%;
width: 100% !important;
height: 100% !important;
}
}
}
@ -53,6 +55,10 @@
margin-bottom: 1rem !important;
}
.message-content:not(.has-reactions) &.no-article:last-child {
margin-bottom: 1rem !important;
}
&.with-square-photo {
display: flex;
margin-bottom: 1rem;
@ -65,6 +71,18 @@
.media-inner {
order: 2;
flex-shrink: 0;
&.square-image {
width: 5rem;
height: 5rem;
min-height: 0;
margin-bottom: 0 !important;
img {
width: 100%;
height: 100%;
}
}
}
&:dir(rtl) {

35
src/components/middle/message/WebPage.tsx
View File

@ -50,12 +50,6 @@ const WebPage: FC<OwnProps> = ({
}) => {
const webPage = getMessageWebPage(message);
let isSquarePhoto = false;
if (webPage?.photo && !webPage.video) {
const { width, height } = calculateMediaDimensions(message);
isSquarePhoto = width === height;
}
const handleMediaClick = useCallback(() => {
onMediaClick!();
}, [onMediaClick]);
@ -73,8 +67,14 @@ const WebPage: FC<OwnProps> = ({
photo,
video,
} = webPage;
const isMediaInteractive = (photo || video) && onMediaClick && !isSquarePhoto;
const truncatedDescription = trimText(description, MAX_TEXT_LENGTH);
const isArticle = Boolean(truncatedDescription || title || siteName);
let isSquarePhoto = false;
if (isArticle && webPage?.photo && !webPage.video) {
const { width, height } = calculateMediaDimensions(message);
isSquarePhoto = width === height;
}
const isMediaInteractive = (photo || video) && onMediaClick && !isSquarePhoto;
const className = buildClassName(
'WebPage',
@ -82,6 +82,7 @@ const WebPage: FC<OwnProps> = ({
isSquarePhoto && 'with-square-photo',
!photo && !video && !inPreview && 'without-media',
video && 'with-video',
!isArticle && 'no-article',
);
return (
@ -106,15 +107,17 @@ const WebPage: FC<OwnProps> = ({
theme={theme}
/>
)}
<div className="WebPage-text">
<SafeLink className="site-name" url={url} text={siteName || displayUrl} />
{!inPreview && title && (
<p className="site-title">{renderText(title)}</p>
)}
{truncatedDescription && (
<p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
)}
</div>
{isArticle && (
<div className="WebPage-text">
<SafeLink className="site-name" url={url} text={siteName || displayUrl} />
{!inPreview && title && (
<p className="site-title">{renderText(title)}</p>
)}
{truncatedDescription && (
<p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
)}
</div>
)}
{!inPreview && video && (
<Video
message={message}