Make music cover show up

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

@@ -5,7 +5,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ trac
   const { track } = await params;
   try {
     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 picture = metadata.common.picture?.[0];
     if (!picture) {

src/app/music/page.tsx

@@ -1,9 +1,11 @@
 'use client';
 import { useEffect, useState } from 'react';
 import {
-  Container, Typography, List, ListItem, ListItemText, Box, Button, Input,
+  Typography, List, ListItem, ListItemText, Button, Input,
   ListItemButton,
-  ListItemIcon
+  ListItemIcon,
+  Grid,
+  useTheme
 } from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
@@ -13,6 +15,7 @@ export default function Home() {
   const [tracks, setTracks] = useState<string[]>([]);
   const [currentTrack, setCurrentTrack] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
+  const theme = useTheme();
 
 
   useEffect(() => {
@@ -43,19 +46,21 @@ export default function Home() {
   };
 
   return (
-    <Container maxWidth="md" sx={{ paddingTop: 4 }}>
+    <Grid container sx={{ paddingTop: 4 }} spacing={2}>
+      <Grid size={12}>
         <Typography variant="h4" gutterBottom textAlign="center">
           Music
         </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.
         </Typography>
-
-      <Box textAlign="center" mt={3}>
-        <AudioPlayer title={`${currentTrack?.split('.')[0]}`} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} />
-      </Box>
-
-      <Box textAlign="center" mb={3}>
+      </Grid >
+      <Grid size={12} textAlign="center">
+        <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">
           <Input
             id="upload"
@@ -68,10 +73,11 @@ export default function Home() {
             {uploading ? 'Uploading...' : 'Upload'}
           </Button>
         </label>
-      </Box>
+      </Grid>
+      <Grid size={12}>
         <List>
           {tracks.map((track, idx) => (
-          <ListItem key={idx} onClick={() => setCurrentTrack(track)} disablePadding>
+            <ListItem key={idx} onClick={() => setCurrentTrack(track)} sx={{ bgcolor: theme.palette.background.paper }}>
               <ListItemButton>
                 <ListItemIcon>
                   <AudiotrackIcon color='primary' />
@@ -81,7 +87,8 @@ export default function Home() {
             </ListItem>
           ))}
         </List>
+      </Grid>
 
-    </Container>
+    </Grid>
   );
 }

src/components/AudioPlayer/AudioPlayer.tsx

@@ -3,6 +3,7 @@
 import { Box, Typography, IconButton, Slider, useTheme, CardMedia } from '@mui/material';
 import { PlayArrow, Pause, VolumeUp } from '@mui/icons-material';
 import { useEffect, useRef, useState } from 'react';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 
 export default function AudioPlayer({ src, title }: { src: string; title: string }) {
   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 }} />
+        ) : (
+          <LibraryMusicIcon sx={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 2, mb: 2 }} />
         )
       }
       <Typography variant="subtitle1" gutterBottom>{title}</Typography>