added reader
This commit is contained in:
515
public/reader.js
Normal file
515
public/reader.js
Normal file
@@ -0,0 +1,515 @@
|
||||
const reader = document.getElementById('reader');
|
||||
const panel = document.getElementById('settings-panel');
|
||||
const overlay = document.getElementById('overlay');
|
||||
const settingsBtn = document.getElementById('settings-btn');
|
||||
const closePanel = document.getElementById('close-panel');
|
||||
const chapterLabel = document.getElementById('chapter-label');
|
||||
const prevBtn = document.getElementById('prev-chapter');
|
||||
const nextBtn = document.getElementById('next-chapter');
|
||||
|
||||
const lnSettings = document.getElementById('ln-settings');
|
||||
const mangaSettings = document.getElementById('manga-settings');
|
||||
|
||||
const config = {
|
||||
ln: {
|
||||
fontSize: 18,
|
||||
lineHeight: 1.8,
|
||||
maxWidth: 750,
|
||||
fontFamily: '"Georgia", serif',
|
||||
textColor: '#e5e7eb',
|
||||
bg: '#14141b',
|
||||
textAlign: 'justify'
|
||||
},
|
||||
manga: {
|
||||
direction: 'rtl',
|
||||
mode: 'auto',
|
||||
spacing: 16,
|
||||
imageFit: 'screen',
|
||||
maxWidth: 900,
|
||||
quality: 'high',
|
||||
preloadCount: 3
|
||||
}
|
||||
};
|
||||
|
||||
let currentType = null;
|
||||
let currentPages = [];
|
||||
let observer = null;
|
||||
|
||||
const parts = window.location.pathname.split('/');
|
||||
|
||||
const bookId = parts[2];
|
||||
let chapter = parts[3];
|
||||
let provider = parts[4];
|
||||
|
||||
function loadConfig() {
|
||||
try {
|
||||
const saved = localStorage.getItem('readerConfig');
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
Object.assign(config.ln, parsed.ln || {});
|
||||
Object.assign(config.manga, parsed.manga || {});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error loading config:', e);
|
||||
}
|
||||
updateUIFromConfig();
|
||||
}
|
||||
|
||||
function saveConfig() {
|
||||
try {
|
||||
localStorage.setItem('readerConfig', JSON.stringify(config));
|
||||
} catch (e) {
|
||||
console.error('Error saving config:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function updateUIFromConfig() {
|
||||
// Light Novel
|
||||
document.getElementById('font-size').value = config.ln.fontSize;
|
||||
document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
|
||||
|
||||
document.getElementById('line-height').value = config.ln.lineHeight;
|
||||
document.getElementById('line-height-value').textContent = config.ln.lineHeight;
|
||||
|
||||
document.getElementById('max-width').value = config.ln.maxWidth;
|
||||
document.getElementById('max-width-value').textContent = config.ln.maxWidth + 'px';
|
||||
|
||||
document.getElementById('font-family').value = config.ln.fontFamily;
|
||||
document.getElementById('text-color').value = config.ln.textColor;
|
||||
document.getElementById('bg-color').value = config.ln.bg;
|
||||
|
||||
// Text alignment buttons
|
||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
||||
});
|
||||
|
||||
// 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;
|
||||
|
||||
// Direction buttons
|
||||
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() {
|
||||
if (currentType === 'ln') {
|
||||
document.documentElement.style.setProperty('--ln-font-size', config.ln.fontSize + 'px');
|
||||
document.documentElement.style.setProperty('--ln-line-height', config.ln.lineHeight);
|
||||
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('--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');
|
||||
|
||||
const viewportHeight = window.innerHeight - 64 - 32; // header + padding
|
||||
document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
function updateSettingsVisibility() {
|
||||
lnSettings.classList.toggle('hidden', currentType !== 'ln');
|
||||
mangaSettings.classList.toggle('hidden', currentType !== 'manga');
|
||||
}
|
||||
|
||||
async function loadChapter() {
|
||||
reader.innerHTML = `
|
||||
<div class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<span>Loading chapter...</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/book/${bookId}/${chapter}/${provider}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.title) {
|
||||
chapterLabel.textContent = data.title;
|
||||
document.title = data.title;
|
||||
} else {
|
||||
chapterLabel.textContent = `Chapter ${chapter}`;
|
||||
document.title = `Chapter ${chapter}`;
|
||||
}
|
||||
|
||||
if (data.error) {
|
||||
reader.innerHTML = `
|
||||
<div class="loading-container">
|
||||
<span style="color: #ef4444;">Error: ${data.error}</span>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
currentType = data.type;
|
||||
updateSettingsVisibility();
|
||||
applyStyles();
|
||||
reader.innerHTML = '';
|
||||
|
||||
if (data.type === 'manga') {
|
||||
currentPages = data.pages || [];
|
||||
loadManga(currentPages);
|
||||
} else if (data.type === 'ln') {
|
||||
loadLN(data.content);
|
||||
}
|
||||
} catch (error) {
|
||||
reader.innerHTML = `
|
||||
<div class="loading-container">
|
||||
<span style="color: #ef4444;">❌ Error loading chapter: ${error.message}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function loadManga(pages) {
|
||||
if (!pages || pages.length === 0) {
|
||||
reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'manga-container';
|
||||
|
||||
const isLongStrip = config.manga.mode === 'longstrip' ||
|
||||
(config.manga.mode === 'auto' && detectLongStrip(pages));
|
||||
|
||||
const useDouble = config.manga.mode === 'double' ||
|
||||
(config.manga.mode === 'auto' && !isLongStrip && pages.length > 5);
|
||||
|
||||
if (useDouble) {
|
||||
loadDoublePage(container, pages);
|
||||
} else {
|
||||
loadSinglePage(container, pages);
|
||||
}
|
||||
|
||||
reader.appendChild(container);
|
||||
setupLazyLoading();
|
||||
}
|
||||
|
||||
function loadSinglePage(container, pages) {
|
||||
pages.forEach((page, index) => {
|
||||
const img = createImageElement(page.url, 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';
|
||||
|
||||
const leftPage = createImageElement(pages[i].url, i);
|
||||
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
doubleContainer.appendChild(leftPage);
|
||||
}
|
||||
|
||||
container.appendChild(doubleContainer);
|
||||
}
|
||||
}
|
||||
|
||||
function createImageElement(url, 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');
|
||||
}
|
||||
|
||||
// Preload o lazy load
|
||||
if (index < config.manga.preloadCount) {
|
||||
img.src = buildProxyUrl(url);
|
||||
} else {
|
||||
img.dataset.src = buildProxyUrl(url);
|
||||
img.loading = 'lazy';
|
||||
}
|
||||
|
||||
img.alt = `Page ${index + 1}`;
|
||||
|
||||
return img;
|
||||
}
|
||||
|
||||
function buildProxyUrl(url) {
|
||||
return `/api/proxy?url=${encodeURIComponent(url)}&referer=https%3A%2F%2Fmangapark.net`;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function setupLazyLoading() {
|
||||
if (observer) observer.disconnect();
|
||||
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
delete img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '200px'
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
|
||||
}
|
||||
|
||||
function loadLN(html) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'ln-content';
|
||||
div.innerHTML = html;
|
||||
reader.appendChild(div);
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
document.getElementById('font-family').addEventListener('change', (e) => {
|
||||
config.ln.fontFamily = e.target.value;
|
||||
applyStyles();
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
document.getElementById('text-color').addEventListener('change', (e) => {
|
||||
config.ln.textColor = e.target.value;
|
||||
applyStyles();
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
document.getElementById('bg-color').addEventListener('change', (e) => {
|
||||
config.ln.bg = e.target.value;
|
||||
applyStyles();
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
// Text alignment
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// Presets
|
||||
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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('display-mode').addEventListener('change', (e) => {
|
||||
config.manga.mode = e.target.value;
|
||||
saveConfig();
|
||||
loadChapter();
|
||||
});
|
||||
|
||||
document.getElementById('image-fit').addEventListener('change', (e) => {
|
||||
config.manga.imageFit = e.target.value;
|
||||
saveConfig();
|
||||
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';
|
||||
applyStyles();
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
document.getElementById('preload-count').addEventListener('change', (e) => {
|
||||
config.manga.preloadCount = parseInt(e.target.value);
|
||||
saveConfig();
|
||||
});
|
||||
|
||||
// Direction
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// 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();
|
||||
});
|
||||
});
|
||||
|
||||
prevBtn.addEventListener('click', () => {
|
||||
const newChapter = String(parseInt(chapter) - 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 newUrl = `/reader/${bookId}/${chapter}/${provider}`;
|
||||
window.history.pushState({}, '', newUrl);
|
||||
}
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => {
|
||||
history.back();
|
||||
});
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
panel.classList.add('open');
|
||||
overlay.classList.add('active');
|
||||
});
|
||||
|
||||
closePanel.addEventListener('click', closeSettings);
|
||||
overlay.addEventListener('click', closeSettings);
|
||||
|
||||
function closeSettings() {
|
||||
panel.classList.remove('open');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && panel.classList.contains('open')) {
|
||||
closeSettings();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
applyStyles();
|
||||
}, 250);
|
||||
});
|
||||
|
||||
if (!bookId || !chapter || !provider) {
|
||||
reader.innerHTML = `
|
||||
<div class="loading-container">
|
||||
<span style="color: #ef4444;"> Missing required parameters (bookId, chapter, provider)</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
loadConfig();
|
||||
loadChapter();
|
||||
}
|
||||
Reference in New Issue
Block a user