Bump path-parse from 1.0.6 to 1.0.7

Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

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

codecs/avif/Makefile

@@ -1,9 +1,9 @@
-# using libavif from https://github.com/AOMediaCodec/libavif
-CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/refs/tags/v1.0.1.tar.gz
+# libavif and libaom versions are from
+# google3/third_party/libavif/METADATA
+CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/647c3c208cf152395d777c1bf7240d2ecf7df5a9.tar.gz
 CODEC_PACKAGE = node_modules/libavif.tar.gz
 
-# using libaom from https://aomedia.googlesource.com/aom
-LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.7.0.tar.gz
+LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.6.0.tar.gz
 LIBAOM_PACKAGE = node_modules/libaom.tar.gz
 
 export CODEC_DIR = node_modules/libavif
@@ -11,6 +11,7 @@ export BUILD_DIR = node_modules/build
 export LIBAOM_DIR = node_modules/libaom
 
 override CFLAGS += "-Wno-unused-macros"
+export
 
 OUT_ENC_JS = enc/avif_enc.js
 OUT_NODE_ENC_JS = enc/avif_node_enc.js
@@ -27,9 +28,10 @@ HELPER_MAKEFLAGS := -f helper.Makefile
 
 .PHONY: all clean
 
-all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS)
+all: $(OUT_ENC_JS) $(OUT_DEC_JS) $(OUT_ENC_MT_JS) $(OUT_NODE_ENC_JS) $(OUT_NODE_ENC_MT_JS) $(OUT_NODE_DEC_JS)
 
-$(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_NODE_ENC_JS) $(OUT_NODE_ENC_MT_JS): ENVIRONMENT=node
+$(OUT_NODE_ENC_JS) $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -40,9 +42,9 @@ $(OUT_ENC_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLis
 			-DCONFIG_AV1_HIGHBITDEPTH=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=ON"
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0"
 
-$(OUT_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_ENC_MT_JS) $(OUT_NODE_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -52,10 +54,11 @@ $(OUT_ENC_MT_JS): $(OUT_ENC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMake
 			-DCONFIG_AV1_HIGHBITDEPTH=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=ON" \
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_DECODE=0" \
 		OUT_FLAGS="-pthread"
 
-$(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
+$(OUT_NODE_DEC_JS): ENVIRONMENT=node
+$(OUT_NODE_DEC_JS) $(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLists.txt
 	$(MAKE) \
 		$(HELPER_MAKEFLAGS) \
 		OUT_JS=$@ \
@@ -65,7 +68,7 @@ $(OUT_DEC_JS): $(OUT_DEC_CPP) $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_DIR)/CMakeLis
 			-DCONFIG_MULTITHREAD=0 \
 		" \
 		ENVIRONMENT=$(ENVIRONMENT) \
-		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_ENCODE=0 -DAVIF_CHROMA_DOWNSAMPLING_SHARP_YUV=0 -DAVIF_LOCAL_LIBSHARPYUV=0"
+		LIBAVIF_FLAGS="-DAVIF_CODEC_AOM_ENCODE=0"
 
 $(CODEC_PACKAGE):
 	mkdir -p $(@D)

codecs/avif/enc/avif_enc.cpp

@@ -3,22 +3,15 @@
 #include <emscripten/val.h>
 #include "avif/avif.h"
 
-#define RETURN_NULL_IF_NOT_EQUALS(val1, val2) \
-  if (val1 != val2)                           \
-    return val::null();
-#define RETURN_NULL_IF_EQUALS(val1, val2) \
-  if (val1 == val2)                       \
-    return val::null();
-
 using namespace emscripten;
 
 struct AvifOptions {
-  // [0 - 100]
-  // 0 = worst quality
-  // 100 = lossless
-  int quality;
-  // As above, but -1 means 'use quality'
-  int qualityAlpha;
+  // [0 - 63]
+  // 0 = lossless
+  // 63 = worst quality
+  int cqLevel;
+  // As above, but -1 means 'use cqLevel'
+  int cqAlphaLevel;
   // [0 - 6]
   // Creates 2^n tiles in that dimension
   int tileRowsLog2;
@@ -42,15 +35,11 @@ struct AvifOptions {
   int tune;
   // 0-50
   int denoiseLevel;
-  // toggles AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV
-  bool enableSharpDownsampling;
 };
 
 thread_local const val Uint8Array = val::global("Uint8Array");
 
 val encode(std::string buffer, int width, int height, AvifOptions options) {
-  avifResult status;  // To check the return status for avif API's
-
   avifRWData output = AVIF_DATA_EMPTY;
   int depth = 8;
   avifPixelFormat format;
@@ -69,12 +58,11 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
       break;
   }
 
-  bool lossless = options.quality == AVIF_QUALITY_LOSSLESS &&
-                  (options.qualityAlpha == -1 || options.qualityAlpha == AVIF_QUALITY_LOSSLESS) &&
+  bool lossless = options.cqLevel == AVIF_QUANTIZER_LOSSLESS &&
+                  options.cqAlphaLevel <= AVIF_QUANTIZER_LOSSLESS &&
                   format == AVIF_PIXEL_FORMAT_YUV444;
 
   avifImage* image = avifImageCreate(width, height, depth, format);
-  RETURN_NULL_IF_EQUALS(image, NULL);
 
   if (lossless) {
     image->matrixCoefficients = AVIF_MATRIX_COEFFICIENTS_IDENTITY;
@@ -88,49 +76,40 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
   avifRGBImageSetDefaults(&srcRGB, image);
   srcRGB.pixels = rgba;
   srcRGB.rowBytes = width * 4;
-  if (options.enableSharpDownsampling) {
-    printf("Enabling AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV\n");
-    srcRGB.chromaDownsampling = AVIF_CHROMA_DOWNSAMPLING_SHARP_YUV;
-  }
-  status = avifImageRGBToYUV(image, &srcRGB);
-  if (status == AVIF_RESULT_NOT_IMPLEMENTED) {
-    printf("libsharpyuv not implemented methinks\n");
-  }
-  RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+  avifImageRGBToYUV(image, &srcRGB);
 
   avifEncoder* encoder = avifEncoderCreate();
-  RETURN_NULL_IF_EQUALS(encoder, NULL);
 
   if (lossless) {
-    encoder->quality = AVIF_QUALITY_LOSSLESS;
-    encoder->qualityAlpha = AVIF_QUALITY_LOSSLESS;
+    encoder->minQuantizer = AVIF_QUANTIZER_LOSSLESS;
+    encoder->maxQuantizer = AVIF_QUANTIZER_LOSSLESS;
+    encoder->minQuantizerAlpha = AVIF_QUANTIZER_LOSSLESS;
+    encoder->maxQuantizerAlpha = AVIF_QUANTIZER_LOSSLESS;
   } else {
-    status = avifEncoderSetCodecSpecificOption(encoder, "sharpness",
-                                               std::to_string(options.sharpness).c_str());
-    RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    encoder->minQuantizer = AVIF_QUANTIZER_BEST_QUALITY;
+    encoder->maxQuantizer = AVIF_QUANTIZER_WORST_QUALITY;
+    encoder->minQuantizerAlpha = AVIF_QUANTIZER_BEST_QUALITY;
+    encoder->maxQuantizerAlpha = AVIF_QUANTIZER_WORST_QUALITY;
+    avifEncoderSetCodecSpecificOption(encoder, "end-usage", "q");
+    avifEncoderSetCodecSpecificOption(encoder, "cq-level", std::to_string(options.cqLevel).c_str());
+    avifEncoderSetCodecSpecificOption(encoder, "sharpness",
+                                      std::to_string(options.sharpness).c_str());
 
-    // Set base quality
-    encoder->quality = options.quality;
-    // Conditionally set alpha quality
-    if (options.qualityAlpha == -1) {
-      encoder->qualityAlpha = options.quality;
-    } else {
-      encoder->qualityAlpha = options.qualityAlpha;
+    if (options.cqAlphaLevel != -1) {
+      avifEncoderSetCodecSpecificOption(encoder, "alpha:cq-level",
+                                        std::to_string(options.cqAlphaLevel).c_str());
     }
 
-    if (options.tune == 2 || (options.tune == 0 && options.quality >= 50)) {
-      status = avifEncoderSetCodecSpecificOption(encoder, "tune", "ssim");
-      RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    if (options.tune == 2 || (options.tune == 0 && options.cqLevel <= 32)) {
+      avifEncoderSetCodecSpecificOption(encoder, "tune", "ssim");
     }
 
     if (options.chromaDeltaQ) {
-      status = avifEncoderSetCodecSpecificOption(encoder, "enable-chroma-deltaq", "1");
-      RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+      avifEncoderSetCodecSpecificOption(encoder, "enable-chroma-deltaq", "1");
     }
 
-    status = avifEncoderSetCodecSpecificOption(encoder, "color:denoise-noise-level",
-                                               std::to_string(options.denoiseLevel).c_str());
-    RETURN_NULL_IF_NOT_EQUALS(status, AVIF_RESULT_OK);
+    avifEncoderSetCodecSpecificOption(encoder, "color:denoise-noise-level",
+                                      std::to_string(options.denoiseLevel).c_str());
   }
 
   encoder->maxThreads = emscripten_num_logical_cores();
@@ -152,8 +131,8 @@ val encode(std::string buffer, int width, int height, AvifOptions options) {
 
 EMSCRIPTEN_BINDINGS(my_module) {
   value_object<AvifOptions>("AvifOptions")
-      .field("quality", &AvifOptions::quality)
-      .field("qualityAlpha", &AvifOptions::qualityAlpha)
+      .field("cqLevel", &AvifOptions::cqLevel)
+      .field("cqAlphaLevel", &AvifOptions::cqAlphaLevel)
       .field("tileRowsLog2", &AvifOptions::tileRowsLog2)
       .field("tileColsLog2", &AvifOptions::tileColsLog2)
       .field("speed", &AvifOptions::speed)
@@ -161,8 +140,7 @@ EMSCRIPTEN_BINDINGS(my_module) {
       .field("sharpness", &AvifOptions::sharpness)
       .field("tune", &AvifOptions::tune)
       .field("denoiseLevel", &AvifOptions::denoiseLevel)
-      .field("subsample", &AvifOptions::subsample)
-      .field("enableSharpDownsampling", &AvifOptions::enableSharpDownsampling);
+      .field("subsample", &AvifOptions::subsample);
 
   function("encode", &encode);
 }

codecs/avif/enc/avif_enc.d.ts

@@ -5,16 +5,15 @@ export const enum AVIFTune {
 }
 
 export interface EncodeOptions {
-  quality: number;
-  qualityAlpha: number;
+  cqLevel: number;
   denoiseLevel: number;
+  cqAlphaLevel: number;
   tileRowsLog2: number;
   tileColsLog2: number;
   speed: number;
   subsample: number;
   chromaDeltaQ: boolean;
   sharpness: number;
-  enableSharpDownsampling: boolean;
   tune: AVIFTune;
 }
 

codecs/avif/enc/avif_enc_mt.worker.js

@@ -1 +1 @@
-"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./avif_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};function moduleLoaded(){}self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;(e.data.urlOrBlob?import(e.data.urlOrBlob):import("./avif_enc_mt.js")).then(function(exports){return exports.default(Module)}).then(function(instance){Module=instance;moduleLoaded()})}else if(e.data.cmd==="objectTransfer"){Module["PThread"].receiveObjectTransfer(e.data)}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["PThread"].threadExit(result)}}catch(ex){if(ex==="Canceled!"){Module["PThread"].threadCancel()}else if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["PThread"].threadExit(ex.status)}}else{Module["PThread"].threadExit(-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["PThread"].threadCancel()}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

codecs/avif/helper.Makefile

@@ -10,12 +10,6 @@
 #   $(LIBAVIF_FLAGS)
 #   $(ENVIRONMENT)
 
-# Take from libavif/ext/libsharpyuv.cmd
-WEBP_URL = https://chromium.googlesource.com/webm/libwebp
-WEBP_COMMIT = e2c85878f6a33f29948b43d3492d9cdaf801aa54
-LIBSHARPYUV_DIR = $(CODEC_DIR)/ext/libwebp
-
-# $(OUT_JS) is something like "enc/avif_enc.js" or "enc/avif_enc_mt.js"
 OUT_BUILD_DIR := $(BUILD_DIR)/$(basename $(OUT_JS))
 
 CODEC_BUILD_DIR := $(OUT_BUILD_DIR)/libavif
@@ -24,9 +18,6 @@ CODEC_OUT := $(CODEC_BUILD_DIR)/libavif.a
 LIBAOM_BUILD_DIR := $(OUT_BUILD_DIR)/libaom
 LIBAOM_OUT := $(LIBAOM_BUILD_DIR)/libaom.a
 
-LIBSHARPYUV_BUILD_DIR := $(OUT_BUILD_DIR)/libsharpyuvLOLOLOL
-LIBSHARPYUV_OUT := $(LIBSHARPYUV_BUILD_DIR)/libsharpyuv.a
-
 OUT_WASM = $(OUT_JS:.js=.wasm)
 OUT_WORKER=$(OUT_JS:.js=.worker.js)
 
@@ -34,13 +25,6 @@ OUT_WORKER=$(OUT_JS:.js=.worker.js)
 
 all: $(OUT_JS)
 
-# Only add libsharpyuv as a dependency for encoders.
-# Yes, that if statement is true for encoders.
-ifneq (,$(findstring enc/, $(OUT_JS)))
-$(OUT_JS): $(LIBSHARPYUV_OUT)
-$(CODEC_OUT): $(LIBSHARPYUV_OUT)
-endif
-
 $(OUT_JS): $(OUT_CPP) $(LIBAOM_OUT) $(CODEC_OUT)
 	$(CXX) \
 		-I $(CODEC_DIR)/include \
@@ -55,7 +39,6 @@ $(OUT_JS): $(OUT_CPP) $(LIBAOM_OUT) $(CODEC_OUT)
 
 $(CODEC_OUT): $(CODEC_DIR)/CMakeLists.txt $(LIBAOM_OUT)
 	emcmake cmake \
-		-DCMAKE_LIBRARY_PATH=$(LIBSHARPYUV_BUILD_DIR) \
 		-DCMAKE_BUILD_TYPE=Release \
 		-DBUILD_SHARED_LIBS=0 \
 		-DAVIF_CODEC_AOM=1 \
@@ -84,21 +67,6 @@ $(LIBAOM_OUT): $(LIBAOM_DIR)/CMakeLists.txt
 		$(LIBAOM_DIR) && \
 	$(MAKE) -C $(LIBAOM_BUILD_DIR)
 
-$(LIBSHARPYUV_OUT): $(LIBSHARPYUV_DIR)/CMakeLists.txt
-		emcmake cmake \
-			-DBUILD_SHARED_LIBS=OFF \
-			-DCMAKE_BUILD_TYPE=Release \
-			-B $(LIBSHARPYUV_BUILD_DIR) \
-			$(LIBSHARPYUV_DIR)
-		$(MAKE) -C $(LIBSHARPYUV_BUILD_DIR) sharpyuv
-
-$(LIBSHARPYUV_DIR)/CMakeLists.txt: $(CODEC_DIR)/CMakeLists.txt
-	cd $(CODEC_DIR)/ext && \
-		git clone $(WEBP_URL) --single-branch libwebp && \
-		cd libwebp && \
-		git checkout $(WEBP_COMMIT)
-
-
 clean:
 	$(RM) $(OUT_JS) $(OUT_WASM) $(OUT_WORKER)
 	$(MAKE) -C $(CODEC_BUILD_DIR) clean

codecs/cpp.Dockerfile

@@ -1,4 +1,4 @@
-FROM emscripten/emsdk:2.0.34
+FROM emscripten/emsdk:2.0.23
 RUN apt-get update && apt-get install -qqy autoconf libtool pkg-config
 ENV CFLAGS "-O3 -flto"
 ENV CXXFLAGS "${CFLAGS} -std=c++17"

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

@@ -281,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,
   };
@@ -439,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,
@@ -933,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}
       />
     ));
 
@@ -948,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/features/encoders/avif/client/index.tsx

@@ -38,19 +38,10 @@ interface State {
   denoiseLevel: number;
   aqMode: number;
   tune: AVIFTune;
-  enableSharpDownsampling: boolean;
 }
 
-/**
- * AVIF quality ranges from 0 (worst) to 100 (lossless).
- * Since lossless is a separate checkbox, we cap user-inputted quality at 99
- *
- * AVIF speed ranges from 0 (slowest) to 10 (fastest).
- * We display it as 'effort' to the user since it conveys the speed-size tradeoff
- * much better: speed = 10 - effort
- */
-const MAX_QUALITY = 100;
-const MAX_EFFORT = 10;
+const maxQuant = 63;
+const maxSpeed = 10;
 
 export class Options extends Component<Props, State> {
   static getDerivedStateFromProps(
@@ -64,30 +55,34 @@ export class Options extends Component<Props, State> {
     const { options } = props;
 
     const lossless =
-      options.quality === MAX_QUALITY &&
-      (options.qualityAlpha == -1 || options.qualityAlpha == MAX_QUALITY) &&
+      options.cqLevel === 0 &&
+      options.cqAlphaLevel <= 0 &&
       options.subsample == 3;
 
-    const separateAlpha = options.qualityAlpha !== -1;
+    const separateAlpha = options.cqAlphaLevel !== -1;
 
-    const quality = lossless ? defaultOptions.quality : options.quality;
+    const cqLevel = lossless ? defaultOptions.cqLevel : options.cqLevel;
 
     // Create default form state from options
     return {
       options,
       lossless,
-      quality: quality,
+      quality: maxQuant - cqLevel,
       separateAlpha,
-      alphaQuality: separateAlpha ? options.qualityAlpha : options.quality,
-      subsample: defaultOptions.subsample,
+      alphaQuality:
+        maxQuant -
+        (separateAlpha ? options.cqAlphaLevel : defaultOptions.cqLevel),
+      subsample:
+        options.subsample === 0 || lossless
+          ? defaultOptions.subsample
+          : options.subsample,
       tileRows: options.tileRowsLog2,
       tileCols: options.tileColsLog2,
-      effort: MAX_EFFORT - options.speed,
+      effort: maxSpeed - options.speed,
       chromaDeltaQ: options.chromaDeltaQ,
       sharpness: options.sharpness,
       denoiseLevel: options.denoiseLevel,
       tune: options.tune,
-      enableSharpDownsampling: options.enableSharpDownsampling,
     };
   }
 
@@ -125,21 +120,20 @@ export class Options extends Component<Props, State> {
         };
 
         const newOptions: EncodeOptions = {
-          quality: optionState.lossless ? MAX_QUALITY : optionState.quality,
-          qualityAlpha:
+          cqLevel: optionState.lossless ? 0 : maxQuant - optionState.quality,
+          cqAlphaLevel:
             optionState.lossless || !optionState.separateAlpha
-              ? -1 // default AVIF alphaLevel
-              : optionState.alphaQuality,
+              ? -1
+              : maxQuant - optionState.alphaQuality,
           // Always set to 4:4:4 if lossless
           subsample: optionState.lossless ? 3 : optionState.subsample,
           tileColsLog2: optionState.tileCols,
           tileRowsLog2: optionState.tileRows,
-          speed: MAX_EFFORT - optionState.effort,
+          speed: maxSpeed - optionState.effort,
           chromaDeltaQ: optionState.chromaDeltaQ,
           sharpness: optionState.sharpness,
           denoiseLevel: optionState.denoiseLevel,
           tune: optionState.tune,
-          enableSharpDownsampling: optionState.enableSharpDownsampling,
         };
 
         // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -173,7 +167,6 @@ export class Options extends Component<Props, State> {
       sharpness,
       denoiseLevel,
       tune,
-      enableSharpDownsampling,
     }: State,
   ) {
     return (
@@ -190,7 +183,7 @@ export class Options extends Component<Props, State> {
             <div class={style.optionOneCell}>
               <Range
                 min="0"
-                max={MAX_QUALITY - 1} // MAX_QUALITY would mean lossless
+                max="63"
                 value={quality}
                 onInput={this._inputChange('quality', 'number')}
               >
@@ -218,10 +211,9 @@ export class Options extends Component<Props, State> {
                         value={subsample}
                         onChange={this._inputChange('subsample', 'number')}
                       >
-                        <option value="0">4:0:0</option>
-                        <option value="1">4:2:0</option>
-                        <option value="2">4:2:2</option>
-                        <option value="3">4:4:4</option>
+                        <option value="1">Half</option>
+                        {/*<option value="2">4:2:2</option>*/}
+                        <option value="3">Off</option>
                       </Select>
                     </label>
                     <label class={style.optionToggle}>
@@ -236,7 +228,7 @@ export class Options extends Component<Props, State> {
                         <div class={style.optionOneCell}>
                           <Range
                             min="0"
-                            max={MAX_QUALITY - 1} // MAX_QUALITY would mean lossless
+                            max="63"
                             value={alphaQuality}
                             onInput={this._inputChange(
                               'alphaQuality',
@@ -265,16 +257,6 @@ export class Options extends Component<Props, State> {
                         Sharpness:
                       </Range>
                     </div>
-                    <label class={style.optionToggle}>
-                      Enable Sharp YUV Downsampling
-                      <Checkbox
-                        checked={enableSharpDownsampling}
-                        onChange={this._inputChange(
-                          'enableSharpDownsampling',
-                          'boolean',
-                        )}
-                      />
-                    </label>
                     <div class={style.optionOneCell}>
                       <Range
                         min="0"
@@ -325,7 +307,7 @@ export class Options extends Component<Props, State> {
         <div class={style.optionOneCell}>
           <Range
             min="0"
-            max={MAX_EFFORT}
+            max="10"
             value={effort}
             onInput={this._inputChange('effort', 'number')}
           >

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

@@ -18,8 +18,8 @@ export const label = 'AVIF';
 export const mimeType = 'image/avif';
 export const extension = 'avif';
 export const defaultOptions: EncodeOptions = {
-  quality: 50,
-  qualityAlpha: -1,
+  cqLevel: 33,
+  cqAlphaLevel: -1,
   denoiseLevel: 0,
   tileColsLog2: 0,
   tileRowsLog2: 0,
@@ -28,5 +28,4 @@ export const defaultOptions: EncodeOptions = {
   chromaDeltaQ: false,
   sharpness: 0,
   tune: AVIFTune.auto,
-  enableSharpDownsampling: false,
 };

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={{