74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import { Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
|
|
import { Download, FolderZip } from '@mui/icons-material'
|
|
import { useTaskStore } from '../stores/taskStore'
|
|
import { getDownloadZipUrl } from '../api/client'
|
|
import { formatFileSize } from '../utils/formatters'
|
|
|
|
export const DownloadSection: React.FC = () => {
|
|
const { taskId, tracks, status } = useTaskStore()
|
|
|
|
console.log('[DownloadSection] Rendering:', { status, tracks, taskId })
|
|
|
|
// Check if we should show the download section
|
|
if (status !== 'done' || !tracks || tracks.length === 0 || !taskId) {
|
|
return null
|
|
}
|
|
|
|
// If we get here, we have tracks
|
|
console.log('[DownloadSection] Showing tracks:', tracks)
|
|
|
|
const handleDownloadZip = () => {
|
|
const url = getDownloadZipUrl(taskId)
|
|
window.open(url, '_blank')
|
|
}
|
|
|
|
const handleDownloadTrack = (filename: string) => {
|
|
const url = `/api/download/${taskId}/${filename}`
|
|
window.open(url, '_blank')
|
|
}
|
|
|
|
return (
|
|
<Paper sx={{ p: 3, mt: 3 }}>
|
|
<Typography variant="h6" sx={{ mb: 2 }}>
|
|
📥 Download Results
|
|
</Typography>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<FolderZip />}
|
|
onClick={handleDownloadZip}
|
|
sx={{ mb: 2 }}
|
|
fullWidth
|
|
>
|
|
Download All as ZIP
|
|
</Button>
|
|
|
|
<Divider sx={{ my: 2 }} />
|
|
|
|
<Typography variant="subtitle2" sx={{ mb: 1 }}>
|
|
Individual Tracks
|
|
</Typography>
|
|
|
|
<List dense>
|
|
{tracks.map((track, index) => (
|
|
<ListItem
|
|
key={index}
|
|
secondaryAction={
|
|
<IconButton edge="end" onClick={() => handleDownloadTrack(track.filename)} size="small">
|
|
<Download />
|
|
</IconButton>
|
|
}
|
|
>
|
|
<ListItemText
|
|
primary={track.filename}
|
|
secondary={formatFileSize(track.size)}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Paper>
|
|
)
|
|
}
|