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.

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