Merge pull request #17 from torjusti/feature/resize-observer

Resize observer

app/lib/components/FullView.jsx

@@ -92,7 +92,7 @@ export default class FullView extends React.Component
 		{
 			const stream = new MediaStream;
 
-      stream.addTrack(videoTrack);
+			stream.addTrack(videoTrack);
 			video.srcObject = stream;
 		}
 		else

app/lib/components/Peers.jsx

@@ -5,6 +5,9 @@ import classnames from 'classnames';
 import * as appPropTypes from './appPropTypes';
 import { Appear } from './transitions';
 import Peer from './Peer';
+import ResizeObserver from 'resize-observer-polyfill';
+
+const RATIO = 1.334;
 
 class Peers extends React.Component
 {
@@ -13,17 +16,11 @@ class Peers extends React.Component
 		super(props);
 		this.state = {
 			peerWidth  : 400,
-			peerHeight : 300, 
+			peerHeight : 300
-			ratio      : 1.334
 		};
 	}
 
-	resizeUpdate()
+	updateDimensions = () =>
-	{
-		this.updateDimensions();
-	}
-
-	updateDimensions()
 	{
 		const n = this.props.peers.length;
 
@@ -35,11 +32,11 @@ class Peers extends React.Component
 		for (let rows = 1; rows < 100; rows = rows + 1)
 		{
 			x = width / Math.ceil(n / rows);
-			y = x / this.state.ratio;
+			y = x / RATIO;
 			if (height < (y * rows))
 			{
 				y = height / rows;
-				x = this.state.ratio * y;
+				x = RATIO * y;
 				break;
 			}
 			space = height - (y * (rows));
@@ -55,24 +52,24 @@ class Peers extends React.Component
 				peerHeight : 0.9 * y
 			});
 		}
-	}
+	};
 
 	componentDidMount()
 	{
-		window.addEventListener('resize', this.resizeUpdate.bind(this));
+		window.addEventListener('resize', this.updateDimensions);
+		const observer = new ResizeObserver(this.updateDimensions);
+
+		observer.observe(this.refs.peers);
 	}
 
-	componentWillUnmount()
+	componentWillUnmount() 
 	{
-		window.removeEventListener('resize', this.resizeUpdate.bind(this));
+		window.removeEventListener('resize', this.updateDimensions);
 	}
 
-	componentDidUpdate(prevProps)
+	componentDidUpdate() 
 	{
-		if (prevProps.toolAreaOpen !== this.props.toolAreaOpen) 
+		this.updateDimensions();
-		{
-			this.updateDimensions();
-		}
 	}
 
 	render()

app/package-lock.json

@@ -4703,6 +4703,11 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
+    "fscreen": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.0.2.tgz",
+      "integrity": "sha1-xMUdltgZ11oZ1yjg30Rfm+m7mE8="
+    },
     "fsevents": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
@@ -4723,8 +4728,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4767,8 +4771,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4779,8 +4782,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4897,8 +4899,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4910,7 +4911,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4940,7 +4940,6 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4959,7 +4958,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5060,7 +5058,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5146,8 +5143,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5183,7 +5179,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5203,7 +5198,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5247,14 +5241,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -5610,6 +5602,7 @@
                   "version": "1.1.11",
                   "bundled": true,
                   "dev": true,
+                  "optional": true,
                   "requires": {
                     "balanced-match": "^1.0.0",
                     "concat-map": "0.0.1"
@@ -5752,7 +5745,8 @@
                 "inherits": {
                   "version": "2.0.3",
                   "bundled": true,
-                  "dev": true
+                  "dev": true,
+                  "optional": true
                 },
                 "ini": {
                   "version": "1.3.5",
@@ -5778,6 +5772,7 @@
                   "version": "3.0.4",
                   "bundled": true,
                   "dev": true,
+                  "optional": true,
                   "requires": {
                     "brace-expansion": "^1.1.7"
                   }
@@ -10492,6 +10487,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",

app/package.json

@@ -11,6 +11,7 @@
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "domready": "^1.0.8",
+    "fscreen": "^1.0.2",
     "hark": "^1.2.0",
     "js-cookie": "^2.2.0",
     "marked": "^0.4.0",
@@ -30,6 +31,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"
   },