65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React, { memo, useMemo } from '../../lib/teact/teact';
|
|
|
|
import type { FC } from '../../lib/teact/teact';
|
|
import type { ApiAvailableReaction, ApiReaction } from '../../api/types';
|
|
import type { ObserveFn } from '../../hooks/useIntersectionObserver';
|
|
import { ApiMediaFormat } from '../../api/types';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
import { isSameReaction } from '../../global/helpers';
|
|
|
|
import useMediaTransition from '../../hooks/useMediaTransition';
|
|
import useMedia from '../../hooks/useMedia';
|
|
|
|
import CustomEmoji from './CustomEmoji';
|
|
|
|
import blankUrl from '../../assets/blank.png';
|
|
import './ReactionStaticEmoji.scss';
|
|
|
|
type OwnProps = {
|
|
reaction: ApiReaction;
|
|
availableReactions?: ApiAvailableReaction[];
|
|
className?: string;
|
|
size?: number;
|
|
observeIntersection?: ObserveFn;
|
|
};
|
|
|
|
const ReactionStaticEmoji: FC<OwnProps> = ({
|
|
reaction,
|
|
availableReactions,
|
|
className,
|
|
size,
|
|
observeIntersection,
|
|
}) => {
|
|
const isCustom = 'documentId' in reaction;
|
|
const availableReaction = useMemo(() => (
|
|
availableReactions?.find((available) => isSameReaction(available.reaction, reaction))
|
|
), [availableReactions, reaction]);
|
|
const staticIconId = availableReaction?.staticIcon?.id;
|
|
const mediaData = useMedia(`document${staticIconId}`, !staticIconId, ApiMediaFormat.BlobUrl);
|
|
|
|
const transitionClassNames = useMediaTransition(mediaData);
|
|
|
|
if (isCustom) {
|
|
return (
|
|
<CustomEmoji
|
|
documentId={reaction.documentId}
|
|
className={buildClassName('ReactionStaticEmoji', className)}
|
|
size={size}
|
|
observeIntersectionForPlaying={observeIntersection}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<img
|
|
className={buildClassName('ReactionStaticEmoji', transitionClassNames, className)}
|
|
style={size ? `width: ${size}px; height: ${size}px` : undefined}
|
|
src={mediaData || blankUrl}
|
|
alt={availableReaction?.title}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default memo(ReactionStaticEmoji);
|