Spaces:
Sleeping
Sleeping
function generatePanelContent(data) { | |
const { movie, credits } = data; | |
const posterUrl = movie.poster_path | |
? `https://image.tmdb.org/t/p/w200${movie.poster_path}` | |
: 'default_image_url'; | |
const genres = movie.genres.map(genre => { | |
return `<a href="/genre/${genre.id}">${genre.name}</a>`; | |
}).join(', '); | |
const director = credits.crew.find(crewMember => crewMember.job === 'Director'); | |
const directorLink = director | |
? `<a href="/cast/${director.id}">${director.name}</a>` | |
: 'N/A'; | |
const cast = credits.cast.slice(0, 5).map(castMember => { | |
return `<a href="/cast/${castMember.id}">${castMember.name}</a>`; | |
}).join(', '); | |
const movieDetailsInnerHTML = ` | |
<h2>${movie.title}</h2> | |
<p>${movie.overview}</p> | |
<strong>Genres:</strong> ${genres}<br> | |
<strong>Director:</strong> ${directorLink}<br> | |
<strong>Cast:</strong> ${cast}`; | |
return { posterUrl, movieDetailsInnerHTML }; | |
} | |
function showDetails(movieId) { | |
fetch(`/movie/${movieId}`) | |
.then(response => response.json()) | |
.then(movie => { | |
fetch(`/movie/${movieId}/credits`) | |
.then(response => response.json()) | |
.then(credits => { | |
const panel = document.getElementById('side-panel'); | |
const overlay = document.getElementById('overlay'); | |
const moviePoster = document.getElementById('movie-poster'); | |
const movieDetails = document.getElementById('movie-details'); | |
// Retrieve posterUrl and movieDetailsInnerHTML from generatePanelContent | |
const { posterUrl, movieDetailsInnerHTML } = generatePanelContent({ movie, credits }); | |
// Update the respective DOM elements | |
moviePoster.src = posterUrl; | |
movieDetails.innerHTML = movieDetailsInnerHTML; | |
panel.classList.add('active'); // Add active class to slide in | |
overlay.classList.add('active'); // Show overlay | |
}); | |
}); | |
} | |
function closePanel() { | |
const panel = document.getElementById('side-panel'); | |
const overlay = document.getElementById('overlay'); | |
panel.classList.remove('active'); // Remove active class to slide out | |
overlay.classList.remove('active'); // Hide overlay | |
} |