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 (
);
-}
+};
+
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()
]
};