From f7a5aa32831b923b448d239925b538a0713d622b Mon Sep 17 00:00:00 2001
From: Marshall Quander <marshall@quander.me>
Date: Mon, 16 Jul 2018 22:25:05 -0700
Subject: [PATCH] Don't use redundant device detection packages
We already use the A-Frame utilities for this elsewhere, anyway.
---
package.json | 2 --
src/react-components/entry-buttons.js | 13 +++++--------
src/react-components/ui-root.js | 15 +++++----------
src/utils/disable-ios-zoom.js | 5 +----
src/utils/vr-caps-detect.js | 7 ++-----
yarn.lock | 8 --------
6 files changed, 13 insertions(+), 37 deletions(-)
diff --git a/package.json b/package.json
index e001174a0..2961d685c 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,9 @@
"copy-to-clipboard": "^3.0.8",
"copy-webpack-plugin": "^4.5.1",
"detect-browser": "^2.1.0",
- "device-detect": "^1.0.7",
"event-target-shim": "^3.0.1",
"form-urlencoded": "^2.0.4",
"jsonschema": "^1.2.2",
- "mobile-detect": "^1.4.1",
"moment": "^2.22.0",
"moment-timezone": "^0.5.14",
"moving-average": "^1.0.0",
diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js
index f2551df70..d2bddfd90 100644
--- a/src/react-components/entry-buttons.js
+++ b/src/react-components/entry-buttons.js
@@ -1,7 +1,6 @@
import React from "react";
import { FormattedMessage } from "react-intl";
import PropTypes from "prop-types";
-import MobileDetect from "mobile-detect";
import MobileScreenEntryImg from "../assets/images/mobile_screen_entry.svg";
import DesktopScreenEntryImg from "../assets/images/desktop_screen_entry.svg";
@@ -10,8 +9,6 @@ import GearVREntryImg from "../assets/images/gearvr_entry.svg";
import DaydreamEntryImg from "../assets/images/daydream_entry.svg";
import DeviceEntryImg from "../assets/images/device_entry.svg";
-const mobiledetect = new MobileDetect(navigator.userAgent);
-
const EntryButton = props => (
<button className="entry-button" onClick={props.onClick}>
<img src={props.iconSrc} className="entry-button__icon" />
@@ -45,9 +42,9 @@ EntryButton.propTypes = {
export const TwoDEntryButton = props => {
const entryButtonProps = {
...props,
- iconSrc: mobiledetect.mobile() ? MobileScreenEntryImg : DesktopScreenEntryImg,
+ iconSrc: AFRAME.utils.device.isMobile() ? MobileScreenEntryImg : DesktopScreenEntryImg,
prefixMessageId: "entry.screen-prefix",
- mediumMessageId: mobiledetect.mobile() ? "entry.mobile-screen" : "entry.desktop-screen"
+ mediumMessageId: AFRAME.utils.device.isMobile() ? "entry.mobile-screen" : "entry.desktop-screen"
};
return <EntryButton {...entryButtonProps} />;
@@ -59,7 +56,7 @@ export const GenericEntryButton = props => {
iconSrc: GenericVREntryImg,
prefixMessageId: "entry.generic-prefix",
mediumMessageId: "entry.generic-medium",
- subtitle: mobiledetect.mobile() ? null : "entry.generic-subtitle-desktop"
+ subtitle: AFRAME.utils.device.isMobile() ? null : "entry.generic-subtitle-desktop"
};
return <EntryButton {...entryButtonProps} />;
@@ -102,13 +99,13 @@ export const DeviceEntryButton = props => {
const entryButtonProps = {
...props,
iconSrc: DeviceEntryImg,
- prefixMessageId: mobiledetect.mobile() ? "entry.device-prefix-mobile" : "entry.device-prefix-desktop",
+ prefixMessageId: AFRAME.utils.device.isMobile() ? "entry.device-prefix-mobile" : "entry.device-prefix-desktop",
mediumMessageId: "entry.device-medium"
};
entryButtonProps.subtitle = entryButtonProps.isInHMD
? "entry.device-subtitle-vr"
- : mobiledetect.mobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop";
+ : AFRAME.utils.device.isMobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop";
return <EntryButton {...entryButtonProps} />;
};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index c0733064a..ce6358cb8 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
import classNames from "classnames";
import { VR_DEVICE_AVAILABILITY } from "../utils/vr-caps-detect";
import queryString from "query-string";
-import MobileDetect from "mobile-detect";
import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import MovingAverage from "moving-average";
@@ -27,8 +26,6 @@ import Footer from "./footer";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion";
-const mobiledetect = new MobileDetect(navigator.userAgent);
-
addLocaleData([...en]);
const ENTRY_STEPS = {
@@ -456,7 +453,7 @@ class UIRoot extends Component {
};
shouldShowHmdMicWarning = () => {
- if (mobiledetect.mobile()) return false;
+ if (AFRAME.utils.device.isMobile()) return false;
if (!this.state.enterInVR) return false;
if (!this.hasHmdMicrophone()) return false;
@@ -484,7 +481,7 @@ class UIRoot extends Component {
};
onAudioReadyButton = () => {
- if (mobiledetect.mobile() && !this.state.enterInVR && screenfull.enabled) {
+ if (AFRAME.utils.device.isMobile() && !this.state.enterInVR && screenfull.enabled) {
screenfull.request();
}
@@ -613,7 +610,7 @@ class UIRoot extends Component {
// Only show this in desktop firefox since other browsers/platforms will ignore the "screen" media constraint and
// will attempt to share your webcam instead!
const screenSharingCheckbox = this.props.enableScreenSharing &&
- !mobiledetect.mobile() &&
+ !AFRAME.utils.device.isMobile() &&
/firefox/i.test(navigator.userAgent) && (
<label className="entry-panel__screen-sharing">
<input
@@ -699,7 +696,7 @@ class UIRoot extends Component {
clip: `rect(${maxLevelHeight - Math.floor(this.state.micLevel * maxLevelHeight)}px, 111px, 111px, 0px)`
};
const speakerClip = { clip: `rect(${this.state.tonePlaying ? 0 : maxLevelHeight}px, 111px, 111px, 0px)` };
-
+ const subtitleId = AFRAME.utils.device.isMobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop";
const audioSetupPanel =
this.state.entryStep === ENTRY_STEPS.audio_setup ? (
<div className="audio-setup-panel">
@@ -708,9 +705,7 @@ class UIRoot extends Component {
<FormattedMessage id="audio.title" />
</div>
<div className="audio-setup-panel__subtitle">
- {(mobiledetect.mobile() || this.state.enterInVR) && (
- <FormattedMessage id={mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop"} />
- )}
+ {(AFRAME.utils.device.isMobile() || this.state.enterInVR) && <FormattedMessage id={subtitleId} />}
</div>
<div className="audio-setup-panel__levels">
<div className="audio-setup-panel__levels__icon">
diff --git a/src/utils/disable-ios-zoom.js b/src/utils/disable-ios-zoom.js
index c2d17104a..b80639e5b 100644
--- a/src/utils/disable-ios-zoom.js
+++ b/src/utils/disable-ios-zoom.js
@@ -1,8 +1,5 @@
-import MobileDetect from "mobile-detect";
-const mobiledetect = new MobileDetect(navigator.userAgent);
-
export function disableiOSZoom() {
- if (!mobiledetect.is("iPhone") && !mobiledetect.is("iPad")) return;
+ if (!AFRAME.utils.device.isIOS()) return;
let lastTouchAtMs = 0;
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index 8953f12a8..de3c29143 100644
--- a/src/utils/vr-caps-detect.js
+++ b/src/utils/vr-caps-detect.js
@@ -1,9 +1,6 @@
const { detect } = require("detect-browser");
-import MobileDetect from "mobile-detect";
const browser = detect();
-const deviceDetect = require("device-detect")();
-const mobiledetect = new MobileDetect(navigator.userAgent);
// Precision on device detection is fuzzy -- we can sometimes know if a device is definitely
// available, or definitely *not* available, and assume it may be available otherwise.
@@ -55,7 +52,7 @@ export async function getAvailableVREntryTypes() {
const isWebVRCapableBrowser = window.hasNativeWebVRImplementation;
const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser);
- const isIDevice = ["iPhone", "iPad", "iPod"].indexOf(deviceDetect.device) > -1;
+ const isIDevice = AFRAME.utils.device.isIOS();
const isFirefoxBrowser = browser.name === "firefox";
const isUIWebView = typeof navigator.mediaDevices === "undefined";
@@ -67,7 +64,7 @@ export async function getAvailableVREntryTypes() {
? VR_DEVICE_AVAILABILITY.no
: isIDevice && isUIWebView ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.yes;
- let generic = mobiledetect.mobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe;
+ let generic = AFRAME.utils.device.isMobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe;
let cardboard = VR_DEVICE_AVAILABILITY.no;
// We only consider GearVR support as "maybe" and never "yes". The only browser
diff --git a/yarn.lock b/yarn.lock
index 7ccb0efec..939764a43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2627,10 +2627,6 @@ detective@^5.0.2:
defined "^1.0.0"
minimist "^1.1.1"
-device-detect@^1.0.7:
- version "1.0.7"
- resolved "https://registry.yarnpkg.com/device-detect/-/device-detect-1.0.7.tgz#d4f1aa2fc3afbbc7d4b4dc182b9822dffc50a708"
-
diff@^2.1.2:
version "2.2.3"
resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
@@ -5366,10 +5362,6 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
dependencies:
minimist "0.0.8"
-mobile-detect@^1.4.1:
- version "1.4.1"
- resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.1.tgz#f4b67c49bb84bf0437f72e3067deb1c60ad7b23c"
-
module-deps@^4.0.8:
version "4.1.1"
resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-4.1.1.tgz#23215833f1da13fd606ccb8087b44852dcb821fd"
--
GitLab