From 8383156b82e00d71cd2ed996c19792fc27be6e7c Mon Sep 17 00:00:00 2001
From: SUFIYANJT <jtfinu@gmail.com>
Date: Sun, 16 Mar 2025 15:37:08 +0530
Subject: [PATCH 1/2] add route

---
 client/src/Pages/ResultsPage.tsx           |   2 +-
 client/src/Pages/Selection.tsx             | 231 +++++++++++++++++++++
 client/src/components/StepperComponent.tsx |   2 +-
 3 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 client/src/Pages/Selection.tsx

diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 650d2dd..46b4fb1 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -211,7 +211,7 @@ function ResultsPage() {
           <Button
             variant="outlined"
             color="primary"
-            onClick={handleProcessAnother}
+            onClick={()=> navigate('/upload')}
           >
             Process Another File
           </Button>
diff --git a/client/src/Pages/Selection.tsx b/client/src/Pages/Selection.tsx
new file mode 100644
index 0000000..650d2dd
--- /dev/null
+++ b/client/src/Pages/Selection.tsx
@@ -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;
\ No newline at end of file
diff --git a/client/src/components/StepperComponent.tsx b/client/src/components/StepperComponent.tsx
index 6d07751..67a36ba 100644
--- a/client/src/components/StepperComponent.tsx
+++ b/client/src/components/StepperComponent.tsx
@@ -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 (

From 20f91b9e2c32b815ab4a8e90164ba36fc3085b28 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Sun, 16 Mar 2025 15:41:33 +0530
Subject: [PATCH 2/2] remove unused pages

---
 client/src/Pages/Selection.tsx | 231 ---------------------------------
 1 file changed, 231 deletions(-)
 delete mode 100644 client/src/Pages/Selection.tsx

diff --git a/client/src/Pages/Selection.tsx b/client/src/Pages/Selection.tsx
deleted file mode 100644
index 650d2dd..0000000
--- a/client/src/Pages/Selection.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-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;
\ No newline at end of file