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
90 lines
3.2 KiB
Markdown
90 lines
3.2 KiB
Markdown
# Rapport : Amélioration de l'overlay de couverture d'album
|
|
|
|
## Résumé
|
|
|
|
Amélioration de l'interface de l'overlay affichant la couverture d'album en grand dans le Control Point PMOMusic, avec focus sur l'ergonomie mobile.
|
|
|
|
## Fichier modifié
|
|
|
|
- `pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue`
|
|
|
|
## Modifications effectuées
|
|
|
|
### Point 1 : Métadonnées visibles par défaut + Progress bar
|
|
|
|
**Problème initial** : Les métadonnées étaient cachées par défaut à l'ouverture de l'overlay.
|
|
|
|
**Solutions implémentées** :
|
|
|
|
1. **Métadonnées visibles par défaut** : `showMetadata.value = true` dans `openCoverOverlay()`
|
|
|
|
2. **Ajout de la progress bar** dans le panneau des métadonnées :
|
|
- Barre de progression interactive avec thumb draggable
|
|
- Affichage temps écoulé / durée totale
|
|
- Support souris et tactile complet
|
|
- Style glassmorphism (fond transparent 35%, blur, bordure subtile)
|
|
|
|
3. **Panneau plus discret** :
|
|
- Transparence augmentée (35% au lieu de 60%)
|
|
- Largeur réduite (70% de l'écran avec `left: 15%; right: 15%`)
|
|
|
|
### Point 2 : Fermeture ergonomique sur mobile
|
|
|
|
**Problème initial** : Bouton X en haut à droite difficile d'accès au pouce.
|
|
|
|
**Solutions implémentées** :
|
|
|
|
1. **Swipe down pour fermer** :
|
|
- Geste naturel vers le bas pour fermer l'overlay
|
|
- Feedback visuel (translation + diminution opacité)
|
|
- Seuil de 100px pour déclencher la fermeture
|
|
- Listeners sur `document` pour capturer le mouvement même sur les éléments enfants
|
|
|
|
2. **Bouton X conservé** pour desktop/souris
|
|
|
|
3. **Blocage du pull-to-refresh Android** :
|
|
- `overscroll-behavior: contain`
|
|
- `touch-action: none` sur l'overlay
|
|
|
|
### Corrections supplémentaires
|
|
|
|
1. **Support tactile progress bar principale** : Ajout de `@touchstart` sur la progress bar hors overlay
|
|
|
|
2. **Compatibilité viewport mobile** : Remplacement de `100vh` par `100dvh` (dynamic viewport height) pour éviter que la barre du navigateur masque le contenu
|
|
|
|
3. **Corrections TypeScript** : Vérifications `if (!touch) return` pour les événements tactiles
|
|
|
|
## Détails techniques
|
|
|
|
### Nouvelles variables réactives
|
|
|
|
```typescript
|
|
const swipeStartY = ref(0);
|
|
const swipeCurrentY = ref(0);
|
|
const isSwiping = ref(false);
|
|
const swipeThreshold = 100;
|
|
```
|
|
|
|
### Nouvelles fonctions
|
|
|
|
- `handleOverlayTouchStart()` : Initialise le swipe et ajoute les listeners document
|
|
- `handleSwipeTouchMove()` : Suit le mouvement du doigt
|
|
- `handleSwipeTouchEnd()` : Ferme si seuil atteint, nettoie les listeners
|
|
- `handleOverlayProgressBarTouchStart()` : Gestion tactile du seek (réutilisée par les deux progress bars)
|
|
- `swipeOffset` / `swipeOpacity` : Computed pour le feedback visuel
|
|
|
|
### Nouveaux styles CSS
|
|
|
|
- `.overlay-metadata-text` : Conteneur du texte
|
|
- `.overlay-progress-section` : Section progress bar
|
|
- `.overlay-progress-bar` / `-fill` / `-thumb` : Style glassmorphism
|
|
- `.overlay-time-display` : Affichage temps
|
|
- `.cover-overlay-content.swiping` : État pendant le swipe
|
|
- `overscroll-behavior: contain` + `touch-action: none` : Blocage pull-to-refresh
|
|
- `100dvh` : Viewport dynamique pour mobile
|
|
|
|
### Responsive
|
|
|
|
- Mobile (< 768px) : Progress bar 10px, thumb 28px
|
|
- Mode kiosque (800x600) : Progress bar 6px
|