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

Bot Info: Fix image size on high DPI screens (#4896)

Browse Source
This commit is contained in:
zubiden 2024-08-29 15:52:40 +02:00 committed by Alexander Zinchuk
parent 383a2d50b2
commit 489d92dd1c
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/middle/MessageListBotInfo.tsx
View File

@ -17,7 +17,6 @@ import renderText from '../common/helpers/renderText';
import useMedia from '../../hooks/useMedia'; import useMedia from '../../hooks/useMedia';
import useOldLang from '../../hooks/useOldLang'; import useOldLang from '../../hooks/useOldLang';
import useDevicePixelRatio from '../../hooks/window/useDevicePixelRatio';
import OptimizedVideo from '../ui/OptimizedVideo'; import OptimizedVideo from '../ui/OptimizedVideo';
import Skeleton from '../ui/placeholder/Skeleton'; import Skeleton from '../ui/placeholder/Skeleton';
@ -40,19 +39,14 @@ const MessageListBotInfo: FC<OwnProps & StateProps> = ({
isInMessageList, isInMessageList,
}) => { }) => {
const lang = useOldLang(); const lang = useOldLang();
const dpr = useDevicePixelRatio();
const botInfoPhotoUrl = useMedia(botInfo?.photo ? getBotCoverMediaHash(botInfo.photo) : undefined); const botInfoPhotoUrl = useMedia(botInfo?.photo ? getBotCoverMediaHash(botInfo.photo) : undefined);
const botInfoGifUrl = useMedia(botInfo?.gif ? getVideoMediaHash(botInfo.gif, 'full') : undefined); const botInfoGifUrl = useMedia(botInfo?.gif ? getVideoMediaHash(botInfo.gif, 'full') : undefined);
const botInfoDimensions = botInfo?.photo ? getPhotoFullDimensions(botInfo.photo) : botInfo?.gif const botInfoDimensions = botInfo?.photo ? getPhotoFullDimensions(botInfo.photo) : botInfo?.gif
? getVideoDimensions(botInfo.gif) : undefined; ? getVideoDimensions(botInfo.gif) : undefined;
const botInfoRealDimensions = botInfoDimensions && {
width: botInfoDimensions.width / dpr,
height: botInfoDimensions.height / dpr,
};
const isBotInfoEmpty = botInfo && !botInfo.description && !botInfo.gif && !botInfo.photo; const isBotInfoEmpty = botInfo && !botInfo.description && !botInfo.gif && !botInfo.photo;
const { width, height } = botInfoRealDimensions || {}; const { width, height } = botInfoDimensions || {};
const isEmptyOrLoading = isBotInfoEmpty || isLoadingBotInfo; const isEmptyOrLoading = isBotInfoEmpty || isLoadingBotInfo;
@ -65,16 +59,16 @@ const MessageListBotInfo: FC<OwnProps & StateProps> = ({
{botInfo && ( {botInfo && (
<div <div
className={styles.botInfo} className={styles.botInfo}
style={botInfoRealDimensions && ( style={buildStyle(
`width: ${botInfoRealDimensions.width}px` width ? `width: ${width}px` : undefined,
)} )}
> >
{botInfoPhotoUrl && ( {botInfoPhotoUrl && (
<img <img
className={styles.media} className={styles.media}
src={botInfoPhotoUrl} src={botInfoPhotoUrl}
width={botInfoRealDimensions?.width} width={width}
height={botInfoRealDimensions?.height} height={height}
alt="Bot info" alt="Bot info"
/> />
)} )}
@ -93,8 +87,8 @@ const MessageListBotInfo: FC<OwnProps & StateProps> = ({
{botInfoDimensions && !botInfoPhotoUrl && !botInfoGifUrl && ( {botInfoDimensions && !botInfoPhotoUrl && !botInfoGifUrl && (
<Skeleton <Skeleton
className={styles.media} className={styles.media}
width={botInfoRealDimensions?.width} width={width}
height={botInfoRealDimensions?.height} height={height}
forceAspectRatio forceAspectRatio
/> />
)} )}