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

160
src/app.html
View File

@ -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');
// 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>