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

Saved Gift: Use StickerView (#5968)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-06-04 20:41:22 +02:00
parent 4330472674
commit 9bdd213f8f
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/gift/SavedGift.module.scss
View File

@ -65,3 +65,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
.stickerWrapper {
position: relative;
}

37
src/components/common/gift/SavedGift.tsx
View File

@ -11,13 +11,12 @@ import { formatIntegerCompact } from '../../../util/textFormat';
import { getGiftAttributes, getStickerFromGift, getTotalGiftAvailability } from '../helpers/gifts'; import { getGiftAttributes, getStickerFromGift, getTotalGiftAvailability } from '../helpers/gifts';
import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers'; import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
import useFlag from '../../../hooks/useFlag'; import { type ObserveFn } from '../../../hooks/useIntersectionObserver';
import { type ObserveFn, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import useLang from '../../../hooks/useLang'; import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback'; import useLastCallback from '../../../hooks/useLastCallback';
import StickerView from '../../common/StickerView';
import Menu from '../../ui/Menu'; import Menu from '../../ui/Menu';
import AnimatedIconFromSticker from '../AnimatedIconFromSticker';
import Avatar from '../Avatar'; import Avatar from '../Avatar';
import Icon from '../icons/Icon'; import Icon from '../icons/Icon';
import RadialPatternBackground from '../profile/RadialPatternBackground'; import RadialPatternBackground from '../profile/RadialPatternBackground';
@ -58,7 +57,7 @@ const SavedGift = ({
const ref = useRef<HTMLDivElement>(); const ref = useRef<HTMLDivElement>();
const [shouldPlay, play] = useFlag(); const stickerRef = useRef<HTMLDivElement>();
const lang = useLang(); const lang = useLang();
@ -102,10 +101,6 @@ const SavedGift = ({
}); });
}); });
const handleOnIntersect = useLastCallback((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) play();
});
const avatarPeer = (gift.isNameHidden && !fromPeer) ? CUSTOM_PEER_HIDDEN : fromPeer; const avatarPeer = (gift.isNameHidden && !fromPeer) ? CUSTOM_PEER_HIDDEN : fromPeer;
const sticker = getStickerFromGift(gift.gift); const sticker = getStickerFromGift(gift.gift);
@ -130,8 +125,6 @@ const SavedGift = ({
); );
}, [gift.gift]); }, [gift.gift]);
useOnIntersect(ref, observeIntersection, sticker ? handleOnIntersect : undefined);
if (!sticker) return undefined; if (!sticker) return undefined;
return ( return (
@ -146,13 +139,23 @@ const SavedGift = ({
{radialPatternBackdrop} {radialPatternBackdrop}
{!radialPatternBackdrop && <Avatar className={styles.topIcon} peer={avatarPeer} size="micro" />} {!radialPatternBackdrop && <Avatar className={styles.topIcon} peer={avatarPeer} size="micro" />}
{gift.isPinned && <Icon name="pinned-message" className={styles.topIcon} />} {gift.isPinned && <Icon name="pinned-message" className={styles.topIcon} />}
<AnimatedIconFromSticker <div
sticker={sticker} ref={stickerRef}
noLoop className={styles.stickerWrapper}
play={shouldPlay} style={`width: ${GIFT_STICKER_SIZE}px; height: ${GIFT_STICKER_SIZE}px`}
nonInteractive >
size={GIFT_STICKER_SIZE} {sticker && (
/> <StickerView
observeIntersectionForPlaying={observeIntersection}
observeIntersectionForLoading={observeIntersection}
containerRef={stickerRef}
sticker={sticker}
size={GIFT_STICKER_SIZE}
shouldPreloadPreview
/>
)}
</div>
{gift.isUnsaved && ( {gift.isUnsaved && (
<div className={styles.hiddenGift}> <div className={styles.hiddenGift}>
<Icon name="eye-crossed-outline" /> <Icon name="eye-crossed-outline" />