diff --git a/package.json b/package.json index f99e62b319..17e19241f5 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "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", + "naf-janus-adapter": "https://github.com/mozilla/naf-janus-adapter", "networked-aframe": "https://github.com/mozillareality/networked-aframe#mr-social-client/master", "nipplejs": "^0.6.7", "query-string": "^5.0.1", diff --git a/src/assets/stylesheets/exited.scss b/src/assets/stylesheets/exited.scss index 72959090e6..7c7bc5156a 100644 --- a/src/assets/stylesheets/exited.scss +++ b/src/assets/stylesheets/exited.scss @@ -39,3 +39,26 @@ } } +.fatal-error-panel { + display: flex; + flex-direction: column; + flex: 10 1 auto; + justify-content: flex-start; + align-items: center; + padding: 15px; + + &__title { + @extend %top-title; + } + + &__subtitle { + @extend %top-subtitle; + } + + &__cancel-button { + @extend %bottom-button; + margin-top: 20px; + cursor: pointer; + } +} + diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss index debc2b1885..c8e3b474f6 100644 --- a/src/assets/stylesheets/ui-root.scss +++ b/src/assets/stylesheets/ui-root.scss @@ -48,3 +48,18 @@ .ui-interactive { pointer-events: auto; } + +.ui-alert-container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.ui-alert-box { + background-color: $darker-transparent; + border-radius: 8px; + min-width: 200px; + max-width: 400px; +} diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 1757ec61cc..da823c430f 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -13,6 +13,7 @@ "entry.daydream-medium": "Daydream", "entry.daydream-via-chrome": "Using Google Chrome", "entry.enable-screen-sharing": "Share my desktop", + "entry.error-joining-room": "Error Joining Room", "profile.save": "SAVE", "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32", "profile.header": "Your identity", diff --git a/src/hub.js b/src/hub.js index 9dc3247e3a..fcaeba6b25 100644 --- a/src/hub.js +++ b/src/hub.js @@ -186,7 +186,7 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) { }); if (!qsTruthy("offline")) { - scene.components["networked-scene"].connect(); + const connectPromise = scene.components["networked-scene"].connect(); if (mediaStream) { NAF.connection.adapter.setLocalMediaStream(mediaStream); @@ -206,6 +206,9 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) { sceneEl.appendChild(screenEntity); } } + return connectPromise; + } else { + return Promise.resolve(); } } diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 282f4b4572..d1a51d4245 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -464,7 +464,10 @@ class UIRoot extends Component { }; onAudioReadyButton = () => { - this.props.enterScene(this.state.mediaStream, this.state.enterInVR, this.state.janusRoomId); + this.props.enterScene(this.state.mediaStream, this.state.enterInVR, this.state.janusRoomId).catch(e => { + this.setState({ fatalError: e }); + this.exit(); + }); const mediaStream = this.state.mediaStream; @@ -489,6 +492,25 @@ class UIRoot extends Component { }; render() { + if (this.state.fatalError) { + return ( + +
+
+
+
+
+ +
+
{this.state.fatalError}
+
+
+
+
+
+ ); + } + if (!this.state.initialEnvironmentLoaded || !this.state.availableVREntryTypes || !this.state.janusRoomId) { return (