70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|