Skip to content

Commit

Permalink
Merge pull request #244 from hoangsonww/main-deployment-branch
Browse files Browse the repository at this point in the history 
Updated Deployment Settings
  • Loading branch information
@hoangsonww
hoangsonww authored Nov 8, 2024
2 parents 9f8e45b + d5965c0 commit 5355b9c
Show file tree
Hide file tree
Showing 139 changed files with 65,534 additions and 1,643 deletions.
2 changes: 1 addition & 1 deletion .idea/dataSources.local.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions MovieVerse-Frontend/js/favorites.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {

let initialMoviesSelection = [];
let initialTVSeriesSelection = [];
const IMGPATH = `https://image.tmdb.org/t/p/w500`;

function translateFBC(value) {
return atob(value);
Expand Down
58 changes: 48 additions & 10 deletions MovieVerse-Frontend/js/movie-timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ function rotateImages(imageElements, interval = 3000) {
function showMovies(movies, mainElement, startYear, endYear, append) {
showSpinner();

// Add header for the selected year range if not appending
if (!append) {
mainElement.innerHTML = '';
const header = document.createElement('h2');
Expand All @@ -370,31 +371,28 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
header.style.marginBottom = '20px';
header.style.color = '#ff8623';
header.style.fontSize = '23px';
if (startYear === endYear) {
header.textContent = `Movies released in ${startYear}`;
} else {
header.textContent = `Movies released between ${startYear} and ${endYear}`;
}
header.textContent = startYear === endYear ? `Movies released in ${startYear}` : `Movies released between ${startYear} and ${endYear}`;

const centerContainer1 = document.getElementById('center-container1');
centerContainer1.innerHTML = '';
centerContainer1.appendChild(header);
centerContainer1.appendChild(mainElement);
}

const observer = new IntersectionObserver(
// Observer for loading additional images when movie enters viewport
const imageObserver = new IntersectionObserver(
async (entries, observer) => {
for (const entry of entries) {
if (entry.isIntersecting) {
const movieEl = entry.target;
const movieId = movieEl.dataset.id;

// Fetch and set up additional posters
const additionalPosters = await getAdditionalPosters(movieId);
let allPosters = [movieEl.dataset.posterPath, ...additionalPosters];

const movieImageContainer = movieEl.querySelector('.movie-images');

allPosters = allPosters.sort(() => 0.5 - Math.random()).slice(0, 10);

const movieImageContainer = movieEl.querySelector('.movie-images');
const imagePromises = allPosters.map((poster, index) => {
const img = new Image();
img.src = `${IMGPATH + poster}`;
Expand All @@ -415,9 +413,11 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
});
});

// Wait for images to load or timeout after 3 seconds
const maxWait = new Promise(resolve => setTimeout(resolve, 3000));
await Promise.race([Promise.all(imagePromises), maxWait]);

// Show the first poster image
movieImageContainer.querySelector('.poster-img').style.opacity = '1';

rotateImages(Array.from(movieImageContainer.children));
Expand All @@ -441,6 +441,7 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
movieEl.dataset.posterPath = poster_path;
movieEl.dataset.title = title;

// Limit the title to 8 words, adding "..." if necessary
const words = title.split(' ');
if (words.length >= 8) {
words[7] = '...';
Expand All @@ -454,6 +455,7 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
overview = 'No overview available.';
}

// Define HTML structure for the movie card
movieEl.innerHTML = `
<div class="movie-image-container">
<div class="movie-images" style="position: relative; width: 100%; height: 435px; overflow: hidden;">
Expand All @@ -478,15 +480,51 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
});

mainElement.appendChild(movieEl);
observer.observe(movieEl);
imageObserver.observe(movieEl);

// Observer for the slide-up animation
const slideObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
slideObserver.unobserve(entry.target);
}
});
},
{
rootMargin: '50px 0px',
threshold: 0.1,
}
);
slideObserver.observe(movieEl);
});

const centerContainer1 = document.getElementById('center-container1');
centerContainer1.appendChild(mainElement);

createLoadMoreButton(startYear, endYear, mainElement);
hideSpinner();
}

// Inject CSS for sliding-up animation if it doesn't already exist
if (!document.getElementById('slide-animation-style')) {
const style = document.createElement('style');
style.id = 'slide-animation-style';
style.innerHTML = `
.movie {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.movie.visible {
opacity: 1;
transform: translateY(0);
}
`;
document.head.appendChild(style);
}

function createLoadMoreButton(startYear, endYear, mainElement) {
const existingButtonDiv = mainElement.querySelector('.load-more-container');
if (existingButtonDiv) {
Expand Down
34 changes: 32 additions & 2 deletions MovieVerse-Frontend/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -807,6 +807,21 @@ function rotateImages(imageElements, interval = 3000) {
async function showMovies(items, container, category) {
container.innerHTML = '';

// Inject CSS for sliding-up animation if it doesn't already exist
const style = document.createElement('style');
style.innerHTML = `
.movie {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease, transform 1s ease;
}
.movie.visible {
opacity: 1;
transform: translateY(0);
}
`;
document.head.appendChild(style);

items.forEach(async item => {
const hasVoteAverage = typeof item.vote_average === 'number';
const isPerson = !hasVoteAverage;
Expand All @@ -815,15 +830,13 @@ async function showMovies(items, container, category) {

let title = item.title || item.name || 'N/A';
const words = title.split(' ');

if (words.length >= 8) {
words[7] = '...';
title = words.slice(0, 8).join(' ');
}

let overview = item.overview || 'Click to view the details of this movie/TV series.';
const biography = item.biography || 'Click to view the details of this person.';

if (overview === '') {
overview = 'Click to view the details of this movie/TV series.';
}
Expand Down Expand Up @@ -971,6 +984,23 @@ async function showMovies(items, container, category) {
const img = movieEl.querySelector('img');
observer.observe(img);
}

// Slide-up animation observer
const slideObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
slideObserver.unobserve(entry.target);
}
});
},
{
rootMargin: '50px 0px',
threshold: 0.1,
}
);
slideObserver.observe(movieEl);
});
}

Expand Down
33 changes: 22 additions & 11 deletions MovieVerse-Mobile/.idea/caches/deviceStreaming.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ...erse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {

let initialMoviesSelection = [];
let initialTVSeriesSelection = [];
const IMGPATH = `https://image.tmdb.org/t/p/w500`;

function translateFBC(value) {
return atob(value);
Expand Down
58 changes: 48 additions & 10 deletions ...Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ function rotateImages(imageElements, interval = 3000) {
function showMovies(movies, mainElement, startYear, endYear, append) {
showSpinner();

// Add header for the selected year range if not appending
if (!append) {
mainElement.innerHTML = '';
const header = document.createElement('h2');
Expand All @@ -370,31 +371,28 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
header.style.marginBottom = '20px';
header.style.color = '#ff8623';
header.style.fontSize = '23px';
if (startYear === endYear) {
header.textContent = `Movies released in ${startYear}`;
} else {
header.textContent = `Movies released between ${startYear} and ${endYear}`;
}
header.textContent = startYear === endYear ? `Movies released in ${startYear}` : `Movies released between ${startYear} and ${endYear}`;

const centerContainer1 = document.getElementById('center-container1');
centerContainer1.innerHTML = '';
centerContainer1.appendChild(header);
centerContainer1.appendChild(mainElement);
}

const observer = new IntersectionObserver(
// Observer for loading additional images when movie enters viewport
const imageObserver = new IntersectionObserver(
async (entries, observer) => {
for (const entry of entries) {
if (entry.isIntersecting) {
const movieEl = entry.target;
const movieId = movieEl.dataset.id;

// Fetch and set up additional posters
const additionalPosters = await getAdditionalPosters(movieId);
let allPosters = [movieEl.dataset.posterPath, ...additionalPosters];

const movieImageContainer = movieEl.querySelector('.movie-images');

allPosters = allPosters.sort(() => 0.5 - Math.random()).slice(0, 10);

const movieImageContainer = movieEl.querySelector('.movie-images');
const imagePromises = allPosters.map((poster, index) => {
const img = new Image();
img.src = `${IMGPATH + poster}`;
Expand All @@ -415,9 +413,11 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
});
});

// Wait for images to load or timeout after 3 seconds
const maxWait = new Promise(resolve => setTimeout(resolve, 3000));
await Promise.race([Promise.all(imagePromises), maxWait]);

// Show the first poster image
movieImageContainer.querySelector('.poster-img').style.opacity = '1';

rotateImages(Array.from(movieImageContainer.children));
Expand All @@ -441,6 +441,7 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
movieEl.dataset.posterPath = poster_path;
movieEl.dataset.title = title;

// Limit the title to 8 words, adding "..." if necessary
const words = title.split(' ');
if (words.length >= 8) {
words[7] = '...';
Expand All @@ -454,6 +455,7 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
overview = 'No overview available.';
}

// Define HTML structure for the movie card
movieEl.innerHTML = `
<div class="movie-image-container">
<div class="movie-images" style="position: relative; width: 100%; height: 435px; overflow: hidden;">
Expand All @@ -478,15 +480,51 @@ function showMovies(movies, mainElement, startYear, endYear, append) {
});

mainElement.appendChild(movieEl);
observer.observe(movieEl);
imageObserver.observe(movieEl);

// Observer for the slide-up animation
const slideObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
slideObserver.unobserve(entry.target);
}
});
},
{
rootMargin: '50px 0px',
threshold: 0.1,
}
);
slideObserver.observe(movieEl);
});

const centerContainer1 = document.getElementById('center-container1');
centerContainer1.appendChild(mainElement);

createLoadMoreButton(startYear, endYear, mainElement);
hideSpinner();
}

// Inject CSS for sliding-up animation if it doesn't already exist
if (!document.getElementById('slide-animation-style')) {
const style = document.createElement('style');
style.id = 'slide-animation-style';
style.innerHTML = `
.movie {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.movie.visible {
opacity: 1;
transform: translateY(0);
}
`;
document.head.appendChild(style);
}

function createLoadMoreButton(startYear, endYear, mainElement) {
const existingButtonDiv = mainElement.querySelector('.load-more-container');
if (existingButtonDiv) {
Expand Down
Loading

0 comments on commit 5355b9c

Please sign in to comment.