Integrate QOI codec completely

* Adds code for encoders and decoders
* Cleans up some obsolete QOI-related code

codecs/qoi/dec/qoi_dec.cpp

@@ -10,12 +10,16 @@ thread_local const val Uint8ClampedArray = val::global("Uint8ClampedArray");
 thread_local const val ImageData = val::global("ImageData");
 
 val decode(std::string qoiimage) {
-  val result = val::null();
+  qoi_desc desc;
+  uint8_t* rgba = (uint8_t*)qoi_decode(qoiimage.c_str(), qoiimage.length(), &desc, 4);
 
-  const int N = 1000;
-  int data[N] = {0};
+  // Resultant width and height stored in descriptor
+  int decodedWidth = desc.width;
+  int decodedHeight = desc.height;
 
-  result = ImageData.new_(Uint8ClampedArray.new_(typed_memory_view(N, data)), 20, 50);
+  val result = ImageData.new_(
+      Uint8ClampedArray.new_(typed_memory_view(4 * decodedWidth * decodedHeight, rgba)),
+      decodedWidth, decodedHeight);
 
   return result;
 }

codecs/qoi/dec/qoi_dec.d.ts

@@ -0,0 +1,7 @@
+export interface QOIModule extends EmscriptenWasm.Module {
+  decode(data: BufferSource): ImageData | null;
+}
+
+declare var moduleFactory: EmscriptenWasm.ModuleFactory<QOIModule>;
+
+export default moduleFactory;

codecs/qoi/enc/qoi_enc.cpp

@@ -6,32 +6,29 @@
 
 using namespace emscripten;
 
-struct QoiOptions {
-  int quality;
-  bool randombool;
-};
+struct QoiOptions {};
 
 thread_local const val Uint8Array = val::global("Uint8Array");
 
 val encode(std::string buffer, int width, int height, QoiOptions options) {
-  printf("Starting encode!");
+  int compressedSizeInBytes;
+  qoi_desc desc;
+  desc.width = width;
+  desc.height = height;
+  desc.channels = 4;
+  desc.colorspace = QOI_SRGB;
 
-  printf("quality = %d\n", options.quality);
-  printf("randombool = %s\n", options.randombool ? "true" : "false");
+  void* encodedData = qoi_encode(buffer.c_str(), &desc, &compressedSizeInBytes);
+  if (encodedData == NULL)
+    return val::null();
 
-  auto js_result = val::null();
-
-  const int N = 100;
-  int* data = (int*)malloc(N * sizeof(int));
-
-  js_result = Uint8Array.new_(typed_memory_view(N, data));
+  auto js_result =
+      Uint8Array.new_(typed_memory_view(compressedSizeInBytes, (const uint8_t*)encodedData));
   return js_result;
 }
 
 EMSCRIPTEN_BINDINGS(my_module) {
-  value_object<QoiOptions>("QoiOptions")
-      .field("quality", &QoiOptions::quality)
-      .field("randombool", &QoiOptions::randombool);
+  value_object<QoiOptions>("QoiOptions");
 
   function("encode", &encode);
 }

codecs/qoi/enc/qoi_enc.d.ts

@@ -1,7 +1,4 @@
-export interface EncodeOptions {
-    quality: number;
-    randombool: boolean;
-}
+export interface EncodeOptions {}
 
 export interface QoiModule extends EmscriptenWasm.Module {
     encode(

src/client/lazy-app/Compress/index.tsx

@@ -111,6 +111,9 @@ async function decodeImage(
       if (mimeType === 'image/webp2') {
         return await workerBridge.wp2Decode(signal, blob);
       }
+      if (mimeType === 'image/qoi') {
+        return await workerBridge.qoiDecode(signal, blob);
+      }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
     return await builtinDecode(signal, blob);

src/features/decoders/qoi/worker/qoiDecode.ts

@@ -0,0 +1,20 @@
+import type { QOIModule } from 'codecs/qoi/dec/qoi_dec';
+import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
+
+let emscriptenModule: Promise<QOIModule>;
+
+export default async function decode(blob: Blob): Promise<ImageData> {
+  if (!emscriptenModule) {
+    const decoder = await import('codecs/qoi/dec/qoi_dec');
+    emscriptenModule = initEmscriptenModule(decoder.default);
+  }
+
+  const [module, data] = await Promise.all([
+    emscriptenModule,
+    blobToArrayBuffer(blob),
+  ]);
+
+  const result = module.decode(data);
+  if (!result) throw new Error('Decoding error');
+  return result;
+}

src/features/encoders/qoi/client/index.tsx

@@ -1,18 +1,6 @@
 import { EncodeOptions } from '../shared/meta';
 import type WorkerBridge from 'client/lazy-app/worker-bridge';
-import { h, Component } from 'preact';
-import {
-  inputFieldChecked,
-  inputFieldValueAsNumber,
-  preventDefault,
-} from 'client/lazy-app/util';
-import * as style from 'client/lazy-app/Compress/Options/style.css';
-import linkState from 'linkstate';
-import Range from 'client/lazy-app/Compress/Options/Range';
-import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
-import Expander from 'client/lazy-app/Compress/Options/Expander';
-import Select from 'client/lazy-app/Compress/Options/Select';
-import Revealer from 'client/lazy-app/Compress/Options/Revealer';
+import { h, Component, Fragment } from 'preact';
 
 export function encode(
   signal: AbortSignal,
@@ -28,46 +16,8 @@ interface Props {
   onChange(newOptions: EncodeOptions): void;
 }
 
-interface State {
-  showAdvanced: boolean;
-}
-
 export class Options extends Component<Props, {}> {
-  onChange = (event: Event) => {
-    const form = (event.currentTarget as HTMLInputElement).closest(
-      'form',
-    ) as HTMLFormElement;
-
-    const options: EncodeOptions = {
-      quality: inputFieldValueAsNumber(form.quality),
-      randombool: inputFieldChecked(form.randombool),
-    };
-    this.props.onChange(options);
-  };
-
-  render({ options }: Props) {
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <div class={style.optionOneCell}>
-          <Range
-            name="quality"
-            min="0"
-            max="100"
-            value={options.quality}
-            onInput={this.onChange}
-          >
-            Quality:
-          </Range>
-        </div>
-        <label class={style.optionToggle}>
-          Random Bool
-          <Checkbox
-            name="randombool"
-            checked={options.randombool}
-            onChange={this.onChange}
-          />
-        </label>
-      </form>
-    );
+  render() {
+    return <Fragment></Fragment>;
   }
 }

src/features/encoders/qoi/shared/meta.ts

@@ -16,7 +16,4 @@ export { EncodeOptions };
 export const label = 'QOI';
 export const mimeType = 'image/qoi';
 export const extension = 'qoi';
-export const defaultOptions: EncodeOptions = {
-  quality: 75,
-  randombool: true,
-};
+export const defaultOptions: EncodeOptions = {};

src/features/encoders/qoi/worker/qoiEncode.ts

@@ -26,7 +26,6 @@ export default async function encode(
 
   const module = await emscriptenModule;
   const resultView = module.encode(data.data, data.width, data.height, options);
-  console.log(resultView);
   // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
   return resultView.buffer as ArrayBuffer;
 }