Files

Eric Coissac 39dbf56416 Amélioration de l'overlay de couverture d'album

### Modifications principales

- Les métadonnées sont maintenant visibles par défaut à l'ouverture de l'overlay
- Ajout d'une barre de progression interactive dans le panneau des métadonnées (support souris et tactile)
- Style glassmorphism appliqué à l'overlay (fond transparent 35%, blur 30px, bordure subtile)
- Panneau réduit à 70% de largeur pour un look plus élégant
- Fermeture ergonomique sur mobile via swipe down (seuil 100px) avec feedback visuel
- Bouton X conservé pour desktop
- Blocage du pull-to-refresh Android

### Corrections supplémentaires

- Support tactile de la barre de progression principale (hors overlay)
- Utilisation de `100dvh` au lieu de `100vh` pour compatibilité avec les barres de navigation mobiles
- Corrections TypeScript pour les événements tactiles

2026-01-17 19:01:40 +01:00

2.1 KiB

Raw Blame History

Tâche : Amélioration de l'overlay de couverture d'album

Crate concernée : pmoapp/webapp

Statut : Terminée

Demande initiale

Point 1 : Métadonnées et progress bar

Quand on clique sur l'image de couverture de l'album, elle s'agrandit pour prendre tout l'espace. Par défaut les métadonnées sont cachées et si on clique sur l'écran, il y a un effet toggle. Il fallait que par défaut elles soient visibles, avec une progress bar draggable dans une petite boîte au fond gris transparent avec un effet glass metal à la macOS.

Point 2 : Ergonomie mobile

Le bouton de fermeture en haut à droite n'était pas ergonomique sur mobile où les doigts sont plutôt en bas de l'écran.

Synthèse des modifications

Fichier modifié

pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue

Point 1 : Résolu

Métadonnées visibles par défaut à l'ouverture
Progress bar interactive ajoutée dans le panneau des métadonnées (souris + tactile)
Style glassmorphism : fond transparent 35%, blur 30px, bordure subtile, ombre
Panneau réduit à 70% de largeur pour un look plus élégant

Point 2 : Résolu

Swipe down pour fermer l'overlay sur tactile (seuil 100px)
Feedback visuel pendant le geste (translation + fade)
Bouton X conservé pour desktop
Blocage du pull-to-refresh Android (overscroll-behavior: contain)

Corrections additionnelles

Support tactile de la progress bar principale (hors overlay)
Utilisation de 100dvh au lieu de 100vh pour compatibilité avec les barres de navigation mobiles (Brave, Safari, Chrome)
Corrections TypeScript pour les événements tactiles

Éléments techniques clés

Swipe down

const swipeStartY = ref(0);
const swipeCurrentY = ref(0);
const isSwiping = ref(false);
const swipeThreshold = 100;

Listeners ajoutés sur document pour capturer le mouvement même sur les éléments enfants.

CSS mobile

.cover-overlay {
    overscroll-behavior: contain;
    touch-action: none;
}
.cover-overlay-content {
    height: calc(100dvh - 32px);
}

2.1 KiB Raw Blame History