diff --git a/src/App.css b/src/App.css index df915c8..90f9fdd 100644 --- a/src/App.css +++ b/src/App.css @@ -537,21 +537,39 @@ kbd { } .manga-page img { - max-width: 100%; - max-height: 100%; object-fit: contain; display: block; pointer-events: none; } -.fit-width .manga-page img { +/* Allow Upscale Mode (Default: stretch to fill container) */ +.manga-page.allow-upscale.fit-width img { width: 100%; height: auto; + max-width: none; + max-height: none; } -.fit-height .manga-page img { +.manga-page.allow-upscale.fit-height img { height: 100%; width: auto; + max-width: none; + max-height: none; +} + +/* No Upscale Mode (Limit max dimensions to native image size) */ +.manga-page.no-upscale.fit-width img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} + +.manga-page.no-upscale.fit-height img { + height: auto; + max-height: 100%; + width: auto; + max-width: 100%; } /* Page loading / error states */ diff --git a/src/components/MangaPage.tsx b/src/components/MangaPage.tsx index 3c27e8c..a9d44ad 100644 --- a/src/components/MangaPage.tsx +++ b/src/components/MangaPage.tsx @@ -5,10 +5,11 @@ interface MangaPageProps { imageUrl: string; referer: string; fitMode: FitMode; + allowUpscale?: boolean; fetchImage: (url: string, referer: string) => Promise; } -export function MangaPage({ imageUrl, referer, fitMode, fetchImage }: MangaPageProps) { +export function MangaPage({ imageUrl, referer, fitMode, allowUpscale = true, fetchImage }: MangaPageProps) { const [src, setSrc] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); @@ -44,6 +45,8 @@ export function MangaPage({ imageUrl, referer, fitMode, fetchImage }: MangaPageP original: 'fit-original', }[fitMode]; + const upscaleClass = allowUpscale ? 'allow-upscale' : 'no-upscale'; + if (loading) { return (
@@ -70,7 +73,7 @@ export function MangaPage({ imageUrl, referer, fitMode, fetchImage }: MangaPageP } return ( -
+
))} diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx index 242cabc..316bcb2 100644 --- a/src/components/SettingsPanel.tsx +++ b/src/components/SettingsPanel.tsx @@ -138,6 +138,30 @@ export function SettingsPanel({ settings, totalImages, onChange, onClose }: Sett
+ {/* Upscale Mode */} +
+ +
+ + +
+
+ {/* Background Color */}
diff --git a/src/hooks/useViewerSettings.ts b/src/hooks/useViewerSettings.ts index 24639fc..7cb1293 100644 --- a/src/hooks/useViewerSettings.ts +++ b/src/hooks/useViewerSettings.ts @@ -7,6 +7,7 @@ const defaultSettings: ViewerSettings = { mode: 'spread', direction: 'ltr', fitMode: 'width', + allowUpscale: true, backgroundColor: 'black', spreadStartOffset: 0, }; diff --git a/src/types.ts b/src/types.ts index 71890e4..7c30b98 100644 --- a/src/types.ts +++ b/src/types.ts @@ -15,6 +15,7 @@ export interface ViewerSettings { mode: ViewerMode; direction: ReadingDirection; fitMode: FitMode; + allowUpscale: boolean; backgroundColor: BackgroundColor; /** 0-indexed page that starts the first "paired" spread. Pages before this are shown solo. */ spreadStartOffset: number;