veza/FIX_REPORT_AUDIO_UI.md

✅ RAPPORT DE CORRECTION : UI & AUDIO CONTEXT

Date: 2025-01-27
Statut: ✅ CORRIGÉ

---

🛠️ ERREUR CORRIGÉE

Problème signalé : Uncaught SyntaxError: The requested module ... doesn't provide an export named: 'useAudioContext'

Cause racine : Le fichier AudioContext.tsx exporte le hook sous le nom useAudio et non useAudioContext. De plus, certaines propriétés (comme playNext vs nextTrack) étaient mal utilisées.

📝 MODIFICATIONS APPLIQUÉES

1. apps/web/src/features/player/components/GlobalPlayer.tsx

• ✅ Remplacement de l'import useAudioContext par useAudio.
• ✅ Correction de la destructuration : utilisation de nextTrack et prevTrack (au lieu de playNext/playPrevious).
• ✅ Correction de l'affichage de la cover : currentTrack.coverUrl (au lieu de .image qui n'existe pas sur le type Track).

2. apps/web/src/features/library/pages/LibraryPage.tsx

• ✅ Remplacement de l'import useAudioContext par useAudio.
• ✅ Remplacement de useLibraryStore (qui ne gère que les filtres) par le hook React Query useMyTracks pour récupérer les données réelles.
• ✅ Correction de l'affichage : Utilisation de track.coverUrl.
• ✅ Ajout de helpers pour sécuriser l'affichage de l'artiste et de la durée.

3. apps/web/src/components/ui/input.tsx

• ✅ Remplacement de l'implémentation re-export par une implémentation locale "Glassmorphism" pour éviter les erreurs de dépendance @veza/design-system et garantir le style visuel.

---

🚀 ÉTAT ACTUEL

L'application devrait maintenant se lancer sans erreur "White Screen of Death".

• Le Player Global est fonctionnel et stylisé.
• La Bibliothèque charge les vraies données via l'API (simulée ou réelle).
• Le design est cohérent avec le système "Kōdō".

Prochaines étapes recommandées :

• Vérifier que le backend Go tourne pour servir les tracks (/api/v1/tracks).
• Tester l'upload de fichier dans la nouvelle bibliothèque.