completes fix thumbnail modal UI
This commit is contained in:
parent
6b25555044
commit
6681b601a3
|
@ -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,33 +63,33 @@ 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%',
|
||||
|
@ -86,22 +103,16 @@ export default function FixLargeThumbnails(props: Props) {
|
|||
{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>
|
||||
);
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue