Skip to content

Commit

Permalink
Update: Enhanced loading times (#192)
Browse files Browse the repository at this point in the history
  • Loading branch information
hoangsonww committed May 24, 2024
1 parent f94f594 commit 89d1279
Show file tree
Hide file tree
Showing 29 changed files with 315 additions and 382 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
<p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
<p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
<p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
<p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists!</p>
<p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists! 🍿🎬</p>
</div>

<div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@ <h2 id="movie-title" class="movie-header"></h2>
❤️
</button>
</div>
<img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px"/>
<img id="movie-image" alt="Loading TV Series Details..." style="width: 25vw; border-radius: 8px" title="Click to view full-size image" />
<h3>Your Rating:</h3>
<div class="rating" title="Click on a star to rate this movie!">
<span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
Expand Down Expand Up @@ -787,9 +787,9 @@ <h3>Add a Comment for This TV Series</h3>
document.getElementById('movie-image').addEventListener('click', function() {
let imageUrl = this.src.replace('w780', 'w1280');
const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
<img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
</div>`;
<img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="TV Series Poster" />
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
</div>`;
document.body.insertAdjacentHTML('beforeend', modalHtml);

document.getElementById('image-modal').addEventListener('click', function(event) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ commentForm.addEventListener("submit", async (e) => {
}
});

var modal = document.getElementById("comment-modal");
var btn = document.getElementById("toggle-comment-modal");
var span = document.getElementsByClassName("close")[0];
let modal = document.getElementById("comment-modal");
let btn = document.getElementById("toggle-comment-modal");
let span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ commentForm.addEventListener("submit", async (e) => {
}
});

var modal = document.getElementById("comment-modal");
var btn = document.getElementById("toggle-comment-modal");
var span = document.getElementsByClassName("close")[0];
let modal = document.getElementById("comment-modal");
let btn = document.getElementById("toggle-comment-modal");
let span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.style.display = "block";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1235,21 +1235,40 @@ function createMovieCard(movie) {
const movieEl = document.createElement('div');
movieEl.classList.add('movie');
movieEl.style.cursor = 'pointer';
movieEl.style.zIndex = '1000';

let movieTitle = movie.title;
const words = movieTitle.split(' ');
if (words.length >= 9) {
words[8] = '...';
movieTitle = words.slice(0, 9).join(' ');
}

const ratingClass = movie.vote_count === 0 ? "unrated" : getClassByRate(movie.vote_average);
const voteAvg = movie.vote_count === 0 ? "Unrated" : movie.vote_average.toFixed(1);

let overview = movie.overview;
if (overview === "") {
overview = "No overview available.";
}

movieEl.innerHTML = `
<img src="${IMGPATH + movie.poster_path}" alt="${movie.title}" style="cursor: pointer">
<div class="movie-info" style="cursor: pointer">
<h3>${movie.title}</h3>
<span class="${getClassByRate(movie.vote_average.toFixed(1))}">${movie.vote_average.toFixed(1)}</span>
<div class="movie-info" style="display: flex; justify-content: space-between; align-items: start; cursor: pointer;">
<h3 style="text-align: left; margin-right: 5px; flex: 1;">${movieTitle}</h3>
<span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
</div>
<div class="overview">
<h4>Movie Overview:</h4>
${movie.overview}
<div class="overview" style="cursor: pointer;">
<h4>Movie Overview: </h4>
${overview}
</div>`;

movieEl.addEventListener('click', () => {
localStorage.setItem('selectedMovieId', movie.id);
window.location.href = 'movie-details.html';
updateUniqueMoviesViewed(movie.id);
updateFavoriteGenre(movie.genre_ids);
updateMovieVisitCount(movie.id, movie.title);
window.location.href = 'movie-details.html';
});

return movieEl;
Expand Down Expand Up @@ -1282,97 +1301,6 @@ function handleSearch() {
window.location.href = 'search.html';
}

async function getMovies(url) {
const numberOfMovies = calculateMoviesToDisplay();
const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
let allMovies = [];

for (let page = 1; page <= pagesToFetch; page++) {
const response = await fetch(`${url}&page=${page}`);
const data = await response.json();
allMovies = allMovies.concat(data.results);
}

const popularityThreshold = 0.5;

allMovies.sort((a, b) => {
const popularityDifference = Math.abs(a.popularity - b.popularity);
if (popularityDifference < popularityThreshold) {
return b.vote_average - a.vote_average;
}
return b.popularity - a.popularity;
});

if (allMovies.length > 0) {
showMovies(allMovies.slice(0, numberOfMovies));
}
else {
searchResultsMain.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
}
}

function showMovies(movies){
searchResultsMain.innerHTML = '';
movies.forEach((movie) => {
const { id, poster_path, title, vote_average, overview } = movie;
const movieE1 = document.createElement('div');
const voteAverage = vote_average.toFixed(1);
movieE1.classList.add('movie');

const movieImage = poster_path
? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
: `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;

movieE1.innerHTML = `
${movieImage}
<div class="movie-info" style="cursor: pointer;">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${voteAverage}</span>
</div>
<div class="overview" style="cursor: pointer;">
<h4>Movie Overview: </h4>
${overview}
</div>`;

movieE1.addEventListener('click', () => {
localStorage.setItem('selectedMovieId', id);
window.location.href = 'movie-details.html';
updateMovieVisitCount(id, title);
});

searchResultsMain.appendChild(movieE1);
});
}

function calculateMoviesToDisplay() {
const screenWidth = window.innerWidth;
if (screenWidth <= 689.9) return 10;
if (screenWidth <= 1021.24) return 20;
if (screenWidth <= 1353.74) return 21;
if (screenWidth <= 1684.9) return 20;
if (screenWidth <= 2017.49) return 20;
if (screenWidth <= 2349.99) return 18;
if (screenWidth <= 2681.99) return 21;
if (screenWidth <= 3014.49) return 24;
if (screenWidth <= 3345.99) return 27;
if (screenWidth <= 3677.99) return 20;
if (screenWidth <= 4009.99) return 22;
if (screenWidth <= 4340.99) return 24;
if (screenWidth <= 4673.49) return 26;
if (screenWidth <= 5005.99) return 28;
if (screenWidth <= 5337.99) return 30;
if (screenWidth <= 5669.99) return 32;
if (screenWidth <= 6001.99) return 34;
if (screenWidth <= 6333.99) return 36;
if (screenWidth <= 6665.99) return 38;
if (screenWidth <= 6997.99) return 40;
if (screenWidth <= 7329.99) return 42;
if (screenWidth <= 7661.99) return 44;
if (screenWidth <= 7993.99) return 46;
if (screenWidth <= 8325.99) return 48;
return 20;
}

async function loadWatchLists() {
const displaySection = document.getElementById('watchlists-display-section');

Expand Down Expand Up @@ -1625,26 +1553,62 @@ function createTVSeriesCard(movie) {
const movieEl = document.createElement('div');
movieEl.classList.add('movie');
movieEl.style.cursor = 'pointer';
movieEl.style.zIndex = '1000';

let movieTitle = movie.name;
const words = movieTitle.split(' ');
if (words.length >= 9) {
words[8] = '...';
movieTitle = words.slice(0, 9).join(' ');
}

const ratingClass = movie.vote_count === 0 ? "unrated" : getClassByRate(movie.vote_average);
const voteAvg = movie.vote_count === 0 ? "Unrated" : movie.vote_average.toFixed(1);

let overview = movie.overview;
if (overview === "") {
overview = "No overview available.";
}

movieEl.innerHTML = `
<img src="${IMGPATH + movie.poster_path}" alt="${movie.title}" style="cursor: pointer">
<div class="movie-info" style="cursor: pointer">
<h3>${movie.name}</h3>
<span class="${getClassByRate(movie.vote_average.toFixed(1))}">${movie.vote_average.toFixed(1)}</span>
<img src="${IMGPATH + movie.poster_path}" alt="${movie.name}" style="cursor: pointer">
<div class="movie-info" style="display: flex; justify-content: space-between; align-items: start; cursor: pointer;">
<h3 style="text-align: left; margin-right: 5px; flex: 1;">${movieTitle}</h3>
<span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
</div>
<div class="overview">
<h4>Movie Overview:</h4>
${movie.overview}
<div class="overview" style="cursor: pointer;">
<h4>TV Series Overview: </h4>
${overview}
</div>`;

movieEl.addEventListener('click', () => {
localStorage.setItem('selectedTvSeriesId', movie.id);
updateMovieVisitCount(movie.id, movie.name);
updateUniqueMoviesViewed(movie.id);
updateFavoriteGenre(movie.genres_ids);
window.location.href = 'tv-details.html';
updateMovieVisitCount(movie.id, movie.title);
});

return movieEl;
}

function updateFavoriteGenre(genre_ids) {
if (genre_ids && genre_ids.length > 0) {
const favoriteGenres = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
favoriteGenres.push(genre_ids[0]);
localStorage.setItem('favoriteGenres', JSON.stringify(favoriteGenres));
}
}

function updateUniqueMoviesViewed(movieId) {
let viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];

if (!viewedMovies.includes(movieId)) {
viewedMovies.push(movieId);
localStorage.setItem('uniqueMoviesViewed', JSON.stringify(viewedMovies));
}
}

function showSpinner() {
document.getElementById('myModal').classList.add('modal-visible');
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -753,8 +753,7 @@ async function fetchMovieRatings(imdbId, tmdbMovieData) {
imdbRating = 'N/A';
}

const rtRatingObj = data.Ratings.find(rating => rating.Source === "Rotten Tomatoes");
let rtRating = rtRatingObj ? rtRatingObj.Value : 'N/A';
let rtRating = 'N/A';

let metascore = data.Metascore ? `${data.Metascore}/100` : 'N/A';
let awards = data.Awards;
Expand Down Expand Up @@ -852,8 +851,11 @@ function getYouTubeVideoId(url) {

function positionTrailerButton() {
showSpinner();
if (!trailerButton)
if (!trailerButton) {
document.getElementById('movie-description').style.marginTop = '-20px';
return;
}
document.getElementById('movie-description').style.marginTop = '-60px';

if (window.innerWidth <= 900) {
const movieDescription = document.getElementById('movie-description');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,10 @@ function showMovies(movies, mainElement) {
words[8] = '...';
title = words.slice(0, 9).join(' ');
}
let overview = movie.overview;
if (overview === '') {
overview = 'No overview available.';
}
movieEl.innerHTML = `
${movieImage}
<div class="movie-info" style="display: flex; justify-content: space-between; align-items: start; cursor: pointer;">
Expand All @@ -354,7 +358,7 @@ function showMovies(movies, mainElement) {
</div>
<div class="overview" style="cursor: pointer;">
<h4>Overview: </h4>
${movie.overview}
${overview}
</div>`;
movieEl.addEventListener('click', () => {
localStorage.setItem('selectedMovieId', movie.id);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -728,14 +728,19 @@ function showMovies(items, container, category) {

let title = item.title || item.name || "N/A";
const words = title.split(' ');

if (words.length >= 9) {
words[8] = '...';
title = words.slice(0, 9).join(' ');
}

const overview = item.overview || 'No overview available.';
let overview = item.overview || 'No overview available.';
const biography = item.biography || 'Click to view the details of this person.';

if (overview === '') {
overview = 'No overview available.';
}

const { id, profile_path, poster_path } = item;
const imagePath = profile_path || poster_path ? IMGPATH + (profile_path || poster_path) : null;

Expand Down Expand Up @@ -763,10 +768,14 @@ function showMovies(items, container, category) {
movieContentHTML += `</div>`;

if (isPerson) {
movieContentHTML += `<div class="overview" style="cursor: pointer;"><h4>Details: </h4>${biography}</div>`;
const roleOverview = item.known_for_department === 'Directing' ? 'Director Overview' : 'Actor Overview';
movieContentHTML += `<div class="overview" style="cursor: pointer;"><h4>${roleOverview}: </h4>${biography}</div>`;
}
else if (isTvSeries) {
movieContentHTML += `<div class="overview" style="cursor: pointer;"><h4>TV Series Overview: </h4>${overview}</div>`;
}
else {
movieContentHTML += `<div class="overview" style="cursor: pointer;"><h4>Overview: </h4>${overview}</div>`;
movieContentHTML += `<div class="overview" style="cursor: pointer;"><h4>Movie Overview: </h4>${overview}</div>`;
}

movieEl.innerHTML = movieContentHTML;
Expand Down Expand Up @@ -794,7 +803,6 @@ function showMovies(items, container, category) {
}

localStorage.setItem('directorVisits', JSON.stringify(directorVisits));

localStorage.setItem('selectedDirectorId', id);
window.location.href = 'director-details.html?' + id;
}
Expand All @@ -815,7 +823,6 @@ function showMovies(items, container, category) {
}

localStorage.setItem('actorVisits', JSON.stringify(actorVisits));

localStorage.setItem('selectedActorId', id);
window.location.href = 'actor-details.html?' + id;
}
Expand Down Expand Up @@ -902,4 +909,4 @@ function updateBrowserURL(title) {

function createNameSlug(title) {
return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -812,7 +812,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
let imageUrl = this.src.replace('w780', 'w1280');
const modalHtml = `
<div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
<img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default;" onclick="event.stopPropagation();">
<img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default;" onclick="event.stopPropagation();" alt="Media Image"/>
<span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
</div>
`;
Expand Down
Loading

0 comments on commit 89d1279

Please sign in to comment.