add support for pdf previews with pdf.js

components/previews/AudioPreview.tsx

@@ -5,13 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <div className="bg-white rounded shadow p-3 w-full">
-      <div className="flex space-x-4">
-        <div className="flex items-center justify-center p-10 bg-gray-100 rounded">
-          <FontAwesomeIcon className="" icon="music" size="lg" />
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
+        <div className="flex items-center justify-center bg-gray-100 rounded p-28 md:p-14">
+          <FontAwesomeIcon icon="music" size="lg" />
         </div>
         <div className="flex flex-col w-full space-y-2">
           <div>{file.name}</div>
-          <div className="text-gray-500 text-sm">
+          <div className="text-gray-500 text-sm pb-4">
             Last modified:{' '}
             {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
               dateStyle: 'short',

components/previews/PDFPreview.tsx

@@ -0,0 +1,70 @@
+import { FunctionComponent, useState } from 'react'
+import { Document, Page, pdfjs } from 'react-pdf'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import Loading from '../Loading'
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
+
+const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const [pageNumber, setPageNumber] = useState(1)
+  const [totalPages, setTotalPages] = useState(0)
+  const [loadingText, setLoadingText] = useState('Loading PDF ...')
+
+  const onDocumentLoadSuccess = (pdf: any) => {
+    setTotalPages(pdf.numPages)
+  }
+
+  return (
+    <div className="bg-white rounded shadow md:p-3 w-full overflow-scroll" style={{ maxHeight: '90vh' }}>
+      <div className="w-full mx-auto border-2 md:shadow overflow-scroll" style={{ maxHeight: '60vh' }}>
+        <Document
+          file={file['@microsoft.graph.downloadUrl']}
+          onLoadSuccess={onDocumentLoadSuccess}
+          loading={<Loading loadingText={loadingText} />}
+          onLoadProgress={({ loaded, total }) => {
+            setLoadingText(`Loading PDF ${Math.round((loaded / total) * 100)}%`)
+          }}
+        >
+          <Page pageNumber={pageNumber} />
+        </Document>
+      </div>
+      <div className="flex space-x-2 my-4 md:mb-0 w-full items-center justify-center">
+        <button
+          className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+          onClick={() => {
+            pageNumber > 1 && setPageNumber(pageNumber - 1)
+          }}
+          disabled={!(pageNumber > 1)}
+        >
+          <FontAwesomeIcon icon="arrow-left" />
+        </button>
+        <div className="px-3 py-1">
+          Page{' '}
+          <input
+            value={pageNumber}
+            className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring-2 focus:ring-red-500 focus:outline-none"
+            onChange={e => {
+              const v = parseInt(e.target.value)
+              if (v <= totalPages && v >= 0) {
+                setPageNumber(v)
+              }
+            }}
+          ></input>
+          /<span className="ml-1 text-center">{totalPages}</span>
+        </div>
+        <button
+          className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+          onClick={() => {
+            pageNumber < totalPages && setPageNumber(pageNumber + 1)
+          }}
+          disabled={!(pageNumber < totalPages)}
+        >
+          <FontAwesomeIcon icon="arrow-right" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default PDFPreview