diff --git a/src/scripts/anime/anime.js b/src/scripts/anime/anime.js index 0bb111f..9536c5c 100644 --- a/src/scripts/anime/anime.js +++ b/src/scripts/anime/anime.js @@ -1,335 +1,277 @@ -const searchInput = document.getElementById('search-input'); -const searchResults = document.getElementById('search-results'); -let searchTimeout; -let availableExtensions = []; - -searchInput.addEventListener('input', (e) => { - const query = e.target.value; - clearTimeout(searchTimeout); - if (query.length < 2) { - searchResults.classList.remove('active'); - searchResults.innerHTML = ''; - searchInput.style.borderRadius = '99px'; - return; - } - searchTimeout = setTimeout(() => { - - fetchSearh(query); - }, 300); -}); - -document.addEventListener('click', (e) => { - if (!e.target.closest('.search-wrapper')) { - searchResults.classList.remove('active'); - searchInput.style.borderRadius = '99px'; - } -}); - -async function fetchSearh(query) { - try { - let apiUrl = `/api/search?q=${encodeURIComponent(query)}`; - let extensionName = null; - let finalQuery = query; - - const parts = query.split(':'); - if (parts.length >= 2) { - const potentialExtension = parts[0].trim().toLowerCase(); - - const foundExtension = availableExtensions.find(ext => ext.toLowerCase() === potentialExtension); - - if (foundExtension) { - extensionName = foundExtension; - - finalQuery = parts.slice(1).join(':').trim(); - - if (finalQuery.length === 0) { - renderSearchResults([]); - return; - } - - apiUrl = `/api/search/${extensionName}?q=${encodeURIComponent(finalQuery)}`; - } - } - - const res = await fetch(apiUrl); - const data = await res.json(); - - const resultsWithExtension = (data.results || []).map(anime => { - if (extensionName) { - return { - ...anime, - isExtensionResult: true, - extensionName: extensionName - }; - } - return anime; - }); - - renderSearchResults(resultsWithExtension); - } catch (err) { - console.error("Search Error:", err); - } -} - -async function loadContinueWatching() { - const token = localStorage.getItem('token'); - if (!token) return; - - try { - const res = await fetch('/api/list/filter?status=watching&entry_type=ANIME', { - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}` - } - }); - - if (!res.ok) return; - - const data = await res.json(); - const list = data.results || []; - - renderContinueWatching('my-status', list); - - } catch (err) { - console.error('Continue Watching Error:', err); - } -} - -function renderContinueWatching(id, list) { - const container = document.getElementById(id); - if (!container) return; - - container.innerHTML = ''; - - if (list.length === 0) { - container.innerHTML = `
No watching anime
`; - return; - } - - list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)); - - list.forEach(item => { - const el = document.createElement('div'); - el.className = 'card'; - - el.onclick = () => { - const ep = item.progress || 1; - - if (item.source === 'anilist') { - window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}`; - } else { - window.location.href = `http://localhost:54322/watch/${item.entry_id}/${ep + 1}?${item.source}`; - } - }; - - const progressText = item.total_episodes - ? `${item.progress || 0}/${item.total_episodes}` - : `${item.progress || 0}`; - - el.innerHTML = ` -
- -
-
-

${item.title}

-

Ep ${progressText} - ${item.source}

- `; - - container.appendChild(el); - }); -} - -function renderSearchResults(results) { - searchResults.innerHTML = ''; - if (results.length === 0) { - searchResults.innerHTML = '
No results found
'; - } else { - results.forEach(anime => { - const title = getTitle(anime); - const img = anime.coverImage.medium || anime.coverImage.large; - const rating = anime.averageScore ? `${anime.averageScore}%` : 'N/A'; - const year = anime.seasonYear || ''; - const format = anime.format || 'TV'; - - let href; - if (anime.isExtensionResult) { - href = `/anime/${anime.extensionName}/${anime.id}`; - } else { - href = `/anime/${anime.id}`; - } - - const item = document.createElement('a'); - item.className = 'search-item'; - item.href = href; - item.innerHTML = ` - ${title} -
-
${title}
-
- ${rating} - • ${year} - • ${format} -
-
- `; - searchResults.appendChild(item); - }); - } - searchResults.classList.add('active'); - searchInput.style.borderRadius = '12px 12px 0 0'; -} - -function scrollCarousel(id, direction) { - const container = document.getElementById(id); - if(container) { - const scrollAmount = container.clientWidth * 0.75; - container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' }); - } -} - -let trendingAnimes = []; -let currentHeroIndex = 0; +const animeId = window.location.pathname.split('/').pop(); let player; -let heroInterval; + +let totalEpisodes = 0; +let currentPage = 1; +const itemsPerPage = 12; 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]); } } - }); -} +let extensionName; -async function fetchContent(isUpdate = false) { +async function loadAnime() { try { + const path = window.location.pathname; + const parts = path.split("/").filter(Boolean); + let animeId; - const resExt = await fetch('/api/extensions/anime'); - const dataExt = await resExt.json(); - if (dataExt.extensions) { - availableExtensions = dataExt.extensions; - console.log("Extensiones de anime disponibles cargadas:", availableExtensions); + if (parts.length === 3) { + extensionName = parts[1]; + animeId = parts[2]; + } else { + animeId = parts[1]; } - const trendingRes = await fetch('/api/trending'); - const trendingData = await trendingRes.json(); + const fetchUrl = extensionName + ? `/api/anime/${animeId}?source=${extensionName}` + : `/api/anime/${animeId}?source=anilist`; + const res = await fetch(fetchUrl); + const data = await res.json(); - if (trendingData.results && trendingData.results.length > 0) { - trendingAnimes = trendingData.results; - if (!isUpdate) { - updateHeroUI(trendingAnimes[0]); - startHeroCycle(); + if (data.error) { + document.getElementById('title').innerText = "Anime Not Found"; + return; + } + + const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title"; + document.title = `${title} | WaifuBoard`; + document.getElementById('title').innerText = title; + + let posterUrl = ''; + + if (extensionName) { + posterUrl = data.image || ''; + + } else { + posterUrl = data.coverImage?.extraLarge || ''; + } + + if (posterUrl) { + document.getElementById('poster').src = posterUrl; + } + + const rawDesc = data.description || data.summary || "No description available."; + handleDescription(rawDesc); + + const score = extensionName ? (data.score ? data.score * 10 : '?') : data.averageScore; + document.getElementById('score').innerText = (score || '?') + '% Score'; + + document.getElementById('year').innerText = + extensionName ? (data.year || '????') : (data.seasonYear || data.startDate?.year || '????'); + + document.getElementById('genres').innerText = + data.genres?.length > 0 ? data.genres.slice(0, 3).join(' • ') : ''; + + document.getElementById('format').innerText = data.format || 'TV'; + + document.getElementById('status').innerText = data.status || 'Unknown'; + + const extensionPill = document.getElementById('extension-pill'); + if (extensionName && extensionPill) { + extensionPill.textContent = `${extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase()}`; + extensionPill.style.display = 'inline-flex'; + } else if (extensionPill) { + extensionPill.style.display = 'none'; + } + + let seasonText = ''; + if (extensionName) { + seasonText = data.season || 'Unknown'; + } else { + if (data.season && data.seasonYear) { + seasonText = `${data.season} ${data.seasonYear}`; + } else if (data.startDate?.year) { + const months = ['', 'Winter', 'Winter', 'Spring', 'Spring', 'Spring', 'Summer', 'Summer', 'Summer', 'Fall', 'Fall', 'Fall', 'Winter']; + const month = data.startDate.month || 1; + const estimatedSeason = months[month] || ''; + seasonText = `${estimatedSeason} ${data.startDate.year}`.trim(); + } + } + document.getElementById('season').innerText = seasonText || 'Unknown'; + + const studio = extensionName + ? data.studio || "Unknown" + : (data.studios?.nodes?.[0]?.name || + data.studios?.edges?.[0]?.node?.name || + 'Unknown Studio'); + + document.getElementById('studio').innerText = studio; + + const charContainer = document.getElementById('char-list'); + charContainer.innerHTML = ''; + + let characters = []; + + if (extensionName) { + characters = data.characters || []; + } else { + if (data.characters?.nodes?.length > 0) { + characters = data.characters.nodes.slice(0, 5); + } else if (data.characters?.edges?.length > 0) { + characters = data.characters.edges + .filter(edge => edge?.node?.name?.full) + .slice(0, 5) + .map(edge => edge.node); } - 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); + if (characters.length > 0) { + characters.slice(0, 5).forEach(char => { + const name = char?.name?.full || char?.name; + if (name) { + charContainer.innerHTML += ` +
+
${name} +
`; + } + }); + } else { + charContainer.innerHTML = ` +
+ No character data available +
`; } - } catch (e) { - console.error("Fetch Error:", e); - if(!isUpdate) setTimeout(() => fetchContent(false), 5000); + document.getElementById('watch-btn').onclick = () => { + window.location.href = `/watch/${animeId}/1`; + }; + + if (data.trailer && data.trailer.site === 'youtube') { + window.onYouTubeIframeAPIReady = function() { + player = new YT.Player('player', { + height: '100%', + width: '100%', + videoId: data.trailer.id, + playerVars: { + autoplay: 1, controls: 0, mute: 1, + loop: 1, playlist: data.trailer.id, + showinfo: 0, modestbranding: 1, disablekb: 1 + }, + events: { onReady: (e) => e.target.playVideo() } + }); + }; + } else { + const banner = extensionName + ? (data.image || '') + : (data.bannerImage || data.coverImage?.extraLarge || ''); + + if (banner) { + document.querySelector('.video-background').innerHTML = + ``; + } + } + + if (extensionName) { + totalEpisodes = data.episodes || 1; + } else { + if (data.nextAiringEpisode?.episode) { + totalEpisodes = data.nextAiringEpisode.episode - 1; + } else if (data.episodes) { + totalEpisodes = data.episodes; + } else { + totalEpisodes = 12; + } + } + + totalEpisodes = Math.min(Math.max(totalEpisodes, 1), 5000); + document.getElementById('episodes').innerText = totalEpisodes; + + renderEpisodes(); + + } catch (err) { + console.error('Error loading anime:', err); + document.getElementById('title').innerText = "Error loading anime"; } } -function startHeroCycle() { - if(heroInterval) clearInterval(heroInterval); - heroInterval = setInterval(() => { - if(trendingAnimes.length > 0) { - currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length; - updateHeroUI(trendingAnimes[currentHeroIndex]); - } - }, 10000); -} +function handleDescription(text) { + const tmp = document.createElement("DIV"); + tmp.innerHTML = text; + const cleanText = tmp.textContent || tmp.innerText || ""; -function getTitle(anime) { - return anime.title.english || anime.title.romaji || "Unknown Title"; -} + const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText]; -function updateHeroUI(anime) { - if(!anime) return; - const title = getTitle(anime); - 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('full-description').innerHTML = text; - 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 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"; + if (sentences.length > 4) { + const shortText = sentences.slice(0, 4).join(' '); + document.getElementById('description-preview').innerText = shortText + '...'; + document.getElementById('read-more-btn').style.display = 'inline-flex'; } else { - videoContainer.style.opacity = "0"; - player.stopVideo(); + document.getElementById('description-preview').innerHTML = text; + document.getElementById('read-more-btn').style.display = 'none'; } } -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 = getTitle(anime); - 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 = ` -
-
-

${title}

-

${score}% • ${ep}

-
- `; - container.appendChild(el); - }); +function openModal() { + document.getElementById('desc-modal').classList.add('active'); + document.body.style.overflow = 'hidden'; } -fetchContent(); -loadContinueWatching(); -setInterval(() => fetchContent(true), 60000); \ No newline at end of file +function closeModal() { + document.getElementById('desc-modal').classList.remove('active'); + document.body.style.overflow = ''; +} + +document.getElementById('desc-modal').addEventListener('click', (e) => { + if (e.target.id === 'desc-modal') closeModal(); +}); + +function renderEpisodes() { + const grid = document.getElementById('episodes-grid'); + grid.innerHTML = ''; + + const start = (currentPage - 1) * itemsPerPage + 1; + const end = Math.min(start + itemsPerPage - 1, totalEpisodes); + + for(let i = start; i <= end; i++) { + createEpisodeButton(i, grid); + } + updatePaginationControls(); +} + +function createEpisodeButton(num, container) { + const btn = document.createElement('div'); + btn.className = 'episode-btn'; + btn.innerText = `Ep ${num}`; + btn.onclick = () => + window.location.href = `/watch/${animeId}/${num}` + (extensionName ? `?${extensionName}` : ""); + + container.appendChild(btn); +} + +function updatePaginationControls() { + const totalPages = Math.ceil(totalEpisodes / itemsPerPage); + document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`; + document.getElementById('prev-page').disabled = currentPage === 1; + document.getElementById('next-page').disabled = currentPage === totalPages; + + document.getElementById('pagination-controls').style.display = 'flex'; +} + +function changePage(delta) { + currentPage += delta; + renderEpisodes(); +} + +const searchInput = document.getElementById('ep-search'); +searchInput.addEventListener('input', (e) => { + const val = parseInt(e.target.value); + const grid = document.getElementById('episodes-grid'); + + if (val > 0 && val <= totalEpisodes) { + grid.innerHTML = ''; + createEpisodeButton(val, grid); + document.getElementById('pagination-controls').style.display = 'none'; + } else if (!e.target.value) { + renderEpisodes(); + } else { + grid.innerHTML = '
Episode not found
'; + document.getElementById('pagination-controls').style.display = 'none'; + } +}); + +loadAnime(); \ No newline at end of file