diff --git a/src/assets/images/warning_icon.png b/src/assets/images/warning_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..d0394f96acda411c490f5ae224df90c6c2fdd802 Binary files /dev/null and b/src/assets/images/warning_icon.png differ 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 Binary files /dev/null and b/src/assets/images/warning_icon@2x.png differ diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 0a60d285b10eb4852b5468732e83adeb46c8aed7..e9181cbff67656891284684c3b82c2011e93acfd 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 1fb46c0fb034dcbbfc54130ec609538da16edf75..34f77d3bb13ea0bcbb5b3ca9b3497623f259caa8 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 10386c8e6d691a4cba7346729e8bdca0e8fcd2eb..ca82e47df2f0dee806773ae52468bcd5743894f4 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; +}