From 2ba08d7d9265ef6cd570d281318194c3738c29f7 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:29:12 +0530
Subject: [PATCH] add preview for original file

---
 client/src/Pages/ResultsPage.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 011891d..b4b9c70 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -25,6 +25,7 @@ function ResultsPage() {
   console.log("Extracted files are", extractedFiles);
 //  const [isPlaying, setIsPlaying] = useState(false);
   const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)];
+  const mediaFileRef = useRef(null);
   const audioClass = response.audio_class
   const isVideo = mediaFile?.type.includes('video');
   
@@ -71,11 +72,22 @@ function ResultsPage() {
               controls
             />
           ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
+              <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, mb: 2 }}>
+                <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
+                  Original: {mediaFile.name}
+                </Typography>
+                <audio
+                  ref={mediaFileRef}
+                  src={mediaFile.url}
+                  style={{ width: '100%' }}
+                  controls
+                />
+              </Box>
               {audioClass === "Music" ? (
                 extractedFiles.map((file, index) => (
                   <Box key={index} sx={{ width: '100%', mt: 2 }}>