fix(shorts): hover-chrome, swipe mobile garanti, avance auto fiabilisee
CI / build-and-test (push) Successful in 15m2s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user