85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo } from '../../../lib/teact/teact';
|
|
import { withGlobal } from '../../../global';
|
|
|
|
import type { ApiSticker } from '../../../api/types';
|
|
import type { ActiveEmojiInteraction } from '../../../global/types';
|
|
import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
|
|
|
|
import { LIKE_STICKER_ID } from '../../common/helpers/mediaDimensions';
|
|
import {
|
|
selectAnimatedEmoji,
|
|
selectAnimatedEmojiEffect,
|
|
selectAnimatedEmojiSound,
|
|
} from '../../../global/selectors';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { useIsIntersecting } from '../../../hooks/useIntersectionObserver';
|
|
import useAnimatedEmoji from '../../common/hooks/useAnimatedEmoji';
|
|
|
|
import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
|
|
|
|
import './AnimatedEmoji.scss';
|
|
|
|
type OwnProps = {
|
|
emoji: string;
|
|
withEffects?: boolean;
|
|
isOwn?: boolean;
|
|
observeIntersection?: ObserveFn;
|
|
forceLoadPreview?: boolean;
|
|
messageId?: number;
|
|
chatId?: string;
|
|
activeEmojiInteractions?: ActiveEmojiInteraction[];
|
|
};
|
|
|
|
interface StateProps {
|
|
sticker?: ApiSticker;
|
|
effect?: ApiSticker;
|
|
soundId?: string;
|
|
}
|
|
|
|
const QUALITY = 1;
|
|
|
|
const AnimatedEmoji: FC<OwnProps & StateProps> = ({
|
|
isOwn,
|
|
observeIntersection,
|
|
forceLoadPreview,
|
|
messageId,
|
|
chatId,
|
|
activeEmojiInteractions,
|
|
sticker,
|
|
effect,
|
|
soundId,
|
|
}) => {
|
|
const {
|
|
ref,
|
|
size,
|
|
style,
|
|
handleClick,
|
|
} = useAnimatedEmoji(chatId, messageId, soundId, activeEmojiInteractions, isOwn, effect?.emoji);
|
|
const isIntersecting = useIsIntersecting(ref, observeIntersection);
|
|
|
|
return (
|
|
<AnimatedIconFromSticker
|
|
sticker={sticker}
|
|
size={size}
|
|
quality={QUALITY}
|
|
noLoad={!isIntersecting}
|
|
forcePreview={forceLoadPreview}
|
|
play={isIntersecting}
|
|
forceAlways
|
|
ref={ref}
|
|
className={buildClassName('AnimatedEmoji media-inner', sticker?.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
|
|
style={style}
|
|
onClick={handleClick}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>((global, { emoji, withEffects }) => {
|
|
return {
|
|
sticker: selectAnimatedEmoji(global, emoji),
|
|
effect: withEffects ? selectAnimatedEmojiEffect(global, emoji) : undefined,
|
|
soundId: selectAnimatedEmojiSound(global, emoji),
|
|
};
|
|
})(AnimatedEmoji));
|