admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made transitions smoother

Browse Source
This commit is contained in:
Dmitri 2026-04-14 15:29:40 +04:00
parent 6eb27fefd1
commit 0da1c02b60
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/Constructor/TransitionPreviewOverlay.tsx
View File

@ -36,14 +36,13 @@ const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
}) => {
if (!isActive) return null;
// Video opacity: 0 while buffering, 1 otherwise
const videoOpacity = isBuffering ? 0 : 1;
// Container opacity: controlled by parent for fade-out effects
const containerOpacity = opacity ?? 1;
// Container opacity: 0 while buffering to prevent black flash
// Video first frame = old page background, so we hide everything until ready
const containerOpacity = isBuffering ? 0 : (opacity ?? 1);
return (
// Outer: full viewport with black background (letterbox bars)
// No fade transition - transition video itself is the effect
// Hidden while buffering to show old page content underneath
<div
className='fixed inset-0 z-50 overflow-hidden pointer-events-none bg-black'
style={{ opacity: containerOpacity }}
@ -53,14 +52,12 @@ const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
className='overflow-hidden'
style={letterboxStyles || { position: 'absolute', inset: 0 }}
>
{/* Video element - no opacity transition to ensure instant appearance
when ready. The video itself IS the transition effect. */}
{/* Video element - container handles visibility, video is always opaque */}
<video
ref={videoRef}
className={`absolute inset-0 h-full w-full ${
videoFit === 'cover' ? 'object-cover' : 'object-contain'
}`}
style={{ opacity: videoOpacity }}
muted
playsInline
preload='auto'