43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
/**
|
|
* TransitionPreviewOverlay Component
|
|
*
|
|
* Full-screen overlay for transition video preview.
|
|
* Designed to work with useTransitionPlayback hook which manages
|
|
* video src and playback externally via the videoRef.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface TransitionPreviewOverlayProps {
|
|
/** Reference to the video element - useTransitionPlayback manages src and playback */
|
|
videoRef: React.RefObject<HTMLVideoElement | null>;
|
|
/** Whether the overlay is visible */
|
|
isActive: boolean;
|
|
/** Whether the video is currently buffering (used to hide video during load) */
|
|
isBuffering?: boolean;
|
|
}
|
|
|
|
const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
|
|
videoRef,
|
|
isActive,
|
|
isBuffering = false,
|
|
}) => {
|
|
if (!isActive) return null;
|
|
|
|
return (
|
|
<div className='fixed inset-0 z-50 overflow-hidden pointer-events-none'>
|
|
<video
|
|
ref={videoRef}
|
|
className='absolute inset-0 h-full w-full object-cover transition-opacity duration-300 ease-linear'
|
|
style={{ opacity: isBuffering ? 0 : 1 }}
|
|
muted
|
|
playsInline
|
|
preload='auto'
|
|
disablePictureInPicture
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TransitionPreviewOverlay;
|