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