From 2d63cf3ab9a2cbbc1b12e8940001eb84ae3e7005 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Tue, 18 Mar 2025 01:00:00 +0530 Subject: [PATCH] code refactor --- client/index.html | 3 +- client/src/App.tsx | 4 +-- client/src/Pages/LandingPage.tsx | 3 +- client/src/Pages/PreviewPage.tsx | 29 ++++-------------- client/src/Pages/ProcessingPage.tsx | 13 ++++---- client/src/Pages/ResultsPage.tsx | 35 ++++++++++------------ client/src/Pages/UploadPage.tsx | 13 ++++---- client/src/components/StepperComponent.tsx | 7 +++-- client/src/main.tsx | 2 +- 9 files changed, 43 insertions(+), 66 deletions(-) diff --git a/client/index.html b/client/index.html index e4b78ea..cccac0e 100644 --- a/client/index.html +++ b/client/index.html @@ -2,9 +2,8 @@ - - Vite + React + TS + FreqSplit
diff --git a/client/src/App.tsx b/client/src/App.tsx index 3bd3413..49f1eb3 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -28,7 +28,7 @@ const App: React.FC = () => { - Freq Split + FreqSplit @@ -40,7 +40,7 @@ const App: React.FC = () => { } /> } /> } /> - }/> + }/> diff --git a/client/src/Pages/LandingPage.tsx b/client/src/Pages/LandingPage.tsx index c932c5f..fdfbb2a 100644 --- a/client/src/Pages/LandingPage.tsx +++ b/client/src/Pages/LandingPage.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useNavigate } from 'react-router-dom'; import { Typography, @@ -43,7 +42,7 @@ function LandingPage() { }} > - Welcome to Freq Split + Welcome to FreqSplit Upload, preview, and process your audio and video files with ease diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx index 8c8bfe7..2373699 100644 --- a/client/src/Pages/PreviewPage.tsx +++ b/client/src/Pages/PreviewPage.tsx @@ -1,6 +1,5 @@ -import React, { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -import { useLocation } from 'react-router-dom'; import { Typography, Container, @@ -8,7 +7,6 @@ import { Paper, Box, LinearProgress, - useTheme } from '@mui/material'; import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material'; import StepperComponent from '../components/StepperComponent'; @@ -16,13 +14,10 @@ import { useMediaContext } from '../contexts/MediaContext'; function PreviewPage() { const navigate = useNavigate(); - const theme = useTheme(); - const { mediaFile } = useMediaContext(); - const [isPlaying, setIsPlaying] = useState(false); + const { mediaFile, response } = useMediaContext(); const [error, setError] = useState(false); const videoRef = useRef(null); - const location = useLocation(); - const { audioClass } = location.state || {} + const audioClass = response.audio_class // Supported video formats const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg']; const isVideo = mediaFile && supportedFormats.includes(mediaFile.type); @@ -33,17 +28,6 @@ function PreviewPage() { } }, [mediaFile, navigate]); - const togglePlay = () => { - if (videoRef.current) { - if (isPlaying) { - videoRef.current.pause(); - } else { - videoRef.current.play(); - } - setIsPlaying(!isPlaying); - } - }; - if (!mediaFile) return ; return ( @@ -77,8 +61,6 @@ function PreviewPage() { style={{ width: '100%', borderRadius: 8 }} controls onError={() => setError(true)} - onPlay={() => setIsPlaying(true)} - onPause={() => setIsPlaying(false)} /> {error && ( @@ -108,8 +90,6 @@ function PreviewPage() { src={mediaFile.url} style={{ width: '100%' }} controls - onPlay={() => setIsPlaying(true)} - onPause={() => setIsPlaying(false)} /> @@ -132,12 +112,13 @@ function PreviewPage() { + ); } diff --git a/client/src/Pages/ProcessingPage.tsx b/client/src/Pages/ProcessingPage.tsx index 19f9137..ed66a47 100644 --- a/client/src/Pages/ProcessingPage.tsx +++ b/client/src/Pages/ProcessingPage.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { useNavigate,useLocation } from "react-router-dom"; +import { useNavigate} from "react-router-dom"; import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material"; import StepperComponent from "../components/StepperComponent"; import { useMediaContext } from "../contexts/MediaContext"; @@ -17,7 +17,10 @@ function ProcessingPage() { try { const formData = new FormData(); formData.append("file_uuid", response.file_uuid); - Object.entries(extraData).forEach(([key, value]) => formData.append(key, value)); + Object.entries(extraData).forEach(([key, value]) => + formData.append(key, String(value)) + ); + setStatusText(status); const startTime = Date.now(); @@ -35,8 +38,6 @@ function ProcessingPage() { console.error(`Error in step: ${url}`, error); } }; - const location = useLocation(); - const { audioClass } = location.state || {}; useEffect(() => { if (!mediaFile) { @@ -51,7 +52,7 @@ function ProcessingPage() { if (response.audio_class === "Music") { processStep("http://127.0.0.1:8000/api/resample", () => { processStep("http://127.0.0.1:8000/api/separate", () => setProgress(100), 100, "Separating sources into vocals, bass, drums and other..."); - }, 75, "Resampling audio to 44100Hz...", { sr: response.sr?.toString() || "44100" }); + }, 75, "Resampling audio to 44100Hz...", { sr: "44100" }); } else { processStep("http://127.0.0.1:8000/api/noisereduce", () => setProgress(100), 100, "Reducing background noise from the audio..."); } @@ -62,7 +63,7 @@ function ProcessingPage() { useEffect(() => { if (progress === 100) { - navigate('/results', { state: { audioClass}}) + navigate('/results') } }, [progress]); diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx index 5d3b195..031328f 100644 --- a/client/src/Pages/ResultsPage.tsx +++ b/client/src/Pages/ResultsPage.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { useNavigate, useLocation } from 'react-router-dom'; -import axios from 'axios'; +import { useEffect, useRef } from 'react'; +import { useNavigate } from 'react-router-dom'; +//import axios from 'axios'; import { Typography, Container, @@ -11,7 +11,6 @@ import { CardContent, Grid, LinearProgress, - useTheme } from '@mui/material'; import { Check as CheckIcon, @@ -22,12 +21,10 @@ import { useMediaContext } from '../contexts/MediaContext'; function ResultsPage() { const navigate = useNavigate(); - const theme = useTheme(); - const { mediaFile, clearMedia, response } = useMediaContext(); - const [isPlaying, setIsPlaying] = useState(false); + const { mediaFile, response } = useMediaContext(); +// const [isPlaying, setIsPlaying] = useState(false); const audioRefs = [useRef(null), useRef(null), useRef(null),useRef(null)]; - const location = useLocation(); - const { audioClass } = location.state || {}; + const audioClass = response.audio_class const isVideo = mediaFile?.type.includes('video'); useEffect(() => { @@ -36,16 +33,16 @@ function ResultsPage() { } }, [mediaFile, navigate]); - const togglePlay = (index) => { - if (audioRefs[index].current) { - if (isPlaying) { - audioRefs[index].current.pause(); - } else { - audioRefs[index].current.play(); - } - setIsPlaying(!isPlaying); - } - }; +// const togglePlay = (index) => { +// if (audioRefs[index].current) { +// if (isPlaying) { +// audioRefs[index].current.pause(); +// } else { +// audioRefs[index].current.play(); +// } +// setIsPlaying(!isPlaying); +// } +// }; if (!mediaFile) return ; diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 84194d2..a6fbe78 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -20,7 +20,7 @@ import { useMediaContext } from "../contexts/MediaContext"; function UploadPage() { const navigate = useNavigate(); const theme = useTheme(); - const { setMediaFile, setResponse, response } = useMediaContext(); // ✅ Correct function name + const { setMediaFile, setResponse, response } = useMediaContext(); const [file, setFile] = useState(null); const [isDragging, setIsDragging] = useState(false); const [fileError, setFileError] = useState(""); @@ -70,8 +70,8 @@ function UploadPage() { name: file.name, url: URL.createObjectURL(file), type: file.type, - }); // ✅ Corrected function call - navigate('/preview', { state: { audioClass: response.audio_class } }); + }); // + navigate('/preview'); } else { setFileError("Please upload a file to continue."); } @@ -84,7 +84,7 @@ function UploadPage() { } const formData = new FormData(); - formData.append("file", file); // ✅ No more errors because we checked `file` is not null. + formData.append("file", file); try { const res = await axios.post<{ @@ -123,9 +123,6 @@ function UploadPage() { Upload Your Media - - Drag and drop your audio or video file, or click to browse - - {file ? file.name : "Drop your file here or click to browse"} + {file ? file.name : "Drop your file here or click to browse files"} {file && ( diff --git a/client/src/components/StepperComponent.tsx b/client/src/components/StepperComponent.tsx index 67a36ba..4ebdb9a 100644 --- a/client/src/components/StepperComponent.tsx +++ b/client/src/components/StepperComponent.tsx @@ -1,9 +1,12 @@ -import React from 'react'; import { Box, Stepper, Step, StepLabel } from '@mui/material'; const steps = ['Upload', 'Preview', 'Process', ,'Results']; -function StepperComponent({ activeStep }) { +type StepperComponentProps = { + activeStep: number; +}; + +function StepperComponent({ activeStep }: StepperComponentProps) { return ( diff --git a/client/src/main.tsx b/client/src/main.tsx index 28e7b4a..d69ed7a 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -5,6 +5,6 @@ import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById('root')!).render( ); \ No newline at end of file