Exposed speed slider, but it's weird

codecs/jxl_enc/jxl_enc.cpp

@@ -5,17 +5,23 @@
 
 using namespace emscripten;
 
+struct JXLOptions {
+  // 1 = slowest
+  // 7 = fastest
+  int speed;
+};
+
 uint8_t *result;
-val encode(std::string image, int width, int height) {
+val encode(std::string image, int width, int height, JXLOptions options) {
   jxl::CompressParams cparams;
   jxl::PassesEncoderState passes_enc_state;
-  // jxl::ThreadPool pool;
   jxl::CodecInOut io;
   jxl::PaddedBytes bytes;
   jxl::ImageBundle *main = &io.Main();
 
-  cparams.speed_tier = jxl::SpeedTier::kFalcon;
+  cparams.speed_tier = static_cast<jxl::SpeedTier>(options.speed);
   cparams.color_transform = jxl::ColorTransform::kNone;
+
   uint8_t *inBuffer = (uint8_t *)image.c_str();
 
   auto result = main->SetFromSRGB(
@@ -36,6 +42,9 @@ val encode(std::string image, int width, int height) {
 void free_result() { delete result; }
 
 EMSCRIPTEN_BINDINGS(my_module) {
+    value_object<JXLOptions>("JXLOptions")
+    .field("speed", &JXLOptions::speed);
+
   function("encode", &encode);
   function("free_result", &free_result);
 }

codecs/jxl_enc/jxl_enc.d.ts

@@ -1,7 +1,7 @@
-// import { EncodeOptions } from '../../src/codecs/avif/encoder-meta';
+import { EncodeOptions } from '../../src/codecs/jxl/encoder-meta';
 
 interface JXLModule extends EmscriptenWasm.Module {
-  encode(data: BufferSource, width: number, height: number): Uint8Array;
+  encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
   free_result(): void;
 }
 

src/codecs/jxl/encoder-meta.ts

@@ -1,4 +1,5 @@
 export interface EncodeOptions {
+  speed: number;
 }
 
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
@@ -9,4 +10,5 @@ export const mimeType = 'image/jpegxl';
 export const extension = 'jxl';
 // These come from struct WebPConfig in encode.h.
 export const defaultOptions: EncodeOptions = {
+  speed: 1,
 };

src/codecs/jxl/encoder.ts

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

src/codecs/jxl/options.tsx

@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { /*inputFieldCheckedAsNumber, inputFieldValueAsNumber,*/ preventDefault } from '../../lib/util';
+import { 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,29 +14,40 @@ interface Props {
   onChange(newOptions: EncodeOptions): void;
 }
 
-interface State {
+interface State {}
-}
 
 export default class JXLEncoderOptions extends Component<Props, State> {
-  state: State = {
+  state: State = {};
-  };
 
   @bind
   onChange(event: Event) {
-    // const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
+    const form = (event.currentTarget as HTMLInputElement).closest(
-    // const { options } = this.props;
+      'form',
+    ) as HTMLFormElement;
+    const { options } = this.props;
 
-    // const newOptions: EncodeOptions = {
+    const newOptions: EncodeOptions = {
-    //   // Copy over options the form doesn't care about, eg emulate_jpeg_size
+      // Copy over options the form doesn't care about, eg emulate_jpeg_size
-    //   ...options,
+      ...options,
-    // };
+      speed: inputFieldValueAsNumber(form.speed, options.speed),
-    // this.props.onChange(newOptions);
+    };
+    this.props.onChange(newOptions);
   }
 
   render({ options }: Props) {
     return (
       <form class={style.optionsSection} onSubmit={preventDefault}>
-        Lol
+        <div class={style.optionOneCell}>
+          <Range
+            name="speed"
+            min="1"
+            max="7"
+            value={options.speed}
+            onInput={this.onChange}
+          >
+            Speed:
+          </Range>
+        </div>
       </form>
     );
   }