BassPago/Front-End
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Adjusting preloading

Browse Source
This commit is contained in:
Pedro Chueiri 2026-02-18 23:58:48 -03:00
parent 47c6f83483
commit 3cc923d9c6
1 changed files with 119 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/app.html
View File

@ -8,7 +8,6 @@
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="author" content="Bass Pago" /> <meta name="author" content="Bass Pago" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
@ -33,9 +32,16 @@
<script src="//code.jivosite.com/widget/8fspsVOybp" async></script> <script src="//code.jivosite.com/widget/8fspsVOybp" async></script>
<style> <style>
* {
box-sizing: border-box;
}
html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: 100%;
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #000; background: #000;
overflow: hidden; overflow: hidden;
@ -125,52 +131,59 @@
} }
} }
/* Media queries ajustadas para mobile */
@media (max-width: 900px) { @media (max-width: 900px) {
.video-container { .video-container {
width: 700px; width: 90vw;
height: 394px; height: 50.625vw;
max-height: 60vh;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.video-container { .video-container {
width: 600px; width: 95vw;
height: 338px; height: 53.4375vw;
} max-height: 65vh;
}
@media (max-width: 650px) {
.video-container {
width: 500px;
height: 281px;
}
}
@media (max-width: 550px) {
.video-container {
width: 450px;
height: 253px;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.video-container { .video-container {
width: 400px; width: 98vw;
height: 225px; height: 55.125vw;
} max-height: 70vh;
}
@media (max-width: 420px) {
.video-container {
width: 360px;
height: 202px;
} }
} }
@media (max-width: 380px) { @media (max-width: 380px) {
.video-container { .video-container {
width: 320px; width: 100vw;
height: 180px; 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> </style>
@ -181,7 +194,8 @@
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div id="video-preloader"> <div id="video-preloader">
<div class="video-container"> <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"> <source src="/preloading.mp4" type="video/mp4">
</video> </video>
@ -202,6 +216,11 @@
let videoEnded = false; let videoEnded = false;
let pageLoaded = 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() { function hidePreloader() {
if (preloader) { if (preloader) {
@ -212,6 +231,7 @@
if (app) { if (app) {
app.classList.add('loaded'); app.classList.add('loaded');
document.body.style.overflow = 'auto'; document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
} }
}, 800); }, 800);
} }
@ -224,6 +244,7 @@
} }
function showFallback() { function showFallback() {
console.log('[Preloader] Mostrando fallback');
if (video && fallback) { if (video && fallback) {
video.style.display = 'none'; video.style.display = 'none';
fallback.style.display = 'flex'; 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) { 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', () => { video.addEventListener('ended', () => {
console.log('[Preloader] Vídeo terminou'); console.log('[Preloader] Vídeo terminou');
videoEnded = true; videoEnded = true;
checkIfCanHide(); checkIfCanHide();
}); });
video.addEventListener('error', () => { video.addEventListener('error', (e) => {
console.log('[Preloader] Erro no vídeo, usando fallback'); console.log('[Preloader] Erro no vídeo:', e);
showFallback(); showFallback();
}); });
const playPromise = video.play(); // Timeout específico para detectar se o vídeo não conseguiu reproduzir
if (playPromise !== undefined) { setTimeout(() => {
playPromise if (!videoStarted) {
.then(() => { console.log('[Preloader] Vídeo não iniciou no tempo esperado');
console.log('[Preloader] Vídeo reproduzindo'); showFallback();
}) }
.catch(() => { }, isMobile ? 3000 : 2000);
console.log('[Preloader] Erro ao reproduzir, usando fallback');
showFallback(); // Tenta reproduzir imediatamente
}); tryPlayVideo();
}
} else { } else {
console.log('[Preloader] Elemento de vídeo não encontrado');
showFallback(); showFallback();
} }
@ -268,14 +339,17 @@
checkIfCanHide(); checkIfCanHide();
}); });
// Timeout de segurança
setTimeout(() => { setTimeout(() => {
console.log('[Preloader] Timeout de segurança'); console.log('[Preloader] Timeout de segurança ativado');
videoEnded = true; videoEnded = true;
pageLoaded = true; pageLoaded = true;
hidePreloader(); hidePreloader();
}, 10000); }, 10000);
// Bloqueia scroll
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
})(); })();
</script> </script>