Detect iPadOS as iOS

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 = [];

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 () => {

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) {

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() {

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) {

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.

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";