67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
/**
|
|
* PreviousBackgroundOverlay Component
|
|
*
|
|
* Renders the previous page background during page transitions.
|
|
* Shows during loading and crossfade, with optional fade-out animation.
|
|
* Used by both CanvasBackground (constructor) and RuntimePresentation.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface PreviousBackgroundOverlayProps {
|
|
/** Previous background image URL */
|
|
imageUrl?: string;
|
|
/** Previous background video URL */
|
|
videoUrl?: string;
|
|
/** Whether page is currently switching */
|
|
isSwitching?: boolean;
|
|
/** Whether new background is ready */
|
|
isNewBgReady?: boolean;
|
|
/** Whether fade animation is in progress */
|
|
isFadingIn?: boolean;
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
const PreviousBackgroundOverlay: React.FC<PreviousBackgroundOverlayProps> = ({
|
|
imageUrl,
|
|
videoUrl,
|
|
isSwitching = false,
|
|
isNewBgReady = false,
|
|
isFadingIn = false,
|
|
className = '',
|
|
}) => {
|
|
// Show during loading (isSwitching && !isNewBgReady) OR during crossfade (isFadingIn)
|
|
const shouldShow = isFadingIn || (isSwitching && !isNewBgReady);
|
|
|
|
if (!shouldShow) return null;
|
|
|
|
return (
|
|
<>
|
|
{imageUrl && (
|
|
<div
|
|
className={`pointer-events-none absolute inset-0 z-0 ${isFadingIn ? 'animate-crossfade-out' : ''} ${className}`}
|
|
style={{
|
|
backgroundImage: `url("${imageUrl}")`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}
|
|
/>
|
|
)}
|
|
{videoUrl && (
|
|
<video
|
|
className={`absolute inset-0 z-0 h-full w-full object-contain pointer-events-none ${isFadingIn ? 'animate-crossfade-out' : ''} ${className}`}
|
|
src={videoUrl}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PreviousBackgroundOverlay;
|