[PR #123] [MERGED] Download Queue & Progress UI #521

New issue

Closed

opened 2026-02-27 19:04:13 +03:00 by kerem · 0 comments

kerem commented

2026-02-27 19:04:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/afkarxyz/SpotiFLAC/pull/123
Author: @Lukas200301
Created: 11/27/2025
Status: ✅ Merged
Merged: 11/29/2025
Merged by: @afkarxyz

Base: main ← Head: main

📝 Commits (2)

688abf2 Add download queue tracking and UI integration
b4e573a Add session stats to DownloadQueue dialog

📊 Changes

14 files changed (+1175 additions, -30 deletions)

View changed files

📝 app.go (+94 -11)
📝 backend/metadata.go (+6 -1)
📝 backend/progress.go (+318 -1)
📝 frontend/package.json (+1 -0)
📝 frontend/pnpm-lock.yaml (+33 -0)
📝 frontend/src/App.tsx (+16 -4)
📝 frontend/src/components/DownloadProgressToast.tsx (+24 -6)
➕ frontend/src/components/DownloadQueue.tsx (+290 -0)
📝 frontend/src/components/ui/dialog.tsx (+1 -1)
➕ frontend/src/components/ui/scroll-area.tsx (+46 -0)
📝 frontend/src/hooks/useDownload.ts (+288 -6)
➕ frontend/src/hooks/useDownloadQueueData.ts (+40 -0)
➕ frontend/src/hooks/useDownloadQueueDialog.ts (+16 -0)
📝 frontend/src/types/api.ts (+2 -0)

📄 Description

Download Queue & Progress UI

While contributing to this project, I saw the potential to improve the bottom-left Download Indicator—which previously only showed speed and total data. I enhanced it so that when you click the indicator, it now opens a Download Queue dialog that gives users comprehensive, interactive insight into all current downloads.

Highlights

Download Queue Dialog: Live tracking for each track (queued, downloading, completed, skipped, failed with error messages), plus session statistics (counts, MB, speed, time) in a spacious, readable layout.
Download Indicator: Visible during any active downloads; auto-hides when finished; opens the queue dialog on click.
Batch Pre-Queueing: Batch tracks are visible in the queue before downloads start, making every status transition clear.
Smart Error Handling: Marks tracks as failed only after all fallback services are tried (Tidal, Deezer, etc.), with robust exception handling.
Corrupted File Protection: FLAC/ISRC metadata validation automatically cleans up incomplete files and avoids false “file exists” errors.
Clear History: Lets users remove finished items from the queue at any time, even while downloads continue.
Auto-Cancel: Automatically cancels remaining queued tracks if downloads are stopped or completed.
New Package Added: Integrated @radix-ui/react-scroll-area for a modern, customizable scrollbar in the Download Queue dialog.

Technical Changes

Go backend: Thread-safe queue logic, multi-service fallback, session stats, and queued item cancellation.
React/TypeScript frontend: Uses @radix-ui/react-scroll-area for scrolling, adds new dialog and indicator components, handles batches and errors gracefully.

Main Files

frontend/src/components/DownloadQueue.tsx, DownloadProgressToast.tsx, related hooks
Backend: progress.go, metadata.go, app.go
Integration: App.tsx, useDownload.ts, API/type updates

Result: These improvements give users full visibility, clearer error reporting, and much better control for both single and batch downloads.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/afkarxyz/SpotiFLAC/pull/123 **Author:** [@Lukas200301](https://github.com/Lukas200301) **Created:** 11/27/2025 **Status:** ✅ Merged **Merged:** 11/29/2025 **Merged by:** [@afkarxyz](https://github.com/afkarxyz) **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (2) - [`688abf2`](https://github.com/afkarxyz/SpotiFLAC/commit/688abf2db142428804176d09b6683db8d9f50428) Add download queue tracking and UI integration - [`b4e573a`](https://github.com/afkarxyz/SpotiFLAC/commit/b4e573a4f0d814b99e57e40f2240f4a77ae0557f) Add session stats to DownloadQueue dialog ### 📊 Changes **14 files changed** (+1175 additions, -30 deletions) <details> <summary>View changed files</summary> 📝 `app.go` (+94 -11) 📝 `backend/metadata.go` (+6 -1) 📝 `backend/progress.go` (+318 -1) 📝 `frontend/package.json` (+1 -0) 📝 `frontend/pnpm-lock.yaml` (+33 -0) 📝 `frontend/src/App.tsx` (+16 -4) 📝 `frontend/src/components/DownloadProgressToast.tsx` (+24 -6) ➕ `frontend/src/components/DownloadQueue.tsx` (+290 -0) 📝 `frontend/src/components/ui/dialog.tsx` (+1 -1) ➕ `frontend/src/components/ui/scroll-area.tsx` (+46 -0) 📝 `frontend/src/hooks/useDownload.ts` (+288 -6) ➕ `frontend/src/hooks/useDownloadQueueData.ts` (+40 -0) ➕ `frontend/src/hooks/useDownloadQueueDialog.ts` (+16 -0) 📝 `frontend/src/types/api.ts` (+2 -0) </details> ### 📄 Description # Download Queue & Progress UI While contributing to this project, I saw the potential to improve the bottom-left Download Indicator—which previously only showed speed and total data. I enhanced it so that when you click the indicator, it now opens a Download Queue dialog that gives users comprehensive, interactive insight into all current downloads. ## Highlights - **Download Queue Dialog:** Live tracking for each track (`queued`, `downloading`, `completed`, `skipped`, `failed` with error messages), plus session statistics (counts, MB, speed, time) in a spacious, readable layout. - **Download Indicator:** Visible during any active downloads; auto-hides when finished; opens the queue dialog on click. - **Batch Pre-Queueing:** Batch tracks are visible in the queue before downloads start, making every status transition clear. - **Smart Error Handling:** Marks tracks as failed only after all fallback services are tried (Tidal, Deezer, etc.), with robust exception handling. - **Corrupted File Protection:** FLAC/ISRC metadata validation automatically cleans up incomplete files and avoids false “file exists” errors. - **Clear History:** Lets users remove finished items from the queue at any time, even while downloads continue. - **Auto-Cancel:** Automatically cancels remaining queued tracks if downloads are stopped or completed. - **New Package Added:** Integrated [`@radix-ui/react-scroll-area`](https://www.npmjs.com/package/@radix-ui/react-scroll-area) for a modern, customizable scrollbar in the Download Queue dialog. ## Technical Changes - **Go backend:** Thread-safe queue logic, multi-service fallback, session stats, and queued item cancellation. - **React/TypeScript frontend:** Uses `@radix-ui/react-scroll-area` for scrolling, adds new dialog and indicator components, handles batches and errors gracefully. ## Main Files - `frontend/src/components/DownloadQueue.tsx`, `DownloadProgressToast.tsx`, related hooks - Backend: `progress.go`, `metadata.go`, `app.go` - Integration: `App.tsx`, `useDownload.ts`, API/type updates --- **Result:** These improvements give users full visibility, clearer error reporting, and much better control for both single and batch downloads. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>