45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import React, {
|
|
FC, memo, useMemo, useRef,
|
|
} from '../../../lib/teact/teact';
|
|
|
|
import { ApiStickerSet } from '../../../api/types';
|
|
|
|
import { IS_WEBM_SUPPORTED } from '../../../util/environment';
|
|
import { getFirstLetters } from '../../../util/textFormat';
|
|
import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
|
|
import useMedia from '../../../hooks/useMedia';
|
|
import useMediaTransition from '../../../hooks/useMediaTransition';
|
|
|
|
type OwnProps = {
|
|
stickerSet: ApiStickerSet;
|
|
observeIntersection: ObserveFn;
|
|
};
|
|
|
|
const StickerSetCover: FC<OwnProps> = ({ stickerSet, observeIntersection }) => {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const isIntersecting = useIsIntersecting(ref, observeIntersection);
|
|
|
|
const mediaData = useMedia(stickerSet.hasThumbnail && `stickerSet${stickerSet.id}`, !isIntersecting);
|
|
const transitionClassNames = useMediaTransition(mediaData);
|
|
const isGif = stickerSet.isGifs;
|
|
|
|
const firstLetters = useMemo(() => {
|
|
if ((isGif && !IS_WEBM_SUPPORTED) || !mediaData) return getFirstLetters(stickerSet.title, 2);
|
|
}, [isGif, mediaData, stickerSet.title]);
|
|
|
|
return (
|
|
<div ref={ref} className="sticker-set-cover">
|
|
{firstLetters}
|
|
{isGif ? (
|
|
<video src={mediaData} className={transitionClassNames} loop autoPlay />
|
|
) : (
|
|
<img src={mediaData} className={transitionClassNames} alt="" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(StickerSetCover);
|