Merge pull request #206 from hoangsonww/main-deployment-branch

Main deployment branch

Author: hoangsonww

.github/README.md

@@ -134,13 +134,13 @@ If you have a suggestion that would make this better, please fork the repo and c
 9. Visit the mobile app directory and install the dependencies (if any):
     ```bash
     npm install
-    cordova platform add ios
+    cordova platform add swift
     cordova platform add android
     ```
 10. Start the mobile app using Cordova (visit the `MovieVerse-Mobile` directory for more information):
     ```bash
     cordova build
-    cordova emulate ios
+    cordova emulate swift
     cordova emulate android
     ```
 11. Commit your Changes (Don't forget to create a branch for your feature):

MovieVerse-Frontend/js/movie-details.js

@@ -1640,6 +1640,8 @@ function createImdbRatingCircle(imdbRating, imdbId) {
         imdbRating = 'N/A';
     }
 
+    imdbRating = imdbRating.toFixed(1);
+
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
         circleContainer = document.createElement('div');

MovieVerse-Mobile/.idea/misc.xml

@@ -61,6 +61,10 @@ MovieVerse also offers a launch screen that welcomes users with a sleek and enga
 - [Apache Cordova](https://cordova.apache.org/) 10.0.0 or later
 - [Node.js](https://nodejs.org/en/) 14.17.0 or later
 - [npm](https://www.npmjs.com/) 6.14.13 or later
+- [Swift](https://developer.apple.com/swift/) 5.4.2 or later
+- [Java](https://www.oracle.com/java/technologies/javase-jdk11-downloads.html) 11.0.11 or later
+- [Gradle](https://gradle.org/) 7.0.2 or later
+- [Git](https://git-scm.com/) 2.32.0 or later
 
 ### Instructions
 1. **Clone the Repository**: Clone the repository to your local machine using the following command:
@@ -92,14 +96,21 @@ MovieVerse also offers a launch screen that welcomes users with a sleek and enga
 7. **Open the Project**: Open the project in Xcode and/or Android Studio to view the source code and test the app within the simulator.
 8. **Enjoy coding!**
 
-**Important**: If you make any changes to the source code of the mobile app, you will need to update the iOS build process by removing iOS and adding it again using the following commands:
+**Important**: If you make any changes to the source code of the **iOS** mobile app, you will need to update the iOS build process by removing iOS and adding it again using the following commands:
 
 ```bash
 cordova platform rm ios
 cordova platform add ios
 ```
 
-The Android app, however, will build and run automatically as expected without any additional steps.
+Then, go to Xcode and re-build & re-run the app.
+
+The **Android** app, however, will build and run automatically as expected without any additional steps. You will just have to re-build and re-run the app:
+
+```bash
+cordova build android
+cordova emulate android
+```
 
 ## Usage
 

MovieVerse-Mobile/README.md

@@ -242,6 +242,7 @@ async function rotateUserStats() {
         clearInterval(statRotationInterval);
         updateStatDisplay();
         statRotationInterval = setInterval(updateStatDisplay, 3000);
+        localTimeDiv.scrollIntoView({ behavior: 'smooth' });
     });
 }
 
@@ -328,4 +329,4 @@ function getMostCommonGenre() {
     return mostCommonGenre || 'Not Available';
 }
 
-document.addEventListener('DOMContentLoaded', rotateUserStats);
+document.addEventListener('DOMContentLoaded', rotateUserStats);

MovieVerse-Mobile/app/js/about.js

@@ -3,7 +3,9 @@ const searchButton = document.getElementById("button-search");
 const form = document.getElementById("form1");
 const main = document.getElementById("main");
 const IMGPATH = "https://image.tmdb.org/t/p/w1280";
+const IMGPATH2 = "https://image.tmdb.org/t/p/w185";
 const searchTitle = document.getElementById("search-title");
+let currentIndex = sessionStorage.getItem('currentIndex') ? parseInt(sessionStorage.getItem('currentIndex')) : 0;
 
 function showSpinner() {
     document.getElementById('myModal').classList.add('modal-visible');
@@ -89,6 +91,7 @@ let initialMainContent = '';
 
 document.addEventListener('DOMContentLoaded', () => {
     initialMainContent = document.getElementById('main').innerHTML;
+    currentIndex = 0;
 
     const actorId = localStorage.getItem('selectedActorId');
     if (actorId) {
@@ -97,8 +100,6 @@ document.addEventListener('DOMContentLoaded', () => {
     else {
         fetchActorDetails(2037);
     }
-
-    document.getElementById('clear-search-btn').style.display = 'none';
 });
 
 async function fetchActorDetails(actorId) {
@@ -151,7 +152,6 @@ async function populateActorDetails(actor, credits) {
         const noImageText = document.createElement('h2');
         noImageText.textContent = 'Image Not Available';
         noImageText.style.textAlign = 'center';
-        noImageText.style.height = '800px';
         document.querySelector('.actor-left').appendChild(noImageText);
     }
 
@@ -193,19 +193,52 @@ async function populateActorDetails(actor, credits) {
 
     const movieList = document.createElement('div');
     movieList.classList.add('movie-list');
+    movieList.style.display = 'flex';
+    movieList.style.flexWrap = 'wrap';
+    movieList.style.justifyContent = 'center';
+    movieList.style.gap = '5px';
+
+    let filmsToDisplay = credits.cast;
+    filmsToDisplay = filmsToDisplay.sort((a, b) => b.popularity - a.popularity);
 
-    credits.cast.forEach((movie, index) => {
-        const movieLink = document.createElement('span');
-        movieLink.textContent = movie.title;
+    filmsToDisplay.forEach((movie, index) => {
+        const movieLink = document.createElement('a');
         movieLink.classList.add('movie-link');
-        movieLink.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        });
+        movieLink.href = 'javascript:void(0);';
+        movieLink.setAttribute('onclick', `selectMovieId(${movie.id});`);
+
+        const movieItem = document.createElement('div');
+        movieItem.classList.add('movie-item');
+
+        const movieImage = document.createElement('img');
+        movieImage.classList.add('movie-image');
+
+        if (movie.poster_path) {
+            movieImage.src = IMGPATH2 + movie.poster_path;
+            movieImage.alt = `${movie.title} Poster`;
+        } else {
+            movieImage.alt = 'Image Not Available';
+            movieImage.src = 'https://movie-verse.com/images/movie-default.jpg';
+            movieImage.style.filter = 'grayscale(100%)';
+            movieImage.style.objectFit = 'cover';
+        }
+
+        movieItem.appendChild(movieImage);
+
+        const movieDetails = document.createElement('div');
+        movieDetails.classList.add('movie-details');
+
+        const movieTitle = document.createElement('p');
+        movieTitle.classList.add('movie-title');
+        movieTitle.textContent = movie.title;
+        movieDetails.appendChild(movieTitle);
+
+        movieItem.appendChild(movieDetails);
+        movieLink.appendChild(movieItem);
         movieList.appendChild(movieLink);
 
         if (index < credits.cast.length - 1) {
-            movieList.appendChild(document.createTextNode(', '));
+            movieList.appendChild(document.createTextNode(''));
         }
     });
 
@@ -252,6 +285,20 @@ async function populateActorDetails(actor, credits) {
     detailsContainer.appendChild(mediaTitle);
     detailsContainer.appendChild(mediaContainer);
 
+    let imageWrapper = document.getElementById('image-wrapper');
+    if (!imageWrapper) {
+        imageWrapper = document.createElement('div');
+        imageWrapper.id = 'image-wrapper';
+        imageWrapper.style = `
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        `;
+        mediaContainer.appendChild(imageWrapper);
+    }
+
     let imageElement = document.getElementById('series-media-image');
     if (!imageElement) {
         imageElement = document.createElement('img');
@@ -264,23 +311,29 @@ async function populateActorDetails(actor, credits) {
             border-radius: 16px;
             cursor: pointer;
         `;
-        mediaContainer.appendChild(imageElement);
+        imageElement.loading = 'lazy';
+        imageWrapper.appendChild(imageElement);
     }
 
     if (images.length > 0) {
-        imageElement.src = `https://image.tmdb.org/t/p/w1280${images[0].file_path}`;
+        imageElement.src = `https://image.tmdb.org/t/p/w780${images[0].file_path}`;
     }
 
-    imageElement.addEventListener('click', function() {
+    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;">
+                <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
+                <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 modalImage = modal.querySelector('img');
         const closeModalBtn = document.getElementById('removeBtn');
 
         closeModalBtn.onclick = function() {
@@ -292,8 +345,34 @@ async function populateActorDetails(actor, credits) {
                 this.remove();
             }
         });
+
+        const prevModalButton = document.getElementById('prevModalButton');
+        prevModalButton.onmouseover = () => prevModalButton.style.backgroundColor = '#ff8623';
+        prevModalButton.onmouseout = () => prevModalButton.style.backgroundColor = '#7378c5';
+        prevModalButton.onclick = () => navigateMediaAndModal(images, imageElement, modalImage, -1);
+
+        const nextModalButton = document.getElementById('nextModalButton');
+        nextModalButton.onmouseover = () => nextModalButton.style.backgroundColor = '#ff8623';
+        nextModalButton.onmouseout = () => nextModalButton.style.backgroundColor = '#7378c5';
+        nextModalButton.onclick = () => navigateMediaAndModal(images, imageElement, modalImage, 1);
     });
 
+    function navigateMediaAndModal(images, imgElement1, imgElement2, direction) {
+        imgElement1.style.opacity = '0';
+        imgElement2.style.opacity = '0';
+        currentIndex = (currentIndex + direction + images.length) % images.length;
+
+        setTimeout(() => {
+            imgElement1.src = `https://image.tmdb.org/t/p/w780${images[currentIndex].file_path}`;
+            imgElement2.src = `https://image.tmdb.org/t/p/w1280${images[currentIndex].file_path}`;
+            imgElement1.style.opacity = '1';
+            imgElement2.style.opacity = '1';
+        }, 500);
+
+        sessionStorage.setItem('currentIndex', currentIndex);
+        updateDots(currentIndex);
+    }
+
     let prevButton = document.getElementById('prev-media-button');
     let nextButton = document.getElementById('next-media-button');
     if (!prevButton || !nextButton) {
@@ -324,26 +403,74 @@ async function populateActorDetails(actor, credits) {
         prevButton.style.left = '0';
         nextButton.style.right = '0';
 
-        mediaContainer.appendChild(prevButton);
-        mediaContainer.appendChild(nextButton);
+        imageWrapper.appendChild(prevButton);
+        imageWrapper.appendChild(nextButton);
     }
 
-    let currentIndex = 0;
     prevButton.onclick = () => navigateMedia(images, imageElement, -1);
     nextButton.onclick = () => navigateMedia(images, imageElement, 1);
 
     function navigateMedia(images, imgElement, direction) {
-        currentIndex += direction;
-        if (currentIndex < 0) {
-            currentIndex = images.length - 1;
-        } else if (currentIndex >= images.length) {
-            currentIndex = 0;
-        }
         imgElement.style.opacity = '0';
+        currentIndex = (currentIndex + direction + images.length) % images.length;
         setTimeout(() => {
-            imgElement.src = `https://image.tmdb.org/t/p/w1280${images[currentIndex].file_path}`;
+            imgElement.src = `https://image.tmdb.org/t/p/w780${images[currentIndex].file_path}`;
             imgElement.style.opacity = '1';
-        }, 420);
+        }, 500);
+
+        sessionStorage.setItem('currentIndex', currentIndex);
+        updateDots(currentIndex);
+    }
+
+    const indicatorContainer = document.createElement('div');
+    indicatorContainer.style = `
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 15px;
+    `;
+
+    const maxDotsPerLine = 10;
+    let currentLine = document.createElement('div');
+    currentLine.style.display = 'flex';
+
+    images.forEach((_, index) => {
+        const dot = document.createElement('div');
+        dot.className = 'indicator';
+        dot.style = `
+            width: 8px;
+            height: 8px;
+            margin: 0 5px;
+            background-color: ${index === currentIndex ? '#ff8623' : '#bbb'}; 
+            border-radius: 50%;
+            cursor: pointer;
+            margin-bottom: 5px;
+        `;
+        dot.addEventListener('click', () => {
+            navigateMedia(images, imageElement, index - currentIndex);
+            updateDots(index);
+        });
+
+        currentLine.appendChild(dot);
+
+        if ((index + 1) % maxDotsPerLine === 0 && index !== images.length - 1) {
+            indicatorContainer.appendChild(currentLine);
+            currentLine = document.createElement('div');
+            currentLine.style.display = 'flex';
+        }
+    });
+
+    if (currentLine.children.length > 0) {
+        indicatorContainer.appendChild(currentLine);
+    }
+
+    mediaContainer.appendChild(indicatorContainer);
+
+    function updateDots(newIndex) {
+        const dots = document.querySelectorAll('.indicator');
+        dots.forEach((dot, index) => {
+            dot.style.backgroundColor = index === newIndex ? '#ff8623' : '#bbb';
+        });
     }
 
     if (window.innerWidth <= 767) {
@@ -357,6 +484,11 @@ async function populateActorDetails(actor, credits) {
     applySettings();
 }
 
+function selectMovieId(movieId) {
+    localStorage.setItem('selectedMovieId', movieId);
+    window.location.href = 'movie-details.html';
+}
+
 function calculateAge(birthday, deathday = null) {
     const birthDate = new Date(birthday);
     const referenceDate = deathday ? new Date(deathday) : new Date();
@@ -493,6 +625,7 @@ async function rotateUserStats() {
         clearInterval(statRotationInterval);
         updateStatDisplay();
         statRotationInterval = setInterval(updateStatDisplay, 3000);
+        localTimeDiv.scrollIntoView({ behavior: 'smooth' });
     });
 }
 

MovieVerse-Mobile/app/js/actor-details.js

@@ -241,4 +241,4 @@ function updateMoviesFavorited(movieId) {
         favoritedMovies.push(movieId);
         localStorage.setItem('moviesFavorited', JSON.stringify(favoritedMovies));
     }
-}
+}