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

multi language support for books and book page redesigned

Browse Source
This commit is contained in:
lenafx
2025-12-31 17:57:33 +01:00
parent 20261159a4
commit 1e144c4bad
14 changed files with 1687 additions and 1917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
desktop/src/api/books/books.controller.ts
View File

@@ -101,12 +101,14 @@ export async function getChapterContent(req: any, reply: FastifyReply) {
try {
const { bookId, chapter, provider } = req.params;
const source = req.query.source || 'anilist';
const lang = req.query.lang || 'none';
const content = await booksService.getChapterContent(
bookId,
chapter,
provider,
source
source,
lang
);
return reply.send(content);

70
desktop/src/api/books/books.service.ts
View File

@@ -67,7 +67,19 @@ export async function getBookById(id: string | number): Promise<Book | { error:
);
if (row) {
return JSON.parse(row.full_data);
const parsed = JSON.parse(row.full_data);
const hasRelationImages =
parsed?.relations?.edges?.[0]?.node?.coverImage?.large;
const hasCharacterImages =
parsed?.characters?.nodes?.[0]?.image?.large;
if (hasRelationImages && hasCharacterImages) {
return parsed;
}
console.log(`[Book] Cache outdated for ID ${id}, refetching...`);
}
try {
@@ -82,8 +94,8 @@ export async function getBookById(id: string | number): Promise<Book | { error:
trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
relations { edges { relationType node { id title { romaji } } } }
characters(page: 1, perPage: 10) { nodes { id name { full } } }
relations { edges { relationType node { id title { romaji } coverImage { large medium } } } }
characters(page: 1, perPage: 10) { nodes { id name { full } image { large medium } } }
studios { nodes { id name isAnimationStudio } }
isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
externalLinks { url site }
@@ -406,7 +418,8 @@ async function searchChaptersInExtension(ext: Extension, name: string, searchTit
title: ch.title,
date: ch.releaseDate,
provider: name,
index: ch.index
index: ch.index,
language: ch.language ?? null,
}));
await setCache(cacheKey, result, CACHE_TTL_MS);
@@ -463,7 +476,7 @@ export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?
};
}
export async function getChapterContent(bookId: string, chapterIndex: string, providerName: string, source: string): Promise<ChapterContent> {
export async function getChapterContent(bookId: string, chapterId: string, providerName: string, source: string, lang: string): Promise<ChapterContent> {
const extensions = getAllExtensions();
const ext = extensions.get(providerName);
@@ -471,14 +484,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
throw new Error("Provider not found");
}
const contentCacheKey = `content:${providerName}:${source}:${bookId}:${chapterIndex}`;
const contentCacheKey = `content:${providerName}:${source}:${lang}:${bookId}:${chapterId}`;
const cachedContent = await getCache(contentCacheKey);
if (cachedContent) {
const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
if (!isExpired) {
console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterIndex}`);
console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterId}`);
try {
return JSON.parse(cachedContent.result) as ChapterContent;
} catch (e) {
@@ -486,33 +499,14 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
}
} else {
console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterIndex}`);
console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterId}`);
}
}
const isExternal = source !== 'anilist';
const chapterList = await getChaptersForBook(bookId, isExternal, providerName);
if (!chapterList?.chapters || chapterList.chapters.length === 0) {
throw new Error("Chapters not found");
}
const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
const index = parseInt(chapterIndex, 10);
if (Number.isNaN(index)) {
throw new Error("Invalid chapter index");
}
if (!providerChapters[index]) {
throw new Error("Chapter index out of range");
}
const selectedChapter = providerChapters[index];
const chapterId = selectedChapter.id;
const chapterTitle = selectedChapter.title || null;
const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
const selectedChapter: any = {
id: chapterId,
provider: providerName
};
try {
if (!ext.findChapterPages) {
@@ -522,12 +516,13 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
let contentResult: ChapterContent;
if (ext.mediaType === "manga") {
// Usamos el ID directamente
const pages = await ext.findChapterPages(chapterId);
contentResult = {
type: "manga",
chapterId,
title: chapterTitle,
number: chapterNumber,
chapterId: selectedChapter.id,
title: selectedChapter.title,
number: selectedChapter.number,
provider: providerName,
pages
};
@@ -535,9 +530,9 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
const content = await ext.findChapterPages(chapterId);
contentResult = {
type: "ln",
chapterId,
title: chapterTitle,
number: chapterNumber,
chapterId: selectedChapter.id,
title: selectedChapter.title,
number: selectedChapter.number,
provider: providerName,
content
};
@@ -546,7 +541,6 @@ export async function getChapterContent(bookId: string, chapterIndex: string, pr
}
await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
return contentResult;
} catch (err) {

1
desktop/src/api/types.ts
View File

@@ -79,6 +79,7 @@ export interface Episode {
}
export interface Chapter {
language?: string | null;
index: number;
id: string;
number: string | number;

720
desktop/src/scripts/books/book.js
View File

@@ -5,25 +5,367 @@ let bookSlug = null;
let allChapters = [];
let filteredChapters = [];
let availableExtensions = [];
let isLocal = false;
let currentLanguage = null;
let uniqueLanguages = [];
let isSortAscending = true;
const chapterPagination = Object.create(PaginationManager);
chapterPagination.init(12, () => renderChapterTable());
chapterPagination.init(6, () => renderChapterList());
document.addEventListener('DOMContentLoaded', () => {
init();
setupModalClickOutside();
document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
});
async function init() {
try {
const urlData = URLUtils.parseEntityPath('book');
if (!urlData) { showError("Book Not Found"); return; }
extensionName = urlData.extensionName;
bookId = urlData.entityId;
bookSlug = urlData.slug;
await loadBookMetadata();
await checkLocalLibraryEntry();
await loadAvailableExtensions();
await loadChapters();
await setupAddToListButton();
} catch (err) {
console.error("Init Error:", err);
showError("Error loading book");
}
}
async function loadBookMetadata() {
const source = extensionName || 'anilist';
const fetchUrl = `/api/book/${bookId}?source=${source}`;
try {
const res = await fetch(fetchUrl);
const data = await res.json();
if (data.error || !data) { showError("Book Not Found"); return; }
const raw = Array.isArray(data) ? data[0] : data;
bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title);
updateMetadata(metadata, raw);
updateExtensionPill();
} catch (e) {
console.error(e);
showError("Error loading metadata");
}
}
function updatePageTitle(title) {
document.title = `${title} | WaifuBoard Books`;
const titleEl = document.getElementById('title');
if (titleEl) titleEl.innerText = title;
}
function updateMetadata(metadata, rawData) {
// 1. Cabecera (Score, Año, Status, Formato, Caps)
const elements = {
'description': metadata.description,
'published-date': metadata.year,
'status': metadata.status,
'format': metadata.format,
'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
'poster': metadata.poster,
'hero-bg': metadata.banner
};
if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
['published-date','status','format','chapters-count','genres'].forEach(id => {
const el = document.getElementById(id);
if(el) el.innerText = elements[id];
});
const scoreEl = document.getElementById('score');
if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
// 2. Sidebar: Sinónimos (Para llenar espacio vacío)
if (rawData.synonyms && rawData.synonyms.length > 0) {
const sidebarInfo = document.getElementById('sidebar-info');
const list = document.getElementById('synonyms-list');
if (sidebarInfo && list) {
sidebarInfo.style.display = 'block';
list.innerHTML = '';
// Mostrar máx 5 sinónimos para no alargar demasiado
rawData.synonyms.slice(0, 5).forEach(syn => {
const li = document.createElement('li');
li.innerText = syn;
list.appendChild(li);
});
}
}
// 3. Renderizar Personajes
if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
renderCharacters(rawData.characters.nodes);
}
// 4. Renderizar Relaciones
if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
renderRelations(rawData.relations.edges);
}
}
function renderCharacters(nodes) {
const container = document.getElementById('characters-list');
if(!container) return;
container.innerHTML = '';
nodes.forEach(char => {
const el = document.createElement('div');
el.className = 'character-item';
const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
const name = char.name?.full || 'Unknown';
const role = char.role || 'Supporting';
el.innerHTML = `
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
<div class="char-info">
<div class="char-name">${name}</div>
<div class="char-role">${role}</div>
</div>
`;
container.appendChild(el);
});
}
function renderRelations(edges) {
const container = document.getElementById('relations-list');
const section = document.getElementById('relations-section');
if(!container || !section) return;
if (!edges || edges.length === 0) {
section.style.display = 'none';
return;
}
section.style.display = 'block';
container.innerHTML = '';
edges.forEach(edge => {
const node = edge.node;
if (!node) return;
const el = document.createElement('div');
el.className = 'relation-card-horizontal';
const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
el.innerHTML = `
<img src="${img}" class="rel-img" alt="${title}" loading="lazy">
<div class="rel-info">
<span class="rel-type">${type}</span>
<span class="rel-title">${title}</span>
</div>
`;
el.onclick = () => {
const targetType = node.type === 'ANIME' ? 'anime' : 'book';
window.location.href = `/${targetType}/${node.id}`;
};
container.appendChild(el);
});
}
function processChaptersData(chaptersData) {
allChapters = chaptersData;
const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
uniqueLanguages = Array.from(langSet);
setupLanguageSelector();
filterAndRenderChapters();
setupReadButton();
}
async function loadChapters(targetProvider = null) {
const listContainer = document.getElementById('chapters-list');
const loadingMsg = document.getElementById('loading-msg');
if(listContainer) listContainer.innerHTML = '';
if(loadingMsg) loadingMsg.style.display = 'block';
if (!targetProvider) {
const select = document.getElementById('provider-filter');
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
}
try {
let fetchUrl;
let isLocalRequest = targetProvider === 'local';
if (isLocalRequest) {
fetchUrl = `/api/library/${bookId}/units`;
} else {
const source = extensionName || 'anilist';
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
}
const res = await fetch(fetchUrl);
const data = await res.json();
if(loadingMsg) loadingMsg.style.display = 'none';
let rawData = [];
if (isLocalRequest) {
rawData = (data.units || []).map((unit, idx) => ({
id: unit.id || idx, number: unit.number, title: unit.name,
provider: 'local', index: idx, format: unit.format, language: 'local'
}));
} else {
rawData = data.chapters || [];
}
processChaptersData(rawData);
} catch (err) {
if(loadingMsg) loadingMsg.style.display = 'none';
if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
console.error(err);
}
}
function setupLanguageSelector() {
const selectorContainer = document.getElementById('language-selector-container');
const select = document.getElementById('language-select');
if (!selectorContainer || !select) return;
if (uniqueLanguages.length <= 1) {
selectorContainer.classList.add('hidden');
currentLanguage = uniqueLanguages[0] || null;
return;
}
selectorContainer.classList.remove('hidden');
select.innerHTML = '';
const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
uniqueLanguages.forEach(lang => {
const option = document.createElement('option');
option.value = lang;
option.textContent = langNames[lang] || lang.toUpperCase();
select.appendChild(option);
});
if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
else currentLanguage = uniqueLanguages[0];
select.value = currentLanguage;
select.onchange = (e) => {
currentLanguage = e.target.value;
chapterPagination.currentPage = 1;
filterAndRenderChapters();
};
}
function filterAndRenderChapters() {
let tempChapters = [...allChapters];
if (currentLanguage && uniqueLanguages.length > 1) {
tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
}
const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
if(searchQuery){
tempChapters = tempChapters.filter(ch =>
(ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
(ch.number && ch.number.toString().includes(searchQuery))
);
}
tempChapters.sort((a, b) => {
const numA = parseFloat(a.number) || 0;
const numB = parseFloat(b.number) || 0;
return isSortAscending ? numA - numB : numB - numA;
});
filteredChapters = tempChapters;
chapterPagination.setTotalItems(filteredChapters.length);
renderChapterList();
}
function renderChapterList() {
const container = document.getElementById('chapters-list');
if(!container) return;
container.innerHTML = '';
const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
if (itemsToShow.length === 0) {
container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
return;
}
itemsToShow.forEach(chapter => {
const el = document.createElement('div');
el.className = 'chapter-item';
el.onclick = () => openReader(chapter.id, chapter.provider);
const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
el.innerHTML = `
<div class="chapter-info">
<span class="chapter-number">Chapter ${chapter.number}</span>
<span class="chapter-title">${chapter.title || ''}</span>
</div>
<div class="chapter-meta">
${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
${dateStr ? `<span>${dateStr}</span>` : ''}
<svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
`;
container.appendChild(el);
});
chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
}
function toggleSortOrder() {
isSortAscending = !isSortAscending;
const btn = document.getElementById('sort-btn');
if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
filterAndRenderChapters();
}
function setupReadButton() {
const readBtn = document.getElementById('read-start-btn');
if (!readBtn || allChapters.length === 0) return;
const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
if (firstChapter) readBtn.onclick = () =>
openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
}
function openReader(chapterIndexOrId, provider) {
const lang = currentLanguage ?? 'none';
window.location.href =
URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
+ `?lang=${lang}`;
}
async function checkLocalLibraryEntry() {
try {
const libraryType =
bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
const res = await fetch(`/api/library/${libraryType}/${bookId}`);
if (!res.ok) return;
const data = await res.json();
if (data.matched) {
isLocal = true;
@@ -36,34 +378,7 @@ async function checkLocalLibraryEntry() {
pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
}
}
} catch (e) {
console.error("Error checking local status:", e);
}
}
async function init() {
try {
const urlData = URLUtils.parseEntityPath('book');
if (!urlData) {
showError("Book Not Found");
return;
}
extensionName = urlData.extensionName;
bookId = urlData.entityId;
bookSlug = urlData.slug;
await loadBookMetadata();
await checkLocalLibraryEntry();
await loadAvailableExtensions();
await loadChapters();
await setupAddToListButton();
} catch (err) {
console.error("Metadata Error:", err);
showError("Error loading book");
}
} catch (e) { console.error("Error checking local:", e); }
}
async function loadAvailableExtensions() {
@@ -71,220 +386,21 @@ async function loadAvailableExtensions() {
const res = await fetch('/api/extensions/book');
const data = await res.json();
availableExtensions = data.extensions || [];
setupProviderFilter();
} catch (err) {
console.error("Error fetching extensions:", err);
}
}
async function loadBookMetadata() {
const source = extensionName || 'anilist';
const fetchUrl = `/api/book/${bookId}?source=${source}`;
const res = await fetch(fetchUrl);
const data = await res.json();
if (data.error || !data) {
showError("Book Not Found");
return;
}
const raw = Array.isArray(data) ? data[0] : data;
bookData = raw;
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
bookData.entry_type =
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
updatePageTitle(metadata.title);
updateMetadata(metadata);
updateExtensionPill();
}
function updatePageTitle(title) {
document.title = `${title} | WaifuBoard Books`;
const titleEl = document.getElementById('title');
if (titleEl) titleEl.innerText = title;
}
function updateMetadata(metadata) {
const descEl = document.getElementById('description');
if (descEl) descEl.innerHTML = metadata.description;
const scoreEl = document.getElementById('score');
if (scoreEl) {
scoreEl.innerText = extensionName
? `${metadata.score}`
: `${metadata.score}% Score`;
}
const pubEl = document.getElementById('published-date');
if (pubEl) pubEl.innerText = metadata.year;
const statusEl = document.getElementById('status');
if (statusEl) statusEl.innerText = metadata.status;
const formatEl = document.getElementById('format');
if (formatEl) formatEl.innerText = metadata.format;
const chaptersEl = document.getElementById('chapters');
if (chaptersEl) chaptersEl.innerText = metadata.chapters;
const genresEl = document.getElementById('genres');
if (genresEl) genresEl.innerText = metadata.genres;
const posterEl = document.getElementById('poster');
if (posterEl) posterEl.src = metadata.poster;
const heroBgEl = document.getElementById('hero-bg');
if (heroBgEl) heroBgEl.src = metadata.banner;
}
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';
}
}
async function setupAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn || !bookData) return;
ListModalManager.currentData = bookData;
const entryType = ListModalManager.getEntryType(bookData);
const idForCheck = extensionName ? bookSlug : bookId;
await ListModalManager.checkIfInList(
idForCheck,
extensionName || 'anilist',
entryType
);
updateCustomAddButton();
btn.onclick = () => ListModalManager.open(bookData, 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 Library
`;
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 Library';
btn.style.background = null;
btn.style.color = null;
btn.style.borderColor = null;
}
}
async function loadChapters(targetProvider = null) {
const tbody = document.getElementById('chapters-body');
if (!tbody) return;
if (!targetProvider) {
const select = document.getElementById('provider-filter');
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
}
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
try {
let fetchUrl;
let isLocalRequest = targetProvider === 'local';
if (isLocalRequest) {
// Nuevo endpoint para archivos locales
fetchUrl = `/api/library/${bookId}/units`;
} else {
const source = extensionName || 'anilist';
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
}
const res = await fetch(fetchUrl);
const data = await res.json();
// Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
if (isLocalRequest) {
allChapters = (data.units || []).map((unit, idx) => ({
number: unit.number,
title: unit.name,
provider: 'local',
index: idx, // ✅ índice (0,1,2…)
format: unit.format
}));
} else {
allChapters = data.chapters || [];
}
filteredChapters = [...allChapters];
applyChapterFilter();
const totalEl = document.getElementById('total-chapters');
if (allChapters.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
if (totalEl) totalEl.innerText = "0 Found";
return;
}
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
setupReadButton();
chapterPagination.setTotalItems(filteredChapters.length);
chapterPagination.reset();
renderChapterTable();
} catch (err) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
console.error(err);
}
}
function applyChapterFilter() {
const chapterParam = URLUtils.getQueryParam('chapter');
if (!chapterParam) return;
const chapterNumber = parseFloat(chapterParam);
if (isNaN(chapterNumber)) return;
filteredChapters = allChapters.filter(
ch => parseFloat(ch.number) === chapterNumber
);
chapterPagination.reset();
} catch (err) { console.error(err); }
}
function setupProviderFilter() {
const select = document.getElementById('provider-filter');
if (!select) return;
select.style.display = 'inline-block';
select.innerHTML = '';
// Opción para cargar todo
const allOpt = document.createElement('option');
allOpt.value = 'all';
allOpt.innerText = 'Load All (Slower)';
allOpt.innerText = 'All Providers';
select.appendChild(allOpt);
// NUEVO: Si es local, añadimos la opción 'local' al principio
if (isLocal) {
const localOpt = document.createElement('option');
localOpt.value = 'local';
@@ -292,7 +408,6 @@ function setupProviderFilter() {
select.appendChild(localOpt);
}
// Añadir extensiones normales
availableExtensions.forEach(ext => {
const opt = document.createElement('option');
opt.value = ext;
@@ -300,90 +415,43 @@ function setupProviderFilter() {
select.appendChild(opt);
});
// Lógica de selección automática
if (isLocal) {
select.value = 'local'; // Prioridad si es local
} else if (extensionName && availableExtensions.includes(extensionName)) {
select.value = extensionName;
} else if (availableExtensions.length > 0) {
select.value = availableExtensions[0];
if (isLocal) select.value = 'local';
else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
else if (availableExtensions.length > 0) select.value = availableExtensions[0];
select.onchange = () => loadChapters(select.value);
}
function updateExtensionPill() {
const pill = document.getElementById('extension-pill');
if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
}
async function setupAddToListButton() {
const btn = document.getElementById('add-to-list-btn');
if (!btn || !bookData) return;
ListModalManager.currentData = bookData;
const entryType = ListModalManager.getEntryType(bookData);
const idForCheck = extensionName ? bookSlug : bookId;
await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
updateCustomAddButton();
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
}
function updateCustomAddButton() {
const btn = document.getElementById('add-to-list-btn');
if(btn && ListModalManager.isInList) {
btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
}
select.onchange = () => {
loadChapters(select.value);
};
}
function setupReadButton() {
const readBtn = document.getElementById('read-start-btn');
if (!readBtn || filteredChapters.length === 0) return;
const firstChapter = filteredChapters[0];
readBtn.onclick = () => openReader(0, firstChapter.provider);
}
function renderChapterTable() {
const tbody = document.getElementById('chapters-body');
if (!tbody) return;
tbody.innerHTML = '';
if (filteredChapters.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
chapterPagination.renderControls(
'pagination',
'page-info',
'prev-page',
'next-page'
);
return;
}
const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
pageItems.forEach((ch) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${ch.number}</td>
<td>${ch.title || 'Chapter ' + ch.number}</td>
<td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
<td>
<button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
Read
</button>
</td>
`;
tbody.appendChild(row);
});
chapterPagination.renderControls(
'pagination',
'page-info',
'prev-page',
'next-page'
);
}
function openReader(chapterId, provider) {
const effectiveExtension = extensionName || 'anilist';
window.location.href = URLUtils.buildReadUrl(
bookId, // SIEMPRE anilist
chapterId, // número normal
provider, // 'local' o extensión
extensionName || 'anilist'
);
}
function setupModalClickOutside() {
const modal = document.getElementById('add-list-modal');
if (!modal) return;
modal.addEventListener('click', (e) => {
if (e.target.id === 'add-list-modal') {
ListModalManager.close();
}
});
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target.id === 'add-list-modal') ListModalManager.close();
});
}
}
function showError(message) {
@@ -391,21 +459,15 @@ function showError(message) {
if (titleEl) titleEl.innerText = message;
}
function saveToList() {
// Exports
window.openReader = openReader;
window.saveToList = () => {
const idToSave = extensionName ? bookSlug : bookId;
ListModalManager.save(idToSave, extensionName || 'anilist');
}
function deleteFromList() {
};
window.deleteFromList = () => {
const idToDelete = extensionName ? bookSlug : bookId;
ListModalManager.delete(idToDelete, extensionName || 'anilist');
}
function closeAddToListModal() {
ListModalManager.close();
}
window.openReader = openReader;
window.saveToList = saveToList;
window.deleteFromList = deleteFromList;
window.closeAddToListModal = closeAddToListModal;
};
window.closeAddToListModal = () => ListModalManager.close();
window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');

367
desktop/src/scripts/books/reader.js
View File

@@ -1,3 +1,7 @@
// reader.js refactorizado
const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang') ?? 'none';
const reader = document.getElementById('reader');
const panel = document.getElementById('settings-panel');
const overlay = document.getElementById('overlay');
@@ -33,11 +37,12 @@ let currentType = null;
let currentPages = [];
let observer = null;
// === CAMBIO: Parseo de URL para obtener ID ===
const parts = window.location.pathname.split('/');
const bookId = parts[4];
let chapter = parts[3];
let currentChapterId = parts[3]; // Ahora es un ID (string)
let provider = parts[2];
let chaptersList = []; // Buffer para guardar el orden de capítulos
function loadConfig() {
try {
@@ -116,6 +121,31 @@ function updateSettingsVisibility() {
mangaSettings.classList.toggle('hidden', currentType !== 'manga');
}
// === CAMBIO: Nueva función para traer la lista de capítulos y saber el orden ===
async function fetchChapterList() {
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('source') || 'anilist';
try {
// Reusamos el endpoint que lista capítulos
const res = await fetch(`/api/book/${bookId}/chapters?source=${source}&provider=${provider}`);
const data = await res.json();
// Ordenamos por número para asegurar navegación correcta
let list = data.chapters || [];
list.sort((a, b) => Number(a.number) - Number(b.number));
// Si hay filtro de idioma en la URL, filtramos la navegación también
if (lang !== 'none') {
list = list.filter(c => c.language === lang);
}
chaptersList = list;
} catch (e) {
console.error("Error fetching chapter list:", e);
}
}
async function loadChapter() {
reader.innerHTML = `
<div class="loading-container">
@@ -126,23 +156,35 @@ async function loadChapter() {
const urlParams = new URLSearchParams(window.location.search);
let source = urlParams.get('source');
if (!source) {
source = 'anilist';
if (!source) source = 'anilist';
// === CAMBIO: Si no tenemos la lista de capítulos (y no es local), la pedimos ===
if (provider !== 'local' && chaptersList.length === 0) {
await fetchChapterList();
}
let newEndpoint;
if (provider === 'local') {
newEndpoint = `/api/library/${bookId}/units`;
} else {
newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
// === CAMBIO: Usamos currentChapterId en la URL ===
newEndpoint = `/api/book/${bookId}/${currentChapterId}/${provider}?source=${source}&lang=${lang}`;
}
try {
const res = await fetch(newEndpoint);
const data = await res.json();
// Lógica específica para contenido LOCAL
if (provider === 'local') {
const unit = data.units[Number(chapter)];
if (!unit) return;
const unitIndex = Number(currentChapterId); // En local el ID suele ser el índice
const unit = data.units[unitIndex];
if (!unit) {
reader.innerHTML = '<div class="loading-container"><span>Chapter not found (Local)</span></div>';
return;
}
chapterLabel.textContent = unit.name;
document.title = unit.name;
@@ -152,42 +194,28 @@ async function loadChapter() {
reader.innerHTML = '';
// ===== MANGA =====
// Setup navegación manual para local (simple index +/- 1)
setupLocalNavigation(unitIndex, data.units.length);
if (manifest.type === 'manga') {
currentType = 'manga';
updateSettingsVisibility();
applyStyles();
currentPages = manifest.pages;
loadManga(currentPages);
return;
}
// ===== LN =====
if (manifest.type === 'ln') {
currentType = 'ln';
updateSettingsVisibility();
applyStyles();
const contentRes = await fetch(manifest.url);
const html = await contentRes.text();
loadLN(html);
return;
}
}
if (data.title) {
chapterLabel.textContent = data.title;
document.title = data.title;
} else {
chapterLabel.textContent = `Chapter ${chapter}`;
document.title = `Chapter ${chapter}`;
}
setupProgressTracking(data, source);
const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
const data2 = await res2.json();
@@ -200,15 +228,25 @@ async function loadChapter() {
mode: "reading"
})
});
if (data.error) {
reader.innerHTML = `
<div class="loading-container">
<span style="color: #ef4444;">Error: ${data.error}</span>
</div>
`;
reader.innerHTML = `<div class="loading-container"><span style="color: #ef4444;">Error: ${data.error}</span></div>`;
return;
}
if (data.title) {
chapterLabel.textContent = data.title;
document.title = data.title;
} else {
chapterLabel.textContent = `Chapter ${data.number ?? currentChapterId}`;
document.title = `Chapter ${data.number ?? currentChapterId}`;
}
setupProgressTracking(data, source);
// === CAMBIO: Actualizar botones basado en IDs ===
updateNavigationButtons();
currentType = data.type;
updateSettingsVisibility();
applyStyles();
@@ -221,6 +259,7 @@ async function loadChapter() {
loadLN(data.content);
}
} catch (error) {
console.error(error);
reader.innerHTML = `
<div class="loading-container">
<span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
@@ -229,6 +268,87 @@ async function loadChapter() {
}
}
// === CAMBIO: Lógica de navegación basada en IDs ===
function updateNavigationButtons() {
if (provider === 'local') return; // Se maneja aparte
// Buscamos el índice actual en la lista completa
const currentIndex = chaptersList.findIndex(c => String(c.id) === String(currentChapterId));
if (currentIndex === -1) {
console.warn("Current chapter not found in list, navigation disabled");
prevBtn.disabled = true;
nextBtn.disabled = true;
prevBtn.style.opacity = 0.5;
nextBtn.style.opacity = 0.5;
return;
}
// Configurar botón ANTERIOR
if (currentIndex > 0) {
const prevId = chaptersList[currentIndex - 1].id;
prevBtn.onclick = () => changeChapter(prevId);
prevBtn.disabled = false;
prevBtn.style.opacity = 1;
} else {
prevBtn.onclick = null;
prevBtn.disabled = true;
prevBtn.style.opacity = 0.5;
}
// Configurar botón SIGUIENTE
if (currentIndex < chaptersList.length - 1) {
const nextId = chaptersList[currentIndex + 1].id;
nextBtn.onclick = () => changeChapter(nextId);
nextBtn.disabled = false;
nextBtn.style.opacity = 1;
} else {
nextBtn.onclick = null;
nextBtn.disabled = true;
nextBtn.style.opacity = 0.5;
}
}
// Fallback para navegación local (basada en índices)
function setupLocalNavigation(currentIndex, totalUnits) {
if (currentIndex > 0) {
prevBtn.onclick = () => changeChapter(currentIndex - 1);
prevBtn.disabled = false;
prevBtn.style.opacity = 1;
} else {
prevBtn.disabled = true;
prevBtn.style.opacity = 0.5;
}
if (currentIndex < totalUnits - 1) {
nextBtn.onclick = () => changeChapter(currentIndex + 1);
nextBtn.disabled = false;
nextBtn.style.opacity = 1;
} else {
nextBtn.disabled = true;
nextBtn.style.opacity = 0.5;
}
}
// === CAMBIO: Función helper para cambiar de capítulo ===
function changeChapter(newId) {
currentChapterId = newId;
updateURL(newId);
window.scrollTo(0, 0);
loadChapter();
}
function updateURL(newId) {
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('source') ?? 'anilist';
// La URL ahora contiene el ID en lugar del número/índice
const newUrl = `/read/${provider}/${newId}/${bookId}?source=${source}&lang=${lang}`;
window.history.pushState({}, '', newUrl);
}
// --- Resto de funciones UI (Manga/LN loading) sin cambios lógicos mayores ---
function loadManga(pages) {
if (!pages || pages.length === 0) {
reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
@@ -239,7 +359,6 @@ function loadManga(pages) {
container.className = 'manga-container';
let isLongStrip = false;
if (config.manga.mode === 'longstrip') {
isLongStrip = true;
} else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
@@ -262,15 +381,12 @@ function loadManga(pages) {
function shouldUseDoublePage(pages) {
if (pages.length <= 5) return false;
const widePages = pages.filter(p => {
if (!p.height || !p.width) return false;
const ratio = p.width / p.height;
return ratio > 1.3;
});
if (widePages.length > pages.length * 0.3) return false;
return true;
}
@@ -310,7 +426,6 @@ function loadDoublePage(container, pages) {
i++;
} else {
const rightPage = createImageElement(nextPage, i + 1);
if (config.manga.direction === 'rtl') {
doubleContainer.appendChild(rightPage);
doubleContainer.appendChild(leftPage);
@@ -318,7 +433,6 @@ function loadDoublePage(container, pages) {
doubleContainer.appendChild(leftPage);
doubleContainer.appendChild(rightPage);
}
container.appendChild(doubleContainer);
i += 2;
}
@@ -361,30 +475,23 @@ function createImageElement(page, index) {
img.dataset.src = url;
img.loading = 'lazy';
}
img.alt = `Page ${index + 1}`;
return img;
}
function buildProxyUrl(url, headers = {}) {
const params = new URLSearchParams({ url });
if (headers.Referer || headers.referer)
params.append("referer", headers.Referer || headers.referer);
if (headers["User-Agent"] || headers["user-agent"])
params.append("userAgent", headers["User-Agent"] || headers["user-agent"]);
if (headers.Origin || headers.origin)
params.append("origin", headers.Origin || headers.origin);
return `/api/proxy?${params.toString()}`;
}
function detectLongStrip(pages) {
if (!pages || pages.length === 0) return false;
const relevant = pages.slice(1);
const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
@@ -392,7 +499,6 @@ function detectLongStrip(pages) {
function setupLazyLoading() {
if (observer) observer.disconnect();
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@@ -404,10 +510,7 @@ function setupLazyLoading() {
}
}
});
}, {
rootMargin: '200px'
});
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
}
@@ -418,161 +521,102 @@ function loadLN(html) {
reader.appendChild(div);
}
// Listeners de configuración
document.getElementById('font-size').addEventListener('input', (e) => {
config.ln.fontSize = parseInt(e.target.value);
document.getElementById('font-size-value').textContent = e.target.value + 'px';
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('line-height').addEventListener('input', (e) => {
config.ln.lineHeight = parseFloat(e.target.value);
document.getElementById('line-height-value').textContent = e.target.value;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('max-width').addEventListener('input', (e) => {
config.ln.maxWidth = parseInt(e.target.value);
document.getElementById('max-width-value').textContent = e.target.value + 'px';
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('font-family').addEventListener('change', (e) => {
config.ln.fontFamily = e.target.value;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('text-color').addEventListener('change', (e) => {
config.ln.textColor = e.target.value;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('bg-color').addEventListener('change', (e) => {
config.ln.bg = e.target.value;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.querySelectorAll('[data-align]').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
config.ln.textAlign = btn.dataset.align;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
});
document.querySelectorAll('[data-preset]').forEach(btn => {
btn.addEventListener('click', () => {
const preset = btn.dataset.preset;
const presets = {
dark: { bg: '#14141b', textColor: '#e5e7eb' },
sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
light: { bg: '#fafafa', textColor: '#1f2937' },
amoled: { bg: '#000000', textColor: '#ffffff' }
};
if (presets[preset]) {
Object.assign(config.ln, presets[preset]);
document.getElementById('bg-color').value = config.ln.bg;
document.getElementById('text-color').value = config.ln.textColor;
applyStyles();
saveConfig();
applyStyles(); saveConfig();
}
});
});
document.getElementById('display-mode').addEventListener('change', (e) => {
config.manga.mode = e.target.value;
saveConfig();
loadChapter();
saveConfig(); loadChapter();
});
document.getElementById('image-fit').addEventListener('change', (e) => {
config.manga.imageFit = e.target.value;
saveConfig();
loadChapter();
saveConfig(); loadChapter();
});
document.getElementById('page-spacing').addEventListener('input', (e) => {
config.manga.spacing = parseInt(e.target.value);
document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
applyStyles();
saveConfig();
applyStyles(); saveConfig();
});
document.getElementById('preload-count').addEventListener('change', (e) => {
config.manga.preloadCount = parseInt(e.target.value);
saveConfig();
});
document.querySelectorAll('[data-direction]').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
config.manga.direction = btn.dataset.direction;
saveConfig();
loadChapter();
saveConfig(); loadChapter();
});
});
prevBtn.addEventListener('click', () => {
const current = parseInt(chapter);
if (current <= 0) return;
const newChapter = String(current - 1);
updateURL(newChapter);
window.scrollTo(0, 0);
loadChapter();
});
nextBtn.addEventListener('click', () => {
const newChapter = String(parseInt(chapter) + 1);
updateURL(newChapter);
window.scrollTo(0, 0);
loadChapter();
});
function updateURL(newChapter) {
chapter = newChapter;
const urlParams = new URLSearchParams(window.location.search);
let source = urlParams.get('source');
let src;
if (source === 'anilist') {
src= "?source=anilist"
} else {
src= `?source=${source}`
}
const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
window.history.pushState({}, '', newUrl);
}
// Botón "Atrás"
document.getElementById('back-btn').addEventListener('click', () => {
const parts = window.location.pathname.split('/');
const mangaId = parts[4];
const urlParams = new URLSearchParams(window.location.search);
let source = urlParams.get('source');
let source = urlParams.get('source')?.split('?')[0];
if (source === 'anilist') {
window.location.href = `/book/${mangaId}`;
if (source === 'anilist' || !source) {
window.location.href = `/book/${bookId}`;
} else {
window.location.href = `/book/${source}/${mangaId}`;
window.location.href = `/book/${source}/${bookId}`;
}
});
// Panel de configuración
settingsBtn.addEventListener('click', () => {
panel.classList.add('open');
overlay.classList.add('active');
});
closePanel.addEventListener('click', closeSettings);
overlay.addEventListener('click', closeSettings);
@@ -580,7 +624,6 @@ function closeSettings() {
panel.classList.remove('open');
overlay.classList.remove('active');
}
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && panel.classList.contains('open')) {
closeSettings();
@@ -590,37 +633,24 @@ document.addEventListener('keydown', (e) => {
function enableMangaPageNavigation() {
if (currentType !== 'manga') return;
const logicalPages = [];
document.querySelectorAll('.manga-container > *').forEach(el => {
if (el.classList.contains('double-container')) {
logicalPages.push(el);
} else if (el.tagName === 'IMG') {
if (el.classList.contains('double-container') || el.tagName === 'IMG') {
logicalPages.push(el);
}
});
if (logicalPages.length === 0) return;
function scrollToLogical(index) {
if (index < 0 || index >= logicalPages.length) return;
const topBar = document.querySelector('.top-bar');
const offset = topBar ? -topBar.offsetHeight : 0;
const y = logicalPages[index].getBoundingClientRect().top
+ window.pageYOffset
+ offset;
window.scrollTo({
top: y,
behavior: 'smooth'
});
const y = logicalPages[index].getBoundingClientRect().top + window.pageYOffset + offset;
window.scrollTo({ top: y, behavior: 'smooth' });
}
function getCurrentLogicalIndex() {
let closest = 0;
let minDist = Infinity;
logicalPages.forEach((el, i) => {
const rect = el.getBoundingClientRect();
const dist = Math.abs(rect.top);
@@ -629,53 +659,36 @@ function enableMangaPageNavigation() {
closest = i;
}
});
return closest;
}
const rtl = () => config.manga.direction === 'rtl';
document.addEventListener('keydown', (e) => {
if (currentType !== 'manga') return;
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
const index = getCurrentLogicalIndex();
if (e.key === 'ArrowLeft') {
scrollToLogical(rtl() ? index + 1 : index - 1);
}
if (e.key === 'ArrowRight') {
scrollToLogical(rtl() ? index - 1 : index + 1);
}
if (e.key === 'ArrowLeft') scrollToLogical(rtl() ? index + 1 : index - 1);
if (e.key === 'ArrowRight') scrollToLogical(rtl() ? index - 1 : index + 1);
});
reader.addEventListener('click', (e) => {
if (currentType !== 'manga') return;
const bounds = reader.getBoundingClientRect();
const x = e.clientX - bounds.left;
const half = bounds.width / 2;
const index = getCurrentLogicalIndex();
if (x < half) {
scrollToLogical(rtl() ? index + 1 : index - 1);
} else {
scrollToLogical(rtl() ? index - 1 : index + 1);
}
if (x < half) scrollToLogical(rtl() ? index + 1 : index - 1);
else scrollToLogical(rtl() ? index - 1 : index + 1);
});
}
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
applyStyles();
}, 250);
resizeTimer = setTimeout(() => { applyStyles(); }, 250);
});
let progressSaved = false;
function setupProgressTracking(data, source) {
progressSaved = false;
@@ -688,25 +701,16 @@ function setupProgressTracking(data, source) {
source: source,
entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
status: 'CURRENT',
progress: source === 'anilist'
? Math.floor(chapterNumber)
: chapterNumber
progress: source === 'anilist' ? Math.floor(chapterNumber) : chapterNumber
};
try {
await fetch('/api/list/entry', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
body: JSON.stringify(body)
});
} catch (err) {
console.error('Error updating progress:', err);
}
} catch (err) { console.error('Error updating progress:', err); }
}
function checkProgress() {
@@ -716,25 +720,24 @@ function setupProgressTracking(data, source) {
if (percent >= 0.8 && !progressSaved) {
progressSaved = true;
// Usamos el número real del capítulo, no el ID
const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
? data.number
: Number(chapter);
: 0; // Fallback si no hay numero
sendProgress(chapterNumber);
window.removeEventListener('scroll', checkProgress);
}
}
window.removeEventListener('scroll', checkProgress);
window.addEventListener('scroll', checkProgress);
}
if (!bookId || !chapter || !provider) {
// Inicialización
if (!bookId || !currentChapterId || !provider) {
reader.innerHTML = `
<div class="loading-container">
<span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
<span style="color: #ef4444;">Missing required parameters (bookId, chapterId, provider)</span>
</div>
`;
} else {