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

Star Transaction: Display gift in preview (#5623)

Browse Source
This commit is contained in:
zubiden 2025-03-01 17:58:50 +01:00 committed by Alexander Zinchuk
parent 8b5c4e1a65
commit 5b8f45ceaf
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
View File

@ -39,6 +39,7 @@
.title, .description, .subtitle { .title, .description, .subtitle {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.25;
} }
.title { .title {
@ -50,12 +51,10 @@
align-items: center; align-items: center;
gap: 0.125rem; gap: 0.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1rem;
} }
.description, .statusPeriod, .statusEnded { .description, .statusPeriod, .statusEnded {
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }

4
src/components/modals/stars/transaction/StarsTransactionItem.module.scss
View File

@ -32,6 +32,7 @@
.title, .description, .date { .title, .description, .date {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.25;
} }
.title { .title {
@ -40,7 +41,6 @@
.description, .date { .description, .date {
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1rem;
} }
.date { .date {
@ -78,7 +78,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.uniqueGift { .giftSticker {
margin-inline: 0.25rem; margin-inline: 0.25rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }

30
src/components/modals/stars/transaction/StarsTransactionItem.tsx
View File

@ -36,7 +36,7 @@ type OwnProps = {
className?: string; className?: string;
}; };
const UNIQUE_GIFT_STICKER_SIZE = 36; const GIFT_STICKER_SIZE = 36;
function selectOptionalPeer(peerId?: string) { function selectOptionalPeer(peerId?: string) {
return (global: GlobalState) => ( return (global: GlobalState) => (
@ -59,8 +59,9 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
const peerId = transactionPeer.type === 'peer' ? transactionPeer.id : undefined; const peerId = transactionPeer.type === 'peer' ? transactionPeer.id : undefined;
const peer = useSelector(selectOptionalPeer(peerId)); const peer = useSelector(selectOptionalPeer(peerId));
const uniqueGift = transaction.starGift?.type === 'starGiftUnique' ? transaction.starGift : undefined; const starGift = transaction.starGift;
const uniqueGiftSticker = uniqueGift && getStickerFromGift(uniqueGift); const isUniqueGift = starGift?.type === 'starGiftUnique';
const giftSticker = starGift && getStickerFromGift(starGift);
const data = useMemo(() => { const data = useMemo(() => {
let title = getTransactionTitle(oldLang, transaction); let title = getTransactionTitle(oldLang, transaction);
@ -107,8 +108,8 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
}, [oldLang, peer, transaction]); }, [oldLang, peer, transaction]);
const previewContent = useMemo(() => { const previewContent = useMemo(() => {
if (uniqueGiftSticker) { if (isUniqueGift) {
const { backdrop } = getGiftAttributes(uniqueGift)!; const { backdrop } = getGiftAttributes(starGift)!;
const backgroundColors = [backdrop!.centerColor, backdrop!.edgeColor]; const backgroundColors = [backdrop!.centerColor, backdrop!.edgeColor];
return ( return (
@ -118,15 +119,26 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
backgroundColors={backgroundColors} backgroundColors={backgroundColors}
/> />
<AnimatedIconFromSticker <AnimatedIconFromSticker
className={styles.uniqueGift} className={styles.giftSticker}
sticker={uniqueGiftSticker} sticker={giftSticker}
size={UNIQUE_GIFT_STICKER_SIZE} size={GIFT_STICKER_SIZE}
play={false} play={false}
/> />
</> </>
); );
} }
if (giftSticker) {
return (
<AnimatedIconFromSticker
className={styles.giftSticker}
sticker={giftSticker}
size={GIFT_STICKER_SIZE}
play={false}
/>
);
}
if (extendedMedia) { if (extendedMedia) {
return <PaidMediaThumb media={extendedMedia} isTransactionPreview />; return <PaidMediaThumb media={extendedMedia} isTransactionPreview />;
} }
@ -139,7 +151,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
)} )}
</> </>
); );
}, [extendedMedia, photo, uniqueGiftSticker, subscriptionPeriod, data.avatarPeer, uniqueGift]); }, [isUniqueGift, extendedMedia, photo, data.avatarPeer, subscriptionPeriod, starGift, giftSticker]);
const handleClick = useLastCallback(() => { const handleClick = useLastCallback(() => {
openStarsTransactionModal({ transaction }); openStarsTransactionModal({ transaction });