From 2e3efb5f8aebb2f908d6f609f85ea1b4689ded17 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 20 Mar 2018 17:07:06 -0700
Subject: [PATCH] Add HMD mic warning
---
src/assets/images/warning_icon.png | Bin 0 -> 582 bytes
src/assets/images/warning_icon@2x.png | Bin 0 -> 1080 bytes
src/assets/translations.data.json | 3 +-
src/react-components/ui-root.js | 40 +++++++++++++++++++++-----
src/room.scss | 12 ++++++++
5 files changed, 47 insertions(+), 8 deletions(-)
create mode 100644 src/assets/images/warning_icon.png
create mode 100644 src/assets/images/warning_icon@2x.png
diff --git a/src/assets/images/warning_icon.png b/src/assets/images/warning_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0394f96acda411c490f5ae224df90c6c2fdd802
GIT binary patch
literal 582
zcmV-M0=fN(P)<h;3K|Lk000e1NJLTq000^Q000&U1^@s6-iVB~00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0ozGLK~#7FwUxb3
z!ax|tUq8W!1vNwrBp#zqu&A3gVYj+!BL4u$>|j})*j$N;i;EIxlj5c>;G%;=HPM*J
zf*2D(rM_=NN%?Av&|mVvU3<Of?zy`bpf?1RRF?oY!B}8akxsm-sEpTmumL%JIHM?!
z0afQmvt%TrJTO3#(XGjbi6$Z9Bs0-U2SXOxP-HU31<XIvbfZ|RL6Cog;-?bEYTl@m
zVK7G$V_d@||M0Df@NmN*#@$p*L!Y!owzlk0_!URfHL8P2ghn%BIAT$Zb8R<hCVFs_
zz%)0Mpl9G8Mp81)wXF*ajDTmVd1<N5LCj6NFWswA0^?wNyDqRwBI*KshNq%cBZd+w
zj$WxpC_;w_I~k=gGEZw{dKUbn9j_Zj*lHBTGb7M;?gr~(qR}lvy%9r+bTIoRwXdG7
zrU>=<P-MIinK0}GN2|&RpI7bHd39T1_<u?jZJ$zPX<71t8T3}5SC5$)wFz&$!_&*p
zCRQ_K#88r)oo7ZHK!e{d!1L=b$XWA2Wp665zEdb-F-SdIicC*vX&hEV<EHH}CHN@S
zoY!~NGR-KLyO;}w7RSI2^7mDWFi*QKdwli<c0lWtxh$)G^rIax#U@EG;IFVDf1u&V
UQ_}^7@&Et;07*qoM6N<$f?4wTsQ>@~
literal 0
HcmV?d00001
diff --git a/src/assets/images/warning_icon@2x.png b/src/assets/images/warning_icon@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..14c27504afa3e5aaa2e76f25f023162a19d2c7dd
GIT binary patch
literal 1080
zcmV-81jqY{P)<h;3K|Lk000e1NJLTq001-q001lq1^@s6D*c-s00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1I<Z9K~#7F<(f}O
z6j2<<zgqq)(>0K+JiO{+U0P3h2{tP55~=6FIYyAKhamE>YY-S66gpI=?GSV;?UYpP
zil>6eQxP4sgA_#UW|Z2$>HXf$=r}t&``*mc9QwddXLiS#`Of>k-+S*jR$*g_@#yCf
zxAt>9rg_XGf{=(j57QNMSQ8i-7%VY~V|8Zc`fhV<IA+EV*Vv-+)-jQRTER5>cADn9
z_H~i$Z?r{a5fPF+OxC{LoXhPk5tM(qPke`>s3bH~4ZScPDcVR~Yy#WAt>l1MQ#CT9
zE%t5-nysf>5Zz#mTMb6vj<N^weubV>^|VP@FawQLK_3Q>47U@q_gXz$$4O!F4-O<g
zpzxKPhan#0(7-n6fuZ=MV?3LQ7N|shT@{aNOwBCQZWoU`JeCm>U6vDlp_0|yB#lN}
zyf*9Uu$;joL!JHAqdgU^=4O83H#*OJw5`|6V*()vYdHqXYNMB$(S5wW<bc`NKk#^F
z1+#B{@<eT-t#$n+=|MQG*Nu?Y3oB@hM}ll~>uQVV0k`je!_c(?CZ8^$<4_H{;<Y8m
z&}Y*xR;ab;iBL=-AYuBDVFmcqM(Pi!HOfKfi0u+RfCk$H0uodZbz(7qrU#mQ`wgXW
z8R#6Tfo6MG*cbr_Dkx3&KsQS>0$n(=9)tD3R0$%8rv8JpK?A4?ewMQtyRzC!fvguq
z&_nuB$!cC$eZ-geky>Y~D_c)hP#TI>lMzvJ5qem~zQ>?wJrzOBKDmn3WNhYzV@6Ka
zlV0JfTum&<f>_N)MI0puz8JK3rKd%*S4cxcR#UZKYR!7oLQ>X~5yb41Icy+J(AFee
zi@_u$7K1W^gw<#!Ewe1pjl+6UGxAD;#8VMg8wfvu%FY_xIINdIg*t?vAchL{fz3jt
z4&f(A3~H*2Hm{q}fovV3+|>*^hYqXh5=1y=<O!6qo>v}aC?*0%CkWFz8^OerCG=kS
zOq&HBop9C3y&hkn`oLz<bGpH|4&iPg0}7?6e}!Ki!g<FGilrzSa?e+A_rZ7Zn{J@v
zV6fEf#IFwF6tr3&7#|L_SoDO%jNDulHG_t_qGfd8szbE#n556`K4egcd@ora*a|qZ
zo&jqyXbTbpC@q1vYQOQqs}4c(3|NU^F58AEa^l=4(MLH+YN4aFHMq9+h#Y56t`<1s
zBuHNd*aDECS=yk=W>ld}YLTN1@RrAUN`LPceu2N()jI#$Na!8Y<r`lx`AiH!^E^iE
y@5;S`k4og>QAlAZroJc%qkGLFV*euWfAbe68-cvk4{;L!0000<MNUMnLSTXnY3iN;
literal 0
HcmV?d00001
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 0a60d285b..e9181cbff 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -16,6 +16,7 @@
"audio.title": "Test your audio",
"audio.subtitle-desktop": "Confirm HMD speaker output",
"audio.subtitle-mobile": "Earphones are recommended",
- "audio.enter-now": "ENTER NOW"
+ "audio.enter-now": "ENTER NOW",
+ "audio.hmd-mic-warning": "Your HMD mic is not chosen"
}
}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 1fb46c0fb..34f77d3bb 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -28,6 +28,8 @@ const ENTRY_STEPS = {
finished: "finished"
}
+const HMD_MIC_REGEXES = [/\Wvive\W/i, /\Wrift\W/i];
+
async function grantedMicLabels() {
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
return mediaDevices.filter(d => d.label && d.kind === "audioinput").map(d => d.label);
@@ -399,6 +401,28 @@ class UIRoot extends Component {
this.setState({ micDevices: mediaDevices.filter(d => d.kind === "audioinput").map(d => ({ deviceId: d.deviceId, label: d.label }))});
}
+ shouldShowHmdMicWarning = () => {
+ if (mobiledetect.mobile()) return false;
+ if (!this.state.enterInVR) return false;
+ if (!this.hasHmdMicrophone()) return false;
+
+ return !(HMD_MIC_REGEXES.find(r => this.selectedMicLabel().match(r)));
+ }
+
+ hasHmdMicrophone = () => {
+ return !!(this.state.micDevices.find(d => HMD_MIC_REGEXES.find(r => d.label.match(r))));
+ }
+
+ selectedMicLabel = () => {
+ return (this.state.mediaStream
+ && this.state.mediaStream.getAudioTracks().length > 0
+ && this.state.mediaStream.getAudioTracks()[0].label) || "";
+ }
+
+ selectedMicDeviceId = () => {
+ return this.state.micDevices.filter(d => d.label === this.selectedMicLabel).map(d => d.deviceId)[0];
+ }
+
onAudioReadyButton = () => {
this.props.enterScene(this.state.mediaStream, this.state.enterInVR);
@@ -444,12 +468,6 @@ class UIRoot extends Component {
</div>
) : null;
- const selectedMicLabel = (this.state.mediaStream
- && this.state.mediaStream.getAudioTracks().length > 0
- && this.state.mediaStream.getAudioTracks()[0].label) || "";
-
- 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)` };
@@ -474,13 +492,21 @@ class UIRoot extends Component {
</div>
</div>
<div className="audio-setup-panel__device-chooser">
- <select className="audio-setup-panel__device-chooser__dropdown" value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
+ <select className="audio-setup-panel__device-chooser__dropdown" value={this.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" srcSet="./src/assets/images/mic_small@2x.png 2x"/>
</div>
</div>
+ { this.shouldShowHmdMicWarning() &&
+ (<div className="audio-setup-panel__hmd-mic-warning">
+ <img src="./src/assets/images/warning_icon.png" srcSet="./src/assets/images/warning_icon@2x.png 2x"
+ className="audio-setup-panel__hmd-mic-warning__icon"/>
+ <span className="audio-setup-panel__hmd-mic-warning__label">
+ <FormattedMessage id="audio.hmd-mic-warning"/>
+ </span>
+ </div>) }
<div className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
<FormattedMessage id="audio.enter-now"/>
</div>
diff --git a/src/room.scss b/src/room.scss
index 10386c8e6..ca82e47df 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -306,3 +306,15 @@ $darker-grey: rgba(64, 64, 64, 1.0);
z-index: 1;
}
+.audio-setup-panel__hmd-mic-warning {
+ margin: 20px;
+}
+
+.audio-setup-panel__hmd-mic-warning__label {
+ vertical-align: middle;
+ margin-left: 5px;
+}
+
+.audio-setup-panel__hmd-mic-warning__icon {
+ vertical-align: middle;
+}
--
GitLab