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

enhanced and fixed reader

Browse Source
This commit is contained in:
lenafx
2025-11-27 15:07:43 +01:00
parent a6c753085e
commit 86d4a518d8
5 changed files with 399 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
public/reader.js
View File

@@ -7,6 +7,8 @@ const chapterLabel = document.getElementById('chapter-label');
const prevBtn = document.getElementById('prev-chapter');
const nextBtn = document.getElementById('next-chapter');
const prevUrl = localStorage.getItem('reader_prev_url');
const lnSettings = document.getElementById('ln-settings');
const mangaSettings = document.getElementById('manga-settings');
@@ -25,8 +27,6 @@ const config = {
mode: 'auto',
spacing: 16,
imageFit: 'screen',
maxWidth: 900,
quality: 'high',
preloadCount: 3
}
};
@@ -86,8 +86,6 @@ function updateUIFromConfig() {
// Manga
document.getElementById('display-mode').value = config.manga.mode;
document.getElementById('image-fit').value = config.manga.imageFit;
document.getElementById('manga-max-width').value = config.manga.maxWidth;
document.getElementById('manga-max-width-value').textContent = config.manga.maxWidth + 'px';
document.getElementById('page-spacing').value = config.manga.spacing;
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
document.getElementById('preload-count').value = config.manga.preloadCount;
@@ -96,11 +94,6 @@ function updateUIFromConfig() {
document.querySelectorAll('[data-direction]').forEach(btn => {
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
});
// Quality buttons
document.querySelectorAll('[data-quality]').forEach(btn => {
btn.classList.toggle('active', btn.dataset.quality === config.manga.quality);
});
}
function applyStyles() {
@@ -110,16 +103,16 @@ function applyStyles() {
document.documentElement.style.setProperty('--ln-max-width', config.ln.maxWidth + 'px');
document.documentElement.style.setProperty('--ln-font-family', config.ln.fontFamily);
document.documentElement.style.setProperty('--ln-text-color', config.ln.textColor);
document.documentElement.style.setProperty('--ln-bg', config.ln.bg);
document.documentElement.style.setProperty('--bg-base', config.ln.bg);
document.documentElement.style.setProperty('--ln-text-align', config.ln.textAlign);
}
if (currentType === 'manga') {
document.documentElement.style.setProperty('--page-spacing', config.manga.spacing + 'px');
document.documentElement.style.setProperty('--page-max-width', config.manga.maxWidth + 'px');
document.documentElement.style.setProperty('--manga-max-width', config.manga.maxWidth + 'px');
document.documentElement.style.setProperty('--page-max-width', 900 + 'px');
document.documentElement.style.setProperty('--manga-max-width', 1400 + 'px');
const viewportHeight = window.innerHeight - 64 - 32; // header + padding
const viewportHeight = window.innerHeight - 64 - 32;
document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
}
}
@@ -137,7 +130,6 @@ async function loadChapter() {
</div>
`;
try {
const res = await fetch(`/api/book/${bookId}/${chapter}/${provider}`);
const data = await res.json();
@@ -173,7 +165,7 @@ async function loadChapter() {
} catch (error) {
reader.innerHTML = `
<div class="loading-container">
<span style="color: #ef4444;">❌ Error loading chapter: ${error.message}</span>
<span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
</div>
`;
}
@@ -188,11 +180,17 @@ function loadManga(pages) {
const container = document.createElement('div');
container.className = 'manga-container';
const isLongStrip = config.manga.mode === 'longstrip' ||
(config.manga.mode === 'auto' && detectLongStrip(pages));
let isLongStrip = false;
if (config.manga.mode === 'longstrip') {
isLongStrip = true;
} else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
isLongStrip = true;
}
const useDouble = config.manga.mode === 'double' ||
(config.manga.mode === 'auto' && !isLongStrip && pages.length > 5);
(config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
if (useDouble) {
loadDoublePage(container, pages);
@@ -202,58 +200,99 @@ function loadManga(pages) {
reader.appendChild(container);
setupLazyLoading();
enableMangaPageNavigation();
}
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;
}
function loadSinglePage(container, pages) {
pages.forEach((page, index) => {
const img = createImageElement(page.url, index);
const img = createImageElement(page, index);
container.appendChild(img);
});
}
function loadDoublePage(container, pages) {
for (let i = 0; i < pages.length; i += 2) {
const doubleContainer = document.createElement('div');
doubleContainer.className = 'double-container';
let i = 0;
while (i < pages.length) {
const currentPage = pages[i];
const nextPage = pages[i + 1];
const leftPage = createImageElement(pages[i].url, i);
const isWide = currentPage.width && currentPage.height &&
(currentPage.width / currentPage.height) > 1.1;
if (pages[i + 1]) {
const rightPage = createImageElement(pages[i + 1].url, i + 1);
if (config.manga.direction === 'rtl') {
doubleContainer.appendChild(rightPage);
doubleContainer.appendChild(leftPage);
} else {
doubleContainer.appendChild(leftPage);
doubleContainer.appendChild(rightPage);
}
if (isWide) {
const img = createImageElement(currentPage, i);
container.appendChild(img);
i++;
} else {
doubleContainer.appendChild(leftPage);
}
const doubleContainer = document.createElement('div');
doubleContainer.className = 'double-container';
container.appendChild(doubleContainer);
const leftPage = createImageElement(currentPage, i);
if (nextPage) {
const nextIsWide = nextPage.width && nextPage.height &&
(nextPage.width / nextPage.height) > 1.3;
if (nextIsWide) {
const singleImg = createImageElement(currentPage, i);
container.appendChild(singleImg);
i++;
} else {
const rightPage = createImageElement(nextPage, i + 1);
if (config.manga.direction === 'rtl') {
doubleContainer.appendChild(rightPage);
doubleContainer.appendChild(leftPage);
} else {
doubleContainer.appendChild(leftPage);
doubleContainer.appendChild(rightPage);
}
container.appendChild(doubleContainer);
i += 2;
}
} else {
const singleImg = createImageElement(currentPage, i);
container.appendChild(singleImg);
i++;
}
}
}
}
function createImageElement(url, index) {
function createImageElement(page, index) {
const img = document.createElement('img');
img.className = 'page-img';
img.dataset.index = index;
if (config.manga.imageFit === 'width') {
img.classList.add('fit-width');
} else if (config.manga.imageFit === 'height') {
img.classList.add('fit-height');
} else if (config.manga.imageFit === 'screen') {
img.classList.add('fit-screen');
const url = buildProxyUrl(page.url, page.headers);
if (config.manga.mode === 'longstrip' && index > 0) {
img.classList.add('longstrip-fit');
} else {
if (config.manga.imageFit === 'width') img.classList.add('fit-width');
else if (config.manga.imageFit === 'height') img.classList.add('fit-height');
else if (config.manga.imageFit === 'screen') img.classList.add('fit-screen');
}
// Preload o lazy load
if (index < config.manga.preloadCount) {
img.src = buildProxyUrl(url);
img.src = url;
} else {
img.dataset.src = buildProxyUrl(url);
img.dataset.src = url;
img.loading = 'lazy';
}
@@ -262,17 +301,24 @@ function createImageElement(url, index) {
return img;
}
function buildProxyUrl(url) {
return `/api/proxy?url=${encodeURIComponent(url)}&referer=https%3A%2F%2Fmangapark.net`;
function buildProxyUrl(url, headers = {}) {
const params = new URLSearchParams({
url
});
if (headers.referer) params.append('referer', headers.referer);
if (headers['user-agent']) params.append('ua', headers['user-agent']);
if (headers.cookie) params.append('cookie', headers.cookie);
return `/api/proxy?${params.toString()}`;
}
function detectLongStrip(pages) {
if (!pages || pages.length === 0) return false;
const tallPages = pages.filter(p => {
if (!p.height || !p.width) return false;
return (p.height / p.width) > 2.5;
});
return tallPages.length >= Math.min(4, pages.length * 0.5);
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;
}
function setupLazyLoading() {
@@ -303,6 +349,7 @@ function loadLN(html) {
reader.appendChild(div);
}
// Event Listeners - Light Novel
document.getElementById('font-size').addEventListener('input', (e) => {
config.ln.fontSize = parseInt(e.target.value);
document.getElementById('font-size-value').textContent = e.target.value + 'px';
@@ -375,6 +422,8 @@ document.querySelectorAll('[data-preset]').forEach(btn => {
});
});
// Event Listeners - Manga
document.getElementById('display-mode').addEventListener('change', (e) => {
config.manga.mode = e.target.value;
saveConfig();
@@ -387,13 +436,6 @@ document.getElementById('image-fit').addEventListener('change', (e) => {
loadChapter();
});
document.getElementById('manga-max-width').addEventListener('input', (e) => {
config.manga.maxWidth = parseInt(e.target.value);
document.getElementById('manga-max-width-value').textContent = e.target.value + 'px';
applyStyles();
saveConfig();
});
document.getElementById('page-spacing').addEventListener('input', (e) => {
config.manga.spacing = parseInt(e.target.value);
document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
@@ -417,16 +459,7 @@ document.querySelectorAll('[data-direction]').forEach(btn => {
});
});
// Quality
document.querySelectorAll('[data-quality]').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('[data-quality]').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
config.manga.quality = btn.dataset.quality;
saveConfig();
});
});
// Navigation
prevBtn.addEventListener('click', () => {
const newChapter = String(parseInt(chapter) - 1);
updateURL(newChapter);
@@ -448,7 +481,12 @@ function updateURL(newChapter) {
}
document.getElementById('back-btn').addEventListener('click', () => {
history.back();
const prev = localStorage.getItem('reader_prev_url');
if (prev) {
window.location.href = prev;
} else {
history.back();
}
});
settingsBtn.addEventListener('click', () => {
@@ -470,30 +508,84 @@ document.addEventListener('keydown', (e) => {
}
});
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
function enableMangaPageNavigation() {
if (currentType !== 'manga') return;
const logicalPages = [];
switch(e.key) {
case 'ArrowLeft':
if (config.manga.direction === 'rtl') {
nextBtn.click();
} else {
prevBtn.click();
}
break;
case 'ArrowRight':
if (config.manga.direction === 'rtl') {
prevBtn.click();
} else {
nextBtn.click();
}
break;
case 's':
case 'S':
settingsBtn.click();
break;
document.querySelectorAll('.manga-container > *').forEach(el => {
if (el.classList.contains('double-container')) {
logicalPages.push(el);
} else if (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'
});
}
});
function getCurrentLogicalIndex() {
let closest = 0;
let minDist = Infinity;
logicalPages.forEach((el, i) => {
const rect = el.getBoundingClientRect();
const dist = Math.abs(rect.top);
if (dist < minDist) {
minDist = dist;
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);
}
});
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);
}
});
}
let resizeTimer;
window.addEventListener('resize', () => {
@@ -506,7 +598,7 @@ window.addEventListener('resize', () => {
if (!bookId || !chapter || !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, chapter, provider)</span>
</div>
`;
} else {