-
+ {this.props.availableVREntryTypes.screen !== VR_DEVICE_AVAILABILITY.no && (
+
+ )}
{this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && (
)}
@@ -626,7 +628,7 @@ class UIRoot extends Component {
}
/>
)}
-
+
{this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && (
diff --git a/src/utils/disable-ios-zoom.js b/src/utils/disable-ios-zoom.js
new file mode 100644
index 0000000000..c2d17104a6
--- /dev/null
+++ b/src/utils/disable-ios-zoom.js
@@ -0,0 +1,24 @@
+import MobileDetect from "mobile-detect";
+const mobiledetect = new MobileDetect(navigator.userAgent);
+
+export function disableiOSZoom() {
+ if (!mobiledetect.is("iPhone") && !mobiledetect.is("iPad")) return;
+
+ let lastTouchAtMs = 0;
+
+ document.addEventListener("touchmove", ev => {
+ if (ev.scale === 1) return;
+
+ ev.preventDefault();
+ });
+
+ document.addEventListener("touchend", ev => {
+ const now = new Date().getTime();
+ const isDoubleTouch = now - lastTouchAtMs <= 300;
+ lastTouchAtMs = now;
+
+ if (isDoubleTouch) {
+ ev.preventDefault();
+ }
+ });
+}
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index 79c425da26..3ab8f43706 100644
--- a/src/utils/vr-caps-detect.js
+++ b/src/utils/vr-caps-detect.js
@@ -35,15 +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 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.
@@ -51,6 +55,7 @@ export async function getAvailableVREntryTypes() {
const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser);
+ 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;
@@ -65,7 +70,8 @@ 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() ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no;
+ let daydream =
+ isMaybeDaydreamCompatibleDevice() && !isInHMD ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no;
if (isWebVRCapableBrowser) {
const displays = await navigator.getVRDisplays();
@@ -94,5 +100,5 @@ export async function getAvailableVREntryTypes() {
}
}
- return { generic, gearvr, daydream, cardboard };
+ return { screen, generic, gearvr, daydream, cardboard, isInHMD };
}
@@ -132,6 +137,13 @@ class HomeRoot extends Component {
