reduced flashlite after video transition
This commit is contained in:
parent
0da1c02b60
commit
fc624c0700
@ -330,17 +330,22 @@ export default function RuntimePresentation({
|
|||||||
}, [selectedPage?.background_image_url, selectedPage?.background_video_url]);
|
}, [selectedPage?.background_image_url, selectedPage?.background_video_url]);
|
||||||
|
|
||||||
// Video transition overlay removal - instant (no fade) when background is ready
|
// Video transition overlay removal - instant (no fade) when background is ready
|
||||||
// This ensures UI elements have time to appear before we remove the transition overlay
|
// Uses double RAF to ensure browser has painted the new background before removing overlay
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (pendingTransitionComplete && isBackgroundReady) {
|
if (pendingTransitionComplete && isBackgroundReady) {
|
||||||
// Background is ready - instantly remove transition overlay (no fade)
|
// Wait for paint cycle to complete before removing overlay
|
||||||
const video = transitionVideoRef.current;
|
// Double RAF ensures the new background is fully rendered
|
||||||
if (video) {
|
requestAnimationFrame(() => {
|
||||||
video.removeAttribute('src');
|
requestAnimationFrame(() => {
|
||||||
video.load();
|
const video = transitionVideoRef.current;
|
||||||
}
|
if (video) {
|
||||||
setTransitionPreview(null);
|
video.removeAttribute('src');
|
||||||
setPendingTransitionComplete(false);
|
video.load();
|
||||||
|
}
|
||||||
|
setTransitionPreview(null);
|
||||||
|
setPendingTransitionComplete(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, [pendingTransitionComplete, isBackgroundReady]);
|
}, [pendingTransitionComplete, isBackgroundReady]);
|
||||||
|
|
||||||
|
|||||||
@ -53,7 +53,7 @@ export const getBrowserInfo = (): BrowserInfo => {
|
|||||||
|
|
||||||
// iOS Safari detection
|
// iOS Safari detection
|
||||||
const isIOSSafari =
|
const isIOSSafari =
|
||||||
/iPad|iPhone|iPod/.test(ua) && !('MSStream' in window as unknown);
|
/iPad|iPhone|iPod/.test(ua) && !(('MSStream' in window) as unknown);
|
||||||
|
|
||||||
// Chrome detection (includes Chromium-based browsers except Edge)
|
// Chrome detection (includes Chromium-based browsers except Edge)
|
||||||
const isChrome = /chrome/i.test(ua) && !/edg/i.test(ua);
|
const isChrome = /chrome/i.test(ua) && !/edg/i.test(ua);
|
||||||
|
|||||||
@ -373,17 +373,22 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Video transition overlay removal - instant (no fade) when background is ready
|
// Video transition overlay removal - instant (no fade) when background is ready
|
||||||
// This ensures UI elements have time to appear before we remove the transition overlay
|
// Uses double RAF to ensure browser has painted the new background before removing overlay
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (pendingTransitionComplete && isBackgroundReady) {
|
if (pendingTransitionComplete && isBackgroundReady) {
|
||||||
// Background is ready - instantly remove transition overlay (no fade)
|
// Wait for paint cycle to complete before removing overlay
|
||||||
const video = transitionVideoRef.current;
|
// Double RAF ensures the new background is fully rendered
|
||||||
if (video) {
|
requestAnimationFrame(() => {
|
||||||
video.removeAttribute('src');
|
requestAnimationFrame(() => {
|
||||||
video.load();
|
const video = transitionVideoRef.current;
|
||||||
}
|
if (video) {
|
||||||
closeTransitionPreview();
|
video.removeAttribute('src');
|
||||||
setPendingTransitionComplete(false);
|
video.load();
|
||||||
|
}
|
||||||
|
closeTransitionPreview();
|
||||||
|
setPendingTransitionComplete(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, [pendingTransitionComplete, isBackgroundReady, closeTransitionPreview]);
|
}, [pendingTransitionComplete, isBackgroundReady, closeTransitionPreview]);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user