Use resize observer (polyfill) for updating dimensions
parent
51de7bb33d
commit
b5b9b157d7
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue