diff --git a/package.json b/package.json
index f79c4e4c422e237f6aec400bda59b9e4a8482f9b..8ec1ea9773d9051a7c1c1a16b6aa643ee287aad8 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
"material-design-lite": "^1.3.0",
"minijanus": "^0.5.0",
"mobile-detect": "^1.4.1",
+ "moving-average": "^1.0.0",
"naf-janus-adapter": "https://github.com/mozilla/naf-janus-adapter#feature/disconnect",
"networked-aframe": "https://github.com/mozillareality/networked-aframe#mr-social-client/master",
"nipplejs": "^0.6.7",
diff --git a/src/assets/images/level_fill.png b/src/assets/images/level_fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..99f77b5655e6a50e0444364a3c2cfb4882b3b2d9
Binary files /dev/null and b/src/assets/images/level_fill.png differ
diff --git a/src/assets/images/level_fill@2x.png b/src/assets/images/level_fill@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..477d9801bb6d33737b571fce454ff265ff79e77c
Binary files /dev/null and b/src/assets/images/level_fill@2x.png differ
diff --git a/src/assets/images/mic_level.png b/src/assets/images/mic_level.png
new file mode 100644
index 0000000000000000000000000000000000000000..5be15458d9ed41c46f861d8dd8435a11e452f80c
Binary files /dev/null and b/src/assets/images/mic_level.png differ
diff --git a/src/assets/images/mic_level@2x.png b/src/assets/images/mic_level@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..94739aa1977cc5d5317eeb770905ed212ff248b4
Binary files /dev/null and b/src/assets/images/mic_level@2x.png differ
diff --git a/src/assets/images/mic_small.png b/src/assets/images/mic_small.png
old mode 100755
new mode 100644
diff --git a/src/assets/images/mic_small@2x.png b/src/assets/images/mic_small@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b94cede41804adacdf7e268e6082baffca4403cb
Binary files /dev/null and b/src/assets/images/mic_small@2x.png differ
diff --git a/src/assets/images/package.json b/src/assets/images/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0a5693e4ee3946b74a1a1e9632f9abb5ddbd5d35
--- /dev/null
+++ b/src/assets/images/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "moving-average": "^1.0.0"
+ }
+}
diff --git a/src/assets/images/speaker_level.png b/src/assets/images/speaker_level.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ccedcc0350f90c95744d928128594829b5f5b90
Binary files /dev/null and b/src/assets/images/speaker_level.png differ
diff --git a/src/assets/images/speaker_level@2x.png b/src/assets/images/speaker_level@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a807745cbcaaf823e6e8e99deda15459d1ed1d9a
Binary files /dev/null and b/src/assets/images/speaker_level@2x.png differ
diff --git a/src/assets/images/yarn.lock b/src/assets/images/yarn.lock
new file mode 100644
index 0000000000000000000000000000000000000000..1f192c246a1da1e42b2e3482a5980de118f49339
--- /dev/null
+++ b/src/assets/images/yarn.lock
@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+moving-average@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/moving-average/-/moving-average-1.0.0.tgz#b1247ba8dd2d7927c619f1eac8036cf933d65adc"
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 61dda7b6f08c7e42d0b3289f68490ad01f861c17..ed6b4e2d7db8960b98776c8482d7e9d16c51657e 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -8,6 +8,7 @@ import { SCHEMA } from "../storage/store";
import MobileDetect from 'mobile-detect';
import { IntlProvider, FormattedMessage, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
+import MovingAverage from 'moving-average';
const mobiledetect = new MobileDetect(navigator.userAgent);
@@ -175,6 +176,7 @@ class UIRoot extends Component {
this.setupTestTone();
this.props.concurrentLoadDetector.addEventListener("concurrentload", this.onConcurrentLoad);
this.handleForcedVREntryType();
+ this.micLevelMovingAverage = MovingAverage(200);
this.props.scene.addEventListener("loaded", this.onSceneLoaded);
}
@@ -365,7 +367,9 @@ class UIRoot extends Component {
v = Math.max(levels[x] - 127, v);
}
- this.setState({ micLevel: v / 128.0 })
+ const level = v / 128.0 ;
+ this.micLevelMovingAverage.push(Date.now(), level);
+ this.setState({ micLevel: this.micLevelMovingAverage.movingAverage() })
}, 50);
this.setState({ mediaStream, micUpdateInterval });
@@ -446,29 +450,38 @@ class UIRoot extends Component {
const selectedMicDeviceId = this.state.micDevices.filter(d => d.label === selectedMicLabel).map(d => d.deviceId)[0];
+ const maxLevelHeight = 111;
+ const micClip = { clip: `rect(${maxLevelHeight - Math.floor(this.state.micLevel * maxLevelHeight)}px, 111px, 111px, 0px)` };
+ const speakerClip = { clip: `rect(${this.state.tonePlaying ? 0 : maxLevelHeight}px, 111px, 111px, 0px)` };
+
const audioSetupPanel = this.state.entryStep === ENTRY_STEPS.audio_setup
? (
<div className="audio-setup-panel">
- <div className="audio-setup-panel--title">
+ <div className="audio-setup-panel__title">
<FormattedMessage id="audio.title"/>
</div>
- <div className="audio-setup-panel--subtitle">
+ <div className="audio-setup-panel__subtitle">
{ mobiledetect.mobile() || this.state.enterInVR && (<FormattedMessage id={ mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop" }/>) }
</div>
- <div className="audio-setup-panel--device-chooser">
- <select className="audio-setup-panel--device-chooser--dropdown" value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
+ <div className="audio-setup-panel__levels">
+ <div className="audio-setup-panel__levels__mic">
+ <img src="./src/assets/images/mic_level.png" srcSet="mic_level@2x.png 2x" className="audio-setup-panel__levels__mic_icon"/>
+ <img src="./src/assets/images/level_fill.png" srcSet="level_fill@2x.png 2x" className="audio-setup-panel__levels__level" style={ micClip }/>
+ </div>
+ <div className="audio-setup-panel__levels__speaker">
+ <img src="./src/assets/images/speaker_level.png" srcSet="speaker_level@2x.png 2x" className="audio-setup-panel__levels__speaker_icon"/>
+ <img src="./src/assets/images/level_fill.png" srcSet="level_fill@2x.png 2x" className="audio-setup-panel__levels__level" style={ speakerClip }/>
+ </div>
+ </div>
+ <div className="audio-setup-panel__device-chooser">
+ <select className="audio-setup-panel__device-chooser__dropdown" value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
{ this.state.micDevices.map(d => (<option key={ d.deviceId } value={ d.deviceId }> {d.label}</option>)) }
</select>
- <div className="audio-setup-panel--device-chooser--mic-icon">
- <img src="./src/assets/images/mic_small.png"/>
+ <div className="audio-setup-panel__device-chooser__mic-icon">
+ <img src="./src/assets/images/mic_small.png" srcSet="mic_small@2x.png 2x"/>
</div>
</div>
- <br/>
- { this.state.tonePlaying && (<div>Tone</div>) }
- <br/>
- { this.state.micLevel }
- <br/>
- <div className="audio-setup-panel--enter-button" onClick={this.onAudioReadyButton}>
+ <div className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
<FormattedMessage id="audio.enter-now"/>
</div>
</div>
diff --git a/src/room.scss b/src/room.scss
index 75a99a2dd2b9761b9ed76046de620bec34b078a7..10386c8e6d691a4cba7346729e8bdca0e8fcd2eb 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -225,16 +225,16 @@ $darker-grey: rgba(64, 64, 64, 1.0);
align-items: center;
}
-.audio-setup-panel--title {
+.audio-setup-panel__title {
font-size: 1.3em;
}
-.audio-setup-panel--subtitle {
+.audio-setup-panel__subtitle {
font-size: 1.0em;
padding-top: 4px;
}
-.audio-setup-panel--device-chooser {
+.audio-setup-panel__device-chooser {
display: flex;
flex-direction: column;
justify-content: center;
@@ -242,11 +242,11 @@ $darker-grey: rgba(64, 64, 64, 1.0);
position: relative;
}
-.audio-setup-panel--enter-button {
+.audio-setup-panel__enter-button {
@extend %bottom-button;
}
-.audio-setup-panel--device-chooser--dropdown {
+.audio-setup-panel__device-chooser__dropdown {
@extend %rounded-border;
@extend %default-font;
@@ -257,8 +257,52 @@ $darker-grey: rgba(64, 64, 64, 1.0);
width: 90%;
}
-.audio-setup-panel--device-chooser--mic-icon {
+.audio-setup-panel__device-chooser__mic-icon {
position: absolute;
left: 7.5%;
top: 10px;
}
+
+.audio-setup-panel__levels {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ width: 100%;
+}
+
+.audio-setup-panel__levels__mic {
+ position:relative;
+ width: 111px;
+ height: 111px;
+}
+
+.audio-setup-panel__levels__mic_icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+}
+
+.audio-setup-panel__levels__speaker {
+ position:relative;
+ width: 111px;
+ height: 111px;
+}
+
+.audio-setup-panel__levels__speaker_icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+}
+
+.audio-setup-panel__levels__level {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 1.0;
+ z-index: 1;
+}
+
diff --git a/yarn.lock b/yarn.lock
index 5537648881ac821176d0ea06de1f151ee01e3fe0..427f56fd979b463ecc157fc334f9318dea64628a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5113,6 +5113,10 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"
+moving-average@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/moving-average/-/moving-average-1.0.0.tgz#b1247ba8dd2d7927c619f1eac8036cf933d65adc"
+
ms@0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"