fix(shorts): hover-chrome, swipe mobile garanti, avance auto fiabilisee
CI / build-and-test (push) Successful in 15m2s

Chrome auto-hide au hover desktop (2,5 s). Capteur tactile mobile : swipe garanti (l'iframe mangeait les touchers), tap = play/pause YT ou 6 s d'acces direct au lecteur sinon. Fleche retour accueil mobile, cadre quasi plein ecran. Avance auto : handshake YT listening (les evenements player n'arrivaient jamais), onStateChange canonique, retry borne anti-prefetch. Docs 9.9.
This commit is contained in:
2026-09-30 12:21:15 -04:00
parent 8f100d2b78
commit 3e1980283a
4 changed files with 198 additions and 25 deletions
+27 -2
View File
@@ -507,9 +507,10 @@ body {
}
}
@media (max-width: 767px) {
/* Mobile : cadre quasi plein écran (seuls les chips + marges sont réservés). */
/* Mobile : quasi plein écran (seule la rangée de chips est réservée :
la flèche retour et le chrome vivent EN OVERLAY dans le cadre). */
.shorts-frame {
--shorts-chrome: 8.5rem;
--shorts-chrome: 5.5rem;
}
}
@@ -547,6 +548,30 @@ body {
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
/* --- Shorts : chrome auto-hide + capteur tactile ---------------------------- */
/* Desktop : le chrome (pastilles, boutons, rail, méta) s'efface après 2,5 s
d'immobilité de la souris et revient au moindre mouvement (façon YouTube).
Sur tactile, `mousemove` ne tire presque jamais : tout reste visible. */
.shorts-chrome {
transition: opacity 0.25s ease;
}
.shorts-chrome-hidden .shorts-chrome {
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.shorts-chrome {
transition: none;
}
}
/* Capteur tactile mobile : couche transparente AU-DESSUS de l'iframe (qui
mangerait les touchers) mais SOUS le chrome. `touch-action: none` donne le
geste à nos handlers (swipe = navigation, tap = play/pause ou accès
lecteur) au lieu de scroller/zoomer la page. */
.shorts-gesture {
touch-action: none;
}
/* --- Drawer / overlay plumbing -------------------------------------------- */
/* Applied to <body> while a full-screen drawer or modal owns the viewport.
Note: deliberately NOT `touch-action: none` — touch-action is intersected up