forked from external-repos/squoosh
Generating processor metadata
This commit is contained in:
Jake Archibald
774
src/client/lazy-app/Compress/index.tsx
Normal file
774
src/client/lazy-app/Compress/index.tsx
Normal file
@@ -0,0 +1,774 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
import { bind, Fileish } from '../../lib/initial-util';
|
||||
import { blobToImg, drawableToImageData, blobToText } from '../../lib/util';
|
||||
import * as style from './style.scss';
|
||||
import Output from '../Output';
|
||||
import Options from '../Options';
|
||||
import ResultCache from './result-cache';
|
||||
import * as identity from '../../codecs/identity/encoder-meta';
|
||||
import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
|
||||
import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
|
||||
import * as webP from '../../codecs/webp/encoder-meta';
|
||||
import * as avif from '../../codecs/avif/encoder-meta';
|
||||
import * as browserPNG from '../../codecs/browser-png/encoder-meta';
|
||||
import * as browserJPEG from '../../codecs/browser-jpeg/encoder-meta';
|
||||
import * as browserWebP from '../../codecs/browser-webp/encoder-meta';
|
||||
import * as browserGIF from '../../codecs/browser-gif/encoder-meta';
|
||||
import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
|
||||
import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
|
||||
import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
|
||||
import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
|
||||
import {
|
||||
EncoderState,
|
||||
EncoderType,
|
||||
EncoderOptions,
|
||||
encoderMap,
|
||||
} from '../../codecs/encoders';
|
||||
import {
|
||||
PreprocessorState,
|
||||
defaultPreprocessorState,
|
||||
} from '../../codecs/preprocessors';
|
||||
import { decodeImage } from '../../codecs/decoders';
|
||||
import { cleanMerge, cleanSet } from '../../lib/clean-modify';
|
||||
import Processor from '../../codecs/processor';
|
||||
import {
|
||||
BrowserResizeOptions,
|
||||
isWorkerOptions as isWorkerResizeOptions,
|
||||
isHqx,
|
||||
WorkerResizeOptions,
|
||||
} from '../../codecs/resize/processor-meta';
|
||||
import './custom-els/MultiPanel';
|
||||
import Results from '../results';
|
||||
import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
|
||||
import SnackBarElement from '../../lib/SnackBar';
|
||||
import {
|
||||
InputProcessorState,
|
||||
defaultInputProcessorState,
|
||||
} from '../../codecs/input-processors';
|
||||
|
||||
export interface SourceImage {
|
||||
file: File | Fileish;
|
||||
decoded: ImageData;
|
||||
processed: ImageData;
|
||||
vectorImage?: HTMLImageElement;
|
||||
inputProcessorState: InputProcessorState;
|
||||
}
|
||||
|
||||
interface SideSettings {
|
||||
preprocessorState: PreprocessorState;
|
||||
encoderState: EncoderState;
|
||||
}
|
||||
|
||||
interface Side {
|
||||
preprocessed?: ImageData;
|
||||
file?: Fileish;
|
||||
downloadUrl?: string;
|
||||
data?: ImageData;
|
||||
latestSettings: SideSettings;
|
||||
encodedSettings?: SideSettings;
|
||||
loading: boolean;
|
||||
/** Counter of the latest bmp currently encoding */
|
||||
loadingCounter: number;
|
||||
/** Counter of the latest bmp encoded */
|
||||
loadedCounter: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
file: File | Fileish;
|
||||
showSnack: SnackBarElement['showSnackbar'];
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
source?: SourceImage;
|
||||
sides: [Side, Side];
|
||||
/** Source image load */
|
||||
loading: boolean;
|
||||
loadingCounter: number;
|
||||
error?: string;
|
||||
mobileView: boolean;
|
||||
}
|
||||
|
||||
interface UpdateImageOptions {
|
||||
skipPreprocessing?: boolean;
|
||||
}
|
||||
|
||||
async function processInput(
|
||||
data: ImageData,
|
||||
inputProcessData: InputProcessorState,
|
||||
processor: Processor,
|
||||
) {
|
||||
let processedData = data;
|
||||
|
||||
if (inputProcessData.rotate.rotate !== 0) {
|
||||
processedData = await processor.rotate(
|
||||
processedData,
|
||||
inputProcessData.rotate,
|
||||
);
|
||||
}
|
||||
|
||||
return processedData;
|
||||
}
|
||||
|
||||
async function preprocessImage(
|
||||
source: SourceImage,
|
||||
preprocessData: PreprocessorState,
|
||||
processor: Processor,
|
||||
): Promise<ImageData> {
|
||||
let result = source.processed;
|
||||
|
||||
if (preprocessData.resize.enabled) {
|
||||
if (preprocessData.resize.method === 'vector' && source.vectorImage) {
|
||||
result = processor.vectorResize(
|
||||
source.vectorImage,
|
||||
preprocessData.resize,
|
||||
);
|
||||
} else if (isHqx(preprocessData.resize)) {
|
||||
// Hqx can only do x2, x3 or x4.
|
||||
result = await processor.workerResize(result, preprocessData.resize);
|
||||
// If the target size is not a clean x2, x3 or x4, use Catmull-Rom
|
||||
// for the remaining scaling.
|
||||
const pixelOpts = { ...preprocessData.resize, method: 'catrom' };
|
||||
result = await processor.workerResize(
|
||||
result,
|
||||
pixelOpts as WorkerResizeOptions,
|
||||
);
|
||||
} else if (isWorkerResizeOptions(preprocessData.resize)) {
|
||||
result = await processor.workerResize(result, preprocessData.resize);
|
||||
} else {
|
||||
result = processor.resize(
|
||||
result,
|
||||
preprocessData.resize as BrowserResizeOptions,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (preprocessData.quantizer.enabled) {
|
||||
result = await processor.imageQuant(result, preprocessData.quantizer);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function compressImage(
|
||||
image: ImageData,
|
||||
encodeData: EncoderState,
|
||||
sourceFilename: string,
|
||||
processor: Processor,
|
||||
): Promise<Fileish> {
|
||||
const compressedData = await (() => {
|
||||
switch (encodeData.type) {
|
||||
case oxiPNG.type:
|
||||
return processor.oxiPngEncode(image, encodeData.options);
|
||||
case mozJPEG.type:
|
||||
return processor.mozjpegEncode(image, encodeData.options);
|
||||
case webP.type:
|
||||
return processor.webpEncode(image, encodeData.options);
|
||||
case avif.type:
|
||||
return processor.avifEncode(image, encodeData.options);
|
||||
case browserPNG.type:
|
||||
return processor.browserPngEncode(image);
|
||||
case browserJPEG.type:
|
||||
return processor.browserJpegEncode(image, encodeData.options);
|
||||
case browserWebP.type:
|
||||
return processor.browserWebpEncode(image, encodeData.options);
|
||||
case browserGIF.type:
|
||||
return processor.browserGifEncode(image);
|
||||
case browserTIFF.type:
|
||||
return processor.browserTiffEncode(image);
|
||||
case browserJP2.type:
|
||||
return processor.browserJp2Encode(image);
|
||||
case browserBMP.type:
|
||||
return processor.browserBmpEncode(image);
|
||||
case browserPDF.type:
|
||||
return processor.browserPdfEncode(image);
|
||||
default:
|
||||
throw Error(`Unexpected encoder ${JSON.stringify(encodeData)}`);
|
||||
}
|
||||
})();
|
||||
|
||||
const encoder = encoderMap[encodeData.type];
|
||||
|
||||
return new Fileish(
|
||||
[compressedData],
|
||||
sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`),
|
||||
{ type: encoder.mimeType },
|
||||
);
|
||||
}
|
||||
|
||||
function stateForNewSourceData(state: State, newSource: SourceImage): State {
|
||||
let newState = { ...state };
|
||||
|
||||
for (const i of [0, 1]) {
|
||||
// Ditch previous encodings
|
||||
const downloadUrl = state.sides[i].downloadUrl;
|
||||
if (downloadUrl) URL.revokeObjectURL(downloadUrl);
|
||||
|
||||
newState = cleanMerge(state, `sides.${i}`, {
|
||||
preprocessed: undefined,
|
||||
file: undefined,
|
||||
downloadUrl: undefined,
|
||||
data: undefined,
|
||||
encodedSettings: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return newState;
|
||||
}
|
||||
|
||||
async function processSvg(blob: Blob): Promise<HTMLImageElement> {
|
||||
// Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
|
||||
// In Chrome it loads, but drawImage behaves weirdly.
|
||||
// This function sets width/height if it isn't already set.
|
||||
const parser = new DOMParser();
|
||||
const text = await blobToText(blob);
|
||||
const document = parser.parseFromString(text, 'image/svg+xml');
|
||||
const svg = document.documentElement!;
|
||||
|
||||
if (svg.hasAttribute('width') && svg.hasAttribute('height')) {
|
||||
return blobToImg(blob);
|
||||
}
|
||||
|
||||
const viewBox = svg.getAttribute('viewBox');
|
||||
if (viewBox === null) throw Error('SVG must have width/height or viewBox');
|
||||
|
||||
const viewboxParts = viewBox.split(/\s+/);
|
||||
svg.setAttribute('width', viewboxParts[2]);
|
||||
svg.setAttribute('height', viewboxParts[3]);
|
||||
|
||||
const serializer = new XMLSerializer();
|
||||
const newSource = serializer.serializeToString(document);
|
||||
return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
|
||||
}
|
||||
|
||||
// These are only used in the mobile view
|
||||
const resultTitles = ['Top', 'Bottom'];
|
||||
// These are only used in the desktop view
|
||||
const buttonPositions = ['download-left', 'download-right'] as (
|
||||
| 'download-left'
|
||||
| 'download-right'
|
||||
)[];
|
||||
|
||||
const originalDocumentTitle = document.title;
|
||||
|
||||
export default class Compress extends Component<Props, State> {
|
||||
widthQuery = window.matchMedia('(max-width: 599px)');
|
||||
|
||||
state: State = {
|
||||
source: undefined,
|
||||
loading: false,
|
||||
loadingCounter: 0,
|
||||
sides: [
|
||||
{
|
||||
latestSettings: {
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: {
|
||||
type: identity.type,
|
||||
options: identity.defaultOptions,
|
||||
},
|
||||
},
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false,
|
||||
},
|
||||
{
|
||||
latestSettings: {
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
|
||||
},
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false,
|
||||
},
|
||||
],
|
||||
mobileView: this.widthQuery.matches,
|
||||
};
|
||||
|
||||
private readonly encodeCache = new ResultCache();
|
||||
private readonly leftProcessor = new Processor();
|
||||
private readonly rightProcessor = new Processor();
|
||||
// For debouncing calls to updateImage for each side.
|
||||
private readonly updateImageTimeoutIds: [number?, number?] = [
|
||||
undefined,
|
||||
undefined,
|
||||
];
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.widthQuery.addListener(this.onMobileWidthChange);
|
||||
this.updateFile(props.file);
|
||||
|
||||
import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
|
||||
}
|
||||
|
||||
@bind
|
||||
private onMobileWidthChange() {
|
||||
this.setState({ mobileView: this.widthQuery.matches });
|
||||
}
|
||||
|
||||
private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
|
||||
this.setState({
|
||||
sides: cleanSet(
|
||||
this.state.sides,
|
||||
`${index}.latestSettings.encoderState`,
|
||||
{
|
||||
type: newType,
|
||||
options: encoderMap[newType].defaultOptions,
|
||||
},
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
private onPreprocessorOptionsChange(
|
||||
index: 0 | 1,
|
||||
options: PreprocessorState,
|
||||
): void {
|
||||
this.setState({
|
||||
sides: cleanSet(
|
||||
this.state.sides,
|
||||
`${index}.latestSettings.preprocessorState`,
|
||||
options,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
|
||||
this.setState({
|
||||
sides: cleanSet(
|
||||
this.state.sides,
|
||||
`${index}.latestSettings.encoderState.options`,
|
||||
options,
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
private updateDocumentTitle(filename: string = ''): void {
|
||||
document.title = filename
|
||||
? `${filename} - ${originalDocumentTitle}`
|
||||
: originalDocumentTitle;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: Props): void {
|
||||
if (nextProps.file !== this.props.file) {
|
||||
this.updateFile(nextProps.file);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.updateDocumentTitle();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const { source, sides } = this.state;
|
||||
|
||||
const sourceDataChanged =
|
||||
// Has the source object become set/unset?
|
||||
!!source !== !!prevState.source ||
|
||||
// Or has the processed data changed?
|
||||
(source &&
|
||||
prevState.source &&
|
||||
source.processed !== prevState.source.processed);
|
||||
|
||||
for (const [i, side] of sides.entries()) {
|
||||
const prevSettings = prevState.sides[i].latestSettings;
|
||||
const encoderChanged =
|
||||
side.latestSettings.encoderState !== prevSettings.encoderState;
|
||||
const preprocessorChanged =
|
||||
side.latestSettings.preprocessorState !==
|
||||
prevSettings.preprocessorState;
|
||||
|
||||
// The image only needs updated if the encoder/preprocessor settings have changed, or the
|
||||
// source has changed.
|
||||
if (sourceDataChanged || encoderChanged || preprocessorChanged) {
|
||||
this.queueUpdateImage(i, {
|
||||
skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async onCopyToOtherClick(index: 0 | 1) {
|
||||
const otherIndex = (index + 1) % 2;
|
||||
const oldSettings = this.state.sides[otherIndex];
|
||||
const newSettings = { ...this.state.sides[index] };
|
||||
|
||||
// Create a new object URL for the new settings. This avoids both sides sharing a URL, which
|
||||
// means it can be safely revoked without impacting the other side.
|
||||
if (newSettings.file)
|
||||
newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
|
||||
|
||||
this.setState({
|
||||
sides: cleanSet(this.state.sides, otherIndex, newSettings),
|
||||
});
|
||||
|
||||
const result = await this.props.showSnack('Settings copied across', {
|
||||
timeout: 5000,
|
||||
actions: ['undo', 'dismiss'],
|
||||
});
|
||||
|
||||
if (result !== 'undo') return;
|
||||
|
||||
this.setState({
|
||||
sides: cleanSet(this.state.sides, otherIndex, oldSettings),
|
||||
});
|
||||
}
|
||||
|
||||
@bind
|
||||
private async onInputProcessorChange(
|
||||
options: InputProcessorState,
|
||||
): Promise<void> {
|
||||
const source = this.state.source;
|
||||
if (!source) return;
|
||||
|
||||
const oldRotate = source.inputProcessorState.rotate.rotate;
|
||||
const newRotate = options.rotate.rotate;
|
||||
const orientationChanged = oldRotate % 180 !== newRotate % 180;
|
||||
const loadingCounter = this.state.loadingCounter + 1;
|
||||
// Either processor is good enough here.
|
||||
const processor = this.leftProcessor;
|
||||
|
||||
this.setState({
|
||||
loadingCounter,
|
||||
loading: true,
|
||||
source: cleanSet(source, 'inputProcessorState', options),
|
||||
});
|
||||
|
||||
// Abort any current encode jobs, as they're redundant now.
|
||||
this.leftProcessor.abortCurrent();
|
||||
this.rightProcessor.abortCurrent();
|
||||
|
||||
try {
|
||||
const processed = await processInput(source.decoded, options, processor);
|
||||
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
|
||||
let newState = { ...this.state, loading: false };
|
||||
newState = cleanSet(newState, 'source.processed', processed);
|
||||
newState = stateForNewSourceData(newState, newState.source!);
|
||||
|
||||
if (orientationChanged) {
|
||||
// If orientation has changed, we should flip the resize values.
|
||||
for (const i of [0, 1]) {
|
||||
const resizeSettings =
|
||||
newState.sides[i].latestSettings.preprocessorState.resize;
|
||||
newState = cleanMerge(
|
||||
newState,
|
||||
`sides.${i}.latestSettings.preprocessorState.resize`,
|
||||
{
|
||||
width: resizeSettings.height,
|
||||
height: resizeSettings.width,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
this.setState(newState);
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error(err);
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
this.props.showSnack('Processing error');
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
private async updateFile(file: File | Fileish) {
|
||||
const loadingCounter = this.state.loadingCounter + 1;
|
||||
// Either processor is good enough here.
|
||||
const processor = this.leftProcessor;
|
||||
|
||||
this.setState({ loadingCounter, loading: true });
|
||||
|
||||
// Abort any current encode jobs, as they're redundant now.
|
||||
this.leftProcessor.abortCurrent();
|
||||
this.rightProcessor.abortCurrent();
|
||||
|
||||
try {
|
||||
let decoded: ImageData;
|
||||
let vectorImage: HTMLImageElement | undefined;
|
||||
|
||||
// Special-case SVG. We need to avoid createImageBitmap because of
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=606319.
|
||||
// Also, we cache the HTMLImageElement so we can perform vector resizing later.
|
||||
if (file.type.startsWith('image/svg+xml')) {
|
||||
vectorImage = await processSvg(file);
|
||||
decoded = drawableToImageData(vectorImage);
|
||||
} else {
|
||||
// Either processor is good enough here.
|
||||
decoded = await decodeImage(file, processor);
|
||||
}
|
||||
|
||||
const processed = await processInput(
|
||||
decoded,
|
||||
defaultInputProcessorState,
|
||||
processor,
|
||||
);
|
||||
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
|
||||
let newState: State = {
|
||||
...this.state,
|
||||
source: {
|
||||
decoded,
|
||||
file,
|
||||
vectorImage,
|
||||
processed,
|
||||
inputProcessorState: defaultInputProcessorState,
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
|
||||
newState = stateForNewSourceData(newState, newState.source!);
|
||||
|
||||
for (const i of [0, 1]) {
|
||||
// Default resize values come from the image:
|
||||
newState = cleanMerge(
|
||||
newState,
|
||||
`sides.${i}.latestSettings.preprocessorState.resize`,
|
||||
{
|
||||
width: processed.width,
|
||||
height: processed.height,
|
||||
method: vectorImage ? 'vector' : 'lanczos3',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
this.updateDocumentTitle(file.name);
|
||||
this.setState(newState);
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error(err);
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
this.props.showSnack('Invalid image');
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounce the heavy lifting of updateImage.
|
||||
* Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
|
||||
*/
|
||||
private queueUpdateImage(
|
||||
index: number,
|
||||
options: UpdateImageOptions = {},
|
||||
): void {
|
||||
// Call updateImage after this delay, unless queueUpdateImage is called again, in which case the
|
||||
// timeout is reset.
|
||||
const delay = 100;
|
||||
|
||||
clearTimeout(this.updateImageTimeoutIds[index]);
|
||||
|
||||
this.updateImageTimeoutIds[index] = self.setTimeout(() => {
|
||||
this.updateImage(index, options).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}, delay);
|
||||
}
|
||||
|
||||
private async updateImage(
|
||||
index: number,
|
||||
options: UpdateImageOptions = {},
|
||||
): Promise<void> {
|
||||
const { skipPreprocessing = false } = options;
|
||||
const { source } = this.state;
|
||||
if (!source) return;
|
||||
|
||||
// Each time we trigger an async encode, the counter changes.
|
||||
const loadingCounter = this.state.sides[index].loadingCounter + 1;
|
||||
|
||||
let sides = cleanMerge(this.state.sides, index, {
|
||||
loadingCounter,
|
||||
loading: true,
|
||||
});
|
||||
|
||||
this.setState({ sides });
|
||||
|
||||
const side = sides[index];
|
||||
const settings = side.latestSettings;
|
||||
|
||||
let file: File | Fileish | undefined;
|
||||
let preprocessed: ImageData | undefined;
|
||||
let data: ImageData | undefined;
|
||||
const cacheResult = this.encodeCache.match(
|
||||
source.processed,
|
||||
settings.preprocessorState,
|
||||
settings.encoderState,
|
||||
);
|
||||
const processor = index === 0 ? this.leftProcessor : this.rightProcessor;
|
||||
|
||||
// Abort anything the processor is currently doing.
|
||||
// Although the processor will abandon current tasks when a new one is called,
|
||||
// we might not call another task here. Eg, we might get the result from the cache.
|
||||
processor.abortCurrent();
|
||||
|
||||
if (cacheResult) {
|
||||
({ file, preprocessed, data } = cacheResult);
|
||||
} else {
|
||||
try {
|
||||
// Special case for identity
|
||||
if (settings.encoderState.type === identity.type) {
|
||||
file = source.file;
|
||||
data = source.processed;
|
||||
} else {
|
||||
preprocessed =
|
||||
skipPreprocessing && side.preprocessed
|
||||
? side.preprocessed
|
||||
: await preprocessImage(
|
||||
source,
|
||||
settings.preprocessorState,
|
||||
processor,
|
||||
);
|
||||
|
||||
file = await compressImage(
|
||||
preprocessed,
|
||||
settings.encoderState,
|
||||
source.file.name,
|
||||
processor,
|
||||
);
|
||||
data = await decodeImage(file, processor);
|
||||
|
||||
this.encodeCache.add({
|
||||
data,
|
||||
preprocessed,
|
||||
file,
|
||||
sourceData: source.processed,
|
||||
encoderState: settings.encoderState,
|
||||
preprocessorState: settings.preprocessorState,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
this.props.showSnack(
|
||||
`Processing error (type=${settings.encoderState.type}): ${err}`,
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const latestData = this.state.sides[index];
|
||||
// If a later encode has landed before this one, return.
|
||||
if (loadingCounter < latestData.loadedCounter) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
|
||||
|
||||
sides = cleanMerge(this.state.sides, index, {
|
||||
file,
|
||||
data,
|
||||
preprocessed,
|
||||
downloadUrl: URL.createObjectURL(file),
|
||||
loading: sides[index].loadingCounter !== loadingCounter,
|
||||
loadedCounter: loadingCounter,
|
||||
encodedSettings: settings,
|
||||
});
|
||||
|
||||
this.setState({ sides });
|
||||
}
|
||||
|
||||
render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
|
||||
const [leftSide, rightSide] = sides;
|
||||
const [leftImageData, rightImageData] = sides.map((i) => i.data);
|
||||
|
||||
const options = sides.map((side, index) => (
|
||||
// tslint:disable-next-line:jsx-key
|
||||
<Options
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
preprocessorState={side.latestSettings.preprocessorState}
|
||||
encoderState={side.latestSettings.encoderState}
|
||||
onEncoderTypeChange={this.onEncoderTypeChange.bind(
|
||||
this,
|
||||
index as 0 | 1,
|
||||
)}
|
||||
onEncoderOptionsChange={this.onEncoderOptionsChange.bind(
|
||||
this,
|
||||
index as 0 | 1,
|
||||
)}
|
||||
onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(
|
||||
this,
|
||||
index as 0 | 1,
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
const copyDirections = (mobileView
|
||||
? ['down', 'up']
|
||||
: ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
|
||||
|
||||
const results = sides.map((side, index) => (
|
||||
// tslint:disable-next-line:jsx-key
|
||||
<Results
|
||||
downloadUrl={side.downloadUrl}
|
||||
imageFile={side.file}
|
||||
source={source}
|
||||
loading={loading || side.loading}
|
||||
copyDirection={copyDirections[index]}
|
||||
onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0 | 1)}
|
||||
buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
|
||||
>
|
||||
{!mobileView
|
||||
? null
|
||||
: [
|
||||
<ExpandIcon class={style.expandIcon} key="expand-icon" />,
|
||||
`${resultTitles[index]} (${
|
||||
encoderMap[side.latestSettings.encoderState.type].label
|
||||
})`,
|
||||
]}
|
||||
</Results>
|
||||
));
|
||||
|
||||
// For rendering, we ideally want the settings that were used to create the data, not the latest
|
||||
// settings.
|
||||
const leftDisplaySettings =
|
||||
leftSide.encodedSettings || leftSide.latestSettings;
|
||||
const rightDisplaySettings =
|
||||
rightSide.encodedSettings || rightSide.latestSettings;
|
||||
const leftImgContain =
|
||||
leftDisplaySettings.preprocessorState.resize.enabled &&
|
||||
leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
|
||||
const rightImgContain =
|
||||
rightDisplaySettings.preprocessorState.resize.enabled &&
|
||||
rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
|
||||
|
||||
return (
|
||||
<div class={style.compress}>
|
||||
<Output
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
leftCompressed={leftImageData}
|
||||
rightCompressed={rightImageData}
|
||||
leftImgContain={leftImgContain}
|
||||
rightImgContain={rightImgContain}
|
||||
onBack={onBack}
|
||||
inputProcessorState={source && source.inputProcessorState}
|
||||
onInputProcessorChange={this.onInputProcessorChange}
|
||||
/>
|
||||
{mobileView ? (
|
||||
<div class={style.options}>
|
||||
<multi-panel class={style.multiPanel} open-one-only>
|
||||
{results[0]}
|
||||
{options[0]}
|
||||
{results[1]}
|
||||
{options[1]}
|
||||
</multi-panel>
|
||||
</div>
|
||||
) : (
|
||||
[
|
||||
<div class={style.options} key="options0">
|
||||
{options[0]}
|
||||
{results[0]}
|
||||
</div>,
|
||||
<div class={style.options} key="options1">
|
||||
{options[1]}
|
||||
{results[1]}
|
||||
</div>,
|
||||
]
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user