diff --git a/src/hub.js b/src/hub.js index 26b9e1f368908a0b94a4612193cd722d1b11f38b..3d3098cf282ddd4d7677d925523ed9b391e8eabb 100644 --- a/src/hub.js +++ b/src/hub.js @@ -308,8 +308,24 @@ const onReady = async () => { } }; + const getPlatformUnsupportedReason = () => { + if (typeof RTCDataChannelEvent === "undefined") { + return "no_data_channels"; + } + + return null; + }; + remountUI({ enterScene, exitScene }); + const platformUnsupportedReason = getPlatformUnsupportedReason(); + + if (platformUnsupportedReason) { + remountUI({ platformUnsupportedReason: platformUnsupportedReason }); + exitScene(); + return; + } + getAvailableVREntryTypes().then(availableVREntryTypes => { remountUI({ availableVREntryTypes }); }); diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 43d39ba0a1e442f55dc095b29e63b64096be68ae..70a26a79850fd6b45150603fda962c50e60a51ec 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -69,6 +69,7 @@ class UIRoot extends Component { initialEnvironmentLoaded: PropTypes.bool, janusRoomId: PropTypes.number, roomUnavailableReason: PropTypes.string, + platformUnsupportedReason: PropTypes.string, hubName: PropTypes.string, occupantCount: PropTypes.number }; @@ -512,18 +513,9 @@ class UIRoot extends Component { }; render() { - if (this.state.exited || this.props.roomUnavailableReason) { + if (this.state.exited || this.props.roomUnavailableReason || this.props.platformUnsupportedReason) { let subtitle = null; - if (this.props.roomUnavailableReason !== "closed") { - const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : this.props.roomUnavailableReason}`; - subtitle = ( - <div> - <FormattedMessage id={exitSubtitleId} /> - <p /> - You can also <a href="/">create a new room</a>. - </div> - ); - } else { + if (this.props.roomUnavailableReason === "closed") { // TODO i18n, due to links and markup subtitle = ( <div> @@ -540,6 +532,33 @@ class UIRoot extends Component { <a href="https://github.com/mozilla/hubs">Github</a>. </div> ); + } else if (this.props.platformUnsupportedReason === "no_data_channels") { + // TODO i18n, due to links and markup + subtitle = ( + <div> + Your browser does not support{" "} + <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel" rel="noreferrer noopener"> + WebRTC Data Channels + </a>, which is required to use Hubs. + <p /> + You can <a href="https://firefox.com">Download Firefox</a>, a browser that protects your privacy and works + great with Hubs. + </div> + ); + } else { + const reason = this.props.roomUnavailableReason || this.props.platformUnsupportedReason; + const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : reason}`; + subtitle = ( + <div> + <FormattedMessage id={exitSubtitleId} /> + <p /> + {this.props.roomUnavailableReason && ( + <div> + You can also <a href="/">create a new room</a>. + </div> + )} + </div> + ); } return (