Final: Enhance app functionalities (#196)

hoangsonww · Aug 6, 2024 · 7b7ea02 · 7b7ea02
1 parent 81c14a2
commit 7b7ea02
Show file tree

Hide file tree

Showing 32 changed files with 1,750 additions and 314 deletions.
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
@@ -1310,12 +1310,53 @@ header h1 {
 }
 
 .keyword-link {
-  color: white;
-  text-decoration: underline;
+  display: inline-block;
+  margin: 5px;
+  margin-right: 1px;
+  padding: 5px 10px;
+  background-color: rgba(221, 221, 221, 0.5);
+  border-radius: 8px;
+  text-decoration: none;
+  color: black;
+  font-size: 14px;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 }
 
 .keyword-link:hover {
-  color: #ff8623;
+  background-color: rgba(64, 64, 64, 0.8);
+  color: #fff;
+}
+
+.rating-container {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  justify-content: center;
+  text-align: center;
+}
+
+.rating-bar {
+  flex-grow: 1;
+  height: 20px;
+  background-color: rgba(128, 128, 128, 0.3);
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  margin: 0 10px;
+  max-width: 160px;
+}
+
+.rating-fill {
+  height: 100%;
+  width: 0;
+  transition: width 1s ease-in-out;
+}
+
+.rating-text {
+  font: inherit;
+  color: white;
 }
 
 .director-header {

diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
@@ -733,7 +733,14 @@ async function fetchMovieRatings(imdbId, tmdbMovieData) {
   const data = responses.find(response => response !== null);
 
   if (!data) {
-    populateMovieDetails(tmdbMovieData, tmdbMovieData.vote_average, 'N/A', 'View on Metacritics', 'Awards information unavailable');
+    populateMovieDetails(
+      tmdbMovieData,
+      tmdbMovieData.vote_average,
+      'N/A',
+      'View on Metacritics',
+      'Awards information unavailable',
+      'Rating information unavailable'
+    );
     return;
   }
 
@@ -1032,6 +1039,32 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
   }
 
   const scaledRating = (movie.vote_average / 2).toFixed(1);
+  const ratingPercentage = (scaledRating / 5) * 100;
+  const voteCount = movie.vote_count ? movie.vote_count : '0';
+
+  let ratingColor;
+  if (scaledRating <= 1) {
+    ratingColor = '#FF0000'; // Red
+  } else if (scaledRating < 2) {
+    ratingColor = '#FFA500'; // Orange
+  } else if (scaledRating < 3) {
+    ratingColor = '#FFFF00'; // Yellow
+  } else if (scaledRating < 4) {
+    ratingColor = '#2196F3'; // Blue
+  } else {
+    ratingColor = '#4CAF50'; // Green
+  }
+
+  const ratingHTML = `
+    <div class="rating-container" title="Your rating also counts - it might take a while for us to update!">
+      <strong>MovieVerse Rating:</strong>
+      <div class="rating-bar">
+        <div class="rating-fill" style="width: 0; background-color: ${ratingColor};" id="rating-fill"></div>
+      </div>
+      <span class="rating-text"><strong id="user-ratings">${scaledRating}/5.0</strong> (<strong id="user-votes">${voteCount}</strong> votes)</span>
+    </div>
+  `;
+
   const popularityThreshold = 80;
   const isPopular = movie.popularity >= popularityThreshold;
   const popularityText = isPopular
@@ -1061,14 +1094,16 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         <p><strong>Languages:</strong> ${languages}</p>
         <p><strong>Countries of Production:</strong> ${countries}</p>
         <p><strong>Popularity Score:</strong> <span class="${isPopular ? 'popular' : ''}">${popularityText}</span></p>
-        <p title="Your rating also counts - it might take a while for us to update!"><strong>MovieVerse User Rating:</strong> <span><strong id="user-ratings">${scaledRating}/5.0</strong> (based on <strong id="user-ratings">${
-          movie.vote_count
-        }</strong> votes)</span></p>
+        ${ratingHTML}
         ${awardsElement}
         <p><strong>TMDb Rating:</strong> <a href="https://www.themoviedb.org/movie/${movie.id}" id="rating" target="_blank">${tmdbRating}/10.0</a></p>
         ${metascoreElement}
     `;
 
+  setTimeout(() => {
+    document.getElementById('rating-fill').style.width = `${ratingPercentage}%`;
+  }, 100);
+
   if (movie.credits && movie.credits.crew) {
     const directors = movie.credits.crew.filter(member => member.job === 'Director');
 

diff --git a/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Frontend/js/tv-details.js
@@ -649,6 +649,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
   detailsHTML += `<p><strong>Tagline:</strong> ${tvSeries.tagline || 'Not available'}</p>`;
 
   const genres = tvSeries.genres && tvSeries.genres.length ? tvSeries.genres.map(genre => genre.name).join(', ') : 'Genres not available';
+
   detailsHTML += `<p><strong>Genres:</strong> ${genres}</p>`;
 
   detailsHTML += `<p><strong>First Air Date:</strong> ${tvSeries.first_air_date || 'Not available'}</p>`;
@@ -665,10 +666,34 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
   detailsHTML += `<p><strong>Networks:</strong> ${networks}</p>`;
 
   const voteAverage = tvSeries.vote_average ? tvSeries.vote_average.toFixed(1) : 'N/A';
-  const voteCount = tvSeries.vote_count ? tvSeries.vote_count.toLocaleString() : 'N/A';
-  detailsHTML += `<p title="Your rating also counts - it might take a while for us to update!"><strong>MovieVerse User Rating:</strong> <strong id="user-ratings">${(
-    voteAverage / 2
-  ).toFixed(1)}/5.0</strong> (based on <strong id="user-ratings">${voteCount}</strong> votes)</p>`;
+  const voteCount = tvSeries.vote_count ? tvSeries.vote_count : '0';
+  const scaledRating = (tvSeries.vote_average / 2).toFixed(1);
+  const ratingPercentage = (scaledRating / 5) * 100;
+
+  let ratingColor;
+  if (scaledRating <= 1) {
+    ratingColor = '#FF0000'; // Red
+  } else if (scaledRating < 2) {
+    ratingColor = '#FFA500'; // Orange
+  } else if (scaledRating < 3) {
+    ratingColor = '#FFFF00'; // Yellow
+  } else if (scaledRating < 4) {
+    ratingColor = '#2196F3'; // Blue
+  } else {
+    ratingColor = '#4CAF50'; // Green
+  }
+
+  const ratingHTML = `
+    <div class="rating-container" title="Your rating also counts - it might take a while for us to update!">
+      <strong>MovieVerse Rating:</strong>
+      <div class="rating-bar">
+        <div class="rating-fill" style="width: 0; background-color: ${ratingColor};" id="rating-fill"></div>
+      </div>
+      <span class="rating-text"><strong id="user-ratings">${scaledRating}/5.0</strong> (<strong id="user-votes">${voteCount}</strong> votes)</span>
+    </div>
+  `;
+
+  detailsHTML += ratingHTML;
 
   if (tvSeries.external_ids && tvSeries.external_ids.imdb_id) {
     const imdbId = tvSeries.external_ids.imdb_id;
@@ -1405,6 +1430,10 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
     document.getElementById('movie-description').appendChild(trailerButton);
     document.getElementById('movie-description').appendChild(iframeContainer);
   }
+
+  setTimeout(() => {
+    document.getElementById('rating-fill').style.width = `${ratingPercentage}%`;
+  }, 100);
 }
 
 async function fetchTvSeriesStreamingLinks(tvSeriesId) {

diff --git a/MovieVerse-Mobile/.idea/other.xml b/MovieVerse-Mobile/.idea/other.xml
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
@@ -733,7 +733,14 @@ async function fetchMovieRatings(imdbId, tmdbMovieData) {
   const data = responses.find(response => response !== null);
 
   if (!data) {
-    populateMovieDetails(tmdbMovieData, tmdbMovieData.vote_average, 'N/A', 'View on Metacritics', 'Awards information unavailable');
+    populateMovieDetails(
+      tmdbMovieData,
+      tmdbMovieData.vote_average,
+      'N/A',
+      'View on Metacritics',
+      'Awards information unavailable',
+      'Rating information unavailable'
+    );
     return;
   }
 
@@ -1032,6 +1039,32 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
   }
 
   const scaledRating = (movie.vote_average / 2).toFixed(1);
+  const ratingPercentage = (scaledRating / 5) * 100;
+  const voteCount = movie.vote_count ? movie.vote_count : '0';
+
+  let ratingColor;
+  if (scaledRating <= 1) {
+    ratingColor = '#FF0000'; // Red
+  } else if (scaledRating < 2) {
+    ratingColor = '#FFA500'; // Orange
+  } else if (scaledRating < 3) {
+    ratingColor = '#FFFF00'; // Yellow
+  } else if (scaledRating < 4) {
+    ratingColor = '#2196F3'; // Blue
+  } else {
+    ratingColor = '#4CAF50'; // Green
+  }
+
+  const ratingHTML = `
+    <div class="rating-container" title="Your rating also counts - it might take a while for us to update!">
+      <strong>MovieVerse Rating:</strong>
+      <div class="rating-bar">
+        <div class="rating-fill" style="width: 0; background-color: ${ratingColor};" id="rating-fill"></div>
+      </div>
+      <span class="rating-text"><strong id="user-ratings">${scaledRating}/5.0</strong> (<strong id="user-votes">${voteCount}</strong> votes)</span>
+    </div>
+  `;
+
   const popularityThreshold = 80;
   const isPopular = movie.popularity >= popularityThreshold;
   const popularityText = isPopular
@@ -1061,14 +1094,16 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         <p><strong>Languages:</strong> ${languages}</p>
         <p><strong>Countries of Production:</strong> ${countries}</p>
         <p><strong>Popularity Score:</strong> <span class="${isPopular ? 'popular' : ''}">${popularityText}</span></p>
-        <p title="Your rating also counts - it might take a while for us to update!"><strong>MovieVerse User Rating:</strong> <span><strong id="user-ratings">${scaledRating}/5.0</strong> (based on <strong id="user-ratings">${
-          movie.vote_count
-        }</strong> votes)</span></p>
+        ${ratingHTML}
         ${awardsElement}
         <p><strong>TMDb Rating:</strong> <a href="https://www.themoviedb.org/movie/${movie.id}" id="rating" target="_blank">${tmdbRating}/10.0</a></p>
         ${metascoreElement}
     `;
 
+  setTimeout(() => {
+    document.getElementById('rating-fill').style.width = `${ratingPercentage}%`;
+  }, 100);
+
   if (movie.credits && movie.credits.crew) {
     const directors = movie.credits.crew.filter(member => member.job === 'Director');
 

diff --git a/...rse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js b/...rse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js
@@ -649,6 +649,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
   detailsHTML += `<p><strong>Tagline:</strong> ${tvSeries.tagline || 'Not available'}</p>`;
 
   const genres = tvSeries.genres && tvSeries.genres.length ? tvSeries.genres.map(genre => genre.name).join(', ') : 'Genres not available';
+
   detailsHTML += `<p><strong>Genres:</strong> ${genres}</p>`;
 
   detailsHTML += `<p><strong>First Air Date:</strong> ${tvSeries.first_air_date || 'Not available'}</p>`;
@@ -665,10 +666,34 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
   detailsHTML += `<p><strong>Networks:</strong> ${networks}</p>`;
 
   const voteAverage = tvSeries.vote_average ? tvSeries.vote_average.toFixed(1) : 'N/A';
-  const voteCount = tvSeries.vote_count ? tvSeries.vote_count.toLocaleString() : 'N/A';
-  detailsHTML += `<p title="Your rating also counts - it might take a while for us to update!"><strong>MovieVerse User Rating:</strong> <strong id="user-ratings">${(
-    voteAverage / 2
-  ).toFixed(1)}/5.0</strong> (based on <strong id="user-ratings">${voteCount}</strong> votes)</p>`;
+  const voteCount = tvSeries.vote_count ? tvSeries.vote_count : '0';
+  const scaledRating = (tvSeries.vote_average / 2).toFixed(1);
+  const ratingPercentage = (scaledRating / 5) * 100;
+
+  let ratingColor;
+  if (scaledRating <= 1) {
+    ratingColor = '#FF0000'; // Red
+  } else if (scaledRating < 2) {
+    ratingColor = '#FFA500'; // Orange
+  } else if (scaledRating < 3) {
+    ratingColor = '#FFFF00'; // Yellow
+  } else if (scaledRating < 4) {
+    ratingColor = '#2196F3'; // Blue
+  } else {
+    ratingColor = '#4CAF50'; // Green
+  }
+
+  const ratingHTML = `
+    <div class="rating-container" title="Your rating also counts - it might take a while for us to update!">
+      <strong>MovieVerse Rating:</strong>
+      <div class="rating-bar">
+        <div class="rating-fill" style="width: 0; background-color: ${ratingColor};" id="rating-fill"></div>
+      </div>
+      <span class="rating-text"><strong id="user-ratings">${scaledRating}/5.0</strong> (<strong id="user-votes">${voteCount}</strong> votes)</span>
+    </div>
+  `;
+
+  detailsHTML += ratingHTML;
 
   if (tvSeries.external_ids && tvSeries.external_ids.imdb_id) {
     const imdbId = tvSeries.external_ids.imdb_id;
@@ -1405,6 +1430,10 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
     document.getElementById('movie-description').appendChild(trailerButton);
     document.getElementById('movie-description').appendChild(iframeContainer);
   }
+
+  setTimeout(() => {
+    document.getElementById('rating-fill').style.width = `${ratingPercentage}%`;
+  }, 100);
 }
 
 async function fetchTvSeriesStreamingLinks(tvSeriesId) {