Mount permanent vol out of docker

.woodpecker.yml

@@ -1,13 +1,14 @@
-steps: 
+steps:
   deploy:
     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 -v /home/pi/music:/app/music -d -p 8080:8080 --name portfolio portfolio
     when:
       event: push
       branch: main

src/app/music/page.tsx

@@ -1,7 +1,10 @@
 'use client';
 import { useEffect, useState } from 'react';
 import {
-  Container, Typography, List, ListItem, ListItemText, Box, Button, Input
+  Container, Typography, List, ListItem, ListItemText, Box, Button, Input,
+  ListItemButton,
+  ListItemIcon,
+  CardMedia
 } from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
@@ -42,8 +45,29 @@ export default function Home() {
   return (
     <Container maxWidth="md" sx={{ paddingTop: 4 }}>
       <Typography variant="h4" gutterBottom textAlign="center">
-        Music Player
+        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>
+      {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" mb={3}>
         <label htmlFor="upload">
           <Input
@@ -54,22 +78,10 @@ export default function Home() {
             onChange={handleUpload}
           />
           <Button variant="contained" component="span" startIcon={<UploadIcon />} disabled={uploading}>
-            {uploading ? 'Uploading...' : 'Upload MP3'}
+            {uploading ? 'Uploading...' : 'Upload'}
           </Button>
         </label>
       </Box>
-      <List>
-        {tracks.map((track, idx) => (
-          <ListItem component={'button'} key={idx} onClick={() => setCurrentTrack(track)}>
-            <ListItemText primary={track} />
-          </ListItem>
-        ))}
-      </List>
-      {currentTrack && (
-        <Box textAlign="center" mt={3}>
-          <AudioPlayer title={`${currentTrack}`} src={`/api/music/${encodeURIComponent(currentTrack)}`} />
-        </Box>
-      )}
     </Container>
   );
 }