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 24, 2024
1 parent 89d1279 commit 25a7142
Show file tree
Hide file tree
Showing 33 changed files with 5,839 additions and 1,919 deletions.
2 changes: 1 addition & 1 deletion MovieVerse-Mobile/app/js/LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2023 Son Nguyen Hoang
Copyright (c) 2024 Son Nguyen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
40 changes: 35 additions & 5 deletions MovieVerse-Mobile/app/js/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ async function showMovieOfTheDay() {
}
}
catch (error) {
console.error('Error fetching movie:', error);
console.log('Error fetching movie:', error);
fallbackMovieSelection();
}
}
Expand All @@ -43,6 +43,7 @@ function getMovieVerseData(input) {
function fallbackMovieSelection() {
const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];

localStorage.setItem('selectedMovieId', randomFallbackMovie);
window.location.href = 'movie-details.html';
}
Expand Down Expand Up @@ -131,7 +132,7 @@ async function fetchGenreMap() {
localStorage.setItem('genreMap', JSON.stringify(genreMap));
}
catch (error) {
console.error('Error fetching genre map:', error);
console.log('Error fetching genre map:', error);
}
}

Expand Down Expand Up @@ -163,16 +164,45 @@ async function rotateUserStats() {
{
label: "Favorite Movies",
getValue: () => {
const favoritedMovies = JSON.parse(localStorage.getItem('favoritesMovies')) || [];
const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
return favoritedMovies.length;
}
},
{
label: "Favorite Genre",
getValue: () => {
const mostCommonGenreCode = getMostCommonGenre();
const genreMap = JSON.parse(localStorage.getItem('genreMap')) || {};
return genreMap[mostCommonGenreCode] || 'Not Available';
const genreMapString = localStorage.getItem('genreMap');
if (!genreMapString) {
console.log('No genre map found in localStorage.');
return 'Not Available';
}

let genreMap;
try {
genreMap = JSON.parse(genreMapString);
}
catch (e) {
console.log('Error parsing genre map:', e);
return 'Not Available';
}

let genreObject;
if (Array.isArray(genreMap)) {
genreObject = genreMap.reduce((acc, genre) => {
acc[genre.id] = genre.name;
return acc;
}, {});
}
else if (typeof genreMap === 'object' && genreMap !== null) {
genreObject = genreMap;
}
else {
console.log('genreMap is neither an array nor a proper object:', genreMap);
return 'Not Available';
}

return genreObject[mostCommonGenreCode] || 'Not Available';
}
},
{ label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
Expand Down
210 changes: 194 additions & 16 deletions MovieVerse-Mobile/app/js/actor-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ async function fetchActorDetails(actorId) {
hideSpinner();
}
catch (error) {
console.error('Error fetching actor details:', error);
console.log('Error fetching actor details:', error);
document.getElementById('actor-details-container').innerHTML = `
<div style="display: flex; justify-content: center; align-items: center; text-align: center; width: 100vw; height: 800px">
<h2>Actor details not found - try again with a different actor.</h2>
Expand All @@ -135,7 +135,7 @@ async function fetchActorDetails(actorId) {
}
}

function populateActorDetails(actor, credits) {
async function populateActorDetails(actor, credits) {
const actorImage = document.getElementById('actor-image');
const actorName = document.getElementById('actor-name');
const actorDescription = document.getElementById('actor-description');
Expand Down Expand Up @@ -169,17 +169,18 @@ function populateActorDetails(actor, credits) {
}

actorDescription.innerHTML = `
<p><strong>Biography:</strong> ${actor.biography || 'N/A'}</p>
<p><strong>Date of Birth:</strong> ${actor.birthday || 'N/A'}</p>
<p><strong>Date of Death:</strong> ${actor.deathday || 'N/A'}</p>
<p><strong>Biography:</strong> ${actor.biography || 'Information Unavailable'}</p>
<p><strong>Also Known As:</strong> ${actor.also_known_as.join(', ') || 'Information Unavailable'}</p>
<p><strong>Date of Birth:</strong> ${actor.birthday || 'Information Unavailable'}</p>
<p><strong>Date of Death:</strong> ${actor.deathday || 'Information Unavailable'}</p>
<p><strong>Age:</strong> ${ageOrStatus}</p>
<p><strong>Place of Birth:</strong> ${actor.place_of_birth || 'N/A'}</p>
<p><strong>Known For:</strong> ${actor.known_for_department || 'N/A'}</p>
<p><strong>Height:</strong> ${actor.height || 'N/A'}</p>
<p><strong>Place of Birth:</strong> ${actor.place_of_birth || 'Information Unavailable'}</p>
<p><strong>Known For:</strong> ${actor.known_for_department || 'Information Unavailable'}</p>
<p><strong>Height:</strong> ${actor.height || 'Information Unavailable'}</p>
`;

const gender = document.createElement('div');
gender.innerHTML = `<p><strong>Gender:</strong> ${actor.gender === 1 ? 'Female' : actor.gender === 2 ? 'Male' : 'N/A'}</p>`;
gender.innerHTML = `<p><strong>Gender:</strong> ${actor.gender === 1 ? 'Female' : actor.gender === 2 ? 'Male' : 'Information Unavailable'}</p>`;
actorDescription.appendChild(gender);

const popularity = document.createElement('div');
Expand All @@ -192,7 +193,8 @@ function populateActorDetails(actor, credits) {

const movieList = document.createElement('div');
movieList.classList.add('movie-list');
credits.cast.forEach(movie => {

credits.cast.forEach((movie, index) => {
const movieLink = document.createElement('span');
movieLink.textContent = movie.title;
movieLink.classList.add('movie-link');
Expand All @@ -201,10 +203,157 @@ function populateActorDetails(actor, credits) {
window.location.href = 'movie-details.html';
});
movieList.appendChild(movieLink);
movieList.appendChild(document.createTextNode(', '));

if (index < credits.cast.length - 1) {
movieList.appendChild(document.createTextNode(', '));
}
});

filmographyHeading.appendChild(movieList);

const mediaUrl = `https://${getMovieVerseData()}/3/person/${actor.id}/images?${generateMovieNames()}${getMovieCode()}`;
const mediaResponse = await fetch(mediaUrl);
const mediaData = await mediaResponse.json();
const images = mediaData.profiles;

const detailsContainer = document.getElementById('actor-description');

let mediaContainer = document.getElementById('media-container');
if (!mediaContainer) {
mediaContainer = document.createElement('div');
mediaContainer.id = 'media-container';
mediaContainer.style = `
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 450px;
margin: 20px auto;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
`;
detailsContainer.appendChild(mediaContainer);
}

let mediaTitle = document.getElementById('media-title');
if (!mediaTitle) {
mediaTitle = document.createElement('p');
mediaTitle.id = 'media-title';
mediaTitle.textContent = 'Media:';
mediaTitle.style = `
font-weight: bold;
align-self: center;
margin-bottom: 5px;
`;
}

detailsContainer.appendChild(mediaTitle);
detailsContainer.appendChild(mediaContainer);

let imageElement = document.getElementById('series-media-image');
if (!imageElement) {
imageElement = document.createElement('img');
imageElement.id = 'series-media-image';
imageElement.style = `
max-width: 100%;
max-height: 210px;
transition: opacity 0.5s ease-in-out;
opacity: 1;
border-radius: 16px;
cursor: pointer;
`;
mediaContainer.appendChild(imageElement);
}

if (images.length > 0) {
imageElement.src = `https://image.tmdb.org/t/p/w1280${images[0].file_path}`;
}

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>
`;
document.body.insertAdjacentHTML('beforeend', modalHtml);
const modal = document.getElementById('image-modal');
const closeModalBtn = document.getElementById('removeBtn');

closeModalBtn.onclick = function() {
modal.remove();
};

modal.addEventListener('click', function(event) {
if (event.target === this) {
this.remove();
}
});
});

let prevButton = document.getElementById('prev-media-button');
let nextButton = document.getElementById('next-media-button');
if (!prevButton || !nextButton) {
prevButton = document.createElement('button');
nextButton = document.createElement('button');
prevButton.id = 'prev-media-button';
nextButton.id = 'next-media-button';
prevButton.innerHTML = '<i class="fas fa-arrow-left"></i>';
nextButton.innerHTML = '<i class="fas fa-arrow-right"></i>';

[prevButton, nextButton].forEach(button => {
button.style = `
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #7378c5;
color: white;
border-radius: 8px;
height: 30px;
width: 30px;
border: none;
cursor: pointer;
`;
button.onmouseover = () => button.style.backgroundColor = '#ff8623';
button.onmouseout = () => button.style.backgroundColor = '#7378c5';
});

prevButton.style.left = '0';
nextButton.style.right = '0';

mediaContainer.appendChild(prevButton);
mediaContainer.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';
setTimeout(() => {
imgElement.src = `https://image.tmdb.org/t/p/w1280${images[currentIndex].file_path}`;
imgElement.style.opacity = '1';
}, 420);
}

if (window.innerWidth <= 767) {
mediaContainer.style.width = 'calc(100% - 40px)';
}

if (images.length === 0) {
mediaContainer.innerHTML = '<p>No media available</p>';
}

applySettings();
}

Expand Down Expand Up @@ -234,7 +383,7 @@ async function fetchGenreMap() {
localStorage.setItem('genreMap', JSON.stringify(genreMap));
}
catch (error) {
console.error('Error fetching genre map:', error);
console.log('Error fetching genre map:', error);
}
}

Expand Down Expand Up @@ -266,16 +415,45 @@ async function rotateUserStats() {
{
label: "Favorite Movies",
getValue: () => {
const favoritedMovies = JSON.parse(localStorage.getItem('favoritesMovies')) || [];
const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
return favoritedMovies.length;
}
},
{
label: "Favorite Genre",
getValue: () => {
const mostCommonGenreCode = getMostCommonGenre();
const genreMap = JSON.parse(localStorage.getItem('genreMap')) || {};
return genreMap[mostCommonGenreCode] || 'Not Available';
const genreMapString = localStorage.getItem('genreMap');
if (!genreMapString) {
console.log('No genre map found in localStorage.');
return 'Not Available';
}

let genreMap;
try {
genreMap = JSON.parse(genreMapString);
}
catch (e) {
console.log('Error parsing genre map:', e);
return 'Not Available';
}

let genreObject;
if (Array.isArray(genreMap)) {
genreObject = genreMap.reduce((acc, genre) => {
acc[genre.id] = genre.name;
return acc;
}, {});
}
else if (typeof genreMap === 'object' && genreMap !== null) {
genreObject = genreMap;
}
else {
console.log('genreMap is neither an array nor a proper object:', genreMap);
return 'Not Available';
}

return genreObject[mostCommonGenreCode] || 'Not Available';
}
},
{ label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
Expand Down Expand Up @@ -463,7 +641,7 @@ async function showMovieOfTheDay() {
}
}
catch (error) {
console.error('Error fetching movie:', error);
console.log('Error fetching movie:', error);
fallbackMovieSelection();
}
}
Expand Down
Loading

0 comments on commit 25a7142

Please sign in to comment.