From 3cc923d9c62516c442a3de6e95446a95a825cab2 Mon Sep 17 00:00:00 2001
From: Pedro Chueiri <pedrochu99@hotmail.com>
Date: Wed, 18 Feb 2026 23:58:48 -0300
Subject: [PATCH] Fix: Adjusting preloading

---
 src/app.html | 164 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 119 insertions(+), 45 deletions(-)
diff --git a/src/app.html b/src/app.html
index 5714bf9..4853bb1 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,7 +8,6 @@
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
-
 	<meta name="author" content="Bass Pago" />
 	<meta name="robots" content="index, follow" />
 
@@ -33,9 +32,16 @@
 
 	<script src="//code.jivosite.com/widget/8fspsVOybp" async></script>
 	<style>
+		* {
+			box-sizing: border-box;
+		}
+
+		html,
 		body {
 			margin: 0;
 			padding: 0;
+			width: 100%;
+			height: 100%;
 			font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 			background: #000;
 			overflow: hidden;
@@ -125,52 +131,59 @@
 			}
 		}
 
+		/* Media queries ajustadas para mobile */
 		@media (max-width: 900px) {
 			.video-container {
-				width: 700px;
-				height: 394px;
+				width: 90vw;
+				height: 50.625vw;
+				max-height: 60vh;
 			}
 		}
 
 		@media (max-width: 768px) {
 			.video-container {
-				width: 600px;
-				height: 338px;
-			}
-		}
-
-		@media (max-width: 650px) {
-			.video-container {
-				width: 500px;
-				height: 281px;
-			}
-		}
-
-		@media (max-width: 550px) {
-			.video-container {
-				width: 450px;
-				height: 253px;
+				width: 95vw;
+				height: 53.4375vw;
+				max-height: 65vh;
 			}
 		}
 
 		@media (max-width: 480px) {
 			.video-container {
-				width: 400px;
-				height: 225px;
-			}
-		}
-
-		@media (max-width: 420px) {
-			.video-container {
-				width: 360px;
-				height: 202px;
+				width: 98vw;
+				height: 55.125vw;
+				max-height: 70vh;
 			}
 		}
 
 		@media (max-width: 380px) {
 			.video-container {
-				width: 320px;
-				height: 180px;
+				width: 100vw;
+				height: 56.25vw;
+				max-height: 75vh;
+				border-radius: 0;
+			}
+
+			.preloader-video {
+				border-radius: 0;
+			}
+
+			.video-fallback {
+				border-radius: 0;
+			}
+		}
+
+		@media (max-height: 500px) {
+			.video-container {
+				width: 80vh;
+				height: 45vh;
+			}
+		}
+
+		@media (max-height: 400px) {
+			.video-container {
+				width: 85vh;
+				height: 48vh;
 			}
 		}
 	</style>
@@ -181,7 +194,8 @@
 <body data-sveltekit-preload-data="hover">
 	<div id="video-preloader">
 		<div class="video-container">
-			<video id="preloader-video" class="preloader-video" autoplay muted playsinline preload="auto">
+			<video id="preloader-video" class="preloader-video" autoplay muted playsinline preload="auto"
+				webkit-playsinline="true">
 				<source src="/preloading.mp4" type="video/mp4">
 			</video>
 
@@ -202,6 +216,11 @@
 
 			let videoEnded = false;
 			let pageLoaded = false;
+			let videoStarted = false;
+			let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+			console.log('[Preloader] Dispositivo móvel:', isMobile);
+			console.log('[Preloader] User Agent:', navigator.userAgent);
 
 			function hidePreloader() {
 				if (preloader) {
@@ -212,6 +231,7 @@
 						if (app) {
 							app.classList.add('loaded');
 							document.body.style.overflow = 'auto';
+							document.documentElement.style.overflow = 'auto';
 						}
 					}, 800);
 				}
@@ -224,6 +244,7 @@
 			}
 
 			function showFallback() {
+				console.log('[Preloader] Mostrando fallback');
 				if (video && fallback) {
 					video.style.display = 'none';
 					fallback.style.display = 'flex';
@@ -235,30 +256,80 @@
 				}
 			}
 
+			function tryPlayVideo() {
+				if (!video) {
+					showFallback();
+					return;
+				}
+
+				// Para dispositivos móveis, aguarda um pouco antes de tentar reproduzir
+				const delay = isMobile ? 500 : 0;
+
+				setTimeout(() => {
+					const playPromise = video.play();
+
+					if (playPromise !== undefined) {
+						playPromise
+							.then(() => {
+								console.log('[Preloader] Vídeo reproduzindo com sucesso');
+								videoStarted = true;
+							})
+							.catch((error) => {
+								console.log('[Preloader] Erro ao reproduzir vídeo:', error);
+								showFallback();
+							});
+					} else {
+						console.log('[Preloader] Play promise undefined');
+						showFallback();
+					}
+				}, delay);
+			}
+
 			if (video) {
+				// Event listeners do vídeo
+				video.addEventListener('loadstart', () => {
+					console.log('[Preloader] Vídeo começou a carregar');
+				});
+
+				video.addEventListener('loadeddata', () => {
+					console.log('[Preloader] Dados do vídeo carregados');
+				});
+
+				video.addEventListener('canplay', () => {
+					console.log('[Preloader] Vídeo pode reproduzir');
+					if (!videoStarted) {
+						tryPlayVideo();
+					}
+				});
+
+				video.addEventListener('playing', () => {
+					console.log('[Preloader] Vídeo está reproduzindo');
+					videoStarted = true;
+				});
+
 				video.addEventListener('ended', () => {
 					console.log('[Preloader] Vídeo terminou');
 					videoEnded = true;
 					checkIfCanHide();
 				});
 
-				video.addEventListener('error', () => {
-					console.log('[Preloader] Erro no vídeo, usando fallback');
+				video.addEventListener('error', (e) => {
+					console.log('[Preloader] Erro no vídeo:', e);
 					showFallback();
 				});
 
-				const playPromise = video.play();
-				if (playPromise !== undefined) {
-					playPromise
-						.then(() => {
-							console.log('[Preloader] Vídeo reproduzindo');
-						})
-						.catch(() => {
-							console.log('[Preloader] Erro ao reproduzir, usando fallback');
-							showFallback();
-						});
-				}
+				// Timeout específico para detectar se o vídeo não conseguiu reproduzir
+				setTimeout(() => {
+					if (!videoStarted) {
+						console.log('[Preloader] Vídeo não iniciou no tempo esperado');
+						showFallback();
+					}
+				}, isMobile ? 3000 : 2000);
+
+				// Tenta reproduzir imediatamente
+				tryPlayVideo();
 			} else {
+				console.log('[Preloader] Elemento de vídeo não encontrado');
 				showFallback();
 			}
 
@@ -268,14 +339,17 @@
 				checkIfCanHide();
 			});
 
+			// Timeout de segurança
 			setTimeout(() => {
-				console.log('[Preloader] Timeout de segurança');
+				console.log('[Preloader] Timeout de segurança ativado');
 				videoEnded = true;
 				pageLoaded = true;
 				hidePreloader();
 			}, 10000);
 
+			// Bloqueia scroll
 			document.body.style.overflow = 'hidden';
+			document.documentElement.style.overflow = 'hidden';
 		})();
 	</script>
 
