83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo } from '../../../lib/teact/teact';
|
|
|
|
import type { ApiMessage } from '../../../api/types';
|
|
|
|
import { getActions } from '../../../global';
|
|
import { getGamePreviewPhotoHash, getGamePreviewVideoHash, getMessageText } from '../../../global/helpers';
|
|
|
|
import useMedia from '../../../hooks/useMedia';
|
|
|
|
import Skeleton from '../../ui/placeholder/Skeleton';
|
|
|
|
import './Game.scss';
|
|
|
|
const DEFAULT_PREVIEW_DIMENSIONS = {
|
|
width: 480,
|
|
height: 270,
|
|
};
|
|
|
|
type OwnProps = {
|
|
message: ApiMessage;
|
|
canAutoLoadMedia?: boolean;
|
|
};
|
|
|
|
const Game: FC<OwnProps> = ({
|
|
message,
|
|
canAutoLoadMedia,
|
|
}) => {
|
|
const { clickBotInlineButton } = getActions();
|
|
const game = message.content.game!;
|
|
const {
|
|
title, description,
|
|
} = game;
|
|
|
|
const photoHash = getGamePreviewPhotoHash(game);
|
|
const videoHash = getGamePreviewVideoHash(game);
|
|
const photoBlobUrl = useMedia(photoHash, !canAutoLoadMedia);
|
|
const videoBlobUrl = useMedia(videoHash, !canAutoLoadMedia);
|
|
|
|
const handleGameClick = () => {
|
|
clickBotInlineButton({
|
|
messageId: message.id,
|
|
button: message.inlineButtons![0][0],
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="Game">
|
|
<div
|
|
className="preview"
|
|
style={`width: ${DEFAULT_PREVIEW_DIMENSIONS.width}px; height: ${DEFAULT_PREVIEW_DIMENSIONS.height}px`}
|
|
onClick={handleGameClick}
|
|
>
|
|
{!photoBlobUrl && !videoBlobUrl && (
|
|
<Skeleton className="skeleton preview-content" />
|
|
)}
|
|
{photoBlobUrl && (
|
|
<img
|
|
className="preview-content"
|
|
src={photoBlobUrl}
|
|
alt={title}
|
|
/>
|
|
)}
|
|
{videoBlobUrl && (
|
|
<video
|
|
className="preview-content"
|
|
playsInline
|
|
muted
|
|
disablePictureInPicture
|
|
autoPlay
|
|
loop
|
|
src={videoBlobUrl}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="title">{title}</div>
|
|
{!getMessageText(message) && <div className="description">{description}</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(Game);
|