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
This commit is contained in:
parent
3fdd5d130f
commit
72dfa951b4
@ -6,6 +6,7 @@ import { PaginatedSongList } from "./components/PaginatedSongList";
|
||||
import { PlaylistManager } from "./components/PlaylistManager";
|
||||
import { SongDetails } from "./components/SongDetails";
|
||||
import { Configuration } from "./pages/Configuration";
|
||||
import { MusicStorage } from "./pages/MusicStorage";
|
||||
import { useXmlParser } from "./hooks/useXmlParser";
|
||||
import { usePaginatedSongs } from "./hooks/usePaginatedSongs";
|
||||
import { formatTotalDuration } from "./utils/formatters";
|
||||
@ -486,12 +487,24 @@ export default function RekordboxReader() {
|
||||
Rekordbox Reader
|
||||
</Heading>
|
||||
|
||||
{/* Music Storage Button */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="gray.300"
|
||||
_hover={{ color: "white", bg: "whiteAlpha.200" }}
|
||||
onClick={() => navigate('/music-storage')}
|
||||
ml="auto"
|
||||
mr={2}
|
||||
>
|
||||
🎵 Music Storage
|
||||
</Button>
|
||||
|
||||
{/* Export Library Button */}
|
||||
<IconButton
|
||||
icon={<DownloadIcon />}
|
||||
aria-label="Export Library"
|
||||
variant="ghost"
|
||||
ml="auto"
|
||||
mr={2}
|
||||
color="gray.300"
|
||||
_hover={{ color: "white", bg: "whiteAlpha.200" }}
|
||||
@ -514,6 +527,7 @@ export default function RekordboxReader() {
|
||||
<Box flex={1} overflow="hidden">
|
||||
<Routes>
|
||||
<Route path="/config" element={<Configuration />} />
|
||||
<Route path="/music-storage" element={<MusicStorage />} />
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user