ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

caching system + add extension entries to metadata pool

Browse Source
This commit is contained in:
lenafx
2025-12-02 18:21:41 +01:00
parent af1e1d8098
commit 47169a5f66
18 changed files with 924 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/scripts/anime/anime.js
View File

@@ -31,26 +31,44 @@ async function loadAnime() {
const res = await fetch(fetchUrl);
const data = await res.json();
if(data.error) {
if (data.error) {
document.getElementById('title').innerText = "Anime Not Found";
return;
}
const title = data.title?.english || data.title?.romaji || "Unknown Title";
const title = data.title?.english || data.title?.romaji || data.title || "Unknown Title";
document.title = `${title} | WaifuBoard`;
document.getElementById('title').innerText = title;
if (data.coverImage?.extraLarge) {
document.getElementById('poster').src = data.coverImage.extraLarge;
let posterUrl = '';
if (extensionName) {
posterUrl = data.image || '';
} else {
posterUrl = data.coverImage?.extraLarge || '';
}
const rawDesc = data.description || "No description available.";
if (posterUrl) {
document.getElementById('poster').src = posterUrl;
}
const rawDesc = data.description || data.summary || "No description available.";
handleDescription(rawDesc);
document.getElementById('score').innerText = (data.averageScore || '?') + '% Score';
document.getElementById('year').innerText = data.seasonYear || data.startDate?.year || '????';
document.getElementById('genres').innerText = data.genres?.length > 0 ? data.genres.slice(0, 3).join(' • ') : '';
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()}`;
@@ -60,45 +78,53 @@ async function loadAnime() {
}
let seasonText = '';
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();
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';
let studioName = 'Unknown Studio';
if (data.studios?.nodes?.length > 0) {
studioName = data.studios.nodes[0].name;
} else if (data.studios?.edges?.length > 0) {
studioName = data.studios.edges[0]?.node?.name || 'Unknown Studio';
}
document.getElementById('studio').innerText = studioName;
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 (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);
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);
}
}
if (characters.length > 0) {
characters.forEach(char => {
if (char?.name?.full) {
characters.slice(0, 5).forEach(char => {
const name = char?.name?.full || char?.name;
if (name) {
charContainer.innerHTML += `
<div class="character-item">
<div class="char-dot"></div> ${char.name.full}
<div class="char-dot"></div> ${name}
</div>`;
}
});
@@ -120,32 +146,27 @@ async function loadAnime() {
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
autoplay: 1, controls: 0, mute: 1,
loop: 1, playlist: data.trailer.id,
showinfo: 0, modestbranding: 1, disablekb: 1
},
events: { 'onReady': (e) => e.target.playVideo() }
events: { onReady: (e) => e.target.playVideo() }
});
};
} else {
const banner = data.bannerImage || data.coverImage?.extraLarge || '';
const banner = extensionName
? (data.image || '')
: (data.bannerImage || data.coverImage?.extraLarge || '');
if (banner) {
document.querySelector('.video-background').innerHTML = `<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
document.querySelector('.video-background').innerHTML =
`<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
}
}
let extensionEpisodes = [];
if (extensionName) {
extensionEpisodes = await loadExtensionEpisodes(animeId, extensionName);
if (extensionEpisodes.length > 0) {
totalEpisodes = extensionEpisodes.length;
} else {
totalEpisodes = 1;
}
totalEpisodes = data.episodes || 1;
} else {
// MODO NORMAL (AniList)
if (data.nextAiringEpisode?.episode) {
totalEpisodes = data.nextAiringEpisode.episode - 1;
} else if (data.episodes) {
@@ -166,27 +187,6 @@ async function loadAnime() {
}
}
async function loadExtensionEpisodes(animeId, extName) {
try {
const url = `/api/anime/${animeId}/episodes?ext=${extName}`;
const res = await fetch(url);
const data = await res.json();
if (!Array.isArray(data)) return [];
return data.map(ep => ({
id: ep.id,
number: ep.number,
title: ep.title || `Episode ${ep.number}`,
url: ep.url
}));
} catch (err) {
console.error("Failed to fetch extension episodes:", err);
return [];
}
}
function handleDescription(text) {
const tmp = document.createElement("DIV");
tmp.innerHTML = text;

76
src/scripts/anime/animes.js
View File

@@ -1,6 +1,7 @@
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;
@@ -12,6 +13,7 @@ searchInput.addEventListener('input', (e) => {
return;
}
searchTimeout = setTimeout(() => {
fetchSearh(query);
}, 300);
});
@@ -25,20 +27,48 @@ document.addEventListener('click', (e) => {
async function fetchSearh(query) {
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(query.slice(0, 30))}`);
const data = await res.json();
renderSearchResults(data.results);
} catch (err) { console.error("Search Error:", err); }
}
let apiUrl = `/api/search?q=${encodeURIComponent(query.slice(0, 30))}`;
let extensionName = null;
let finalQuery = query;
function createSlug(text) {
if (!text) return '';
return text
.toLowerCase()
.trim()
.replace(/-/g, '--')
.replace(/\s+/g, '-')
.replace(/[^a-z0-9\-]/g, '');
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.slice(0, 30))}`;
}
}
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);
}
}
function renderSearchResults(results) {
@@ -54,20 +84,12 @@ function renderSearchResults(results) {
const format = anime.format || 'TV';
let href;
if (anime.isExtensionResult) {
const titleSlug = createSlug(title);
console.log(title);
href = `/anime/${anime.extensionName}/${titleSlug}`;
href = `/anime/${anime.extensionName}/${anime.id}`;
} else {
href = `/anime/${anime.id}`;
}
const extName = anime.extensionName?.charAt(0).toUpperCase() + anime.extensionName?.slice(1);
const extPill = anime.isExtensionResult
? `<span>• ${extName}</span>`
: '';
const item = document.createElement('a');
item.className = 'search-item';
item.href = href;
@@ -79,7 +101,6 @@ function renderSearchResults(results) {
<span class="rating-pill">${rating}</span>
<span>• ${year}</span>
<span>• ${format}</span>
${extPill}
</div>
</div>
`;
@@ -118,6 +139,14 @@ function onYouTubeIframeAPIReady() {
async function fetchContent(isUpdate = false) {
try {
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);
}
const trendingRes = await fetch('/api/trending');
const trendingData = await trendingRes.json();
@@ -220,6 +249,7 @@ function renderList(id, list) {
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>

343
src/scripts/anime/player.js
View File

@@ -23,138 +23,179 @@ document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`
async function loadMetadata() {
try {
const extQuery = extName ? `?ext=${extName}` : "";
const res = await fetch(`/api/anime/${animeId}${extQuery}`);
const data = await res.json();
if (!data.error) {
const romajiTitle = data.title.romaji || data.title.english || 'Anime Title';
document.getElementById('anime-title-details').innerText = romajiTitle;
document.getElementById('anime-title-details2').innerText = romajiTitle;
document.title = `Watching ${romajiTitle} - Ep ${currentEpisode}`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = data.description || 'No description available.';
document.getElementById('detail-description').innerText =
tempDiv.textContent || tempDiv.innerText;
document.getElementById('detail-format').innerText = data.format || '--';
document.getElementById('detail-score').innerText =
data.averageScore ? `${data.averageScore}%` : '--';
const season = data.season
? data.season.charAt(0) + data.season.slice(1).toLowerCase()
: '';
document.getElementById('detail-season').innerText =
data.seasonYear ? `${season} ${data.seasonYear}` : '--';
document.getElementById('detail-cover-image').src =
data.coverImage.large || data.coverImage.medium || '';
if (data.characters && data.characters.edges && data.characters.edges.length > 0) {
populateCharacters(data.characters.edges);
}
if (!extName) {
totalEpisodes = data.episodes || 0;
if (totalEpisodes > 0) {
const simpleEpisodes = [];
for (let i = 1; i <= totalEpisodes; i++) {
simpleEpisodes.push({
number: i,
title: null,
thumbnail: null,
isDub: false
});
}
populateEpisodeCarousel(simpleEpisodes);
}
} else {
try {
const res2 = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
const data2 = await res2.json();
totalEpisodes = Array.isArray(data2) ? data2.length : 0;
if (Array.isArray(data2) && data2.length > 0) {
populateEpisodeCarousel(data2);
}
} catch (e) {
console.error("Error cargando episodios por extensión:", e);
totalEpisodes = 0;
}
}
if (currentEpisode >= totalEpisodes && totalEpisodes > 0) {
document.getElementById('next-btn').disabled = true;
}
if (data.error) {
console.error("Error from API:", data.error);
return;
}
const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
let title = '';
let description = '';
let coverImage = '';
let averageScore = '';
let format = '';
let seasonYear = '';
let season = '';
let episodesCount = 0;
let characters = [];
if (isAnilistFormat) {
title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
description = data.description || 'No description available.';
coverImage = data.coverImage?.large || data.coverImage?.medium || '';
averageScore = data.averageScore ? `${data.averageScore}%` : '--';
format = data.format || '--';
season = data.season ? data.season.charAt(0) + data.season.slice(1).toLowerCase() : '';
seasonYear = data.seasonYear || '';
episodesCount = data.episodes || 0;
characters = data.characters?.edges || [];
} else {
title = data.title || 'Anime Title';
description = data.summary || 'No description available.';
coverImage = data.image || '';
averageScore = data.score ? `${Math.round(data.score * 10)}%` : '--';
format = '--';
season = data.season || '';
seasonYear = data.year || '';
episodesCount = data.episodes || 0;
characters = data.characters || [];
}
document.getElementById('anime-title-details').innerText = title;
document.getElementById('anime-title-details2').innerText = title;
document.title = `Watching ${title} - Ep ${currentEpisode}`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = description;
document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
document.getElementById('detail-format').innerText = format;
document.getElementById('detail-score').innerText = averageScore;
document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
if (Array.isArray(characters) && characters.length > 0) {
populateCharacters(characters, isAnilistFormat);
}
if (!extName) {
totalEpisodes = episodesCount;
if (totalEpisodes > 0) {
const simpleEpisodes = [];
for (let i = 1; i <= totalEpisodes; i++) {
simpleEpisodes.push({
number: i,
title: null,
thumbnail: null,
isDub: false
});
}
populateEpisodeCarousel(simpleEpisodes);
}
} else {
await loadExtensionEpisodes();
}
if (currentEpisode >= totalEpisodes && totalEpisodes > 0) {
document.getElementById('next-btn').disabled = true;
}
} catch (error) {
console.error('Error loading metadata:', error);
}
}
function populateCharacters(characterEdges) {
async function loadExtensionEpisodes() {
try {
const extQuery = extName ? `?ext=${extName}` : "";
const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
const data = await res.json();
totalEpisodes = Array.isArray(data) ? data.length : 0;
if (Array.isArray(data) && data.length > 0) {
populateEpisodeCarousel(data);
} else {
const fallback = [];
for (let i = 1; i <= totalEpisodes; i++) {
fallback.push({ number: i, title: null, thumbnail: null });
}
populateEpisodeCarousel(fallback);
}
} catch (e) {
console.error("Error cargando episodios por extensión:", e);
totalEpisodes = 0;
}
}
function populateCharacters(characters, isAnilistFormat) {
const list = document.getElementById('characters-list');
list.classList.remove('characters-list');
list.classList.add('characters-carousel');
list.innerHTML = '';
characterEdges.forEach(edge => {
const character = edge.node;
const voiceActor = edge.voiceActors ? edge.voiceActors.find(va => va.language === 'Japanese' || va.language === 'English') : null;
characters.forEach(item => {
let character, voiceActor;
if (character) {
const card = document.createElement('div');
card.classList.add('character-card');
if (isAnilistFormat) {
character = item.node;
voiceActor = item.voiceActors?.find(va => va.language === 'Japanese' || va.language === 'English');
} else {
character = item;
voiceActor = null;
const img = document.createElement('img');
img.classList.add('character-card-img');
img.src = character.image.large || character.image.medium || '';
img.alt = character.name.full || 'Character';
const vaName = voiceActor ? (voiceActor.name.full || voiceActor.name.userPreferred) : null;
const characterName = character.name.full || character.name.userPreferred || '--';
const details = document.createElement('div');
details.classList.add('character-details');
const name = document.createElement('p');
name.classList.add('character-name');
name.innerText = characterName;
const actor = document.createElement('p');
actor.classList.add('actor-name');
if (vaName) {
actor.innerText = `${vaName} (${voiceActor.language})`;
} else {
actor.innerText = 'Voice Actor: N/A';
}
details.appendChild(name);
details.appendChild(actor);
card.appendChild(img);
card.appendChild(details);
list.appendChild(card);
}
if (!character) return;
const card = document.createElement('div');
card.classList.add('character-card');
const img = document.createElement('img');
img.classList.add('character-card-img');
img.src = character.image?.large || character.image?.medium || character.image || '';
img.alt = character.name?.full || 'Character';
const details = document.createElement('div');
details.classList.add('character-details');
const name = document.createElement('p');
name.classList.add('character-name');
name.innerText = character.name?.full || character.name || '--';
const actor = document.createElement('p');
actor.classList.add('actor-name');
if (voiceActor?.name?.full) {
actor.innerText = `${voiceActor.name.full} (${voiceActor.language})`;
} else {
actor.innerText = 'Voice Actor: N/A';
}
details.appendChild(name);
details.appendChild(actor);
card.appendChild(img);
card.appendChild(details);
list.appendChild(card);
});
}
function populateEpisodeCarousel(episodesData) {
const carousel = document.getElementById('episode-carousel');
carousel.innerHTML = '';
episodesData.forEach((ep, index) => {
const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
if (!epNumber) return;
const extParam = extName ? `?${extName}` : "";
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
const link = document.createElement('a');
@@ -162,19 +203,13 @@ function populateEpisodeCarousel(episodesData) {
link.classList.add('carousel-item');
link.dataset.episode = epNumber;
if (!hasThumbnail) {
link.classList.add('no-thumbnail');
}
if (parseInt(epNumber) === currentEpisode) {
link.classList.add('active-ep-carousel');
}
if (!hasThumbnail) link.classList.add('no-thumbnail');
if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
const imgContainer = document.createElement('div');
imgContainer.classList.add('carousel-item-img-container');
if (hasThumbnail) {
const img = document.createElement('img');
img.classList.add('carousel-item-img');
img.src = ep.thumbnail;
@@ -188,11 +223,9 @@ function populateEpisodeCarousel(episodesData) {
info.classList.add('carousel-item-info');
const title = document.createElement('p');
title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
info.appendChild(title);
link.appendChild(info);
carousel.appendChild(link);
});
@@ -282,14 +315,8 @@ function setAudioMode(mode) {
const dubOpt = document.getElementById('opt-dub');
toggle.setAttribute('data-state', mode);
if (mode === 'sub') {
subOpt.classList.add('active');
dubOpt.classList.remove('active');
} else {
subOpt.classList.remove('active');
dubOpt.classList.add('active');
}
subOpt.classList.toggle('active', mode === 'sub');
dubOpt.classList.toggle('active', mode === 'dub');
}
async function loadStream() {
@@ -323,7 +350,7 @@ async function loadStream() {
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
playVideo(proxyUrl, data.videoSources[0].subtitles);
playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles);
document.getElementById('loading-overlay').style.display = 'none';
} catch (error) {
setLoading("Stream error. Check console.");
@@ -331,17 +358,12 @@ async function loadStream() {
}
}
function playVideo(url, subtitles) {
function playVideo(url, subtitles = []) {
const video = document.getElementById('player');
if (Hls.isSupported()) {
if (hlsInstance) hlsInstance.destroy();
hlsInstance = new Hls({
xhrSetup: (xhr, url) => {
xhr.withCredentials = false;
}
});
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
hlsInstance.loadSource(url);
hlsInstance.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
@@ -350,52 +372,28 @@ function playVideo(url, subtitles) {
if (plyrInstance) plyrInstance.destroy();
while (video.firstChild) {
video.removeChild(video.firstChild);
while (video.textTracks.length > 0) {
video.removeChild(video.textTracks[0]);
}
if (subtitles && subtitles.length > 0) {
subtitles.forEach(sub => {
const track = document.createElement('track');
track.kind = 'captions';
track.label = sub.language;
track.srclang = sub.language.slice(0, 2).toLowerCase();
track.src = sub.url;
if (sub.default || sub.language.toLowerCase().includes('english')) {
track.default = true;
}
video.appendChild(track);
});
}
subtitles.forEach(sub => {
if (!sub.url) return;
const track = document.createElement('track');
track.kind = 'captions';
track.label = sub.language || 'Unknown';
track.srclang = (sub.language || '').slice(0, 2).toLowerCase();
track.src = sub.url;
if (sub.default || sub.language?.toLowerCase().includes('english')) track.default = true;
video.appendChild(track);
});
plyrInstance = new Plyr(video, {
captions: {
active: true,
update: true,
language: 'en'
},
controls: [
'play-large',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'captions',
'settings',
'pip',
'airplay',
'fullscreen'
],
captions: { active: true, update: true, language: 'en' },
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
settings: ['captions', 'quality', 'speed']
});
video.play().catch(error => {
console.log("Autoplay blocked:", error);
});
video.play().catch(() => console.log("Autoplay blocked"));
}
function setLoading(message) {
@@ -414,7 +412,9 @@ document.getElementById('prev-btn').onclick = () => {
};
document.getElementById('next-btn').onclick = () => {
window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
}
};
if (currentEpisode <= 1) {
@@ -422,4 +422,5 @@ if (currentEpisode <= 1) {
}
loadMetadata();
loadExtensions();
loadExtensions();