add route
This commit is contained in:
SUFIYANJT
@@ -211,7 +211,7 @@ function ResultsPage() {
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={handleProcessAnother}
|
||||
onClick={()=> navigate('/upload')}
|
||||
>
|
||||
Process Another File
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Check as CheckIcon,
|
||||
VolumeUp as VolumeUpIcon
|
||||
} from '@mui/icons-material';
|
||||
import StepperComponent from '../components/StepperComponent';
|
||||
import { useMediaContext } from '../contexts/MediaContext';
|
||||
|
||||
function ResultsPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const { mediaFile, clearMedia,response } = useMediaContext();
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const processDownload = async() => {
|
||||
try {
|
||||
console.log('download started..')
|
||||
const res = await axios.get("http://127.0.0.1:8000/api/download", {
|
||||
params: { file_uuid: response.file_uuid }, // Attach file_uuid as a query param
|
||||
responseType: "blob", // Treat response as a file
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
const blob = new Blob([res.data]);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// Extract filename from headers or use default
|
||||
const contentDisposition = res.headers["content-disposition"];
|
||||
const filename = contentDisposition
|
||||
? contentDisposition.split("filename=")[1]
|
||||
: "downloaded_file";
|
||||
|
||||
// Auto-download the file (no user interaction needed)
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", filename);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
} else {
|
||||
console.error("Download failed, server responded with:", res);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Download error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate('/upload');
|
||||
}
|
||||
}, [mediaFile, navigate]);
|
||||
|
||||
const togglePlay = () => {
|
||||
if (videoRef.current) {
|
||||
if (isPlaying) {
|
||||
videoRef.current.pause();
|
||||
} else {
|
||||
videoRef.current.play();
|
||||
}
|
||||
setIsPlaying(!isPlaying);
|
||||
}
|
||||
};
|
||||
|
||||
const handleProcessAnother = () => {
|
||||
clearMedia();
|
||||
navigate('/upload');
|
||||
};
|
||||
|
||||
if (!mediaFile) return <LinearProgress />;
|
||||
|
||||
const isVideo = mediaFile.type.includes('video');
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={3} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 3 }}>
|
||||
<CheckIcon sx={{ color: 'success.main', fontSize: 36, mr: 1 }} />
|
||||
<Typography variant="h4" color="primary">
|
||||
Processing Complete!
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1" paragraph color="textSecondary" align="center">
|
||||
Your processed media is ready to view and download
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
|
||||
{isVideo ? (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'black',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%', borderRadius: 8 }}
|
||||
controls
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
p: 4,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.04)',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
<VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{mediaFile.name} (Processed)
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%', mt: 2 }}>
|
||||
<audio
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%' }}
|
||||
controls
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3} sx={{ mt: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
File Details
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Name:</strong> {mediaFile.name} (Processed)
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Type:</strong> {mediaFile.type}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Size:</strong> {(mediaFile.size / (1024 * 1024)).toFixed(2)} MB
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Actions
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph color="textSecondary">
|
||||
Download or share your processed media
|
||||
</Typography>
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{ mb: 1 }}
|
||||
onClick={() => processDownload()}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={() => alert('Sharing file...')}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={handleProcessAnother}
|
||||
>
|
||||
Process Another File
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Home
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResultsPage;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Box, Stepper, Step, StepLabel } from '@mui/material';
|
||||
|
||||
const steps = ['Upload', 'Preview', 'Process', 'Results'];
|
||||
const steps = ['Upload', 'Preview', 'Process', ,'Results'];
|
||||
|
||||
function StepperComponent({ activeStep }) {
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user