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/oxipng/options.tsx

@@ -0,0 +1,44 @@
+import { h, Component } from 'preact';
+import { bind } from '../../lib/initial-util';
+import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
+import { EncodeOptions } from './encoder-meta';
+import Range from '../../components/range';
+import * as style from '../../components/Options/style.scss';
+
+type Props = {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+};
+
+export default class OxiPNGEncoderOptions extends Component<Props, {}> {
+  @bind
+  onChange(event: Event) {
+    const form = (event.currentTarget as HTMLInputElement).closest(
+      'form',
+    ) as HTMLFormElement;
+
+    const options: EncodeOptions = {
+      level: inputFieldValueAsNumber(form.level),
+    };
+    this.props.onChange(options);
+  }
+
+  render({ options }: Props) {
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <div class={style.optionOneCell}>
+          <Range
+            name="level"
+            min="0"
+            max="3"
+            step="1"
+            value={options.level}
+            onInput={this.onChange}
+          >
+            Effort:
+          </Range>
+        </div>
+      </form>
+    );
+  }
+}