beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'share-url-redesign-v2' into ui-redesign

Browse source
This commit is contained in:
Abhinav 2022-06-26 11:26:24 +05:30
parent 5169548635 9aa7be44c7
commit 48e37e1160
10 changed files with 82 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/Collections/CollectionShare/publicShare/control.tsx
View file

@ -1,37 +1,36 @@
import { Box, Typography } from '@mui/material';
import { FlexWrapper } from 'components/Container';
import { ButtonVariant } from 'components/pages/gallery/LinkButton';
import { GalleryContext } from 'pages/gallery';
import { AppContext } from 'pages/_app';
import React, { useContext } from 'react';
import React, { useContext, useState } from 'react';
import {
createShareableURL,
deleteShareableURL,
} from 'services/collectionService';
import { appendCollectionKeyToShareURL } from 'utils/collection';
import { Collection, PublicURL } from 'types/collection';
import { handleSharingErrors } from 'utils/error';
import constants from 'utils/strings/constants';
import PublicShareSwitch from './switch';
interface Iprops {
collection: Collection;
publicShareActive: boolean;
setPublicShareProp: (value: PublicURL) => void;
}
export default function PublicShareControl({
publicShareUrl,
sharableLinkError,
collection,
setPublicShareUrl,
setSharableLinkError,
}) {
publicShareActive,
setPublicShareProp,
}: Iprops) {
const appContext = useContext(AppContext);
const galleryContext = useContext(GalleryContext);
const [sharableLinkError, setSharableLinkError] = useState(null);
const createSharableURLHelper = async () => {
try {
appContext.startLoading();
const publicURL = await createShareableURL(collection);
const sharableURL = await appendCollectionKeyToShareURL(
publicURL.url,
collection.key
);
setPublicShareUrl(sharableURL);
galleryContext.syncWithRemote(false, true);
setPublicShareProp(publicURL);
} catch (e) {
const errorMessage = handleSharingErrors(e);
setSharableLinkError(errorMessage);
@ -44,8 +43,7 @@ export default function PublicShareControl({
try {
appContext.startLoading();
await deleteShareableURL(collection);
setPublicShareUrl(null);
galleryContext.syncWithRemote(false, true);
setPublicShareProp(null);
} catch (e) {
const errorMessage = handleSharingErrors(e);
setSharableLinkError(errorMessage);
@ -69,8 +67,7 @@ export default function PublicShareControl({
const handleCollectionPublicSharing = () => {
setSharableLinkError(null);
if (publicShareUrl) {
if (publicShareActive) {
confirmDisablePublicSharing();
} else {
createSharableURLHelper();
@ -86,7 +83,7 @@ export default function PublicShareControl({
sx={{
ml: 2,
}}
checked={!!publicShareUrl}
checked={publicShareActive}
onChange={handleCollectionPublicSharing}
/>
</FlexWrapper>

62
src/components/Collections/CollectionShare/publicShare/index.tsx
View file

@ -1,51 +1,53 @@
import React, { useEffect, useState } from 'react';
import { PublicURL } from 'types/collection';
import { Collection, PublicURL } from 'types/collection';
import { appendCollectionKeyToShareURL } from 'utils/collection';
import PublicShareControl from './control';
import PublicShareLink from './link';
import PublicShareManage from './manage';
export default function PublicShare({ collection }) {
const [sharableLinkError, setSharableLinkError] = useState(null);
export default function PublicShare({
collection,
}: {
collection: Collection;
}) {
const [publicShareUrl, setPublicShareUrl] = useState<string>(null);
const [publicShareProp, setPublicShareProp] = useState<PublicURL>(null);
useEffect(() => {
const main = async () => {
if (collection?.publicURLs?.[0]?.url) {
const t = await appendCollectionKeyToShareURL(
collection?.publicURLs?.[0]?.url,
collection.key
);
setPublicShareUrl(t);
setPublicShareProp(collection?.publicURLs?.[0] as PublicURL);
} else {
setPublicShareUrl(null);
setPublicShareProp(null);
}
};
main();
if (collection.publicURLs?.length) {
setPublicShareProp(collection.publicURLs[0]);
}
}, [collection]);
useEffect(() => {
if (publicShareProp) {
const url = appendCollectionKeyToShareURL(
publicShareProp.url,
collection.key
);
setPublicShareUrl(url);
} else {
setPublicShareUrl(null);
}
}, [publicShareProp]);
return (
<>
<PublicShareControl
setPublicShareUrl={setPublicShareUrl}
setPublicShareProp={setPublicShareProp}
collection={collection}
publicShareUrl={publicShareUrl}
sharableLinkError={sharableLinkError}
setSharableLinkError={setSharableLinkError}
publicShareActive={!!publicShareProp}
/>
{publicShareUrl && (
<PublicShareLink publicShareUrl={publicShareUrl} />
)}
{publicShareProp && (
<PublicShareManage
publicShareProp={publicShareProp}
collection={collection}
setPublicShareProp={setPublicShareProp}
setSharableLinkError={setSharableLinkError}
/>
<>
<PublicShareLink publicShareUrl={publicShareUrl} />
<PublicShareManage
publicShareProp={publicShareProp}
collection={collection}
setPublicShareProp={setPublicShareProp}
/>
</>
)}
</>
);

2
src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
View file

@ -20,7 +20,7 @@ export function ManageDeviceLimit({
return (
<Box>
<Typography>{constants.LINK_DEVICE_LIMIT}</Typography>
<Typography mb={0.5}>{constants.LINK_DEVICE_LIMIT}</Typography>
<Select
menuPosition="fixed"
options={getDeviceLimitOptions()}

4
src/components/Collections/CollectionShare/publicShare/manage/downloadAcess.tsx
View file

@ -25,7 +25,7 @@ export function ManageDownloadAccess({
const disableFileDownload = () => {
appContext.setDialogMessage({
title: constants.DISABLE_FILE_DOWNLOAD,
content: constants.DISABLE_FILE_DOWNLOAD_MESSAGE,
content: constants.DISABLE_FILE_DOWNLOAD_MESSAGE(),
close: { text: constants.CANCEL },
proceed: {
text: constants.DISABLE,
@ -40,7 +40,7 @@ export function ManageDownloadAccess({
};
return (
<Box>
<Typography>{constants.FILE_DOWNLOAD}</Typography>
<Typography mb={0.5}>{constants.FILE_DOWNLOAD}</Typography>
<PublicShareSwitch
checked={publicShareProp?.enableDownload ?? false}
onChange={handleFileDownloadSetting}

18
src/components/Collections/CollectionShare/publicShare/manage/index.tsx
View file

@ -2,7 +2,7 @@ import { ManageLinkPassword } from './linkPassword';
import { ManageDeviceLimit } from './deviceLimit';
import { ManageLinkExpiry } from './linkExpiry';
import { PublicLinkSetPassword } from '../setPassword';
import { Stack } from '@mui/material';
import { Stack, Typography } from '@mui/material';
import { GalleryContext } from 'pages/gallery';
import React, { useContext, useState } from 'react';
import { updateShareableURL } from 'services/collectionService';
@ -20,11 +20,11 @@ export default function PublicShareManage({
publicShareProp,
collection,
setPublicShareProp,
setSharableLinkError,
}) {
const galleryContext = useContext(GalleryContext);
const [changePasswordView, setChangePasswordView] = useState(false);
const [sharableLinkError, setSharableLinkError] = useState(null);
const closeConfigurePassword = () => setChangePasswordView(false);
@ -33,7 +33,6 @@ export default function PublicShareManage({
galleryContext.setBlockingLoad(true);
const response = await updateShareableURL(req);
setPublicShareProp(response);
galleryContext.syncWithRemote(false, true);
} catch (e) {
const errorMessage = handleSharingErrors(e);
setSharableLinkError(errorMessage);
@ -59,7 +58,7 @@ export default function PublicShareManage({
{constants.MANAGE_LINK}
</ManageSectionLabel>
<ManageSectionOptions>
<Stack spacing={1}>
<Stack spacing={'12px'}>
<ManageLinkExpiry
collection={collection}
publicShareProp={publicShareProp}
@ -90,6 +89,17 @@ export default function PublicShareManage({
}
/>
</Stack>
{sharableLinkError && (
<Typography
textAlign={'center'}
variant="body2"
sx={{
color: (theme) => theme.palette.danger.main,
mt: 0.5,
}}>
{sharableLinkError}
</Typography>
)}
</ManageSectionOptions>
</details>
<PublicLinkSetPassword

2
src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
View file

@ -20,7 +20,7 @@ export function ManageLinkExpiry({
};
return (
<Box>
<Typography>{constants.LINK_EXPIRY}</Typography>
<Typography mb={0.5}>{constants.LINK_EXPIRY}</Typography>
<Select
menuPosition="fixed"
options={shareExpiryOptions}

2
src/components/Collections/CollectionShare/publicShare/manage/linkPassword.tsx
View file

@ -39,7 +39,7 @@ export function ManageLinkPassword({
return (
<Box>
<Typography> {constants.LINK_PASSWORD_LOCK}</Typography>
<Typography mb={0.5}> {constants.LINK_PASSWORD_LOCK}</Typography>
<PublicShareSwitch
checked={!!publicShareProp?.passwordEnabled}
onChange={handlePasswordChangeSetting}

2
src/pages/_document.tsx
View file

@ -43,7 +43,7 @@ export default class MyDocument extends Document {
type="image/png"
/>
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="/images/ente-512.png" />
<link rel="apple-touch-icon" href="/images/ente/512.png" />
<meta name="theme-color" content="#111" />
<link
rel="icon"

2
src/utils/collection/index.ts
View file

@ -111,7 +111,7 @@ export async function downloadAllCollectionFiles(collectionID: number) {
}
}
export async function appendCollectionKeyToShareURL(
export function appendCollectionKeyToShareURL(
url: string,
collectionKey: string
) {

14
src/utils/strings/englishConstants.tsx
View file

@ -639,8 +639,18 @@ const englishConstants = {
LINK_EXPIRY: 'Link expiry',
LINK_EXPIRY_NEVER: 'Never',
DISABLE_FILE_DOWNLOAD: 'Disable download',
DISABLE_FILE_DOWNLOAD_MESSAGE:
'Are you sure that you want to disable the download button for files? \n viewers can still take screenshots or save a copy of your photos using external tools',
DISABLE_FILE_DOWNLOAD_MESSAGE: () => (
<>
<p>
Are you sure that you want to disable the download button for
files?{' '}
</p>{' '}
<p>
Viewers can still take screenshots or save a copy of your photos
using external tools'{' '}
</p>
</>
),
ABUSE_REPORT: 'Abuse report',
ABUSE_REPORT_BUTTON_TEXT: 'Report abuse?',
MALICIOUS_CONTENT: 'Contains malicious content',