add selected files download progress
This commit is contained in:
commit
f9c817873e
|
@ -15,7 +15,6 @@ import {
|
||||||
SelectedState,
|
SelectedState,
|
||||||
SetFilesDownloadProgressAttributesCreator,
|
SetFilesDownloadProgressAttributesCreator,
|
||||||
} from 'types/gallery';
|
} from 'types/gallery';
|
||||||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { logError } from '@ente/shared/sentry';
|
import { logError } from '@ente/shared/sentry';
|
||||||
import { addLogLine } from '@ente/shared/logging';
|
import { addLogLine } from '@ente/shared/logging';
|
||||||
|
@ -94,9 +93,6 @@ const PhotoFrame = ({
|
||||||
[k: number]: boolean;
|
[k: number]: boolean;
|
||||||
}>({});
|
}>({});
|
||||||
const galleryContext = useContext(GalleryContext);
|
const galleryContext = useContext(GalleryContext);
|
||||||
const publicCollectionGalleryContext = useContext(
|
|
||||||
PublicCollectionGalleryContext
|
|
||||||
);
|
|
||||||
const [rangeStart, setRangeStart] = useState(null);
|
const [rangeStart, setRangeStart] = useState(null);
|
||||||
const [currentHover, setCurrentHover] = useState(null);
|
const [currentHover, setCurrentHover] = useState(null);
|
||||||
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
||||||
|
@ -320,9 +316,7 @@ const PhotoFrame = ({
|
||||||
file={item}
|
file={item}
|
||||||
updateURL={updateURL(index)}
|
updateURL={updateURL(index)}
|
||||||
onClick={onThumbnailClick(index)}
|
onClick={onThumbnailClick(index)}
|
||||||
selectable={
|
selectable={enableDownload}
|
||||||
!publicCollectionGalleryContext?.accessedThroughSharedURL
|
|
||||||
}
|
|
||||||
onSelect={handleSelect(
|
onSelect={handleSelect(
|
||||||
item.id,
|
item.id,
|
||||||
item.ownerID === galleryContext.user?.id,
|
item.ownerID === galleryContext.user?.id,
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { useContext } from 'react';
|
||||||
|
import { FluidContainer } from '@ente/shared/components/Container';
|
||||||
|
import { SelectionBar } from '@ente/shared/components/Navbar/SelectionBar';
|
||||||
|
import { AppContext } from 'pages/_app';
|
||||||
|
import { Box, IconButton, Stack, Tooltip } from '@mui/material';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
import DownloadIcon from '@mui/icons-material/Download';
|
||||||
|
import { t } from 'i18next';
|
||||||
|
import { formatNumber } from 'utils/number/format';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
count: number;
|
||||||
|
ownCount: number;
|
||||||
|
clearSelection: () => void;
|
||||||
|
downloadFilesHelper: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SelectedFileOptions = ({
|
||||||
|
downloadFilesHelper,
|
||||||
|
count,
|
||||||
|
ownCount,
|
||||||
|
clearSelection,
|
||||||
|
}: Props) => {
|
||||||
|
const { isMobile } = useContext(AppContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SelectionBar isMobile={isMobile}>
|
||||||
|
<FluidContainer>
|
||||||
|
<IconButton onClick={clearSelection}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Box ml={1.5}>
|
||||||
|
{formatNumber(count)} {t('SELECTED')}{' '}
|
||||||
|
{ownCount !== count &&
|
||||||
|
`(${formatNumber(ownCount)} ${t('YOURS')})`}
|
||||||
|
</Box>
|
||||||
|
</FluidContainer>
|
||||||
|
<Stack spacing={2} direction="row" mr={2}>
|
||||||
|
<Tooltip title={t('DOWNLOAD')}>
|
||||||
|
<IconButton onClick={downloadFilesHelper}>
|
||||||
|
<DownloadIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
</SelectionBar>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SelectedFileOptions;
|
|
@ -16,7 +16,12 @@ import {
|
||||||
} from 'services/publicCollectionService';
|
} from 'services/publicCollectionService';
|
||||||
import { Collection } from 'types/collection';
|
import { Collection } from 'types/collection';
|
||||||
import { EnteFile } from 'types/file';
|
import { EnteFile } from 'types/file';
|
||||||
import { mergeMetadata, sortFiles } from 'utils/file';
|
import {
|
||||||
|
downloadSelectedFiles,
|
||||||
|
getSelectedFiles,
|
||||||
|
mergeMetadata,
|
||||||
|
sortFiles,
|
||||||
|
} from 'utils/file';
|
||||||
import { AppContext } from 'pages/_app';
|
import { AppContext } from 'pages/_app';
|
||||||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
||||||
import { CustomError, parseSharingErrorCodes } from '@ente/shared/error';
|
import { CustomError, parseSharingErrorCodes } from '@ente/shared/error';
|
||||||
|
@ -53,6 +58,7 @@ import bs58 from 'bs58';
|
||||||
import AddPhotoAlternateOutlined from '@mui/icons-material/AddPhotoAlternateOutlined';
|
import AddPhotoAlternateOutlined from '@mui/icons-material/AddPhotoAlternateOutlined';
|
||||||
import ComlinkCryptoWorker from '@ente/shared/crypto';
|
import ComlinkCryptoWorker from '@ente/shared/crypto';
|
||||||
import {
|
import {
|
||||||
|
SelectedState,
|
||||||
SetFilesDownloadProgressAttributes,
|
SetFilesDownloadProgressAttributes,
|
||||||
SetFilesDownloadProgressAttributesCreator,
|
SetFilesDownloadProgressAttributesCreator,
|
||||||
UploadTypeSelectorIntent,
|
UploadTypeSelectorIntent,
|
||||||
|
@ -69,6 +75,7 @@ import {
|
||||||
FilesDownloadProgressAttributes,
|
FilesDownloadProgressAttributes,
|
||||||
} from 'components/FilesDownloadProgress';
|
} from 'components/FilesDownloadProgress';
|
||||||
import { downloadCollectionFiles, isHiddenCollection } from 'utils/collection';
|
import { downloadCollectionFiles, isHiddenCollection } from 'utils/collection';
|
||||||
|
import SelectedFileOptions from 'components/pages/sharedAlbum/SelectedFileOptions';
|
||||||
|
|
||||||
export default function PublicCollectionGallery() {
|
export default function PublicCollectionGallery() {
|
||||||
const token = useRef<string>(null);
|
const token = useRef<string>(null);
|
||||||
|
@ -95,6 +102,11 @@ export default function PublicCollectionGallery() {
|
||||||
const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false);
|
const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false);
|
||||||
const [blockingLoad, setBlockingLoad] = useState(false);
|
const [blockingLoad, setBlockingLoad] = useState(false);
|
||||||
const [shouldDisableDropzone, setShouldDisableDropzone] = useState(false);
|
const [shouldDisableDropzone, setShouldDisableDropzone] = useState(false);
|
||||||
|
const [selected, setSelected] = useState<SelectedState>({
|
||||||
|
ownCount: 0,
|
||||||
|
count: 0,
|
||||||
|
collectionID: 0,
|
||||||
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getRootProps: getDragAndDropRootProps,
|
getRootProps: getDragAndDropRootProps,
|
||||||
|
@ -495,6 +507,29 @@ export default function PublicCollectionGallery() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const downloadFilesHelper = async () => {
|
||||||
|
try {
|
||||||
|
const selectedFiles = getSelectedFiles(selected, publicFiles);
|
||||||
|
const setFilesDownloadProgressAttributes =
|
||||||
|
setFilesDownloadProgressAttributesCreator(
|
||||||
|
`${selectedFiles.length} ${t('FILES')}`
|
||||||
|
);
|
||||||
|
await downloadSelectedFiles(
|
||||||
|
selectedFiles,
|
||||||
|
setFilesDownloadProgressAttributes
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
logError(e, 'failed to download selected files');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearSelection = () => {
|
||||||
|
if (!selected?.count) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSelected({ ownCount: 0, count: 0, collectionID: 0 });
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PublicCollectionGalleryContext.Provider
|
<PublicCollectionGalleryContext.Provider
|
||||||
value={{
|
value={{
|
||||||
|
@ -522,8 +557,8 @@ export default function PublicCollectionGallery() {
|
||||||
page={PAGES.SHARED_ALBUMS}
|
page={PAGES.SHARED_ALBUMS}
|
||||||
files={publicFiles}
|
files={publicFiles}
|
||||||
syncWithRemote={syncWithRemote}
|
syncWithRemote={syncWithRemote}
|
||||||
setSelected={() => null}
|
setSelected={setSelected}
|
||||||
selected={{ count: 0, collectionID: null, ownCount: 0 }}
|
selected={selected}
|
||||||
activeCollectionID={ALL_SECTION}
|
activeCollectionID={ALL_SECTION}
|
||||||
enableDownload={downloadEnabled}
|
enableDownload={downloadEnabled}
|
||||||
fileToCollectionsMap={null}
|
fileToCollectionsMap={null}
|
||||||
|
@ -559,6 +594,14 @@ export default function PublicCollectionGallery() {
|
||||||
attributesList={filesDownloadProgressAttributesList}
|
attributesList={filesDownloadProgressAttributesList}
|
||||||
setAttributesList={setFilesDownloadProgressAttributesList}
|
setAttributesList={setFilesDownloadProgressAttributesList}
|
||||||
/>
|
/>
|
||||||
|
{selected.count > 0 && (
|
||||||
|
<SelectedFileOptions
|
||||||
|
downloadFilesHelper={downloadFilesHelper}
|
||||||
|
clearSelection={clearSelection}
|
||||||
|
count={selected.count}
|
||||||
|
ownCount={selected.ownCount}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</FullScreenDropZone>
|
</FullScreenDropZone>
|
||||||
</PublicCollectionGalleryContext.Provider>
|
</PublicCollectionGalleryContext.Provider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -56,6 +56,7 @@ import { getFileExportPath, getUniqueFileExportName } from 'utils/export';
|
||||||
import imageProcessor from 'services/imageProcessor';
|
import imageProcessor from 'services/imageProcessor';
|
||||||
import ElectronAPIs from '@ente/shared/electron';
|
import ElectronAPIs from '@ente/shared/electron';
|
||||||
import { downloadUsingAnchor } from '@ente/shared/utils';
|
import { downloadUsingAnchor } from '@ente/shared/utils';
|
||||||
|
import { t } from 'i18next';
|
||||||
|
|
||||||
const WAIT_TIME_IMAGE_CONVERSION = 30 * 1000;
|
const WAIT_TIME_IMAGE_CONVERSION = 30 * 1000;
|
||||||
|
|
||||||
|
@ -976,7 +977,7 @@ export const handleFileOps = async (
|
||||||
case FILE_OPS_TYPE.DOWNLOAD: {
|
case FILE_OPS_TYPE.DOWNLOAD: {
|
||||||
const setSelectedFileDownloadProgressAttributes =
|
const setSelectedFileDownloadProgressAttributes =
|
||||||
setFilesDownloadProgressAttributesCreator(
|
setFilesDownloadProgressAttributesCreator(
|
||||||
`${files.length} files`
|
`${files.length} ${t('FILES')}`
|
||||||
);
|
);
|
||||||
await downloadSelectedFiles(
|
await downloadSelectedFiles(
|
||||||
files,
|
files,
|
||||||
|
|
Loading…
Reference in a new issue