Spaces:
Running
Running
File size: 4,700 Bytes
0573fbf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, Grid, Box, Typography, TextField, IconButton } from '@mui/material';
import { Upload as UploadIcon, Trash2 as DeleteIcon } from 'lucide-react';
import { audioUploadRowStyles } from '../theme';
export default function AudioUploadRow({ index, data, onChange, onRemove }) {
const [audioFile, setAudioFile] = useState(null);
const [audioUrl, setAudioUrl] = useState('');
const [isDragActive, setIsDragActive] = useState(false);
const inputRef = useRef(null);
useEffect(() => {
if (!data.file && !data.audioUrl) {
if (audioUrl) {
URL.revokeObjectURL(audioUrl);
}
setAudioFile(null);
setAudioUrl('');
}
}, [data.file, data.audioUrl, audioUrl]);
const acceptFile = (file) => {
if (!file || !file.type.startsWith('audio/')) return;
const url = URL.createObjectURL(file);
setAudioFile(file);
setAudioUrl(url);
onChange(index, { ...data, file, audioUrl: url });
};
return (
<Card sx={audioUploadRowStyles.card}>
<CardContent sx={audioUploadRowStyles.cardContent}>
<Grid container spacing={audioUploadRowStyles.gridSpacing} alignItems="center">
<Grid item xs={12} sm={4}>
<Box
onClick={() => inputRef.current?.click()}
onDragOver={(e) => { e.preventDefault(); setIsDragActive(true); }}
onDragLeave={() => setIsDragActive(false)}
onDrop={(e) => {
e.preventDefault();
setIsDragActive(false);
acceptFile(e.dataTransfer.files?.[0]);
}}
sx={audioUploadRowStyles.uploadDropZone(isDragActive)}
>
<input
ref={inputRef}
type="file"
accept="audio/*,.mp3,.wav,.flac,.m4a,.aac"
style={audioUploadRowStyles.hiddenInput}
onChange={(e) => acceptFile(e.target.files?.[0])}
/>
{audioFile ? (
<Box>
<Typography variant="body2" color="textSecondary">
{audioFile.name}
</Typography>
{audioUrl && (
<audio
controls
src={audioUrl}
style={audioUploadRowStyles.audioPreview}
/>
)}
</Box>
) : (
<Box>
<UploadIcon size={20} color="#9198A1" />
<Typography variant="body2" color="textSecondary ">
{isDragActive ? 'Drop audio here' : ""}
</Typography>
</Box>
)}
</Box>
</Grid>
<Grid item xs={12} sm={7}>
<TextField
fullWidth
multiline
minRows={1}
maxRows={3}
label={`Prompt ${index + 1}`}
placeholder="Describe this audio file..."
value={data.prompt || ''}
onChange={(e) => onChange(index, { ...data, prompt: e.target.value })}
variant="outlined"
/>
</Grid>
<Grid item xs={12} sm={1} sx={audioUploadRowStyles.deleteGridItem}>
<IconButton
color="error"
onClick={() => onRemove(index)}
sx={audioUploadRowStyles.deleteIconButton}
>
<DeleteIcon />
</IconButton>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
|