From 8a28a97b81277f3957778e3708447f0e7a448805 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Sat, 6 Jun 2026 18:07:26 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20media=20=E2=80=93=20TMDb=20img-src=20in?=
 =?UTF-8?q?=20CSP,=20Platzierungs-Badge=20auf=20Postern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/index.js         |  2 +-
 frontend/src/tools/media.jsx | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/backend/src/index.js b/backend/src/index.js
index c16df2f..99ccdd9 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -35,7 +35,7 @@ app.use((_req, res, next) => {
     // iCal-Feeds werden serverseitig geprosxt → nur 'self' nötig
     "connect-src 'self'",
     // data: für Avatare (base64), google.com + gstatic.com für Favicons im QuickLinks-Widget
-    "img-src 'self' data: https://www.google.com https://*.gstatic.com",
+    "img-src 'self' data: https://www.google.com https://*.gstatic.com https://image.tmdb.org",
     "worker-src 'self'",
     "object-src 'none'",
     "base-uri 'self'",
diff --git a/frontend/src/tools/media.jsx b/frontend/src/tools/media.jsx
index f82b3c6..2115b75 100644
--- a/frontend/src/tools/media.jsx
+++ b/frontend/src/tools/media.jsx
@@ -113,7 +113,7 @@ export default function Media({ toast, mobile, nav }) {
 }
 
 // ── Film-Karte ────────────────────────────────────────────────────────────────
-function MovieCard({ movie, favIds, onToggleFav }) {
+function MovieCard({ movie, rank, favIds, onToggleFav }) {
   const isFav = favIds.has(movie.id);
   const releaseDE = movie.release_date
     ? new Date(movie.release_date).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' })
@@ -131,6 +131,14 @@ function MovieCard({ movie, favIds, onToggleFav }) {
           : <div style={{ width:'100%', height:'100%', display:'flex', alignItems:'center',
               justifyContent:'center', fontSize:36, color:'rgba(255,255,255,0.1)' }}>🎬</div>
         }
+        {rank && (
+          <div style={{
+            position:'absolute', bottom:6, left:6,
+            background:'rgba(0,0,0,0.85)', borderRadius:5,
+            padding:'2px 8px', fontSize:13, color:'#fff', fontWeight:900,
+            fontFamily:"'Space Mono',monospace", lineHeight:1.4,
+          }}>#{rank}</div>
+        )}
         {movie.vote_average > 0 && (
           <div style={{
             position:'absolute', top:6, left:6,
@@ -221,8 +229,8 @@ function KinoGrid({ endpoint, emptyText }) {
       gridTemplateColumns:'repeat(auto-fill, minmax(130px, 1fr))',
       gap:12,
     }}>
-      {movies.map(m => (
-        <MovieCard key={m.id} movie={m} favIds={favIds} onToggleFav={toggleFav} />
+      {movies.map((m, i) => (
+        <MovieCard key={m.id} movie={m} rank={i+1} favIds={favIds} onToggleFav={toggleFav} />
       ))}
     </div>
   );