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

enhanced watch page

Browse Source
This commit is contained in:
lenafx
2025-11-30 19:17:27 +01:00
parent 290f0b005a
commit 658e4e09c4
3 changed files with 626 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,10 +30,10 @@ async function loadMetadata() {
if (!data.error) {
const romajiTitle = data.title.romaji || data.title.english || 'Anime Title';
document.getElementById('anime-title').innerText = romajiTitle;
document.title = `Watching ${romajiTitle} - Ep ${currentEpisode}`;
document.getElementById('anime-title-details').innerText = romajiTitle;
document.getElementById('anime-title-details2').innerText = romajiTitle;
document.getElementById('detail-anime-title').innerText = romajiTitle;
document.title = `Watching ${romajiTitle} - Ep ${currentEpisode}`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = data.description || 'No description available.';
@@ -53,23 +53,43 @@ async function loadMetadata() {
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;
} else {
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;
}
}
populateEpisodeSelectors(totalEpisodes);
if (currentEpisode >= totalEpisodes && totalEpisodes > 0) {
document.getElementById('next-btn').disabled = true;
}
@@ -79,42 +99,103 @@ async function loadMetadata() {
}
}
function populateEpisodeSelectors(count) {
const list = document.getElementById('episode-list');
function populateCharacters(characterEdges) {
const list = document.getElementById('characters-list');
list.classList.remove('characters-list');
list.classList.add('characters-carousel');
list.innerHTML = '';
for (let i = 1; i <= count; i++) {
characterEdges.forEach(edge => {
const character = edge.node;
const voiceActor = edge.voiceActors ? edge.voiceActors.find(va => va.language === 'Japanese' || va.language === 'English') : null;
if (character) {
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 || '';
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);
}
});
}
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 btn = document.createElement('a');
btn.href = `/watch/${animeId}/${i}${extParam}`;
btn.classList.add('episode-btn');
btn.dataset.episode = i;
btn.innerText = i;
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
if (i === currentEpisode) {
btn.classList.add('active-ep');
const link = document.createElement('a');
link.href = `/watch/${animeId}/${epNumber}${extParam}`;
link.classList.add('carousel-item');
link.dataset.episode = epNumber;
if (!hasThumbnail) {
link.classList.add('no-thumbnail');
}
list.appendChild(btn);
}
}
function filterEpisodes() {
const searchInput = document.getElementById('episode-search');
const filter = searchInput.value.toUpperCase().trim();
const episodeList = document.getElementById('episode-list');
const buttons = episodeList.getElementsByClassName('episode-btn');
for (let i = 0; i < buttons.length; i++) {
const episodeNumber = buttons[i].dataset.episode;
if (episodeNumber.startsWith(filter) || filter === "") {
buttons[i].style.display = "";
} else {
buttons[i].style.display = "none";
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;
img.alt = `Episode ${epNumber} Thumbnail`;
imgContainer.appendChild(img);
}
link.appendChild(imgContainer);
const info = document.createElement('div');
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);
});
}
async function loadExtensions() {