Handle PDFs properly

moneymgr_web/src/dialogs/FileViewerDialog.tsx

@@ -8,17 +8,10 @@ import {
   Typography,
 } from "@mui/material";
 import { filesize } from "filesize";
-import { pdfjs } from "react-pdf";
 import { FileApi, UploadedFile } from "../api/FileApi";
 import React from "react";
-import { Document, Page } from "react-pdf";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  "pdfjs-dist/build/pdf.worker.min.mjs",
-  import.meta.url
-).toString();
-
 export function FileViewerDialog(p: {
   open: boolean;
   onClose: () => void;
@@ -26,7 +19,7 @@ export function FileViewerDialog(p: {
 }): React.ReactElement {
   if (!p.open) return <></>;
   return (
-    <Dialog open={p.open} onClose={p.onClose}>
+    <Dialog open={p.open} onClose={p.onClose} fullScreen>
       <DialogTitle>
         {p.file.file_name} ({filesize(p.file.file_size)})
       </DialogTitle>
@@ -57,40 +50,16 @@ function FileViewer(p: ViewerProps): React.ReactElement {
 }
 
 function ImageViewer(p: ViewerProps): React.ReactElement {
-  return <img src={p.url} />;
+  return (
+    <img
+      src={p.url}
+      style={{ maxWidth: "100%", width: "fit-content", margin: "auto" }}
+    />
+  );
 }
 
 function PDFViewer(p: ViewerProps): React.ReactElement {
-  const [pdfUrl, setPdfUrl] = React.useState<string | undefined>();
-  const [numPages, setNumPages] = React.useState<number>();
-  const [pageNumber, setPageNumber] = React.useState<number>(1);
-
-  const load = async () => {
-    const blob = await FileApi.DownloadUploadedFile(p);
-    setPdfUrl(URL.createObjectURL(blob));
-  };
-
-  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
-    setNumPages(numPages);
-  }
-
-  return (
-    <AsyncWidget
-      loadKey={p.id}
-      load={load}
-      errMsg="Failed to load PDF!"
-      build={() => (
-        <div>
-          <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}>
-            <Page pageNumber={pageNumber} />
-          </Document>
-          <p>
-            Page {pageNumber} of {numPages}
-          </p>
-        </div>
-      )}
-    />
-  );
+  return <iframe style={{ flex: 1 }} src={p.url} />;
 }
 
 function DefaultViewer(p: ViewerProps): React.ReactElement {