Add live show player playback and effects

resources/js/guest/components/LiveShowBackdrop.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { LiveShowBackgroundMode, LiveShowPhoto } from '../services/liveShowApi';
+
+function resolvePhotoUrl(photo?: LiveShowPhoto | null): string | null {
+  if (!photo) {
+    return null;
+  }
+  return photo.full_url || photo.thumb_url || null;
+}
+
+function resolveBlurAmount(intensity: number): number {
+  const safe = Number.isFinite(intensity) ? intensity : 70;
+  return 28 + Math.min(60, Math.max(0, safe)) * 0.45;
+}
+
+export default function LiveShowBackdrop({
+  mode,
+  photo,
+  intensity,
+}: {
+  mode: LiveShowBackgroundMode;
+  photo?: LiveShowPhoto | null;
+  intensity: number;
+}) {
+  const photoUrl = resolvePhotoUrl(photo);
+  const blurAmount = resolveBlurAmount(intensity);
+  const fallbackMode = mode === 'blur_last' && !photoUrl ? 'gradient' : mode;
+
+  if (fallbackMode === 'solid') {
+    return (
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{ backgroundColor: 'rgb(8, 10, 16)' }}
+      />
+    );
+  }
+
+  if (fallbackMode === 'gradient') {
+    return <div className="pointer-events-none absolute inset-0 z-0 bg-aurora-enhanced" />;
+  }
+
+  if (fallbackMode === 'brand') {
+    return (
+      <div
+        className="pointer-events-none absolute inset-0 z-0"
+        style={{
+          backgroundImage:
+            'radial-gradient(120% 120% at 15% 15%, var(--guest-primary) 0%, rgba(0,0,0,0.8) 55%), radial-gradient(120% 120% at 85% 20%, var(--guest-secondary) 0%, transparent 60%)',
+          backgroundColor: 'rgb(5, 8, 16)',
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0">
+      <div
+        className="absolute inset-0 scale-110"
+        style={{
+          backgroundImage: photoUrl ? `url(${photoUrl})` : undefined,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          filter: `blur(${blurAmount}px) saturate(1.15)`,
+        }}
+      />
+      <div className="absolute inset-0 bg-black/60" />
+    </div>
+  );
+}