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