Expose some options for AVIF

src/codecs/avif/encoder-meta.ts

@@ -1,10 +1,23 @@
-export interface EncodeOptions { }
+export interface EncodeOptions {
+  minQuantizer: number;
+  maxQuantizer: number;
+  tileRowsLog2: number;
+  tileColsLog2: number;
+  speed: number;
+  subsample: number;
+}
 
 export const type = 'avif';
 export const label = 'AVIF';
 export const mimeType = 'image/avif';
 export const extension = 'avif';
 export const defaultOptions: EncodeOptions = {
+  minQuantizer: 16,
+  maxQuantizer: 16,
+  tileColsLog2: 0,
+  tileRowsLog2: 0,
+  speed: 10,
+  subsample: 0,
 };
 
 export interface EncoderState { type: typeof type; options: EncodeOptions; }

src/codecs/avif/encoder.ts

@@ -9,7 +9,7 @@ export async function encode(data: ImageData, options: EncodeOptions): Promise<A
   if (!emscriptenModule) emscriptenModule = initEmscriptenModule(avif_enc, wasmUrl);
 
   const module = await emscriptenModule;
-  const resultView = module.encode(data.data, data.width, data.height);
+  const resultView = module.encode(data.data, data.width, data.height, options);
   const result = new Uint8Array(resultView);
   module.free_result();
 

src/codecs/avif/options.tsx

@@ -1,12 +1,15 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { /*inputFieldCheckedAsNumber, inputFieldValueAsNumber,*/ preventDefault } from '../../lib/util';
+import {
+  /*inputFieldCheckedAsNumber,*/ inputFieldValueAsNumber,
+  preventDefault,
+} from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 // import Checkbox from '../../components/checkbox';
 // import Expander from '../../components/expander';
 // import Select from '../../components/select';
-// import Range from '../../components/range';
+import Range from '../../components/range';
 // import linkState from 'linkstate';
 
 interface Props {
@@ -14,20 +17,58 @@ interface Props {
   onChange(newOptions: EncodeOptions): void;
 }
 
-interface State{}
+interface State {}
 
 export default class AVIFEncoderOptions extends Component<Props, State> {
-  state: State = {
-  };
+  state: State = {};
 
   @bind
   onChange(event: Event) {
+    const form = (event.currentTarget as HTMLInputElement).closest(
+      'form',
+    ) as HTMLFormElement;
+    const { options } = this.props;
+    const newOptions: EncodeOptions = {
+      // Copy over options the form doesn't currently care about, eg arithmetic
+      ...this.props.options,
+      minQuantizer: inputFieldValueAsNumber(
+        form.quantizer,
+        options.minQuantizer,
+      ),
+      maxQuantizer: inputFieldValueAsNumber(
+        form.quantizer,
+        options.maxQuantizer,
+      ),
+      speed: inputFieldValueAsNumber(form.speed, options.speed),
+    };
+    this.props.onChange(newOptions);
   }
 
   render({ options }: Props) {
     return (
       <form class={style.optionsSection} onSubmit={preventDefault}>
-        Lol
+        <div class={style.optionOneCell}>
+          <Range
+            name="quantizer"
+            min="0"
+            max="63"
+            value={options.minQuantizer}
+            onInput={this.onChange}
+          >
+            Quantizer
+          </Range>
+        </div>
+        <div class={style.optionOneCell}>
+          <Range
+            name="speed"
+            min="0"
+            max="10"
+            value={options.speed}
+            onInput={this.onChange}
+          >
+            Speed
+          </Range>
+        </div>
       </form>
     );
   }