// Create and show loading overlay on initial page load if (typeof window !== 'undefined') { // Check if video splash has already been shown in this session const hasSeenVideoSplash = sessionStorage.getItem('trackside-video-splash-shown'); const MINIMUM_SPLASH_DURATION = 2000; // 2 seconds minimum const splashStartTime = Date.now(); const overlay = document.createElement('div'); overlay.id = 'trackside-splash'; overlay.className = 'trackside-splash'; overlay.style.cssText = ` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #2B3440; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.3s ease-out; `; function dismissSplash() { const elapsedTime = Date.now() - splashStartTime; const remainingTime = Math.max(0, MINIMUM_SPLASH_DURATION - elapsedTime); setTimeout(() => { if (overlay.parentNode) { overlay.style.opacity = '0'; overlay.style.pointerEvents = 'none'; setTimeout(() => overlay.remove(), 300); } }, remainingTime); } function showFallbackLoader() { // Clear overlay content and show fallback loader overlay.innerHTML = ''; const fallbackContainer = document.createElement('div'); fallbackContainer.style.cssText = ` display: flex; flex-direction: column; align-items: center; gap: 48px; `; const logo = document.createElement('img'); logo.src = '/trackside-logo.svg'; logo.alt = 'Trackside'; logo.style.cssText = ` width: 120px; height: auto; opacity: 0.9; `; const loader = document.createElement('div'); loader.className = 'trackside-loader'; loader.innerHTML = '

'; fallbackContainer.appendChild(logo); fallbackContainer.appendChild(loader); overlay.appendChild(fallbackContainer); } // Show video splash only once per session if (!hasSeenVideoSplash) { // Add overlay to DOM immediately document.body.appendChild(overlay); sessionStorage.setItem('trackside-video-splash-shown', 'true'); let videoEnded = false; let videoError = false; const video = document.createElement('video'); video.src = '/splash-animation.mp4'; video.autoplay = true; video.loop = false; video.muted = true; video.playsInline = true; video.preload = 'auto'; video.className = 'trackside-splash__video'; video.style.cssText = ` max-width: 80%; max-height: 80%; object-fit: contain; `; // Wait for video end event video.addEventListener('ended', function() { videoEnded = true; dismissSplash(); }); // Handle video errors - show fallback loader video.addEventListener('error', function() { console.warn('Splash video failed to load, using fallback'); videoError = true; showFallbackLoader(); dismissSplash(); }); // Handle case where video cannot play (e.g., autoplay blocked) video.addEventListener('loadeddata', function() { video.play().catch(function(err) { console.warn('Splash video autoplay failed, using fallback:', err); videoError = true; showFallbackLoader(); dismissSplash(); }); }); overlay.appendChild(video); // Safety timeout: force dismiss after 4 seconds regardless setTimeout(function() { if (!videoEnded && !videoError && overlay.parentNode) { console.warn('Splash video timeout, forcing dismiss'); dismissSplash(); } }, 4000); } else { // Show loader bars for subsequent loads const loader = document.createElement('div'); loader.className = 'trackside-loader'; loader.innerHTML = '

'; overlay.appendChild(loader); document.body.appendChild(overlay); // Remove splash screen when page is fully loaded window.addEventListener('load', function() { setTimeout(function() { if (overlay.parentNode) { overlay.style.opacity = '0'; setTimeout(function() { overlay.remove(); }, 300); } }, 300); }); // Fallback: remove after 3 seconds setTimeout(function() { if (overlay.parentNode) { overlay.style.opacity = '0'; setTimeout(function() { overlay.remove(); }, 300); } }, 3000); } }

Welcome to Trackside