c3f50f869a
Add a timeout to detect and handle Chrome loading issues, implement preloading attributes, and improve error reporting for failed React app mounts. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
168 lines
7.2 KiB
HTML
168 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||
<title>go4.video – Top-Inhalte von Folx TV</title>
|
||
<meta name="description" content="go4.video – Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
|
||
|
||
<!-- Open Graph meta podatki za družbena omrežja in mobilne aplikacije -->
|
||
<meta property="og:title" content="go4.video – Top-Inhalte von Folx TV" />
|
||
<meta property="og:description" content="go4.video – Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:site_name" content="go4.video" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta property="og:image" content="/go4-video-social-share.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<meta property="og:image:type" content="image/png" />
|
||
|
||
<!-- Twitter Card meta podatki -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:site" content="@go4video" />
|
||
<meta name="twitter:title" content="go4.video – Top-Inhalte von Folx TV" />
|
||
<meta name="twitter:description" content="go4.video – Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
|
||
<meta name="twitter:image" content="/go4-video-social-share.png" />
|
||
|
||
<!-- Dodatni meta podatki za mobilne naprave -->
|
||
<meta name="application-name" content="go4.video" />
|
||
<meta name="apple-mobile-web-app-title" content="go4.video" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||
<meta name="theme-color" content="#6366f1" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
|
||
<!-- iOS specifične meta oznake -->
|
||
<meta name="apple-touch-fullscreen" content="yes" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
|
||
<!-- iOS ikone za različne velikosti -->
|
||
<link rel="apple-touch-icon" sizes="57x57" href="/api/favicon?size=57&format=png" />
|
||
<link rel="apple-touch-icon" sizes="60x60" href="/api/favicon?size=60&format=png" />
|
||
<link rel="apple-touch-icon" sizes="72x72" href="/api/favicon?size=72&format=png" />
|
||
<link rel="apple-touch-icon" sizes="76x76" href="/api/favicon?size=76&format=png" />
|
||
<link rel="apple-touch-icon" sizes="114x114" href="/api/favicon?size=114&format=png" />
|
||
<link rel="apple-touch-icon" sizes="120x120" href="/api/favicon?size=120&format=png" />
|
||
<link rel="apple-touch-icon" sizes="144x144" href="/api/favicon?size=144&format=png" />
|
||
<link rel="apple-touch-icon" sizes="152x152" href="/api/favicon?size=152&format=png" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/api/favicon?size=180&format=png" />
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/svg+xml" href="/api/favicon" />
|
||
<link rel="apple-touch-icon" href="/api/favicon?size=180&format=png" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
<!-- Preloader to prevent white screen -->
|
||
<div id="app-preloader" style="
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
font-family: Arial, sans-serif;
|
||
">
|
||
<div style="text-align: center; color: white;">
|
||
<div style="
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(45deg, #6366f1, #8b5cf6);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 20px;
|
||
animation: pulse 2s infinite;
|
||
">
|
||
<div style="
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 16px solid white;
|
||
border-top: 12px solid transparent;
|
||
border-bottom: 12px solid transparent;
|
||
margin-left: 4px;
|
||
"></div>
|
||
</div>
|
||
<h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
|
||
<p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
</style>
|
||
</div>
|
||
<script type="module" src="/src/main.tsx" defer></script>
|
||
<link rel="preload" href="/src/main.tsx" as="script" crossorigin>
|
||
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
||
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
|
||
<!-- Replit script removed - caused scrolling issues -->
|
||
|
||
<!-- Debug script for deployment issues -->
|
||
<script>
|
||
console.log('🚀 go4.video loading...');
|
||
|
||
// Set timeout to detect hanging in Chrome
|
||
let appLoadTimeout = setTimeout(function() {
|
||
console.warn('⚠️ App taking too long to load in Chrome, forcing refresh...');
|
||
const preloader = document.getElementById('app-preloader');
|
||
if (preloader) {
|
||
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading timeout</h2><p>Refreshing automatically...</p></div>';
|
||
}
|
||
setTimeout(function() {
|
||
location.reload();
|
||
}, 2000);
|
||
}, 8000); // 8 second timeout for Chrome
|
||
|
||
// Global callback for when app loads successfully
|
||
window.appLoaded = function() {
|
||
clearTimeout(appLoadTimeout);
|
||
console.log('⏱️ App load timeout cleared');
|
||
};
|
||
|
||
// Clear any cached service workers
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||
for(let registration of registrations) {
|
||
registration.unregister();
|
||
console.log('🧹 Cleared service worker registration');
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addEventListener('load', function() {
|
||
console.log('✅ Window loaded');
|
||
setTimeout(function() {
|
||
const root = document.getElementById('root');
|
||
const preloader = document.getElementById('app-preloader');
|
||
if (preloader && preloader.style.opacity !== '0') {
|
||
console.error('❌ React app failed to mount - preloader still visible');
|
||
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading failed</h2><p>Refreshing automatically...</p></div>';
|
||
|
||
// Auto-refresh after 3 seconds
|
||
setTimeout(function() {
|
||
location.reload();
|
||
}, 3000);
|
||
}
|
||
}, 5000);
|
||
});
|
||
|
||
window.addEventListener('error', function(e) {
|
||
console.error('❌ Global error:', e.error);
|
||
});
|
||
|
||
window.addEventListener('unhandledrejection', function(e) {
|
||
console.error('❌ Unhandled promise rejection:', e.reason);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |