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.

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/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;
+}
 
-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>
     );
   }
 }
-

src/components/app/style.scss

@@ -1,3 +1,62 @@
-.app h1 {
-  color: green;
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+.app {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+
+  .leftLabel,
+  .rightLabel {
+    position: fixed;
+    bottom: 0;
+    padding: 5px 10px;
+    background: rgba(0,0,0,0.5);
+    color: #fff;
+  }
+
+  .leftLabel { left: 0; }
+  .rightLabel { right: 0; }
+
+  .leftOptions,
+  .rightOptions {
+    position: fixed;
+    bottom: 40px;
+  }
+
+  .leftOptions { left: 10px; }
+  .rightOptions { right: 10px; }
+}
+
+.welcome {
+  position: absolute;
+  display: inline-block;
+  left: 50%;
+  top: 50%;
+  padding: 20px;
+  transform: translate(-50%, -50%);
+
+  h1 {
+    font-weight: inherit;
+    font-size: 150%;
+    text-align: center;
+  }
+
+  input {
+    display: inline-block;
+    width: 16em;
+    padding: 5px;
+    margin: 0 auto;
+    -webkit-appearance: none;
+    border: 1px solid #b68c86;
+    background: #f0d3cf;
+    box-shadow: inset 0 0 1px #fff;
+    border-radius: 3px;
+    cursor: pointer;
+  }
 }

src/components/options/index.tsx

@@ -0,0 +1,63 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { bind } from '../../lib/util';
+import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
+
+import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
+import { type as identityType } from '../../codecs/identity/encoder';
+import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
+
+const encoderOptionsComponentMap = {
+  [mozJPEGType]: MozJpegEncoderOptions,
+  [identityType]: undefined
+};
+
+interface Props {
+  class?: string;
+  encoderState: EncoderState;
+  onTypeChange(newType: EncoderType): void;
+  onOptionsChange(newOptions: EncoderOptions): void;
+}
+
+interface State {}
+
+export default class Options extends Component<Props, State> {
+  typeSelect?: HTMLSelectElement;
+
+  @bind
+  onTypeChange(event: Event) {
+    const el = event.currentTarget as HTMLSelectElement;
+
+    // The select element only has values matching encoder types,
+    // so 'as' is safe here.
+    const type = el.value as EncoderType;
+    this.props.onTypeChange(type);
+  }
+
+  render({ class: className, encoderState, onOptionsChange }: Props) {
+    const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
+
+    return (
+      <div class={`${style.options}${className ? (' ' + className) : ''}`}>
+        <label>
+          Mode:
+          <select value={encoderState.type} onChange={this.onTypeChange}>
+            {encoders.map(encoder => (
+              <option value={encoder.type}>{encoder.label}</option>
+            ))}
+          </select>
+        </label>
+        {EncoderOptionComponent &&
+          <EncoderOptionComponent
+            options={
+              // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct type,
+              // but typescript isn't smart enough.
+              encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
+            }
+            onChange={onOptionsChange}
+          />
+        }
+      </div>
+    );
+  }
+}

src/components/options/style.scss

@@ -0,0 +1,38 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+.options {
+    width: 180px;
+    padding: 10px;
+    background: rgba(50,50,50,0.8);
+    border: 1px solid #222;
+    box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
+    border-radius: 3px;
+    color: #eee;
+    overflow: auto;
+    z-index: 1;
+    transition: opacity 300ms ease;
+
+    &:not(:hover) {
+        opacity: .6;
+    }
+
+    label {
+        display: block;
+        padding: 5px;
+        font-weight: bold;
+
+        select {
+            margin-left: 5px;
+        }
+
+        input {
+            vertical-align: middle;
+        }
+    }
+
+    pre {
+        font-size: 10px;
+    }
+}

src/components/output/custom-els/PinchZoom/index.ts

@@ -62,7 +62,7 @@ export default class PinchZoom extends HTMLElement {
   // Current transform.
   private _transform: SVGMatrix = createMatrix();
 
-  constructor () {
+  constructor() {
     super();
 
     // Watch for children changes.
@@ -87,26 +87,26 @@ export default class PinchZoom extends HTMLElement {
     this.addEventListener('wheel', event => this._onWheel(event));
   }
 
-  connectedCallback () {
+  connectedCallback() {
     this._stageElChange();
   }
 
-  get x () {
+  get x() {
     return this._transform.e;
   }
 
-  get y () {
+  get y() {
     return this._transform.f;
   }
 
-  get scale () {
+  get scale() {
     return this._transform.a;
   }
 
   /**
    * Update the stage with a given scale/x/y.
    */
-  setTransform (opts: SetTransformOpts = {}) {
+  setTransform(opts: SetTransformOpts = {}) {
     const {
       scale = this.scale,
       allowChangeEvent = false,
@@ -174,7 +174,7 @@ export default class PinchZoom extends HTMLElement {
   /**
    * Update transform values without checking bounds. This is only called in setTransform.
    */
-  _updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
+  _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
     // Return if there's no change
     if (
       scale === this.scale &&
@@ -202,7 +202,7 @@ export default class PinchZoom extends HTMLElement {
    * require a single element to be the child of <pinch-zoom>, and
    * that's the element we pan/scale.
    */
-  private _stageElChange () {
+  private _stageElChange() {
     this._positioningEl = undefined;
 
     if (this.children.length === 0) {
@@ -220,7 +220,7 @@ export default class PinchZoom extends HTMLElement {
     this.setTransform();
   }
 
-  private _onWheel (event: WheelEvent) {
+  private _onWheel(event: WheelEvent) {
     event.preventDefault();
 
     const thisRect = this.getBoundingClientRect();
@@ -243,7 +243,7 @@ export default class PinchZoom extends HTMLElement {
     });
   }
 
-  private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
+  private _onPointerMove(previousPointers: Pointer[], currentPointers: Pointer[]) {
     // Combine next points with previous points
     const thisRect = this.getBoundingClientRect();
 
@@ -268,7 +268,7 @@ export default class PinchZoom extends HTMLElement {
   }
 
   /** Transform the view & fire a change event */
-  private _applyChange (opts: ApplyChangeOpts = {}) {
+  private _applyChange(opts: ApplyChangeOpts = {}) {
     const {
       panX = 0, panY = 0,
       originX = 0, originY = 0,

src/components/output/index.tsx

@@ -3,16 +3,17 @@ import PinchZoom from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
 import * as style from './style.scss';
-import { bind } from '../../lib/util';
+import { bind, drawBitmapToCanvas } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 type Props = {
-  img: ImageBitmap
+  leftImg: ImageBitmap,
+  rightImg: ImageBitmap
 };
 
 type State = {};
 
-export default class App extends Component<Props, State> {
+export default class Output extends Component<Props, State> {
   state: State = {};
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -20,26 +21,22 @@ export default class App extends Component<Props, State> {
   pinchZoomRight?: PinchZoom;
   retargetedEvents = new WeakSet<Event>();
 
-  updateCanvases(img: ImageBitmap) {
-    for (const [i, canvas] of [this.canvasLeft, this.canvasRight].entries()) {
-      if (!canvas) throw Error('Missing canvas');
-      const ctx = canvas.getContext('2d');
-      if (!ctx) throw Error('Expected 2d canvas context');
-      if (i === 1) {
-        // This is temporary, to show the images are different
-        ctx.filter = 'hue-rotate(180deg)';
-      }
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-    }
-  }
-
   componentDidMount() {
-    this.updateCanvases(this.props.img);
+    if (this.canvasLeft) {
+      drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
+    }
+    if (this.canvasRight) {
+      drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
+    }
   }
 
-  componentDidUpdate({ img }: Props) {
-    if (img !== this.props.img) this.updateCanvases(this.props.img);
+  componentWillReceiveProps({ leftImg, rightImg }: Props) {
+    if (leftImg !== this.props.leftImg && this.canvasLeft) {
+      drawBitmapToCanvas(this.canvasLeft, leftImg);
+    }
+    if (rightImg !== this.props.rightImg && this.canvasRight) {
+      drawBitmapToCanvas(this.canvasRight, rightImg);
+    }
   }
 
   @bind
@@ -78,9 +75,9 @@ export default class App extends Component<Props, State> {
     this.pinchZoomLeft.dispatchEvent(clonedEvent);
   }
 
-  render({ img }: Props, { }: State) {
+  render({ leftImg, rightImg }: Props, { }: State) {
     return (
-      <div>
+      <div class={style.output}>
         <two-up
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
@@ -91,13 +88,12 @@ export default class App extends Component<Props, State> {
           onWheelCapture={this.onRetargetableEvent}
         >
           <pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={leftImg.width} height={leftImg.height} />
           </pinch-zoom>
           <pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
-            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={img.width} height={img.height} />
+            <canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
           </pinch-zoom>
         </two-up>
-        <p>And that's all the app does so far!</p>
       </div>
     );
   }

src/components/output/style.scss

@@ -1,3 +1,29 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
+%fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+}
+
+.output {
+  @extend %fill;
+
+  > two-up {
+    @extend %fill;
+
+    > pinch-zoom {
+      @extend %fill;
+    }
+  }
+}
+
 .outputCanvas {
   image-rendering: pixelated;
 }

src/lib/codec-wrappers/codec.ts

@@ -1,7 +0,0 @@
-export interface Encoder {
-  encode(data: ImageData): Promise<ArrayBuffer>;
-}
-
-export interface Decoder {
-  decode(data: ArrayBuffer): Promise<ImageBitmap>;
-}

src/lib/util.ts

@@ -42,3 +42,11 @@ export async function bitmapToImageData(bitmap: ImageBitmap): Promise<ImageData>
   ctx.drawImage(bitmap, 0, 0);
   return ctx.getImageData(0, 0, bitmap.width, bitmap.height);
 }
+
+/** Replace the contents of a canvas with the given bitmap */
+export function drawBitmapToCanvas (canvas: HTMLCanvasElement, img: ImageBitmap) {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw Error('Canvas not initialized');
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+}

src/style/index.scss

@@ -1,3 +1,7 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
 @import './reset.scss';
 
 html, body {
@@ -5,6 +9,8 @@ html, body {
   width: 100%;
   padding: 0;
   margin: 0;
+  font: 14px/1.3 Roboto,'Helvetica Neue',arial,helvetica,sans-serif;
   overflow: hidden;
   overscroll-behavior: none;
+  contain: strict;
 }

src/style/reset.scss

@@ -1,3 +1,7 @@
+/*
+Note: These styles are temporary. They will be replaced before going live.
+*/
+
 button, a, img, input, select, textarea {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

webpack.config.js

@@ -33,7 +33,8 @@ module.exports = function (_, env) {
       filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
       chunkFilename: '[name].chunk.[chunkhash:5].js',
       path: path.join(__dirname, 'build'),
-      publicPath: '/'
+      publicPath: '/',
+      globalObject: 'self'
     },
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
@@ -97,6 +98,10 @@ module.exports = function (_, env) {
             }
           ]
         },
+        {
+          test: /\.worker.[tj]sx?$/,
+          loader: 'comlink-loader'
+        },
         {
           test: /\.tsx?$/,
           exclude: nodeModules,
@@ -111,16 +116,16 @@ module.exports = function (_, env) {
         {
           // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
           test: /\/codecs\/.*\.js$/,
-          loader: 'exports-loader',
+          loader: 'exports-loader'
         },
         {
           test: /\/codecs\/.*\.wasm$/,
           // This is needed to make webpack NOT process wasm files.
           // See https://github.com/webpack/webpack/issues/6725
           type: 'javascript/auto',
-          loader: 'file-loader',
+          loader: 'file-loader'
         }
-      ],
+      ]
     },
     plugins: [
       new webpack.IgnorePlugin(/(fs)/, /\/codecs\//),