From 26c5737a8dc14e851c203dfa8cb8ecb4e5d4c819 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Thu, 20 Mar 2025 20:13:31 +0530 Subject: [PATCH 01/10] remove all code for handling video files --- client/src/Pages/PreviewPage.tsx | 34 +-------- client/src/Pages/ResultsPage.tsx | 115 ++++++++++++++----------------- client/src/Pages/UploadPage.tsx | 9 +-- 3 files changed, 57 insertions(+), 101 deletions(-) diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx index e30d023..47b2def 100644 --- a/client/src/Pages/PreviewPage.tsx +++ b/client/src/Pages/PreviewPage.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { Typography, @@ -18,12 +18,7 @@ import SpectrogramPlayer from "react-audio-spectrogram-player" function PreviewPage() { const navigate = useNavigate(); const { mediaFile, response } = useMediaContext(); - const [error, setError] = useState(false); - const videoRef = useRef(null); const audioClass = response.audio_class - // Supported video formats - const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg']; - const isVideo = mediaFile && supportedFormats.includes(mediaFile.type); useEffect(() => { if (!mediaFile) { @@ -46,32 +41,7 @@ function PreviewPage() { - {isVideo ? ( - - - ) : mediaFile.type.startsWith('audio/') ? ( + {mediaFile.type.startsWith('audio/') ? ( { if (audioClass === 'Music') { @@ -87,82 +86,74 @@ function ResultsPage() { - {isVideo ? ( - diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 9725903..7f9f62a 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -13,7 +13,6 @@ import { import { CloudUpload as CloudUploadIcon, VolumeUp as VolumeUpIcon, - Movie as MovieIcon, } from "@mui/icons-material"; import StepperComponent from "../components/StepperComponent"; import { useWebSocket } from "../contexts/WebSocketContext"; @@ -216,7 +215,7 @@ function UploadPage() { id="fileInput" style={{ display: "none" }} onChange={handleFileChange} - accept="audio/*,video/*" + accept="audio/*" disabled={!inputEnabled} /> @@ -226,11 +225,7 @@ function UploadPage() { {file && ( - {file.type.includes("video") ? ( - - ) : ( - - )} + {file.type.includes("audio") ? : null} {file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB )} From 3aff2f57af8802432f3b797dbdeee6b8f6b07432 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Thu, 20 Mar 2025 20:18:16 +0530 Subject: [PATCH 02/10] Set 100MB file size limit --- client/src/Pages/UploadPage.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 7f9f62a..2b1718c 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -102,6 +102,16 @@ function UploadPage() { const handleFileChange = (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0] || null; + const maxSize = 100 * 1024 * 1024; // 100MB in bytes + + if (selectedFile) { + if (selectedFile.size > maxSize) { + alert("File size exceeds 100MB limit."); + e.target.value = ""; + return; + } + } + validateAndSetFile(selectedFile); handleUpload(selectedFile); }; From 37f850989a73f6adbfb8c60c406f7aabd8dfaad1 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Thu, 20 Mar 2025 20:31:37 +0530 Subject: [PATCH 03/10] remove alerts and clear previous states on handleChange --- client/src/Pages/UploadPage.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 2b1718c..855d384 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -101,12 +101,23 @@ function UploadPage() { }; const handleFileChange = (e: React.ChangeEvent) => { + setUpload(false); + setFileError(""); + setResponse({ + audio_class: "", + file_uuid: "", + sr: 0, + spectrogram: "", + spec_sr: 0 + }); const selectedFile = e.target.files?.[0] || null; const maxSize = 100 * 1024 * 1024; // 100MB in bytes if (selectedFile) { if (selectedFile.size > maxSize) { - alert("File size exceeds 100MB limit."); + setFileError("Max file size is 100MB!"); + setFile(null); + setUpload(false); e.target.value = ""; return; } @@ -233,6 +244,9 @@ function UploadPage() { {file ? file.name : "Drop your file here or click to browse files"} + + Max file size: 100MB + {file && ( {file.type.includes("audio") ? : null} From 334dc00372d2d10f7fde5dd480121a8862e10753 Mon Sep 17 00:00:00 2001 From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com> Date: Thu, 20 Mar 2025 21:15:48 +0530 Subject: [PATCH 04/10] add request exception handling and toast notifications for error --- client/src/Pages/UploadPage.tsx | 35 +++++++++++++++++----------- client/src/components/Toast.tsx | 26 +++++++++++++++++++++ client/src/contexts/MediaContext.tsx | 8 ++++++- 3 files changed, 54 insertions(+), 15 deletions(-) create mode 100644 client/src/components/Toast.tsx diff --git a/client/src/Pages/UploadPage.tsx b/client/src/Pages/UploadPage.tsx index 855d384..6a8c241 100644 --- a/client/src/Pages/UploadPage.tsx +++ b/client/src/Pages/UploadPage.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import Logs from "../components/Logs" +import Toast from "../components/Toast"; import axios from "axios"; import { Typography, @@ -23,13 +24,17 @@ function UploadPage() { const navigate = useNavigate(); const theme = useTheme(); const { socket, isConnected } = useWebSocket(); - const { setMediaFile, setResponse, setLogs } = useMediaContext(); + const { setMediaFile, setResponse, setLogs, setToastOpen, setToastMessage } = useMediaContext(); const [file, setFile] = useState(null); const [isDragging, setIsDragging] = useState(false); - const [fileError, setFileError] = useState(""); const [upload, setUpload] = useState(false); const [inputEnabled, setInputEnabled] = useState(false); + const showErrorToast = (message: string) => { + setToastMessage(message); + setToastOpen(true); + } + useEffect(() => { const startLogs = async () => { setLogs([formatLogMessage("Initializing freqsplit")]); @@ -102,7 +107,6 @@ function UploadPage() { const handleFileChange = (e: React.ChangeEvent) => { setUpload(false); - setFileError(""); setResponse({ audio_class: "", file_uuid: "", @@ -115,7 +119,7 @@ function UploadPage() { if (selectedFile) { if (selectedFile.size > maxSize) { - setFileError("Max file size is 100MB!"); + showErrorToast("Max file size is 100MB!"); setFile(null); setUpload(false); e.target.value = ""; @@ -128,13 +132,11 @@ function UploadPage() { }; const validateAndSetFile = (file: File | null) => { - setFileError(""); - if (!file) return; const fileType = file.type; if (!fileType.includes("audio") && !fileType.includes("video")) { - setFileError("Please upload only audio or video files."); + showErrorToast("Please upload only audio or video files."); return; } @@ -151,7 +153,7 @@ function UploadPage() { }); // navigate('/preview'); } else { - setFileError("Please upload a file to continue."); + showErrorToast("Please upload a file to continue"); } }; @@ -198,6 +200,16 @@ function UploadPage() { setLogs((prevLogs) => [...prevLogs, formatLogMessage(`freqsplit/input: audio_class: ${res.data.audio_class}`)]) } } catch (error) { + showErrorToast("Failed to upload file"); + setUpload(false); + setResponse({ + audio_class: "", + file_uuid: "", + sr: 0, + spectrogram: "", + spec_sr: 0 + }); + setFile(null); console.error("Upload failed:", error); } }; @@ -255,12 +267,6 @@ function UploadPage() { )} - {fileError && ( - - {fileError} - - )} -