microphone indicator changes opacity with volume level

master
Stefan Otto 2018-07-17 14:59:45 +02:00
parent 3ab603bbe7
commit 61d395c6d8
3 changed files with 18 additions and 11 deletions

View File

@ -67,6 +67,8 @@ const ListPeer = (props) =>
off : !micEnabled, off : !micEnabled,
disabled : peer.peerAudioInProgress disabled : peer.peerAudioInProgress
})} })}
style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10)
+ 0.2 :1 }}
onClick={(e) => onClick={(e) =>
{ {
e.stopPropagation(); e.stopPropagation();
@ -140,7 +142,7 @@ const mapDispatchToProps = (dispatch) =>
}, },
onEnableWebcam : (peerName) => onEnableWebcam : (peerName) =>
{ {
dispatch(requestActions.resumePeerVideo(peerName)); dispatch(requestActions.resumePeerVideo(peerName));
}, },
onDisableWebcam : (peerName) => onDisableWebcam : (peerName) =>

View File

@ -62,12 +62,12 @@ class Peers extends React.Component
observer.observe(this.refs.peers); observer.observe(this.refs.peers);
} }
componentWillUnmount() componentWillUnmount()
{ {
window.removeEventListener('resize', this.updateDimensions); window.removeEventListener('resize', this.updateDimensions);
} }
componentDidUpdate() componentDidUpdate()
{ {
this.updateDimensions(); this.updateDimensions();
} }
@ -81,7 +81,7 @@ class Peers extends React.Component
toolAreaOpen toolAreaOpen
} = this.props; } = this.props;
const style = const style =
{ {
'width' : this.state.peerWidth, 'width' : this.state.peerWidth,
'height' : this.state.peerHeight 'height' : this.state.peerHeight

19
app/package-lock.json generated
View File

@ -4771,7 +4771,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
@ -4782,7 +4783,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4899,7 +4901,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4911,6 +4914,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4940,6 +4944,7 @@
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4958,6 +4963,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -5058,6 +5064,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5179,6 +5186,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -5602,7 +5610,6 @@
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -5745,8 +5752,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -5772,7 +5778,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }