diff --git a/web/apps/photos/public/images/delete-account/1x.png b/web/apps/photos/public/images/delete-account/1x.png deleted file mode 100644 index b8288cee8e..0000000000 Binary files a/web/apps/photos/public/images/delete-account/1x.png and /dev/null differ diff --git a/web/apps/photos/public/images/delete-account/2x.png b/web/apps/photos/public/images/delete-account/2x.png deleted file mode 100644 index 31c9014bc6..0000000000 Binary files a/web/apps/photos/public/images/delete-account/2x.png and /dev/null differ diff --git a/web/apps/photos/public/images/delete-account/3x.png b/web/apps/photos/public/images/delete-account/3x.png deleted file mode 100644 index 7be1e70ded..0000000000 Binary files a/web/apps/photos/public/images/delete-account/3x.png and /dev/null differ diff --git a/web/apps/photos/src/components/DeleteAccountModal.tsx b/web/apps/photos/src/components/DeleteAccountModal.tsx index 43d312b6cb..40a5214454 100644 --- a/web/apps/photos/src/components/DeleteAccountModal.tsx +++ b/web/apps/photos/src/components/DeleteAccountModal.tsx @@ -7,10 +7,9 @@ import { Formik, type FormikHelpers } from "formik"; import { t } from "i18next"; import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; -import { useContext, useEffect, useRef, useState } from "react"; +import { useContext, useRef, useState } from "react"; import { Trans } from "react-i18next"; import { deleteAccount, getAccountDeleteChallenge } from "services/userService"; -import { preloadImage } from "utils/common"; import { decryptDeleteAccountChallenge } from "utils/crypto"; import * as Yup from "yup"; import { CheckboxInput } from "./CheckboxInput"; @@ -39,10 +38,6 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => { const isMobile = useMediaQuery("(max-width: 428px)"); - useEffect(() => { - preloadImage("/images/delete-account"); - }, []); - const somethingWentWrong = () => setDialogBoxAttributesV2({ title: t("ERROR"), diff --git a/web/apps/photos/src/components/MemberSubscriptionManage.tsx b/web/apps/photos/src/components/MemberSubscriptionManage.tsx index f06fd0be23..7ffbee1648 100644 --- a/web/apps/photos/src/components/MemberSubscriptionManage.tsx +++ b/web/apps/photos/src/components/MemberSubscriptionManage.tsx @@ -7,19 +7,14 @@ import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleW import { Box, Button, Dialog, DialogContent, Typography } from "@mui/material"; import { t } from "i18next"; import { AppContext } from "pages/_app"; -import { useContext, useEffect } from "react"; +import { useContext } from "react"; import billingService from "services/billingService"; -import { preloadImage } from "utils/common"; import { getFamilyPlanAdmin } from "utils/user/family"; export function MemberSubscriptionManage({ open, userDetails, onClose }) { const { setDialogMessage } = useContext(AppContext); const fullScreen = useIsMobileWidth(); - useEffect(() => { - preloadImage("/images/family-plan"); - }, []); - async function onLeaveFamilyClick() { try { await billingService.leaveFamily(); diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx index 1f4b0bfb06..fec632b416 100644 --- a/web/apps/photos/src/components/PhotoList/index.tsx +++ b/web/apps/photos/src/components/PhotoList/index.tsx @@ -550,14 +550,14 @@ export function PhotoList({ ), b: ( ), }} @@ -579,13 +579,22 @@ export function PhotoList({ span={columns} hasReferral={!!publicCollectionGalleryContext.referralCode} > + {/* Make the entire area tappable, otherwise it is hard to + get at on mobile devices. */} - - {t("SHARED_USING")}{" "} - - ente.io - - + + + {t("SHARED_USING")}{" "} + + ente.io + + + {publicCollectionGalleryContext.referralCode ? ( = ({ {t("SHOW_ON_MAP")} diff --git a/web/apps/photos/src/components/PhotoViewer/index.tsx b/web/apps/photos/src/components/PhotoViewer/index.tsx index 3e444b93df..8e8a02d3bc 100644 --- a/web/apps/photos/src/components/PhotoViewer/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/index.tsx @@ -49,7 +49,6 @@ import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; import { trashFiles } from "services/fileService"; import { SetFilesDownloadProgressAttributesCreator } from "types/gallery"; -import { isClipboardItemPresent } from "utils/common"; import { pauseVideo, playVideo } from "utils/photoFrame"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; import { getTrashFileMessage } from "utils/ui"; @@ -126,7 +125,10 @@ function PhotoViewer(props: Iprops) { const needUpdate = useRef(false); const exifExtractionInProgress = useRef(null); - const shouldShowCopyOption = useMemo(() => isClipboardItemPresent(), []); + const shouldShowCopyOption = useMemo( + () => typeof ClipboardItem != "undefined", + [], + ); const [showImageEditorOverlay, setShowImageEditorOverlay] = useState(false); diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx index 0de7895f22..29acee238c 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx @@ -174,6 +174,7 @@ function EnableMap({ onClose, enableMap, onRootClose }) { a: ( ), diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 84cc686d3a..ccf921c854 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -40,7 +40,6 @@ import DeleteAccountModal from "components/DeleteAccountModal"; import TwoFactorModal from "components/TwoFactor/Modal"; import { WatchFolder } from "components/WatchFolder"; import LinkButton from "components/pages/gallery/LinkButton"; -import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; import { ARCHIVE_SECTION, DUMMY_UNCATEGORIZED_COLLECTION, @@ -607,11 +606,7 @@ const HelpSection: React.FC = () => { - - {t("SUPPORT")} - - + {t("SUPPORT")} } variant="secondary" /> diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx index c3b4d38452..c1bdc43f5f 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, @@ -10,8 +11,7 @@ import { default as FileUploadIcon } from "@mui/icons-material/ImageOutlined"; import { default as FolderUploadIcon } from "@mui/icons-material/PermMediaOutlined"; import { Box, Dialog, Link, Stack, Typography } from "@mui/material"; import { t } from "i18next"; -import React, { useContext, useEffect, useRef, useState } from "react"; -import { isMobileOrTable } from "utils/common/deviceDetection"; +import React, { useContext, useEffect, useState } from "react"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; export type UploadTypeSelectorIntent = "upload" | "import" | "collect"; @@ -49,12 +49,14 @@ export const UploadTypeSelector: React.FC = ({ PublicCollectionGalleryContext, ); - const directlyShowUploadFiles = useRef(isMobileOrTable()); + // Directly show the file selector for the public albums app on likely + // mobile devices. + const directlyShowUploadFiles = useIsTouchscreen(); useEffect(() => { if ( open && - directlyShowUploadFiles.current && + directlyShowUploadFiles && publicCollectionGalleryContext.accessedThroughSharedURL ) { uploadFiles(); diff --git a/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx b/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx deleted file mode 100644 index 6df4c357fb..0000000000 --- a/web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx +++ /dev/null @@ -1,41 +0,0 @@ -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; - text-decoration: none !important; - &:hover { - color: #fff !important; - } -`; - -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"); - } - }; - - return ( - - ); -} - -export default GoToEnte; diff --git a/web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx b/web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx index 18abdc436e..9c45de76d7 100644 --- a/web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx +++ b/web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx @@ -1,10 +1,10 @@ import { NavbarBase } from "@/base/components/Navbar"; +import { useIsTouchscreen } from "@/base/hooks"; import { FluidContainer } from "@ente/shared/components/Container"; import AddPhotoAlternateOutlined from "@mui/icons-material/AddPhotoAlternateOutlined"; -import { Box } from "@mui/material"; +import { Box, Button } from "@mui/material"; import UploadButton from "components/Upload/UploadButton"; import { t } from "i18next"; -import GoToEnte from "./GoToEnte"; export default function SharedAlbumNavbar({ showUploadButton, openUploader }) { return ( @@ -57,3 +57,14 @@ const Ente: React.FC = () => { ); }; + +const GoToEnte: React.FC = () => { + // Touchscreen devices are overwhemingly likely to be Android or iOS. + const isTouchscreen = useIsTouchscreen(); + + return ( + + ); +}; diff --git a/web/apps/photos/src/pages/gallery/index.tsx b/web/apps/photos/src/pages/gallery/index.tsx index f5f4d52ddc..1c72be1727 100644 --- a/web/apps/photos/src/pages/gallery/index.tsx +++ b/web/apps/photos/src/pages/gallery/index.tsx @@ -119,7 +119,6 @@ import { splitNormalAndHiddenCollections, } from "utils/collection"; import ComlinkSearchWorker from "utils/comlink/ComlinkSearchWorker"; -import { preloadImage } from "utils/common"; import { FILE_OPS_TYPE, constructFileToCollectionMap, @@ -1263,6 +1262,15 @@ function useEffectSingleThreaded( }, deps); } +/** + * Preload all three variants of a responsive image. + */ +const preloadImage = (imgBasePath: string) => { + const srcset = []; + for (let i = 1; i <= 3; i++) srcset.push(`${imgBasePath}/${i}x.png ${i}x`); + new Image().srcset = srcset.join(","); +}; + const mergeMaps = (map1: Map, map2: Map) => { const mergedMap = new Map(map1); map2.forEach((value, key) => { diff --git a/web/apps/photos/src/services/collectionService.ts b/web/apps/photos/src/services/collectionService.ts index 336742b0f2..dae58a96ae 100644 --- a/web/apps/photos/src/services/collectionService.ts +++ b/web/apps/photos/src/services/collectionService.ts @@ -8,6 +8,7 @@ import { UpdateMagicMetadataRequest, VISIBILITY_STATE, } from "@/new/photos/types/magicMetadata"; +import { batch } from "@/utils/array"; import ComlinkCryptoWorker from "@ente/shared/crypto"; import { CustomError } from "@ente/shared/error"; import HTTPService from "@ente/shared/network/HTTPService"; @@ -62,7 +63,6 @@ import { isSharedOnlyViaLink, isValidMoveTarget, } from "utils/collection"; -import { batch } from "utils/common"; import { getUniqueFiles, groupFilesBasedOnCollectionID, diff --git a/web/apps/photos/src/services/fileService.ts b/web/apps/photos/src/services/fileService.ts index deb9bda779..37cbb42798 100644 --- a/web/apps/photos/src/services/fileService.ts +++ b/web/apps/photos/src/services/fileService.ts @@ -10,6 +10,7 @@ import { } from "@/new/photos/types/file"; import { BulkUpdateMagicMetadataRequest } from "@/new/photos/types/magicMetadata"; import { mergeMetadata } from "@/new/photos/utils/file"; +import { batch } from "@/utils/array"; import ComlinkCryptoWorker from "@ente/shared/crypto"; import HTTPService from "@ente/shared/network/HTTPService"; import { getToken } from "@ente/shared/storage/localStorage/helpers"; @@ -17,7 +18,6 @@ import { REQUEST_BATCH_SIZE } from "constants/api"; import exportService from "services/export"; import { Collection } from "types/collection"; import { SetFiles } from "types/gallery"; -import { batch } from "utils/common"; import { decryptFile, getLatestVersionFiles, sortFiles } from "utils/file"; import { getCollectionLastSyncTime, 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 7ce55bba7d..0000000000 --- a/web/apps/photos/src/utils/common/deviceDetection.ts +++ /dev/null @@ -1,69 +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; -}; - -export const isMobileOrTable = () => { - let check = false; - (function (a) { - if ( - /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test( - a, - ) || - /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test( - a.substr(0, 4), - ) - ) - check = true; - })(navigator.userAgent || navigator.vendor || window.opera); - return check; -}; diff --git a/web/apps/photos/src/utils/common/index.ts b/web/apps/photos/src/utils/common/index.ts deleted file mode 100644 index 91628f98c4..0000000000 --- a/web/apps/photos/src/utils/common/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const preloadImage = (imgBasePath: string) => { - const srcSet = []; - for (let i = 1; i <= 3; i++) { - srcSet.push(`${imgBasePath}/${i}x.png ${i}x`); - } - new Image().srcset = srcSet.join(","); -}; - -export function isClipboardItemPresent() { - return typeof ClipboardItem !== "undefined"; -} - -export function batch(arr: T[], batchSize: number): T[][] { - const batches: T[][] = []; - for (let i = 0; i < arr.length; i += batchSize) { - batches.push(arr.slice(i, i + batchSize)); - } - return batches; -} diff --git a/web/apps/photos/src/utils/ui/index.tsx b/web/apps/photos/src/utils/ui/index.tsx index 09a874e4e8..025664e3ac 100644 --- a/web/apps/photos/src/utils/ui/index.tsx +++ b/web/apps/photos/src/utils/ui/index.tsx @@ -145,6 +145,7 @@ export const getMapEnableConfirmationDialog = ( a: ( ), diff --git a/web/packages/base/hooks.ts b/web/packages/base/hooks.ts index 1fd954377c..4620458e40 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)", { noSsr: true }); diff --git a/web/packages/utils/array.ts b/web/packages/utils/array.ts index a27a955498..5f72779f83 100644 --- a/web/packages/utils/array.ts +++ b/web/packages/utils/array.ts @@ -46,3 +46,16 @@ export const mergeUint8Arrays = (as: Uint8Array[]) => { as.reduce((n, xs) => (result.set(xs, n), n + xs.length), 0); return result; }; + +/** + * Break an array into batches of size {@link chunkSize}. + * + * @returns An array of the resultant batches. + */ +export const batch = (xs: T[], batchSize: number): T[][] => { + const batches: T[][] = []; + for (let i = 0; i < xs.length; i += batchSize) { + batches.push(xs.slice(i, i + batchSize)); + } + return batches; +};