Update: Enhanced loading times (#192)

hoangsonww · May 23, 2024 · cc1922a · cc1922a
1 parent b31bc02
commit cc1922a
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 47 deletions.
diff --git a/MovieVerse-Mobile/.gitignore b/MovieVerse-Mobile/.gitignore
@@ -0,0 +1 @@
+platforms
diff --git a/MovieVerse-Mobile/easteregg.txt b/MovieVerse-Mobile/easteregg.txt
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
@@ -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>
@@ -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) {

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
@@ -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;

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -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;">
@@ -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);

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
@@ -733,9 +733,13 @@ function showMovies(items, container, category) {
             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;
 

diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js
@@ -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>
     `;

diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
@@ -51,6 +51,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
 
+    <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
@@ -625,7 +626,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
         </button>
         <form id="form">
             <div class="search-container">
-                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px; margin-right: 5px" class="search" title="Search for movies, actors, TV series, and more!" />
+                <input type="text" id="search" placeholder="Search For Films, Actors..." style="width: 250px; margin-right: 5px" class="search" title="Search for movies, actors, TV series, and more!" required />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>
             </div>
             <div id="search-results" class="search-results"></div>
@@ -1568,6 +1569,7 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             searchInput.addEventListener('blur', clearSelection);
         });
     </script>
+
 </body>
 
-</html>
+</html>
diff --git a/MovieVerse-Mobile/www/index.js b/MovieVerse-Mobile/www/index.js
@@ -427,6 +427,10 @@ function showMovies(movies, mainElement) {
         const voteAvg = vote_count === 0 ? "Unrated" : vote_average.toFixed(1);
         const ratingClass = vote_count === 0 ? "unrated" : getClassByRate(vote_average);
 
+        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;">