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

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

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