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

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

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

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

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