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

Telegram Premium: Various fixes (#1948)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-07-09 02:32:31 +02:00
parent 8c0cf23c8c
commit 56110bba0e
7 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/Audio.tsx
View File

@ -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>

4
src/components/main/premium/PremiumFeatureItem.module.scss
View File

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

2
src/components/main/premium/PremiumFeatureItem.tsx
View File

@ -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>

2
src/components/main/premium/PremiumMainModal.module.scss
View File

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

29
src/components/middle/MessageList.tsx
View File

@ -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}
height={botInfoDimensions?.height}
width={botInfoRealDimensions?.width}
height={botInfoRealDimensions?.height}
/>
)}
{botInfo.description && (

2
src/components/middle/message/ReactionSelector.tsx
View File

@ -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

2
src/global/helpers/messages.ts
View File

@ -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) {