diff --git a/client/pages/viewerpage/pdfviewer.js b/client/pages/viewerpage/pdfviewer.js index 415a54a6..331094bf 100644 --- a/client/pages/viewerpage/pdfviewer.js +++ b/client/pages/viewerpage/pdfviewer.js @@ -1,14 +1,26 @@ import React from 'react'; import { MenuBar } from './menubar'; -import "./pdfviewer.scss" +import "./pdfviewer.scss"; +import { Bundle } from "../../components/"; + +const PDFJSViewer = (props) => ( + + {(Comp) => } + +); + export const PDFViewer = (props) => { + const ViewerComponent = "application/pdf" in navigator.mimeTypes ? + + : ; return (
- + { ViewerComponent }
); -} +}; + diff --git a/client/pages/viewerpage/pdfviewer.scss b/client/pages/viewerpage/pdfviewer.scss index fb2be17b..682cb18f 100644 --- a/client/pages/viewerpage/pdfviewer.scss +++ b/client/pages/viewerpage/pdfviewer.scss @@ -11,5 +11,18 @@ height: 100%; width: 100%; flex-grow: 1; + + + /* PDFJS */ + canvas{ + margin: 0 auto; + } + .react-pdf__Document{ + overflow-y: scroll; + height: 100%; + .react-pdf__Page{ + margin-top: 15px; + } + } } } diff --git a/client/pages/viewerpage/pdfviewer_lazy.js b/client/pages/viewerpage/pdfviewer_lazy.js new file mode 100644 index 00000000..df8c52ca --- /dev/null +++ b/client/pages/viewerpage/pdfviewer_lazy.js @@ -0,0 +1,40 @@ +import React from 'react'; +import 'react-pdf/dist/Page/AnnotationLayer.css'; +import { Document, Page, pdfjs } from 'react-pdf'; +pdfjs.GlobalWorkerOptions.workerSrc = `/assets/vendor/pdfjs/build/pdf.worker.min.js`; + +export class PDFJSViewer extends React.Component { + state = { + numPages: 0, + } + + onDocumentLoadSuccess({ numPages }) { + this.setState({ numPages }); + } + + render(){ + return ( + + { + Array.from( + new Array(this.state.numPages), + (el, index) => ( + 850 ? 800 : Math.max(window.innerWidth - 50, 100) } + /> + ), + ) + } + + ); + } +} diff --git a/package.json b/package.json index 655e10fd..50b853f2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "codemirror": "^5.26.0", "exif-js": "^2.3.0", "little-loader": "^0.2.0", + "pdfjs-dist": "^2.1.266", "prop-types": "^15.5.10", "react": "^16.5.0", "react-addons-css-transition-group": "^15.6.2", @@ -25,6 +26,7 @@ "react-dom": "^16.5.0", "react-draggable": "^2.2.6", "react-infinite-scroller": "^1.1.4", + "react-pdf": "^4.1.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-selectable": "git+https://github.com/mickael-kerjean/react-selectable.git", diff --git a/server/middleware/http.go b/server/middleware/http.go index 46a3afb0..dfba1b5a 100644 --- a/server/middleware/http.go +++ b/server/middleware/http.go @@ -52,7 +52,7 @@ func IndexHeaders(fn func(App, http.ResponseWriter, *http.Request)) func(ctx App cspHeader += "font-src 'self' data:; " cspHeader += "manifest-src 'self'; " cspHeader += "script-src 'self' 'sha256-JNAde5CZQqXtYRLUk8CGgyJXo6C7Zs1lXPPClLM1YM4=' 'sha256-9/gQeQaAmVkFStl6tfCbHXn8mr6PgtxlH+hEp685lzY=' 'sha256-ER9LZCe8unYk8AJJ2qopE+rFh7OUv8QG5q3h6jZeoSk='; " - cspHeader += "img-src 'self' data: https://maps.wikimedia.org; " + cspHeader += "img-src 'self' blob: data: https://maps.wikimedia.org; " cspHeader += "connect-src 'self'; " cspHeader += "object-src 'self'; " cspHeader += "media-src 'self' blob:; " diff --git a/webpack.config.js b/webpack.config.js index 813b18b3..6beefc15 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -71,8 +71,11 @@ let config = { { from: "worker/*.js", to: "assets/" }, { from: "assets/logo/*" }, { from: "assets/icons/*" }, - { from: "assets/fonts/*" } + { from: "assets/fonts/*" }, ], { context: path.join(__dirname, 'client') }), + new CopyWebpackPlugin([ + { from: "node_modules/pdfjs-dist/", to: "assets/vendor/pdfjs"} + ]), //new BundleAnalyzerPlugin() ] };