void;
+ onClose?: () => void;
+ previewFile?: File | null;
+}
+
+const EmbedPdfViewer = ({
+ sidebarsVisible,
+ setSidebarsVisible,
+ onClose,
+ previewFile,
+}: EmbedPdfViewerProps) => {
+ const { t } = useTranslation();
+ const theme = useMantineTheme();
+ const { colorScheme } = useMantineColorScheme();
+
+ // Get current file from FileContext
+ const { selectors } = useFileState();
+ const activeFiles = selectors.getFiles();
+
+ // Determine which file to display
+ const currentFile = React.useMemo(() => {
+ if (previewFile) {
+ return previewFile;
+ } else if (activeFiles.length > 0) {
+ return activeFiles[0]; // Use first file for simplicity
+ }
+ return null;
+ }, [previewFile, activeFiles]);
+
+ // Get file with URL for rendering
+ const fileWithUrl = useFileWithUrl(currentFile);
+
+ // Determine the effective file to display
+ const effectiveFile = React.useMemo(() => {
+ if (previewFile) {
+ // In preview mode, show the preview file
+ if (previewFile.size === 0) {
+ return null;
+ }
+ return { file: previewFile, url: null };
+ } else {
+ return fileWithUrl;
+ }
+ }, [previewFile, fileWithUrl]);
+
+ return (
+
+ {/* Close Button - Only show in preview mode */}
+ {onClose && previewFile && (
+
+
+
+ )}
+
+ {!effectiveFile ? (
+
+ Error: No file provided to viewer
+
+ ) : (
+ <>
+ {/* Tabs for multiple files */}
+ {activeFiles.length > 1 && !previewFile && (
+
+
+ Multiple files loaded - showing first file for now
+
+
+ )}
+
+ {/* EmbedPDF Viewer with Toolbar Overlay */}
+
+
+
+ {/* Bottom Toolbar Overlay */}
+
+
+
{
+ // Placeholder - will implement page navigation later
+ console.log('Navigate to page:', page);
+ }}
+ dualPage={false}
+ onDualPageToggle={() => {
+ // Placeholder - will implement dual page toggle later
+ console.log('Toggle dual page view');
+ }}
+ currentZoom={100}
+ />
+
+
+ );
+};
+
+export default EmbedPdfViewer;
\ No newline at end of file
diff --git a/frontend/src/components/viewer/LocalEmbedPDF.tsx b/frontend/src/components/viewer/LocalEmbedPDF.tsx
new file mode 100644
index 000000000..d354fadcf
--- /dev/null
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@@ -0,0 +1,158 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { createPluginRegistration } from '@embedpdf/core';
+import { EmbedPDF } from '@embedpdf/core/react';
+import { usePdfiumEngine } from '@embedpdf/engines/react';
+
+// Import the essential plugins
+import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
+import { Scroller, ScrollPluginPackage, ScrollStrategy } from '@embedpdf/plugin-scroll/react';
+import { LoaderPluginPackage } from '@embedpdf/plugin-loader/react';
+import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react';
+import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
+import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/react';
+import { ZoomControlsExporter } from './ZoomControlsExporter';
+import { ScrollControlsExporter } from './ScrollControlsExporter';
+
+interface LocalEmbedPDFProps {
+ file?: File | Blob;
+ url?: string | null;
+ colorScheme: 'light' | 'dark' | 'auto';
+}
+
+export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
+ const [pdfUrl, setPdfUrl] = useState
(null);
+
+ // Convert color scheme (handle 'auto' mode by defaulting to 'light')
+ const actualColorScheme = colorScheme === 'auto' ? 'light' : colorScheme;
+
+ // Convert File to URL if needed
+ useEffect(() => {
+ if (file) {
+ const objectUrl = URL.createObjectURL(file);
+ setPdfUrl(objectUrl);
+ return () => URL.revokeObjectURL(objectUrl);
+ } else if (url) {
+ setPdfUrl(url);
+ }
+ }, [file, url]);
+
+ // Create plugins configuration
+ const plugins = useMemo(() => {
+ if (!pdfUrl) return [];
+
+ return [
+ createPluginRegistration(LoaderPluginPackage, {
+ loadingOptions: {
+ type: 'url',
+ pdfFile: {
+ id: 'stirling-pdf-viewer',
+ url: pdfUrl,
+ },
+ },
+ }),
+ createPluginRegistration(ViewportPluginPackage, {
+ viewportGap: 10,
+ }),
+ createPluginRegistration(ScrollPluginPackage, {
+ strategy: ScrollStrategy.Vertical,
+ initialPage: 0,
+ }),
+ createPluginRegistration(RenderPluginPackage),
+
+ // Register interaction manager (required for zoom features)
+ createPluginRegistration(InteractionManagerPluginPackage),
+
+ // Register zoom plugin with configuration
+ createPluginRegistration(ZoomPluginPackage, {
+ defaultZoomLevel: ZoomMode.FitPage,
+ minZoom: 0.2,
+ maxZoom: 5.0,
+ }),
+ ];
+ }, [pdfUrl]);
+
+ // Initialize the engine with the React hook
+ const { engine, isLoading, error } = usePdfiumEngine();
+
+
+ // Early return if no file or URL provided
+ if (!file && !url) {
+ return (
+
+ );
+ }
+
+ if (isLoading || !engine || !pdfUrl) {
+ return (
+
+
+
⏳
+
Loading PDF Engine...
+
+
+
+
❌
+
Error loading PDF engine: {error.message}
+
+
+
+
+
+
+ (
+
+
+
+ )}
+ />
+
+
+
+ );
+ }
+
+ // Placeholder while loading
+ return (
+
+ {isVisible ? (
+
+
+
Loading page {pageIndex + 1}...
+
+ ) : (
+
Page {pageIndex + 1}
+ )}
+
+
+
+ ) : (
+
+
+ {numPages === 0 && (
+ {t("viewer.noPagesToDisplay", "No pages to display.")}
+ )}
+ {dualPage
+ ? Array.from({ length: Math.ceil(numPages / 2) }).map((_, i) => (
+
+
+ {i * 2 + 1 < numPages && (
+
+ )}
+
+ ))
+ : Array.from({ length: numPages }).map((_, idx) => (
+
+ ))}
+
+ {/* Navigation bar overlays the scroll area */}
+
+
+
+
+ {
+ const page = Number(value);
+ if (!isNaN(page) && page >= 1 && page <= numPages) {
+ scrollToPage(page);
+ }
+ }}
+ min={1}
+ max={numPages}
+ hideControls
+ styles={{
+ input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16},
+ }}
+ />
+
+ / {numPages}
+
+
+
+
+
+
+ {Math.round(zoom * 100)}%
+
+
+
+
- {isVisible ? (
-
-
-
Loading page {pageIndex + 1}...
-
- ) : (
-
Page {pageIndex + 1}
- )}
-
-
-
- ) : (
-
-
- {numPages === 0 && (
- {t("viewer.noPagesToDisplay", "No pages to display.")}
- )}
- {dualPage
- ? Array.from({ length: Math.ceil(numPages / 2) }).map((_, i) => (
-
-
- {i * 2 + 1 < numPages && (
-
- )}
-
- ))
- : Array.from({ length: numPages }).map((_, idx) => (
-
- ))}
-
- {/* Navigation bar overlays the scroll area */}
-
-
-
-
- {
- const page = Number(value);
- if (!isNaN(page) && page >= 1 && page <= numPages) {
- scrollToPage(page);
- }
- }}
- min={1}
- max={numPages}
- hideControls
- styles={{
- input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16},
- }}
- />
-
- / {numPages}
-
-
-
-
-
-
- {Math.round(zoom * 100)}%
-
-
-
-