remove all code for handling video files
This commit is contained in:
Joel Mathew Thomas
@@ -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() {
|
||||
</Typography>
|
||||
|
||||
<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
|
||||
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/') ? (
|
||||
{mediaFile.type.startsWith('audio/') ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
|
||||
@@ -27,7 +27,6 @@ function ResultsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { mediaFile, response, extractedFiles, downloadedFileURL, downloadedFileSpectrogram, setLogs } = useMediaContext();
|
||||
const audioClass = response.audio_class
|
||||
const isVideo = mediaFile?.type.includes('video');
|
||||
|
||||
const handleDownloadAll = () => {
|
||||
if (audioClass === 'Music') {
|
||||
@@ -87,82 +86,74 @@ function ResultsPage() {
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
|
||||
{isVideo ? (
|
||||
<video
|
||||
<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} (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}
|
||||
style={{ width: '100%', borderRadius: 8 }}
|
||||
controls
|
||||
sxx={JSON.parse(response.spectrogram)}
|
||||
SampleRate={response.spec_sr}
|
||||
colormap={'magma'}
|
||||
settings={true}
|
||||
transparent={false}
|
||||
navigator={true}
|
||||
/>
|
||||
) : (
|
||||
<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} (Original)
|
||||
</Box>
|
||||
{audioClass === "Music" ? (
|
||||
<>
|
||||
<Box sx={{ width: '100%', mt: 2 }}>
|
||||
<Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
|
||||
Processed Files
|
||||
</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 }}>
|
||||
{mediaFile.name}
|
||||
{file.name}
|
||||
</Typography>
|
||||
<SpectrogramPlayer
|
||||
src={mediaFile.url}
|
||||
sxx={JSON.parse(response.spectrogram)}
|
||||
SampleRate={response.spec_sr}
|
||||
src={file.url}
|
||||
sxx={JSON.parse(file.spectrogram)}
|
||||
SampleRate={file.spec_sr}
|
||||
colormap={'magma'}
|
||||
settings={true}
|
||||
transparent={false}
|
||||
navigator={true}
|
||||
/>
|
||||
</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>
|
||||
</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 }}>
|
||||
{file.name}
|
||||
</Typography>
|
||||
<SpectrogramPlayer
|
||||
src={file.url}
|
||||
sxx={JSON.parse(file.spectrogram)}
|
||||
SampleRate={file.spec_sr}
|
||||
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>
|
||||
<SpectrogramPlayer
|
||||
src={downloadedFileURL}
|
||||
sxx={JSON.parse(downloadedFileSpectrogram.spectrogram)}
|
||||
SampleRate={downloadedFileSpectrogram.spec_sr}
|
||||
colormap={'magma'}
|
||||
settings={true}
|
||||
transparent={false}
|
||||
navigator={true}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3} sx={{ mt: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
|
||||
@@ -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() {
|
||||
</Typography>
|
||||
{file && (
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
{file.type.includes("video") ? (
|
||||
<MovieIcon sx={{ mr: 1 }} />
|
||||
) : (
|
||||
<VolumeUpIcon sx={{ mr: 1 }} />
|
||||
)}
|
||||
{file.type.includes("audio") ? <VolumeUpIcon sx={{ mr: 1 }} /> : null}
|
||||
{file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user