Skip to content

Commit

Permalink
Update: Enhanced loading times (#192)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangsonww
hoangsonww committed May 22, 2024
1 parent 5fe35ba commit 43650c9
Show file tree
Hide file tree
Showing 14 changed files with 34 additions and 37 deletions.
6 changes: 3 additions & 3 deletions MovieVerse-Frontend/js/movie-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const favoriteButton = document.getElementById("favorite-btn");
const searchTitle = document.getElementById("search-title");

Expand Down Expand Up @@ -1187,7 +1187,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
object-fit: contain;
`;
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}`;
}
imageWrapper.appendChild(imageElement);
mediaContainer.appendChild(imageWrapper);
Expand Down Expand Up @@ -1268,7 +1268,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
}
imgElement.style.opacity = '0';
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);
}
Expand Down
8 changes: 4 additions & 4 deletions MovieVerse-Frontend/js/tv-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const searchTitle = document.getElementById("search-title");
let initialMainContent;

Expand Down Expand Up @@ -600,7 +600,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
document.getElementById('movie-title').textContent = title;
document.title = tvSeries.name + " - TV Series Details";

const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w1280${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w780${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
document.getElementById('movie-image').src = posterPath;
document.getElementById('movie-image').alt = `Poster of ${title}`;

Expand Down Expand Up @@ -805,7 +805,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}

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() {
Expand Down Expand Up @@ -878,7 +878,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}
imgElement.style.opacity = '0';
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);
}
Expand Down
2 changes: 1 addition & 1 deletion ...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Please note that it is currently under development, and the components may under

### 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.
The tests directory contains a collection of test scripts and suites 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.

- `apiTests.js`: Tests for the API functionality
- `chatbotInteractionTests.js`: Tests for the chatbot interaction
Expand Down
2 changes: 1 addition & 1 deletion ...ile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ <h2 id="movie-title" class="movie-header"></h2>
❤️
</button>
</div>
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002" loading="lazy">
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
<h3>Your Rating:</h3>
<div class="rating" title="Click on a star to rate this movie!">
<span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
Expand Down
7 changes: 3 additions & 4 deletions ...-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const favoriteButton = document.getElementById("favorite-btn");
const searchTitle = document.getElementById("search-title");

Expand Down Expand Up @@ -1187,9 +1187,8 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
object-fit: contain;
`;
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.loading = 'lazy';
imageWrapper.appendChild(imageElement);
mediaContainer.appendChild(imageWrapper);

Expand Down Expand Up @@ -1269,7 +1268,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
}
imgElement.style.opacity = '0';
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);
}
Expand Down
8 changes: 4 additions & 4 deletions ...rse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const searchTitle = document.getElementById("search-title");
let initialMainContent;

Expand Down Expand Up @@ -600,7 +600,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
document.getElementById('movie-title').textContent = title;
document.title = tvSeries.name + " - TV Series Details";

const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w1280${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w780${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
document.getElementById('movie-image').src = posterPath;
document.getElementById('movie-image').alt = `Poster of ${title}`;

Expand Down Expand Up @@ -805,7 +805,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}

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() {
Expand Down Expand Up @@ -878,7 +878,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}
imgElement.style.opacity = '0';
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);
}
Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Please note that it is currently under development, and the components may under

### 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.
The tests directory contains a collection of test scripts and suites 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.

- `apiTests.js`: Tests for the API functionality
- `chatbotInteractionTests.js`: Tests for the chatbot interaction
Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ <h2 id="movie-title" class="movie-header"></h2>
❤️
</button>
</div>
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002" loading="lazy">
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
<h3>Your Rating:</h3>
<div class="rating" title="Click on a star to rate this movie!">
<span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
Expand Down
7 changes: 3 additions & 4 deletions MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const favoriteButton = document.getElementById("favorite-btn");
const searchTitle = document.getElementById("search-title");

Expand Down Expand Up @@ -1187,9 +1187,8 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
object-fit: contain;
`;
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.loading = 'lazy';
imageWrapper.appendChild(imageElement);
mediaContainer.appendChild(imageWrapper);

Expand Down Expand Up @@ -1269,7 +1268,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
}
imgElement.style.opacity = '0';
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);
}
Expand Down
8 changes: 4 additions & 4 deletions MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/tv-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const searchTitle = document.getElementById("search-title");
let initialMainContent;

Expand Down Expand Up @@ -600,7 +600,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
document.getElementById('movie-title').textContent = title;
document.title = tvSeries.name + " - TV Series Details";

const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w1280${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w780${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
document.getElementById('movie-image').src = posterPath;
document.getElementById('movie-image').alt = `Poster of ${title}`;

Expand Down Expand Up @@ -805,7 +805,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}

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() {
Expand Down Expand Up @@ -878,7 +878,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}
imgElement.style.opacity = '0';
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);
}
Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/www/MovieVerse-Frontend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Please note that it is currently under development, and the components may under

### 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.
The tests directory contains a collection of test scripts and suites 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.

- `apiTests.js`: Tests for the API functionality
- `chatbotInteractionTests.js`: Tests for the chatbot interaction
Expand Down
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ <h2 id="movie-title" class="movie-header"></h2>
❤️
</button>
</div>
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002" loading="lazy">
<img id="movie-image" alt="Loading Movie Details..." style="width: 25vw; border-radius: 8px; z-index: 100002">
<h3>Your Rating:</h3>
<div class="rating" title="Click on a star to rate this movie!">
<span class="star" data-value="1" title="Oops, sorry to hear that this movie is disappointing to you">&#9733;</span>
Expand Down
7 changes: 3 additions & 4 deletions MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const favoriteButton = document.getElementById("favorite-btn");
const searchTitle = document.getElementById("search-title");

Expand Down Expand Up @@ -1187,9 +1187,8 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
object-fit: contain;
`;
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.loading = 'lazy';
imageWrapper.appendChild(imageElement);
mediaContainer.appendChild(imageWrapper);

Expand Down Expand Up @@ -1269,7 +1268,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
}
imgElement.style.opacity = '0';
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);
}
Expand Down
8 changes: 4 additions & 4 deletions MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const form = document.getElementById("form1");
const SEARCHPATH = `https://${getMovieVerseData()}/3/search/movie?&${generateMovieNames()}${getMovieCode()}&query=`;

const main = document.getElementById("main");
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const IMGPATH = "https://image.tmdb.org/t/p/w780";
const searchTitle = document.getElementById("search-title");
let initialMainContent;

Expand Down Expand Up @@ -600,7 +600,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
document.getElementById('movie-title').textContent = title;
document.title = tvSeries.name + " - TV Series Details";

const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w1280${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
const posterPath = tvSeries.poster_path ? `https://image.tmdb.org/t/p/w780${tvSeries.poster_path}` : 'path/to/default/poster.jpg';
document.getElementById('movie-image').src = posterPath;
document.getElementById('movie-image').alt = `Poster of ${title}`;

Expand Down Expand Up @@ -805,7 +805,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}

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() {
Expand Down Expand Up @@ -878,7 +878,7 @@ async function populateTvSeriesDetails(tvSeries, imdbRating) {
}
imgElement.style.opacity = '0';
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);
}
Expand Down

0 comments on commit 43650c9

Please sign in to comment.