From d9f84e45da68c1cb04dbf243ef29556a020ac2f1 Mon Sep 17 00:00:00 2001
From: apatil <akshayjpatil11@gmail.com>
Date: Wed, 7 May 2025 22:34:27 +0100
Subject: [PATCH] Make music cover show up

---
 src/app/api/music/[track]/cover/route.ts   |  2 +-
 src/app/music/page.tsx                     | 65 ++++++++++++----------
 src/components/AudioPlayer/AudioPlayer.tsx |  5 +-
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/app/api/music/[track]/cover/route.ts b/src/app/api/music/[track]/cover/route.ts
index c923119..6e6139c 100644
--- a/src/app/api/music/[track]/cover/route.ts
+++ b/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) {
diff --git a/src/app/music/page.tsx b/src/app/music/page.tsx
index 9a341b6..d47c7c6 100644
--- a/src/app/music/page.tsx
+++ b/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 }}>
-      <Typography variant="h4" gutterBottom textAlign="center">
-        Music
-      </Typography>
-      <Typography variant="body1" gutterBottom textAlign="center">
-        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 container sx={{ paddingTop: 4 }} spacing={2}>
+      <Grid size={12}>
+        <Typography variant="h4" gutterBottom textAlign="center">
+          Music
+        </Typography>
+      </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>
+      </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,20 +73,22 @@ export default function Home() {
             {uploading ? 'Uploading...' : 'Upload'}
           </Button>
         </label>
-      </Box>
-      <List>
-        {tracks.map((track, idx) => (
-          <ListItem key={idx} onClick={() => setCurrentTrack(track)} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                <AudiotrackIcon color='primary' />
-              </ListItemIcon>
-              <ListItemText primary={track.split('.')[0]} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
+      </Grid>
+      <Grid size={12}>
+        <List>
+          {tracks.map((track, idx) => (
+            <ListItem key={idx} onClick={() => setCurrentTrack(track)} sx={{ bgcolor: theme.palette.background.paper }}>
+              <ListItemButton>
+                <ListItemIcon>
+                  <AudiotrackIcon color='primary' />
+                </ListItemIcon>
+                <ListItemText primary={track.split('.')[0]} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Grid>
 
-    </Container>
+    </Grid>
   );
 }
\ No newline at end of file
diff --git a/src/components/AudioPlayer/AudioPlayer.tsx b/src/components/AudioPlayer/AudioPlayer.tsx
index 56fffd1..94b0b6f 100644
--- a/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/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>