added fix thumbnail modal
This commit is contained in:
parent
3f1c680df3
commit
6b25555044
108
src/components/FixLargeThumbnail.tsx
Normal file
108
src/components/FixLargeThumbnail.tsx
Normal file
|
@ -0,0 +1,108 @@
|
||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
|
import constants from 'utils/strings/constants';
|
||||||
|
import MessageDialog from './MessageDialog';
|
||||||
|
import React, { useContext, 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';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
show: boolean;
|
||||||
|
hide: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FixLargeThumbnails(props: Props) {
|
||||||
|
const galleryContext = useContext(GalleryContext);
|
||||||
|
const [inprogress, SetInProgress] = useState(true);
|
||||||
|
const [updateCanceler, setUpdateCanceler] = useState<RequestCanceller>({
|
||||||
|
exec: () => null,
|
||||||
|
});
|
||||||
|
const [progressTracker, setProgressTracker] = useState();
|
||||||
|
const cancelFix = () => {
|
||||||
|
updateCanceler.exec();
|
||||||
|
SetInProgress(false);
|
||||||
|
};
|
||||||
|
const startFix = async () => {
|
||||||
|
SetInProgress(true);
|
||||||
|
const localFiles = await getLocalFiles();
|
||||||
|
regenerateThumbnail(localFiles);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<MessageDialog
|
||||||
|
show={props.show}
|
||||||
|
onHide={props.hide}
|
||||||
|
attributes={{
|
||||||
|
title: constants.FIX_LARGE_THUMBNAILS,
|
||||||
|
staticBackdrop: true,
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginBottom: '30px',
|
||||||
|
padding: '0 5%',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}>
|
||||||
|
{inprogress ? (
|
||||||
|
<>
|
||||||
|
<div style={{ marginBottom: '10px' }}>
|
||||||
|
<ComfySpan>
|
||||||
|
{' '}
|
||||||
|
{0} / {10}{' '}
|
||||||
|
</ComfySpan>{' '}
|
||||||
|
<span style={{ marginLeft: '10px' }}>
|
||||||
|
{' '}
|
||||||
|
files exported
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: '100%', marginBottom: '30px' }}>
|
||||||
|
<ProgressBar
|
||||||
|
now={Math.round((1 * 100) / 10)}
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -33,6 +33,7 @@ import exportService from 'services/exportService';
|
||||||
import { Subscription } from 'services/billingService';
|
import { Subscription } from 'services/billingService';
|
||||||
import { PAGES } from 'types';
|
import { PAGES } from 'types';
|
||||||
import { ARCHIVE_SECTION } from 'components/pages/gallery/Collections';
|
import { ARCHIVE_SECTION } from 'components/pages/gallery/Collections';
|
||||||
|
import FixLargeThumbnails from './FixLargeThumbnail';
|
||||||
interface Props {
|
interface Props {
|
||||||
collections: Collection[];
|
collections: Collection[];
|
||||||
setDialogMessage: SetDialogMessage;
|
setDialogMessage: SetDialogMessage;
|
||||||
|
@ -50,6 +51,7 @@ export default function Sidebar(props: Props) {
|
||||||
const [recoverModalView, setRecoveryModalView] = useState(false);
|
const [recoverModalView, setRecoveryModalView] = useState(false);
|
||||||
const [twoFactorModalView, setTwoFactorModalView] = useState(false);
|
const [twoFactorModalView, setTwoFactorModalView] = useState(false);
|
||||||
const [exportModalView, setExportModalView] = useState(false);
|
const [exportModalView, setExportModalView] = useState(false);
|
||||||
|
const [fixLargeThumbsView, setFixLargeThumbsView] = useState(true);
|
||||||
const galleryContext = useContext(GalleryContext);
|
const galleryContext = useContext(GalleryContext);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const main = async () => {
|
const main = async () => {
|
||||||
|
@ -267,6 +269,17 @@ export default function Sidebar(props: Props) {
|
||||||
{constants.UPDATE_EMAIL}
|
{constants.UPDATE_EMAIL}
|
||||||
</LinkButton>
|
</LinkButton>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
<>
|
||||||
|
<FixLargeThumbnails
|
||||||
|
show={fixLargeThumbsView}
|
||||||
|
hide={() => setFixLargeThumbsView(false)}
|
||||||
|
/>
|
||||||
|
<LinkButton
|
||||||
|
style={{ marginTop: '30px' }}
|
||||||
|
onClick={() => setFixLargeThumbsView(true)}>
|
||||||
|
{constants.FIX_LARGE_THUMBNAILS}
|
||||||
|
</LinkButton>
|
||||||
|
</>
|
||||||
<LinkButton
|
<LinkButton
|
||||||
style={{ marginTop: '30px' }}
|
style={{ marginTop: '30px' }}
|
||||||
onClick={openFeedbackURL}>
|
onClick={openFeedbackURL}>
|
||||||
|
|
|
@ -552,6 +552,7 @@ const englishConstants = {
|
||||||
SORT_BY_LATEST_PHOTO: 'recent photo',
|
SORT_BY_LATEST_PHOTO: 'recent photo',
|
||||||
SORT_BY_MODIFICATION_TIME: 'last updated',
|
SORT_BY_MODIFICATION_TIME: 'last updated',
|
||||||
SORT_BY_COLLECTION_NAME: 'album name',
|
SORT_BY_COLLECTION_NAME: 'album name',
|
||||||
|
FIX_LARGE_THUMBNAILS: 'fix large thumbnails',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default englishConstants;
|
export default englishConstants;
|
||||||
|
|
Loading…
Reference in a new issue