feat(frontend): live-refresh song list during S3 sync so newly matched tracks show play button immediately

- BackgroundJobProgress exposes onTickWhileS3Sync callback
- App wires callback to usePaginatedSongs.refresh() to pull fresh song data while sync runs
This commit is contained in:
Geert Rademakes 2025-08-07 23:47:58 +02:00
parent d231073fe0
commit 482460a8b7
2 changed files with 18 additions and 3 deletions

View File

@ -128,7 +128,8 @@ const RekordboxReader: React.FC = () => {
totalDuration,
loadNextPage,
searchSongs,
searchQuery
searchQuery,
refresh
} = usePaginatedSongs({ pageSize: 100, playlistName: currentPlaylist });
// Export library to XML
@ -660,7 +661,12 @@ const RekordboxReader: React.FC = () => {
/>
{/* Background Job Progress */}
<BackgroundJobProgress />
<BackgroundJobProgress
onTickWhileS3Sync={() => {
// Light refresh to pick up newly set hasS3File flags promptly
refresh();
}}
/>
</Box>
);
};

View File

@ -45,12 +45,15 @@ interface BackgroundJobProgressProps {
jobId?: string;
onJobComplete?: (result: any) => void;
onJobError?: (error: string) => void;
// Called on each polling tick while an S3 sync job is running
onTickWhileS3Sync?: () => void;
}
export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
jobId,
onJobComplete,
onJobError,
onTickWhileS3Sync,
}) => {
const [jobs, setJobs] = useState<JobProgress[]>([]);
const [loading, setLoading] = useState(false);
@ -100,7 +103,8 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
intervalRef.current = setInterval(() => {
// Update all active jobs
const activeJobIds = jobs.filter(job => job.status === 'running').map(job => job.jobId);
const activeJobs = jobs.filter(job => job.status === 'running');
const activeJobIds = activeJobs.map(job => job.jobId);
activeJobIds.forEach(jobId => {
updateJobProgress(jobId);
});
@ -109,6 +113,11 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
if (jobId) {
updateJobProgress(jobId);
}
// Notify consumer while an S3 sync is running (to refresh song list, etc.)
if (onTickWhileS3Sync && activeJobs.some(j => j.type === 's3-sync')) {
onTickWhileS3Sync();
}
}, 2000); // Poll every 2 seconds for less frequent updates
};