New feature/minor fixes

.github/README.md

@@ -12,8 +12,6 @@ Welcome to **The MovieVerse** - your digital compass to the cinematic universe.
 
 **This app is currently available at [movie-verse.com](https://movie-verse.com).**
 
----
-
 ## Table of Contents
 
 - [User Interface](#user-interface)

MovieVerse-Frontend/html/about.html

@@ -301,7 +301,7 @@ <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The Movie
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
 
-        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!</p>
+        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
 
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
 

MovieVerse-Frontend/html/movie-details.html

@@ -351,7 +351,7 @@ <h3>Your Rating:</h3>
         <div class="movie-right" style="margin-top: -50px">
             <p id="movie-description" class="movie-description"></p>
             <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
+            <div id="comments-section" style="margin-top: 75px">
                 <h3>Movie Comments</h3>
                 <div id="comments-container"></div>
                 <!-- Toggle Buttons -->
@@ -952,7 +952,9 @@ <h3>Add a Comment for This Movie</h3>
         let isTrailerOpen = false;
 
         document.getElementById('movie-image').addEventListener('click', function() {
-            document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            if (document.getElementById('trailerButton')) {
+                document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            }
 
             const imageUrl = this.src;
             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;">

MovieVerse-Frontend/html/search.html

@@ -275,7 +275,7 @@ <h2 id="search-results-label">Search Results</h2>
             <input type="number" id="year-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
 
             <label style="vertical-align: center" for="rating-filter">Rating:</label>
-            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="5" title="Rating" />
+            <input type="range" id="rating-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
             <span id="rating-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
@@ -299,7 +299,7 @@ <h2 id="search-results-label">Search Results</h2>
             <input type="number" id="year-tv-filter" placeholder="Year of Publishing" style="color: white" min="1900" max="2024" />
 
             <label style="vertical-align: center" for="rating-tv-filter">Rating:</label>
-            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="5" title="Rating" />
+            <input type="range" id="rating-tv-filter" min="0" max="10" step="0.1" value="0" title="Rating" />
             <span id="rating-tv-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
@@ -324,7 +324,7 @@ <h2 id="search-results-label">Search Results</h2>
             </select>
 
             <label for="popularity-filter">Popularity Score:</label>
-            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="20" title="Popularity" />
+            <input type="range" id="popularity-filter" min="0" max="100" step="1" value="5" title="Popularity" />
 
             <span id="popularity-value" style="color: white; font: inherit"></span>
             <button id="reset-filters">Reset Filters</button>
@@ -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>
 

MovieVerse-Frontend/html/tv-details.html

@@ -357,7 +357,7 @@ <h3>Your Rating:</h3>
             <p id="movie-description" class="movie-description"></p>
             <h2 id="movie-rating" class="movie-rating"></h2>
 
-            <button id="trailerButton" class="trailer-button" style="display:none; font: inherit;">Watch Trailer</button>
+            <button id="trailerButton" class="trailer-button" style="display:none; font: inherit; margin-top: 50px">Watch Trailer</button>
             <div id="trailerContainer" style="overflow: hidden; max-height: 0; transition: max-height 0.5s ease-in-out;"></div>
 
             <div id="comments-section">

MovieVerse-Frontend/js/movie-details.js

@@ -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;
         }
+    }
+
+    let data;
+    for (const key of apiKeys) {
+        data = await tryFetch(key);
+        if (data) break;
+    }
 
-        const rtRatingObj = data.Ratings.find(rating => rating.Source === "Rotten Tomatoes");
-        let rtRating = rtRatingObj ? rtRatingObj.Value : 'N/A';
+    if (!data) {
+        populateMovieDetails(tmdbMovieData, tmdbMovieData.vote_average, 'N/A', 'Metascore information unavailable, click to search on Metacritics', 'Awards information unavailable');
+        return;
+    }
 
-        let metascore = data.Metascore ? `${data.Metascore}/100` : 'N/A';
-        let awards = data.Awards;
-        let rated = data.Rated ? data.Rated : 'Rating information unavailable';
+    let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
+    if (imdbRating === 'N/A' || imdbRating === '0.0') {
+        imdbRating = 'N/A';
+    }
 
-        if (awards === 'N/A') {
-            awards = 'Awards information unavailable';
-        }
+    const rtRatingObj = data.Ratings.find(rating => rating.Source === "Rotten Tomatoes");
+    let rtRating = rtRatingObj ? rtRatingObj.Value : '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';
-        }
+    let metascore = data.Metascore ? `${data.Metascore}/100` : 'N/A';
+    let awards = data.Awards;
+    let rated = data.Rated ? data.Rated : 'Rating information unavailable';
 
-        if (rtRating === 'N/A') {
-            const imdbRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
-            rtRating = calculateFallbackRTRating(imdbRatingValue, tmdbMovieData.vote_average)
-        }
+    if (awards === 'N/A') {
+        awards = 'Awards information unavailable';
+    }
 
-        populateMovieDetails(tmdbMovieData, imdbRating, rtRating, metascore, awards, rated);
+    if (metascore === 'N/A/100') {
+        const metacriticsRatingValue = imdbRating !== 'N/A' ? parseFloat(imdbRating) : (tmdbMovieData.vote_average / 2);
+        metascore = calculateFallbackMetacriticsRating(metacriticsRatingValue, tmdbMovieData.vote_average) + '/100';
     }
-    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 (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) {
@@ -1258,10 +1276,10 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         align-items: center;
         justify-content: center;
         position: relative;
-        width: 450px;
+        width: 90vw; 
+        max-width: 450px;
         margin: 20px auto;
         overflow: hidden;
-        max-width: 100%;
         box-sizing: border-box;
     `;
 
@@ -1276,28 +1294,40 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     detailsContainer.appendChild(mediaTitle);
     detailsContainer.appendChild(mediaContainer);
 
+    const imageWrapper = document.createElement('div');
+    imageWrapper.style = `
+        width: 100%;
+        max-height: 210px; 
+        border-radius: 16px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    `;
+
     const imageElement = document.createElement('img');
     imageElement.style = `
-        max-width: 100%;
-        max-height: 210px;
-        border-radius: 16px;
+        width: 100%;
+        height: auto;
         transition: opacity 0.5s ease-in-out;
         opacity: 1;
         cursor: pointer;
+        object-fit: contain;
     `;
     if (images.length > 0) {
         imageElement.src = `https://image.tmdb.org/t/p/w1280${images[0].file_path}`;
     }
-    mediaContainer.appendChild(imageElement);
+    imageWrapper.appendChild(imageElement);
+    mediaContainer.appendChild(imageWrapper);
 
     imageElement.addEventListener('click', function() {
         const imageUrl = this.src;
         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();">
-            <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
-        </div>
-    `;
+            <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: 16px; cursor: default;" onclick="event.stopPropagation();">
+                <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
+            </div>
+        `;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
         const modal = document.getElementById('image-modal');
         const closeModalBtn = document.getElementById('removeBtn');
@@ -1317,7 +1347,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     prevButton.innerHTML = '<i class="fas fa-arrow-left"></i>';
     prevButton.style = `
         position: absolute;
-        left: 0;
+        left: 5px; 
         top: 50%;
         transform: translateY(-50%);
         background-color: #7378c5;
@@ -1327,6 +1357,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         width: 30px;
         border: none;
         cursor: pointer;
+        z-index: 10;
     `;
     prevButton.onmouseover = () => prevButton.style.backgroundColor = '#ff8623';
     prevButton.onmouseout = () => prevButton.style.backgroundColor = '#7378c5';
@@ -1337,7 +1368,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     nextButton.innerHTML = '<i class="fas fa-arrow-right"></i>';
     nextButton.style = `
         position: absolute;
-        right: 0;
+        right: 5px; 
         top: 50%;
         transform: translateY(-50%);
         background-color: #7378c5;
@@ -1347,6 +1378,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         width: 30px;
         border: none;
         cursor: pointer;
+        z-index: 10;
     `;
     nextButton.onmouseover = () => nextButton.style.backgroundColor = '#ff8623';
     nextButton.onmouseout = () => nextButton.style.backgroundColor = '#7378c5';
@@ -1378,7 +1410,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');
@@ -1397,6 +1429,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 {

MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/README.md

@@ -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.
 
@@ -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.
 
@@ -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.
 
@@ -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.
 
@@ -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.
 

MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html

@@ -301,7 +301,7 @@ <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The Movie
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
 
-        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!</p>
+        <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
 
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
 

MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html

@@ -351,7 +351,7 @@ <h3>Your Rating:</h3>
         <div class="movie-right" style="margin-top: -50px">
             <p id="movie-description" class="movie-description"></p>
             <h2 id="movie-rating" class="movie-rating"></h2>
-            <div id="comments-section">
+            <div id="comments-section" style="margin-top: 75px">
                 <h3>Movie Comments</h3>
                 <div id="comments-container"></div>
                 <!-- Toggle Buttons -->
@@ -952,7 +952,9 @@ <h3>Add a Comment for This Movie</h3>
         let isTrailerOpen = false;
 
         document.getElementById('movie-image').addEventListener('click', function() {
-            document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            if (document.getElementById('trailerButton')) {
+                document.getElementById('trailerButton').scrollIntoView({ behavior: 'smooth' });
+            }
 
             const imageUrl = this.src;
             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;">