mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-14 03:00:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Apply requested changes

Browse source
This commit is contained in:
Ginger 2025-03-17 20:48:03 -04:00
parent 967ae51d31
commit 4e1f726247
1 changed files with 50 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/app/components/upload-card/UploadCardRenderer.tsx
View file

@ -12,17 +12,54 @@ import {
} from '../../state/room/roomInputDrafts';
import { useObjectURL } from '../../hooks/useObjectURL';
type RenderPreviewProps = {
style: React.CSSProperties;
src: string;
alt: string;
type PreviewImageProps = {
fileItem: TUploadItem;
};
function PreviewImage({ fileItem }: PreviewImageProps) {
const { originalFile, metadata } = fileItem;
const fileUrl = useObjectURL(originalFile);
return (
<img
style={{
objectFit: 'contain',
width: '100%',
height: toRem(152),
filter: metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
}}
alt={originalFile.name}
src={fileUrl}
/>
);
}
type PreviewVideoProps = {
fileItem: TUploadItem;
};
function PreviewVideo({ fileItem }: PreviewVideoProps) {
const { originalFile, metadata } = fileItem;
const fileUrl = useObjectURL(originalFile);
return (
// eslint-disable-next-line jsx-a11y/media-has-caption
<video
style={{
objectFit: 'contain',
width: '100%',
height: toRem(152),
filter: metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
}}
src={fileUrl}
/>
);
}
type MediaPreviewProps = {
fileItem: TUploadItem;
onSpoiler: (marked: boolean) => void;
renderPreviewElement: (props: RenderPreviewProps) => ReactNode;
children: ReactNode;
};
function MediaPreview({ fileItem, onSpoiler, renderPreviewElement }: MediaPreviewProps) {
function MediaPreview({ fileItem, onSpoiler, children }: MediaPreviewProps) {
const { originalFile, metadata } = fileItem;
const fileUrl = useObjectURL(originalFile);
@ -35,16 +72,7 @@ function MediaPreview({ fileItem, onSpoiler, renderPreviewElement }: MediaPrevie
position: 'relative',
}}
>
{renderPreviewElement({
style: {
objectFit: 'contain',
width: '100%',
height: toRem(152),
filter: fileItem.metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
},
src: fileUrl,
alt: originalFile.name,
})}
{children}
<Box
justifyContent="End"
style={{
@ -138,19 +166,14 @@ export function UploadCardRenderer({
bottom={
<>
{fileItem.originalFile.type.startsWith('image') && (
<MediaPreview
fileItem={fileItem}
onSpoiler={handleSpoiler}
renderPreviewElement={(p) => <img {...p} alt={p.alt} />}
/>
<MediaPreview fileItem={fileItem} onSpoiler={handleSpoiler}>
<PreviewImage fileItem={fileItem} />
</MediaPreview>
)}
{fileItem.originalFile.type.startsWith('video') && (
<MediaPreview
fileItem={fileItem}
onSpoiler={handleSpoiler}
// eslint-disable-next-line jsx-a11y/media-has-caption
renderPreviewElement={(p) => <video {...p} />}
/>
<MediaPreview fileItem={fileItem} onSpoiler={handleSpoiler}>
<PreviewVideo fileItem={fileItem} />
</MediaPreview>
)}
{upload.status === UploadStatus.Idle && (
<UploadCardProgress sentBytes={0} totalBytes={file.size} />