pmomusic/Blackboard/Report/large_cover.md

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

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