42 Commits

Author SHA1 Message Date
Geert Rademakes
0c8e00389b fix(playlists): modify full playlist tree when adding tracks (avoid structure-only overwrite); then reload structure for counters 2025-08-08 13:29:58 +02:00
Geert Rademakes
8a9f51a0c6 fix(dnd): align drop flow with modal add; use same backend save and show success toast; improve payload parsing for drop targets 2025-08-08 13:17:15 +02:00
Geert Rademakes
c7dd2e6d33 fix(dnd): ensure drop detects payload; set text/plain fallback; refresh playlist structure after add 2025-08-08 13:11:40 +02:00
Geert Rademakes
6917c22b94 feat(dnd): drag songs (with multiselect) into sidebar playlists; drop handler adds to playlist with duplicate confirm (allow or skip) 2025-08-08 13:00:40 +02:00
Geert Rademakes
7618c40a77 fix(frontend): center loading spinner on large screens by using full-viewport container and removing #root max-width constraint 2025-08-08 09:49:02 +02:00
Geert Rademakes
83b4682b0e chore(frontend): remove live song-list refresh during S3 sync per request; refresh now only on manual actions/page reload 2025-08-08 08:47:39 +02:00
Geert Rademakes
482460a8b7 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
2025-08-07 23:47:58 +02:00
Geert Rademakes
b436d1dabc feat: implement immediate song document updates for perfect sync resilience
- Remove end-of-job cleanup phases from S3 sync and song matching jobs
- Update Song documents immediately after each successful match in both Phase 1 and Phase 2
- Ensure hasS3File flag is set to true immediately for each matched song
- Enable play buttons to appear instantly as songs are processed
- Make system perfectly resilient to interruptions - no orphaned files
- Allow seamless resume capability for long-running sync jobs
- Provide real-time availability of matched songs without waiting for job completion
- Maintain system consistency regardless of when sync gets interrupted
2025-08-07 23:36:30 +02:00
Geert Rademakes
96c43dbcff feat: implement infinite scroll with 100 songs per page
- Update pagination from 50 to 100 songs per page for better UX
- Frontend: Update usePaginatedSongs hook default pageSize to 100
- Frontend: Update API service default limits to 100
- Frontend: Update App.tsx pageSize configuration to 100
- Backend: Update songs routes default limit to 100 for both main and playlist endpoints
- Maintain existing infinite scroll functionality with larger batch sizes
- Improve performance by reducing number of API calls needed
- Verified API endpoints return correct pagination info and song counts
2025-08-07 20:23:05 +02:00
Geert Rademakes
9eb4587537 feat: Integrate all Music Storage functionality into unified Configuration page
- Move Upload Music, Music Library, and Song Matching tabs to Configuration page
- Add all music storage state management and functionality to Configuration component
- Remove standalone Music Storage page and route
- Update header to use single Configuration button instead of separate Music Storage button
- Create comprehensive 5-tab Configuration page:
  1. Library Management (XML import, database reset)
  2. Upload Music (drag & drop file uploads)
  3. Music Library (file management and S3 sync)
  4. Song Matching (link files to Rekordbox songs)
  5. S3 Configuration (external bucket setup)
- Clean up unused imports and routes
- Provide single, comprehensive configuration experience

All configuration and music storage functionality is now centralized
in one unified page with a clean tabbed interface.
2025-08-06 15:57:35 +02:00
Geert Rademakes
7cc890557d fix: Fix S3Configuration import error and integrate as Music Storage tab
- Fix FiTestTube import error by replacing with FiZap (which exists in react-icons)
- Integrate S3 Configuration as a tab in Music Storage page
- Remove standalone S3 Configuration route and header button
- Clean up unused imports and routes
- Improve organization by grouping S3 functionality with Music Storage

The S3 Configuration is now accessible as a tab within the Music Storage page,
and the import error has been resolved.
2025-08-06 15:40:18 +02:00
Geert Rademakes
01c017a5e6 fix: Implement global music player context to prevent duplicate players
- Create MusicPlayerContext for global music player state management
- Replace local music player state with global context in App.tsx
- Remove duplicate PersistentMusicPlayer from Music Storage page
- Update Music Storage to use global context instead of local state
- Wrap entire app with MusicPlayerProvider for consistent state
- Ensure single music player instance across all pages
- Fix duplicate player issue when playing songs from different pages

Now there's only one music player that works consistently across
the entire application, preventing duplicate players and conflicts.
2025-08-06 15:37:16 +02:00
Geert Rademakes
15cad58c80 feat: Add S3 Configuration page for external bucket setup
- Create comprehensive S3 Configuration page with form-based setup
- Add backend API endpoints for S3 configuration management
- Support loading, saving, and testing S3 connections
- Include configuration validation and error handling
- Add detailed help section for AWS S3, MinIO, and other S3-compatible services
- Create secure configuration storage with sensitive data masking
- Add S3 Configuration button to main header for easy access
- Support testing bucket connectivity and permissions
- Include SSL/TLS configuration option
- Provide real-time connection testing with detailed feedback

Users can now easily configure and test external S3 bucket connections
from the frontend interface with comprehensive validation and help.
2025-08-06 15:32:50 +02:00
Geert Rademakes
e5c679a1ee feat: Add persistent music player for main view
- Create PersistentMusicPlayer component with full audio controls
- Add fixed position player at bottom of screen when song is playing
- Include play/pause, skip forward/backward, volume control, and progress bar
- Auto-play songs when selected from main view
- Show song info (title, artist) and 🎵 badge
- Add close button to dismiss the player
- Simplify handlePlaySong to just set current song
- Player appears when clicking play buttons on songs with S3 files

Now users can see and control music playback from the main browser view
with a persistent, professional music player interface.
2025-08-06 15:14:35 +02:00
Geert Rademakes
47276728df feat: Add S3 playback to main view and improve Music Library layout
- Add play functionality to main browser view for songs with S3 files
- Add onPlaySong prop to PaginatedSongList and SongItem components
- Show 🎵 badge and play buttons for songs with S3 files in main view
- Change Music Library from tile view to list view for better organization
- Improve Music Library layout with better spacing and information display
- Add proper audio playback handling in main App.tsx
- Show linked status badges in Music Library list view

Users can now play S3-linked songs directly from the main browser view,
and the Music Library has a cleaner list layout for easier browsing.
2025-08-06 15:09:38 +02:00
Geert Rademakes
72dfa951b4 feat: Add Music Storage page to frontend routing
- Add MusicStorage page import and route to App.tsx
- Add '🎵 Music Storage' button in the header for easy access
- Route: /music-storage for the Music Storage page
- All Music Storage components (MusicUpload, MusicPlayer, SongMatching) are already implemented
- Users can now access the S3 music storage functionality from the main interface

The Music Storage page provides:
- File upload with drag & drop
- Music library management
- Song matching with Rekordbox library
- Browser-based music player
2025-08-06 14:53:21 +02:00
Geert Rademakes
7286140bd5 feat: Move export functionality to backend for complete database export - Create backend XML service for generating Rekordbox-compatible XML - Add /api/songs/export endpoint that exports entire database - Frontend now calls backend API instead of local function - Exports ALL songs and playlists from database, not just loaded ones - Proper file download with correct headers and filename 2025-08-06 11:26:51 +02:00
Geert Rademakes
1cba4e0eeb feat: Add export library button to front page - Add download icon button next to settings cog - Export current library to XML format compatible with Rekordbox - Auto-generate filename with current date - Disable button when no songs are available - Provides easy way to backup and share library data 2025-08-06 11:24:05 +02:00
Geert Rademakes
966240b0d1 perf: Streamline playlist switching flow for faster, cleaner transitions - Clear all state immediately (songs, totalSongs, totalDuration) on playlist switch - Combine switching and loading states into single spinner with dynamic text - Remove duplicate switching indicators to prevent UI flicker - Reset switching state when loading starts for immediate transition - Eliminates confusing flow: switching → old data → 0 of X → loading → new data - Now shows: switching → loading → new data (much cleaner) 2025-08-06 11:18:09 +02:00
Geert Rademakes
491235af29 feat: Add immediate visual feedback for playlist switching - Clear song list immediately when switching playlists for instant feedback - Add 'Switching playlist...' loading indicator with spinner - Set switching state immediately on playlist selection - Reset switching state when new songs are loaded - Makes playlist switching feel much more responsive and clear 2025-08-06 11:12:58 +02:00
Geert Rademakes
770c606561 perf: Aggressive optimization for playlist switching to make it snappy - Add React.startTransition to batch state updates in usePaginatedSongs - Optimize playlist selection handler with immediate navigation - Memoize click handlers in PlaylistItem to prevent recreation - Use replace navigation to avoid history stack delays - Should dramatically reduce 600+ms playlist switching delay 2025-08-06 10:59:16 +02:00
Geert Rademakes
e2ae3bd6d8 cleanup: Remove debugging console logs - Remove timestamp logging from playlist selection and change detection - Remove loadPage call logging - Clean up temporary debugging code 2025-08-06 10:54:30 +02:00
Geert Rademakes
586b3634b5 debug: Add timestamps to console logs for better timing analysis - Add ISO timestamps to playlist selection and change detection logs - Add timestamp to loadPage function calls - Helps identify exact timing of playlist switching delays 2025-08-06 10:51:08 +02:00
Geert Rademakes
57c1047357 debug: Add console logs to investigate playlist switching delay - Add logging to track playlist selection and change detection - Remove isInitialLoad condition that might block playlist changes - Optimize initial load to prevent conflicts with playlist switching - Temporary debugging to identify timing issues 2025-08-06 10:49:31 +02:00
Geert Rademakes
535dc16d2c fix: Prevent welcome modal from showing on initial page load - Change welcome modal to not open by default - Only show welcome modal after confirming database is empty - Move database initialization check after useDisclosure hook - Fixes premature welcome modal display on app startup 2025-08-06 10:35:17 +02:00
Geert Rademakes
743ed6a54e fix: Prevent welcome modal from showing during playlist switches - Add isDatabaseInitialized state to track actual database status - Check for songs and playlists to determine if database is initialized - Only show welcome modal when database is truly empty - Fixes issue where modal appeared when switching playlists 2025-08-06 10:33:16 +02:00
Geert Rademakes
02ae12294c feat: Show total playlist duration instead of loaded songs duration - Add totalDuration calculation in backend playlist endpoint - Update frontend to display total playlist duration - Duration now shows entire playlist length, not just loaded songs - Prevents duration from changing when scrolling through songs 2025-08-06 10:30:02 +02:00
Geert Rademakes
54bffbc25d feat: Make playlist switching less intrusive - Remove full loading screen for playlist switches - Only show full loading for initial XML parsing - Use subtle spinner in song list area for playlist loading - Improve UX by keeping interface responsive during navigation 2025-08-06 10:24:04 +02:00
Geert Rademakes
7fb8614130 feat: Major performance optimizations - Add React.memo, useMemo, and useCallback to prevent unnecessary re-renders - Implement request cancellation with AbortController to prevent memory leaks - Add debounced search to reduce API calls - Optimize song selection and playlist switching performance - Fix browser crashes and memory leaks - Add proper cleanup functions 2025-08-06 10:03:26 +02:00
Geert Rademakes
f3d067ab16 UX fix 2025-04-25 10:46:39 +02:00
Geert Rademakes
40c75d479a Nice onboarding flow & reset database function 2025-04-25 10:42:45 +02:00
Geert Rademakes
db4408b953 Added config page! 2025-04-25 10:29:24 +02:00
Geert Rademakes
5c1cf64c4c Routing fixes 2025-04-25 10:01:45 +02:00
Geert Rademakes
9e32aa0a99 Folders are working aswell!! 2025-04-24 23:48:23 +02:00
Geert Rademakes
3a13c24301 Folders working! 2025-04-24 23:45:14 +02:00
Geert Rademakes
f82cb84397 Draggable playlist sidebar 2025-04-24 23:11:46 +02:00
Geert Rademakes
83fe6994b8 Better UI! 2025-04-24 23:11:07 +02:00
Geert Rademakes
7e08b0e567 Delete playlist added 2025-04-24 22:51:21 +02:00
Geert Rademakes
ea2942edc1 url based navigation 2025-04-24 22:11:51 +02:00
Geert Rademakes
35da4f83ce With amazing details screen on the sidebar now! 2025-04-24 19:55:10 +02:00
Geert Rademakes
5c62f9d147 UI improvements! 2025-04-24 16:08:06 +02:00
Geert Rademakes
901c78990b frontend AND backend bro!! 2025-04-24 15:28:22 +02:00