style(ui): Visuelles High-End Overhaul fuer Cinematic Cinema OS (3D Spin-Disc, Hero Banner, Radial Gauges & Poster Grid)

docker/ui/src/components/HeroCinemaBanner.tsx

@@ -0,0 +1,151 @@
+import { Disc, Play, Sparkles, Film, Shield, Zap, CheckCircle } from 'lucide-react'
+import { RadialProgress } from './ui/RadialProgress'
+import { TypeBadge, StatusBadge } from './ui/Badge'
+import { Button } from './ui/Button'
+
+interface Job {
+  id: string
+  type: 'cd' | 'dvd' | 'bluray' | 'uhd'
+  status: 'pending' | 'processing' | 'transcoding' | 'canceling' | 'completed' | 'failed'
+  device: string
+  startTime: string
+  endTime?: string
+  progress: number
+  title?: string
+  can_retry?: boolean
+}
+
+interface HeroCinemaBannerProps {
+  aktiverJob?: Job | null
+  onDetailClick?: (jobId: string) => void
+  onCancelClick?: (jobId: string) => void
+  totalJobsCount: number
+  completedCount: number
+}
+
+export function HeroCinemaBanner({
+  aktiverJob,
+  onDetailClick,
+  onCancelClick,
+  totalJobsCount,
+  completedCount,
+}: HeroCinemaBannerProps) {
+  if (aktiverJob) {
+    const isTranscoding = aktiverJob.status === 'transcoding'
+    const statusText = isTranscoding ? 'HandBrake Kompression' : 'MakeMKV Extraktion'
+
+    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 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">
+            <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)]" />
+                </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>
+
+            <div className="space-y-2 text-center sm:text-left">
+              <div className="flex items-center justify-center sm:justify-start gap-2 flex-wrap">
+                <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>
+                <span>•</span>
+                <span>Gestartet: {new Date(aktiverJob.startTime).toLocaleTimeString('de-DE')}</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>
+            </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" />
+
+            <div className="flex flex-col gap-2 w-full sm:w-auto">
+              <Button
+                variant="amber"
+                size="md"
+                onClick={() => onDetailClick && onDetailClick(aktiverJob.id)}
+              >
+                <Sparkles size={16} /> Details ansehen
+              </Button>
+              <Button
+                variant="danger"
+                size="md"
+                onClick={() => onCancelClick && onCancelClick(aktiverJob.id)}
+              >
+                Abbrechen
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Idle Banner (Kein aktiver Job)
+  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">
+            <Film size={36} className="text-amber-400" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <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>
+            </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
+            </h2>
+            <p className="text-xs text-slate-400 mt-0.5">
+              Automatische Disc-Erkennung aktiv. Lege eine 4K UHD, Blu-ray, DVD oder CD ein.
+            </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>
+  )
+}