mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 09:39:15 +00:00
Options UI (#39)
* Initial work to add Options config
* Use a single encoder instance and retry up to 10 times on failure.
* Switch both sides to allow encoding from the source image, add options configuration for each.
* Styling for options (and a few tweaks for the app)
* Dep updates.
* Remove commented out code.
* Fix Encoder typing
* Fix lint issues
* Apparently I didnt have tslint autofix enabled on the chromebook
* Attempt to fix layout/panning issues
* Fix missing custom element import!
* Fix variable naming, remove dynamic encoder names, remove retry, allow encoders to return ImageData.
* Refactor state management to use an Array of objects and immutable updates instead of relying on explicit update notifications.
* Add Identity encoder, which is a passthrough encoder that handles the "original" view.
* Drop comlink-loader into the project and add ".worker" to the jpeg encoder filename so it runs in a worker (🦄)
* lint fixes.
* cleanup
* smaller PR feedback fixes
* rename "jpeg" codec to "MozJpeg"
* Formatting fixes for Options
* Colocate codecs and their options UIs in src/codecs, and standardize the namings
* Handle canvas errors
* Throw if quality is undefined, add default quality
* add note about temp styles
* add note about temp styles [2]
* Renaming updateOption
* Clarify option input bindings
* Move updateCanvas() to util and rename to drawBitmapToCanvas
* use generics to pass through encoder options
* Remove unused dependencies
* fix options type
* const
* Use `Array.prototype.some()` for image loading check
* Display encoding errors in the UI.
* I fought typescript and I think I won
* This doesn't need to be optional
* Quality isn't optional
* Simplifying comlink casting
* Splitting counters into loading and displaying
* Still loading if the loading counter isn't equal.
This commit is contained in:
Jason Miller
committed by
Jake Archibald
Jake Archibald
parent
65847c0ed7
commit
3035a68b90
@@ -2,56 +2,200 @@ import { h, Component } from 'preact';
|
||||
import { bind, bitmapToImageData } from '../../lib/util';
|
||||
import * as style from './style.scss';
|
||||
import Output from '../output';
|
||||
import Options from '../options';
|
||||
|
||||
import {MozJpegEncoder} from '../../lib/codec-wrappers/mozjpeg-enc';
|
||||
import * as mozJPEG from '../../codecs/mozjpeg/encoder';
|
||||
import * as identity from '../../codecs/identity/encoder';
|
||||
import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
|
||||
|
||||
type Props = {};
|
||||
interface SourceImage {
|
||||
file: File;
|
||||
bmp: ImageBitmap;
|
||||
data: ImageData;
|
||||
}
|
||||
|
||||
type State = {
|
||||
img?: ImageBitmap
|
||||
};
|
||||
interface EncodedImage {
|
||||
encoderState: EncoderState;
|
||||
bmp?: ImageBitmap;
|
||||
loading: boolean;
|
||||
/** Counter of the latest bmp currently encoding */
|
||||
loadingCounter: number;
|
||||
/** Counter of the latest bmp encoded */
|
||||
loadedCounter: number;
|
||||
}
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
source?: SourceImage;
|
||||
images: [EncodedImage, EncodedImage];
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {};
|
||||
state: State = {
|
||||
loading: false,
|
||||
images: [
|
||||
{
|
||||
encoderState: { type: identity.type, options: identity.defaultOptions },
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
// In development, persist application state across hot reloads:
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this.setState(window.STATE);
|
||||
this.componentDidUpdate = () => {
|
||||
const oldCDU = this.componentDidUpdate;
|
||||
this.componentDidUpdate = (props, state) => {
|
||||
if (oldCDU) oldCDU.call(this, props, state);
|
||||
window.STATE = this.state;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
async onFileChange(event: Event) {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
if (!fileInput.files || !fileInput.files[0]) return;
|
||||
// TODO: handle decode error
|
||||
const bitmap = await createImageBitmap(fileInput.files[0]);
|
||||
const data = await bitmapToImageData(bitmap);
|
||||
const encoder = new MozJpegEncoder();
|
||||
const compressedData = await encoder.encode(data);
|
||||
const blob = new Blob([compressedData], {type: 'image/jpeg'});
|
||||
const compressedImage = await createImageBitmap(blob);
|
||||
this.setState({ img: compressedImage });
|
||||
onEncoderChange(index: 0 | 1, type: EncoderType, options?: EncoderOptions): void {
|
||||
const images = this.state.images.slice() as [EncodedImage, EncodedImage];
|
||||
const image = images[index];
|
||||
|
||||
// Some type cheating here.
|
||||
// encoderMap[type].defaultOptions is always safe.
|
||||
// options should always be correct for the type, but TypeScript isn't smart enough.
|
||||
const encoderState: EncoderState = {
|
||||
type,
|
||||
options: options ? options : encoderMap[type].defaultOptions
|
||||
} as EncoderState;
|
||||
|
||||
images[index] = {
|
||||
...image,
|
||||
encoderState,
|
||||
};
|
||||
|
||||
this.setState({ images });
|
||||
}
|
||||
|
||||
render({ }: Props, { img }: State) {
|
||||
onOptionsChange(index: 0 | 1, options: EncoderOptions): void {
|
||||
this.onEncoderChange(index, this.state.images[index].encoderState.type, options);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const { source, images } = this.state;
|
||||
|
||||
for (const [i, image] of images.entries()) {
|
||||
if (source !== prevState.source || image !== prevState.images[i]) {
|
||||
this.updateImage(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
async onFileChange(event: Event): Promise<void> {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) return;
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const bmp = await createImageBitmap(file);
|
||||
// compute the corresponding ImageData once since it only changes when the file changes:
|
||||
const data = await bitmapToImageData(bmp);
|
||||
this.setState({
|
||||
source: { data, bmp, file },
|
||||
error: undefined,
|
||||
loading: false
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ error: 'IMAGE_INVALID', loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
async updateImage(index: number): Promise<void> {
|
||||
const { source, images } = this.state;
|
||||
if (!source) return;
|
||||
let image = images[index];
|
||||
|
||||
// Each time we trigger an async encode, the ID changes.
|
||||
image.loadingCounter = image.loadingCounter + 1;
|
||||
const loadingCounter = image.loadingCounter;
|
||||
|
||||
image.loading = true;
|
||||
this.setState({ });
|
||||
|
||||
const result = await this.updateCompressedImage(source, image.encoderState);
|
||||
|
||||
image = this.state.images[index];
|
||||
// If a later encode has landed before this one, return.
|
||||
if (loadingCounter < image.loadedCounter) return;
|
||||
image.bmp = result;
|
||||
image.loading = image.loadingCounter !== loadingCounter;
|
||||
image.loadedCounter = loadingCounter;
|
||||
this.setState({ });
|
||||
}
|
||||
|
||||
async updateCompressedImage(source: SourceImage, encodeData: EncoderState): Promise<ImageBitmap> {
|
||||
// Special case for identity
|
||||
if (encodeData.type === identity.type) return source.bmp;
|
||||
|
||||
try {
|
||||
const compressedData = await (() => {
|
||||
switch (encodeData.type) {
|
||||
case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
|
||||
default: throw Error(`Unexpected encoder name`);
|
||||
}
|
||||
})();
|
||||
|
||||
const blob = new Blob([compressedData], {
|
||||
type: encoderMap[encodeData.type].mimeType
|
||||
});
|
||||
|
||||
const bitmap = await createImageBitmap(blob);
|
||||
this.setState({ error: '' });
|
||||
return bitmap;
|
||||
} catch (err) {
|
||||
this.setState({ error: `Encoding error (type=${encodeData.type}): ${err}` });
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
render({ }: Props, { loading, error, images, source }: State) {
|
||||
const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
|
||||
|
||||
loading = loading || images.some(image => image.loading);
|
||||
|
||||
return (
|
||||
<div id="app" class={style.app}>
|
||||
{img ?
|
||||
<Output img={img} />
|
||||
:
|
||||
<div>
|
||||
{(leftImageBmp && rightImageBmp) ? (
|
||||
<Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
|
||||
) : (
|
||||
<div class={style.welcome}>
|
||||
<h1>Select an image</h1>
|
||||
<input type="file" onChange={this.onFileChange} />
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
{images.map((image, index) => (
|
||||
<span class={index ? style.rightLabel : style.leftLabel}>{encoderMap[image.encoderState.type].label}</span>
|
||||
))}
|
||||
{images.map((image, index) => (
|
||||
<Options
|
||||
class={index ? style.rightOptions : style.leftOptions}
|
||||
encoderState={image.encoderState}
|
||||
onTypeChange={this.onEncoderChange.bind(this, index)}
|
||||
onOptionsChange={this.onOptionsChange.bind(this, index)}
|
||||
/>
|
||||
))}
|
||||
{loading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
|
||||
{error && <span style={{ position: 'fixed', top: 0, left: 0 }}>Error: {error}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user