Lecteur de Musique Aura

Le Défi

La gestion de la lecture audio en temps réel dans une application monopage (SPA) présente des défis uniques :

Synchronisation de l'état de lecture global avec l'élément HTMLAudioElement du navigateur.
Prévention des rendus inutiles lors de la mise à jour de données à haute fréquence (comme la progression de la lecture).
Gestion des mutations complexes de la file d'attente (aléatoire/répétition) à travers plusieurs modules.

Atomic Context Pattern : Au lieu d'un seul grand fournisseur, j'ai divisé l'état en contextes spécialisés (Lecture, Bibliothèque, File d'attente) pour respecter le principe de ségrégation des interfaces.
Synchronisation en phase de rendu : Implémentation d'un hook personnalisé useAudioEngine qui synchronise l'état pendant la phase de rendu, le rendant résilient au rendu concurrent de React 19.
Écosystème Type-Safe : Utilisation de TanStack Router pour le routage basé sur les fichiers et TanStack Query pour une récupération et une mise en cache robustes des données.

Optimisation du Re-render : En découplant le PlaybackTimeContext du MusicContext principal, j'ai réduit la surface de re-render d'environ 80% pendant la lecture active.
Persistance Offline-First : Création d'une couche middleware personnalisée pour le LocalStorage afin de garantir que les playlists et les mentions "j'aime" persistent d'une session à l'autre avec des mises à jour sans latence.
Mise en page orientée performance : Mise en œuvre d'une stratégie agressive de fractionnement du code (code-splitting) utilisant React.lazy et des squelettes Suspense, ce qui permet un temps d'interactivité (TTI) initial ultra-rapide.