diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js index a991c988394383534e61e1d78b95210a86257c6f..9e8302b3c7bbf9bd44edbaf6538100f11abf3fb8 100644 --- a/src/react-components/entry-buttons.js +++ b/src/react-components/entry-buttons.js @@ -39,7 +39,7 @@ EntryButton.propTypes = { prefixMessageId: PropTypes.string, mediumMessageId: PropTypes.string, subtitle: PropTypes.string, - isInVR: PropTypes.bool + isInHMD: PropTypes.bool }; export const TwoDEntryButton = props => { @@ -95,7 +95,7 @@ export const DeviceEntryButton = props => { mediumMessageId: "entry.device-medium" }; - entryButtonProps.subtitle = entryButtonProps.isInVR + entryButtonProps.subtitle = entryButtonProps.isInHMD ? "entry.device-subtitle-vr" : mobiledetect.mobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop"; diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 863ccbd97af406e219759096737abf8157872140..cb69c63436f8d9d72479fc10e9ce541d5fde2ceb 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -628,7 +628,7 @@ class UIRoot extends Component { } /> )} - <DeviceEntryButton onClick={this.attemptLink} isInVR={this.props.availableVREntryTypes.isInVR} /> + <DeviceEntryButton onClick={this.attemptLink} isInHMD={this.props.availableVREntryTypes.isInHMD} /> {this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && ( <div className="entry-panel__secondary" onClick={this.enterVR}> <FormattedMessage id="entry.cardboard" /> diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js index c24aa25cb0b2c37922a7e5e00421641f2302b57c..3ab8f4370638e49ccea8389f99e14bdac2c1db43 100644 --- a/src/utils/vr-caps-detect.js +++ b/src/utils/vr-caps-detect.js @@ -35,16 +35,19 @@ const GENERIC_ENTRY_TYPE_DEVICE_BLACKLIST = [/cardboard/i]; // Once in a compatible browser, we should assume it will work (if it doesn't, it's because they don't have the headset, // haven't installed the software, our guess about their phone was wrong, etc.) // -// At the time of this writing there are three VR "entry types" that will be validated by this method: +// At the time of this writing there are the following VR "entry types" that will be validated by this method: // +// - screen: Enter "on-screen" in 2D // - generic: Generic WebVR (platform/OS agnostic indicator if a general 'Enter VR' option should be presented.) // - daydream: Google Daydream // - gearvr: Oculus GearVR +// - cardboard: Google Cardboard // +// This function also detects if the user is already in a headset, and returns the isInHMD key to be `true` if so. export async function getAvailableVREntryTypes() { const isSamsungBrowser = browser.name === "chrome" && navigator.userAgent.match(/SamsungBrowser/); const isOculusBrowser = navigator.userAgent.match(/Oculus/); - const isInVR = isOculusBrowser; + const isInHMD = isOculusBrowser; // This needs to be kept up-to-date with the latest browsers that can support VR and Hubs. // Checking for navigator.getVRDisplays always passes b/c of polyfill. @@ -52,7 +55,7 @@ export async function getAvailableVREntryTypes() { const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser); - const screen = isInVR ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.yes; + const screen = isInHMD ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.yes; let generic = mobiledetect.mobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe; let cardboard = VR_DEVICE_AVAILABILITY.no; @@ -68,7 +71,7 @@ export async function getAvailableVREntryTypes() { // For daydream detection, we first check if they are on an Android compatible device, and assume they // may support daydream *unless* this browser has WebVR capabilities, in which case we can do better. let daydream = - isMaybeDaydreamCompatibleDevice() && !isInVR ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no; + isMaybeDaydreamCompatibleDevice() && !isInHMD ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no; if (isWebVRCapableBrowser) { const displays = await navigator.getVRDisplays(); @@ -97,5 +100,5 @@ export async function getAvailableVREntryTypes() { } } - return { screen, generic, gearvr, daydream, cardboard, isInVR }; + return { screen, generic, gearvr, daydream, cardboard, isInHMD }; }