max/audio_splitter
1
1
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Download section didn't appear. Resolved

Browse Source
This commit is contained in:
Maxim Vershinin
2026-08-03 10:46:01 +05:00
parent ea49920a12
commit e23b0f44ce
16 changed files with 157 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/frontend/Dockerfile
+1 -1
View File
@@ -18,7 +18,7 @@ FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
# Copy nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# Expose the port
EXPOSE 80
web/frontend/nginx/nginx.conf
+35
View File
@@ -0,0 +1,35 @@
server {
listen 80;
server_name _;
client_max_body_size 500M;
# Root directory for static files
root /usr/share/nginx/html;
index index.html;
# Serve React app
location / {
try_files $uri $uri/ /index.html;
}
# Proxy API requests to backend
location /api/ {
proxy_pass http://backend:8000/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# Proxy WebSocket requests to backend
location /ws/ {
proxy_pass http://backend:8000/ws/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
web/frontend/src/App.tsx
+15 -7
View File
@@ -1,6 +1,6 @@
import React from 'react'
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'
import { Box, Grid, Button, Alert, CircularProgress } from '@mui/material'
import { Box, Grid, Button, CircularProgress } from '@mui/material'
import { PlayArrow } from '@mui/icons-material'
import { Layout } from './components/Layout'
import { UploadZone } from './components/UploadZone'
@@ -18,11 +18,17 @@ import { startSplit } from './api/client'
const App: React.FC = () => {
const { theme } = useUIStore()
const { taskId, file } = useUploadStore()
const { taskId } = useUploadStore()
const { entries, isValid } = useTracklistStore()
const { options } = useOptionsStore()
const { isProcessing, status, setStatus, setProgress, setMessage, setError, setIsProcessing, addLog, reset } =
useTaskStore()
const {
isProcessing,
setTaskId, // <-- Add this
setError,
setIsProcessing,
addLog,
reset,
} = useTaskStore()
// Connect WebSocket when taskId is available and processing
useWebSocket(taskId && isProcessing ? taskId : null)
@@ -44,6 +50,8 @@ const App: React.FC = () => {
}
try {
// Set taskId in taskStore so DownloadSection can use it
setTaskId(taskId)
setIsProcessing(true)
addLog('🚀 Starting split...')
@@ -106,8 +114,8 @@ const App: React.FC = () => {
</Button>
</Box>
{status && <ProgressDisplay />}
{status === 'done' && <DownloadSection />}
<ProgressDisplay />
<DownloadSection />
</Grid>
</Grid>
</Layout>
@@ -115,4 +123,4 @@ const App: React.FC = () => {
)
}
export default App
export default App
web/frontend/src/api/client.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import axios from 'axios'
import { TracklistEntry, SplitOptions, TaskStatus } from '../types'
export const api = axios.create({
baseURL: '/api',
@@ -44,4 +45,4 @@ export const getDownloadUrl = (task_id: string): string => {
export const getDownloadZipUrl = (task_id: string): string => {
return `/api/download/${task_id}/splits.zip`
}
}
web/frontend/src/components/DownloadSection.tsx
+13 -7
View File
@@ -1,19 +1,25 @@
import React from 'react'
import { Box, Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
import { Download, FileDownload, FolderZip } from '@mui/icons-material'
import { Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
import { Download, FolderZip } from '@mui/icons-material'
import { useTaskStore } from '../stores/taskStore'
import { getDownloadUrl, getDownloadZipUrl } from '../api/client'
import { getDownloadZipUrl } from '../api/client'
import { formatFileSize } from '../utils/formatters'
export const DownloadSection: React.FC = () => {
const { taskId, tracks, status } = useTaskStore()
if (status !== 'done' || tracks.length === 0) {
console.log('[DownloadSection] Rendering:', { status, tracks, taskId })
// Check if we should show the download section
if (status !== 'done' || !tracks || tracks.length === 0 || !taskId) {
return null
}
// If we get here, we have tracks
console.log('[DownloadSection] Showing tracks:', tracks)
const handleDownloadZip = () => {
const url = getDownloadZipUrl(taskId!)
const url = getDownloadZipUrl(taskId)
window.open(url, '_blank')
}
@@ -23,7 +29,7 @@ export const DownloadSection: React.FC = () => {
}
return (
<Paper sx={{ p: 3 }}>
<Paper sx={{ p: 3, mt: 3 }}>
<Typography variant="h6" sx={{ mb: 2 }}>
📥 Download Results
</Typography>
@@ -64,4 +70,4 @@ export const DownloadSection: React.FC = () => {
</List>
</Paper>
)
}
}
web/frontend/src/components/OptionsPanel.tsx
+2 -1
View File
@@ -4,7 +4,6 @@ import {
Paper,
Typography,
TextField,
Select,
MenuItem,
FormControlLabel,
Switch,
@@ -12,9 +11,11 @@ import {
IconButton,
Divider,
} from '@mui/material'
// Select is used internally by TextField with select prop, no need to import
import { ExpandMore, ExpandLess } from '@mui/icons-material'
import { useOptionsStore } from '../stores/optionsStore'
interface SectionProps {
title: string
children: React.ReactNode
web/frontend/src/components/TracklistEditor.tsx
-1
View File
@@ -4,7 +4,6 @@ import { useDropzone } from 'react-dropzone'
import { useTracklistStore } from '../stores/tracklistStore'
import { useOptionsStore } from '../stores/optionsStore'
import { parseAndValidateTracklist } from '../utils/validators'
import { TracklistEntry } from '../types'
export const TracklistEditor: React.FC = () => {
const { rawText, errors, isValid, setRawText, setEntries, setErrors, setIsValid } = useTracklistStore()
web/frontend/src/components/UploadZone.tsx
+2 -6
View File
@@ -4,7 +4,6 @@ import { Box, Typography, Paper, LinearProgress, Alert } from '@mui/material'
import { CloudUpload, InsertDriveFile } from '@mui/icons-material'
import { useUploadStore } from '../stores/uploadStore'
import { uploadFile } from '../api/client'
import { useTaskStore } from '../stores/taskStore'
const ALLOWED_EXTENSIONS = ['.mp3', '.flac', '.wav', '.m4a', '.ogg', '.opus', '.aac', '.wma', '.aiff', '.alac', '.ac3']
@@ -25,8 +24,6 @@ export const UploadZone: React.FC = () => {
setTaskId,
} = useUploadStore()
const { setTaskId: setTaskIdStore, setIsProcessing } = useTaskStore()
const onDrop = useCallback(
async (acceptedFiles: File[]) => {
if (acceptedFiles.length === 0) return
@@ -49,7 +46,6 @@ export const UploadZone: React.FC = () => {
try {
const response = await uploadFile(selectedFile)
setTaskId(response.task_id)
setTaskIdStore(response.task_id)
setUploadProgress(100)
setIsUploading(false)
} catch (err: any) {
@@ -61,7 +57,7 @@ export const UploadZone: React.FC = () => {
setFileSize(0)
}
},
[setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId, setTaskIdStore]
[setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId]
)
const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -140,4 +136,4 @@ export const UploadZone: React.FC = () => {
)}
</Box>
)
}
}
web/frontend/src/hooks/useWebSocket.ts
+78 -16
View File
@@ -1,11 +1,13 @@
import { useEffect, useRef } from 'react'
import { useTaskStore } from '../stores/taskStore'
import { useUIStore } from '../stores/uiStore'
import { getStatus } from '../api/client'
export const useWebSocket = (taskId: string | null) => {
const wsRef = useRef<WebSocket | null>(null)
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const reconnectAttempts = useRef(0)
const pollingRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const {
setStatus,
@@ -19,6 +21,55 @@ export const useWebSocket = (taskId: string | null) => {
} = useTaskStore()
const { setWsConnected } = useUIStore()
const pollStatus = async () => {
if (!taskId) return
try {
const response = await getStatus(taskId)
console.log('[Polling] Status response:', response)
// Update all state fields together
setStatus(response.status)
setProgress(response.progress)
setMessage(response.message)
// Explicitly set tracks if present
if (response.tracks && response.tracks.length > 0) {
console.log('[Polling] Setting tracks:', response.tracks)
setTracks(response.tracks)
}
if (response.status === 'done') {
console.log('[Polling] Split complete, tracks set:', response.tracks)
setIsProcessing(false)
// Ensure tracks are set one more time (safety)
if (response.tracks && response.tracks.length > 0) {
setTracks(response.tracks)
}
return
}
if (response.status === 'error') {
setError(response.error || 'Split failed')
setIsProcessing(false)
return
}
// Still processing – poll again
if (pollingRef.current) {
clearTimeout(pollingRef.current)
}
pollingRef.current = setTimeout(pollStatus, 2000)
} catch (error) {
console.error('[Polling] Error:', error)
if (pollingRef.current) {
clearTimeout(pollingRef.current)
}
pollingRef.current = setTimeout(pollStatus, 3000)
}
}
useEffect(() => {
if (!taskId) {
if (wsRef.current) {
@@ -26,6 +77,11 @@ export const useWebSocket = (taskId: string | null) => {
wsRef.current = null
}
setWsConnected(false)
// Clear polling
if (pollingRef.current) {
clearTimeout(pollingRef.current)
pollingRef.current = null
}
return
}
@@ -41,11 +97,17 @@ export const useWebSocket = (taskId: string | null) => {
clearTimeout(reconnectTimeoutRef.current)
reconnectTimeoutRef.current = null
}
// Start polling when connection is established
// This ensures we get the final status even if WebSocket fails
setTimeout(() => {
pollStatus()
}, 1000)
}
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
console.log('[WebSocket] Message:', data)
if (data.type === 'status') {
const statusData = data.data
@@ -58,7 +120,6 @@ export const useWebSocket = (taskId: string | null) => {
if (statusData.tracks) {
setTracks(statusData.tracks)
}
// If status is done or error, stop processing
if (statusData.status === 'done' || statusData.status === 'error') {
setIsProcessing(false)
}
@@ -67,13 +128,12 @@ export const useWebSocket = (taskId: string | null) => {
setStatus(progressData.status)
setProgress(progressData.progress)
setMessage(progressData.message)
if (progressData.tracks) {
setTracks(progressData.tracks)
}
if (progressData.status === 'done') {
addLog('✅ Split complete!')
setIsProcessing(false)
// If tracks are included, update them
if (progressData.tracks) {
setTracks(progressData.tracks)
}
} else if (progressData.status === 'error') {
setError(progressData.message)
addLog(`❌ Error: ${progressData.message}`)
@@ -83,7 +143,7 @@ export const useWebSocket = (taskId: string | null) => {
}
}
} catch (error) {
console.error('Failed to parse WebSocket message:', error)
console.error('[WebSocket] Failed to parse message:', error)
}
}
@@ -91,18 +151,16 @@ export const useWebSocket = (taskId: string | null) => {
console.log(`WebSocket disconnected for task ${taskId}`)
setWsConnected(false)
// If task is still in processing state, reconnect
// We'll check via polling if needed
if (reconnectAttempts.current < 5) {
reconnectTimeoutRef.current = setTimeout(() => {
reconnectAttempts.current += 1
connect()
}, 3000)
// If task is not done and we have a taskId, start polling
// We check the status store to see if it's already done
if (taskId && status !== 'done' && status !== 'error') {
console.log('[WebSocket] Disconnected while processing, starting polling...')
setTimeout(pollStatus, 1000)
}
}
ws.onerror = (error) => {
console.error('WebSocket error:', error)
console.error('[WebSocket] Error:', error)
// onclose will handle reconnection
}
@@ -120,9 +178,13 @@ export const useWebSocket = (taskId: string | null) => {
clearTimeout(reconnectTimeoutRef.current)
reconnectTimeoutRef.current = null
}
if (pollingRef.current) {
clearTimeout(pollingRef.current)
pollingRef.current = null
}
setWsConnected(false)
}
}, [taskId, setStatus, setProgress, setMessage, setError, setTracks, addLog, setWsConnected, setIsProcessing])
}, [taskId, setStatus, setProgress, setMessage, setError, setTracks, addLog, setWsConnected, setIsProcessing, status])
return wsRef.current
}
web/frontend/src/stores/taskStore.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { create } from 'zustand'
import { TaskStatus, TrackInfo } from '../types'
import { TrackInfo } from '../types'
interface TaskState {
taskId: string | null
@@ -51,4 +51,4 @@ export const useTaskStore = create<TaskState>((set) => ({
logs: [],
isProcessing: false,
}),
}))
}))
web/frontend/src/utils/validators.ts
-1
View File
@@ -1,5 +1,4 @@
// web/frontend/src/utils/validators.ts
import { TracklistEntry } from '../types'
import { parseTracklistWithFormat } from './parser'
web/frontend/tsconfig.json
+3 -3
View File
@@ -12,10 +12,10 @@
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
}