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
hoangsonww committed May 24, 2024
1 parent 6b0159d commit 475349f
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 107 deletions.
2 changes: 1 addition & 1 deletion MovieVerse-Frontend/html/favorites.html
View file
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
176 changes: 70 additions & 106 deletions MovieVerse-Frontend/js/favorites.js
View file
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

0 comments on commit 475349f

Please sign in to comment.