style(ui): Visuelle Hero Showcase Banner & Poster Cards Grid auf dem Dashboard

docker/ui/src/components/HeroCinemaBanner.tsx

@@ -1,8 +1,18 @@
-import { Disc, Play, Sparkles, Film, Shield, Zap, CheckCircle } from 'lucide-react'
+import { Disc, Play, Sparkles, Film, Shield, Zap, CheckCircle, Download, FileSpreadsheet } from 'lucide-react'
 import { RadialProgress } from './ui/RadialProgress'
 import { TypeBadge, StatusBadge } from './ui/Badge'
 import { Button } from './ui/Button'
 
+interface JobMeta {
+  year?: number
+  overview?: string
+  poster_path?: string
+  genres?: string[]
+  runtime?: number
+  type?: string
+  source?: string
+}
+
 interface Job {
   id: string
   type: 'cd' | 'dvd' | 'bluray' | 'uhd'
@@ -13,10 +23,18 @@ interface Job {
   progress: number
   title?: string
   can_retry?: boolean
+  meta?: JobMeta | null
+}
+
+function posterUrl(meta?: JobMeta | null): string | null {
+  const p = meta?.poster_path
+  if (!p) return null
+  return p.startsWith('http') ? p : `https://image.tmdb.org/t/p/w500${p}`
 }
 
 interface HeroCinemaBannerProps {
   aktiverJob?: Job | null
+  latestJob?: Job | null
   onDetailClick?: (jobId: string) => void
   onCancelClick?: (jobId: string) => void
   totalJobsCount: number
@@ -25,68 +43,74 @@ interface HeroCinemaBannerProps {
 
 export function HeroCinemaBanner({
   aktiverJob,
+  latestJob,
   onDetailClick,
   onCancelClick,
   totalJobsCount,
   completedCount,
 }: HeroCinemaBannerProps) {
+  // Fall 1: Ein Job rippt oder komprimiert gerade live
   if (aktiverJob) {
     const isTranscoding = aktiverJob.status === 'transcoding'
     const statusText = isTranscoding ? 'HandBrake Kompression' : 'MakeMKV Extraktion'
+    const poster = posterUrl(aktiverJob.meta)
 
     return (
-      <div className="relative rounded-3xl overflow-hidden border border-amber-500/40 bg-gradient-to-r from-slate-950 via-slate-900 to-indigo-950/90 p-6 md:p-8 shadow-[0_0_50px_-10px_rgba(245,158,11,0.25)] text-slate-100 mb-8">
-        {/* Background Ambient Glow Effects */}
-        <div className="absolute -top-24 -right-24 w-96 h-96 bg-amber-500/15 rounded-full blur-3xl pointer-events-none" />
-        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-500/15 rounded-full blur-3xl pointer-events-none" />
+      <div className="relative rounded-3xl overflow-hidden border-2 border-amber-500/50 bg-gradient-to-r from-slate-950 via-slate-900 to-indigo-950 p-6 md:p-8 shadow-[0_0_60px_-10px_rgba(245,158,11,0.35)] text-slate-100 mb-8">
+        <div className="absolute -top-24 -right-24 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl pointer-events-none" />
 
         <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8">
-          {/* Left: 3D Metallic Disc Graphic */}
           <div className="flex items-center gap-6">
+            {/* 3D Spinning Disc Graphic */}
             <div className="relative flex-shrink-0">
-              <div className="w-28 h-28 md:w-32 md:h-32 rounded-full disc-texture shadow-2xl shadow-black/80 flex items-center justify-center p-1.5 animate-disc-spin border-2 border-slate-700/60">
-                <div className="w-full h-full rounded-full border-2 border-dashed border-white/30 flex items-center justify-center bg-slate-950/60">
-                  <Disc size={44} className="text-amber-400 drop-shadow-[0_0_12px_rgba(245,158,11,0.6)]" />
+              {poster ? (
+                <div className="relative">
+                  <img src={poster} alt="" className="w-28 h-40 md:w-32 md:h-44 rounded-2xl object-cover shadow-2xl border-2 border-amber-500/40" />
+                  <div className="absolute -bottom-3 -right-3 w-16 h-16 rounded-full disc-texture shadow-xl flex items-center justify-center animate-disc-spin border border-amber-400/60">
+                    <Disc size={24} className="text-amber-400" />
+                  </div>
                 </div>
-              </div>
-              <div className="absolute -bottom-2 -right-2 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-amber-500 text-slate-950 shadow-md">
-                NOW RIPPING
-              </div>
+              ) : (
+                <div className="w-28 h-28 md:w-32 md:h-32 rounded-full disc-texture shadow-2xl shadow-black/80 flex items-center justify-center p-1.5 animate-disc-spin border-2 border-amber-500/60">
+                  <div className="w-full h-full rounded-full border-2 border-dashed border-white/40 flex items-center justify-center bg-slate-950/70">
+                    <Disc size={44} className="text-amber-400 drop-shadow-[0_0_15px_rgba(245,158,11,0.8)]" />
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="space-y-2 text-center sm:text-left">
               <div className="flex items-center justify-center sm:justify-start gap-2 flex-wrap">
+                <span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500 text-slate-950 shadow-md shadow-amber-500/30">
+                  NOW RIPPING
+                </span>
                 <TypeBadge type={aktiverJob.type} />
                 <StatusBadge status={aktiverJob.status} />
-                <span className="px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-slate-800/80 text-slate-300 border border-slate-700">
-                  {statusText}
-                </span>
               </div>
 
               <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-200 bg-clip-text text-transparent">
                 {aktiverJob.title || 'Aktiver Ripping-Prozess'}
               </h2>
 
-              <p className="text-xs text-slate-400 flex items-center justify-center sm:justify-start gap-3">
-                <span>Laufwerk: <strong className="font-mono text-amber-300/90">{aktiverJob.device}</strong></span>
+              <p className="text-xs text-slate-400 flex items-center justify-center sm:justify-start gap-3 font-mono">
+                <span>Laufwerk: <strong className="text-amber-400">{aktiverJob.device}</strong></span>
                 <span>•</span>
-                <span>Gestartet: {new Date(aktiverJob.startTime).toLocaleTimeString('de-DE')}</span>
+                <span>{statusText}</span>
               </p>
 
-              {/* Quality & Audio Badges Mockup */}
-              <div className="flex items-center justify-center sm:justify-start gap-1.5 pt-1 text-[10px] font-bold text-slate-400">
-                <span className="px-2 py-0.5 rounded bg-slate-800/80 border border-slate-700/80">HDR10+</span>
-                <span className="px-2 py-0.5 rounded bg-slate-800/80 border border-slate-700/80">DOLBY ATMOS</span>
-                <span className="px-2 py-0.5 rounded bg-slate-800/80 border border-slate-700/80">LOSSLESS MKV</span>
+              <div className="flex items-center justify-center sm:justify-start gap-2 pt-1">
+                <span className="px-2.5 py-0.5 rounded bg-slate-800 border border-slate-700 text-[10px] font-bold text-amber-400">4K / HD READY</span>
+                <span className="px-2.5 py-0.5 rounded bg-slate-800 border border-slate-700 text-[10px] font-bold text-slate-300">LOSSLESS MKV</span>
+                <span className="px-2.5 py-0.5 rounded bg-slate-800 border border-slate-700 text-[10px] font-bold text-slate-300">AUTO-METADATA</span>
               </div>
             </div>
           </div>
 
-          {/* Right: Radial Progress Ring & Controls */}
           <div className="flex flex-col sm:flex-row items-center gap-6 flex-shrink-0 w-full lg:w-auto justify-end">
-            <RadialProgress progress={aktiverJob.progress} size={96} strokeWidth={8} label="PROGRESS" />
+            <RadialProgress progress={aktiverJob.progress} size={100} strokeWidth={9} label="PROGRESS" />
 
-            <div className="flex flex-col gap-2 w-full sm:w-auto">
+            <div className="flex flex-col gap-2.5 w-full sm:w-auto">
               <Button
                 variant="amber"
                 size="md"
@@ -108,11 +132,73 @@ export function HeroCinemaBanner({
     )
   }
 
-  // Idle Banner (Kein aktiver Job)
+  // Fall 2: Kein aktiver Job, aber es gibt zuletzt gerippte Medien (z.B. Evangelion 2.22) -> FEATURED SHOWCASE
+  if (latestJob) {
+    const poster = posterUrl(latestJob.meta)
+
+    return (
+      <div className="relative rounded-3xl overflow-hidden border border-amber-500/30 bg-gradient-to-r from-slate-950 via-slate-900 to-slate-950 p-6 md:p-8 shadow-[0_0_40px_-10px_rgba(245,158,11,0.15)] text-slate-100 mb-8">
+        <div className="absolute -top-24 -right-24 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
+
+        <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
+          <div className="flex items-center gap-6">
+            {/* Poster or Stylized Media Icon */}
+            {poster ? (
+              <img src={poster} alt="" className="w-24 h-36 rounded-2xl object-cover shadow-2xl border border-amber-500/30 flex-shrink-0" />
+            ) : (
+              <div className="w-24 h-32 rounded-2xl bg-gradient-to-br from-amber-500/20 via-indigo-600/20 to-purple-600/20 border border-amber-500/30 flex items-center justify-center flex-shrink-0 shadow-xl">
+                <Film size={40} className="text-amber-400" />
+              </div>
+            )}
+
+            <div className="space-y-2 text-center md:text-left">
+              <div className="flex items-center justify-center md:justify-start gap-2 flex-wrap">
+                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 flex items-center gap-1">
+                  <CheckCircle size={11} /> ZULETZT GERIPPT
+                </span>
+                <TypeBadge type={latestJob.type} />
+                <StatusBadge status={latestJob.status} />
+              </div>
+
+              <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-200 bg-clip-text text-transparent">
+                {latestJob.title || 'Unbekanntes Medium'}
+              </h2>
+
+              <p className="text-xs text-slate-400">
+                Fertiggestellt am {new Date(latestJob.startTime).toLocaleDateString('de-DE')} um {new Date(latestJob.startTime).toLocaleTimeString('de-DE')} · Vorbereitet für Media-Server
+              </p>
+
+              <div className="flex items-center justify-center md:justify-start gap-2 pt-1">
+                <Button
+                  variant="amber"
+                  size="sm"
+                  onClick={() => onDetailClick && onDetailClick(latestJob.id)}
+                >
+                  <Download size={14} /> Dateien / Details
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 text-xs font-medium text-slate-300 bg-slate-900/90 px-4 py-3 rounded-2xl border border-slate-800 flex-shrink-0">
+            <div className="flex items-center gap-2">
+              <Zap size={16} className="text-amber-400" />
+              <span>Erfolgreiche Rips: <strong className="text-amber-400 font-mono text-sm">{completedCount}</strong></span>
+            </div>
+            <div className="h-4 w-px bg-slate-800" />
+            <div className="flex items-center gap-2">
+              <Shield size={16} className="text-indigo-400" />
+              <span>MakeMKV Lossless</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Standby Banner
   return (
     <div className="relative rounded-3xl overflow-hidden border border-slate-800/80 bg-gradient-to-r from-slate-950 via-slate-900 to-indigo-950/60 p-6 md:p-8 shadow-2xl text-slate-100 mb-8">
-      <div className="absolute -top-24 -right-24 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
-
       <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
         <div className="flex items-center gap-5">
           <div className="p-4 rounded-2xl bg-gradient-to-br from-amber-500/20 to-indigo-600/20 border border-amber-500/30 shadow-lg shadow-amber-500/10">
@@ -123,7 +209,7 @@ export function HeroCinemaBanner({
               <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 flex items-center gap-1">
                 <CheckCircle size={11} /> Ready for Disc
               </span>
-              <span className="text-xs text-slate-400 font-mono">System Status: Standby</span>
+              <span className="text-xs text-slate-400 font-mono">System Standby</span>
             </div>
             <h2 className="text-2xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-200 bg-clip-text text-transparent">
               Rippy Cinema Studio
@@ -133,18 +219,6 @@ export function HeroCinemaBanner({
             </p>
           </div>
         </div>
-
-        <div className="flex items-center gap-4 text-xs font-medium text-slate-300 bg-slate-900/80 px-4 py-3 rounded-2xl border border-slate-800 flex-shrink-0">
-          <div className="flex items-center gap-2">
-            <Zap size={16} className="text-amber-400" />
-            <span>Erledigte Jobs: <strong className="text-amber-400 font-mono">{completedCount}</strong></span>
-          </div>
-          <div className="h-4 w-px bg-slate-800" />
-          <div className="flex items-center gap-2">
-            <Shield size={16} className="text-indigo-400" />
-            <span>MakeMKV Lossless 1:1</span>
-          </div>
-        </div>
       </div>
     </div>
   )