Encoder integrated

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

@@ -0,0 +1,112 @@
+import { EncodeOptions, defaultOptions } from '../shared/meta';
+import type WorkerBridge from 'client/lazy-app/worker-bridge';
+import { h, Component } from 'preact';
+import { preventDefault, shallowEqual } from 'client/lazy-app/util';
+import * as style from 'client/lazy-app/Compress/Options/style.css';
+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 Range from 'client/lazy-app/Compress/Options/Range';
+import linkState from 'linkstate';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
+
+export const encode = (
+  signal: AbortSignal,
+  workerBridge: WorkerBridge,
+  imageData: ImageData,
+  options: EncodeOptions,
+) => workerBridge.basisEncode(signal, imageData, options);
+
+interface Props {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+}
+
+interface State {
+  options: EncodeOptions;
+  showAdvanced: boolean;
+}
+
+export class Options extends Component<Props, State> {
+  static getDerivedStateFromProps(
+    props: Props,
+    state: State,
+  ): Partial<State> | null {
+    if (state.options && shallowEqual(state.options, props.options)) {
+      return null;
+    }
+
+    const { options } = props;
+
+    return {
+      options,
+    };
+  }
+
+  // The rest of the defaults are set in getDerivedStateFromProps
+  state: State = {
+    showAdvanced: false,
+  } as State;
+
+  private _inputChangeCallbacks = new Map<string, (event: Event) => void>();
+
+  private _inputChange = (
+    prop: keyof State,
+    type: 'number' | 'boolean' | 'string',
+  ) => {
+    // Cache the callback for performance
+    if (!this._inputChangeCallbacks.has(prop)) {
+      this._inputChangeCallbacks.set(prop, (event: Event) => {
+        const formEl = event.target as HTMLInputElement | HTMLSelectElement;
+        const newVal =
+          type === 'boolean'
+            ? 'checked' in formEl
+              ? formEl.checked
+              : !!formEl.value
+            : type === 'number'
+            ? Number(formEl.value)
+            : formEl.value;
+
+        const newState: Partial<State> = {
+          [prop]: newVal,
+        };
+
+        const optionState = {
+          ...this.state,
+          ...newState,
+        };
+
+        const newOptions: EncodeOptions = {};
+
+        // Updating options, so we don't recalculate in getDerivedStateFromProps.
+        newState.options = newOptions;
+
+        this.setState(
+          // It isn't clear to me why I have to cast this :)
+          newState as State,
+        );
+
+        this.props.onChange(newOptions);
+      });
+    }
+
+    return this._inputChangeCallbacks.get(prop)!;
+  };
+
+  render(_: Props, {}: State) {
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <div class={style.optionOneCell}>
+          <Range
+            min="0"
+            max="4"
+            // value={quality}
+            // onInput={this._inputChange('quality', 'number')}
+          >
+            Quality:
+          </Range>
+        </div>
+      </form>
+    );
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EncodeOptions } from 'codecs/basis/enc/basis_enc';
+
+export { EncodeOptions };
+
+export const label = 'Basis';
+export const mimeType = 'image/basisu';
+export const extension = 'basis';
+export const defaultOptions: EncodeOptions = {};

src/features/encoders/basis/shared/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/features/encoders/basis/worker/basisEncode.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { BasisModule } from 'codecs/basis/enc/basis_enc';
+import type { EncodeOptions } from '../shared/meta';
+import wasmUrl from 'url:codecs/basis/enc/basis_enc.wasm';
+import { initEmscriptenModule } from 'features/worker-utils';
+
+let emscriptenModule: Promise<BasisModule>;
+
+async function init() {
+  const basisEncoder = await import('codecs/basis/enc/basis_enc.js');
+  return initEmscriptenModule(basisEncoder.default, wasmUrl);
+}
+
+export default async function encode(
+  data: ImageData,
+  options: EncodeOptions,
+): Promise<ArrayBuffer> {
+  if (!emscriptenModule) emscriptenModule = init();
+
+  const module = await emscriptenModule;
+  const result = module.encode(data.data, data.width, data.height, options);
+
+  if (!result) throw new Error('Encoding error');
+
+  return result.buffer;
+}

src/features/encoders/basis/worker/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />