diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx index be94d29e9..dea1506c0 100644 --- a/src/components/common/Audio.tsx +++ b/src/components/common/Audio.tsx @@ -249,6 +249,10 @@ const Audio: FC = ({ }); }, [withSeekline, handleStartSeek, handleSeek, handleStopSeek]); + const transcribeSvgMemo = useMemo(() => ( +
+ ), []); + function renderFirstLine() { if (isVoice) { return senderTitle || 'Voice'; @@ -398,6 +402,7 @@ const Audio: FC = ({ isTranscriptionHidden, isTranscribed, isTranscriptionError, + transcribeSvgMemo, canTranscribe ? handleTranscribe : undefined, onHideTranscription, ) @@ -485,6 +490,7 @@ function renderVoice( isTranscriptionHidden?: boolean, isTranscribed?: boolean, isTranscriptionError?: boolean, + svgMemo?: React.ReactNode, onClickTranscribe?: VoidFunction, onHideTranscription?: (isHidden: boolean) => void, ) { @@ -514,7 +520,7 @@ function renderVoice( (isTranscribed || isTranscriptionError) && !isTranscriptionHidden && 'transcribe-shown', )} /> - {isTranscribing &&
} + {isTranscribing && svgMemo} )}
diff --git a/src/components/main/premium/PremiumFeatureItem.module.scss b/src/components/main/premium/PremiumFeatureItem.module.scss index f42e89d72..8eb5b1a88 100644 --- a/src/components/main/premium/PremiumFeatureItem.module.scss +++ b/src/components/main/premium/PremiumFeatureItem.module.scss @@ -20,3 +20,7 @@ line-height: 20px; min-height: 40px; } + +.icon { + min-width: 2rem; +} diff --git a/src/components/main/premium/PremiumFeatureItem.tsx b/src/components/main/premium/PremiumFeatureItem.tsx index 4d4472d28..8ee76707a 100644 --- a/src/components/main/premium/PremiumFeatureItem.tsx +++ b/src/components/main/premium/PremiumFeatureItem.tsx @@ -22,7 +22,7 @@ const PremiumFeatureItem: FC = ({ }) => { return ( - +
{renderText(title, ['br'])}
{text}
diff --git a/src/components/main/premium/PremiumMainModal.module.scss b/src/components/main/premium/PremiumMainModal.module.scss index 3eec5c59c..223d80c42 100644 --- a/src/components/main/premium/PremiumMainModal.module.scss +++ b/src/components/main/premium/PremiumMainModal.module.scss @@ -41,6 +41,8 @@ .logo { margin: 1rem; + width: 6.25rem; + height: 6.25rem; } .header-text { diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index b6b5433d1..0d8970982 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -38,23 +38,25 @@ import { getPhotoFullDimensions, } from '../../global/helpers'; import { orderBy } from '../../util/iteratees'; +import { DPR } from '../../util/environment'; import { fastRaf, debounce, onTickEnd } from '../../util/schedulers'; -import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps'; -import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps'; import buildClassName from '../../util/buildClassName'; import { groupMessages } from './helpers/groupMessages'; import { preventMessageInputBlur } from './helpers/preventMessageInputBlur'; -import useOnChange from '../../hooks/useOnChange'; -import useStickyDates from './hooks/useStickyDates'; -import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import resetScroll, { patchChromiumScroll } from '../../util/resetScroll'; import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll'; import renderText from '../common/helpers/renderText'; + +import useOnChange from '../../hooks/useOnChange'; +import useStickyDates from './hooks/useStickyDates'; +import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import useLang from '../../hooks/useLang'; import useWindowSize from '../../hooks/useWindowSize'; import useInterval from '../../hooks/useInterval'; import useNativeCopySelectedMessages from '../../hooks/useNativeCopySelectedMessages'; import useMedia from '../../hooks/useMedia'; +import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps'; +import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps'; import Loading from '../ui/Loading'; import MessageListContent from './MessageListContent'; @@ -174,6 +176,10 @@ const MessageList: FC = ({ const botInfoGifUrl = useMedia(botInfo?.gif ? getDocumentMediaHash(botInfo.gif) : undefined); const botInfoDimensions = botInfo?.photo ? getPhotoFullDimensions(botInfo.photo) : botInfo?.gif ? getVideoDimensions(botInfo.gif) : undefined; + const botInfoRealDimensions = botInfoDimensions && { + width: botInfoDimensions.width / DPR, + height: botInfoDimensions.height / DPR, + }; const areMessagesLoaded = Boolean(messageIds); @@ -538,10 +544,17 @@ const MessageList: FC = ({ {isLoadingBotInfo && {lang('Loading')}} {isBotInfoEmpty && {lang('NoMessages')}} {botInfo && ( -
+
{botInfoPhotoUrl && ( Bot info )} @@ -556,8 +569,8 @@ const MessageList: FC = ({ )} {botInfoDimensions && !botInfoPhotoUrl && !botInfoGifUrl && ( )} {botInfo.description && ( diff --git a/src/components/middle/message/ReactionSelector.tsx b/src/components/middle/message/ReactionSelector.tsx index eb54b3cee..477c202f9 100644 --- a/src/components/middle/message/ReactionSelector.tsx +++ b/src/components/middle/message/ReactionSelector.tsx @@ -64,7 +64,7 @@ const ReactionSelector: FC = ({
{availableReactions?.map((reaction, i) => { - if (reaction.isInactive || (reaction.isPremium && canBuyPremium) + if (reaction.isInactive || (reaction.isPremium && !isCurrentUserPremium) || (!isPrivate && (!enabledReactions || !enabledReactions.includes(reaction.reaction)))) return undefined; return (