# RAPPORT DE DIAGNOSTIC COMPLET - AudiOhm
**Date:** 2026-01-19 20:30
**Version:** 2.0
**Statut:** 🔴 BLOQUANT - Plusieurs bugs critiques identifiés

---

## 📋 RÉSUMÉ EXÉCUTIF

AudiOhm souffre de **plusieurs bugs critiques** qui empêchent le bon fonctionnement des fonctionnalités principales:
- ✅ Dropdown z-index - CORRIGÉ (non confirmé)
- ✅ Liked tracks endpoint - CORRIGÉ
- ✅ Auto-play queue race condition - CORRIGÉ
- 🔴 **AJOUT À LA PLAYLIST** - BUG CRITIQUE
- 🔴 **CONVERSION TRACKID** - BUG CRITIQUE

---

## 🐛 BUGS CRITIQUES IDENTIFIÉS

### 1. BUG CRITIQUE: Conversion trackId (youtube_id vs UUID)
**Localisation:** `/opt/audiOhm/backend/app/static/js/app.js`
**Fonctions affectées:**
- `addTrackToPlaylist()` (ligne 3248)
- `toggleLikeTrack()` (ligne 1591)
- Probablement d'autres fonctions utilisant trackId

**Problème:**
```javascript
// Dans renderTracks() - ligne 2249-2255
<div data-id="${track.id}"              // ← C'est l'UUID de la BDD
     data-youtube-id="${track.youtube_id || ''}"  // ← C'est l'ID YouTube
     onclick="playTrack('${track.id}', ${isYoutubeTrack})">
```

```javascript
// Dans addTrackToPlaylist() - ligne 3264-3266
body: JSON.stringify({
    track_ids: [trackId]  // ← Problème: trackId peut être youtube_id (string) au lieu de UUID
})
```

**Détail du problème:**
- Lors de la recherche YouTube, `track.id` contient l'UUID de la base de données
- MAIS pour les pistes YouTube qui ne sont pas encore dans la BDD, `track.id` pourrait être le `youtube_id`
- L'API backend `/api/v1/playlists/{id}/tracks` attend un **UUID valide**
- Le schéma `AddTrackRequest` valide: `track_ids: List[UUID]`
- Si on envoie un string youtube_id, Pydantic génère une erreur 422

**Preuve:**
```bash
# Dans les logs du backend:
"POST /api/v1/playlists/6244fc0b-dce5-4626-a4ab-5bbb737a82c0/tracks HTTP/1.1" 422 Unprocessable Content
```

### 2. BUG CRITIQUE: addTrackToPlaylist utilise le mauvais ID
**Localisation:** `/opt/audiOhm/backend/app/static/js/app.js` ligne 3265

**Problème:**
La fonction `addTrackToPlaylist(trackId, playlistId, playlistName)` reçoit un `trackId` qui est passé depuis `renderTracks()`. Dans `renderTracks()`, le trackId passé est `track.id` (ligne 2255), qui peut être:
1. Un UUID de base de données (correct)
2. Un youtube_id pour les pistes pas encore en BDD (INCORRECT pour l'API playlist)

**Solution requise:**
Il faut s'assurer que le trackId passé à l'API est toujours un UUID valide. Pour les pistes YouTube pas encore dans la BDD, il faut:
1. Soit les créer d'abord dans la BDD via un endpoint
2. Soit modifier l'API pour accepter les youtube_id
3. Soit empêcher l'ajout à la playlist tant que la piste n'est pas dans la BDD

### 3. BUG: playNext/playPrevious non implémentés dans app-optimized.js
**Localisation:** `/opt/audiOhm/backend/app/static/js/app-optimized.js` lignes 401-409

**Problème:**
```javascript
function playPrevious() {
    // Implement previous track logic
    showToast('Non disponible pour le moment', 'error');  // ← PAS IMPLÉMENTÉ!
}

function playNext() {
    // Implement next track logic
    showToast('Non disponible pour le moment', 'error');  // ← PAS IMPLÉMENTÉ!
}
```

**Impact:**
- Le fichier `app-optimized.js` semble être une version minifiée/optimisée
- MAIS le fichier HTML utilise `app.js` (ligne 780 de index.html)
- Donc ce bug n'est PAS actif actuellement, mais c'est une bombe à retardement

**Recommandation:**
- Soit supprimer `app-optimized.js` s'il n'est pas utilisé
- Soit le mettre à jour avec les bonnes implémentations de `app.js`

---

## ✅ FONCTIONNALITÉS VÉRIFIÉES

### Backend API
- ✅ Serveur uvicorn tourne sur le port 8000
- ✅ Documentation Swagger disponible: http://localhost:8000/api/docs
- ✅ Endpoint `/api/v1/library/liked-tracks` fonctionne
- ✅ Endpoint `/api/v1/library/liked-tracks/{track_id}` (POST/DELETE) fonctionne
- ✅ Endpoint `/api/v1/playlists` fonctionne
- ✅ Endpoint `/api/v1/playlists/{id}/tracks` fonctionne mais attend des UUIDs valides

### Frontend JavaScript
- ✅ `playNext()` implémenté dans app.js (ligne 932)
- ✅ `playPrevious()` implémenté dans app.js (ligne 844)
- ✅ `toggleLikeTrack()` implémenté (ligne 1591)
- ✅ `loadLikedTracks()` utilise le bon endpoint `/api/v1/library/liked-tracks` (ligne 1435)
- ✅ Gestion de la queue implémentée
- ✅ Auto-play avec `handleTrackEnd()` (ligne 1133)

---

## 🔧 CORRECTIONS À APPORTER

### Correction 1: S'assurer que les trackId sont des UUID valides
**Fichier:** `/opt/audiOhm/backend/app/static/js/app.js`

**Option A:** Modifier `addTrackToPlaylist` pour créer la piste d'abord:
```javascript
window.addTrackToPlaylist = async function(trackId, playlistId, playlistName) {
    console.log('[addTrackToPlaylist] Track ID:', trackId, 'Playlist ID:', playlistId);

    try {
        const token = localStorage.getItem('token');

        // Vérifier si c'est un UUID valide
        const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
        let actualTrackId = trackId;

        // Si ce n'est pas un UUID, c'est probablement un youtube_id
        // Il faut créer la piste dans la BDD d'abord ou trouver son UUID
        if (!uuidRegex.test(trackId)) {
            console.log('[addTrackToPlaylist] Track ID is not a UUID, searching for track...');
            // TODO: Implémenter la recherche ou création de la piste
            showToast('Cette piste doit être jouée avant d\'être ajoutée à une playlist', 'warning');
            return;
        }

        const response = await fetch(`/api/v1/playlists/${playlistId}/tracks`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({
                track_ids: [actualTrackId]
            })
        });

        // ... reste du code
    } catch (error) {
        console.error('[addTrackToPlaylist] Exception:', error);
        showToast('Erreur de connexion', 'error');
    }
};
```

**Option B:** Modifier le backend pour accepter les youtube_id:
```python
# Dans app/api/v1/playlists.py
@router.post("/{playlist_id}/tracks", response_model=PlaylistResponse)
async def add_tracks(
    playlist_id: str,
    track_data: AddTrackRequest,
    current_user: CurrentUser,
    db: DBSession,
):
    # ... code existant qui accepte déjà les UUIDs
```

### Correction 2: Mettre à jour ou supprimer app-optimized.js
**Fichier:** `/opt/audiOhm/backend/app/static/js/app-optimized.js`

Soit:
1. Copier les implémentations correctes de `app.js` vers `app-optimized.js`
2. Ou supprimer `app-optimized.js` s'il n'est pas utilisé

### Correction 3: Améliorer la gestion des erreurs
Ajouter des messages d'erreur plus clairs pour les utilisateurs quand:
- Une piste YouTube doit être jouée avant d'être ajoutée à une playlist
- Un UUID invalide est détecté

---

## 📊 TESTS À EFFECTUER

### Tests Backend
```bash
# 1. Test de l'endpoint add track avec UUID valide
curl -X POST http://localhost:8000/api/v1/playlists/{playlist_id}/tracks \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {token}" \
  -d '{"track_ids": ["4b7e394f-2c28-4c5a-8e1e-06be72b4bd37"]}'

# 2. Test de l'endpoint avec youtube_id (doit échouer actuellement)
curl -X POST http://localhost:8000/api/v1/playlists/{playlist_id}/tracks \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {token}" \
  -d '{"track_ids": ["dQw4w9WgXcQ"]}'
```

### Tests Frontend
1. ✅ Se connecter à l'application
2. ✅ Rechercher une piste YouTube
3. ❌ Cliquer sur "Ajouter à la playlist" → **DOIT ÉCHOUER**
4. ✅ Jouer une piste
5. ✅ Vérifier que la piste s'ajoute à la queue
6. ✅ Vérifier que le bouton Next fonctionne
7. ✅ Vérifier que l'auto-play fonctionne à la fin du morceau
8. ✅ Vérifier le chargement des liked tracks

---

## 🎯 PRIORITÉS DE CORRECTION

### 🔴 URGENT - Bloquant
1. **Corriger la conversion trackId** pour l'ajout à la playlist
2. **Tester manuellement** la correction

### 🟡 MOYEN - Important
3. **Mettre à jour app-optimized.js** ou le supprimer
4. **Améliorer les messages d'erreur**

### 🟢 FAIBLE - Amélioration
5. Ajouter des tests automatisés
6. Améliorer la documentation

---

## 📝 NOTES

- Le backend est fonctionnel et bien structuré
- L'API respecte les standards REST
- Le schéma Pydantic est correct (attend des UUIDs)
- Le problème principal est dans le frontend qui mélange youtube_id et UUID

**Conclusion:** Le système est bien conçu mais il y a une incohérence entre les IDs utilisés dans le frontend (youtube_id) et ce que l'API backend attend (UUID de base de données).