Update: Enhanced loading times (#192)

hoangsonww · May 23, 2024 · a48e475 · a48e475
1 parent a395492
commit a48e475
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
@@ -955,9 +955,9 @@ <h3>Add a Comment for This Movie</h3>
                 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;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+            let imageUrl = this.src.replace('w780', 'w1280');
+            const modalHtml = `<div id="image-modal" style="z-index: 100020000; 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;" alt="Movie Image" />
                                 <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);

diff --git a/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Frontend/html/tv-details.html
@@ -785,7 +785,7 @@ <h3>Add a Comment for This TV Series</h3>
         });
 
         document.getElementById('movie-image').addEventListener('click', function() {
-            const imageUrl = this.src;
+            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>

diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
@@ -1193,7 +1193,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
     mediaContainer.appendChild(imageWrapper);
 
     imageElement.addEventListener('click', function() {
-        const imageUrl = this.src;
+        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: 16px; cursor: default;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">

diff --git a/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Frontend/js/tv-details.js
@@ -809,7 +809,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
     }
 
     imageElement.addEventListener('click', function() {
-        const imageUrl = this.src;
+        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();">