apatil/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make music cover show up
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
apatil 2025-05-07 22:34:27 +01:00
parent df1d5a4658
commit d9f84e45da
3 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/music/[track]/cover/route.ts
View File

@ -5,7 +5,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ trac
const { track } = await params; const { track } = await params;
try { try {
const trackName = decodeURIComponent(track); const trackName = decodeURIComponent(track);
const filePath = resolve(process.cwd(), 'public/music', trackName); const filePath = resolve(process.cwd(), '/music', trackName);
const metadata = await mm.parseFile(filePath); const metadata = await mm.parseFile(filePath);
const picture = metadata.common.picture?.[0]; const picture = metadata.common.picture?.[0];
if (!picture) { if (!picture) {

65
src/app/music/page.tsx
View File

@ -1,9 +1,11 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { import {
Container, Typography, List, ListItem, ListItemText, Box, Button, Input, Typography, List, ListItem, ListItemText, Button, Input,
ListItemButton, ListItemButton,
ListItemIcon ListItemIcon,
Grid,
useTheme
} from '@mui/material'; } from '@mui/material';
import UploadIcon from '@mui/icons-material/Upload'; import UploadIcon from '@mui/icons-material/Upload';
import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'; import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
@ -13,6 +15,7 @@ export default function Home() {
const [tracks, setTracks] = useState<string[]>([]); const [tracks, setTracks] = useState<string[]>([]);
const [currentTrack, setCurrentTrack] = useState<string | null>(null); const [currentTrack, setCurrentTrack] = useState<string | null>(null);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const theme = useTheme();
useEffect(() => { useEffect(() => {
@ -43,19 +46,21 @@ export default function Home() {
}; };
return ( return (
<Container maxWidth="md" sx={{ paddingTop: 4 }}> <Grid container sx={{ paddingTop: 4 }} spacing={2}>
<Typography variant="h4" gutterBottom textAlign="center"> <Grid size={12}>
Music <Typography variant="h4" gutterBottom textAlign="center">
</Typography> Music
<Typography variant="body1" gutterBottom textAlign="center"> </Typography>
The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert. </Grid>
</Typography> <Grid size={12}>
<Typography variant="body1" gutterBottom textAlign="center" mx={10}>
<Box textAlign="center" mt={3}> The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert.
<AudioPlayer title={`${currentTrack?.split('.')[0]}`} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} /> </Typography>
</Box> </Grid >
<Grid size={12} textAlign="center">
<Box textAlign="center" mb={3}> <AudioPlayer title={currentTrack?.split('.')[0] ?? 'click on any song from list below'} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} />
</Grid>
<Grid size={12} textAlign="center" >
<label htmlFor="upload"> <label htmlFor="upload">
<Input <Input
id="upload" id="upload"
@ -68,20 +73,22 @@ export default function Home() {
{uploading ? 'Uploading...' : 'Upload'} {uploading ? 'Uploading...' : 'Upload'}
</Button> </Button>
</label> </label>
</Box> </Grid>
<List> <Grid size={12}>
{tracks.map((track, idx) => ( <List>
<ListItem key={idx} onClick={() => setCurrentTrack(track)} disablePadding> {tracks.map((track, idx) => (
<ListItemButton> <ListItem key={idx} onClick={() => setCurrentTrack(track)} sx={{ bgcolor: theme.palette.background.paper }}>
<ListItemIcon> <ListItemButton>
<AudiotrackIcon color='primary' /> <ListItemIcon>
</ListItemIcon> <AudiotrackIcon color='primary' />
<ListItemText primary={track.split('.')[0]} /> </ListItemIcon>
</ListItemButton> <ListItemText primary={track.split('.')[0]} />
</ListItem> </ListItemButton>
))} </ListItem>
</List> ))}
</List>
</Grid>
</Container> </Grid>
); );
} }

5
src/components/AudioPlayer/AudioPlayer.tsx
View File

@ -3,6 +3,7 @@
import { Box, Typography, IconButton, Slider, useTheme, CardMedia } from '@mui/material'; import { Box, Typography, IconButton, Slider, useTheme, CardMedia } from '@mui/material';
import { PlayArrow, Pause, VolumeUp } from '@mui/icons-material'; import { PlayArrow, Pause, VolumeUp } from '@mui/icons-material';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
export default function AudioPlayer({ src, title }: { src: string; title: string }) { export default function AudioPlayer({ src, title }: { src: string; title: string }) {
const audioRef = useRef<HTMLAudioElement | null>(null); const audioRef = useRef<HTMLAudioElement | null>(null);
@ -52,8 +53,10 @@ export default function AudioPlayer({ src, title }: { src: string; title: string
}} }}
> >
{ {
coverUrl && ( coverUrl ? (
<CardMedia component={"img"} image={`${coverUrl}`} alt='Album cover' sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} /> <CardMedia component={"img"} image={`${coverUrl}`} alt='Album cover' sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
) : (
<LibraryMusicIcon sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
) )
} }
<Typography variant="subtitle1" gutterBottom>{title}</Typography> <Typography variant="subtitle1" gutterBottom>{title}</Typography>