completes fix thumbnail modal UI

src/components/FixLargeThumbnail.tsx

@@ -1,34 +1,51 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import constants from 'utils/strings/constants';
 import MessageDialog from './MessageDialog';
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { ProgressBar, Button } from 'react-bootstrap';
 import { ComfySpan } from './ExportInProgress';
 import { regenerateThumbnail } from 'services/migrate';
-import { GalleryContext } from 'pages/gallery';
-import { RequestCanceller } from 'services/upload/queueProcessor';
-import { getLocalFiles } from 'services/fileService';
 
+export type SetProgressTracker = React.Dispatch<
+    React.SetStateAction<{
+        current: number;
+        total: number;
+    }>
+>;
 interface Props {
     show: boolean;
     hide: () => void;
 }
-
+export enum FIX_STATE {
+    NOT_STARTED,
+    RUNNING,
+    COMPLETED,
+    RAN_WITH_ERROR,
+}
+function Message(props: { fixState: FIX_STATE }) {
+    let message = <></>;
+    switch (props.fixState) {
+        case FIX_STATE.NOT_STARTED:
+            message = constants.REPLACE_THUMBNAIL_NOT_STARTED();
+            break;
+        case FIX_STATE.COMPLETED:
+            message = constants.REPLACE_THUMBNAIL_COMPLETED();
+            break;
+        case FIX_STATE.RAN_WITH_ERROR:
+            message = constants.REPLACE_THUMBNAIL_RAN_WITH_ERROR();
+            break;
+    }
+    return <div style={{ marginBottom: '10px' }}>{message}</div>;
+}
 export default function FixLargeThumbnails(props: Props) {
-    const galleryContext = useContext(GalleryContext);
-    const [inprogress, SetInProgress] = useState(true);
-    const [updateCanceler, setUpdateCanceler] = useState<RequestCanceller>({
-        exec: () => null,
+    const [fixState, setFixState] = useState(FIX_STATE.NOT_STARTED);
+    const [progressTracker, setProgressTracker] = useState({
+        current: 0,
+        total: 0,
     });
-    const [progressTracker, setProgressTracker] = useState();
-    const cancelFix = () => {
-        updateCanceler.exec();
-        SetInProgress(false);
-    };
+
     const startFix = async () => {
-        SetInProgress(true);
-        const localFiles = await getLocalFiles();
-        regenerateThumbnail(localFiles);
+        setFixState(FIX_STATE.RUNNING);
+        regenerateThumbnail(setProgressTracker);
     };
     return (
         <MessageDialog
@@ -46,62 +63,56 @@ export default function FixLargeThumbnails(props: Props) {
                     alignItems: 'center',
                     flexDirection: 'column',
                 }}>
-                {inprogress ? (
+                {fixState === FIX_STATE.RUNNING ? (
                     <>
                         <div style={{ marginBottom: '10px' }}>
                             <ComfySpan>
                                 {' '}
-                                {0} / {10}{' '}
+                                {progressTracker.current} /{' '}
+                                {progressTracker.total}{' '}
                             </ComfySpan>{' '}
                             <span style={{ marginLeft: '10px' }}>
                                 {' '}
                                 files exported
                             </span>
                         </div>
-                        <div style={{ width: '100%', marginBottom: '30px' }}>
+                        <div style={{ width: '100%', marginTop: '10px' }}>
                             <ProgressBar
-                                now={Math.round((1 * 100) / 10)}
+                                now={Math.round(
+                                    (progressTracker.current * 100) /
+                                        progressTracker.total
+                                )}
                                 animated={true}
                                 variant="upload-progress-bar"
                             />
                         </div>
                     </>
                 ) : (
-                    <div style={{ marginBottom: '10px' }}>
-                        Your some files have of the thumbnails have been updated
-                        of large size do you want to update them with low res
-                        version to save space
-                    </div>
+                    <>
+                        <Message fixState={fixState} />
+                        <div
+                            style={{
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'space-around',
+                            }}>
+                            <Button
+                                block
+                                variant={'outline-secondary'}
+                                onClick={props.hide}>
+                                {constants.CLOSE}
+                            </Button>
+                            <div style={{ width: '30px' }} />
+
+                            <Button
+                                block
+                                variant={'outline-success'}
+                                onClick={startFix}>
+                                {constants.UPDATE}
+                            </Button>
+                        </div>
+                    </>
                 )}
-                <div
-                    style={{
-                        width: '100%',
-                        display: 'flex',
-                        justifyContent: 'space-around',
-                    }}>
-                    <Button
-                        block
-                        variant={'outline-secondary'}
-                        onClick={props.hide}>
-                        {constants.CLOSE}
-                    </Button>
-                    <div style={{ width: '30px' }} />
-                    {inprogress ? (
-                        <Button
-                            block
-                            variant={'outline-danger'}
-                            onClick={cancelFix}>
-                            {constants.CANCEL}
-                        </Button>
-                    ) : (
-                        <Button
-                            block
-                            variant={'outline-success'}
-                            onClick={startFix}>
-                            {constants.UPDATE}
-                        </Button>
-                    )}
-                </div>
             </div>
         </MessageDialog>
     );

src/services/migrate/index.ts

@@ -1,5 +1,5 @@
 import downloadManager from 'services/downloadManager';
-import { File, fileAttribute, FILE_TYPE } from 'services/fileService';
+import { fileAttribute, FILE_TYPE, getLocalFiles } from 'services/fileService';
 import {
     generateThumbnail,
     MAX_THUMBNAIL_SIZE,
@@ -9,9 +9,9 @@ import { logError } from 'utils/sentry';
 import { getEndpoint } from 'utils/common/apiUtil';
 import HTTPService from 'services/HTTPService';
 import CryptoWorker from 'utils/crypto';
-import { convertToHumanReadable } from 'utils/billingUtil';
 import uploadHttpClient from 'services/upload/uploadHttpClient';
 import { EncryptionResult, UploadURL } from 'services/upload/uploadService';
+import { SetProgressTracker } from 'components/FixLargeThumbnail';
 
 const ENDPOINT = getEndpoint();
 
@@ -36,22 +36,33 @@ export async function getLargeThumbnailFiles() {
         throw e;
     }
 }
-export async function regenerateThumbnail(files: File[]) {
+export async function regenerateThumbnail(
+    setProgressTracker: SetProgressTracker
+) {
     try {
         const token = getToken();
         const worker = await new CryptoWorker();
         const largeThumbnailFileIDs = new Set(
             (await getLargeThumbnailFiles()) ?? []
         );
+        const files = await getLocalFiles();
         const largeThumbnailFiles = files.filter((file) =>
             largeThumbnailFileIDs.has(file.id)
         );
+        if (largeThumbnailFiles.length === 0) {
+            return;
+        }
+        setProgressTracker({ current: 0, total: largeThumbnailFiles.length });
         const uploadURLs: UploadURL[] = [];
         uploadHttpClient.fetchUploadURLs(
             largeThumbnailFiles.length,
             uploadURLs
         );
-        for (const file of largeThumbnailFiles) {
+        for (const [idx, file] of largeThumbnailFiles.entries()) {
+            setProgressTracker({
+                current: idx,
+                total: largeThumbnailFiles.length,
+            });
             const originalThumbnail = await downloadManager.getThumbnail(
                 token,
                 file
@@ -73,10 +84,6 @@ export async function regenerateThumbnail(files: File[]) {
                 uploadURLs.pop()
             );
             await updateThumbnail(file.id, newUploadedThumbnail);
-            console.log(
-                URL.createObjectURL(new Blob([newThumbnail])),
-                convertToHumanReadable(newThumbnail.length)
-            );
         }
     } catch (e) {
         logError(e, 'failed to regenerate thumbnail');

src/utils/strings/englishConstants.tsx

@@ -553,6 +553,22 @@ const englishConstants = {
     SORT_BY_MODIFICATION_TIME: 'last updated',
     SORT_BY_COLLECTION_NAME: 'album name',
     FIX_LARGE_THUMBNAILS: 'fix large thumbnails',
+    REPLACE_THUMBNAIL_NOT_STARTED: () => (
+        <>
+            Some of your files have been upload with very large thumbnail due to
+            bug in web client the thumbnails. do you want to update them with
+            low res version to save space
+        </>
+    ),
+    REPLACE_THUMBNAIL_COMPLETED: () => (
+        <>your thumbnails have been successfully updated</>
+    ),
+    REPLACE_THUMBNAIL_RAN_WITH_ERROR: () => (
+        <>
+            thumbnail update for some of your files failed ,please try to fix
+            them
+        </>
+    ),
 };
 
 export default englishConstants;