Use resize observer (polyfill) for updating dimensions

master
Torjus 2018-07-17 10:44:50 +02:00
parent 51de7bb33d
commit b5b9b157d7
3 changed files with 11 additions and 17 deletions

View File

@ -5,6 +5,7 @@ import classnames from 'classnames';
import * as appPropTypes from './appPropTypes'; import * as appPropTypes from './appPropTypes';
import { Appear } from './transitions'; import { Appear } from './transitions';
import Peer from './Peer'; import Peer from './Peer';
import ResizeObserver from 'resize-observer-polyfill';
class Peers extends React.Component class Peers extends React.Component
{ {
@ -18,12 +19,7 @@ class Peers extends React.Component
}; };
} }
resizeUpdate() updateDimensions = () =>
{
this.updateDimensions();
}
updateDimensions()
{ {
const n = this.props.videoStreams ? this.props.videoStreams : 0; const n = this.props.videoStreams ? this.props.videoStreams : 0;
@ -60,21 +56,13 @@ class Peers extends React.Component
peerHeight : 0.9 * y peerHeight : 0.9 * y
}); });
} }
} };
componentDidMount() componentDidMount()
{ {
window.addEventListener('resize', this.resizeUpdate.bind(this)); const observer = new ResizeObserver(this.updateDimensions);
}
componentWillUnmount() observer.observe(this.refs.peers);
{
window.removeEventListener('resize', this.resizeUpdate.bind(this));
}
componentDidUpdate()
{
this.updateDimensions();
} }
render() render()

5
app/package-lock.json generated
View File

@ -10492,6 +10492,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" "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": { "resolve": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",

View File

@ -30,6 +30,7 @@
"redux": "^4.0.0", "redux": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"resize-observer-polyfill": "^1.5.0",
"riek": "^1.1.0", "riek": "^1.1.0",
"url-parse": "^1.4.1" "url-parse": "^1.4.1"
}, },