Options UI (GoogleChromeLabs#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 (:unicorn:)

* 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.

package.json

@@ -63,12 +63,12 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "comlink": "^3.0.3",
+    "comlink-loader": "^1.0.0",
     "material-components-web": "^0.32.0",
-    "material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
     "preact": "^8.2.7",
     "preact-i18n": "^1.2.0",
     "preact-material-components": "^1.3.7",
-    "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
     "preact-router": "^2.6.0"
   }
 }

src/codecs/encoders.ts

@@ -0,0 +1,15 @@
+import * as mozJPEG from './mozjpeg/encoder';
+import { EncoderState as MozJPEGEncodeData, EncodeOptions as MozJPEGEncodeOptions } from './mozjpeg/encoder';
+import * as identity from './identity/encoder';
+import { EncoderState as IdentityEncodeData, EncodeOptions as IdentityEncodeOptions } from './identity/encoder';
+
+export type EncoderState = IdentityEncodeData | MozJPEGEncodeData;
+export type EncoderOptions = IdentityEncodeOptions | MozJPEGEncodeOptions;
+export type EncoderType = keyof typeof encoderMap;
+
+export const encoderMap = {
+  [identity.type]: identity,
+  [mozJPEG.type]: mozJPEG
+};
+
+export const encoders = Array.from(Object.values(encoderMap));

src/codecs/identity/encoder.ts

@@ -0,0 +1,6 @@
+export interface EncodeOptions {}
+export interface EncoderState { type: typeof type; options: EncodeOptions; }
+
+export const type = 'identity';
+export const label = 'Original image';
+export const defaultOptions: EncodeOptions = {};

src/lib/codec-wrappers/mozjpeg-enc.ts → src/codecs/mozjpeg/EncoderWorker.ts

@@ -1,7 +1,6 @@
-import { Encoder } from './codec';
-
 import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
 // Using require() so TypeScript doesn’t complain about this not being a module.
+import { EncodeOptions } from './encoder';
 const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
 
 // API exposed by wasm module. Details in the codec’s README.
@@ -15,9 +14,10 @@ interface ModuleAPI {
   get_result_size(): number;
 }
 
-export class MozJpegEncoder implements Encoder {
+export default class MozJpegEncoder {
   private emscriptenModule: Promise<EmscriptenWasm.Module>;
   private api: Promise<ModuleAPI>;
+
   constructor() {
     this.emscriptenModule = new Promise((resolve) => {
       const m = mozjpeg_enc({
@@ -54,18 +54,18 @@ export class MozJpegEncoder implements Encoder {
         encode: m.cwrap('encode', '', ['number', 'number', 'number', 'number']),
         free_result: m.cwrap('free_result', '', []),
         get_result_pointer: m.cwrap('get_result_pointer', 'number', []),
-        get_result_size: m.cwrap('get_result_size', 'number', []),
+        get_result_size: m.cwrap('get_result_size', 'number', [])
       };
     })();
   }
 
-  async encode(data: ImageData): Promise<ArrayBuffer> {
+  async encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
     const m = await this.emscriptenModule;
     const api = await this.api;
 
     const p = api.create_buffer(data.width, data.height);
     m.HEAP8.set(data.data, p);
-    api.encode(p, data.width, data.height, 2);
+    api.encode(p, data.width, data.height, options.quality);
     const resultPointer = api.get_result_pointer();
     const resultSize = api.get_result_size();
     const resultView = new Uint8Array(m.HEAP8.buffer, resultPointer, resultSize);

src/codecs/mozjpeg/encoder.ts

@@ -0,0 +1,16 @@
+import EncoderWorker from './EncoderWorker';
+
+export interface EncodeOptions { quality: number; }
+export interface EncoderState { type: typeof type; options: EncodeOptions; }
+
+export const type = 'mozjpeg';
+export const label = 'MozJPEG';
+export const mimeType = 'image/jpeg';
+export const extension = 'jpg';
+export const defaultOptions: EncodeOptions = { quality: 7 };
+
+export async function encode(data: ImageData, options: EncodeOptions) {
+  // We need to await this because it's been comlinked.
+  const encoder = await new EncoderWorker();
+  return encoder.encode(data, options);
+}

src/codecs/mozjpeg/options.tsx

@@ -0,0 +1,35 @@
+import { h, Component } from 'preact';
+import { EncodeOptions } from './encoder';
+import { bind } from '../../lib/util';
+
+type Props = {
+  options: EncodeOptions,
+  onChange(newOptions: EncodeOptions): void
+};
+
+export default class MozJpegCodecOptions extends Component<Props, {}> {
+  @bind
+  onChange(event: Event) {
+    const el = event.currentTarget as HTMLInputElement;
+    this.props.onChange({ quality: Number(el.value) });
+  }
+
+  render({ options }: Props) {
+    return (
+      <div>
+        <label>
+          Quality:
+          <input
+            name="quality"
+            type="range"
+            min="1"
+            max="100"
+            step="1"
+            value={'' + options.quality}
+            onChange={this.onChange}
+          />
+        </label>
+      </div>
+    );
+  }
+}

src/components/app/index.tsx

@@ -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;
+}
+
+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;
+}
 
-type State = {
-  img?: ImageBitmap
-};
+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;
       };
     }
   }
 
+  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 });
+  }
+
+  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) {
+  async onFileChange(event: Event): Promise<void> {
     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 });
-  }
-
-  render({ }: Props, { img }: State) {
+    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>
     );
   }
 }
-