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 * 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()
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue