first
This commit is contained in:
@ -0,0 +1,91 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {post} from "../utils/request";
|
||||
import MediaLibraryScannerModal from "./media-library-scanner-modal";
|
||||
|
||||
export default function AjaxMediaLibraryScannerModal(
|
||||
{
|
||||
nonce = '',
|
||||
onScanCompleted = () => false,
|
||||
onClose = () => false,
|
||||
focusAfterClose = ''
|
||||
}
|
||||
) {
|
||||
const [inProgress, setInProgress] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [cancelled, setCancelled] = useState(false);
|
||||
const cancelledRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
cancelledRef.current = cancelled;
|
||||
}, [cancelled]);
|
||||
|
||||
function start() {
|
||||
setInProgress(true);
|
||||
|
||||
post('wp_smush_before_scan_library', nonce).then((response) => {
|
||||
const sliceCount = response?.slice_count;
|
||||
const slicesList = range(sliceCount, 1);
|
||||
const parallelRequests = response?.parallel_requests;
|
||||
|
||||
handleBatch(slicesList, sliceCount, parallelRequests)
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
onScanCompleted();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleBatch(remainingSlicesList, sliceCount, parallelRequests) {
|
||||
const batchPromises = [];
|
||||
const completedSliceCount = Math.max(sliceCount - remainingSlicesList.length, 0);
|
||||
const batch = remainingSlicesList.splice(0, parallelRequests);
|
||||
|
||||
updateProgress(completedSliceCount, sliceCount);
|
||||
|
||||
batch.forEach((sliceNumber) => {
|
||||
batchPromises.push(
|
||||
post('wp_smush_scan_library_slice', nonce, {slice: sliceNumber})
|
||||
);
|
||||
});
|
||||
|
||||
return new Promise((resolve) => {
|
||||
Promise.all(batchPromises)
|
||||
.then(() => {
|
||||
if (!cancelledRef.current) {
|
||||
if (remainingSlicesList.length) {
|
||||
handleBatch(remainingSlicesList, sliceCount, parallelRequests)
|
||||
.then(resolve);
|
||||
} else {
|
||||
updateProgress(sliceCount, sliceCount);
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function range(size, startAt = 0) {
|
||||
return [...Array(size).keys()].map(i => i + startAt);
|
||||
}
|
||||
|
||||
function cancelScan() {
|
||||
setCancelled(true);
|
||||
setInProgress(false);
|
||||
setProgress(0);
|
||||
}
|
||||
|
||||
function updateProgress(completedSlices, totalSlices) {
|
||||
const progress = (completedSlices / totalSlices) * 100;
|
||||
setProgress(progress);
|
||||
}
|
||||
|
||||
return <MediaLibraryScannerModal
|
||||
inProgress={inProgress}
|
||||
progress={progress}
|
||||
onCancel={cancelScan}
|
||||
focusAfterClose={focusAfterClose}
|
||||
onClose={onClose}
|
||||
onStart={start}
|
||||
/>;
|
||||
};
|
||||
@ -0,0 +1,76 @@
|
||||
import React, {useRef, useState} from "react";
|
||||
import {post} from "../utils/request";
|
||||
import MediaLibraryScannerModal from "./media-library-scanner-modal";
|
||||
|
||||
export default function BackgroundMediaLibraryScannerModal(
|
||||
{
|
||||
nonce = '',
|
||||
onScanCompleted = () => false,
|
||||
onClose = () => false,
|
||||
focusAfterClose = ''
|
||||
}
|
||||
) {
|
||||
const [inProgress, setInProgress] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [cancelled, setCancelled] = useState(false);
|
||||
const progressTimeoutId = useRef(0);
|
||||
|
||||
function start() {
|
||||
post('wp_smush_start_background_scan', nonce).then(() => {
|
||||
setInProgress(true);
|
||||
progressTimeoutId.current = setTimeout(updateProgress, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function clearProgressTimeout() {
|
||||
if (progressTimeoutId.current) {
|
||||
clearTimeout(progressTimeoutId.current);
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
post('wp_smush_get_background_scan_status', nonce).then(response => {
|
||||
const isCompleted = response?.is_completed;
|
||||
if (isCompleted) {
|
||||
clearProgressTimeout();
|
||||
onScanCompleted();
|
||||
return;
|
||||
}
|
||||
|
||||
const isCancelled = response?.is_cancelled;
|
||||
if (isCancelled) {
|
||||
clearProgressTimeout();
|
||||
changeStateToCancelled();
|
||||
return;
|
||||
}
|
||||
|
||||
const totalItems = response?.total_items;
|
||||
const processedItems = response?.processed_items;
|
||||
const progress = (processedItems / totalItems) * 100;
|
||||
setProgress(progress);
|
||||
|
||||
progressTimeoutId.current = setTimeout(updateProgress, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
function cancelScan() {
|
||||
clearProgressTimeout();
|
||||
post('wp_smush_cancel_background_scan', nonce)
|
||||
.then(changeStateToCancelled);
|
||||
}
|
||||
|
||||
function changeStateToCancelled() {
|
||||
setCancelled(true);
|
||||
setProgress(0);
|
||||
setInProgress(false);
|
||||
}
|
||||
|
||||
return <MediaLibraryScannerModal
|
||||
inProgress={inProgress}
|
||||
progress={progress}
|
||||
onCancel={cancelScan}
|
||||
focusAfterClose={focusAfterClose}
|
||||
onClose={onClose}
|
||||
onStart={start}
|
||||
/>;
|
||||
};
|
||||
@ -0,0 +1,49 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import Modal from "../common/modal";
|
||||
import {post} from "../utils/request";
|
||||
import Button from "../common/button";
|
||||
import ProgressBar from "../common/progress-bar";
|
||||
|
||||
const {__} = wp.i18n;
|
||||
|
||||
export default function MediaLibraryScannerModal(
|
||||
{
|
||||
inProgress = false,
|
||||
progress = 0,
|
||||
onClose = () => false,
|
||||
onStart = () => false,
|
||||
onCancel = () => false,
|
||||
focusAfterClose = ''
|
||||
}
|
||||
) {
|
||||
function content() {
|
||||
if (inProgress) {
|
||||
return <>
|
||||
<ProgressBar progress={progress}/>
|
||||
<Button id="wp-smush-cancel-media-library-scan"
|
||||
icon="sui-icon-close"
|
||||
text={__('Cancel', 'wp-smushit')}
|
||||
ghost={true}
|
||||
onClick={onCancel}
|
||||
/>
|
||||
</>;
|
||||
} else {
|
||||
return <>
|
||||
<Button id="wp-smush-start-media-library-scan"
|
||||
icon="sui-icon-play"
|
||||
text={__('Start', 'wp-smushit')}
|
||||
onClick={onStart}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
||||
return <Modal id="wp-smush-media-library-scanner-modal"
|
||||
title={__('Scan Media Library', 'wp-smushit')}
|
||||
description={__('Scans the media library to detect items to Smush.', 'wp-smushit')}
|
||||
onClose={onClose}
|
||||
focusAfterClose={focusAfterClose}
|
||||
disableCloseButton={inProgress}>
|
||||
{content()}
|
||||
</Modal>;
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import React, {useState} from "react";
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
import ReactDOM from "react-dom";
|
||||
import Button from "../common/button";
|
||||
import FloatingNoticePlaceholder from "../common/floating-notice-placeholder";
|
||||
import {showSuccessNotice} from "../utils/notices";
|
||||
import AjaxMediaLibraryScannerModal from "./ajax-media-library-scanner-modal";
|
||||
import BackgroundMediaLibraryScannerModal from "./background-media-library-scanner-modal";
|
||||
|
||||
const {__} = wp.i18n;
|
||||
|
||||
function MediaLibraryScanner({}) {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
return <>
|
||||
<FloatingNoticePlaceholder id="wp-smush-media-library-scanner-notice"/>
|
||||
|
||||
{modalOpen &&
|
||||
<BackgroundMediaLibraryScannerModal
|
||||
focusAfterClose="wp-smush-open-media-library-scanner"
|
||||
nonce={mediaLibraryScan.nonce}
|
||||
onScanCompleted={() => {
|
||||
showSuccessNotice(
|
||||
'wp-smush-media-library-scanner-notice',
|
||||
__('Scan completed successfully!', 'wp-smushit'),
|
||||
true
|
||||
);
|
||||
setModalOpen(false);
|
||||
window.location.reload();
|
||||
}}
|
||||
onClose={() => setModalOpen(false)}
|
||||
/>
|
||||
}
|
||||
|
||||
<Button id="wp-smush-open-media-library-scanner" text={__('Re-Check Images', 'wp-smushit')}
|
||||
className="wp-smush-scan"
|
||||
icon="sui-icon-update"
|
||||
disabled={modalOpen}
|
||||
onClick={() => setModalOpen(true)}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
|
||||
domReady(function () {
|
||||
const scannerContainer = document.getElementById('wp-smush-media-library-scanner');
|
||||
if (scannerContainer) {
|
||||
ReactDOM.render(
|
||||
<MediaLibraryScanner/>,
|
||||
scannerContainer
|
||||
);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user