diff --git a/src/app/pdf/[id]/page.tsx b/src/app/pdf/[id]/page.tsx
index 1057f23..fca825c 100644
--- a/src/app/pdf/[id]/page.tsx
+++ b/src/app/pdf/[id]/page.tsx
@@ -8,6 +8,8 @@ import { useCallback, useEffect, useState } from 'react';
import { PDFSkeleton } from '@/components/PDFSkeleton';
import { useTTS } from '@/contexts/TTSContext';
import { Button } from '@headlessui/react';
+import { PDFViewSettings } from '@/components/PDFViewSettings';
+import { SettingsIcon } from '@/components/icons/Icons';
// Dynamic import for client-side rendering only
const PDFViewer = dynamic(
@@ -25,6 +27,7 @@ export default function PDFViewerPage() {
const [error, setError] = useState
(null);
const [isLoading, setIsLoading] = useState(true);
const [zoomLevel, setZoomLevel] = useState(100);
+ const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const loadDocument = useCallback(async () => {
if (!isLoading) return; // Prevent calls when not loading new doc
@@ -72,7 +75,7 @@ export default function PDFViewerPage() {
<>
-
+
{clearCurrDoc(); stop();}}
@@ -100,6 +103,14 @@ export default function PDFViewerPage() {
＋
+
{isLoading ? 'Loading...' : currDocName}
@@ -113,6 +124,7 @@ export default function PDFViewerPage() {
) : (
)}
+
);
}
diff --git a/src/components/PDFViewSettings.tsx b/src/components/PDFViewSettings.tsx
new file mode 100644
index 0000000..b32ae03
--- /dev/null
+++ b/src/components/PDFViewSettings.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { Fragment } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
+import { useConfig, ViewType } from '@/contexts/ConfigContext';
+import { ChevronUpDownIcon, CheckIcon } from '@/components/icons/Icons';
+
+interface PDFViewSettingsProps {
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+}
+
+const viewTypes = [
+ { id: 'single', name: 'Single Page' },
+ { id: 'dual', name: 'Two Pages' },
+ { id: 'scroll', name: 'Continuous Scroll' },
+];
+
+export function PDFViewSettings({ isOpen, setIsOpen }: PDFViewSettingsProps) {
+ const { viewType, updateConfigKey } = useConfig();
+ const selectedView = viewTypes.find(v => v.id === viewType) || viewTypes[0];
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/PDFViewer.tsx b/src/components/PDFViewer.tsx
index e07b6cf..314bb82 100644
--- a/src/components/PDFViewer.tsx
+++ b/src/components/PDFViewer.tsx
@@ -8,6 +8,7 @@ import { PDFSkeleton } from './PDFSkeleton';
import { useTTS } from '@/contexts/TTSContext';
import { usePDF } from '@/contexts/PDFContext';
import TTSPlayer from '@/components/player/TTSPlayer';
+import { useConfig } from '@/contexts/ConfigContext';
interface PDFViewerProps {
zoomLevel: number;
@@ -17,6 +18,9 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
const [containerWidth, setContainerWidth] = useState(0);
const containerRef = useRef(null);
+ // Config context
+ const { viewType } = useConfig();
+
// TTS context
const {
currentSentence,
@@ -112,21 +116,36 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
const [pageWidth, setPageWidth] = useState(595); // default A4 width
const [pageHeight, setPageHeight] = useState(842); // default A4 height
- // Modify scale calculation function to handle orientation
+ // Calculate which pages to show based on viewType
+ const leftPage = viewType === 'dual'
+ ? (currDocPage % 2 === 0 ? currDocPage - 1 : currDocPage)
+ : currDocPage;
+ const rightPage = viewType === 'dual'
+ ? (currDocPage % 2 === 0 ? currDocPage : currDocPage + 1)
+ : null;
+
+ // Modify scale calculation to account for view type
const calculateScale = useCallback((width = pageWidth, height = pageHeight): number => {
- const margin = 24; // 24px padding on each side
- const containerHeight = window.innerHeight - 100; // approximate visible height
- const targetWidth = containerWidth - margin;
+ const margin = viewType === 'dual' ? 48 : 24; // adjust margin based on view type
+ const containerHeight = window.innerHeight - 100;
+ const targetWidth = viewType === 'dual'
+ ? (containerWidth - margin) / 2 // divide by 2 for dual pages
+ : containerWidth - margin;
const targetHeight = containerHeight - margin;
- // Calculate scales based on both dimensions
+ if (viewType === 'scroll') {
+ // For scroll mode, use a more comfortable width-based scale
+ // Use 75% of the width-based scale to make it less zoomed in
+ const scaleByWidth = (targetWidth / width) * 0.75;
+ return scaleByWidth * (zoomLevel / 100);
+ }
+
const scaleByWidth = targetWidth / width;
const scaleByHeight = targetHeight / height;
- // Use the smaller scale to ensure the page fits both dimensions
const baseScale = Math.min(scaleByWidth, scaleByHeight);
return baseScale * (zoomLevel / 100);
- }, [containerWidth, zoomLevel, pageWidth, pageHeight]);
+ }, [containerWidth, zoomLevel, pageWidth, pageHeight, viewType]);
// Add resize observer effect
useEffect(() => {
@@ -151,24 +170,61 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
file={currDocURL}
onLoadSuccess={(pdf) => {
onDocumentLoadSuccess(pdf);
- //handlePageChange(1); // Load first page text
}}
className="flex flex-col items-center m-0"
>
-
-
{
- setPageWidth(page.originalWidth);
- setPageHeight(page.originalHeight);
- }}
- />
-
+ {viewType === 'scroll' ? (
+ // Scroll mode: render all pages
+
+ {currDocPages && [...Array(currDocPages)].map((_, i) => (
+
{
+ setPageWidth(page.originalWidth);
+ setPageHeight(page.originalHeight);
+ }}
+ />
+ ))}
+
+ ) : (
+ // Single/Dual page mode
+
+ {currDocPages && leftPage > 0 && (
+
{
+ setPageWidth(page.originalWidth);
+ setPageHeight(page.originalHeight);
+ }}
+ />
+ )}
+ {currDocPages && rightPage && rightPage <= currDocPages && viewType === 'dual' && (
+ {
+ setPageWidth(page.originalWidth);
+ setPageHeight(page.originalHeight);
+ }}
+ />
+ )}
+
+ )}