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

frontend js refactor

Browse Source
This commit is contained in:
lenafx
2025-12-10 18:08:19 +01:00
parent 313ead0652
commit c54f034c61
20 changed files with 1936 additions and 2096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,277 +1,301 @@
const animeId = window.location.pathname.split('/').pop();
let player;
let animeData = null;
let extensionName = null;
let animeId = null;
let totalEpisodes = 0;
let currentPage = 1;
const itemsPerPage = 12;
const episodePagination = Object.create(PaginationManager);
episodePagination.init(12, renderEpisodes);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
YouTubePlayerUtils.init('player');
let extensionName;
document.addEventListener('DOMContentLoaded', () => {
loadAnime();
setupDescriptionModal();
setupEpisodeSearch();
});
async function loadAnime() {
try {
const path = window.location.pathname;
const parts = path.split("/").filter(Boolean);
let animeId;
if (parts.length === 3) {
extensionName = parts[1];
animeId = parts[2];
} else {
animeId = parts[1];
const urlData = URLUtils.parseEntityPath('anime');
if (!urlData) {
showError("Invalid URL");
return;
}
extensionName = urlData.extensionName;
animeId = urlData.entityId;
const fetchUrl = extensionName
? `/api/anime/${animeId}?source=${extensionName}`
: `/api/anime/${animeId}?source=anilist`;
const res = await fetch(fetchUrl);
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
const data = await res.json();
if (data.error) {
document.getElementById('title').innerText = "Anime Not Found";
showError("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;
animeData = data;
let posterUrl = '';
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
if (extensionName) {
posterUrl = data.image || '';
updatePageTitle(metadata.title);
updateMetadata(metadata);
updateDescription(data.description || data.summary);
updateCharacters(metadata.characters);
updateExtensionPill();
} else {
posterUrl = data.coverImage?.extraLarge || '';
}
setupWatchButton();
if (posterUrl) {
document.getElementById('poster').src = posterUrl;
}
const hasTrailer = YouTubePlayerUtils.playTrailer(
metadata.trailer,
'player',
metadata.banner
);
const rawDesc = data.description || data.summary || "No description available.";
handleDescription(rawDesc);
setupEpisodes(metadata.episodes);
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);
}
}
if (characters.length > 0) {
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> ${name}
</div>`;
}
});
} else {
charContainer.innerHTML = `
<div class="character-item" style="color: #666;">
No character data available
</div>`;
}
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 =
`<img src="${banner}" style="width:100%; height:100%; object-fit:cover;">`;
}
}
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();
await setupAddToListButton();
} catch (err) {
console.error('Error loading anime:', err);
document.getElementById('title').innerText = "Error loading anime";
showError("Error loading anime");
}
}
function handleDescription(text) {
const tmp = document.createElement("DIV");
tmp.innerHTML = text;
const cleanText = tmp.textContent || tmp.innerText || "";
function updatePageTitle(title) {
document.title = `${title} | WaifuBoard`;
document.getElementById('title').innerText = title;
}
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
function updateMetadata(metadata) {
document.getElementById('full-description').innerHTML = text;
if (metadata.poster) {
document.getElementById('poster').src = metadata.poster;
}
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';
document.getElementById('score').innerText = `${metadata.score}% Score`;
document.getElementById('year').innerText = metadata.year;
document.getElementById('genres').innerText = metadata.genres;
document.getElementById('format').innerText = metadata.format;
document.getElementById('status').innerText = metadata.status;
document.getElementById('season').innerText = metadata.season;
document.getElementById('studio').innerText = metadata.studio;
document.getElementById('episodes').innerText = metadata.episodes;
}
function updateDescription(rawDescription) {
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
document.getElementById('description-preview').innerHTML = desc.short;
document.getElementById('full-description').innerHTML = desc.full;
const readMoreBtn = document.getElementById('read-more-btn');
if (desc.isTruncated) {
readMoreBtn.style.display = 'inline-flex';
} else {
document.getElementById('description-preview').innerHTML = text;
document.getElementById('read-more-btn').style.display = 'none';
readMoreBtn.style.display = 'none';
}
}
function openModal() {
document.getElementById('desc-modal').classList.add('active');
document.body.style.overflow = 'hidden';
function updateCharacters(characters) {
const container = document.getElementById('char-list');
container.innerHTML = '';
if (characters.length > 0) {
characters.forEach(char => {
container.innerHTML += `
<div class="character-item">
<div class="char-dot"></div> ${char.name}
</div>`;
});
} else {
container.innerHTML = `
<div class="character-item" style="color: #666;">
No character data available
</div>`;
}
}
function closeModal() {
document.getElementById('desc-modal').classList.remove('active');
document.body.style.overflow = '';
function updateExtensionPill() {
const pill = document.getElementById('extension-pill');
if (!pill) return;
if (extensionName) {
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
pill.style.display = 'inline-flex';
} else {
pill.style.display = 'none';
}
}
document.getElementById('desc-modal').addEventListener('click', (e) => {
if (e.target.id === 'desc-modal') closeModal();
});
function setupWatchButton() {
const watchBtn = document.getElementById('watch-btn');
if (watchBtn) {
watchBtn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, 1, extensionName);
window.location.href = url;
};
}
}
async function setupAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn || !animeData) return;
ListModalManager.currentData = animeData;
const entryType = ListModalManager.getEntryType(animeData);
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
if (tempBtn) {
ListModalManager.updateButton('.hero-buttons .btn-blur');
} else {
updateCustomAddButton();
}
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
}
function updateCustomAddButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn) return;
if (ListModalManager.isInList) {
btn.innerHTML = `
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
In Your List
`;
btn.style.background = 'rgba(34, 197, 94, 0.2)';
btn.style.color = '#22c55e';
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
} else {
btn.innerHTML = '+ Add to List';
btn.style.background = null;
btn.style.color = null;
btn.style.borderColor = null;
}
}
function setupEpisodes(totalEpisodes) {
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
episodePagination.setTotalItems(limitedTotal);
renderEpisodes();
}
function renderEpisodes() {
const grid = document.getElementById('episodes-grid');
if (!grid) return;
grid.innerHTML = '';
const start = (currentPage - 1) * itemsPerPage + 1;
const end = Math.min(start + itemsPerPage - 1, totalEpisodes);
const range = episodePagination.getPageRange();
const start = range.start + 1;
for(let i = start; i <= end; i++) {
const end = range.end;
for (let i = start; i <= end; i++) {
createEpisodeButton(i, grid);
}
updatePaginationControls();
episodePagination.renderControls(
'pagination-controls',
'page-info',
'prev-page',
'next-page'
);
}
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}` : "");
btn.onclick = () => {
const url = URLUtils.buildWatchUrl(animeId, num, extensionName);
window.location.href = url;
};
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;
function setupDescriptionModal() {
const modal = document.getElementById('desc-modal');
if (!modal) return;
document.getElementById('pagination-controls').style.display = 'flex';
modal.addEventListener('click', (e) => {
if (e.target.id === 'desc-modal') {
closeDescriptionModal();
}
});
}
function changePage(delta) {
currentPage += delta;
renderEpisodes();
function openDescriptionModal() {
document.getElementById('desc-modal').classList.add('active');
document.body.style.overflow = 'hidden';
}
const searchInput = document.getElementById('ep-search');
searchInput.addEventListener('input', (e) => {
const val = parseInt(e.target.value);
const grid = document.getElementById('episodes-grid');
function closeDescriptionModal() {
document.getElementById('desc-modal').classList.remove('active');
document.body.style.overflow = '';
}
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 = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
document.getElementById('pagination-controls').style.display = 'none';
}
});
function setupEpisodeSearch() {
const searchInput = document.getElementById('ep-search');
if (!searchInput) return;
loadAnime();
searchInput.addEventListener('input', (e) => {
const val = parseInt(e.target.value);
const grid = document.getElementById('episodes-grid');
const totalEpisodes = episodePagination.totalItems;
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 = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
document.getElementById('pagination-controls').style.display = 'none';
}
});
}
function showError(message) {
document.getElementById('title').innerText = message;
}
function saveToList() {
if (!animeId) return;
ListModalManager.save(animeId, extensionName || 'anilist');
}
function deleteFromList() {
if (!animeId) return;
ListModalManager.delete(animeId, extensionName || 'anilist');
}
function closeAddToListModal() {
ListModalManager.close();
}
window.openDescriptionModal = openDescriptionModal;
window.closeDescriptionModal = closeDescriptionModal;
window.changePage = (delta) => {
if (delta > 0) episodePagination.nextPage();
else episodePagination.prevPage();
};