Skip to content

Commit

Permalink
WIP: Fixed IMDB Ratings (#190)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangsonww
hoangsonww committed May 14, 2024
1 parent d7df74e commit cd19de3
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 38 deletions.
10 changes: 5 additions & 5 deletions MovieVerse-Mobile/www/MovieVerse-Frontend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Welcome to the MovieVerse app, your ultimate guide to the world of movies! This

The MovieVerse app's `MovieVerse-Frontend` directory is organized into four primary directories: `css`, `html`, `js`, and `react`. Each directory contains specific files that contribute to the functionality and appearance of the app. Here's a detailed overview:

### CSS Directory
### CSS Directory - `css`

This directory contains the Cascading Style Sheets (CSS) files responsible for the styling of the web pages.

Expand All @@ -15,7 +15,7 @@ This directory contains the Cascading Style Sheets (CSS) files responsible for t
- `discussions.css`: Styles specific to the discussions page.
- `trivia.css`: Styles for the trivia section of the app.

### HTML Directory
### HTML Directory - `html`

The HTML directory includes all the markup files necessary for the structure of the web pages.

Expand Down Expand Up @@ -46,7 +46,7 @@ The HTML directory includes all the markup files necessary for the structure of
- `404.html`: A 404 error page for when a page is not found.
- `index.ejs`: The entry point for the app.

### JS Directory
### JS Directory - `js`

The JavaScript directory contains scripts that add interactivity and functionality to the web pages.

Expand All @@ -72,7 +72,7 @@ The JavaScript directory contains scripts that add interactivity and functionali
- `single-spa-config.js`: Configuration file for the single-spa framework used in the app.
- `systemjs-importmap.js`: Import map for the systemJS module loader.

### React Directory
### React Directory - `react`

The React directory contains a collection of React components developed for the MovieVerse application.

Expand All @@ -88,7 +88,7 @@ Please note that it is currently under development, and the components may under
- `UserProfile.jsx`: Component for managing user profiles
- `FeaturedMoviesCarousel.jsx`: Component for featured movies carousel

### Tests Directory
### Tests Directory - `tests`

The tests directory contains a collection of test scripts for the MovieVerse application. These tests are designed to ensure that the app's functionality is working as expected and to identify any potential issues or bugs.

Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -820,7 +820,7 @@ <h2 id="search-results-label">Search Results</h2>
</a>
<a href="trivia.html" class="bottom-bar-item">
<i class="fas fa-question-circle"></i>
<span>Movie Trivia</span>
<span>Trivia</span>
</a>
</div>

Expand Down
83 changes: 53 additions & 30 deletions MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -818,46 +818,64 @@ function getRatingDetails(rating) {
}

async function fetchMovieRatings(imdbId, tmdbMovieData) {
const omdbCode = `${getMovieCode2()}`;
const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;

try {
const response = await fetch(omdb);
const data = await response.json();
const apiKeys = [
await getMovieCode2(),
'58efe859',
'60a09d79',
'956e468a'
];

let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
const baseURL = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}`;

if (imdbRating === 'N/A' && tmdbMovieData.vote_average) {
imdbRating = (tmdbMovieData.vote_average / 2).toFixed(1) * 2;
async function tryFetch(apiKey) {
const url = `${baseURL}${apiKey}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error('API limit reached or other error');
return await response.json();
} catch (error) {
return null;
}
}

const rtRatingObj = data.Ratings.find(rating => rating.Source === "Rotten Tomatoes");
let rtRating = rtRatingObj ? rtRatingObj.Value : 'N/A';
let data;
for (const key of apiKeys) {
data = await tryFetch(key);
if (data) break;
}

let metascore = data.Metascore ? `${data.Metascore}/100` : 'N/A';
let awards = data.Awards;
let rated = data.Rated ? data.Rated : 'Rating information unavailable';
if (!data) {
populateMovieDetails(tmdbMovieData, tmdbMovieData.vote_average, 'N/A', 'Metascore information unavailable, click to search on Metacritics', 'Awards information unavailable');
return;
}

if (awards === 'N/A') {
awards = 'Awards information unavailable';
}
let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
if (imdbRating === 'N/A' || imdbRating === '0.0') {
imdbRating = 'N/A';
}

if (metascore === 'N/A/100') {
const metacriticsRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
metascore = calculateFallbackMetacriticsRating(metacriticsRatingValue, tmdbMovieData.vote_average) + '/100';
}
const rtRatingObj = data.Ratings.find(rating => rating.Source === "Rotten Tomatoes");
let rtRating = rtRatingObj ? rtRatingObj.Value : 'N/A';

if (rtRating === 'N/A') {
const imdbRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
rtRating = calculateFallbackRTRating(imdbRatingValue, tmdbMovieData.vote_average)
}
let metascore = data.Metascore ? `${data.Metascore}/100` : 'N/A';
let awards = data.Awards;
let rated = data.Rated ? data.Rated : 'Rating information unavailable';

populateMovieDetails(tmdbMovieData, imdbRating, rtRating, metascore, awards, rated);
if (awards === 'N/A') {
awards = 'Awards information unavailable';
}
catch (error) {
const fallbackImdbRating = (tmdbMovieData.vote_average / 2).toFixed(1) * 2;
populateMovieDetails(tmdbMovieData, fallbackImdbRating, 'N/A', 'Metascore information unavailable, click to search on Metacritics', 'Awards information unavailable');

if (metascore === 'N/A/100') {
const metacriticsRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
metascore = calculateFallbackMetacriticsRating(metacriticsRatingValue, tmdbMovieData.vote_average) + '/100';
}

if (rtRating === 'N/A') {
const imdbRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
rtRating = calculateFallbackRTRating(imdbRatingValue, tmdbMovieData.vote_average)
}

populateMovieDetails(tmdbMovieData, imdbRating, rtRating, metascore, awards, rated);
}

function updateBrowserURL(title) {
Expand Down Expand Up @@ -1378,7 +1396,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar

function createImdbRatingCircle(imdbRating, imdbId) {
if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
imdbRating = 0;
imdbRating = 'N/A';
}

let circleContainer = document.getElementById('imdbRatingCircleContainer');
Expand All @@ -1397,6 +1415,11 @@ function createImdbRatingCircle(imdbRating, imdbId) {
<text id="imdbRatingText" class="circle-text" x="50" y="52" text-anchor="middle" fill="yellow" style="font-weight: bold; font-size: 25px">${imdbRating}</text>
</svg>
`;

if (imdbRating === 'N/A') {
circleContainer.innerHTML += `<p style="color: white; margin-top: 10px;">Rating information currently unavailable</p>`;
}

document.getElementById('movie-description').appendChild(circleContainer);
}
else {
Expand Down
3 changes: 1 addition & 2 deletions MovieVerse-Mobile/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1574,7 +1574,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
searchInput.addEventListener('blur', clearSelection);
});
</script>

</body>

</html>
</html>
19 changes: 19 additions & 0 deletions MovieVerse-Mobile/www/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ document.addEventListener('DOMContentLoaded', function() {
const pagination = document.getElementById('most-popular-pagination');
const genresContainer = document.querySelector('.genres');
const mainContainer = document.getElementById('most-popular');

function movePagination() {
if (window.innerWidth <= 767) {
mainContainer.parentNode.insertBefore(pagination, mainContainer);
Expand All @@ -25,6 +26,7 @@ document.addEventListener('DOMContentLoaded', function() {
genresContainer.appendChild(pagination);
}
}

movePagination();
window.addEventListener('resize', movePagination);
});
Expand Down Expand Up @@ -81,16 +83,19 @@ document.addEventListener('DOMContentLoaded', function() {
button.innerHTML = text;
button.disabled = !enabled;
button.className = 'nav-button';

if (enabled) {
button.onclick = clickHandler;
}

return button;
};

const createPageButton = (pageNum) => {
const button = document.createElement('button');
button.textContent = pageNum;
button.className = 'page-button';

if (pageNum === '...') {
button.disabled = true;
}
Expand All @@ -99,12 +104,14 @@ document.addEventListener('DOMContentLoaded', function() {
currentPageMostPopular = pageNum;
fetchAndUpdateMostPopular();
};

if (pageNum === currentPageMostPopular) {
button.classList.add('active');
}
}
return button;
};

fetchAndUpdateMostPopular();
});

Expand Down Expand Up @@ -227,6 +234,7 @@ function setupPagination(mainElementId, paginationContainerId, genresContainerId
const button = document.createElement('button');
button.textContent = pageNum;
button.className = 'page-button';

if (pageNum === '...') {
button.disabled = true;
}
Expand Down Expand Up @@ -255,6 +263,7 @@ async function fetchAndDisplayMovies(url, count, mainElement) {
const response = await fetch(`${url}`);
const data = await response.json();
const movies = data.results.slice(0, count);

movies.sort(() => Math.random() - 0.5);
showMovies(movies, mainElement);
}
Expand Down Expand Up @@ -438,6 +447,7 @@ function updateFavoriteGenre(genre_ids) {

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

if (!viewedMovies.includes(movieId)) {
viewedMovies.push(movieId);
localStorage.setItem('uniqueMoviesViewed', JSON.stringify(viewedMovies));
Expand All @@ -452,6 +462,7 @@ async function ensureGenreMapIsAvailable() {

async function fetchGenreMap() {
const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;

try {
const response = await fetch(url);
const data = await response.json();
Expand Down Expand Up @@ -637,6 +648,7 @@ function getMostVisitedActor() {

function getMostVisitedDirector() {
const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};

let mostVisitedDirector = '';
let maxVisits = 0;

Expand All @@ -662,6 +674,7 @@ function getTriviaAccuracy() {

function getMostCommonGenre() {
const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];

const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
acc[genre] = (acc[genre] || 0) + 1;
return acc;
Expand Down Expand Up @@ -798,6 +811,7 @@ function adjustNavBar() {

document.addEventListener('mousemove', function(event) {
const sideNav = document.getElementById('side-nav');

if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
sideNav.style.left = '0';
}
Expand All @@ -806,6 +820,7 @@ document.addEventListener('mousemove', function(event) {
document.addEventListener('click', function(event) {
const sideNav = document.getElementById('side-nav');
const navToggle = document.getElementById('nav-toggle');

if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
sideNav.classList.remove('manual-toggle');
adjustNavBar();
Expand Down Expand Up @@ -869,6 +884,7 @@ setInterval(changeDirector, 3600000);
function updateDirectorSpotlight() {
const director = directors[currentDirectorIndex];
document.getElementById('spotlight-director-name').textContent = director.name;

const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&with_people=${director.id}&sort_by=popularity.desc&sort_by=vote_average.desc`;
getDirectorSpotlight(url);
}
Expand All @@ -890,6 +906,7 @@ async function getDirectorSpotlight(url) {
const resp = await fetch(url);
const respData = await resp.json();
let allMovies = [];

if (respData.results.length > 0) {
allMovies = respData.results.slice(0, numberOfMovies);
showMoviesDirectorSpotlight(allMovies);
Expand All @@ -898,6 +915,7 @@ async function getDirectorSpotlight(url) {

function showMoviesDirectorSpotlight(movies) {
director_main.innerHTML = '';

movies.forEach((movie) => {
const { id, poster_path, title, vote_average, genre_ids } = movie;
const movieEl = document.createElement('div');
Expand Down Expand Up @@ -946,6 +964,7 @@ function handleSignInOut() {
window.location.href = 'MovieVerse-Frontend/html/sign-in.html';
return;
}

updateSignInButtonState();
}

Expand Down
1 change: 1 addition & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -884,6 +884,7 @@ setInterval(changeDirector, 3600000);
function updateDirectorSpotlight() {
const director = directors[currentDirectorIndex];
document.getElementById('spotlight-director-name').textContent = director.name;

const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&with_people=${director.id}&sort_by=popularity.desc&sort_by=vote_average.desc`;
getDirectorSpotlight(url);
}
Expand Down

0 comments on commit cd19de3

Please sign in to comment.