Netflix-Clone/script.js at main · AnishCoder2006/Netflix-Clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const API_KEY= 'a23ff8fd91b91df7d2e56ac0b1c8b166';
const BASE_URL='https://api.themoviedb.org/3';
const IMG_BASE_URL='https://image.tmdb.org/t/p/w500';
const PLACEHOLDER_IMAGE = 'https://via.placeholder.com/500x750?text=No+Poster';


async function fetchTrending() {
    const response = await fetch(`${BASE_URL}/trending/movie/week?api_key=${API_KEY}`);
    const data = await response.json();
    displayMovies(data.results, 'trending');
}
async function fetchTopRated(){
    const response =await fetch(`${BASE_URL}/movie/top_rated?api_key=${API_KEY}`);
    const data=await response.json();
    displayMovies(data.results,'top-rated');
}
//display movie in rows
function displayMovies(movies,elementId){
    const row=document.getElementById(elementId);
    row.innerHTML=movies.map(movie=>`
    <div class="movie-item" data-title="${movie.title || 'Untitled'}">
        <img
            src="${movie.poster_path ? IMG_BASE_URL + movie.poster_path : PLACEHOLDER_IMAGE}"
            alt="${movie.title || 'Untitled movie'}"
            class="movie-poster"
            loading="lazy"

              data-id="${movie.id}"
        >
    </div>`).join('');
}
async function showMovieDetails(movieId){
 console.log("Fetching details for movie ID:", movieId);
try{
const movieResponse= await fetch(`${BASE_URL}/movie/${movieId}?api_key=${API_KEY}`);
const movieData= await movieResponse.json();

const videosResponse= await fetch(`${BASE_URL}/movie/${movieId}/videos?api_key=${API_KEY}`);
const videosData=await videosResponse.json();
const trailer=videosData.results.find(v=>v.type==='Trailer');

document.getElementById('modalTitle').textContent=movieData.title;
document.getElementById('modalYear').textContent=movieData.release_date?new Date(movieData.release_date).getFullYear()
:'N/A';
document.getElementById('modalRating').textContent=movieData.vote_average?movieData.vote_average.toFixed(1):'N/A';
document.getElementById('modalRuntime').textContent=movieData.runtime?`${Math.floor(movieData.runtime/60)}h ${movieData.runtime%60}m`:'N/A';
document.getElementById('modalOverview').textContent=movieData.overview || 'No overview available.';
document.getElementById('modalPoster').src=movieData.poster_path?`${IMG_BASE_URL}${movieData.poster_path}` : PLACEHOLDER_IMAGE;
document.getElementById('modalLanguage').textContent=movieData.original_language?movieData.original_language.toUpperCase():"N/A";

       const trailerBtn = document.getElementById('playTrailerBtn');
        if (trailer) {
            trailerBtn.onclick = () => {
                document.getElementById('trailerFrame').src = `https://www.youtube.com/embed/${trailer.key}?autoplay=1`;
                new bootstrap.Modal(document.getElementById('trailerModal')).show();
            };
            trailerBtn.disabled = false;
            trailerBtn.classList.remove('btn-secondary');
            trailerBtn.classList.add('btn-danger');
        } else {
            trailerBtn.disabled = true;
            trailerBtn.classList.remove('btn-danger');
            trailerBtn.classList.add('btn-secondary');
        }


        new bootstrap.Modal(document.getElementById('movieModal')).show();
    }
         catch (error) {
        console.error('Error loading movie details:', error);
        alert('Failed to load movie details. Please try again.');
         new bootstrap.Modal(document.getElementById('movieModal')).show();
    }
    }
document.getElementById('trailerModal').addEventListener('hidden.bs.modal', () => {
    document.getElementById('trailerFrame').src = '';
});

// Add event delegation for movie clicks
document.addEventListener('click', async function(e) {
    const poster = e.target.closest('.movie-poster');
    if (!poster) return;

    const movieId = poster.dataset.id;

    // Validate the ID
    if (!movieId || isNaN(parseInt(movieId))) {
        console.error('Invalid movie ID:', movieId);
        alert('Invalid movie selection. Please try another.');
        return;
    }

    console.log('Loading movie ID:', movieId); // Debug log
    await showMovieDetails(movieId);
});


fetchTrending();
fetchTopRated();