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