improve (pdf): fallback to pdfjs whenever native PDF renderer is missing

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) => (
+    <Bundle loader={import(/* webpackChunkName: "pdfjs" */"./pdfviewer_lazy")} symbol="PDFJSViewer">
+      {(Comp) => <Comp {...props}/>}
+    </Bundle>
+);
+
 
 export const PDFViewer = (props) => {
+    const ViewerComponent = "application/pdf" in navigator.mimeTypes ?
+          <embed src={props.data+"#toolbar=0"} type="application/pdf" style={{height: '100%', width: '100%'}}></embed>
+          : <PDFJSViewer src={props.data} />;
     return (
         <div className="component_pdfviewer">
           <MenuBar title={props.filename} download={props.data} />
           <div className="pdfviewer_container" >
-            <embed src={props.data+"#toolbar=0"} type="application/pdf" style={{height: '100%', width: '100%'}}></embed>
+            { ViewerComponent }
           </div>
         </div>
     );
-}
+};
+

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;
+            }
+        }
     }
 }

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 (
+            <Document
+              file={this.props.src}
+              onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
+              options={{
+                  cMapUrl: '/assets/vendor/pdfjs/cmaps/',
+                  cMapPacked: true,
+              }}
+            >
+              {
+                Array.from(
+                  new Array(this.state.numPages),
+                  (el, index) => (
+                    <Page
+                      key={`page_${index + 1}`}
+                      pageNumber={index + 1}
+                      width={ window.innerWidth > 850 ? 800 : Math.max(window.innerWidth - 50, 100) }
+                    />
+                  ),
+                )
+              }
+            </Document>
+        );
+    }
+}

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",

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:; "

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