From 4c64571234cd839de2644412495798c95acb38d2 Mon Sep 17 00:00:00 2001 From: Kevin Lee Date: Mon, 18 Jun 2018 18:13:25 -0700 Subject: [PATCH 1/3] Check if browser is an iOS uiWebView If it is, don't allow user to enter in 2D. Instead, prompt the user to copy the URL and open it in Safari. --- src/assets/translations.data.json | 1 + src/react-components/entry-buttons.js | 11 ++++++++++ src/react-components/info-dialog.js | 30 +++++++++++++++++++++++++++ src/react-components/ui-root.js | 17 +++++++++++++-- src/utils/vr-caps-detect.js | 12 +++++++++-- 5 files changed, 67 insertions(+), 4 deletions(-) diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 0201cf0fca..79d1159954 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -3,6 +3,7 @@ "entry.screen-prefix": "Enter on ", "entry.desktop-screen": "Screen", "entry.mobile-screen": "Phone", + "entry.mobile-safari": "Safari", "entry.generic-prefix": "Enter in ", "entry.generic-medium": "VR", "entry.generic-subtitle-desktop": "Oculus or SteamVR", diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js index 9e8302b3c7..f2551df70f 100644 --- a/src/react-components/entry-buttons.js +++ b/src/react-components/entry-buttons.js @@ -87,6 +87,17 @@ export const DaydreamEntryButton = props => { return ; }; +export const SafariEntryButton = props => { + const entryButtonProps = { + ...props, + iconSrc: MobileScreenEntryImg, + prefixMessageId: "entry.screen-prefix", + mediumMessageId: "entry.mobile-safari" + }; + + return ; +}; + export const DeviceEntryButton = props => { const entryButtonProps = { ...props, diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js index 7a48099b40..5f0f6bd93c 100644 --- a/src/react-components/info-dialog.js +++ b/src/react-components/info-dialog.js @@ -13,6 +13,7 @@ class InfoDialog extends Component { slack: Symbol("slack"), email_submitted: Symbol("email_submitted"), invite: Symbol("invite"), + safari: Symbol(""), updates: Symbol("updates"), report: Symbol("report"), help: Symbol("help"), @@ -155,6 +156,35 @@ class InfoDialog extends Component { ); break; + case InfoDialog.dialogTypes.safari: + dialogTitle = "Open in Safari"; + dialogBody = ( +
+
+ Hubs is not supported in your current browser on iOS. Copy and paste this link directly in Safari. +
+
+ e.target.select()} + value={document.location} + className="invite-form__link_field" + /> +
+ {navigator.share && ( + + )} + +
+
+
+ ); + break; case InfoDialog.dialogTypes.updates: dialogTitle = ""; dialogBody = ( diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index cb69c63436..c291c9a616 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -11,7 +11,13 @@ import screenfull from "screenfull"; import { lang, messages } from "../utils/i18n"; import AutoExitWarning from "./auto-exit-warning"; -import { TwoDEntryButton, DeviceEntryButton, GenericEntryButton, DaydreamEntryButton } from "./entry-buttons.js"; +import { + TwoDEntryButton, + DeviceEntryButton, + GenericEntryButton, + DaydreamEntryButton, + SafariEntryButton +} from "./entry-buttons.js"; import { ProfileInfoHeader } from "./profile-info-header.js"; import ProfileEntryPanel from "./profile-entry-panel"; import InfoDialog from "./info-dialog.js"; @@ -260,6 +266,10 @@ class UIRoot extends Component { await this.performDirectEntryFlow(false); }; + linkSafari = async () => { + this.setState({ infoDialogType: InfoDialog.dialogTypes.safari }); + }; + enterVR = async () => { if (this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.maybe) { await this.performDirectEntryFlow(true); @@ -612,9 +622,12 @@ class UIRoot extends Component { this.state.entryStep === ENTRY_STEPS.start ? (
- {this.props.availableVREntryTypes.screen !== VR_DEVICE_AVAILABILITY.no && ( + {this.props.availableVREntryTypes.screen === VR_DEVICE_AVAILABILITY.yes && ( )} + {this.props.availableVREntryTypes.safari === VR_DEVICE_AVAILABILITY.maybe && ( + + )} {this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && ( )} diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js index 224f1bb49b..8953f12a86 100644 --- a/src/utils/vr-caps-detect.js +++ b/src/utils/vr-caps-detect.js @@ -57,8 +57,16 @@ export async function getAvailableVREntryTypes() { const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser); const isIDevice = ["iPhone", "iPad", "iPod"].indexOf(deviceDetect.device) > -1; const isFirefoxBrowser = browser.name === "firefox"; + const isUIWebView = typeof navigator.mediaDevices === "undefined"; + + const safari = isIDevice + ? !isUIWebView ? VR_DEVICE_AVAILABILITY.yes : VR_DEVICE_AVAILABILITY.maybe + : VR_DEVICE_AVAILABILITY.no; + + const screen = isInHMD + ? VR_DEVICE_AVAILABILITY.no + : isIDevice && isUIWebView ? VR_DEVICE_AVAILABILITY.maybe : 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; @@ -107,5 +115,5 @@ export async function getAvailableVREntryTypes() { } } - return { screen, generic, gearvr, daydream, cardboard, isInHMD }; + return { screen, generic, gearvr, daydream, cardboard, isInHMD, safari }; } From 5dd3ba9362a8deee59862d93727b745e62c1f970 Mon Sep 17 00:00:00 2001 From: Kevin Lee Date: Mon, 18 Jun 2018 18:34:02 -0700 Subject: [PATCH 2/3] use the same url as in the form when copying --- src/react-components/info-dialog.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js index 5f0f6bd93c..e6aca2306d 100644 --- a/src/react-components/info-dialog.js +++ b/src/react-components/info-dialog.js @@ -63,8 +63,8 @@ class InfoDialog extends Component { }); }; - copyLinkClicked = () => { - copy(this.shareLink); + copyLinkClicked = link => { + copy(link); this.setState({ copyLinkButtonText: "Copied!" }); }; @@ -148,7 +148,10 @@ class InfoDialog extends Component { Share )} -
@@ -172,12 +175,10 @@ class InfoDialog extends Component { className="invite-form__link_field" />
- {navigator.share && ( - - )} -
From 9f39dacfe037014bf13e6d89cb069716d69fc67c Mon Sep 17 00:00:00 2001 From: Kevin Lee Date: Mon, 18 Jun 2018 18:36:23 -0700 Subject: [PATCH 3/3] changes requested from PR --- src/react-components/info-dialog.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js index e6aca2306d..a04127ff74 100644 --- a/src/react-components/info-dialog.js +++ b/src/react-components/info-dialog.js @@ -13,7 +13,7 @@ class InfoDialog extends Component { slack: Symbol("slack"), email_submitted: Symbol("email_submitted"), invite: Symbol("invite"), - safari: Symbol(""), + safari: Symbol("safari"), updates: Symbol("updates"), report: Symbol("report"), help: Symbol("help"), @@ -163,9 +163,7 @@ class InfoDialog extends Component { dialogTitle = "Open in Safari"; dialogBody = (
-
- Hubs is not supported in your current browser on iOS. Copy and paste this link directly in Safari. -
+
Hubs does not support your current browser on iOS. Copy and paste this link directly in Safari.