49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { FC, memo, useCallback } from '../../lib/teact/teact';
|
|
|
|
import { ApiMessage } from '../../api/types';
|
|
|
|
import { formatMediaDuration } from '../../util/dateFormat';
|
|
import {
|
|
getMessageMediaHash,
|
|
getMessageMediaThumbDataUri,
|
|
getMessageVideo,
|
|
} from '../../modules/helpers';
|
|
import useMedia from '../../hooks/useMedia';
|
|
import useTransitionForMedia from '../../hooks/useTransitionForMedia';
|
|
|
|
import './Media.scss';
|
|
|
|
type OwnProps = {
|
|
message: ApiMessage;
|
|
idPrefix?: string;
|
|
onClick?: (messageId: number, chatId: number) => void;
|
|
};
|
|
|
|
const Media: FC<OwnProps> = ({ message, idPrefix = 'shared-media', onClick }) => {
|
|
const handleClick = useCallback(() => {
|
|
onClick!(message.id, message.chatId);
|
|
}, [message.id, message.chatId, onClick]);
|
|
|
|
const thumbDataUri = getMessageMediaThumbDataUri(message);
|
|
const mediaBlobUrl = useMedia(getMessageMediaHash(message, 'pictogram'));
|
|
const {
|
|
shouldRenderThumb, shouldRenderFullMedia, transitionClassNames,
|
|
} = useTransitionForMedia(mediaBlobUrl, 'slow');
|
|
|
|
const video = getMessageVideo(message);
|
|
|
|
return (
|
|
<div id={`${idPrefix}${message.id}`} className="Media scroll-item" onClick={onClick ? handleClick : undefined}>
|
|
{shouldRenderThumb && (
|
|
<img src={thumbDataUri} alt="" />
|
|
)}
|
|
{shouldRenderFullMedia && (
|
|
<img src={mediaBlobUrl} className={`${transitionClassNames} full-media`} alt="" />
|
|
)}
|
|
{video && <span className="video-duration">{video.isGif ? 'GIF' : formatMediaDuration(video.duration)}</span>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(Media);
|