Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Resize observer
master
Stefan Otto 2018-07-17 11:51:30 +02:00 committed by GitHub
parent 637ef19d8f a877eb6eb6
commit 977ffd9d24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 6733 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/lib/components/FullView.jsx
View File

@ -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

35
app/lib/components/Peers.jsx
View File

@ -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,
ratio : 1.334
peerHeight : 300
};
}
resizeUpdate()
{
this.updateDimensions();
}
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()

42
app/package-lock.json generated
View File

@ -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,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -4767,8 +4771,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
@ -4779,8 +4782,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -4897,8 +4899,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": 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",

2
app/package.json
View File

@ -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"
},

6693
app/yarn.lock 100644
View File

File diff suppressed because it is too large Load Diff