Files
WaifuBoard/desktop/src/scripts/anime/animes.js
itsskaiya 28ff6ccc68 Organized the differences between server and docker versions.
We are launching a docker version (server version) today so we want to just organize the repo
so its easier to navigate.
2025-12-16 21:50:22 -05:00

194 lines
6.7 KiB
JavaScript

let trendingAnimes = [];
let currentHeroIndex = 0;
let player;
let heroInterval;
document.addEventListener('DOMContentLoaded', () => {
SearchManager.init('#search-input', '#search-results', 'anime');
ContinueWatchingManager.load('my-status', 'watching', 'ANIME');
fetchContent();
setInterval(() => fetchContent(true), 60000);
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.search-wrapper')) {
const searchResults = document.getElementById('search-results');
const searchInput = document.getElementById('search-input');
searchResults.classList.remove('active');
searchInput.style.borderRadius = '99px';
}
});
function scrollCarousel(id, direction) {
const container = document.getElementById(id);
if(container) {
const scrollAmount = container.clientWidth * 0.75;
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
}
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
playerVars: {
'autoplay': 1,
'controls': 0,
'mute': 1,
'loop': 1,
'showinfo': 0,
'modestbranding': 1
},
events: {
'onReady': (e) => {
e.target.mute();
if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]);
}
}
});
}
async function fetchContent(isUpdate = false) {
try {
const trendingRes = await fetch('/api/trending');
const trendingData = await trendingRes.json();
if (trendingData.results && trendingData.results.length > 0) {
trendingAnimes = trendingData.results;
if (!isUpdate) {
updateHeroUI(trendingAnimes[0]);
startHeroCycle();
}
renderList('trending', trendingAnimes);
} else if (!isUpdate) {
setTimeout(() => fetchContent(false), 2000);
}
const topRes = await fetch('/api/top-airing');
const topData = await topRes.json();
if (topData.results && topData.results.length > 0) {
renderList('top-airing', topData.results);
}
} catch (e) {
console.error("Fetch Error:", e);
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
}
}
function startHeroCycle() {
if(heroInterval) clearInterval(heroInterval);
heroInterval = setInterval(() => {
if(trendingAnimes.length > 0) {
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
updateHeroUI(trendingAnimes[currentHeroIndex]);
}
}, 10000);
}
async function updateHeroUI(anime) {
if(!anime) return;
const title = anime.title.english || anime.title.romaji || "Unknown Title";
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
const year = anime.seasonYear || '';
const type = anime.format || 'TV';
const desc = anime.description || 'No description available.';
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
const banner = anime.bannerImage || poster;
document.getElementById('hero-title').innerText = title;
document.getElementById('hero-desc').innerHTML = desc;
document.getElementById('hero-score').innerText = score;
document.getElementById('hero-year').innerText = year;
document.getElementById('hero-type').innerText = type;
document.getElementById('hero-poster').src = poster;
const watchBtn = document.getElementById('watch-btn');
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
if(addToListBtn) {
ListModalManager.currentData = anime;
const entryType = ListModalManager.getEntryType(anime);
await ListModalManager.checkIfInList(anime.id, 'anilist', entryType);
ListModalManager.updateButton();
addToListBtn.onclick = () => ListModalManager.open(anime, 'anilist');
}
const bgImg = document.getElementById('hero-bg-media');
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
updateHeroVideo(anime);
document.getElementById('hero-loading-ui').style.display = 'none';
document.getElementById('hero-real-ui').style.display = 'block';
}
function updateHeroVideo(anime) {
if (!player || !player.loadVideoById) return;
const videoContainer = document.getElementById('player');
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
player.loadVideoById(anime.trailer.id);
player.mute();
}
videoContainer.style.opacity = "1";
} else {
videoContainer.style.opacity = "0";
player.stopVideo();
}
}
function renderList(id, list) {
const container = document.getElementById(id);
const firstId = list.length > 0 ? list[0].id : null;
const currentFirstId = container.firstElementChild?.dataset?.id;
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
return;
}
container.innerHTML = '';
list.forEach(anime => {
const title = anime.title.english || anime.title.romaji || "Unknown Title";
const cover = anime.coverImage ? anime.coverImage.large : '';
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
const score = anime.averageScore || '--';
const el = document.createElement('div');
el.className = 'card';
el.dataset.id = anime.id;
el.onclick = () => window.location.href = `/anime/${anime.id}`;
el.innerHTML = `
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
<div class="card-content">
<h3>${title}</h3>
<p>${score}% • ${ep}</p>
</div>
`;
container.appendChild(el);
});
}
function saveToList() {
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
if (!animeId) return;
ListModalManager.save(animeId, 'anilist');
}
function deleteFromList() {
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
if (!animeId) return;
ListModalManager.delete(animeId, 'anilist');
}
function closeAddToListModal() {
ListModalManager.close();
}