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) {

33
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}>
<Grid size={12}>
<Typography variant="h4" gutterBottom textAlign="center"> <Typography variant="h4" gutterBottom textAlign="center">
Music Music
</Typography> </Typography>
<Typography variant="body1" gutterBottom textAlign="center"> </Grid>
<Grid size={12}>
<Typography variant="body1" gutterBottom textAlign="center" mx={10}>
The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert. The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert.
</Typography> </Typography>
</Grid >
<Box textAlign="center" mt={3}> <Grid size={12} textAlign="center">
<AudioPlayer title={`${currentTrack?.split('.')[0]}`} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} /> <AudioPlayer title={currentTrack?.split('.')[0] ?? 'click on any song from list below'} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} />
</Box> </Grid>
<Grid size={12} textAlign="center" >
<Box textAlign="center" mb={3}>
<label htmlFor="upload"> <label htmlFor="upload">
<Input <Input
id="upload" id="upload"
@ -68,10 +73,11 @@ export default function Home() {
{uploading ? 'Uploading...' : 'Upload'} {uploading ? 'Uploading...' : 'Upload'}
</Button> </Button>
</label> </label>
</Box> </Grid>
<Grid size={12}>
<List> <List>
{tracks.map((track, idx) => ( {tracks.map((track, idx) => (
<ListItem key={idx} onClick={() => setCurrentTrack(track)} disablePadding> <ListItem key={idx} onClick={() => setCurrentTrack(track)} sx={{ bgcolor: theme.palette.background.paper }}>
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
<AudiotrackIcon color='primary' /> <AudiotrackIcon color='primary' />
@ -81,7 +87,8 @@ export default function Home() {
</ListItem> </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>