Reatc file vier

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "react-file-viewer",
-  "version": "1.2.1",
+  "name": "react-file-viewer-extended",
+  "version": "2.1.0",
   "description": "Extendable file viewer for web",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/plangrid/react-file-viewer.git"
+    "url": "git+https://github.com/gurpreet013/react-file-viewer.git"
   },
   "scripts": {
     "dev": "webpack -d --watch",
@@ -17,7 +17,7 @@
     "jest": "node_modules/.bin/jest --env=jsdom",
     "tag-and-publish": "node ./scripts/publish.js"
   },
-  "author": "PlanGrid <opensource@plangrid.com>",
+  "author": "Gurpeet Singh <gurpreet013013@gmail.com>",
   "contributors": [
     {
       "name": "Alexei Schiopu",
@@ -35,9 +35,9 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/plangrid/react-file-viewer/issues"
+    "url": "https://github.com/gurpreet013/react-file-viewer/issues"
   },
-  "homepage": "https://github.com/plangrid/react-file-viewer#readme",
+  "homepage": "https://github.com/gurpreet013/react-file-viewer#readme",
   "devDependencies": {
     "autoprefixer": "^7.1.0",
     "babel-core": "^6.24.1",
@@ -66,7 +66,7 @@
     "html-webpack-plugin": "^2.28.0",
     "inquirer": "^3.0.6",
     "jest": "^23.6.0",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.14.1",
     "postcss-loader": "^2.0.5",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
@@ -79,18 +79,21 @@
   },
   "dependencies": {
     "comma-separated-values": "^3.6.4",
-    "mammoth": "1.3.6",
-    "pdfjs-dist": "1.8.357",
+    "mammoth": "^1.4.21",
+    "pdfjs-dist": "^v2.6.347",
     "prop-types": "^15.5.10",
     "react-data-grid": "^5.0.5",
     "react-visibility-sensor": "^5.0.2",
-    "three": "0.85.2",
-    "xlsx": "^0.10.1"
+    "three": "^0.138.3",
+    "xlsx": "^0.18.4"
   },
   "peerDependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3"
   },
+  "files": [
+    "dist/**/*"
+  ],
   "jest": {
     "testPathIgnorePatterns": [
       "<rootDir>[/\\\\](build|node_modules|scripts|example_files)[/\\\\]"

src/components/drivers/audio-viewer.jsx

@@ -11,6 +11,17 @@ class AudioViewer extends Component {
     this.state = {
       loading: true,
     };
+    this.onCanPlay = this.onCanPlay.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.audio) {
+      this.audio.addEventListener('loadedmetadata', this.onCanPlay);
+    }
+  }
+
+  componentWillUnmount() {
+    this.audio.removeEventListener('loadedmetadata', this.onCanPlay);
   }
 
   onCanPlay() {
@@ -25,14 +36,15 @@ class AudioViewer extends Component {
   }
 
   render() {
-    const visibility = this.state.loading ? 'hidden' : 'visible';
+    const display = this.state.loading ? 'none' : 'block';
     return (
       <div className="pg-driver-view">
         <div className="video-container">
           {this.renderLoading()}
           <audio
-            style={{ visibility }}
+            style={{ display }}
             controls
+            ref={audio => this.audio = audio}
             onCanPlay={e => this.onCanPlay(e)}
             src={this.props.filePath}
           >

src/components/drivers/docx-viewer.jsx

@@ -17,24 +17,25 @@ export default class extends Component {
         mammoth.convertToHtml(
           { arrayBuffer: jsonFile.response },
           { includeDefaultStyleMap: true },
-        )
-        .then((result) => {
+        ).then((result) => {
           const docEl = document.createElement('div');
           docEl.className = 'document-container';
           docEl.innerHTML = result.value;
-          document.getElementById('docx').innerHTML = docEl.outerHTML;
-        })
-        .catch((a) => {
+          document.getElementById(this.getElementId()).innerHTML = docEl.outerHTML;
+        }).catch((a) => {
           console.log('alexei: something went wrong', a);
-        })
-        .done();
+        }).done();
       }
     };
   }
 
+  getElementId() {
+    return `docx-${this.props.uniqIdentifier}`;
+  }
+
   render() {
     return (
-      <div id="docx">
+      <div id={this.getElementId()}>
         <Loading />
       </div>);
   }

src/components/drivers/pdf-viewer.jsx

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
-import { PDFJS } from 'pdfjs-dist/build/pdf.combined';
-import 'pdfjs-dist/web/compatibility';
+import * as PDFJS from 'pdfjs-dist/legacy/build/pdf';
 
 PDFJS.disableWorker = true;
 const INCREASE_PERCENTAGE = 0.2;
-const DEFAULT_SCALE = 1.1;
+const DEFAULT_SCALE = 1;
 
 export class PDFPage extends React.Component {
   constructor(props) {
@@ -45,8 +44,7 @@ export class PDFPage extends React.Component {
   renderPage(page) {
     const { containerWidth, zoom } = this.props;
     const calculatedScale = (containerWidth / page.getViewport(DEFAULT_SCALE).width);
-    const scale = calculatedScale > DEFAULT_SCALE ? DEFAULT_SCALE : calculatedScale;
-    const viewport = page.getViewport(scale + zoom);
+    const viewport = page.getViewport(calculatedScale + zoom);
     const { width, height } = viewport;
 
     const context = this.canvas.getContext('2d');
@@ -67,7 +65,7 @@ export class PDFPage extends React.Component {
           <VisibilitySensor onChange={this.onChange} partialVisibility >
             <canvas ref={node => this.canvas = node} width="670" height="870" />
           </VisibilitySensor>
-            )
+        )
         }
       </div>
     );
@@ -91,9 +89,10 @@ export default class PDFDriver extends React.Component {
 
   componentDidMount() {
     const { filePath } = this.props;
-    const containerWidth = this.container.offsetWidth;
-    PDFJS.getDocument(filePath, null, null, this.progressCallback.bind(this)).then((pdf) => {
-      this.setState({ pdf, containerWidth });
+    const loadingTask = PDFJS.getDocument(filePath);
+    loadingTask.onProgress = this.progressCallback.bind(this);
+    loadingTask.promise.then((pdf) => {
+      this.setState({ pdf, containerWidth: this.container ? this.container.offsetWidth : 0 });
     });
   }
 

src/components/drivers/photo-viewer.jsx

@@ -12,7 +12,11 @@ export default class PhotoViewer extends Component {
     this.props.texture.image.style.width = `${imageDimensions.width}px`;
     this.props.texture.image.style.height = `${imageDimensions.height}px`;
     this.props.texture.image.setAttribute('class', 'photo');
-    document.getElementById('pg-photo-container').appendChild(this.props.texture.image);
+    document.getElementById(this.getElementId()).appendChild(this.props.texture.image);
+  }
+
+  getElementId() {
+    return `pg-photo-container-${this.props.uniqIdentifier}`;
   }
 
   getImageDimensions(originalWidth, originalHeight) {
@@ -46,7 +50,7 @@ export default class PhotoViewer extends Component {
     };
 
     return (
-      <div style={containerStyles} className="photo-viewer-container" id="pg-photo-container" />
+      <div style={containerStyles} className="photo-viewer-container" id={this.getElementId()} />
     );
   }
 }

src/components/drivers/photo360-viewer.jsx

@@ -28,7 +28,7 @@ export default class extends Component {
   }
 
   componentDidMount() {
-    const el = document.getElementById('360-photo');
+    const el = document.getElementById(this.getElementId());
     const positionInfo = el.getBoundingClientRect();
     const height = positionInfo.height;
     const width = positionInfo.width;
@@ -89,6 +89,9 @@ export default class extends Component {
     });
   }
 
+  getElementId() {
+    return `360-photo-${this.props.uniqIdentifier}`;
+  }
 
   updateView() {
     const latitude = Math.max(-85, Math.min(85, this.state.latitude));
@@ -106,7 +109,7 @@ export default class extends Component {
   render() {
     return (
       <div
-        id="360-photo"
+        id={this.getElementId()}
         className="photo360"
         onMouseDown={this.onMouseDown}
         onMouseMove={this.onMouseMove}

src/components/drivers/video-viewer.jsx

@@ -11,6 +11,15 @@ class VideoViewer extends Component {
     this.state = {
       loading: true,
     };
+    this.onCanPlay = this.onCanPlay.bind(this);
+  }
+
+  componentDidMount() {
+    this.video.addEventListener('loadedmetadata', this.onCanPlay);
+  }
+
+  componentWillUnmount() {
+    this.video.removeEventListener('loadedmetadata', this.onCanPlay);
   }
 
   onCanPlay() {
@@ -25,16 +34,17 @@ class VideoViewer extends Component {
   }
 
   render() {
-    const visibility = this.state.loading ? 'hidden' : 'visible';
+    const display = this.state.loading ? 'none' : 'block';
     return (
       <div className="pg-driver-view">
         <div className="video-container">
           {this.renderLoading()}
           <video
-            style={{ visibility }}
+            style={{ display }}
             controls
             type={`video/${this.props.fileType}`}
             onCanPlay={e => this.onCanPlay(e)}
+            ref={video => this.video = video}
             src={this.props.filePath}
           >
             Video playback is not supported by your browser.

src/components/file-viewer.jsx

@@ -20,25 +20,19 @@ import {
 class FileViewer extends Component {
   constructor(props) {
     super(props);
+    this.uniqIdentifier = Math.floor(Math.random() * 100000);
     this.state = {
       loading: true,
     };
   }
 
-  componentDidMount() {
-    const container = document.getElementById('pg-viewer');
-    const height = container ? container.clientHeight : 0;
-    const width = container ? container.clientWidth : 0;
-    this.setState({ height, width });
-  }
-
-  getDriver() {
+  getDriver(commonProps) {
     switch (this.props.fileType) {
       case 'csv': {
-        return withFetching(CsvViewer, this.props);
+        return withFetching(CsvViewer, commonProps);
       }
       case 'xlsx': {
-        const newProps = Object.assign({}, this.props, { responseType: 'arraybuffer' });
+        const newProps = Object.assign({}, commonProps, { responseType: 'arraybuffer' });
         return withFetching(XlsxViewer, newProps);
       }
       case 'jpg':
@@ -71,11 +65,15 @@ class FileViewer extends Component {
   }
 
   render() {
-    const Driver = this.getDriver(this.props);
+    const commonProps = Object.assign({}, this.props, { uniqIdentifier: this.uniqIdentifier });
+    const Driver = this.getDriver(commonProps);
+    const container = document.getElementById('pg-viewer');
+    const height = container ? container.clientHeight : 0;
+    const width = container ? container.clientWidth : 0;
     return (
       <div className="pg-viewer-wrapper">
         <div className="pg-viewer" id="pg-viewer">
-          <Driver {...this.props} width={this.state.width} height={this.state.height} />
+          <Driver {...commonProps} width={width} height={height} />
         </div>
       </div>
     );

tests/components/drivers/__snapshots__/audio-viewer.test.js.snap

@@ -20,7 +20,7 @@ exports[`AudioViewer matches snapshot 1`] = `
       src="fake/path"
       style={
         Object {
-          "visibility": "hidden",
+          "display": "none",
         }
       }
     >