add shared album download progress

apps/photos/src/components/PhotoFrame.tsx

@@ -56,6 +56,7 @@ interface Props {
         selected: SelectedState | ((selected: SelectedState) => SelectedState)
     ) => void;
     selected: SelectedState;
+    setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
     deletedFileIds?: Set<number>;
     setDeletedFileIds?: (value: Set<number>) => void;
     activeCollectionID: number;
@@ -65,7 +66,6 @@ interface Props {
     showAppDownloadBanner?: boolean;
     setIsPhotoSwipeOpen?: (value: boolean) => void;
     isInHiddenSection?: boolean;
-    setFilesDownloadProgressAttributesCreator?: SetFilesDownloadProgressAttributesCreator;
 }
 
 const PhotoFrame = ({

apps/photos/src/pages/shared-albums/index.tsx

@@ -16,7 +16,7 @@ import {
 } from 'services/publicCollectionService';
 import { Collection } from 'types/collection';
 import { EnteFile } from 'types/file';
-import { downloadFile, mergeMetadata, sortFiles } from 'utils/file';
+import { mergeMetadata, sortFiles } from 'utils/file';
 import { AppContext } from 'pages/_app';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import { CustomError, parseSharingErrorCodes } from '@ente/shared/error';
@@ -52,7 +52,11 @@ import UploadButton from 'components/Upload/UploadButton';
 import bs58 from 'bs58';
 import AddPhotoAlternateOutlined from '@mui/icons-material/AddPhotoAlternateOutlined';
 import ComlinkCryptoWorker from '@ente/shared/crypto';
-import { UploadTypeSelectorIntent } from 'types/gallery';
+import {
+    SetFilesDownloadProgressAttributes,
+    SetFilesDownloadProgressAttributesCreator,
+    UploadTypeSelectorIntent,
+} from 'types/gallery';
 import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import OverflowMenu from '@ente/shared/components/OverflowMenu/menu';
@@ -60,6 +64,11 @@ import { OverflowMenuOption } from '@ente/shared/components/OverflowMenu/option'
 import { ENTE_WEBSITE_LINK } from '@ente/shared/constants/urls';
 import { APPS } from '@ente/shared/apps/constants';
 import downloadManager from 'services/download';
+import {
+    FilesDownloadProgress,
+    FilesDownloadProgressAttributes,
+} from 'components/FilesDownloadProgress';
+import { downloadCollectionFiles, isHiddenCollection } from 'utils/collection';
 
 export default function PublicCollectionGallery() {
     const token = useRef<string>(null);
@@ -111,6 +120,45 @@ export default function PublicCollectionGallery() {
         directory: true,
     });
 
+    const [
+        filesDownloadProgressAttributesList,
+        setFilesDownloadProgressAttributesList,
+    ] = useState<FilesDownloadProgressAttributes[]>([]);
+
+    const setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator =
+        (folderName, collectionID, isHidden) => {
+            const id = filesDownloadProgressAttributesList?.length ?? 0;
+            const updater: SetFilesDownloadProgressAttributes = (value) => {
+                setFilesDownloadProgressAttributesList((prev) => {
+                    const attributes = prev?.find((attr) => attr.id === id);
+                    const updatedAttributes =
+                        typeof value === 'function'
+                            ? value(attributes)
+                            : { ...attributes, ...value };
+                    console.log('value', attributes, updatedAttributes);
+                    const updatedAttributesList = attributes
+                        ? prev.map((attr) =>
+                              attr.id === id ? updatedAttributes : attr
+                          )
+                        : [...prev, updatedAttributes];
+
+                    return updatedAttributesList;
+                });
+            };
+            updater({
+                id,
+                folderName,
+                collectionID,
+                isHidden,
+                canceller: null,
+                total: 0,
+                success: 0,
+                failed: 0,
+                downloadDirPath: null,
+            });
+            return updater;
+        };
+
     const openUploader = () => {
         setUploadTypeSelectorView(true);
     };
@@ -217,18 +265,24 @@ export default function PublicCollectionGallery() {
     );
 
     const downloadAllFiles = async () => {
-        if (!downloadEnabled) {
-            return;
-        }
-        appContext.startLoading();
-        for (const file of publicFiles) {
-            try {
-                await downloadFile(file);
-            } catch (e) {
-                // do nothing
+        try {
+            if (!downloadEnabled) {
+                return;
             }
+            const setFilesDownloadProgressAttributes =
+                setFilesDownloadProgressAttributesCreator(
+                    publicCollection.name,
+                    publicCollection.id,
+                    isHiddenCollection(publicCollection)
+                );
+            await downloadCollectionFiles(
+                publicCollection.name,
+                publicFiles,
+                setFilesDownloadProgressAttributes
+            );
+        } catch (e) {
+            logError(e, 'failed to downloads shared album all files');
         }
-        appContext.finishLoading();
     };
 
     useEffect(() => {
@@ -474,6 +528,9 @@ export default function PublicCollectionGallery() {
                     enableDownload={downloadEnabled}
                     fileToCollectionsMap={null}
                     collectionNameMap={null}
+                    setFilesDownloadProgressAttributesCreator={
+                        setFilesDownloadProgressAttributesCreator
+                    }
                 />
                 {blockingLoad && (
                     <LoadingOverlay>
@@ -498,6 +555,10 @@ export default function PublicCollectionGallery() {
                         UploadTypeSelectorIntent.collectPhotos
                     }
                 />
+                <FilesDownloadProgress
+                    attributesList={filesDownloadProgressAttributesList}
+                    setAttributesList={setFilesDownloadProgressAttributesList}
+                />
             </FullScreenDropZone>
         </PublicCollectionGalleryContext.Provider>
     );

apps/photos/src/utils/collection/index.ts

@@ -143,7 +143,7 @@ export async function downloadDefaultHiddenCollectionHelper(
     }
 }
 
-async function downloadCollectionFiles(
+export async function downloadCollectionFiles(
     collectionName: string,
     collectionFiles: EnteFile[],
     setFilesDownloadProgressAttributes: SetFilesDownloadProgressAttributes