From 179acd7e4786565d3dc43d8815fef20dafa6a39e Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 3 Aug 2024 15:59:44 +0530 Subject: [PATCH] Prune more --- .../components/Upload/UploadTypeSelector.tsx | 28 ++-------- .../components/pages/sharedAlbum/GoToEnte.tsx | 21 ++------ .../src/utils/common/deviceDetection.ts | 53 ------------------- web/packages/base/hooks.ts | 16 ++++++ 4 files changed, 24 insertions(+), 94 deletions(-) delete mode 100644 web/apps/photos/src/utils/common/deviceDetection.ts diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx index 3e18a7fe48..b5eb1d93fd 100644 --- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx +++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx @@ -1,3 +1,4 @@ +import { useIsTouchscreen } from "@/base/hooks"; import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton"; import DialogTitleWithCloseButton, { DialogTitleWithCloseButtonSm, @@ -8,14 +9,7 @@ import ChevronRight from "@mui/icons-material/ChevronRight"; import GoogleIcon from "@mui/icons-material/Google"; import { default as FileUploadIcon } from "@mui/icons-material/ImageOutlined"; import { default as FolderUploadIcon } from "@mui/icons-material/PermMediaOutlined"; -import { - Box, - Dialog, - Link, - Stack, - Typography, - useMediaQuery, -} from "@mui/material"; +import { Box, Dialog, Link, Stack, Typography } from "@mui/material"; import { t } from "i18next"; import React, { useContext, useEffect, useState } from "react"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; @@ -55,22 +49,8 @@ export const UploadTypeSelector: React.FC = ({ PublicCollectionGalleryContext, ); - // Directly show the file selector on mobile devices. - // - // [Note: Heuristic isMobileOrTablet check using pointer media query] - // - // The absence of fine-resolution pointing device can be taken a quick and - // proxy for detecting if the user is using a mobile or tablet. - // - // This is of course not going to work in all scenarios (e.g. someone - // connecting their mice to their tablet), but ad-hoc user agent checks are - // not problem free either. This media query should be accurate enough for - // cases where false positives will degrade gracefully. - // - // See: https://github.com/mui/mui-x/issues/10039 - const directlyShowUploadFiles = useMediaQuery( - "(hover: none) and (pointer: coarse)", - ); + // Directly show the file selector on likely mobile devices. + const directlyShowUploadFiles = useIsTouchscreen(); useEffect(() => { if ( diff --git a/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx b/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx index 6df4c357fb..f00b5afcd6 100644 --- a/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx +++ b/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx @@ -1,7 +1,6 @@ +import { useIsTouchscreen } from "@/base/hooks"; import { Button, styled } from "@mui/material"; import { t } from "i18next"; -import { useEffect, useState } from "react"; -import { OS, getDeviceOS } from "utils/common/deviceDetection"; export const NoStyleAnchor = styled("a")` color: inherit; @@ -12,20 +11,8 @@ export const NoStyleAnchor = styled("a")` `; function GoToEnte() { - const [os, setOS] = useState(OS.UNKNOWN); - - useEffect(() => { - const os = getDeviceOS(); - setOS(os); - }, []); - - const getButtonText = (os: OS) => { - if (os === OS.ANDROID || os === OS.IOS) { - return t("INSTALL"); - } else { - return t("SIGN_UP"); - } - }; + // Touchscreen devices are overwhemingly likely to be Android or iOS. + const isTouchscreen = useIsTouchscreen(); return ( ); } diff --git a/web/apps/photos/src/utils/common/deviceDetection.ts b/web/apps/photos/src/utils/common/deviceDetection.ts deleted file mode 100644 index 280a6176e5..0000000000 --- a/web/apps/photos/src/utils/common/deviceDetection.ts +++ /dev/null @@ -1,53 +0,0 @@ -export enum OS { - WP = "wp", - ANDROID = "android", - IOS = "ios", - UNKNOWN = "unknown", - WINDOWS = "windows", - MAC = "mac", - LINUX = "linux", -} - -declare global { - interface Window { - opera: any; - MSStream: any; - } -} - -export const getDeviceOS = () => { - let userAgent = ""; - if ( - typeof window !== "undefined" && - typeof window.navigator !== "undefined" - ) { - userAgent = navigator.userAgent || navigator.vendor || window.opera; - } - // Windows Phone must come first because its UA also contains "Android" - if (/windows phone/i.test(userAgent)) { - return OS.WP; - } - - if (/android/i.test(userAgent)) { - return OS.ANDROID; - } - - // iOS detection from: http://stackoverflow.com/a/9039885/177710 - if (/(iPad|iPhone|iPod)/g.test(userAgent) && !window.MSStream) { - return OS.IOS; - } - - // credit: https://github.com/MikeKovarik/platform-detect/blob/master/os.mjs - if (userAgent.includes("Windows")) { - return OS.WINDOWS; - } - if (userAgent.includes("Macintosh")) { - return OS.MAC; - } - // Linux must be last - if (userAgent.includes("Linux")) { - return OS.LINUX; - } - - return OS.UNKNOWN; -}; diff --git a/web/packages/base/hooks.ts b/web/packages/base/hooks.ts index 1fd954377c..686b4cb870 100644 --- a/web/packages/base/hooks.ts +++ b/web/packages/base/hooks.ts @@ -8,3 +8,19 @@ import { useMediaQuery, useTheme } from "@mui/material"; */ export const useIsMobileWidth = () => useMediaQuery(useTheme().breakpoints.down("sm")); + +/** + * Heuristic "isMobileOrTablet" check using a pointer media query. + * + * The absence of fine-resolution pointing device can be taken a quick and proxy + * for detecting if the user is using a mobile or tablet. + * + * This is of course not going to work in all scenarios (e.g. someone connecting + * their mice to their tablet), but ad-hoc user agent checks are not problem + * free either. This media query should be accurate enough for cases where false + * positives will degrade gracefully. + * + * See: https://github.com/mui/mui-x/issues/10039 + */ +export const useIsTouchscreen = () => + useMediaQuery("(hover: none) and (pointer: coarse)");