Prune more

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

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>(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 (
         <Button
@@ -33,7 +20,7 @@ function GoToEnte() {
             LinkComponent={NoStyleAnchor}
             href="https://ente.io"
         >
-            {getButtonText(os)}
+            {isTouchscreen ? t("INSTALL") : t("SIGN_UP")}
         </Button>
     );
 }

web/apps/photos/src/utils/common/deviceDetection.ts

@@ -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;
-};

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