From 216b9df66e48dc91ba93354fdb45d358c2313dd2 Mon Sep 17 00:00:00 2001
From: Florian Bienefelt <florian.bienefelt@gmail.com>
Date: Thu, 14 Nov 2019 14:27:35 +0100
Subject: [PATCH] Update width and height of fileviewer continuously

Uses MutationObserver to watch changes to the container and update state accordingly.
Falls back to previous behavior if MutationObserver is not supported, i.e. set size on mount only.
---
 src/components/file-viewer.jsx | 35 ++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/file-viewer.jsx b/src/components/file-viewer.jsx
index f1a524e8..9c21ef16 100644
--- a/src/components/file-viewer.jsx
+++ b/src/components/file-viewer.jsx
@@ -26,11 +26,38 @@ class FileViewer extends Component {
   }
 
   componentDidMount() {
-    const container = document.getElementById('pg-viewer');
+    this.updateDimensions();
+    
+    const MutObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+    if (!MutObserver) {
+      return;
+    }
+    
+    this.observer = new MutObserver(this.updateDimensions);
+    this.observer.observe(this.getContainer());
+  }
+
+  componentWillUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  
+  getContainer = () => {
+    return document.getElementById('pg-viewer');
+  }
+  
+  updateDimensions = () => {
+    const container = this.getContainer()
     const height = container ? container.clientHeight : 0;
     const width = container ? container.clientWidth : 0;
-    this.setState({ height, width });
-  }
+    
+    // Only rerender if state changes
+    if (this.state.width !== width || this.state.height !== height) {
+      this.setState({ width, height });
+    }
+  };
 
   getDriver() {
     switch (this.props.fileType) {
@@ -71,7 +98,7 @@ class FileViewer extends Component {
   }
 
   render() {
-    const Driver = this.getDriver(this.props);
+    const Driver = this.getDriver();
     return (
       <div className="pg-viewer-wrapper">
         <div className="pg-viewer" id="pg-viewer">