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