From b5b9b157d7a130e938f6d97ca6035fe7002fcf14 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Tue, 17 Jul 2018 10:44:50 +0200
Subject: [PATCH] Use resize observer (polyfill) for updating dimensions

---
 app/lib/components/Peers.jsx | 22 +++++-----------------
 app/package-lock.json        |  5 +++++
 app/package.json             |  1 +
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index 02bed23..4095301 100644
--- a/app/lib/components/Peers.jsx
+++ b/app/lib/components/Peers.jsx
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import { Appear } from './transitions';
 import Peer from './Peer';
+import ResizeObserver from 'resize-observer-polyfill';
 
 class Peers extends React.Component
 {
@@ -18,12 +19,7 @@ class Peers extends React.Component
 		};
 	}
 
-	resizeUpdate()
-	{
-		this.updateDimensions();
-	}
-
-	updateDimensions()
+	updateDimensions = () =>
 	{
 		const n = this.props.videoStreams ? this.props.videoStreams : 0;
 
@@ -60,21 +56,13 @@ class Peers extends React.Component
 				peerHeight : 0.9 * y
 			});
 		}
-	}
+	};
 
 	componentDidMount()
 	{
-		window.addEventListener('resize', this.resizeUpdate.bind(this));
-	}
+		const observer = new ResizeObserver(this.updateDimensions);
 
-	componentWillUnmount()
-	{
-		window.removeEventListener('resize', this.resizeUpdate.bind(this));
-	}
-
-	componentDidUpdate()
-	{
-		this.updateDimensions();
+		observer.observe(this.refs.peers);
 	}
 
 	render()
diff --git a/app/package-lock.json b/app/package-lock.json
index d6b27e2..3e0abbc 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10492,6 +10492,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",
diff --git a/app/package.json b/app/package.json
index 3bcce90..4d28c5f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,6 +30,7 @@
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
+    "resize-observer-polyfill": "^1.5.0",
     "riek": "^1.1.0",
     "url-parse": "^1.4.1"
   },