Adding back the woodpecker

.woodpecker.yml

@@ -3,11 +3,12 @@ steps:
     image: docker:latest
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
+      - /home/pi/music:app/music
     commands:
       - docker build -t portfolio .
       - docker stop portfolio || true
       - docker rm portfolio || true
-      - docker run -d -p 8080:8080 --name portfolio portfolio
+      - docker run -d -p 8080:8080 -v /home/pi/music:/app/music --name portfolio portfolio
     when:
       event: push
       branch: main

src/app/music/page.tsx

@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import {
   Container, Typography, List, ListItem, ListItemText, Box, Button, Input,
   ListItemButton,
-  ListItemIcon,
-  CardMedia
+  ListItemIcon
 } from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
+import AudiotrackIcon from '@mui/icons-material/Audiotrack';
 
 export default function Home() {
   const [tracks, setTracks] = useState<string[]>([]);
@@ -50,24 +50,11 @@ export default function Home() {
       <Typography variant="body1" gutterBottom textAlign="center">
         The grizzly made some tunes while he was bored grazing the blueberry patches in the high dessert.
       </Typography>
-      {currentTrack && (
-        <Box textAlign="center" mt={3}>
-          <AudioPlayer title={`${currentTrack.split('.')[0]}`} src={`/app/music/${encodeURIComponent(currentTrack)}`} />
-        </Box>
-      )}
-      <List>
-        {tracks.map((track, idx) => (
-          <ListItem key={idx} onClick={() => setCurrentTrack(track)} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                <CardMedia component={"img"} image={`/api/music/${encodeURIComponent(track)}/cover`} alt='Album cover' />
-              </ListItemIcon>
-              <ListItemText primary={track.split('.')[0]} />
-            </ListItemButton>
 
-          </ListItem>
-        ))}
-      </List>
+      <Box textAlign="center" mt={3}>
+        <AudioPlayer title={`${currentTrack?.split('.')[0]}`} src={currentTrack ? `/api/music/${encodeURIComponent(currentTrack)}` : ''} />
+      </Box>
+
       <Box textAlign="center" mb={3}>
         <label htmlFor="upload">
           <Input
@@ -77,11 +64,24 @@ export default function Home() {
             inputProps={{ accept: '.mp3, .m4a, audio/mpeg, audio/mp4, audio/x-m4a' }}
             onChange={handleUpload}
           />
-          <Button variant="contained" component="span" startIcon={<UploadIcon />} disabled={uploading}>
+          <Button variant="contained" color='error' component="span" startIcon={<UploadIcon />} disabled={uploading}>
             {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>
+
     </Container>
   );
 }