17 Commits

Author SHA1 Message Date
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
d16217eac1 feat: Create unified Configuration page with tabs
- Combine Library Management and S3 Configuration into single page
- Add tabbed interface with icons for better organization
- Move S3 Configuration from Music Storage to main Configuration page
- Use FiDatabase and FiSettings icons for visual clarity
- Increase max width to accommodate both configurations
- Remove S3 Configuration tab from Music Storage page
- Create cleaner, more organized configuration experience

All configuration options are now centralized in one place with
a clean tabbed interface for better user experience.
2025-08-06 15:51:57 +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
1f235d8fa8 feat: Remove Player tab and use persistent player across app
- Remove Player tab from Music Storage page
- Update play buttons to use persistent player instead of embedded player
- Add persistent player to Music Storage page for consistent experience
- Convert MusicFile objects to Song objects for persistent player compatibility
- Ensure music playback works seamlessly across both main view and Music Storage
- Create unified music playback experience throughout the application

Now users have a consistent music player experience across all pages
with the floating persistent player at the bottom of the screen.
2025-08-06 15:28:20 +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
1bb1f7d0d5 fix: Resolve scrolling and audio playback issues
- Fix scrolling on Music Storage page by adding proper overflow handling
- Add height constraints and flex layout for better tab panel scrolling
- Update streaming endpoint to use presigned URLs instead of direct URLs
- Improve audio error handling with better error messages
- Update MusicPlayer component with dark theme styling
- Add loading indicators and error states for better UX
- Fix audio playback for files synced from S3 subdirectories

The Music Storage page now has proper scrolling behavior and
audio playback should work correctly for all music files.
2025-08-06 15:05:33 +02:00
Geert Rademakes
3317a69004 feat: Update Music Storage page to use dark theme
- Update MusicStorage page with dark theme colors (gray.900, gray.800, gray.700)
- Update MusicUpload component with dark theme styling
- Update SongMatching component with dark theme colors
- Match the color scheme of the main browser page
- Use consistent text colors (white, gray.100, gray.400, gray.500)
- Update cards, buttons, and alerts with dark backgrounds
- Improve hover states and visual consistency

The Music Storage page now has a consistent dark theme that matches
the main Rekordbox Reader interface.
2025-08-06 15:01:40 +02:00
Geert Rademakes
7f186c6337 feat: Add recursive S3 file discovery and sync functionality
- Add listAllFiles() method to S3Service to recursively list all files in S3 bucket
- Add getFileContent() method to download file content for metadata extraction
- Add /api/music/sync-s3 endpoint to sync S3 files with database
- Add 'Sync S3' button to Music Storage page
- Support for files in subdirectories like /Disco/
- Automatic metadata extraction for synced files
- Recursive file discovery finds all files regardless of directory structure

This allows the system to find and sync music files that were uploaded
directly to S3/MinIO, including files in subdirectories, and make them
available for song matching and browser playback.
2025-08-06 14:57:46 +02:00
Geert Rademakes
4a7d9c178a feat: Add intelligent song matching system
- Add SongMatchingService with multi-criteria matching algorithms
- Add matching API routes for auto-linking and manual matching
- Add SongMatching component with statistics and suggestion modal
- Update SongList to show music file availability and play buttons
- Update MusicStorage page with song matching tab
- Enhance Song interface with music file integration
- Add comprehensive matching statistics and reporting

Features:
- Filename, title, artist, album, and duration matching
- Fuzzy matching with Levenshtein distance
- Confidence scoring and match type classification
- Auto-linking with configurable thresholds
- Manual matching with detailed suggestions
- Visual indicators for music file availability
- Integration with existing playlist functionality

Matching algorithms prioritize:
1. Exact filename matches
2. Artist-Title pattern matching
3. Metadata-based fuzzy matching
4. Duration-based validation

The system provides a complete workflow from upload to playback,
automatically linking music files to Rekordbox songs with manual
override capabilities for unmatched files.
2025-08-06 13:55:18 +02:00
Geert Rademakes
7000e0c046 feat: Implement S3 music storage and playback functionality
- Add S3Service for file operations with MinIO/AWS S3 support
- Add AudioMetadataService for metadata extraction
- Add MusicFile model with MongoDB integration
- Add music API routes for upload, streaming, and management
- Add MusicUpload component with drag-and-drop functionality
- Add MusicPlayer component with custom audio controls
- Add MusicStorage page with complete music management interface
- Update Docker Compose with MinIO service
- Add comprehensive documentation and testing utilities

Features:
- S3-compatible storage (MinIO for local, AWS S3 for production)
- Audio file upload with metadata extraction
- Browser-based music streaming and playback
- File management (upload, delete, search, filter)
- Integration with existing Rekordbox functionality
- Security features (file validation, presigned URLs)
- Performance optimizations (indexing, pagination)

Supported formats: MP3, WAV, FLAC, AAC, OGG, WMA, Opus
2025-08-06 13:44:17 +02:00
Geert Rademakes
060d339e78 feat: Navigate to homepage after successful database reset - Add navigation to '/' after database reset completes - Shows welcome modal and provides fresh start experience - Improves UX flow after clearing library data 2025-08-06 11:21:19 +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
506569b038 UI fixes 2025-04-25 11:30:47 +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