TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Miscellaneous improvements (#2612)

Browse Source
This commit is contained in:
Manav Rathi
2024-08-03 18:02:43 +05:30
committed by GitHub
parent 6bd9607c94 d68c04a8fb
commit c703f46243
21 changed files with 86 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/apps/photos/public/images/delete-account/1x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 92 KiB

BIN
web/apps/photos/public/images/delete-account/2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 367 KiB

BIN
web/apps/photos/public/images/delete-account/3x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 680 KiB

7
web/apps/photos/src/components/DeleteAccountModal.tsx
View File

@@ -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"),

7
web/apps/photos/src/components/MemberSubscriptionManage.tsx
View File

@@ -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();

25
web/apps/photos/src/components/PhotoList/index.tsx
View File

@@ -550,14 +550,14 @@ export function PhotoList({
<Link
href="https://play.google.com/store/apps/details?id=io.ente.photos"
target="_blank"
rel="noreferrer"
rel="noopener"
/>
),
b: (
<Link
href="https://apps.apple.com/in/app/ente-photos/id1542026904"
target="_blank"
rel="noreferrer"
rel="noopener"
/>
),
}}
@@ -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. */}
<Box width={"100%"}>
<Typography variant="small" display={"block"}>
{t("SHARED_USING")}{" "}
<Link target="_blank" href={"https://ente.io"}>
ente.io
</Link>
</Typography>
<Link
color="text.base"
sx={{ "&:hover": { color: "inherit" } }}
target="_blank"
href={"https://ente.io"}
>
<Typography variant="small" display={"block"}>
{t("SHARED_USING")}{" "}
<Link target="_blank" href={"https://ente.io"}>
ente.io
</Link>
</Typography>
</Link>
{publicCollectionGalleryContext.referralCode ? (
<FullStretchContainer>
<Typography

1
web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
View File

@@ -175,6 +175,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
<Link
href={getOpenStreetMapLink(location)}
target="_blank"
rel="noopener"
sx={{ fontWeight: "bold" }}
>
{t("SHOW_ON_MAP")}

6
web/apps/photos/src/components/PhotoViewer/index.tsx
View File

@@ -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<string>(null);
const shouldShowCopyOption = useMemo(() => isClipboardItemPresent(), []);
const shouldShowCopyOption = useMemo(
() => typeof ClipboardItem != "undefined",
[],
);
const [showImageEditorOverlay, setShowImageEditorOverlay] = useState(false);

1
web/apps/photos/src/components/Sidebar/MapSetting.tsx
View File

@@ -174,6 +174,7 @@ function EnableMap({ onClose, enableMap, onRootClose }) {
a: (
<Link
target="_blank"
rel="noopener"
href="https://www.openstreetmap.org/"
/>
),

7
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -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 = () => {
<EnteMenuItem
onClick={contactSupport}
labelComponent={
<NoStyleAnchor href="mailto:support@ente.io">
<Typography fontWeight={"bold"}>
{t("SUPPORT")}
</Typography>
</NoStyleAnchor>
<span title="support@ente.io">{t("SUPPORT")}</span>
}
variant="secondary"
/>

10
web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
View File

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

41
web/apps/photos/src/components/pages/sharedAlbum/GoToEnte.tsx
View File

@@ -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>(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 (
<Button
color="accent"
LinkComponent={NoStyleAnchor}
href="https://ente.io"
>
{getButtonText(os)}
</Button>
);
}
export default GoToEnte;

15
web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx
View File

@@ -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 = () => {
</svg>
);
};
const GoToEnte: React.FC = () => {
// Touchscreen devices are overwhemingly likely to be Android or iOS.
const isTouchscreen = useIsTouchscreen();
return (
<Button color="accent" href="https://ente.io">
{isTouchscreen ? t("INSTALL") : t("SIGN_UP")}
</Button>
);
};

10
web/apps/photos/src/pages/gallery/index.tsx
View File

@@ -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 = <K, V>(map1: Map<K, V>, map2: Map<K, V>) => {
const mergedMap = new Map<K, V>(map1);
map2.forEach((value, key) => {

2
web/apps/photos/src/services/collectionService.ts
View File

@@ -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,

2
web/apps/photos/src/services/fileService.ts
View File

@@ -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,

69
web/apps/photos/src/utils/common/deviceDetection.ts
View File

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

19
web/apps/photos/src/utils/common/index.ts
View File

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

1
web/apps/photos/src/utils/ui/index.tsx
View File

@@ -145,6 +145,7 @@ export const getMapEnableConfirmationDialog = (
a: (
<Link
target="_blank"
rel="noopener"
href="https://www.openstreetmap.org/"
/>
),

16
web/packages/base/hooks.ts
View File

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

13
web/packages/utils/array.ts
View File

@@ -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 = <T>(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;
};