Update: Enhanced loading times (#192)

hoangsonww · May 20, 2024 · 4f0fad3 · 4f0fad3
1 parent 97b4d1c
commit 4f0fad3
Show file tree

Hide file tree

Showing 19 changed files with 133 additions and 97 deletions.
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -529,11 +529,6 @@ header h1 {
     background-position: center;
 }
 
-.movie-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
 .tvSeries-info {
     padding: 20px;
     flex-grow: 1;
@@ -659,10 +654,6 @@ header h1 {
     visibility: hidden;
 }
 
-.movie-info h3 {
-    margin: 0;
-}
-
 .tvSeries-info h3 {
     margin: 0;
 }
@@ -3069,6 +3060,7 @@ canvas {
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
     padding-top: 14px;
+    flex-grow: 1;
 }
 
 .tvSeries-info {

diff --git a/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Frontend/js/movie-timeline.js
@@ -22,7 +22,6 @@ document.getElementById('end-year').addEventListener('keydown', function(event)
     }
 });
 
-
 const movieCode = {
     part1: 'YzVhMjBjODY=',
     part2: 'MWFjZjdiYjg=',
@@ -341,10 +340,16 @@ function showMovies(movies, mainElement) {
             : `<div class="no-image" style="margin-top: 20px; margin-bottom: 20px">Image Not Available</div>`;
         const voteAvg = movie.vote_average.toFixed(1);
         const ratingClass = getClassByRate(movie.vote_average);
+        let title = movie.title;
+        const words = title.split(' ');
+        if (words.length >= 9) {
+            words[8] = '...';
+            title = words.slice(0, 9).join(' ');
+        }
         movieEl.innerHTML = `
             ${movieImage}
             <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;">${movie.title}</h3>
+                <h3 style="text-align: left; margin-right: 5px; flex: 1;">${title}</h3>
                 <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
             <div class="overview" style="cursor: pointer;">

diff --git a/MovieVerse-Frontend/js/search.js b/MovieVerse-Frontend/js/search.js
@@ -726,7 +726,13 @@ function showMovies(items, container, category) {
         const isMovie = item.title && hasVoteAverage;
         const isTvSeries = item.name && hasVoteAverage && category === 'tv';
 
-        const title = item.title || item.name || "N/A";
+        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.';
         const biography = item.biography || 'Click to view the details of this person.';
 

diff --git a/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css b/...eVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
@@ -529,11 +529,6 @@ header h1 {
     background-position: center;
 }
 
-.movie-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
 .tvSeries-info {
     padding: 20px;
     flex-grow: 1;
@@ -659,10 +654,6 @@ header h1 {
     visibility: hidden;
 }
 
-.movie-info h3 {
-    margin: 0;
-}
-
 .tvSeries-info h3 {
     margin: 0;
 }
@@ -3069,6 +3060,7 @@ canvas {
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
     padding-top: 14px;
+    flex-grow: 1;
 }
 
 .tvSeries-info {

diff --git a/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js b/...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
@@ -997,25 +997,10 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     document.getElementById('movie-rating').innerHTML = ``;
     document.title = movie.title + " - Movie Details";
 
-    const movieImage = document.getElementById('movie-image');
     const movieDescription = document.getElementById('movie-description');
     const metascoreElement = metascore ? `<p><strong>Metascore:</strong> <a id="metacritics" href="${metaCriticsLink}" title="Click to search/view on Metacritics" target="_blank">${metascore}</a></p>` : '';
     const awardsElement = awards ? `<p><strong>Awards:</strong> ${awards}</p>` : '';
 
-    if (movie.poster_path) {
-        movieImage.src = IMGPATH + movie.poster_path;
-        movieImage.alt = movie.title;
-        movieImage.loading = 'lazy';
-    }
-    else {
-        movieImage.style.display = 'none';
-        const noImageText = document.createElement('h2');
-        noImageText.textContent = 'Movie Image Not Available';
-        noImageText.style.textAlign = 'center';
-        noImageText.style.height = '800px';
-        document.querySelector('.movie-left').appendChild(noImageText);
-    }
-
     const overview = movie.overview ? movie.overview : 'No overview available';
     const genres = movie.genres.map(genre => genre.name).join(', ');
     const releaseDate = movie.release_date ? movie.release_date : 'Release date not available';
@@ -1293,6 +1278,21 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         mediaContainer.innerHTML = '<p>No media available</p>';
     }
 
+    const movieImage = document.getElementById('movie-image');
+    if (movie.poster_path) {
+        movieImage.src = IMGPATH + movie.poster_path;
+        movieImage.alt = movie.title;
+        movieImage.loading = 'lazy';
+    }
+    else {
+        movieImage.style.display = 'none';
+        const noImageText = document.createElement('h2');
+        noImageText.textContent = 'Movie Image Not Available';
+        noImageText.style.textAlign = 'center';
+        noImageText.style.height = '800px';
+        document.querySelector('.movie-left').appendChild(noImageText);
+    }
+
     hideSpinner();
 }
 

diff --git a/...Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js b/...Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -22,7 +22,6 @@ document.getElementById('end-year').addEventListener('keydown', function(event)
     }
 });
 
-
 const movieCode = {
     part1: 'YzVhMjBjODY=',
     part2: 'MWFjZjdiYjg=',
@@ -341,10 +340,16 @@ function showMovies(movies, mainElement) {
             : `<div class="no-image" style="margin-top: 20px; margin-bottom: 20px">Image Not Available</div>`;
         const voteAvg = movie.vote_average.toFixed(1);
         const ratingClass = getClassByRate(movie.vote_average);
+        let title = movie.title;
+        const words = title.split(' ');
+        if (words.length >= 9) {
+            words[8] = '...';
+            title = words.slice(0, 9).join(' ');
+        }
         movieEl.innerHTML = `
             ${movieImage}
             <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;">${movie.title}</h3>
+                <h3 style="text-align: left; margin-right: 5px; flex: 1;">${title}</h3>
                 <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
             <div class="overview" style="cursor: pointer;">

diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
@@ -726,7 +726,13 @@ function showMovies(items, container, category) {
         const isMovie = item.title && hasVoteAverage;
         const isTvSeries = item.name && hasVoteAverage && category === 'tv';
 
-        const title = item.title || item.name || "N/A";
+        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.';
         const biography = item.biography || 'Click to view the details of this person.';
 

diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.js
@@ -408,7 +408,7 @@ async function getMovies(url, mainElement, page = 1) {
 function showMovies(movies, mainElement) {
     mainElement.innerHTML = '';
     movies.forEach((movie, index) => {
-        const { id, poster_path, title, vote_average, vote_count, overview, genre_ids } = movie;
+        let { id, poster_path, title, vote_average, vote_count, overview, genre_ids } = movie;
         const movieEl = document.createElement('div');
         movieEl.style.zIndex = '1000';
         movieEl.classList.add('movie');
@@ -418,6 +418,12 @@ function showMovies(movies, mainElement) {
             ? `<img src="${IMGPATH + poster_path}" loading="${loadingType}" alt="${title} poster" width="150" height="225">`
             : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
 
+        const words = title.split(' ');
+        if (words.length >= 9) {
+            words[8] = '...';
+            title = words.slice(0, 9).join(' ');
+        }
+
         const voteAvg = vote_count === 0 ? "Unrated" : vote_average.toFixed(1);
         const ratingClass = vote_count === 0 ? "unrated" : getClassByRate(vote_average);
 

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css
@@ -529,11 +529,6 @@ header h1 {
     background-position: center;
 }
 
-.movie-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
 .tvSeries-info {
     padding: 20px;
     flex-grow: 1;
@@ -659,10 +654,6 @@ header h1 {
     visibility: hidden;
 }
 
-.movie-info h3 {
-    margin: 0;
-}
-
 .tvSeries-info h3 {
     margin: 0;
 }
@@ -3069,6 +3060,7 @@ canvas {
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
     padding-top: 14px;
+    flex-grow: 1;
 }
 
 .tvSeries-info {

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
@@ -997,25 +997,10 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     document.getElementById('movie-rating').innerHTML = ``;
     document.title = movie.title + " - Movie Details";
 
-    const movieImage = document.getElementById('movie-image');
     const movieDescription = document.getElementById('movie-description');
     const metascoreElement = metascore ? `<p><strong>Metascore:</strong> <a id="metacritics" href="${metaCriticsLink}" title="Click to search/view on Metacritics" target="_blank">${metascore}</a></p>` : '';
     const awardsElement = awards ? `<p><strong>Awards:</strong> ${awards}</p>` : '';
 
-    if (movie.poster_path) {
-        movieImage.src = IMGPATH + movie.poster_path;
-        movieImage.alt = movie.title;
-        movieImage.loading = 'lazy';
-    }
-    else {
-        movieImage.style.display = 'none';
-        const noImageText = document.createElement('h2');
-        noImageText.textContent = 'Movie Image Not Available';
-        noImageText.style.textAlign = 'center';
-        noImageText.style.height = '800px';
-        document.querySelector('.movie-left').appendChild(noImageText);
-    }
-
     const overview = movie.overview ? movie.overview : 'No overview available';
     const genres = movie.genres.map(genre => genre.name).join(', ');
     const releaseDate = movie.release_date ? movie.release_date : 'Release date not available';
@@ -1293,6 +1278,21 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         mediaContainer.innerHTML = '<p>No media available</p>';
     }
 
+    const movieImage = document.getElementById('movie-image');
+    if (movie.poster_path) {
+        movieImage.src = IMGPATH + movie.poster_path;
+        movieImage.alt = movie.title;
+        movieImage.loading = 'lazy';
+    }
+    else {
+        movieImage.style.display = 'none';
+        const noImageText = document.createElement('h2');
+        noImageText.textContent = 'Movie Image Not Available';
+        noImageText.style.textAlign = 'center';
+        noImageText.style.height = '800px';
+        document.querySelector('.movie-left').appendChild(noImageText);
+    }
+
     hideSpinner();
 }
 

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -22,7 +22,6 @@ document.getElementById('end-year').addEventListener('keydown', function(event)
     }
 });
 
-
 const movieCode = {
     part1: 'YzVhMjBjODY=',
     part2: 'MWFjZjdiYjg=',
@@ -341,10 +340,16 @@ function showMovies(movies, mainElement) {
             : `<div class="no-image" style="margin-top: 20px; margin-bottom: 20px">Image Not Available</div>`;
         const voteAvg = movie.vote_average.toFixed(1);
         const ratingClass = getClassByRate(movie.vote_average);
+        let title = movie.title;
+        const words = title.split(' ');
+        if (words.length >= 9) {
+            words[8] = '...';
+            title = words.slice(0, 9).join(' ');
+        }
         movieEl.innerHTML = `
             ${movieImage}
             <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;">${movie.title}</h3>
+                <h3 style="text-align: left; margin-right: 5px; flex: 1;">${title}</h3>
                 <span class="${ratingClass}" style="white-space: nowrap;">${voteAvg}</span>
             </div>
             <div class="overview" style="cursor: pointer;">

diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
@@ -726,7 +726,13 @@ function showMovies(items, container, category) {
         const isMovie = item.title && hasVoteAverage;
         const isTvSeries = item.name && hasVoteAverage && category === 'tv';
 
-        const title = item.title || item.name || "N/A";
+        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.';
         const biography = item.biography || 'Click to view the details of this person.';
 

diff --git a/MovieVerse-Mobile/platforms/ios/www/index.js b/MovieVerse-Mobile/platforms/ios/www/index.js
@@ -408,7 +408,7 @@ async function getMovies(url, mainElement, page = 1) {
 function showMovies(movies, mainElement) {
     mainElement.innerHTML = '';
     movies.forEach((movie, index) => {
-        const { id, poster_path, title, vote_average, vote_count, overview, genre_ids } = movie;
+        let { id, poster_path, title, vote_average, vote_count, overview, genre_ids } = movie;
         const movieEl = document.createElement('div');
         movieEl.style.zIndex = '1000';
         movieEl.classList.add('movie');
@@ -418,6 +418,12 @@ function showMovies(movies, mainElement) {
             ? `<img src="${IMGPATH + poster_path}" loading="${loadingType}" alt="${title} poster" width="150" height="225">`
             : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
 
+        const words = title.split(' ');
+        if (words.length >= 9) {
+            words[8] = '...';
+            title = words.slice(0, 9).join(' ');
+        }
+
         const voteAvg = vote_count === 0 ? "Unrated" : vote_average.toFixed(1);
         const ratingClass = vote_count === 0 ? "unrated" : getClassByRate(vote_average);
 

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css
@@ -529,11 +529,6 @@ header h1 {
     background-position: center;
 }
 
-.movie-info {
-    padding: 20px;
-    flex-grow: 1;
-}
-
 .tvSeries-info {
     padding: 20px;
     flex-grow: 1;
@@ -659,10 +654,6 @@ header h1 {
     visibility: hidden;
 }
 
-.movie-info h3 {
-    margin: 0;
-}
-
 .tvSeries-info h3 {
     margin: 0;
 }
@@ -3069,6 +3060,7 @@ canvas {
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
     padding-top: 14px;
+    flex-grow: 1;
 }
 
 .tvSeries-info {