56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo, useMemo, useRef } from '../../../lib/teact/teact';
|
|
|
|
import type { ApiStickerSet } from '../../../api/types';
|
|
|
|
import { STICKER_SIZE_PICKER_HEADER } from '../../../config';
|
|
import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
|
|
import { useIsIntersecting } from '../../../hooks/useIntersectionObserver';
|
|
import useMedia from '../../../hooks/useMedia';
|
|
import useMediaTransition from '../../../hooks/useMediaTransition';
|
|
import { getFirstLetters } from '../../../util/textFormat';
|
|
|
|
import AnimatedSticker from '../../common/AnimatedSticker';
|
|
|
|
type OwnProps = {
|
|
size?: number;
|
|
stickerSet: ApiStickerSet;
|
|
observeIntersection: ObserveFn;
|
|
};
|
|
|
|
const StickerSetCoverAnimated: FC<OwnProps> = ({
|
|
size = STICKER_SIZE_PICKER_HEADER,
|
|
stickerSet,
|
|
observeIntersection,
|
|
}) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const isIntersecting = useIsIntersecting(ref, observeIntersection);
|
|
|
|
const mediaHash = `stickerSet${stickerSet.id}`;
|
|
const lottieData = useMedia(mediaHash, !isIntersecting);
|
|
const transitionClassNames = useMediaTransition(lottieData);
|
|
|
|
const firstLetters = useMemo(() => {
|
|
if (lottieData) return undefined;
|
|
|
|
return getFirstLetters(stickerSet.title, 2);
|
|
}, [lottieData, stickerSet.title]);
|
|
|
|
return (
|
|
<div ref={ref} className="sticker-set-cover">
|
|
{firstLetters}
|
|
{lottieData && (
|
|
<AnimatedSticker
|
|
size={size}
|
|
tgsUrl={lottieData}
|
|
className={transitionClassNames}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(StickerSetCoverAnimated);
|