Eric Coissac
39dbf56416
### 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
64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
# 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
|
|
```typescript
|
|
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
|
|
```css
|
|
.cover-overlay {
|
|
overscroll-behavior: contain;
|
|
touch-action: none;
|
|
}
|
|
.cover-overlay-content {
|
|
height: calc(100dvh - 32px);
|
|
}
|
|
```
|