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

Allow videos to be marked as spoilers when uploaded

Browse source
This commit is contained in:
Ginger 2025-03-06 13:41:55 -05:00
parent 76d1902708
commit a5bb876570
1 changed files with 31 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { ReactNode, useEffect } from 'react';
import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds'; import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard'; import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload'; import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
@ -12,8 +12,17 @@ import {
} from '../../state/room/roomInputDrafts'; } from '../../state/room/roomInputDrafts';
import { useObjectURL } from '../../hooks/useObjectURL'; import { useObjectURL } from '../../hooks/useObjectURL';
type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void }; type RenderPreviewProps = {
function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) { style: React.CSSProperties;
src: string;
alt: string;
};
type MediaPreviewProps = {
fileItem: TUploadItem;
onSpoiler: (marked: boolean) => void;
renderPreviewElement: (props: RenderPreviewProps) => ReactNode;
};
function MediaPreview({ fileItem, onSpoiler, renderPreviewElement }: MediaPreviewProps) {
const { originalFile, metadata } = fileItem; const { originalFile, metadata } = fileItem;
const fileUrl = useObjectURL(originalFile); const fileUrl = useObjectURL(originalFile);
@ -26,16 +35,16 @@ function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
position: 'relative', position: 'relative',
}} }}
> >
<img {renderPreviewElement({
style={{ style: {
objectFit: 'contain', objectFit: 'contain',
width: '100%', width: '100%',
height: toRem(152), height: toRem(152),
filter: fileItem.metadata.markedAsSpoiler ? 'blur(44px)' : undefined, filter: fileItem.metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
}} },
src={fileUrl} src: fileUrl,
alt={originalFile.name} alt: originalFile.name,
/> })}
<Box <Box
justifyContent="End" justifyContent="End"
style={{ style={{
@ -129,7 +138,19 @@ export function UploadCardRenderer({
bottom={ bottom={
<> <>
{fileItem.originalFile.type.startsWith('image') && ( {fileItem.originalFile.type.startsWith('image') && (
<ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} /> <MediaPreview
fileItem={fileItem}
onSpoiler={handleSpoiler}
renderPreviewElement={(p) => <img {...p} alt={p.alt} />}
/>
)}
{fileItem.originalFile.type.startsWith('video') && (
<MediaPreview
fileItem={fileItem}
onSpoiler={handleSpoiler}
// 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} />