From 36e52afc93ed65998e25454196535080c5ff9a01 Mon Sep 17 00:00:00 2001
From: Morgan Wattiez <morgan@zoemp.be>
Date: Sun, 25 May 2025 01:15:43 +0200
Subject: [PATCH] feat: display only one main poster per film under the title,
 remove image from sources

---
 public/index.html | 47 +++++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/public/index.html b/public/index.html
index e0d54f3..1a0763f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,6 @@
     </div>
     <div id="films"></div>
   </div>
-
 <script>
   // Age color logic
   function getAgeColor(age) {
@@ -111,16 +110,24 @@
         <tbody>`;
 
       films.forEach(film => {
+        // Get first non-empty image from sources
+        const allImgs = film.results.map(r => r.img).filter(Boolean);
+        const mainImg = allImgs.length ? allImgs[0] : null;
+
         html += `<tr>
-          <td>${film.title || 'Unknown title'}</td>
-          <td class="year">${film.year || 'N/A'}</td>
+          <td style="vertical-align:top;">
+            <div style="text-align:center;">
+              <div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
+              ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
+            </div>
+          </td>
+          <td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
           <td>`;
+
         film.results.forEach(r => {
           html += `<div class="source-block">`;
           html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
-          if (r.img) {
-            html += `<img src="${r.img}" alt="Poster for ${film.title}">`;
-          }
+          // (No image here anymore)
           if (r.link) {
             html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
           }
@@ -137,20 +144,20 @@
             }
           }
           // Cinecheck
-	else if (r.source === 'cinecheck') {
-	  let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
-	    ? r.normalizedMarks
-	    : (r.marks || []).map(x => {
-		let n = parseInt((x + '').replace(/\d+/, ''), 10);
-		return isNaN(n) ? null : n;
-	      }).filter(n => n !== null && !isNaN(n));
-	  let minAge = numericAges.length ? Math.min(...numericAges) : '';
-	  html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
-	  html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
-	  if (r.details && r.details.length) {
-	    html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
-	  }
-	}
+          else if (r.source === 'cinecheck') {
+            let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
+              ? r.normalizedMarks
+              : (r.marks || []).map(x => {
+                  let n = parseInt((x + '').replace(/\d+/, ''), 10);
+                  return isNaN(n) ? null : n;
+                }).filter(n => n !== null && !isNaN(n));
+            let minAge = numericAges.length ? Math.min(...numericAges) : '';
+            html += `<p><b>Age(s) (Cinecheck):</b> ${minAge ? ageBadge(minAge) : ''}${r.marks && r.marks.length ? r.marks.join(', ') : '-'}</p>`;
+            html += `<p><b>Summary (Cinecheck):</b> ${shortSummary(r.summary)}</p>`;
+            if (r.details && r.details.length) {
+              html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
+            }
+          }
           // Filmages
           else if (r.source === 'filmages') {
             html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;