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

4
README.md
View File

@@ -5,8 +5,8 @@ The official recode repo, its private no one should know about this or have the
| Task | Status | Notes | | Task | Status | Notes |
| -----|--------| ------ | | -----|--------| ------ |
| Book Reader | Not Done | N/A | | Book Reader | ✅ | N/A |
| Multi book provider loading | Not Done | N/A | | Multi book provider loading | ✅ | N/A |
| Better Code Organization | Not Done | N/A | | Better Code Organization | Not Done | N/A |
| Mobile View | Not Done | N/A | | Mobile View | Not Done | N/A |
| Gallery | Not Done | N/A | | Gallery | Not Done | N/A |

27
public/book.js
View File

@@ -149,12 +149,12 @@ function populateProviderFilter() {
function renderTable() { function renderTable() {
const tbody = document.getElementById('chapters-body'); const tbody = document.getElementById('chapters-body');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = ''; tbody.innerHTML = '';
if (filteredChapters.length === 0) { if (filteredChapters.length === 0) {
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>'; tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
updatePagination(); // Update to hide buttons updatePagination();
return; return;
} }
@@ -162,19 +162,21 @@ function renderTable() {
const end = start + itemsPerPage; const end = start + itemsPerPage;
const pageItems = filteredChapters.slice(start, end); const pageItems = filteredChapters.slice(start, end);
pageItems.forEach(ch => { pageItems.forEach((ch, idx) => {
const realIndex = start + idx;
const row = document.createElement('tr'); const row = document.createElement('tr');
row.innerHTML = ` row.innerHTML = `
<td>${ch.number}</td> <td>${ch.number}</td>
<td>${ch.title || 'Chapter ' + ch.number}</td> <td>${ch.title || 'Chapter ' + ch.number}</td>
<td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td> <td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
<td> <td>
<button class="read-btn-small" onclick="openReader('${bookId}', '${ch.number - 1}', '${ch.provider}')"> <button class="read-btn-small" onclick="openReader('${bookId}', '${realIndex}', '${ch.provider}')">
Read Read
</button> </button>
</td> </td>
`; `;
tbody.appendChild(row); tbody.appendChild(row);
}); });
@@ -206,6 +208,7 @@ function updatePagination() {
} }
function openReader(bookId, chapterId, provider) { function openReader(bookId, chapterId, provider) {
localStorage.setItem('reader_prev_url', window.location.href);
const c = encodeURIComponent(chapterId); const c = encodeURIComponent(chapterId);
const p = encodeURIComponent(provider); const p = encodeURIComponent(provider);
window.location.href = `/read/${bookId}/${c}/${p}`; window.location.href = `/read/${bookId}/${c}/${p}`;

143
public/reader.css
View File

@@ -141,18 +141,41 @@ body {
height: auto; height: auto;
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
transition: transform 0.3s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: zoom-in; cursor: pointer;
display: block;
} }
.page-img:hover { .page-img:hover {
transform: scale(1.01); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
} }
.page-img.zoomed { .page-img.zoomed {
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
max-width: 100vw;
max-height: calc(100vh - 64px);
width: auto;
height: auto;
margin: auto;
z-index: 999;
cursor: zoom-out;
border-radius: 0;
object-fit: contain;
}
.zoom-overlay {
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 998;
cursor: zoom-out; cursor: zoom-out;
max-width: 100%;
position: relative;
} }
.double-container { .double-container {
@@ -170,12 +193,12 @@ body {
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
object-fit: contain; object-fit: contain;
cursor: zoom-in; cursor: pointer;
transition: transform 0.3s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
.double-container img:hover { .double-container img:hover {
transform: scale(1.02); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
} }
/* ===== LIGHT NOVEL STYLES ===== */ /* ===== LIGHT NOVEL STYLES ===== */
@@ -188,9 +211,6 @@ body {
font-size: var(--ln-font-size, 18px); font-size: var(--ln-font-size, 18px);
font-family: var(--ln-font-family, 'Georgia', serif); font-family: var(--ln-font-family, 'Georgia', serif);
color: var(--ln-text-color, #e5e7eb); color: var(--ln-text-color, #e5e7eb);
background: var(--ln-bg, #14141b);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
text-align: var(--ln-text-align, left); text-align: var(--ln-text-align, left);
} }
@@ -208,19 +228,19 @@ body {
.settings-panel { .settings-panel {
position: fixed; position: fixed;
right: 0; right: 0;
top: 64px; top: 0;
bottom: 0; bottom: 0;
width: 400px; width: 400px;
background: var(--bg-surface);
border-left: 1px solid var(--border);
padding: 0; padding: 0;
z-index: 1001; z-index: 1001;
transform: translateX(100%); transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-lg);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-surface);
border-left: 1px solid var(--border);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
} }
.settings-panel.open { .settings-panel.open {
@@ -230,13 +250,13 @@ body {
.panel-header { .panel-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: var(--bg-elevated);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid var(--border);
z-index: 10; z-index: 10;
background: #0a0a0f;
border-bottom: 1px solid var(--border);
} }
.panel-header h3 { .panel-header h3 {
@@ -246,23 +266,24 @@ body {
} }
.close-btn { .close-btn {
background: var(--bg-surface);
border: 1px solid var(--border);
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
font-size: 1.25rem; font-size: 1.25rem;
cursor: pointer; cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--bg-elevated);
border: none;
color: var(--text-secondary);
} }
.close-btn:hover { .close-btn:hover {
background: var(--bg-hover); background: var(--accent);
color: var(--text-primary); color: var(--text-primary);
transform: rotate(90deg);
} }
.panel-content { .panel-content {
@@ -271,23 +292,34 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.settings-group { .settings-section {
margin-bottom: 2rem; margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
} }
.settings-group h4 { .settings-section:last-child {
margin: 0 0 1rem 0; border-bottom: none;
color: var(--accent); margin-bottom: 0;
font-size: 0.875rem; padding-bottom: 0;
text-transform: uppercase; }
letter-spacing: 0.05em;
font-weight: 600; .settings-section h4 {
margin: 0 0 1.25rem 0;
color: var(--text-primary);
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
} }
.control { .control {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.control:last-child {
margin-bottom: 0;
}
.control label { .control label {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -308,24 +340,24 @@ body {
/* Range Inputs */ /* Range Inputs */
input[type="range"] { input[type="range"] {
width: 100%; width: 100%;
height: 6px;
background: var(--bg-elevated);
border-radius: var(--radius-full); border-radius: var(--radius-full);
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
height: 8px;
background: var(--bg-hover);
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 18px;
height: 18px;
background: var(--accent);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
width: 20px;
height: 20px;
background: var(--accent);
} }
input[type="range"]::-webkit-slider-thumb:hover { input[type="range"]::-webkit-slider-thumb:hover {
@@ -347,13 +379,13 @@ input[type="range"]::-moz-range-thumb {
select, input[type="color"], input[type="number"] { select, input[type="color"], input[type="number"] {
width: 100%; width: 100%;
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-primary); color: var(--text-primary);
font-size: 0.875rem; font-size: 0.875rem;
transition: all 0.2s; transition: all 0.2s;
cursor: pointer; cursor: pointer;
background: var(--bg-elevated);
border: 1px solid var(--border);
} }
select:hover, input[type="color"]:hover, input[type="number"]:hover { select:hover, input[type="color"]:hover, input[type="number"]:hover {
@@ -364,6 +396,7 @@ select:focus, input[type="color"]:focus, input[type="number"]:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-light); box-shadow: 0 0 0 3px var(--accent-light);
transform: translateY(-1px);
} }
input[type="color"] { input[type="color"] {
@@ -380,22 +413,25 @@ input[type="color"] {
} }
.presets button { .presets button {
padding: 0.75rem;
background: var(--bg-elevated); background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-primary); color: var(--text-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
font-weight: 600;
font-size: 0.875rem; font-size: 0.875rem;
padding: 1rem;
background: var(--bg-elevated);
border: 1px solid var(--border);
font-weight: 700;
letter-spacing: 0.02em;
} }
.presets button:hover { .presets button:hover {
background: var(--accent);
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: 0 4px 15px var(--accent-light);
} }
/* Toggle Switches */ /* Toggle Switches */
@@ -407,16 +443,17 @@ input[type="color"] {
.toggle-btn { .toggle-btn {
flex: 1; flex: 1;
padding: 0.5rem 1rem;
background: var(--bg-elevated); background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500;
text-align: center; text-align: center;
padding: 0.75rem 1rem;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-weight: 600;
} }
.toggle-btn:hover { .toggle-btn:hover {
@@ -427,7 +464,8 @@ input[type="color"] {
.toggle-btn.active { .toggle-btn.active {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
color: white; color: var(--text-primary);
box-shadow: 0 2px 10px var(--accent-light);
} }
/* Overlay */ /* Overlay */
@@ -435,7 +473,6 @@ input[type="color"] {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.75); background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@@ -472,13 +509,6 @@ input[type="color"] {
color: var(--text-secondary); color: var(--text-secondary);
} }
/* Divider */
.divider {
height: 1px;
background: var(--border);
margin: 1.5rem 0;
}
/* Scrollbar */ /* Scrollbar */
.settings-panel::-webkit-scrollbar { .settings-panel::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -552,4 +582,11 @@ input[type="color"] {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
object-fit: contain !important; object-fit: contain !important;
}
.page-img.longstrip-fit {
width: 50%;
max-width: 50%;
margin: 0 auto;
display: block;
} }

280
public/reader.js
View File

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

219
views/reader.html
View File

@@ -12,7 +12,7 @@
<!-- Top Bar --> <!-- Top Bar -->
<header class="top-bar"> <header class="top-bar">
<button id="back-btn" class="glass-btn"> <button id="back-btn" class="glass-btn">
X ← Back
</button> </button>
<div class="chapter-info"> <div class="chapter-info">
@@ -35,142 +35,135 @@
<div class="panel-content"> <div class="panel-content">
<!-- Light Novel Settings --> <!-- Light Novel Settings -->
<div id="ln-settings" class="settings-group hidden"> <div id="ln-settings" class="hidden">
<h4>Text Settings</h4> <!-- Typography -->
<div class="settings-section">
<h4>Typography</h4>
<div class="control"> <div class="control">
<label> <label>
Font Size Font Size
<span id="font-size-value">18px</span> <span id="font-size-value">18px</span>
</label> </label>
<input type="range" id="font-size" min="12" max="40" value="18" step="1"> <input type="range" id="font-size" min="12" max="40" value="18" step="1">
</div> </div>
<div class="control"> <div class="control">
<label> <label>
Line Height Line Height
<span id="line-height-value">1.8</span> <span id="line-height-value">1.8</span>
</label> </label>
<input type="range" id="line-height" min="1.2" max="3" step="0.1" value="1.8"> <input type="range" id="line-height" min="1.2" max="3" step="0.1" value="1.8">
</div> </div>
<div class="control"> <div class="control">
<label> <label>
Content Width Content Width
<span id="max-width-value">750px</span> <span id="max-width-value">750px</span>
</label> </label>
<input type="range" id="max-width" min="500" max="1200" value="750" step="50"> <input type="range" id="max-width" min="500" max="1200" value="750" step="50">
</div> </div>
<div class="control"> <div class="control">
<label>Font Family</label> <label>Font Family</label>
<select id="font-family"> <select id="font-family">
<option value='"Georgia", serif'>Georgia (Serif)</option> <option value='"Georgia", serif'>Georgia (Serif)</option>
<option value='"Charter", serif'>Charter (Serif)</option> <option value='"Charter", serif'>Charter (Serif)</option>
<option value='"Merriweather", serif'>Merriweather</option> <option value='"Merriweather", serif'>Merriweather</option>
<option value='"Inter", system-ui, sans-serif'>Inter (Sans)</option> <option value='"Inter", system-ui, sans-serif'>Inter (Sans)</option>
<option value='system-ui, sans-serif'>System UI</option> <option value='system-ui, sans-serif'>System UI</option>
<option value='"JetBrains Mono", monospace'>JetBrains Mono</option> <option value='"JetBrains Mono", monospace'>JetBrains Mono</option>
</select> </select>
</div> </div>
<div class="control"> <div class="control">
<label>Text Alignment</label> <label>Text Alignment</label>
<div class="toggle-group"> <div class="toggle-group">
<button class="toggle-btn" data-align="left">Left</button> <button class="toggle-btn" data-align="left">Left</button>
<button class="toggle-btn active" data-align="justify">Justify</button> <button class="toggle-btn active" data-align="justify">Justify</button>
<button class="toggle-btn" data-align="center">Center</button> <button class="toggle-btn" data-align="center">Center</button>
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <!-- Color Theme -->
<div class="settings-section">
<h4>Color Theme</h4>
<h4>🎨 Color Theme</h4> <div class="control">
<label>Text Color</label>
<input type="color" id="text-color" value="#e5e7eb">
</div>
<div class="control"> <div class="control">
<label>Text Color</label> <label>Background Color</label>
<input type="color" id="text-color" value="#e5e7eb"> <input type="color" id="bg-color" value="#14141b">
</div> </div>
<div class="control"> <div class="presets">
<label>Background Color</label> <button data-preset="dark">Dark</button>
<input type="color" id="bg-color" value="#14141b"> <button data-preset="sepia">Sepia</button>
</div> <button data-preset="light">Light</button>
<button data-preset="amoled">AMOLED</button>
<div class="presets"> </div>
<button data-preset="dark">Dark</button>
<button data-preset="sepia">Sepia</button>
<button data-preset="light">Light</button>
<button data-preset="amoled">AMOLED</button>
</div> </div>
</div> </div>
<!-- Manga Settings --> <!-- Manga Settings -->
<div id="manga-settings" class="settings-group hidden"> <div id="manga-settings" class="hidden">
<h4>Display Mode</h4> <!-- Display -->
<div class="settings-section">
<h4>Display</h4>
<div class="control"> <div class="control">
<label>Layout Mode</label> <label>Layout Mode</label>
<select id="display-mode"> <select id="display-mode">
<option value="auto">Auto Detect</option> <option value="auto">Auto Detect</option>
<option value="single">Single Page</option> <option value="single">Single Page</option>
<option value="double">Double Page</option> <option value="double">Double Page</option>
<option value="longstrip">Long Strip</option> <option value="longstrip">Long Strip</option>
</select> </select>
</div> </div>
<div class="control"> <div class="control">
<label>Reading Direction</label> <label>Reading Direction</label>
<div class="toggle-group"> <div class="toggle-group">
<button class="toggle-btn" data-direction="ltr">← LTR</button> <button class="toggle-btn" data-direction="ltr">← LTR</button>
<button class="toggle-btn active" data-direction="rtl">RTL →</button> <button class="toggle-btn active" data-direction="rtl">RTL →</button>
</div>
</div>
<div class="control">
<label>Image Fit</label>
<select id="image-fit">
<option value="width">Fit Width</option>
<option value="height">Fit Height</option>
<option value="screen" selected>Fit Screen</option>
</select>
</div> </div>
</div> </div>
<div class="divider"></div> <!-- Appearance -->
<div class="settings-section">
<h4>Appearance</h4>
<h4>Image Settings</h4> <div class="control">
<label>
<div class="control"> Page Spacing
<label>Image Fit</label> <span id="page-spacing-value">16px</span>
<select id="image-fit"> </label>
<option value="width">Fit Width</option> <input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
<option value="height">Fit Height</option>
<option value="screen" selected>Fit Screen</option>
</select>
</div>
<div class="control">
<label>
Max Image Width
<span id="manga-max-width-value">900px</span>
</label>
<input type="range" id="manga-max-width" min="600" max="1600" value="900" step="50">
</div>
<div class="control">
<label>
Page Spacing
<span id="page-spacing-value">16px</span>
</label>
<input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
</div>
<div class="divider"></div>
<h4>⚡ Performance</h4>
<div class="control">
<label>Image Quality</label>
<div class="toggle-group">
<button class="toggle-btn" data-quality="low">Low</button>
<button class="toggle-btn active" data-quality="high">High</button>
</div> </div>
</div> </div>
<div class="control"> <!-- Performance -->
<label>Preload Pages</label> <div class="settings-section">
<input type="number" id="preload-count" min="0" max="10" value="3"> <h4>Performance</h4>
<div class="control">
<label>Preload Pages</label>
<input type="number" id="preload-count" min="0" max="10" value="3">
</div>
</div> </div>
</div> </div>
</div> </div>