diff --git a/src/components/pages/gallery/CollectionOptions.tsx b/src/components/pages/gallery/CollectionOptions.tsx index 041d58f07..e34be88f4 100644 --- a/src/components/pages/gallery/CollectionOptions.tsx +++ b/src/components/pages/gallery/CollectionOptions.tsx @@ -6,18 +6,20 @@ import { deleteCollection, renameCollection, } from 'services/collectionService'; -import { getSelectedCollection } from 'utils/collection'; +import { downloadCollection, getSelectedCollection } from 'utils/collection'; import constants from 'utils/strings/constants'; import { SetCollectionNamerAttributes } from './CollectionNamer'; import LinkButton, { ButtonVariant, LinkButtonProps } from './LinkButton'; +import { sleep } from 'utils/common'; -interface Props { +interface CollectionOptionsProps { syncWithRemote: () => Promise; setCollectionNamerAttributes: SetCollectionNamerAttributes; collections: Collection[]; selectedCollectionID: number; setDialogMessage: SetDialogMessage; - startLoadingBar: () => void; + startLoading: () => void; + finishLoading: () => void; showCollectionShareModal: () => void; redirectToAll: () => void; } @@ -43,7 +45,7 @@ export const MenuItem = (props: { children: any }) => ( ); -const CollectionOptions = (props: Props) => { +const CollectionOptions = (props: CollectionOptionsProps) => { const collectionRename = async ( selectedCollection: Collection, newName: string @@ -62,7 +64,7 @@ const CollectionOptions = (props: Props) => { props.collections )?.name, callback: (newName) => { - props.startLoadingBar(); + props.startLoading(); collectionRename( getSelectedCollection( props.selectedCollectionID, @@ -81,7 +83,7 @@ const CollectionOptions = (props: Props) => { proceed: { text: constants.DELETE_COLLECTION, action: () => { - props.startLoadingBar(); + props.startLoading(); deleteCollection( props.selectedCollectionID, props.syncWithRemote, @@ -97,6 +99,32 @@ const CollectionOptions = (props: Props) => { }); }; + const confirmDownloadCollection = () => { + props.setDialogMessage({ + title: constants.CONFIRM_DOWNLOAD_COLLECTION, + content: constants.DOWNLOAD_COLLECTION_MESSAGE(), + staticBackdrop: true, + proceed: { + text: constants.DOWNLOAD, + action: downloadCollectionHelper, + variant: 'success', + }, + close: { + text: constants.CANCEL, + }, + }); + }; + + const downloadCollectionHelper = async () => { + props.startLoading(); + await downloadCollection( + props.selectedCollectionID, + props.setDialogMessage + ); + await sleep(1000); + props.finishLoading(); + }; + return ( @@ -111,6 +139,11 @@ const CollectionOptions = (props: Props) => { {constants.SHARE} + + + {constants.DOWNLOAD} + + Promise; setCollectionNamerAttributes: SetCollectionNamerAttributes; - startLoadingBar: () => void; + startLoading: () => void; + finishLoading: () => void; isInSearchMode: boolean; collectionFilesCount: Map; } @@ -169,7 +170,8 @@ export default function Collections(props: CollectionProps) { collections: props.collections, selectedCollectionID, setDialogMessage: props.setDialogMessage, - startLoadingBar: props.startLoadingBar, + startLoading: props.startLoading, + finishLoading: props.finishLoading, showCollectionShareModal: setCollectionShareModalView.bind(null, true), redirectToAll: setActiveCollection.bind(null, ALL_SECTION), }); diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 3f3976357..df8bf8982 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -362,12 +362,17 @@ export default function Gallery() { setSelected({ count: 0, collectionID: 0 }); }; + const startLoading = () => + !syncInProgress.current && loadingBar.current?.continuousStart(); + const finishLoading = () => + !syncInProgress.current && loadingBar.current.complete(); + if (!files) { return
; } const collectionOpsHelper = (ops: COLLECTION_OPS_TYPE) => async (collection: Collection) => { - loadingBar.current?.continuousStart(); + startLoading(); try { await handleCollectionOps( ops, @@ -388,14 +393,14 @@ export default function Gallery() { }); } finally { await syncWithRemote(false, true); - loadingBar.current.complete(); + finishLoading(); } }; const changeFilesVisibilityHelper = async ( visibility: VISIBILITY_STATE ) => { - loadingBar.current?.continuousStart(); + startLoading(); try { const updatedFiles = await changeFilesVisibility( files, @@ -424,7 +429,7 @@ export default function Gallery() { }); } finally { await syncWithRemote(false, true); - loadingBar.current.complete(); + finishLoading(); } }; @@ -458,7 +463,7 @@ export default function Gallery() { }; const deleteFileHelper = async (permanent?: boolean) => { - loadingBar.current?.continuousStart(); + startLoading(); try { const selectedFiles = getSelectedFiles(selected, files); if (permanent) { @@ -489,7 +494,7 @@ export default function Gallery() { }); } finally { await syncWithRemote(false, true); - loadingBar.current.complete(); + finishLoading(); } }; @@ -519,7 +524,7 @@ export default function Gallery() { close: { text: constants.CANCEL }, }); const emptyTrashHelper = async () => { - loadingBar.current?.continuousStart(); + startLoading(); try { await emptyTrash(); if (selected.collectionID === TRASH_SECTION) { @@ -536,7 +541,7 @@ export default function Gallery() { }); } finally { await syncWithRemote(false, true); - loadingBar.current.complete(); + finishLoading(); } }; @@ -549,9 +554,9 @@ export default function Gallery() { const downloadHelper = async () => { const selectedFiles = getSelectedFiles(selected, files); clearSelection(); - !syncInProgress.current && loadingBar.current?.continuousStart(); + startLoading(); await downloadFiles(selectedFiles); - !syncInProgress.current && loadingBar.current.complete(); + finishLoading(); }; return ( @@ -609,7 +614,8 @@ export default function Gallery() { syncWithRemote={syncWithRemote} setDialogMessage={setDialogMessage} setCollectionNamerAttributes={setCollectionNamerAttributes} - startLoadingBar={loadingBar.current?.continuousStart} + startLoading={startLoading} + finishLoading={finishLoading} collectionFilesCount={collectionFilesCount} /> file.collectionID === collectionID + ); + await downloadFiles(collectionFiles); + } catch (e) { + logError(e, 'download collection failed '); + setDialogMessage({ + title: constants.ERROR, + content: constants.DELETE_COLLECTION_FAILED, + close: { variant: 'danger' }, + }); + } +} diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 27e82c1aa..7ada30d45 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -382,6 +382,14 @@ const englishConstants = { `oops, you're already sharing this with ${email}`, SHARING_BAD_REQUEST_ERROR: 'sharing album not allowed', SHARING_DISABLED_FOR_FREE_ACCOUNTS: 'sharing is disabled for free accounts', + CONFIRM_DOWNLOAD_COLLECTION: 'download album', + DOWNLOAD_COLLECTION_MESSAGE: () => ( + <> +

are you sure you want to download the complete album?

+

all files will be queued for download sequentially

+ + ), + DOWNLOAD_COLLECTION_FAILED: 'album downloading failed, please try again', CREATE_ALBUM_FAILED: 'failed to create album , please try again', SEARCH_HINT: () => ( try searching for New York, April 14, Christmas...