73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { memo, useRef } from '@teact';
|
|
|
|
import type { ApiStarGiftUnique } from '../../../api/types';
|
|
|
|
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment.ts';
|
|
import buildClassName from '../../../util/buildClassName.ts';
|
|
import { getGiftAttributes } from '../../common/helpers/gifts';
|
|
|
|
import useFlag from '../../../hooks/useFlag.ts';
|
|
import { type ObserveFn } from '../../../hooks/useIntersectionObserver';
|
|
|
|
import RadialPatternBackground from '../../common/profile/RadialPatternBackground';
|
|
import StickerView from '../../common/StickerView';
|
|
|
|
import styles from './WebPageUniqueGift.module.scss';
|
|
|
|
type OwnProps = {
|
|
gift: ApiStarGiftUnique;
|
|
observeIntersectionForLoading?: ObserveFn;
|
|
observeIntersectionForPlaying?: ObserveFn;
|
|
onClick?: NoneToVoidFunction;
|
|
};
|
|
|
|
const STAR_GIFT_STICKER_SIZE = 120;
|
|
|
|
const WebPageUniqueGift = ({
|
|
gift,
|
|
observeIntersectionForLoading,
|
|
observeIntersectionForPlaying,
|
|
onClick,
|
|
}: OwnProps) => {
|
|
const stickerRef = useRef<HTMLDivElement>();
|
|
const {
|
|
backdrop, model, pattern,
|
|
} = getGiftAttributes(gift)!;
|
|
|
|
const [isHover, markHover, unmarkHover] = useFlag();
|
|
|
|
const backgroundColors = [backdrop!.centerColor, backdrop!.edgeColor];
|
|
|
|
return (
|
|
<div
|
|
className={buildClassName('interactive-gift', styles.root)}
|
|
onClick={onClick}
|
|
onMouseEnter={!IS_TOUCH_ENV ? markHover : undefined}
|
|
onMouseLeave={!IS_TOUCH_ENV ? unmarkHover : undefined}
|
|
>
|
|
<div className={styles.backgroundWrapper}>
|
|
<RadialPatternBackground
|
|
className={styles.background}
|
|
backgroundColors={backgroundColors}
|
|
patternIcon={pattern!.sticker}
|
|
centerEmptiness={0.15}
|
|
ringsCount={2}
|
|
ovalFactor={1.2}
|
|
/>
|
|
</div>
|
|
<div ref={stickerRef} className={styles.stickerWrapper}>
|
|
<StickerView
|
|
containerRef={stickerRef}
|
|
sticker={model!.sticker}
|
|
size={STAR_GIFT_STICKER_SIZE}
|
|
shouldLoop={isHover}
|
|
observeIntersectionForPlaying={observeIntersectionForPlaying}
|
|
observeIntersectionForLoading={observeIntersectionForLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(WebPageUniqueGift);
|