From 79b115695e7aee904ebd8dfc77f17528b701ef4c Mon Sep 17 00:00:00 2001 From: Takahiro Date: Fri, 1 Oct 2021 13:10:42 -0700 Subject: [PATCH] Detect iPadOS as iOS --- src/components/media-video.js | 3 ++- src/react-components/ui-root.js | 8 ++------ src/scene-entry-manager.js | 3 ++- src/utils/fullscreen.js | 7 ++----- src/utils/is-mobile.js | 9 +++++++-- src/utils/media-utils.js | 3 ++- src/utils/vr-caps-detect.js | 4 +++- 7 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/media-video.js b/src/components/media-video.js index 5794964c93..76b5948318 100644 --- a/src/components/media-video.js +++ b/src/components/media-video.js @@ -20,13 +20,14 @@ import { SourceType, AudioType } from "./audio-params"; import { errorTexture } from "../utils/error-texture"; import { scaleToAspectRatio } from "../utils/scale-to-aspect-ratio"; import { isSafari } from "../utils/detect-safari"; +import { isIOS as detectIOS } from "../utils/is-mobile"; import qsTruthy from "../utils/qs_truthy"; const ONCE_TRUE = { once: true }; const TYPE_IMG_PNG = { type: "image/png" }; -const isIOS = AFRAME.utils.device.isIOS(); +const isIOS = detectIOS(); const audioIconTexture = new HubsTextureLoader().load(audioIcon); export const VOLUME_LABELS = []; diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index c18927989f..82a597d13a 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -22,6 +22,7 @@ import StateRoute from "./state-route.js"; import { getPresenceProfileForSession, hubUrl } from "../utils/phoenix-utils"; import { getMicrophonePresences } from "../utils/microphone-presence"; import { getCurrentStreamer } from "../utils/component-utils"; +import { isIOS } from "../utils/is-mobile"; import ProfileEntryPanel from "./profile-entry-panel"; import MediaBrowserContainer from "./media-browser"; @@ -606,12 +607,7 @@ class UIRoot extends Component { shouldShowFullScreen = () => { // Disable full screen on iOS, since Safari's fullscreen mode does not let you prevent native pinch-to-zoom gestures. - return ( - (isMobile || AFRAME.utils.device.isMobileVR()) && - !AFRAME.utils.device.isIOS() && - !this.state.enterInVR && - screenfull.enabled - ); + return (isMobile || AFRAME.utils.device.isMobileVR()) && !isIOS() && !this.state.enterInVR && screenfull.enabled; }; onAudioReadyButton = async () => { diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js index 2f2e75baea..e776541e86 100644 --- a/src/scene-entry-manager.js +++ b/src/scene-entry-manager.js @@ -2,6 +2,7 @@ import qsTruthy from "./utils/qs_truthy"; import nextTick from "./utils/next-tick"; import pinnedEntityToGltf from "./utils/pinned-entity-to-gltf"; import { hackyMobileSafariTest } from "./utils/detect-touchscreen"; +import { isIOS as detectIOS } from "./utils/is-mobile"; import { SignInMessages } from "./react-components/auth/SignInModal"; const isBotMode = qsTruthy("bot"); @@ -22,7 +23,7 @@ import { ObjectContentOrigins } from "./object-types"; import { getAvatarSrc, getAvatarType } from "./utils/avatar-utils"; import { SOUND_ENTER_SCENE } from "./systems/sound-effects-system"; -const isIOS = AFRAME.utils.device.isIOS(); +const isIOS = detectIOS(); export default class SceneEntryManager { constructor(hubChannel, authChannel, history) { diff --git a/src/utils/fullscreen.js b/src/utils/fullscreen.js index 0423bb7a6e..15056e4731 100644 --- a/src/utils/fullscreen.js +++ b/src/utils/fullscreen.js @@ -1,14 +1,11 @@ import screenfull from "screenfull"; +import { isIOS } from "./is-mobile"; let hasEnteredFullScreenThisSession = false; function shouldShowFullScreen() { // Disable full screen on iOS, since Safari's fullscreen mode does not let you prevent native pinch-to-zoom gestures. - return ( - (AFRAME.utils.device.isMobile() || AFRAME.utils.device.isMobileVR()) && - !AFRAME.utils.device.isIOS() && - screenfull.enabled - ); + return (AFRAME.utils.device.isMobile() || AFRAME.utils.device.isMobileVR()) && !isIOS() && screenfull.enabled; } export function willRequireUserGesture() { diff --git a/src/utils/is-mobile.js b/src/utils/is-mobile.js index c6ffd9459d..f2cc06f783 100644 --- a/src/utils/is-mobile.js +++ b/src/utils/is-mobile.js @@ -1,8 +1,13 @@ import { hackyMobileSafariTest } from "./detect-touchscreen"; +// from https://stackoverflow.com/questions/57776001/how-to-detect-ipad-pro-as-ipad-using-javascript +function isIpadOS() { + return window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform); +} + // lifted from https://github.com/aframevr/aframe/blob/master/src/utils/device.js to ensure consistency -function isIOS() { - return /iPad|iPhone|iPod/.test(window.navigator.platform); +export function isIOS() { + return /iPad|iPhone|iPod/.test(window.navigator.platform) || isIpadOS(); } function isTablet(mockUserAgent) { diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 09f70c5ae4..af78933c25 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -6,6 +6,7 @@ import { mapMaterials } from "./material-utils"; import HubsTextureLoader from "../loaders/HubsTextureLoader"; import { validMaterials } from "../components/hoverable-visuals"; import { proxiedUrlFor, guessContentType } from "../utils/media-url-utils"; +import { isIOS as detectIOS } from "./is-mobile"; import Linkify from "linkify-it"; import tlds from "tlds"; @@ -453,7 +454,7 @@ export async function createImageTexture(url, filter) { return texture; } -const isIOS = AFRAME.utils.device.isIOS(); +const isIOS = detectIOS(); /** * Create video element to be used as a texture. diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js index fca64d3d00..2dd5dd353c 100644 --- a/src/utils/vr-caps-detect.js +++ b/src/utils/vr-caps-detect.js @@ -1,3 +1,5 @@ +import { isIOS } from "./is-mobile"; + const { detect } = require("detect-browser"); const browser = detect(); @@ -53,7 +55,7 @@ export async function getAvailableVREntryTypes() { const isWebXRCapableBrowser = window.hasNativeWebXRImplementation; const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser); - const isIDevice = AFRAME.utils.device.isIOS(); + const isIDevice = isIOS(); const isFirefoxBrowser = browser.name === "firefox"; const isUIWebView = typeof navigator.mediaDevices === "undefined";