preview files in result page: frontend change only

client/src/Pages/PreviewPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { 
   Typography, 
   Container, 
@@ -20,7 +21,8 @@ function PreviewPage() {
   const [isPlaying, setIsPlaying] = useState(false);
   const [error, setError] = useState(false);
   const videoRef = useRef(null);
-  
+  const location = useLocation();
+  const { audioClass } = location.state || {}
   // Supported video formats
   const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
   const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
@@ -46,6 +48,7 @@ function PreviewPage() {
 
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
+      <p>Audio Classification: {audioClass || "No data received"}</p>
       <StepperComponent activeStep={1} />
       
       <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
@@ -129,7 +132,7 @@ function PreviewPage() {
           <Button
             variant="contained"
             color="primary"
-            onClick={() => navigate('/processing')}
+            onClick={() =>  navigate('/processing', { state: { audioClass}})}
           >
             Process Media
           </Button>

client/src/Pages/ProcessingPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate,useLocation } from "react-router-dom";
 import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material";
 import StepperComponent from "../components/StepperComponent";
 import { useMediaContext } from "../contexts/MediaContext";
@@ -35,6 +35,8 @@ function ProcessingPage() {
       console.error(`Error in step: ${url}`, error);
     }
   };
+  const location = useLocation();
+  const { audioClass } = location.state || {}; 
 
   useEffect(() => {
     if (!mediaFile) {
@@ -59,7 +61,9 @@ function ProcessingPage() {
 
   useEffect(() => {
     if (progress === 100) {
-      navigate("/results");
+    
+      navigate('/results', { state: { audioClass}})
+      
     }
   }, [progress]);
 

client/src/Pages/ResultsPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import axios from 'axios';
 import { 
   Typography, 
@@ -25,43 +25,10 @@ function ResultsPage() {
   const theme = useTheme();
   const { mediaFile, clearMedia, response } = useMediaContext();
   const [isPlaying, setIsPlaying] = useState(false);
-  const videoRef = useRef(null);
+  const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
-
+  const location = useLocation();
-  const processDownload = async() => {
+  const { audioClass } = location.state || {};
-    try {
+  const isVideo = mediaFile?.type.includes('video');
-      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) {
@@ -69,26 +36,19 @@ function ResultsPage() {
     }
   }, [mediaFile, navigate]);
   
-  const togglePlay = () => {
+  const togglePlay = (index) => {
-    if (videoRef.current) {
+    if (audioRefs[index].current) {
       if (isPlaying) {
-        videoRef.current.pause();
+        audioRefs[index].current.pause();
       } else {
-        videoRef.current.play();
+        audioRefs[index].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} />
@@ -107,50 +67,38 @@ function ResultsPage() {
         
         <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
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
-              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 }}>
+              {audioClass === "Music" ? (
+                audioRefs.map((ref, index) => (
+                  <Box key={index} sx={{ width: '100%', mt: 2 }}>
                     <audio
-                  ref={videoRef}
+                      ref={ref}
                       src={mediaFile.url}
                       style={{ width: '100%' }}
                       controls
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
                     />
                   </Box>
+                ))
+              ) : (
+                <Box sx={{ width: '100%', mt: 2 }}>
+                  <audio
+                    ref={audioRefs[0]}
+                    src={mediaFile.url}
+                    style={{ width: '100%' }}
+                    controls
+                  />
+                </Box>
+              )}
             </Box>
           )}
         </Box>
@@ -168,58 +116,16 @@ function ResultsPage() {
                 <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
+          <Button variant="outlined" color="primary" onClick={() => navigate('/upload')}>
-            variant="outlined"
-            color="primary"
-            onClick={()=> navigate('/upload')}
-          >
             Process Another File
           </Button>
-          <Button
+          <Button variant="contained" color="primary" onClick={() => navigate('/')}> 
-            variant="contained"
-            color="primary"
-            onClick={() => navigate('/')}
-          >
             Back to Home
           </Button>
         </Box>

client/src/Pages/UploadPage.tsx

@@ -71,7 +71,7 @@ function UploadPage() {
         url: URL.createObjectURL(file),
         type: file.type,
       }); // ✅ Corrected function call
-      navigate("/preview");
+      navigate('/preview', { state: { audioClass: response.audio_class } });
     } else {
       setFileError("Please upload a file to continue.");
     }