joel/freqsplit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove all code for handling video files

Browse Source
This commit is contained in:
Joel Mathew Thomas
2025-03-20 20:13:31 +05:30
parent db894a46be
commit 26c5737a8d
3 changed files with 57 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Pages/PreviewPage.tsx
+2 -32
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react'; import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import {
Typography, Typography,
@@ -18,12 +18,7 @@ import SpectrogramPlayer from "react-audio-spectrogram-player"
function PreviewPage() { function PreviewPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { mediaFile, response } = useMediaContext(); const { mediaFile, response } = useMediaContext();
const [error, setError] = useState(false);
const videoRef = useRef(null);
const audioClass = response.audio_class const audioClass = response.audio_class
// Supported video formats
const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
useEffect(() => { useEffect(() => {
if (!mediaFile) { if (!mediaFile) {
@@ -46,32 +41,7 @@ function PreviewPage() {
</Typography> </Typography>
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}> <Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
{isVideo ? ( {mediaFile.type.startsWith('audio/') ? (
<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
onError={() => setError(true)}
/>
{error && (
<Typography color="error" sx={{ mt: 2 }}>
<ErrorIcon sx={{ mr: 1 }} />
Video format not supported. Please upload MP4, WebM, or Ogg.
</Typography>
)}
</Box>
) : mediaFile.type.startsWith('audio/') ? (
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
client/src/Pages/ResultsPage.tsx
+53 -62
View File
@@ -27,7 +27,6 @@ function ResultsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { mediaFile, response, extractedFiles, downloadedFileURL, downloadedFileSpectrogram, setLogs } = useMediaContext(); const { mediaFile, response, extractedFiles, downloadedFileURL, downloadedFileSpectrogram, setLogs } = useMediaContext();
const audioClass = response.audio_class const audioClass = response.audio_class
const isVideo = mediaFile?.type.includes('video');
const handleDownloadAll = () => { const handleDownloadAll = () => {
if (audioClass === 'Music') { if (audioClass === 'Music') {
@@ -87,82 +86,74 @@ function ResultsPage() {
</Typography> </Typography>
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}> <Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
{isVideo ? ( <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
<video <VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
<Typography variant="h6" gutterBottom>
{mediaFile.name} (Original)
</Typography>
<Box sx={{ width: '100%', mt: 2, mb: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
<Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
{mediaFile.name}
</Typography>
<SpectrogramPlayer
src={mediaFile.url} src={mediaFile.url}
style={{ width: '100%', borderRadius: 8 }} sxx={JSON.parse(response.spectrogram)}
controls SampleRate={response.spec_sr}
colormap={'magma'}
settings={true}
transparent={false}
navigator={true}
/> />
) : ( </Box>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}> {audioClass === "Music" ? (
<VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} /> <>
<Typography variant="h6" gutterBottom> <Box sx={{ width: '100%', mt: 2 }}>
{mediaFile.name} (Original) <Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
Processed Files
</Typography> </Typography>
<Box sx={{ width: '100%', mt: 2, mb: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}> </Box>
{extractedFiles.map((file, index) => (
<Box key={index} sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
<Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}> <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
{mediaFile.name} {file.name}
</Typography> </Typography>
<SpectrogramPlayer <SpectrogramPlayer
src={mediaFile.url} src={file.url}
sxx={JSON.parse(response.spectrogram)} sxx={JSON.parse(file.spectrogram)}
SampleRate={response.spec_sr} SampleRate={file.spec_sr}
colormap={'magma'} colormap={'magma'}
settings={true} settings={true}
transparent={false} transparent={false}
navigator={true} navigator={true}
/> />
</Box> </Box>
{audioClass === "Music" ? ( ))}
<> </>
<Box sx={{ width: '100%', mt: 2 }}> ) : (
<Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}> <>
Processed Files <Box sx={{ width: '100%', mt: 2 }}>
<Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
Processed File
</Typography>
</Box>
<Box sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
<Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
{mediaFile?.name}
</Typography> </Typography>
</Box> <SpectrogramPlayer
{extractedFiles.map((file, index) => ( src={downloadedFileURL}
<Box key={index} sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}> sxx={JSON.parse(downloadedFileSpectrogram.spectrogram)}
<Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}> SampleRate={downloadedFileSpectrogram.spec_sr}
{file.name} colormap={'magma'}
</Typography> settings={true}
<SpectrogramPlayer transparent={false}
src={file.url} navigator={true}
sxx={JSON.parse(file.spectrogram)} />
SampleRate={file.spec_sr} </Box>
colormap={'magma'} </>
settings={true}
transparent={false}
navigator={true}
/>
</Box>
))}
</>
) : (
<>
<Box sx={{ width: '100%', mt: 2 }}>
<Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
Processed File
</Typography>
</Box>
<Box sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
<Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
{mediaFile?.name}
</Typography>
<SpectrogramPlayer
src={downloadedFileURL}
sxx={JSON.parse(downloadedFileSpectrogram.spectrogram)}
SampleRate={downloadedFileSpectrogram.spec_sr}
colormap={'magma'}
settings={true}
transparent={false}
navigator={true}
/>
</Box>
</>
)}
</Box>
)} )}
</Box> </Box>
</Box>
<Grid container spacing={3} sx={{ mt: 2 }}> <Grid container spacing={3} sx={{ mt: 2 }}>
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
client/src/Pages/UploadPage.tsx
+2 -7
View File
@@ -13,7 +13,6 @@ import {
import { import {
CloudUpload as CloudUploadIcon, CloudUpload as CloudUploadIcon,
VolumeUp as VolumeUpIcon, VolumeUp as VolumeUpIcon,
Movie as MovieIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
import StepperComponent from "../components/StepperComponent"; import StepperComponent from "../components/StepperComponent";
import { useWebSocket } from "../contexts/WebSocketContext"; import { useWebSocket } from "../contexts/WebSocketContext";
@@ -216,7 +215,7 @@ function UploadPage() {
id="fileInput" id="fileInput"
style={{ display: "none" }} style={{ display: "none" }}
onChange={handleFileChange} onChange={handleFileChange}
accept="audio/*,video/*" accept="audio/*"
disabled={!inputEnabled} disabled={!inputEnabled}
/> />
@@ -226,11 +225,7 @@ function UploadPage() {
</Typography> </Typography>
{file && ( {file && (
<Typography variant="body2" color="textSecondary"> <Typography variant="body2" color="textSecondary">
{file.type.includes("video") ? ( {file.type.includes("audio") ? <VolumeUpIcon sx={{ mr: 1 }} /> : null}
<MovieIcon sx={{ mr: 1 }} />
) : (
<VolumeUpIcon sx={{ mr: 1 }} />
)}
{file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB {file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB
</Typography> </Typography>
)} )}