wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/codecs/generic/quality-option.tsx

@@ -0,0 +1,52 @@
+import { h, Component } from 'preact';
+import { bind } from '../../lib/initial-util';
+import * as style from '../../components/Options/style.scss';
+import Range from '../../components/range';
+
+interface EncodeOptions {
+  quality: number;
+}
+
+type Props = {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+};
+
+interface QualityOptionArg {
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export default function qualityOption(opts: QualityOptionArg = {}) {
+  const { min = 0, max = 100, step = 1 } = opts;
+
+  class QualityOptions 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 class={style.optionsSection}>
+          <div class={style.optionOneCell}>
+            <Range
+              name="quality"
+              min={min}
+              max={max}
+              step={step || 'any'}
+              value={options.quality}
+              onInput={this.onChange}
+            >
+              Quality:
+            </Range>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return QualityOptions;
+}