Telegram Premium: Various fixes (#1948)

src/components/common/Audio.tsx

@@ -249,6 +249,10 @@ const Audio: FC<OwnProps> = ({
     });
   }, [withSeekline, handleStartSeek, handleSeek, handleStopSeek]);
 
+  const transcribeSvgMemo = useMemo(() => (
+    <div dangerouslySetInnerHTML={{ __html: TRANSCRIBE_SVG }} />
+  ), []);
+
   function renderFirstLine() {
     if (isVoice) {
       return senderTitle || 'Voice';
@@ -398,6 +402,7 @@ const Audio: FC<OwnProps> = ({
           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 && <div dangerouslySetInnerHTML={{ __html: TRANSCRIBE_SVG }} />}
+            {isTranscribing && svgMemo}
           </Button>
         )}
       </div>

src/components/main/premium/PremiumFeatureItem.module.scss

@@ -20,3 +20,7 @@
   line-height: 20px;
   min-height: 40px;
 }
+
+.icon {
+  min-width: 2rem;
+}

src/components/main/premium/PremiumFeatureItem.tsx

@@ -22,7 +22,7 @@ const PremiumFeatureItem: FC<OwnProps> = ({
 }) => {
   return (
     <ListItem buttonClassName={styles.root} onClick={onClick}>
-      <img src={icon} alt="" />
+      <img src={icon} className={styles.icon} alt="" />
       <div className={styles.text}>
         <div className={styles.title}>{renderText(title, ['br'])}</div>
         <div className={styles.description}>{text}</div>

src/components/main/premium/PremiumMainModal.module.scss

@@ -41,6 +41,8 @@
 
 .logo {
   margin: 1rem;
+  width: 6.25rem;
+  height: 6.25rem;
 }
 
 .header-text {

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<OwnProps & StateProps> = ({
   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<OwnProps & StateProps> = ({
           {isLoadingBotInfo && <span>{lang('Loading')}</span>}
           {isBotInfoEmpty && <span>{lang('NoMessages')}</span>}
           {botInfo && (
-            <div className="bot-info" style={botInfoDimensions && `width: ${botInfoDimensions?.width}px`}>
+            <div
+              className="bot-info"
+              style={botInfoRealDimensions && (
+                `width: ${botInfoRealDimensions.width}px`
+              )}
+            >
               {botInfoPhotoUrl && (
                 <img
                   src={botInfoPhotoUrl}
+                  width={botInfoRealDimensions?.width}
+                  height={botInfoRealDimensions?.height}
                   alt="Bot info"
                 />
               )}
@@ -556,8 +569,8 @@ const MessageList: FC<OwnProps & StateProps> = ({
               )}
               {botInfoDimensions && !botInfoPhotoUrl && !botInfoGifUrl && (
                 <Skeleton
-                  width={botInfoDimensions?.width}
+                  width={botInfoRealDimensions?.width}
-                  height={botInfoDimensions?.height}
+                  height={botInfoRealDimensions?.height}
                 />
               )}
               {botInfo.description && (

src/components/middle/message/ReactionSelector.tsx

@@ -64,7 +64,7 @@ const ReactionSelector: FC<OwnProps> = ({
       <div className={cn('items-wrapper')}>
         <div className={cn('items', ['no-scrollbar'])} ref={itemsScrollRef}>
           {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 (
               <ReactionSelectorReaction

src/global/helpers/messages.ts

@@ -48,7 +48,7 @@ export function getMessageTranscription(message: ApiMessage) {
   const { transcriptionId } = message;
   const global = getGlobal();
 
-  return transcriptionId && global.transcriptions[transcriptionId].text;
+  return transcriptionId && global.transcriptions[transcriptionId]?.text;
 }
 
 export function getMessageText(message: ApiMessage) {