42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { as, toRem } from 'folds';
|
||
|
|
import { MatrixEvent } from 'matrix-js-sdk';
|
||
|
|
import { AttachmentBox, MessageBrokenContent } from '../../../components/message';
|
||
|
|
import { ImageContent } from './ImageContent';
|
||
|
|
import { scaleYDimension } from '../../../utils/common';
|
||
|
|
import { IImageContent } from '../../../../types/matrix/common';
|
||
|
|
|
||
|
|
type StickerContentProps = {
|
||
|
|
mEvent: MatrixEvent;
|
||
|
|
autoPlay: boolean;
|
||
|
|
};
|
||
|
|
export const StickerContent = as<'div', StickerContentProps>(({ mEvent, autoPlay, ...props }, ref) => {
|
||
|
|
const content = mEvent.getContent<IImageContent>();
|
||
|
|
const imgInfo = content?.info;
|
||
|
|
const mxcUrl = content.file?.url ?? content.url;
|
||
|
|
if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') {
|
||
|
|
return <MessageBrokenContent />;
|
||
|
|
}
|
||
|
|
const height = scaleYDimension(imgInfo.w || 152, 152, imgInfo.h || 152);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AttachmentBox
|
||
|
|
style={{
|
||
|
|
height: toRem(height < 48 ? 48 : height),
|
||
|
|
width: toRem(152),
|
||
|
|
}}
|
||
|
|
{...props}
|
||
|
|
ref={ref}
|
||
|
|
>
|
||
|
|
<ImageContent
|
||
|
|
autoPlay={autoPlay}
|
||
|
|
body={content.body || 'Image'}
|
||
|
|
info={imgInfo}
|
||
|
|
mimeType={imgInfo.mimetype}
|
||
|
|
url={mxcUrl}
|
||
|
|
encInfo={content.file}
|
||
|
|
/>
|
||
|
|
</AttachmentBox>
|
||
|
|
);
|
||
|
|
});
|