From 4b860af7fa4d1d6c5435d077be9369542c01dd12 Mon Sep 17 00:00:00 2001 From: Whykioh Date: Mon, 13 Apr 2026 02:31:16 +0200 Subject: [PATCH] add movies details --- watchgether/RequestHandler.php | 10 +++ watchgether/js/index.js | 144 +++++++++++++++++++++++++++------ 2 files changed, 130 insertions(+), 24 deletions(-) diff --git a/watchgether/RequestHandler.php b/watchgether/RequestHandler.php index 411a27f..866b03c 100644 --- a/watchgether/RequestHandler.php +++ b/watchgether/RequestHandler.php @@ -111,6 +111,16 @@ switch ($action) { ]); echo json_encode(['success' => $success]); exit; + + case 'getMovieDetails': + $id = $params['id']; + $type = $params['type']; // 'movie' ou 'tv' + // On demande les détails + les crédits (acteurs) en une seule fois + $url = "https://api.themoviedb.org/3/$type/$id?api_key=$apiKey&language=fr-FR&append_to_response=credits"; + + $response = file_get_contents($url); + echo $response; + exit; default: echo json_encode(['success' => false, 'error' => 'Action inconnue']); diff --git a/watchgether/js/index.js b/watchgether/js/index.js index c19b1e7..6640eac 100644 --- a/watchgether/js/index.js +++ b/watchgether/js/index.js @@ -1,53 +1,141 @@ -// Fonction principale pour parler au RequestHandler +// --- CONFIGURATION & UTILITAIRES --- + +/** + * Fonction universelle pour parler à ton RequestHandler + * @param {string} action - L'action à exécuter (ex: 'searchTMDB') + * @param {object} params - Les données à envoyer + */ async function apiRequest(action, params = {}) { - const response = await fetch('RequestHandler.php', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' // J'ai enlevé le ":" après Type - }, - body: JSON.stringify({ action, params }) - }); - return await response.json(); + try { + const response = await fetch('RequestHandler.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ action, params }) + }); + return await response.json(); + } catch (error) { + console.error("Erreur API:", error); + return { success: false, error: "Erreur de connexion au serveur" }; + } } -// Action de recherche +// --- RECHERCHE --- + +/** + * Lance la recherche TMDB et affiche les résultats sous forme de cartes + */ async function performSearch() { const query = document.getElementById('searchInput').value; if (!query) return; const grid = document.getElementById('resultsGrid'); - grid.innerHTML = '

Recherche en cours...

'; + grid.innerHTML = '

Recherche de pépites en cours...

'; const data = await apiRequest('searchTMDB', { query: query }); - grid.innerHTML = ''; // On vide le message de chargement + grid.innerHTML = ''; // On vide - if (data.results) { + if (data.results && data.results.length > 0) { data.results.forEach(item => { - if (!item.poster_path) return; + // On ignore les résultats sans image ou qui ne sont pas film/série + if (!item.poster_path || (item.media_type !== 'movie' && item.media_type !== 'tv')) return; const title = item.title || item.name; const poster = `https://image.tmdb.org/t/p/w500${item.poster_path}`; const type = item.media_type === 'tv' ? 'serie' : 'film'; + const year = (item.release_date || item.first_air_date || "").substring(0, 4); const card = document.createElement('div'); - card.className = 'bg-slate-800 rounded-xl overflow-hidden border border-slate-700 hover:scale-105 transition-transform'; + card.className = 'bg-slate-800 rounded-xl overflow-hidden border border-slate-700 hover:scale-105 transition-transform cursor-pointer group'; card.innerHTML = ` - +
+ +
+ Voir la fiche +
+

${title}

- +
+ ${type} + ${year} +
`; grid.appendChild(card); }); + } else { + grid.innerHTML = '

Aucun résultat trouvé pour cette recherche.

'; } } -// Action d'ajout +// --- FICHE DÉTAILLÉE (MODAL) --- + +/** + * Récupère les détails complets d'un film et ouvre la modal + */ +async function showDetails(id, type) { + // TMDB utilise 'movie' ou 'tv', on s'assure d'avoir le bon type + const mediaType = (type === 'serie') ? 'tv' : type; + + const movie = await apiRequest('getMovieDetails', { id: id, type: mediaType }); + if (!movie) return; + + const modal = document.getElementById('movieModal'); + + // 1. Textes de base + document.getElementById('modalTitle').innerText = movie.title || movie.name; + const year = (movie.release_date || movie.first_air_date || "").substring(0, 4); + const duration = movie.runtime ? `${movie.runtime} min` : (movie.number_of_seasons ? `${movie.number_of_seasons} Saison(s)` : ""); + const genres = movie.genres.map(g => g.name).join(', '); + + document.getElementById('modalMeta').innerText = `${year} • ${genres} ${duration ? '• ' + duration : ''}`; + document.getElementById('modalOverview').innerText = movie.overview || "Aucun synopsis disponible pour le moment."; + document.getElementById('modalVote').innerText = movie.vote_average ? movie.vote_average.toFixed(1) : "N/A"; + + // 2. Images (Bannière) + const bannerUrl = movie.backdrop_path ? `https://image.tmdb.org/t/p/original${movie.backdrop_path}` : ''; + document.getElementById('modalBanner').style.backgroundImage = `url(${bannerUrl})`; + + // 3. Réalisateur + const director = movie.credits.crew.find(person => person.job === 'Director'); + document.getElementById('modalDirector').innerText = director ? director.name : "Non renseigné"; + + // 4. Casting (Les 8 premiers) + const castContainer = document.getElementById('modalCast'); + castContainer.innerHTML = movie.credits.cast.slice(0, 8).map(actor => ` +
+ +

${actor.name}

+

${actor.character}

+
+ `).join(''); + + // 5. Bouton Ajouter (on passe les infos pour la BDD) + const simplifiedType = (mediaType === 'tv') ? 'serie' : 'film'; + document.getElementById('modalAddBtn').onclick = () => addMovie(movie.id, movie.title || movie.name, movie.poster_path, simplifiedType); + + // Affichage + modal.classList.remove('hidden'); + document.body.style.overflow = 'hidden'; +} + +/** + * Ferme la modal + */ +function closeModal() { + document.getElementById('movieModal').classList.add('hidden'); + document.body.style.overflow = 'auto'; +} + +// --- ACTIONS BDD --- + +/** + * Ajoute un film dans la base de données MySQL + */ async function addMovie(tmdbId, title, posterPath, type) { const result = await apiRequest('addMovie', { tmdb_id: tmdbId, @@ -57,8 +145,16 @@ async function addMovie(tmdbId, title, posterPath, type) { }); if (result.success) { - alert('Ajouté à la liste !'); + alert(`"${title}" a été ajouté à votre liste ! 🍿`); + closeModal(); } else { - alert('Erreur lors de l\'ajout.'); + alert('Erreur lors de l\'ajout. Vérifie si le film n\'est pas déjà présent.'); } -} \ No newline at end of file +} + +// Permettre la recherche avec la touche "Entrée" +document.getElementById('searchInput').addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + performSearch(); + } +}); \ No newline at end of file