Bump ansi-regex from 3.0.0 to 3.0.1

Bumps [ansi-regex](https://github.com/chalk/ansi-regex) from 3.0.0 to 3.0.1.
- [Release notes](https://github.com/chalk/ansi-regex/releases)
- [Commits](https://github.com/chalk/ansi-regex/compare/v3.0.0...v3.0.1)

---
updated-dependencies:
- dependency-name: ansi-regex
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

codecs/qoi/Makefile

@@ -1,42 +0,0 @@
-CODEC_URL = https://github.com/phoboslab/qoi/archive/8d35d93cdca85d2868246c2a8a80a1e2c16ba2a8.tar.gz
-
-CODEC_DIR = node_modules/qoi
-CODEC_BUILD_DIR:= $(CODEC_DIR)/build
-ENVIRONMENT = worker
-
-OUT_JS = enc/qoi_enc.js dec/qoi_dec.js
-OUT_WASM := $(OUT_JS:.js=.wasm)
-
-.PHONY: all clean
-
-all: $(OUT_JS)
-
-$(filter enc/%,$(OUT_JS)): enc/qoi_enc.o
-$(filter dec/%,$(OUT_JS)): dec/qoi_dec.o
-
-# ALL .js FILES
-$(OUT_JS):
-	$(LD) \
-		$(LDFLAGS) \
-		--bind \
-		-s ENVIRONMENT=$(ENVIRONMENT) \
-		-s EXPORT_ES6=1 \
-		-o $@ \
-		$+
-
-# ALL .o FILES
-%.o: %.cpp $(CODEC_DIR)
-	$(CXX) -c \
-		$(CXXFLAGS) \
-		-I $(CODEC_DIR) \
-		-o $@ \
-		$<
-
-# CREATE DIRECTORY
-$(CODEC_DIR):
-	mkdir -p $(CODEC_DIR)
-	curl -sL $(CODEC_URL) | tar xz --strip 1 -C $(CODEC_DIR)
-
-clean:
-	$(RM) $(OUT_JS) $(OUT_WASM)
-	$(MAKE) -C $(CODEC_DIR) clean

codecs/qoi/dec/qoi_dec.cpp

@@ -1,29 +0,0 @@
-#include <emscripten/bind.h>
-#include <emscripten/val.h>
-
-#define QOI_IMPLEMENTATION
-#include "qoi.h"
-
-using namespace emscripten;
-
-thread_local const val Uint8ClampedArray = val::global("Uint8ClampedArray");
-thread_local const val ImageData = val::global("ImageData");
-
-val decode(std::string qoiimage) {
-  qoi_desc desc;
-  uint8_t* rgba = (uint8_t*)qoi_decode(qoiimage.c_str(), qoiimage.length(), &desc, 4);
-
-  // Resultant width and height stored in descriptor
-  int decodedWidth = desc.width;
-  int decodedHeight = desc.height;
-
-  val result = ImageData.new_(
-      Uint8ClampedArray.new_(typed_memory_view(4 * decodedWidth * decodedHeight, rgba)),
-      decodedWidth, decodedHeight);
-
-  return result;
-}
-
-EMSCRIPTEN_BINDINGS(my_module) {
-  function("decode", &decode);
-}

codecs/qoi/dec/qoi_dec.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,45 +0,0 @@
-#include <emscripten/bind.h>
-#include <emscripten/val.h>
-
-#include <vector>
-
-#define QOI_IMPLEMENTATION
-#include "qoi.h"
-
-using namespace emscripten;
-
-struct QoiOptions {};
-
-thread_local const val Uint8Array = val::global("Uint8Array");
-
-val encode(std::string buffer, int width, int height, QoiOptions options) {
-  int compressedSizeInBytes;
-  qoi_desc desc;
-  desc.width = width;
-  desc.height = height;
-  desc.channels = 3;
-  desc.colorspace = QOI_SRGB;
-
-  auto rgba_buffer = buffer.c_str();
-  auto num_pixels = width * height;
-  std::vector<uint8_t> rgb_buffer(num_pixels * 3);
-  for(auto i = 0; i < num_pixels; i ++) {
-    rgb_buffer[i*3 + 0] = rgba_buffer[i*4 +0];
-    rgb_buffer[i*3 + 1] = rgba_buffer[i*4 +1];
-    rgb_buffer[i*3 + 2] = rgba_buffer[i*4 +2];
-  }
-
-  void* encodedData = qoi_encode(rgb_buffer.data(), &desc, &compressedSizeInBytes);
-  if (encodedData == NULL)
-    return val::null();
-
-  auto js_result =
-      Uint8Array.new_(typed_memory_view(compressedSizeInBytes, (const uint8_t*)encodedData));
-  return js_result;
-}
-
-EMSCRIPTEN_BINDINGS(my_module) {
-  value_object<QoiOptions>("QoiOptions");
-
-  function("encode", &encode);
-}

codecs/qoi/enc/qoi_enc.d.ts

@@ -1,14 +0,0 @@
-export interface EncodeOptions {}
-
-export interface QoiModule extends EmscriptenWasm.Module {
-    encode(
-        data: BufferSource,
-        width: number,
-        height: number,
-        options: EncodeOptions,
-    ): Uint8Array;
-}
-
-declare var moduleFactory: EmscriptenWasm.ModuleFactory<QoiModule>;
-
-export default moduleFactory;

codecs/qoi/package.json

@@ -1,7 +0,0 @@
-{
-    "name": "qoi",
-    "scripts": {
-      "build": "../build-cpp.sh"
-    }
-  }
-  

package-lock.json

@@ -445,9 +445,9 @@
       }
     },
     "node_modules/ansi-align/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -509,9 +509,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -615,9 +615,9 @@
       }
     },
     "node_modules/boxen/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -8590,9 +8590,9 @@
       }
     },
     "node_modules/widest-line/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -9024,9 +9024,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
           "dev": true
         },
         "is-fullwidth-code-point": {
@@ -9072,9 +9072,9 @@
       }
     },
     "ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true
     },
     "ansi-styles": {
@@ -9160,9 +9160,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
           "dev": true
         },
         "ansi-styles": {
@@ -15778,9 +15778,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
           "dev": true
         },
         "is-fullwidth-code-point": {

src/client/lazy-app/Compress/Options/Checkbox/style.css

@@ -2,26 +2,6 @@
   display: inline-block;
   position: relative;
   --size: 17px;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 200%;
-    height: 200%;
-    background-color: var(--main-theme-color);
-    border-radius: 999px;
-    opacity: 0.25;
-
-    transform: translate(-50%, -50%) scale(0);
-    transition-property: transform;
-    transition-duration: 250ms;
-  }
-
-  &:focus-within::before {
-    transform: translate(-50%, -50%) scale(1);
-  }
 }
 
 .real-checkbox {

src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css

@@ -47,10 +47,6 @@ range-input::before {
   height: 12px;
 }
 
-range-input:focus-within .thumb {
-  outline: white solid 2px;
-}
-
 .thumb-wrapper {
   position: absolute;
   left: 6px;

src/client/lazy-app/Compress/Options/Toggle/style.css

@@ -11,10 +11,6 @@
   padding: 3px calc(var(--thumb-size) / 2 + 3px);
 }
 
-.checkbox:focus-within .track {
-  outline: white solid 2px;
-}
-
 .thumb {
   position: relative;
   width: var(--thumb-size);

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

@@ -17,7 +17,7 @@ import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { ImportIcon, SaveIcon, SwapIcon } from 'client/lazy-app/icons';
+import { SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -29,14 +29,10 @@ interface Props {
   onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
   onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
   onCopyToOtherSideClick(index: 0 | 1): void;
-  onSaveSideSettingsClick(index: 0 | 1): void;
-  onImportSideSettingsClick(index: 0 | 1): void;
 }
 
 interface State {
   supportedEncoderMap?: PartialButNotUndefined<typeof encoderMap>;
-  leftSideSettings?: string | null;
-  rightSideSettings?: string | null;
 }
 
 type PartialButNotUndefined<T> = {
@@ -64,8 +60,6 @@ const supportedEncoderMapP: Promise<PartialButNotUndefined<typeof encoderMap>> =
 export default class Options extends Component<Props, State> {
   state: State = {
     supportedEncoderMap: undefined,
-    leftSideSettings: localStorage.getItem('leftSideSettings'),
-    rightSideSettings: localStorage.getItem('rightSideSettings'),
   };
 
   constructor() {
@@ -75,29 +69,6 @@ export default class Options extends Component<Props, State> {
     );
   }
 
-  private setLeftSideSettings = () => {
-    this.setState({
-      leftSideSettings: localStorage.getItem('leftSideSettings'),
-    });
-  };
-
-  private setRightSideSettings = () => {
-    this.setState({
-      rightSideSettings: localStorage.getItem('rightSideSettings'),
-    });
-  };
-
-  componentDidMount(): void {
-    // Changing the state when side setting is stored in localstorage
-    window.addEventListener('leftSideSettings', this.setLeftSideSettings);
-    window.addEventListener('rightSideSettings', this.setRightSideSettings);
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('leftSideSettings', this.setLeftSideSettings);
-    window.removeEventListener('removeSideSettings', this.setRightSideSettings);
-  }
-
   private onEncoderTypeChange = (event: Event) => {
     const el = event.currentTarget as HTMLSelectElement;
 
@@ -139,14 +110,6 @@ export default class Options extends Component<Props, State> {
     this.props.onCopyToOtherSideClick(this.props.index);
   };
 
-  private onSaveSideSettingClick = () => {
-    this.props.onSaveSideSettingsClick(this.props.index);
-  };
-
-  private onImportSideSettingsClick = () => {
-    this.props.onImportSideSettingsClick(this.props.index);
-  };
-
   render(
     { source, encoderState, processorState }: Props,
     { supportedEncoderMap }: State,
@@ -176,36 +139,6 @@ export default class Options extends Component<Props, State> {
                   >
                     <SwapIcon />
                   </button>
-                  <button
-                    class={style.saveButton}
-                    title="Save side settings"
-                    onClick={this.onSaveSideSettingClick}
-                  >
-                    <SaveIcon />
-                  </button>
-                  <button
-                    class={
-                      style.importButton +
-                      ' ' +
-                      (!this.state.leftSideSettings && this.props.index === 0
-                        ? style.buttonOpacity
-                        : '') +
-                      ' ' +
-                      (!this.state.rightSideSettings && this.props.index === 1
-                        ? style.buttonOpacity
-                        : '')
-                    }
-                    title="Import saved side settings"
-                    onClick={this.onImportSideSettingsClick}
-                    disabled={
-                      // Disabled if this side's settings haven't been saved
-                      (!this.state.leftSideSettings &&
-                        this.props.index === 0) ||
-                      (!this.state.rightSideSettings && this.props.index === 1)
-                    }
-                  >
-                    <ImportIcon />
-                  </button>
                 </div>
               </h3>
               <label class={style.sectionEnabler}>
@@ -257,9 +190,7 @@ export default class Options extends Component<Props, State> {
               onChange={this.onEncoderTypeChange}
               large
             >
-              <option value="identity">{`Original Image ${
-                this.props.source ? `(${this.props.source.file.name})` : ''
-              }`}</option>
+              <option value="identity">Original Image</option>
               {Object.entries(supportedEncoderMap).map(([type, encoder]) => (
                 <option value={type}>{encoder.meta.label}</option>
               ))}

src/client/lazy-app/Compress/Options/style.css

@@ -53,16 +53,6 @@
   composes: option-toggle;
   grid-template-columns: auto 1fr;
   gap: 1em;
-
-  border-top: 1px solid #fff4;
-
-  transition-property: background-color;
-  transition-duration: 250ms;
-}
-
-.option-reveal:focus-within,
-.option-reveal:hover {
-  background-color: #fff2;
 }
 
 .option-one-cell {
@@ -83,11 +73,11 @@
 }
 
 .text-field {
-  background-color: var(--black);
-  color: var(--white);
+  background: var(--white);
+  color: var(--black);
   font: inherit;
   border: none;
-  padding: 6px 6px 6px 10px;
+  padding: 6px 0 6px 10px;
   width: 100%;
   box-sizing: border-box;
   border-radius: 4px;
@@ -128,31 +118,4 @@
   svg {
     fill: var(--header-text-color);
   }
-
-  &:focus {
-    outline: var(--header-text-color) solid 2px;
-    outline-offset: 0.25em;
-  }
-}
-
-.save-button,
-.import-button {
-  composes: title-button;
-
-  svg {
-    stroke: var(--header-text-color);
-  }
-
-  &:focus {
-    outline: var(--header-text-color) solid 2px;
-    outline-offset: 0.25em;
-  }
-}
-
-.button-opacity {
-  pointer-events: none;
-  cursor: not-allowed;
-  svg {
-    opacity: 0.5;
-  }
 }

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

@@ -111,9 +111,6 @@ 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);
@@ -284,35 +281,24 @@ export default class Compress extends Component<Props, State> {
     source: undefined,
     loading: false,
     preprocessorState: defaultPreprocessorState,
-    // Tasking catched side settings if available otherwise taking default settings
     sides: [
-      localStorage.getItem('leftSideSettings')
-        ? {
-            ...JSON.parse(localStorage.getItem('leftSideSettings') as string),
-            loading: false,
-          }
-        : {
-            latestSettings: {
-              processorState: defaultProcessorState,
-              encoderState: undefined,
-            },
-            loading: false,
-          },
-      localStorage.getItem('rightSideSettings')
-        ? {
-            ...JSON.parse(localStorage.getItem('rightSideSettings') as string),
-            loading: false,
-          }
-        : {
-            latestSettings: {
-              processorState: defaultProcessorState,
-              encoderState: {
-                type: 'mozJPEG',
-                options: encoderMap.mozJPEG.meta.defaultOptions,
-              },
-            },
-            loading: false,
+      {
+        latestSettings: {
+          processorState: defaultProcessorState,
+          encoderState: undefined,
+        },
+        loading: false,
+      },
+      {
+        latestSettings: {
+          processorState: defaultProcessorState,
+          encoderState: {
+            type: 'mozJPEG',
+            options: encoderMap.mozJPEG.meta.defaultOptions,
           },
+        },
+        loading: false,
+      },
     ],
     mobileView: this.widthQuery.matches,
   };
@@ -442,99 +428,6 @@ export default class Compress extends Component<Props, State> {
       sides: cleanSet(this.state.sides, otherIndex, oldSettings),
     });
   };
-  /**
-   * This function saves encodedSettings and latestSettings of
-   * particular side in browser local storage
-   * @param index : (0|1)
-   * @returns
-   */
-  private onSaveSideSettingsClick = async (index: 0 | 1) => {
-    if (index === 0) {
-      const leftSideSettings = JSON.stringify({
-        encodedSettings: this.state.sides[index].encodedSettings,
-        latestSettings: this.state.sides[index].latestSettings,
-      });
-      localStorage.setItem('leftSideSettings', leftSideSettings);
-      // Firing an event when we save side settings in localstorage
-      window.dispatchEvent(new CustomEvent('leftSideSettings'));
-      await this.props.showSnack('Left side settings saved', {
-        timeout: 1500,
-        actions: ['dismiss'],
-      });
-      return;
-    }
-
-    if (index === 1) {
-      const rightSideSettings = JSON.stringify({
-        encodedSettings: this.state.sides[index].encodedSettings,
-        latestSettings: this.state.sides[index].latestSettings,
-      });
-      localStorage.setItem('rightSideSettings', rightSideSettings);
-      // Firing an event when we save side settings in localstorage
-      window.dispatchEvent(new CustomEvent('rightSideSettings'));
-      await this.props.showSnack('Right side settings saved', {
-        timeout: 1500,
-        actions: ['dismiss'],
-      });
-      return;
-    }
-  };
-
-  /**
-   * This function sets the side state with catched localstorage
-   * value as per side index provided
-   * @param index : (0|1)
-   * @returns
-   */
-  private onImportSideSettingsClick = async (index: 0 | 1) => {
-    const leftSideSettingsString = localStorage.getItem('leftSideSettings');
-    const rightSideSettingsString = localStorage.getItem('rightSideSettings');
-
-    if (index === 0 && leftSideSettingsString) {
-      const oldLeftSideSettings = this.state.sides[index];
-      const newLeftSideSettings = {
-        ...this.state.sides[index],
-        ...JSON.parse(leftSideSettingsString),
-      };
-      this.setState({
-        sides: cleanSet(this.state.sides, index, newLeftSideSettings),
-      });
-      const result = await this.props.showSnack('Left side settings imported', {
-        timeout: 3000,
-        actions: ['undo', 'dismiss'],
-      });
-      if (result === 'undo') {
-        this.setState({
-          sides: cleanSet(this.state.sides, index, oldLeftSideSettings),
-        });
-      }
-      return;
-    }
-
-    if (index === 1 && rightSideSettingsString) {
-      const oldRightSideSettings = this.state.sides[index];
-      const newRightSideSettings = {
-        ...this.state.sides[index],
-        ...JSON.parse(rightSideSettingsString),
-      };
-      this.setState({
-        sides: cleanSet(this.state.sides, index, newRightSideSettings),
-      });
-      const result = await this.props.showSnack(
-        'Right side settings imported',
-        {
-          timeout: 3000,
-          actions: ['undo', 'dismiss'],
-        },
-      );
-      if (result === 'undo') {
-        this.setState({
-          sides: cleanSet(this.state.sides, index, oldRightSideSettings),
-        });
-      }
-      return;
-    }
-  };
 
   private onPreprocessorChange = async (
     preprocessorState: PreprocessorState,
@@ -936,8 +829,6 @@ export default class Compress extends Component<Props, State> {
         onEncoderOptionsChange={this.onEncoderOptionsChange}
         onProcessorOptionsChange={this.onProcessorOptionsChange}
         onCopyToOtherSideClick={this.onCopyToOtherClick}
-        onSaveSideSettingsClick={this.onSaveSideSettingsClick}
-        onImportSideSettingsClick={this.onImportSideSettingsClick}
       />
     ));
 
@@ -951,7 +842,7 @@ export default class Compress extends Component<Props, State> {
         typeLabel={
           side.latestSettings.encoderState
             ? encoderMap[side.latestSettings.encoderState.type].meta.label
-            : `${side.file ? `${side.file.name}` : 'Original Image'}`
+            : 'Original Image'
         }
       />
     ));

src/client/lazy-app/Compress/style.css

@@ -113,13 +113,6 @@
 
   & > svg {
     width: 47px;
-    overflow: visible;
-  }
-
-  &:focus .back-blob {
-    stroke: var(--deep-blue);
-    stroke-width: 5px;
-    animation: strokePulse 500ms ease forwards;
   }
 
   @media (min-width: 600px) {
@@ -131,15 +124,6 @@
   }
 }
 
-@keyframes strokePulse {
-  from {
-    stroke-width: 8px;
-  }
-  to {
-    stroke-width: 5px;
-  }
-}
-
 .back-blob {
   fill: var(--hot-pink);
   opacity: 0.77;

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

@@ -97,31 +97,3 @@ export const SwapIcon = () => (
     <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
   </svg>
 );
-
-export const SaveIcon = () => (
-  <svg viewBox="0 0 24 24">
-    <g
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    >
-      <path d="M12.501 20.93c-.866.25-1.914-.166-2.176-1.247a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.074.26 1.49 1.296 1.252 2.158M19 22v-6m3 3l-3-3l-3 3" />
-      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-    </g>
-  </svg>
-);
-
-export const ImportIcon = () => (
-  <svg viewBox="0 0 24 24">
-    <g
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-    >
-      <path d="M12.52 20.924c-.87.262-1.93-.152-2.195-1.241a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.088.264 1.502 1.323 1.242 2.192M19 16v6m3-3l-3 3l-3-3" />
-      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
-    </g>
-  </svg>
-);

src/client/lazy-app/util/index.ts

@@ -103,7 +103,6 @@ const magicNumberMapInput = [
   [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
   [/^\xff\x0a/, 'image/jxl'],
   [/^\x00\x00\x00\x0cJXL \x0d\x0a\x87\x0a/, 'image/jxl'],
-  [/^qoif/, 'image/qoi'],
 ] as const;
 
 export type ImageMimeTypes = typeof magicNumberMapInput[number][1];

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

@@ -1,20 +0,0 @@
-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,23 +0,0 @@
-import { EncodeOptions } from '../shared/meta';
-import type WorkerBridge from 'client/lazy-app/worker-bridge';
-import { h, Component, Fragment } from 'preact';
-
-export function encode(
-  signal: AbortSignal,
-  workerBridge: WorkerBridge,
-  imageData: ImageData,
-  options: EncodeOptions,
-) {
-  return workerBridge.qoiEncode(signal, imageData, options);
-}
-
-interface Props {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-}
-
-export class Options extends Component<Props, {}> {
-  render() {
-    return <Fragment></Fragment>;
-  }
-}

src/features/encoders/qoi/client/missing-types.d.ts

@@ -1,13 +0,0 @@
-/**
- * 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/qoi/shared/meta.ts

@@ -1,19 +0,0 @@
-/**
- * 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/qoi/enc/qoi_enc';
-export { EncodeOptions };
-
-export const label = 'QOI';
-export const mimeType = 'image/qoi';
-export const extension = 'qoi';
-export const defaultOptions: EncodeOptions = {};

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

@@ -1,13 +0,0 @@
-/**
- * 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/qoi/worker/missing-types.d.ts

@@ -1,13 +0,0 @@
-/**
- * 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/qoi/worker/qoiEncode.ts

@@ -1,31 +0,0 @@
-/**
- * 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 qoi_enc, { QoiModule } from 'codecs/qoi/enc/qoi_enc';
-import { EncodeOptions } from '../shared/meta';
-import { initEmscriptenModule } from 'features/worker-utils';
-
-let emscriptenModule: Promise<QoiModule>;
-
-export default async function encode(
-  data: ImageData,
-  options: EncodeOptions,
-): Promise<ArrayBuffer> {
-  if (!emscriptenModule) {
-    emscriptenModule = initEmscriptenModule(qoi_enc);
-  }
-
-  const module = await emscriptenModule;
-  const resultView = module.encode(data.data, data.width, data.height, options);
-  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
-  return resultView.buffer as ArrayBuffer;
-}

src/shared/custom-els/snack-bar/styles.css

@@ -62,7 +62,7 @@ snack-bar {
   position: relative;
   flex: 0 1 auto;
   padding: 8px;
-  height: 100%;
+  height: 36px;
   margin: auto 8px auto -8px;
   min-width: 5em;
   background: none;
@@ -78,7 +78,6 @@ snack-bar {
   overflow: hidden;
   transition: background-color 200ms ease;
   outline: none;
-  text-decoration: none;
 }
 .button:hover {
   background-color: rgba(0, 0, 0, 0.15);

src/shared/prerendered-app/Intro/index.tsx

@@ -24,28 +24,28 @@ import SlideOnScroll from './SlideOnScroll';
 const demos = [
   {
     description: 'Large photo',
-    size: '2.8MB',
+    size: '2.8mb',
     filename: 'photo.jpg',
     url: largePhoto,
     iconUrl: largePhotoIcon,
   },
   {
     description: 'Artwork',
-    size: '2.9MB',
+    size: '2.9mb',
     filename: 'art.jpg',
     url: artwork,
     iconUrl: artworkIcon,
   },
   {
     description: 'Device screen',
-    size: '1.6MB',
+    size: '1.6mb',
     filename: 'pixel3.png',
     url: deviceScreen,
     iconUrl: deviceScreenIcon,
   },
   {
     description: 'SVG icon',
-    size: '13KB',
+    size: '13k',
     filename: 'squoosh.svg',
     url: logo,
     iconUrl: logoIcon,
@@ -319,7 +319,7 @@ export default class Intro extends Component<Props, State> {
                     class="unbutton"
                     onClick={(event) => this.onDemoClick(i, event)}
                   >
-                    <div class={style.demoContainer}>
+                    <div>
                       <div class={style.demoIconContainer}>
                         <img
                           class={style.demoIcon}

src/shared/prerendered-app/Intro/style.css

@@ -321,13 +321,6 @@
   }
 }
 
-.demo-container {
-  transition: scale 400ms ease-in-out;
-  &:hover {
-    scale: 1.05;
-  }
-}
-
 .demo-size {
   background: var(--dim-blue);
   border-radius: 1000px;

src/static-build/pages/index/index.tsx

@@ -19,8 +19,6 @@ import favicon from 'url:static-build/assets/favicon.ico';
 import ogImage from 'url:static-build/assets/icon-large-maskable.png';
 import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';
-import snackbarCss from 'css:../../../shared/custom-els/snack-bar/styles.css';
-import * as snackbarStyle from '../../../shared/custom-els/snack-bar/styles.css';
 
 interface Props {}
 
@@ -75,29 +73,6 @@ const Index: FunctionalComponent<Props> = () => (
     <body>
       <div id="app">
         <Intro />
-        <noscript>
-          <style
-            dangerouslySetInnerHTML={{
-              __html: escapeStyleScriptContent(snackbarCss),
-            }}
-          />
-          <snack-bar>
-            <div
-              class={snackbarStyle.snackbar}
-              aria-live="assertive"
-              aria-atomic="true"
-              aria-hidden="false"
-            >
-              <div class={snackbarStyle.text}>
-                Initialization error: This site requires JavaScript, which is
-                disabled in your browser.
-              </div>
-              <a class={snackbarStyle.button} href="/">
-                reload
-              </a>
-            </div>
-          </snack-bar>
-        </noscript>
       </div>
       <script
         dangerouslySetInnerHTML={{