From 29d43effe33778d41cd32ed5b35aa4f2d51a1fd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Fri, 21 Nov 2025 15:51:22 +0100
Subject: [PATCH] feat: Add cover art support and auto-migration

- Extract cover art from MP3s during upload
- Display cover art in game result screens (win/loss)
- Add coverImage field to Song model
- Add migration script to backfill covers for existing songs
- Configure Docker to run migration script on startup
---
 Dockerfile                 |  1 +
 app/admin/page.tsx         | 34 ++++++++++++++++++++
 app/api/songs/route.ts     | 30 +++++++++++++++++
 app/page.tsx               |  5 ++-
 components/Game.tsx        | 41 ++++++++++++++++++++++-
 docker-compose.example.yml |  4 +--
 prisma/schema.prisma       |  1 +
 scripts/migrate-covers.mjs | 66 ++++++++++++++++++++++++++++++++++++++
 8 files changed, 178 insertions(+), 4 deletions(-)
 create mode 100644 scripts/migrate-covers.mjs

diff --git a/Dockerfile b/Dockerfile
index 931c237..e08bb8b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -47,6 +47,7 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
+COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts
 
 # Create uploads directory and set permissions
 RUN mkdir -p public/uploads && chown nextjs:nodejs public/uploads
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index dac4b32..d0b5fca 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -35,6 +35,10 @@ export default function AdminPage() {
     const [currentPage, setCurrentPage] = useState(1);
     const itemsPerPage = 10;
 
+    // Audio state
+    const [playingSongId, setPlayingSongId] = useState<number | null>(null);
+    const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
+
     const handleLogin = async () => {
         const res = await fetch('/api/admin/login', {
             method: 'POST',
@@ -132,6 +136,29 @@ export default function AdminPage() {
         }
     };
 
+    const handlePlayPause = (song: Song) => {
+        if (playingSongId === song.id) {
+            // Pause current song
+            audioElement?.pause();
+            setPlayingSongId(null);
+        } else {
+            // Stop any currently playing song
+            audioElement?.pause();
+
+            // Play new song
+            const audio = new Audio(`/uploads/${song.filename}`);
+            audio.play();
+            setAudioElement(audio);
+            setPlayingSongId(song.id);
+
+            // Reset when song ends
+            audio.onended = () => {
+                setPlayingSongId(null);
+                setAudioElement(null);
+            };
+        }
+    };
+
     // Filter and sort songs
     const filteredSongs = songs.filter(song =>
         song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -297,6 +324,13 @@ export default function AdminPage() {
                                             <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                                    <button
+                                                        onClick={() => handlePlayPause(song)}
+                                                        style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
+                                                        title={playingSongId === song.id ? "Pause" : "Play"}
+                                                    >
+                                                        {playingSongId === song.id ? '⏸️' : '▶️'}
+                                                    </button>
                                                     <button
                                                         onClick={() => startEditing(song)}
                                                         style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
diff --git a/app/api/songs/route.ts b/app/api/songs/route.ts
index b29ae8f..0a9dad9 100644
--- a/app/api/songs/route.ts
+++ b/app/api/songs/route.ts
@@ -21,6 +21,7 @@ export async function GET() {
         artist: song.artist,
         filename: song.filename,
         createdAt: song.createdAt,
+        coverImage: song.coverImage,
         activations: song.puzzles.length,
     }));
 
@@ -62,11 +63,30 @@ export async function POST(request: Request) {
 
         await writeFile(path.join(uploadDir, filename), buffer);
 
+        // Handle cover image
+        let coverImage = null;
+        try {
+            const metadata = await parseBuffer(buffer, file.type);
+            const picture = metadata.common.picture?.[0];
+
+            if (picture) {
+                const extension = picture.format.split('/')[1] || 'jpg';
+                const coverFilename = `cover-${Date.now()}.${extension}`;
+                const coverPath = path.join(process.cwd(), 'public/uploads/covers', coverFilename);
+
+                await writeFile(coverPath, picture.data);
+                coverImage = coverFilename;
+            }
+        } catch (e) {
+            console.error('Failed to extract cover image:', e);
+        }
+
         const song = await prisma.song.create({
             data: {
                 title,
                 artist,
                 filename,
+                coverImage,
             },
         });
 
@@ -123,6 +143,16 @@ export async function DELETE(request: Request) {
             // Continue with DB deletion even if file deletion fails
         }
 
+        // Delete cover image if exists
+        if (song.coverImage) {
+            const coverPath = path.join(process.cwd(), 'public/uploads/covers', song.coverImage);
+            try {
+                await unlink(coverPath);
+            } catch (e) {
+                console.error('Failed to delete cover image:', e);
+            }
+        }
+
         // Delete from database (will cascade delete related puzzles)
         await prisma.song.delete({
             where: { id: Number(id) },
diff --git a/app/page.tsx b/app/page.tsx
index 8094762..aea074e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -40,7 +40,10 @@ async function getDailyPuzzle() {
     return {
       id: dailyPuzzle.id,
       audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
-      songId: dailyPuzzle.songId
+      songId: dailyPuzzle.songId,
+      title: dailyPuzzle.song.title,
+      artist: dailyPuzzle.song.artist,
+      coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
     };
   } catch (e) {
     console.error(e);
diff --git a/components/Game.tsx b/components/Game.tsx
index 7450bae..f355aea 100644
--- a/components/Game.tsx
+++ b/components/Game.tsx
@@ -11,6 +11,9 @@ interface GameProps {
         id: number;
         audioUrl: string;
         songId: number;
+        title: string;
+        artist: string;
+        coverImage: string | null;
     } | null;
 }
 
@@ -139,6 +142,24 @@ export default function Game({ dailyPuzzle }: GameProps) {
                     <div className="message-box success">
                         <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>You won!</h2>
                         <p>Come back tomorrow for a new song.</p>
+
+                        {/* Song Details */}
+                        <div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                            {dailyPuzzle.coverImage && (
+                                <img
+                                    src={dailyPuzzle.coverImage}
+                                    alt="Album Cover"
+                                    style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '0.5rem', marginBottom: '1rem', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
+                                />
+                            )}
+                            <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.title}</h3>
+                            <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 1rem 0' }}>{dailyPuzzle.artist}</p>
+                            <audio controls style={{ width: '100%' }}>
+                                <source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
+                                Your browser does not support the audio element.
+                            </audio>
+                        </div>
+
                         {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
@@ -149,7 +170,25 @@ export default function Game({ dailyPuzzle }: GameProps) {
                 {hasLost && (
                     <div className="message-box failure">
                         <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>Game Over</h2>
-                        <p>The song was hidden.</p>
+                        <p>The song was:</p>
+
+                        {/* Song Details */}
+                        <div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                            {dailyPuzzle.coverImage && (
+                                <img
+                                    src={dailyPuzzle.coverImage}
+                                    alt="Album Cover"
+                                    style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '0.5rem', marginBottom: '1rem', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
+                                />
+                            )}
+                            <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.title}</h3>
+                            <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 1rem 0' }}>{dailyPuzzle.artist}</p>
+                            <audio controls style={{ width: '100%' }}>
+                                <source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
+                                Your browser does not support the audio element.
+                            </audio>
+                        </div>
+
                         {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
diff --git a/docker-compose.example.yml b/docker-compose.example.yml
index ce85055..2e7bcf3 100644
--- a/docker-compose.example.yml
+++ b/docker-compose.example.yml
@@ -14,6 +14,6 @@ services:
     volumes:
       - ./data:/app/data
       - ./public/uploads:/app/public/uploads
-    # Initialize DB if needed
+    # Initialize DB if needed and run migration
     command: >
-      sh -c "npx -y prisma@6.19.0 db push && node server.js"
+      sh -c "npx -y prisma@6.19.0 db push && node scripts/migrate-covers.mjs && node server.js"
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index baf66db..debe4c9 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -15,6 +15,7 @@ model Song {
   title     String
   artist    String
   filename  String   // Filename in public/uploads
+  coverImage String?  // Filename in public/uploads/covers
   createdAt DateTime @default(now())
   puzzles   DailyPuzzle[]
 }
diff --git a/scripts/migrate-covers.mjs b/scripts/migrate-covers.mjs
new file mode 100644
index 0000000..8ccf8c2
--- /dev/null
+++ b/scripts/migrate-covers.mjs
@@ -0,0 +1,66 @@
+import { PrismaClient } from '@prisma/client';
+import { parseBuffer } from 'music-metadata';
+import { readFile, writeFile } from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Adjust path to reach root from scripts/
+const prisma = new PrismaClient();
+
+async function migrate() {
+    console.log('Starting cover art migration...');
+
+    try {
+        // Find songs without cover image
+        const songs = await prisma.song.findMany({
+            where: {
+                coverImage: null
+            }
+        });
+
+        console.log(`Found ${songs.length} songs without cover image.`);
+
+        for (const song of songs) {
+            try {
+                const filePath = path.join(process.cwd(), 'public/uploads', song.filename);
+                console.log(`Processing ${song.title} (${song.filename})...`);
+
+                const buffer = await readFile(filePath);
+                const metadata = await parseBuffer(buffer);
+                const picture = metadata.common.picture?.[0];
+
+                if (picture) {
+                    const extension = picture.format.split('/')[1] || 'jpg';
+                    const coverFilename = `cover-${Date.now()}-${Math.floor(Math.random() * 1000)}.${extension}`;
+                    const coverPath = path.join(process.cwd(), 'public/uploads/covers', coverFilename);
+
+                    // Ensure directory exists
+                    await writeFile(coverPath, picture.data);
+
+                    // Update DB
+                    await prisma.song.update({
+                        where: { id: song.id },
+                        data: { coverImage: coverFilename }
+                    });
+
+                    console.log(`✅ Extracted cover for ${song.title}`);
+                } else {
+                    console.log(`⚠️ No cover found for ${song.title}`);
+                }
+            } catch (e) {
+                console.error(`❌ Failed to process ${song.title}:`, e.message);
+            }
+        }
+
+        console.log('Migration completed.');
+    } catch (e) {
+        console.error('Migration failed:', e);
+    } finally {
+        await prisma.$disconnect();
+    }
+}
+
+migrate();