|
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
|
import type { ViewerSettings } from '../types';
|
|
|
import type { ChapterData } from '../types';
|
|
|
import { MangaPage } from './MangaPage';
|
|
|
import { ViewerToolbar } from './ViewerToolbar';
|
|
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
|
|
import { SettingsPanel } from './SettingsPanel';
|
|
|
|
|
|
interface MangaViewerProps {
|
|
|
chapter: ChapterData;
|
|
|
currentUrl: string;
|
|
|
settings: ViewerSettings;
|
|
|
onSettingsChange: (s: Partial<ViewerSettings>) => void;
|
|
|
onNavigate: (url: string | null) => void;
|
|
|
onGoHome: () => void;
|
|
|
fetchImage: (url: string, referer: string) => Promise<string>;
|
|
|
isNavigating: boolean;
|
|
|
navError: string | null;
|
|
|
needsAttention: boolean;
|
|
|
}
|
|
|
|
|
|
function buildSlots(images: string[], offset: number): Array<string[]> {
|
|
|
const slots: Array<string[]> = [];
|
|
|
let i = 0;
|
|
|
|
|
|
// Pages before offset: single
|
|
|
while (i < offset && i < images.length) {
|
|
|
slots.push([images[i]]);
|
|
|
i++;
|
|
|
}
|
|
|
|
|
|
// Remaining pages: pairs in natural order [Page N, Page N+1]
|
|
|
while (i < images.length) {
|
|
|
if (i + 1 < images.length) {
|
|
|
slots.push([images[i], images[i + 1]]);
|
|
|
i += 2;
|
|
|
} else {
|
|
|
slots.push([images[i]]);
|
|
|
i++;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return slots;
|
|
|
}
|
|
|
|
|
|
export function MangaViewer({
|
|
|
chapter,
|
|
|
currentUrl,
|
|
|
settings,
|
|
|
onSettingsChange,
|
|
|
onNavigate,
|
|
|
onGoHome,
|
|
|
fetchImage,
|
|
|
isNavigating,
|
|
|
navError,
|
|
|
needsAttention,
|
|
|
}: MangaViewerProps) {
|
|
|
const [slotIndex, setSlotIndex] = useState(0);
|
|
|
const [showToolbar, setShowToolbar] = useState(true);
|
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
|
const [dismissNavError, setDismissNavError] = useState(false);
|
|
|
const [boundaryWarning, setBoundaryWarning] = useState<'first' | 'last' | null>(null);
|
|
|
const toolbarTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
useEffect(() => {
|
|
|
setDismissNavError(false);
|
|
|
if (!navError) return;
|
|
|
const t = setTimeout(() => setDismissNavError(true), 6000);
|
|
|
return () => clearTimeout(t);
|
|
|
}, [navError]);
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
const handleFullscreenChange = () => {
|
|
|
setIsFullscreen(!!document.fullscreenElement);
|
|
|
};
|
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
}, []);
|
|
|
|
|
|
const slots =
|
|
|
settings.mode === 'spread'
|
|
|
? buildSlots(chapter.images, settings.spreadStartOffset)
|
|
|
: chapter.images.map((img) => [img]);
|
|
|
|
|
|
const totalSlots = slots.length;
|
|
|
const currentSlot = slots[slotIndex] ?? [];
|
|
|
|
|
|
// Compute global page numbers for display
|
|
|
const firstPageNum = slotIndex === 0
|
|
|
? (settings.mode === 'spread' ? 0 : 0)
|
|
|
: slots.slice(0, slotIndex).reduce((acc, s) => acc + s.length, 0);
|
|
|
|
|
|
const displayPage = firstPageNum + 1;
|
|
|
const totalPages = chapter.images.length;
|
|
|
|
|
|
// Reset state on new chapter
|
|
|
useEffect(() => {
|
|
|
setSlotIndex(0);
|
|
|
setShowSettings(false);
|
|
|
setBoundaryWarning(null);
|
|
|
}, [currentUrl]);
|
|
|
|
|
|
// Preload all images in the background so page turns are instant
|
|
|
useEffect(() => {
|
|
|
if (!chapter.images.length) return;
|
|
|
let cancelled = false;
|
|
|
const ref = new URL(currentUrl).origin;
|
|
|
// Fire off all fetches concurrently; fetchImage caches results
|
|
|
// so subsequent MangaPage renders will get instant cache hits.
|
|
|
chapter.images.forEach((imgUrl) => {
|
|
|
if (!cancelled) {
|
|
|
fetchImage(imgUrl, ref).catch(() => {}); // swallow errors – page will retry on its own
|
|
|
}
|
|
|
});
|
|
|
return () => { cancelled = true; };
|
|
|
}, [chapter.images, currentUrl, fetchImage]);
|
|
|
|
|
|
const goNext = useCallback(() => {
|
|
|
if (slotIndex < totalSlots - 1) {
|
|
|
setSlotIndex((i) => i + 1);
|
|
|
setBoundaryWarning(null);
|
|
|
} else if (chapter.next_chapter) {
|
|
|
if (boundaryWarning === 'last') {
|
|
|
onNavigate(chapter.next_chapter);
|
|
|
} else {
|
|
|
setBoundaryWarning('last');
|
|
|
}
|
|
|
}
|
|
|
}, [slotIndex, totalSlots, chapter.next_chapter, boundaryWarning, onNavigate]);
|
|
|
|
|
|
const goPrev = useCallback(() => {
|
|
|
if (slotIndex > 0) {
|
|
|
setSlotIndex((i) => i - 1);
|
|
|
setBoundaryWarning(null);
|
|
|
} else if (chapter.prev_chapter) {
|
|
|
if (boundaryWarning === 'first') {
|
|
|
onNavigate(chapter.prev_chapter);
|
|
|
} else {
|
|
|
setBoundaryWarning('first');
|
|
|
}
|
|
|
}
|
|
|
}, [slotIndex, chapter.prev_chapter, boundaryWarning, onNavigate]);
|
|
|
|
|
|
// Keyboard navigation
|
|
|
useEffect(() => {
|
|
|
const handler = (e: KeyboardEvent) => {
|
|
|
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
|
|
|
switch (e.key) {
|
|
|
case 'ArrowRight':
|
|
|
e.preventDefault();
|
|
|
goNext();
|
|
|
break;
|
|
|
case 'ArrowLeft':
|
|
|
e.preventDefault();
|
|
|
goPrev();
|
|
|
break;
|
|
|
case 'f':
|
|
|
case 'F':
|
|
|
toggleFullscreen();
|
|
|
break;
|
|
|
case 's':
|
|
|
case 'S':
|
|
|
setShowSettings((v) => !v);
|
|
|
break;
|
|
|
case 'Escape':
|
|
|
if (showSettings) setShowSettings(false);
|
|
|
break;
|
|
|
}
|
|
|
};
|
|
|
window.addEventListener('keydown', handler);
|
|
|
return () => window.removeEventListener('keydown', handler);
|
|
|
}, [goNext, goPrev, showSettings, settings.direction, toggleFullscreen]);
|
|
|
|
|
|
// Auto-hide toolbar
|
|
|
const resetToolbarTimer = useCallback(() => {
|
|
|
setShowToolbar(true);
|
|
|
if (toolbarTimer.current) clearTimeout(toolbarTimer.current);
|
|
|
toolbarTimer.current = setTimeout(() => {
|
|
|
if (!showSettings) setShowToolbar(false);
|
|
|
}, 3000);
|
|
|
}, [showSettings]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
resetToolbarTimer();
|
|
|
return () => {
|
|
|
if (toolbarTimer.current) clearTimeout(toolbarTimer.current);
|
|
|
};
|
|
|
}, []);
|
|
|
|
|
|
const toggleFullscreen = useCallback(async () => {
|
|
|
try {
|
|
|
const win = getCurrentWindow();
|
|
|
const current = await win.isFullscreen();
|
|
|
const nextState = !current;
|
|
|
await win.setFullscreen(nextState);
|
|
|
setIsFullscreen(nextState);
|
|
|
} catch (e) {
|
|
|
console.error('Failed to toggle fullscreen', e);
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
const bgMap = {
|
|
|
black: '#000000',
|
|
|
white: '#f8f8f8',
|
|
|
gray: '#1a1a1a',
|
|
|
};
|
|
|
|
|
|
// Click zones: left third = prev, right third = next, middle = toggle toolbar
|
|
|
const handleZoneClick = (e: React.MouseEvent) => {
|
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
|
const x = e.clientX - rect.left;
|
|
|
const third = rect.width / 3;
|
|
|
if (x < third) {
|
|
|
goPrev();
|
|
|
} else if (x > third * 2) {
|
|
|
goNext();
|
|
|
} else {
|
|
|
setShowToolbar((v) => !v);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const referer = new URL(currentUrl).origin;
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
ref={containerRef}
|
|
|
className="manga-viewer"
|
|
|
style={{ backgroundColor: bgMap[settings.backgroundColor] }}
|
|
|
onMouseMove={resetToolbarTimer}
|
|
|
onClick={handleZoneClick}
|
|
|
>
|
|
|
{/* Toolbar */}
|
|
|
<ViewerToolbar
|
|
|
visible={showToolbar}
|
|
|
title={chapter.title}
|
|
|
currentPage={displayPage}
|
|
|
totalPages={totalPages}
|
|
|
currentSlot={slotIndex}
|
|
|
totalSlots={totalSlots}
|
|
|
hasPrev={slotIndex > 0 || !!chapter.prev_chapter}
|
|
|
hasNext={slotIndex < totalSlots - 1 || !!chapter.next_chapter}
|
|
|
settings={settings}
|
|
|
isFullscreen={isFullscreen}
|
|
|
onPrevChapter={() => onNavigate(chapter.prev_chapter)}
|
|
|
onNextChapter={() => onNavigate(chapter.next_chapter)}
|
|
|
onToggleSettings={() => setShowSettings((v) => !v)}
|
|
|
onToggleFullscreen={toggleFullscreen}
|
|
|
onGoHome={onGoHome}
|
|
|
onSettingsChange={onSettingsChange}
|
|
|
/>
|
|
|
|
|
|
{/* Page navigation arrows (floating in center) */}
|
|
|
<button
|
|
|
className={`page-nav-btn page-nav-prev ${!(slotIndex > 0 || !!chapter.prev_chapter) ? 'disabled' : ''}`}
|
|
|
onClick={(e) => { e.stopPropagation(); goPrev(); }}
|
|
|
disabled={!(slotIndex > 0 || !!chapter.prev_chapter)}
|
|
|
title="이전 페이지 (←)"
|
|
|
style={{ opacity: showToolbar ? 1 : 0, pointerEvents: showToolbar ? 'auto' : 'none' }}
|
|
|
>
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
|
|
<path d="M15 18l-6-6 6-6"/>
|
|
|
</svg>
|
|
|
</button>
|
|
|
<button
|
|
|
className={`page-nav-btn page-nav-next ${!(slotIndex < totalSlots - 1 || !!chapter.next_chapter) ? 'disabled' : ''}`}
|
|
|
onClick={(e) => { e.stopPropagation(); goNext(); }}
|
|
|
disabled={!(slotIndex < totalSlots - 1 || !!chapter.next_chapter)}
|
|
|
title="다음 페이지 (→)"
|
|
|
style={{ opacity: showToolbar ? 1 : 0, pointerEvents: showToolbar ? 'auto' : 'none' }}
|
|
|
>
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
|
|
<path d="M9 18l6-6-6-6"/>
|
|
|
</svg>
|
|
|
</button>
|
|
|
|
|
|
{/* Full-screen Loading Overlay */}
|
|
|
{isNavigating && (
|
|
|
<div className="full-loading-overlay" onClick={(e) => e.stopPropagation()}>
|
|
|
<div className="loading-spinner-large" />
|
|
|
<div className="loading-text">
|
|
|
{needsAttention
|
|
|
? '열린 창에서 사이트 인증(캡차/로그인 등)을 완료해주세요.'
|
|
|
: '챕터를 불러오는 중...'}
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/* Boundary Warning */}
|
|
|
{boundaryWarning && (
|
|
|
<div className="boundary-warning">
|
|
|
{boundaryWarning === 'first' ? '첫 페이지입니다. 이전 화로 이동하려면 한 번 더 누르세요.' : '마지막 페이지입니다. 다음 화로 이동하려면 한 번 더 누르세요.'}
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/* Error Toast */}
|
|
|
{!isNavigating && navError && !dismissNavError && (
|
|
|
<div className="nav-status-toast" onClick={(e) => e.stopPropagation()}>
|
|
|
<div className="error-banner">
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
|
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
|
|
|
</svg>
|
|
|
<span>{navError}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
{/* Page display */}
|
|
|
<div
|
|
|
className={`viewer-stage ${settings.mode === 'spread' && currentSlot.length === 2 ? 'spread-mode' : 'single-mode'}`}
|
|
|
style={{ direction: settings.direction }}
|
|
|
>
|
|
|
{currentSlot.map((imgUrl, idx) => (
|
|
|
<MangaPage
|
|
|
key={imgUrl + idx}
|
|
|
imageUrl={imgUrl}
|
|
|
referer={referer}
|
|
|
fitMode={settings.fitMode}
|
|
|
fetchImage={fetchImage}
|
|
|
/>
|
|
|
))}
|
|
|
</div>
|
|
|
|
|
|
{/* Click zone overlays (visual hints) */}
|
|
|
<div className="click-zones" aria-hidden>
|
|
|
<div className="zone zone-prev" />
|
|
|
<div className="zone zone-middle" />
|
|
|
<div className="zone zone-next" />
|
|
|
</div>
|
|
|
|
|
|
{/* Page progress bar */}
|
|
|
<div className="progress-bar-container">
|
|
|
<div
|
|
|
className="progress-bar"
|
|
|
style={{ width: `${((slotIndex + 1) / totalSlots) * 100}%` }}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
{/* Settings panel */}
|
|
|
{showSettings && (
|
|
|
<SettingsPanel
|
|
|
settings={settings}
|
|
|
totalImages={chapter.images.length}
|
|
|
onChange={onSettingsChange}
|
|
|
onClose={() => setShowSettings(false)}
|
|
|
/>
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
}
|