diff --git a/index.js b/index.js index e26f241..de21615 100644 --- a/index.js +++ b/index.js @@ -108,8 +108,8 @@ function login() { } /* This will need to be stored somewhere else at some point for security reasons */ -const API_KEY = 'api_key=bb1d4e0661af455e02af1ea99fb85fcb'; const BASE_URL = 'https://api.themoviedb.org/3/'; +const API_KEY = 'api_key=bb1d4e0661af455e02af1ea99fb85fcb'; const SEARCH_QUERY = '&query=searchTerm'; /* This can be formatted to include whatever you want -- 'movie/upcoming' is just a placeholder for now */ //const API_URL_ = BASE_URL + '/movie/popular?/similar' + API_KEY + '&language=en-US&page=1'; @@ -777,10 +777,8 @@ function getTrendingMovies(url) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; - const TRAILER_URL = - BASE_URL + 'movie/' + movie.id + 'videos?' + API_KEY; fetch(DETAIL_URL) .then(res => res.json()) .then(data => { @@ -788,6 +786,7 @@ function getTrendingMovies(url) { }); }); }) + .catch(error => { console.log(error); }); @@ -795,25 +794,63 @@ function getTrendingMovies(url) { /* Passed a movie, which will contain all of the needed information about the individual movie (runtime, videos, etc) */ function displayTrendingMovies(data) { - console.log("Movie -- ", data); - const { - title, + const { + title, poster_path, vote_average, overview, backdrop_path, release_date, runtime, + reviews, budget, revenue, genres, status, tagline, + videos, + credits, + similar, id } = data; - + const backdrop_url = POSTER_URL + backdrop_path; const specialChar = title + id; + const specialCharReviews = id + title; + const specialCharSimilar = id + title + '&'; + const specialCharCast = id + title + '/'; + const specialCharWatchProviders = id + title + '.'; + + let movieGenre = ''; + let formattedRevenue = ''; + let formattedBudget = ''; + + /* Formats the revenue and budget into USD */ + const formatter= new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }) + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) + + if (revenue == 0) { + formattedRevenue = "N/A"; + } else { + formattedRevenue = formatter.format(revenue); + } + + if (budget == 0) { + formattedBudget = "N/A"; + + } else { + formattedBudget = formatter.format(budget); + } + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) const movieEl = `
@@ -823,7 +860,7 @@ function displayTrendingMovies(data) { }" alt="poster" style="margin-right: 0px !important; height: 300px !important; width: 200px !important;"> -
+
`; + movieCarousel.innerHTML += movieEl; - getTrailer(videos.results, specialChar); + + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilar(similar.results, specialCharSimilar); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -909,10 +968,8 @@ function getTopMovies(url) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; - const TRAILER_URL = - BASE_URL + 'movie/' + movie.id + 'videos?' + API_KEY; fetch(DETAIL_URL) .then(res => res.json()) .then(data => { @@ -927,26 +984,63 @@ function getTopMovies(url) { /* Will loop through the data returned by the previous API call & display various pieces of info in HTML */ function displayTopMovies(data) { - // console.log("Movie -- ", data); const { title, - poster_path, - backdrop_path, - release_date, - vote_average, - budget, - revenue, - genres, - status, - tagline, - runtime, - overview, + poster_path, + vote_average, + overview, + backdrop_path, + release_date, + runtime, + reviews, + budget, + revenue, + genres, + status, + tagline, videos, - id, - } = data; + credits, + similar, + id + } = data; - const backdrop_url = POSTER_URL + backdrop_path; - const specialChar = title + id; + const backdrop_url = POSTER_URL + backdrop_path; + const specialChar = title + id; + const specialCharReviews = id + title; + const specialCharSimilar = id + title + '&&'; + const specialCharCast = id + title + '//'; + const specialCharWatchProviders = id + title + '..'; + let movieGenre = ''; + + let formattedRevenue = ''; + let formattedBudget = ''; + + /* Formats the revenue and budget into USD */ + const formatter= new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }) + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) + + if (revenue == 0) { + formattedRevenue = "N/A"; + } else { + formattedRevenue = formatter.format(revenue); + } + + if (budget == 0) { + formattedBudget = "N/A"; + + } else { + formattedBudget = formatter.format(budget); + } + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) const movieEl = `
@@ -956,7 +1050,7 @@ function displayTopMovies(data) { }" alt="poster" style="margin-right: 0px !important; height: 300px !important; width: 200px !important;"> -
+
- - - ❮ - - ❯ -
`; - movieCarousel2.innerHTML += movieEl; + + movieCarousel2.innerHTML += movieEl; + + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilar(similar.results, specialCharSimilar); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -1030,7 +1159,7 @@ function getPlayingMovies(url) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; const TRAILER_URL = BASE_URL + 'movie/' + movie.id + 'videos?' + API_KEY; @@ -1048,23 +1177,63 @@ function getPlayingMovies(url) { /* Will loop through the data returned by the previous API call & display various pieces of info in HTML */ function displayPlayingMovies(data) { - // console.log("Movie -- ", data); const { title, - poster_path, - vote_average, - overview, - backdrop_path, - release_date, - runtime, - budget, - revenue, - genres, - status, - tagline, - } = data; + poster_path, + vote_average, + overview, + backdrop_path, + release_date, + runtime, + reviews, + budget, + revenue, + genres, + status, + tagline, + videos, + credits, + similar, + id + } = data; - const backdrop_url = POSTER_URL + backdrop_path; + const backdrop_url = POSTER_URL + backdrop_path; + const specialChar = title + id; + const specialCharReviews = id + title; + const specialCharSimilar = id + title + '&&&'; + const specialCharCast = id + title + '///'; + const specialCharWatchProviders = id + title + '...'; + let movieGenre = ''; + + let formattedRevenue = ''; + let formattedBudget = ''; + + /* Formats the revenue and budget into USD */ + const formatter= new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }) + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) + + if (revenue == 0) { + formattedRevenue = "N/A"; + } else { + formattedRevenue = formatter.format(revenue); + } + + if (budget == 0) { + formattedBudget = "N/A"; + + } else { + formattedBudget = formatter.format(budget); + } + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) const movieEl = `
@@ -1074,7 +1243,7 @@ function displayPlayingMovies(data) { }" alt="poster" style="margin-right: 0px !important; height: 300px !important; width: 200px !important;"> -
+
- - - ❮ - - ❯ -
`; + movieCarousel6.innerHTML += movieEl; + + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilar(similar.results, specialCharSimilar); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -1150,7 +1352,7 @@ function getUpcomingMovies(url) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; const TRAILER_URL = BASE_URL + 'movie/' + movie.id + 'videos?' + API_KEY; @@ -1168,23 +1370,63 @@ function getUpcomingMovies(url) { /* Will loop through the data returned by the previous API call & display various pieces of info in HTML */ function displayUpcomingMovies(data) { - // console.log("Movie -- ", data); const { title, - poster_path, - vote_average, - overview, - backdrop_path, - release_date, - runtime, - budget, - revenue, - genres, - status, - tagline, - } = data; + poster_path, + vote_average, + overview, + backdrop_path, + release_date, + runtime, + reviews, + budget, + revenue, + genres, + status, + tagline, + videos, + credits, + similar, + id + } = data; - const backdrop_url = POSTER_URL + backdrop_path; + const backdrop_url = POSTER_URL + backdrop_path; + const specialChar = title + id; + const specialCharReviews = id + title; + const specialCharSimilar = id + title + '&&&&'; + const specialCharCast = id + title + '////'; + const specialCharWatchProviders = id + title + '....'; + let movieGenre = ''; + + let formattedRevenue = ''; + let formattedBudget = ''; + + /* Formats the revenue and budget into USD */ + const formatter= new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }) + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) + + if (revenue == 0) { + formattedRevenue = "N/A"; + } else { + formattedRevenue = formatter.format(revenue); + } + + if (budget == 0) { + formattedBudget = "N/A"; + + } else { + formattedBudget = formatter.format(budget); + } + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) const movieEl = `
@@ -1194,7 +1436,7 @@ function displayUpcomingMovies(data) { }" alt="poster" style="margin-right: 0px !important; height: 300px !important; width: 200px !important;"> -
+
-
- - - ❮ - - ❯ -
`; + movieCarousel7.innerHTML += movieEl; + + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilar(similar.results, specialCharSimilar); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -1270,7 +1545,7 @@ function getTrendingTV(url) { tv.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images,reviews'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; fetch(DETAIL_URL) .then(res => res.json()) .then(data => { @@ -1294,12 +1569,29 @@ function displayTrendingTV(data) { first_air_date, budget, revenue, + reviews, + status, + videos, + credits, + genres, + similar, + id, number_of_seasons, episode_run_time, tagline, } = data; - const backdrop_URL = POSTER_URL + backdrop_path; + const backdrop_url = POSTER_URL + backdrop_path; + const specialChar = name + id; + const specialCharReviews = id + name; + const specialCharSimilar = id + name + '&&&&&'; + const specialCharCast = id + name + '/////'; + const specialCharWatchProviders = id + name + '.....'; + let tvGenre = ''; + + genres.forEach(genre => { + tvGenre += genre.name + ", "; + }) const showEl = `
@@ -1317,7 +1609,7 @@ function displayTrendingTV(data) { >✕
-
poster
+
poster

${name} @@ -1334,37 +1626,70 @@ function displayTrendingTV(data) { Reviews See Also

-
+ +
- -
+
- - - ❮ - - ❯ -
`; + movieCarousel3.innerHTML += showEl; + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilarTV(similar.results, specialCharSimilar); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -1383,7 +1708,7 @@ function getTopTV(url) { tv.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images,reviews'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; fetch(DETAIL_URL) .then(res => res.json()) .then(data => { @@ -1407,12 +1732,29 @@ function displayTopTV(data) { first_air_date, budget, revenue, + reviews, + status, + videos, + credits, + genres, + similar, + id, number_of_seasons, episode_run_time, tagline, } = data; - const backdrop_URL = POSTER_URL + backdrop_path; + const backdrop_url = POSTER_URL + backdrop_path; + const specialChar = name + id; + const specialCharReviews = id + name; + const specialCharSimilar = id + name + '&&&&&&'; + const specialCharCast = id + name + '//////'; + const specialCharWatchProviders = id + name + '......'; + let tvGenre = ''; + + genres.forEach(genre => { + tvGenre += genre.name + ", "; + }) const showEl = `
@@ -1430,7 +1772,7 @@ function displayTopTV(data) { >✕
-
poster
+
poster

${name} @@ -1447,37 +1789,138 @@ function displayTopTV(data) { Reviews See Also

-
+ +
- -
+
- - - ❮ - - ❯ -
`; + movieCarousel4.innerHTML += showEl; + getWatchProviders(data["watch/providers"].results["US"], specialCharWatchProviders); + setTimeout(function () { getTrailer(videos.results, specialChar); }, 10); + getCast(credits.cast, specialCharCast); + getReviews(reviews.results, specialCharReviews); + getSimilarTV(similar.results, specialCharSimilar); +} + +async function getWatchProviders(providers, specialCharWatchProviders) { + const providerURL = 'https://image.tmdb.org/t/p/original/'; + + /* If the movie has providers / places to rent / watch, it will display the logo */ + if (providers != null) { + if (providers.flatrate != null) { + providers.flatrate.forEach(prov => { + const providerHtml = ` +
+ +
+ `; + document.getElementById(specialCharWatchProviders).innerHTML += providerHtml; + }) + } + if (providers.rent != null) { + providers.rent.forEach(prov => { + const providerHtml = ` +
+ +
+ `; + document.getElementById(specialCharWatchProviders).innerHTML += providerHtml; + }) + } + else if (providers.buy != null) { + providers.buy.forEach(prov => { + const providerHtml = ` +
+ +
+ `; + document.getElementById(specialCharWatchProviders).innerHTML += providerHtml; + }) + } + else if (providers.ads != null) { + providers.ads.forEach(prov => { + const providerHtml = ` +
+ +
+ `; + document.getElementById(specialCharWatchProviders).innerHTML += providerHtml; + }) + } + } + /* Otherwise, theres nowhere to rent or watch -- return no current providers */ + else { + const providerHtml = ` +
+ None at this time +
`; + document.getElementById(specialCharWatchProviders).innerHTML += providerHtml; + } } async function getTrailer(videos, specialChar) { @@ -1493,10 +1936,64 @@ async function getTrailer(videos, specialChar) { const trailer = YOUTUBE_TRAILER_URL + vid.key; const trailerHTML = `