wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/components/App/index.tsx

@@ -0,0 +1,156 @@
+import { h, Component } from 'preact';
+
+import { bind, linkRef, Fileish } from '../../lib/initial-util';
+import * as style from './style.scss';
+import { FileDropEvent } from 'file-drop-element';
+import 'file-drop-element';
+import SnackBarElement, { SnackOptions } from '../../lib/SnackBar';
+import '../../lib/SnackBar';
+import Intro from '../intro';
+import '../custom-els/LoadingSpinner';
+
+const ROUTE_EDITOR = '/editor';
+
+const compressPromise = import(
+  /* webpackChunkName: "main-app" */
+  '../compress'
+);
+
+const swBridgePromise = import(
+  /* webpackChunkName: "sw-bridge" */
+  '../../lib/sw-bridge'
+);
+
+function back() {
+  window.history.back();
+}
+
+interface Props {}
+
+interface State {
+  awaitingShareTarget: boolean;
+  file?: File | Fileish;
+  isEditorOpen: Boolean;
+  Compress?: typeof import('../compress').default;
+}
+
+export default class App extends Component<Props, State> {
+  state: State = {
+    awaitingShareTarget: new URL(location.href).searchParams.has(
+      'share-target',
+    ),
+    isEditorOpen: false,
+    file: undefined,
+    Compress: undefined,
+  };
+
+  snackbar?: SnackBarElement;
+
+  constructor() {
+    super();
+
+    compressPromise
+      .then((module) => {
+        this.setState({ Compress: module.default });
+      })
+      .catch(() => {
+        this.showSnack('Failed to load app');
+      });
+
+    swBridgePromise.then(async ({ offliner, getSharedImage }) => {
+      offliner(this.showSnack);
+      if (!this.state.awaitingShareTarget) return;
+      const file = await getSharedImage();
+      // Remove the ?share-target from the URL
+      history.replaceState('', '', '/');
+      this.openEditor();
+      this.setState({ file, awaitingShareTarget: false });
+    });
+
+    // In development, persist application state across hot reloads:
+    if (process.env.NODE_ENV === 'development') {
+      this.setState(window.STATE);
+      const oldCDU = this.componentDidUpdate;
+      this.componentDidUpdate = (props, state, prev) => {
+        if (oldCDU) oldCDU.call(this, props, state, prev);
+        window.STATE = this.state;
+      };
+    }
+
+    // Since iOS 10, Apple tries to prevent disabling pinch-zoom. This is great in theory, but
+    // really breaks things on Squoosh, as you can easily end up zooming the UI when you mean to
+    // zoom the image. Once you've done this, it's really difficult to undo. Anyway, this seems to
+    // prevent it.
+    document.body.addEventListener('gesturestart', (event) => {
+      event.preventDefault();
+    });
+
+    window.addEventListener('popstate', this.onPopState);
+  }
+
+  @bind
+  private onFileDrop({ files }: FileDropEvent) {
+    if (!files || files.length === 0) return;
+    const file = files[0];
+    this.openEditor();
+    this.setState({ file });
+  }
+
+  @bind
+  private onIntroPickFile(file: File | Fileish) {
+    this.openEditor();
+    this.setState({ file });
+  }
+
+  @bind
+  private showSnack(
+    message: string,
+    options: SnackOptions = {},
+  ): Promise<string> {
+    if (!this.snackbar) throw Error('Snackbar missing');
+    return this.snackbar.showSnackbar(message, options);
+  }
+
+  @bind
+  private onPopState() {
+    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
+  }
+
+  @bind
+  private openEditor() {
+    if (this.state.isEditorOpen) return;
+    // Change path, but preserve query string.
+    const editorURL = new URL(location.href);
+    editorURL.pathname = ROUTE_EDITOR;
+    history.pushState(null, '', editorURL.href);
+    this.setState({ isEditorOpen: true });
+  }
+
+  render(
+    {}: Props,
+    { file, isEditorOpen, Compress, awaitingShareTarget }: State,
+  ) {
+    const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
+
+    return (
+      <div id="app" class={style.app}>
+        <file-drop
+          accept="image/*"
+          onfiledrop={this.onFileDrop}
+          class={style.drop}
+        >
+          {showSpinner ? (
+            <loading-spinner class={style.appLoader} />
+          ) : isEditorOpen ? (
+            Compress && (
+              <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+            )
+          ) : (
+            <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
+          )}
+          <snack-bar ref={linkRef(this, 'snackbar')} />
+        </file-drop>
+      </div>
+    );
+  }
+}

src_old/components/App/style.scss

@@ -0,0 +1,68 @@
+.app {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+}
+
+.drop {
+  overflow: hidden;
+  touch-action: none;
+  height: 100%;
+  width: 100%;
+
+  &:global {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 10px;
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      border: 2px dashed #fff;
+      background-color:rgba(88, 116, 88, 0.2);
+      border-color: rgba(65, 129, 65, 0.5);
+      border-radius: 10px;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: all 200ms ease-in;
+      transition-property: transform, opacity;
+      pointer-events: none;
+    }
+
+    &.drop-valid::after {
+      opacity: 1;
+      transform: scale(1);
+      transition-timing-function: ease-out;
+    }
+  }
+}
+
+.option-pair {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+
+  &.horizontal {
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &.vertical {
+    flex-direction: column;
+  }
+}
+
+.app-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  --size: 225px;
+  --stroke-width: 26px;
+}

src_old/components/Options/index.tsx

@@ -0,0 +1,220 @@
+import { h, Component } from 'preact';
+
+import * as style from './style.scss';
+import { bind } from '../../lib/initial-util';
+import { cleanSet, cleanMerge } from '../../lib/clean-modify';
+import OxiPNGEncoderOptions from '../../codecs/oxipng/options';
+import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
+import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
+import WebPEncoderOptions from '../../codecs/webp/options';
+import AvifEncoderOptions from '../../codecs/avif/options';
+import BrowserWebPEncoderOptions from '../../codecs/browser-webp/options';
+
+import QuantizerOptionsComponent from '../../codecs/imagequant/options';
+import ResizeOptionsComponent from '../../codecs/resize/options';
+
+import * as identity from '../../codecs/identity/encoder-meta';
+import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
+import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
+import * as webP from '../../codecs/webp/encoder-meta';
+import * as avif from '../../codecs/avif/encoder-meta';
+import * as browserPNG from '../../codecs/browser-png/encoder-meta';
+import * as browserJPEG from '../../codecs/browser-jpeg/encoder-meta';
+import * as browserWebP from '../../codecs/browser-webp/encoder-meta';
+import * as browserGIF from '../../codecs/browser-gif/encoder-meta';
+import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
+import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
+import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
+import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
+import {
+  EncoderState,
+  EncoderType,
+  EncoderOptions,
+  encoders,
+  encodersSupported,
+  EncoderSupportMap,
+} from '../../codecs/encoders';
+import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
+import { ResizeOptions } from '../../codecs/resize/processor-meta';
+import { PreprocessorState } from '../../codecs/preprocessors';
+import { SourceImage } from '../compress';
+import Checkbox from '../checkbox';
+import Expander from '../expander';
+import Select from '../select';
+
+const encoderOptionsComponentMap: {
+  [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
+} = {
+  [identity.type]: undefined,
+  [oxiPNG.type]: OxiPNGEncoderOptions,
+  [mozJPEG.type]: MozJpegEncoderOptions,
+  [webP.type]: WebPEncoderOptions,
+  [avif.type]: AvifEncoderOptions,
+  [browserPNG.type]: undefined,
+  [browserJPEG.type]: BrowserJPEGEncoderOptions,
+  [browserWebP.type]: BrowserWebPEncoderOptions,
+  [browserBMP.type]: undefined,
+  // Only Safari supports the rest, and it doesn't support quality settings.
+  [browserGIF.type]: undefined,
+  [browserTIFF.type]: undefined,
+  [browserJP2.type]: undefined,
+  [browserPDF.type]: undefined,
+};
+
+interface Props {
+  mobileView: boolean;
+  source?: SourceImage;
+  encoderState: EncoderState;
+  preprocessorState: PreprocessorState;
+  onEncoderTypeChange(newType: EncoderType): void;
+  onEncoderOptionsChange(newOptions: EncoderOptions): void;
+  onPreprocessorOptionsChange(newOptions: PreprocessorState): void;
+}
+
+interface State {
+  encoderSupportMap?: EncoderSupportMap;
+}
+
+export default class Options extends Component<Props, State> {
+  state: State = {
+    encoderSupportMap: undefined,
+  };
+
+  constructor() {
+    super();
+    encodersSupported.then((encoderSupportMap) =>
+      this.setState({ encoderSupportMap }),
+    );
+  }
+
+  @bind
+  private onEncoderTypeChange(event: Event) {
+    const el = event.currentTarget as HTMLSelectElement;
+
+    // The select element only has values matching encoder types,
+    // so 'as' is safe here.
+    const type = el.value as EncoderType;
+    this.props.onEncoderTypeChange(type);
+  }
+
+  @bind
+  private onPreprocessorEnabledChange(event: Event) {
+    const el = event.currentTarget as HTMLInputElement;
+    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;
+
+    this.props.onPreprocessorOptionsChange(
+      cleanSet(
+        this.props.preprocessorState,
+        `${preprocessor}.enabled`,
+        el.checked,
+      ),
+    );
+  }
+
+  @bind
+  private onQuantizerOptionsChange(opts: QuantizeOptions) {
+    this.props.onPreprocessorOptionsChange(
+      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
+    );
+  }
+
+  @bind
+  private onResizeOptionsChange(opts: ResizeOptions) {
+    this.props.onPreprocessorOptionsChange(
+      cleanMerge(this.props.preprocessorState, 'resize', opts),
+    );
+  }
+
+  render(
+    { source, encoderState, preprocessorState, onEncoderOptionsChange }: Props,
+    { encoderSupportMap }: State,
+  ) {
+    // tslint:disable variable-name
+    const EncoderOptionComponent =
+      encoderOptionsComponentMap[encoderState.type];
+
+    return (
+      <div class={style.optionsScroller}>
+        <Expander>
+          {encoderState.type === identity.type ? null : (
+            <div>
+              <h3 class={style.optionsTitle}>Edit</h3>
+              <label class={style.sectionEnabler}>
+                <Checkbox
+                  name="resize.enable"
+                  checked={!!preprocessorState.resize.enabled}
+                  onChange={this.onPreprocessorEnabledChange}
+                />
+                Resize
+              </label>
+              <Expander>
+                {preprocessorState.resize.enabled ? (
+                  <ResizeOptionsComponent
+                    isVector={Boolean(source && source.vectorImage)}
+                    inputWidth={source ? source.processed.width : 1}
+                    inputHeight={source ? source.processed.height : 1}
+                    options={preprocessorState.resize}
+                    onChange={this.onResizeOptionsChange}
+                  />
+                ) : null}
+              </Expander>
+
+              <label class={style.sectionEnabler}>
+                <Checkbox
+                  name="quantizer.enable"
+                  checked={!!preprocessorState.quantizer.enabled}
+                  onChange={this.onPreprocessorEnabledChange}
+                />
+                Reduce palette
+              </label>
+              <Expander>
+                {preprocessorState.quantizer.enabled ? (
+                  <QuantizerOptionsComponent
+                    options={preprocessorState.quantizer}
+                    onChange={this.onQuantizerOptionsChange}
+                  />
+                ) : null}
+              </Expander>
+            </div>
+          )}
+        </Expander>
+
+        <h3 class={style.optionsTitle}>Compress</h3>
+
+        <section class={`${style.optionOneCell} ${style.optionsSection}`}>
+          {encoderSupportMap ? (
+            <Select
+              value={encoderState.type}
+              onChange={this.onEncoderTypeChange}
+              large
+            >
+              {encoders
+                .filter((encoder) => encoderSupportMap[encoder.type])
+                .map((encoder) => (
+                  // tslint:disable-next-line:jsx-key
+                  <option value={encoder.type}>{encoder.label}</option>
+                ))}
+            </Select>
+          ) : (
+            <Select large>
+              <option>Loading…</option>
+            </Select>
+          )}
+        </section>
+
+        <Expander>
+          {EncoderOptionComponent ? (
+            <EncoderOptionComponent
+              options={
+                // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
+                // the correct type, but typescript isn't smart enough.
+                encoderState.options as any
+              }
+              onChange={onEncoderOptionsChange}
+            />
+          ) : null}
+        </Expander>
+      </div>
+    );
+  }
+}

src_old/components/Options/style.scss

@@ -0,0 +1,59 @@
+$horizontalPadding: 15px;
+
+.options-title {
+  background: rgba(0, 0, 0, 0.9);
+  margin: 0;
+  padding: 10px $horizontalPadding;
+  font-weight: normal;
+  font-size: 1.4rem;
+  border-bottom: 1px solid #000;
+}
+
+.option-text-first {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 87px 1fr;
+  grid-gap: 0.7em;
+  padding: 10px $horizontalPadding;
+}
+
+.option-one-cell {
+  display: grid;
+  grid-template-columns: 1fr;
+  padding: 10px $horizontalPadding;
+}
+
+.option-input-first,
+.section-enabler {
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-gap: 0.7em;
+  padding: 10px $horizontalPadding;
+}
+
+.section-enabler {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.options-section {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.text-field {
+  background: #fff;
+  color: #000;
+  font: inherit;
+  border: none;
+  padding: 2px 0 2px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.options-scroller {
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

src_old/components/Output/custom-els/PinchZoom/index.ts

@@ -0,0 +1,376 @@
+import PointerTracker, { Pointer } from 'pointer-tracker';
+import './styles.css';
+
+interface Point {
+  clientX: number;
+  clientY: number;
+}
+
+interface ChangeOptions {
+  /**
+   * Fire a 'change' event if values are different to current values
+   */
+  allowChangeEvent?: boolean;
+}
+
+interface ApplyChangeOpts extends ChangeOptions {
+  panX?: number;
+  panY?: number;
+  scaleDiff?: number;
+  originX?: number;
+  originY?: number;
+}
+
+interface SetTransformOpts extends ChangeOptions {
+  scale?: number;
+  x?: number;
+  y?: number;
+}
+
+type ScaleRelativeToValues = 'container' | 'content';
+
+export interface ScaleToOpts extends ChangeOptions {
+  /** Transform origin. Can be a number, or string percent, eg "50%" */
+  originX?: number | string;
+  /** Transform origin. Can be a number, or string percent, eg "50%" */
+  originY?: number | string;
+  /** Should the transform origin be relative to the container, or content? */
+  relativeTo?: ScaleRelativeToValues;
+}
+
+function getDistance(a: Point, b?: Point): number {
+  if (!b) return 0;
+  return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
+}
+
+function getMidpoint(a: Point, b?: Point): Point {
+  if (!b) return a;
+
+  return {
+    clientX: (a.clientX + b.clientX) / 2,
+    clientY: (a.clientY + b.clientY) / 2,
+  };
+}
+
+function getAbsoluteValue(value: string | number, max: number): number {
+  if (typeof value === 'number') return value;
+
+  if (value.trimRight().endsWith('%')) {
+    return (max * parseFloat(value)) / 100;
+  }
+  return parseFloat(value);
+}
+
+// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
+// Given that, better to use something everything supports.
+let cachedSvg: SVGSVGElement;
+
+function getSVG(): SVGSVGElement {
+  return (
+    cachedSvg ||
+    (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
+  );
+}
+
+function createMatrix(): SVGMatrix {
+  return getSVG().createSVGMatrix();
+}
+
+function createPoint(): SVGPoint {
+  return getSVG().createSVGPoint();
+}
+
+const MIN_SCALE = 0.01;
+
+export default class PinchZoom extends HTMLElement {
+  // The element that we'll transform.
+  // Ideally this would be shadow DOM, but we don't have the browser
+  // support yet.
+  private _positioningEl?: Element;
+  // Current transform.
+  private _transform: SVGMatrix = createMatrix();
+
+  constructor() {
+    super();
+
+    // Watch for children changes.
+    // Note this won't fire for initial contents,
+    // so _stageElChange is also called in connectedCallback.
+    new MutationObserver(() => this._stageElChange()).observe(this, {
+      childList: true,
+    });
+
+    // Watch for pointers
+    const pointerTracker: PointerTracker = new PointerTracker(this, {
+      start: (pointer, event) => {
+        // We only want to track 2 pointers at most
+        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
+          return false;
+        event.preventDefault();
+        return true;
+      },
+      move: (previousPointers) => {
+        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
+      },
+    });
+
+    this.addEventListener('wheel', (event) => this._onWheel(event));
+  }
+
+  connectedCallback() {
+    this._stageElChange();
+  }
+
+  get x() {
+    return this._transform.e;
+  }
+
+  get y() {
+    return this._transform.f;
+  }
+
+  get scale() {
+    return this._transform.a;
+  }
+
+  /**
+   * Change the scale, adjusting x/y by a given transform origin.
+   */
+  scaleTo(scale: number, opts: ScaleToOpts = {}) {
+    let { originX = 0, originY = 0 } = opts;
+
+    const { relativeTo = 'content', allowChangeEvent = false } = opts;
+
+    const relativeToEl = relativeTo === 'content' ? this._positioningEl : this;
+
+    // No content element? Fall back to just setting scale
+    if (!relativeToEl || !this._positioningEl) {
+      this.setTransform({ scale, allowChangeEvent });
+      return;
+    }
+
+    const rect = relativeToEl.getBoundingClientRect();
+    originX = getAbsoluteValue(originX, rect.width);
+    originY = getAbsoluteValue(originY, rect.height);
+
+    if (relativeTo === 'content') {
+      originX += this.x;
+      originY += this.y;
+    } else {
+      const currentRect = this._positioningEl.getBoundingClientRect();
+      originX -= currentRect.left;
+      originY -= currentRect.top;
+    }
+
+    this._applyChange({
+      allowChangeEvent,
+      originX,
+      originY,
+      scaleDiff: scale / this.scale,
+    });
+  }
+
+  /**
+   * Update the stage with a given scale/x/y.
+   */
+  setTransform(opts: SetTransformOpts = {}) {
+    const { scale = this.scale, allowChangeEvent = false } = opts;
+
+    let { x = this.x, y = this.y } = opts;
+
+    // If we don't have an element to position, just set the value as given.
+    // We'll check bounds later.
+    if (!this._positioningEl) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Get current layout
+    const thisBounds = this.getBoundingClientRect();
+    const positioningElBounds = this._positioningEl.getBoundingClientRect();
+
+    // Not displayed. May be disconnected or display:none.
+    // Just take the values, and we'll check bounds later.
+    if (!thisBounds.width || !thisBounds.height) {
+      this._updateTransform(scale, x, y, allowChangeEvent);
+      return;
+    }
+
+    // Create points for _positioningEl.
+    let topLeft = createPoint();
+    topLeft.x = positioningElBounds.left - thisBounds.left;
+    topLeft.y = positioningElBounds.top - thisBounds.top;
+    let bottomRight = createPoint();
+    bottomRight.x = positioningElBounds.width + topLeft.x;
+    bottomRight.y = positioningElBounds.height + topLeft.y;
+
+    // Calculate the intended position of _positioningEl.
+    const matrix = createMatrix()
+      .translate(x, y)
+      .scale(scale)
+      // Undo current transform
+      .multiply(this._transform.inverse());
+
+    topLeft = topLeft.matrixTransform(matrix);
+    bottomRight = bottomRight.matrixTransform(matrix);
+
+    // Ensure _positioningEl can't move beyond out-of-bounds.
+    // Correct for x
+    if (topLeft.x > thisBounds.width) {
+      x += thisBounds.width - topLeft.x;
+    } else if (bottomRight.x < 0) {
+      x += -bottomRight.x;
+    }
+
+    // Correct for y
+    if (topLeft.y > thisBounds.height) {
+      y += thisBounds.height - topLeft.y;
+    } else if (bottomRight.y < 0) {
+      y += -bottomRight.y;
+    }
+
+    this._updateTransform(scale, x, y, allowChangeEvent);
+  }
+
+  /**
+   * Update transform values without checking bounds. This is only called in setTransform.
+   */
+  private _updateTransform(
+    scale: number,
+    x: number,
+    y: number,
+    allowChangeEvent: boolean,
+  ) {
+    // Avoid scaling to zero
+    if (scale < MIN_SCALE) return;
+
+    // Return if there's no change
+    if (scale === this.scale && x === this.x && y === this.y) return;
+
+    this._transform.e = x;
+    this._transform.f = y;
+    this._transform.d = this._transform.a = scale;
+
+    this.style.setProperty('--x', this.x + 'px');
+    this.style.setProperty('--y', this.y + 'px');
+    this.style.setProperty('--scale', this.scale + '');
+
+    if (allowChangeEvent) {
+      const event = new Event('change', { bubbles: true });
+      this.dispatchEvent(event);
+    }
+  }
+
+  /**
+   * Called when the direct children of this element change.
+   * Until we have have shadow dom support across the board, we
+   * require a single element to be the child of <pinch-zoom>, and
+   * that's the element we pan/scale.
+   */
+  private _stageElChange() {
+    this._positioningEl = undefined;
+
+    if (this.children.length === 0) return;
+
+    this._positioningEl = this.children[0];
+
+    if (this.children.length > 1) {
+      console.warn('<pinch-zoom> must not have more than one child.');
+    }
+
+    // Do a bounds check
+    this.setTransform({ allowChangeEvent: true });
+  }
+
+  private _onWheel(event: WheelEvent) {
+    if (!this._positioningEl) return;
+    event.preventDefault();
+
+    const currentRect = this._positioningEl.getBoundingClientRect();
+    let { deltaY } = event;
+    const { ctrlKey, deltaMode } = event;
+
+    if (deltaMode === 1) {
+      // 1 is "lines", 0 is "pixels"
+      // Firefox uses "lines" for some types of mouse
+      deltaY *= 15;
+    }
+
+    // ctrlKey is true when pinch-zooming on a trackpad.
+    const divisor = ctrlKey ? 100 : 300;
+    const scaleDiff = 1 - deltaY / divisor;
+
+    this._applyChange({
+      scaleDiff,
+      originX: event.clientX - currentRect.left,
+      originY: event.clientY - currentRect.top,
+      allowChangeEvent: true,
+    });
+  }
+
+  private _onPointerMove(
+    previousPointers: Pointer[],
+    currentPointers: Pointer[],
+  ) {
+    if (!this._positioningEl) return;
+
+    // Combine next points with previous points
+    const currentRect = this._positioningEl.getBoundingClientRect();
+
+    // For calculating panning movement
+    const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
+    const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
+
+    // Midpoint within the element
+    const originX = prevMidpoint.clientX - currentRect.left;
+    const originY = prevMidpoint.clientY - currentRect.top;
+
+    // Calculate the desired change in scale
+    const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
+    const newDistance = getDistance(currentPointers[0], currentPointers[1]);
+    const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
+
+    this._applyChange({
+      originX,
+      originY,
+      scaleDiff,
+      panX: newMidpoint.clientX - prevMidpoint.clientX,
+      panY: newMidpoint.clientY - prevMidpoint.clientY,
+      allowChangeEvent: true,
+    });
+  }
+
+  /** Transform the view & fire a change event */
+  private _applyChange(opts: ApplyChangeOpts = {}) {
+    const {
+      panX = 0,
+      panY = 0,
+      originX = 0,
+      originY = 0,
+      scaleDiff = 1,
+      allowChangeEvent = false,
+    } = opts;
+
+    const matrix = createMatrix()
+      // Translate according to panning.
+      .translate(panX, panY)
+      // Scale about the origin.
+      .translate(originX, originY)
+      // Apply current translate
+      .translate(this.x, this.y)
+      .scale(scaleDiff)
+      .translate(-originX, -originY)
+      // Apply current scale.
+      .scale(this.scale);
+
+    // Convert the transform into basic translate & scale.
+    this.setTransform({
+      allowChangeEvent,
+      scale: matrix.a,
+      x: matrix.e,
+      y: matrix.f,
+    });
+  }
+}
+
+customElements.define('pinch-zoom', PinchZoom);

src_old/components/Output/custom-els/PinchZoom/missing-types.d.ts

@@ -0,0 +1,16 @@
+declare interface CSSStyleDeclaration {
+  willChange: string | null;
+}
+
+// TypeScript, you make me sad.
+// https://github.com/Microsoft/TypeScript/issues/18756
+interface Window {
+  PointerEvent: typeof PointerEvent;
+  Touch: typeof Touch;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'pinch-zoom': HTMLAttributes;
+  }
+}

src_old/components/Output/custom-els/PinchZoom/styles.css

@@ -0,0 +1,14 @@
+pinch-zoom {
+  display: block;
+  overflow: hidden;
+  touch-action: none;
+  --scale: 1;
+  --x: 0;
+  --y: 0;
+}
+
+pinch-zoom > * {
+  transform: translate(var(--x), var(--y)) scale(var(--scale));
+  transform-origin: 0 0;
+  will-change: transform;
+}

src_old/components/Output/custom-els/TwoUp/index.ts

@@ -0,0 +1,171 @@
+import PointerTracker, { Pointer } from 'pointer-tracker';
+import * as styles from './styles.css';
+
+const legacyClipCompatAttr = 'legacy-clip-compat';
+const orientationAttr = 'orientation';
+
+type TwoUpOrientation = 'horizontal' | 'vertical';
+
+/**
+ * A split view that the user can adjust. The first child becomes
+ * the left-hand side, and the second child becomes the right-hand side.
+ */
+export default class TwoUp extends HTMLElement {
+  static get observedAttributes() {
+    return [orientationAttr];
+  }
+
+  private readonly _handle = document.createElement('div');
+  /**
+   * The position of the split in pixels.
+   */
+  private _position = 0;
+  /**
+   * The position of the split in %.
+   */
+  private _relativePosition = 0.5;
+  /**
+   * The value of _position when the pointer went down.
+   */
+  private _positionOnPointerStart = 0;
+  /**
+   * Has connectedCallback been called yet?
+   */
+  private _everConnected = false;
+
+  constructor() {
+    super();
+    this._handle.className = styles.twoUpHandle;
+
+    // Watch for children changes.
+    // Note this won't fire for initial contents,
+    // so _childrenChange is also called in connectedCallback.
+    new MutationObserver(() => this._childrenChange()).observe(this, {
+      childList: true,
+    });
+
+    // Watch for element size changes.
+    if ('ResizeObserver' in window) {
+      new ResizeObserver(() => this._resetPosition()).observe(this);
+    } else {
+      window.addEventListener('resize', () => this._resetPosition());
+    }
+
+    // Watch for pointers on the handle.
+    const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
+      start: (_, event) => {
+        // We only want to track 1 pointer.
+        if (pointerTracker.currentPointers.length === 1) return false;
+        event.preventDefault();
+        this._positionOnPointerStart = this._position;
+        return true;
+      },
+      move: () => {
+        this._pointerChange(
+          pointerTracker.startPointers[0],
+          pointerTracker.currentPointers[0],
+        );
+      },
+    });
+  }
+
+  connectedCallback() {
+    this._childrenChange();
+
+    this._handle.innerHTML = `<div class="${
+      styles.scrubber
+    }">${`<svg viewBox="0 0 27 20" fill="currentColor">${'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'}</svg>`}</div>`;
+
+    if (!this._everConnected) {
+      this._resetPosition();
+      this._everConnected = true;
+    }
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === orientationAttr) {
+      this._resetPosition();
+    }
+  }
+
+  private _resetPosition() {
+    // Set the initial position of the handle.
+    requestAnimationFrame(() => {
+      const bounds = this.getBoundingClientRect();
+      const dimensionAxis =
+        this.orientation === 'vertical' ? 'height' : 'width';
+      this._position = bounds[dimensionAxis] * this._relativePosition;
+      this._setPosition();
+    });
+  }
+
+  /**
+   * If true, this element works in browsers that don't support clip-path (Edge).
+   * However, this means you'll have to set the height of this element manually.
+   */
+  get legacyClipCompat() {
+    return this.hasAttribute(legacyClipCompatAttr);
+  }
+
+  set legacyClipCompat(val: boolean) {
+    if (val) {
+      this.setAttribute(legacyClipCompatAttr, '');
+    } else {
+      this.removeAttribute(legacyClipCompatAttr);
+    }
+  }
+
+  /**
+   * Split vertically rather than horizontally.
+   */
+  get orientation(): TwoUpOrientation {
+    const value = this.getAttribute(orientationAttr);
+
+    // This mirrors the behaviour of input.type, where setting just sets the attribute, but getting
+    // returns the value only if it's valid.
+    if (value && value.toLowerCase() === 'vertical') return 'vertical';
+    return 'horizontal';
+  }
+
+  set orientation(val: TwoUpOrientation) {
+    this.setAttribute(orientationAttr, val);
+  }
+
+  /**
+   * Called when element's child list changes
+   */
+  private _childrenChange() {
+    // Ensure the handle is the last child.
+    // The CSS depends on this.
+    if (this.lastElementChild !== this._handle) {
+      this.appendChild(this._handle);
+    }
+  }
+
+  /**
+   * Called when a pointer moves.
+   */
+  private _pointerChange(startPoint: Pointer, currentPoint: Pointer) {
+    const pointAxis = this.orientation === 'vertical' ? 'clientY' : 'clientX';
+    const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
+    const bounds = this.getBoundingClientRect();
+
+    this._position =
+      this._positionOnPointerStart +
+      (currentPoint[pointAxis] - startPoint[pointAxis]);
+
+    // Clamp position to element bounds.
+    this._position = Math.max(
+      0,
+      Math.min(this._position, bounds[dimensionAxis]),
+    );
+    this._relativePosition = this._position / bounds[dimensionAxis];
+    this._setPosition();
+  }
+
+  private _setPosition() {
+    this.style.setProperty('--split-point', `${this._position}px`);
+  }
+}
+
+customElements.define('two-up', TwoUp);

src_old/components/Output/custom-els/TwoUp/missing-types.d.ts

@@ -0,0 +1,52 @@
+declare interface CSSStyleDeclaration {
+  willChange: string | null;
+}
+
+// TypeScript, you make me sad.
+// https://github.com/Microsoft/TypeScript/issues/18756
+interface Window {
+  PointerEvent: typeof PointerEvent;
+  Touch: typeof Touch;
+}
+
+interface TwoUpAttributes extends JSX.HTMLAttributes {
+  orientation?: string;
+  'legacy-clip-compat'?: boolean;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'two-up': TwoUpAttributes;
+  }
+}
+
+interface DOMRectReadOnly {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly left: number;
+}
+
+interface ResizeObserverCallback {
+  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+
+interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+}
+
+interface ResizeObserver {
+  observe(target: Element): void;
+  unobserve(target: Element): void;
+  disconnect(): void;
+}
+
+declare var ResizeObserver: {
+  prototype: ResizeObserver;
+  new (callback: ResizeObserverCallback): ResizeObserver;
+};

src_old/components/Output/custom-els/TwoUp/styles.css

@@ -0,0 +1,131 @@
+two-up {
+  display: grid;
+  position: relative;
+  --split-point: 0;
+  --accent-color: #777;
+  --track-color: var(--accent-color);
+  --thumb-background: #fff;
+  --thumb-color: var(--accent-color);
+  --thumb-size: 62px;
+  --bar-size: 6px;
+  --bar-touch-size: 30px;
+}
+
+two-up > * {
+  /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
+  grid-area: 1/1;
+}
+
+two-up[legacy-clip-compat] > :not(.two-up-handle) {
+  /* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
+  elements to be positioned absolutely */
+  position: absolute;
+}
+
+.two-up-handle {
+  touch-action: none;
+  position: relative;
+  width: var(--bar-touch-size);
+  transform: translateX(var(--split-point)) translateX(-50%);
+  will-change: transform;
+  cursor: ew-resize;
+}
+
+.two-up-handle::before {
+  content: '';
+  display: block;
+  height: 100%;
+  width: var(--bar-size);
+  margin: 0 auto;
+  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.4);
+  background: var(--track-color);
+}
+
+.scrubber {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 50% 50%;
+  transform: translate(-50%, -50%);
+  width: var(--thumb-size);
+  height: calc(var(--thumb-size) * 0.9);
+  background: var(--thumb-background);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: var(--thumb-size);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  color: var(--thumb-color);
+  box-sizing: border-box;
+  padding: 0 calc(var(--thumb-size) * 0.24);
+}
+
+.scrubber svg {
+  flex: 1;
+}
+
+two-up[orientation='vertical'] .two-up-handle {
+  width: auto;
+  height: var(--bar-touch-size);
+  transform: translateY(var(--split-point)) translateY(-50%);
+  cursor: ns-resize;
+}
+
+two-up[orientation='vertical'] .two-up-handle::before {
+  width: auto;
+  height: var(--bar-size);
+  box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0, 0, 0, 0.1),
+    0 1px 4px rgba(0, 0, 0, 0.4);
+  margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
+}
+
+two-up[orientation='vertical'] .scrubber {
+  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+two-up > :nth-child(1):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
+  clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
+}
+
+two-up > :nth-child(2):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 0 0 var(--split-point));
+  clip-path: inset(0 0 0 var(--split-point));
+}
+
+two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
+  -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+  clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+}
+
+two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
+  -webkit-clip-path: inset(var(--split-point) 0 0 0);
+  clip-path: inset(var(--split-point) 0 0 0);
+}
+
+/*
+  Even in legacy-clip-compat, prefer clip-path if it's supported.
+  It performs way better in Safari.
+ */
+@supports not (
+  (clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))
+) {
+  two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
+    clip: rect(auto var(--split-point) auto auto);
+  }
+
+  two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
+    clip: rect(auto auto auto var(--split-point));
+  }
+
+  two-up[orientation='vertical'][legacy-clip-compat]
+    > :nth-child(1):not(.two-up-handle) {
+    clip: rect(auto auto var(--split-point) auto);
+  }
+
+  two-up[orientation='vertical'][legacy-clip-compat]
+    > :nth-child(2):not(.two-up-handle) {
+    clip: rect(var(--split-point) auto auto auto);
+  }
+}

src_old/components/Output/index.tsx

@@ -0,0 +1,384 @@
+import { h, Component } from 'preact';
+import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
+import './custom-els/PinchZoom';
+import './custom-els/TwoUp';
+import * as style from './style.scss';
+import { bind, linkRef } from '../../lib/initial-util';
+import { shallowEqual, drawDataToCanvas } from '../../lib/util';
+import {
+  ToggleBackgroundIcon,
+  AddIcon,
+  RemoveIcon,
+  BackIcon,
+  ToggleBackgroundActiveIcon,
+  RotateIcon,
+} from '../../lib/icons';
+import { twoUpHandle } from './custom-els/TwoUp/styles.css';
+import { InputProcessorState } from '../../codecs/input-processors';
+import { cleanSet } from '../../lib/clean-modify';
+import { SourceImage } from '../compress';
+
+interface Props {
+  source?: SourceImage;
+  inputProcessorState?: InputProcessorState;
+  mobileView: boolean;
+  leftCompressed?: ImageData;
+  rightCompressed?: ImageData;
+  leftImgContain: boolean;
+  rightImgContain: boolean;
+  onBack: () => void;
+  onInputProcessorChange: (newState: InputProcessorState) => void;
+}
+
+interface State {
+  scale: number;
+  editingScale: boolean;
+  altBackground: boolean;
+}
+
+const scaleToOpts: ScaleToOpts = {
+  originX: '50%',
+  originY: '50%',
+  relativeTo: 'container',
+  allowChangeEvent: true,
+};
+
+export default class Output extends Component<Props, State> {
+  state: State = {
+    scale: 1,
+    editingScale: false,
+    altBackground: false,
+  };
+  canvasLeft?: HTMLCanvasElement;
+  canvasRight?: HTMLCanvasElement;
+  pinchZoomLeft?: PinchZoom;
+  pinchZoomRight?: PinchZoom;
+  scaleInput?: HTMLInputElement;
+  retargetedEvents = new WeakSet<Event>();
+
+  componentDidMount() {
+    const leftDraw = this.leftDrawable();
+    const rightDraw = this.rightDrawable();
+
+    // Reset the pinch zoom, which may have an position set from the previous view, after pressing
+    // the back button.
+    this.pinchZoomLeft!.setTransform({
+      allowChangeEvent: true,
+      x: 0,
+      y: 0,
+      scale: 1,
+    });
+
+    if (this.canvasLeft && leftDraw) {
+      drawDataToCanvas(this.canvasLeft, leftDraw);
+    }
+    if (this.canvasRight && rightDraw) {
+      drawDataToCanvas(this.canvasRight, rightDraw);
+    }
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    const prevLeftDraw = this.leftDrawable(prevProps);
+    const prevRightDraw = this.rightDrawable(prevProps);
+    const leftDraw = this.leftDrawable();
+    const rightDraw = this.rightDrawable();
+    const sourceFileChanged =
+      // Has the value become (un)defined?
+      !!this.props.source !== !!prevProps.source ||
+      // Or has the file changed?
+      (this.props.source &&
+        prevProps.source &&
+        this.props.source.file !== prevProps.source.file);
+
+    const oldSourceData = prevProps.source && prevProps.source.processed;
+    const newSourceData = this.props.source && this.props.source.processed;
+    const pinchZoom = this.pinchZoomLeft!;
+
+    if (sourceFileChanged) {
+      // New image? Reset the pinch-zoom.
+      pinchZoom.setTransform({
+        allowChangeEvent: true,
+        x: 0,
+        y: 0,
+        scale: 1,
+      });
+    } else if (
+      oldSourceData &&
+      newSourceData &&
+      oldSourceData !== newSourceData
+    ) {
+      // Since the pinch zoom transform origin is the top-left of the content, we need to flip
+      // things around a bit when the content size changes, so the new content appears as if it were
+      // central to the previous content.
+      const scaleChange = 1 - pinchZoom.scale;
+      const oldXScaleOffset = (oldSourceData.width / 2) * scaleChange;
+      const oldYScaleOffset = (oldSourceData.height / 2) * scaleChange;
+
+      pinchZoom.setTransform({
+        allowChangeEvent: true,
+        x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
+        y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
+      });
+    }
+
+    if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
+      drawDataToCanvas(this.canvasLeft, leftDraw);
+    }
+    if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
+      drawDataToCanvas(this.canvasRight, rightDraw);
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return (
+      !shallowEqual(this.props, nextProps) ||
+      !shallowEqual(this.state, nextState)
+    );
+  }
+
+  private leftDrawable(props: Props = this.props): ImageData | undefined {
+    return props.leftCompressed || (props.source && props.source.processed);
+  }
+
+  private rightDrawable(props: Props = this.props): ImageData | undefined {
+    return props.rightCompressed || (props.source && props.source.processed);
+  }
+
+  @bind
+  private toggleBackground() {
+    this.setState({
+      altBackground: !this.state.altBackground,
+    });
+  }
+
+  @bind
+  private zoomIn() {
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
+
+    this.pinchZoomLeft.scaleTo(this.state.scale * 1.25, scaleToOpts);
+  }
+
+  @bind
+  private zoomOut() {
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
+
+    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
+  }
+
+  @bind
+  private onRotateClick() {
+    const { inputProcessorState } = this.props;
+    if (!inputProcessorState) return;
+
+    const newState = cleanSet(
+      inputProcessorState,
+      'rotate.rotate',
+      (inputProcessorState.rotate.rotate + 90) % 360,
+    );
+
+    this.props.onInputProcessorChange(newState);
+  }
+
+  @bind
+  private onScaleValueFocus() {
+    this.setState({ editingScale: true }, () => {
+      if (this.scaleInput) {
+        // Firefox unfocuses the input straight away unless I force a style calculation here. I have
+        // no idea why, but it's late and I'm quite tired.
+        getComputedStyle(this.scaleInput).transform;
+        this.scaleInput.focus();
+      }
+    });
+  }
+
+  @bind
+  private onScaleInputBlur() {
+    this.setState({ editingScale: false });
+  }
+
+  @bind
+  private onScaleInputChanged(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const percent = parseFloat(target.value);
+    if (isNaN(percent)) return;
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
+
+    this.pinchZoomLeft.scaleTo(percent / 100, scaleToOpts);
+  }
+
+  @bind
+  private onPinchZoomLeftChange(event: Event) {
+    if (!this.pinchZoomRight || !this.pinchZoomLeft)
+      throw Error('Missing pinch-zoom element');
+    this.setState({
+      scale: this.pinchZoomLeft.scale,
+    });
+    this.pinchZoomRight.setTransform({
+      scale: this.pinchZoomLeft.scale,
+      x: this.pinchZoomLeft.x,
+      y: this.pinchZoomLeft.y,
+    });
+  }
+
+  /**
+   * We're using two pinch zoom elements, but we want them to stay in sync. When one moves, we
+   * update the position of the other. However, this is tricky when it comes to multi-touch, when
+   * one finger is on one pinch-zoom, and the other finger is on the other. To overcome this, we
+   * redirect all relevant pointer/touch/mouse events to the first pinch zoom element.
+   *
+   * @param event Event to redirect
+   */
+  @bind
+  private onRetargetableEvent(event: Event) {
+    const targetEl = event.target as HTMLElement;
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
+    // If the event is on the handle of the two-up, let it through,
+    // unless it's a wheel event, in which case always let it through.
+    if (event.type !== 'wheel' && targetEl.closest(`.${twoUpHandle}`)) return;
+    // If we've already retargeted this event, let it through.
+    if (this.retargetedEvents.has(event)) return;
+    // Stop the event in its tracks.
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    // Clone the event & dispatch
+    // Some TypeScript trickery needed due to https://github.com/Microsoft/TypeScript/issues/3841
+    const clonedEvent = new (event.constructor as typeof Event)(
+      event.type,
+      event,
+    );
+    this.retargetedEvents.add(clonedEvent);
+    this.pinchZoomLeft.dispatchEvent(clonedEvent);
+
+    // Unfocus any active element on touchend. This fixes an issue on (at least) Android Chrome,
+    // where the software keyboard is hidden, but the input remains focused, then after interaction
+    // with this element the keyboard reappears for NO GOOD REASON. Thanks Android.
+    if (
+      event.type === 'touchend' &&
+      document.activeElement &&
+      document.activeElement instanceof HTMLElement
+    ) {
+      document.activeElement.blur();
+    }
+  }
+
+  render(
+    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
+    { scale, editingScale, altBackground }: State,
+  ) {
+    const leftDraw = this.leftDrawable();
+    const rightDraw = this.rightDrawable();
+    // To keep position stable, the output is put in a square using the longest dimension.
+    const originalImage = source && source.processed;
+
+    return (
+      <div
+        class={`${style.output} ${altBackground ? style.altBackground : ''}`}
+      >
+        <two-up
+          legacy-clip-compat
+          class={style.twoUp}
+          orientation={mobileView ? 'vertical' : 'horizontal'}
+          // Event redirecting. See onRetargetableEvent.
+          onTouchStartCapture={this.onRetargetableEvent}
+          onTouchEndCapture={this.onRetargetableEvent}
+          onTouchMoveCapture={this.onRetargetableEvent}
+          onPointerDownCapture={this.onRetargetableEvent}
+          onMouseDownCapture={this.onRetargetableEvent}
+          onWheelCapture={this.onRetargetableEvent}
+        >
+          <pinch-zoom
+            class={style.pinchZoom}
+            onChange={this.onPinchZoomLeftChange}
+            ref={linkRef(this, 'pinchZoomLeft')}
+          >
+            <canvas
+              class={style.pinchTarget}
+              ref={linkRef(this, 'canvasLeft')}
+              width={leftDraw && leftDraw.width}
+              height={leftDraw && leftDraw.height}
+              style={{
+                width: originalImage && originalImage.width,
+                height: originalImage && originalImage.height,
+                objectFit: leftImgContain ? 'contain' : '',
+              }}
+            />
+          </pinch-zoom>
+          <pinch-zoom
+            class={style.pinchZoom}
+            ref={linkRef(this, 'pinchZoomRight')}
+          >
+            <canvas
+              class={style.pinchTarget}
+              ref={linkRef(this, 'canvasRight')}
+              width={rightDraw && rightDraw.width}
+              height={rightDraw && rightDraw.height}
+              style={{
+                width: originalImage && originalImage.width,
+                height: originalImage && originalImage.height,
+                objectFit: rightImgContain ? 'contain' : '',
+              }}
+            />
+          </pinch-zoom>
+        </two-up>
+
+        <div class={style.back}>
+          <button class={style.button} onClick={onBack}>
+            <BackIcon />
+          </button>
+        </div>
+
+        <div class={style.controls}>
+          <div class={style.zoomControls}>
+            <button class={style.button} onClick={this.zoomOut}>
+              <RemoveIcon />
+            </button>
+            {editingScale ? (
+              <input
+                type="number"
+                step="1"
+                min="1"
+                max="1000000"
+                ref={linkRef(this, 'scaleInput')}
+                class={style.zoom}
+                value={Math.round(scale * 100)}
+                onInput={this.onScaleInputChanged}
+                onBlur={this.onScaleInputBlur}
+              />
+            ) : (
+              <span
+                class={style.zoom}
+                tabIndex={0}
+                onFocus={this.onScaleValueFocus}
+              >
+                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>%
+              </span>
+            )}
+            <button class={style.button} onClick={this.zoomIn}>
+              <AddIcon />
+            </button>
+          </div>
+          <div class={style.buttonsNoWrap}>
+            <button
+              class={style.button}
+              onClick={this.onRotateClick}
+              title="Rotate image"
+            >
+              <RotateIcon />
+            </button>
+            <button
+              class={`${style.button} ${altBackground ? style.active : ''}`}
+              onClick={this.toggleBackground}
+              title="Change canvas color"
+            >
+              {altBackground ? (
+                <ToggleBackgroundActiveIcon />
+              ) : (
+                <ToggleBackgroundIcon />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src_old/components/Output/style.scss

@@ -0,0 +1,166 @@
+.output {
+  composes: abs-fill from '../../lib/util.scss';
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+    transition: opacity 500ms ease;
+  }
+
+  &.alt-background::before {
+    opacity: 0.6;
+  }
+}
+
+.two-up {
+  composes: abs-fill from '../../lib/util.scss';
+  --accent-color: var(--button-fg);
+}
+
+.pinch-zoom {
+  composes: abs-fill from '../../lib/util.scss';
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pinch-target {
+  // This fixes a severe painting bug in Chrome.
+  // We should try to remove this once the issue is fixed.
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
+  will-change: auto;
+  // Prevent the image becoming misshapen due to default flexbox layout.
+  flex-shrink: 0;
+}
+
+.controls {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 9px 84px;
+  overflow: hidden;
+  flex-wrap: wrap;
+  contain: content;
+
+  // Allow clicks to fall through to the pinch zoom area
+  pointer-events: none;
+  & > * {
+    pointer-events: auto;
+  }
+
+  @media (min-width: 860px) {
+    padding: 9px;
+    top: auto;
+    left: 320px;
+    right: 320px;
+    bottom: 0;
+    flex-wrap: wrap-reverse;
+  }
+}
+
+.zoom-controls {
+  display: flex;
+
+  & :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+  & :not(:last-child) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.button,
+.zoom {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 4px;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 5px;
+  line-height: 1;
+  white-space: nowrap;
+  height: 36px;
+  padding: 0 8px;
+  cursor: pointer;
+
+  @media (min-width: 600px) {
+    height: 48px;
+    padding: 0 16px;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--button-fg);
+    outline: none;
+    z-index: 1;
+  }
+}
+
+.button {
+  color: var(--button-fg);
+
+  &:hover {
+    background-color: #eee;
+  }
+
+  &.active {
+    background: #34B9EB;
+    color: #fff;
+
+    &:hover {
+      background: #32a3ce;
+    }
+  }
+}
+
+.zoom {
+  color: #625E80;
+  cursor: text;
+  width: 6em;
+  font: inherit;
+  text-align: center;
+  justify-content: center;
+
+  &:focus {
+    box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
+  }
+}
+
+.zoom-value {
+  position: relative;
+  top: 1px;
+  margin: 0 3px 0 0;
+  color: #888;
+  border-bottom: 1px dashed #999;
+}
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 9px;
+}
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}

src_old/components/checkbox/index.tsx

@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { UncheckedIcon, CheckedIcon } from '../../lib/icons';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Checkbox extends Component<Props, State> {
+  render(props: Props) {
+    return (
+      <div class={style.checkbox}>
+        {props.checked ? (
+          <CheckedIcon class={`${style.icon} ${style.checked}`} />
+        ) : (
+          <UncheckedIcon class={style.icon} />
+        )}
+        <input class={style.realCheckbox} type="checkbox" {...props} />
+      </div>
+    );
+  }
+}

src_old/components/checkbox/style.scss

@@ -0,0 +1,22 @@
+.checkbox {
+  display: inline-block;
+  position: relative;
+  --size: 17px;
+}
+
+.real-checkbox {
+  top: 0;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.icon {
+  display: block;
+  width: var(--size);
+  height: var(--size);
+}
+
+.checked {
+  fill: #34B9EB;
+}

src_old/components/compress/custom-els/MultiPanel/index.ts

@@ -0,0 +1,320 @@
+import * as style from './styles.css';
+import { transitionHeight } from '../../../../lib/util';
+
+interface CloseAllOptions {
+  exceptFirst?: boolean;
+}
+
+const openOneOnlyAttr = 'open-one-only';
+
+function getClosestHeading(el: Element): HTMLElement | undefined {
+  // Look for the child of multi-panel, but stop at interactive elements like links & buttons
+  const closestEl = el.closest('multi-panel > *, a, button');
+  if (closestEl && closestEl.classList.contains(style.panelHeading)) {
+    return closestEl as HTMLElement;
+  }
+  return undefined;
+}
+
+async function close(heading: HTMLElement) {
+  const content = heading.nextElementSibling as HTMLElement;
+
+  // if there is no content, nothing to expand
+  if (!content) return;
+
+  const from = content.getBoundingClientRect().height;
+
+  heading.removeAttribute('content-expanded');
+  content.setAttribute('aria-expanded', 'false');
+
+  // Wait a microtask so other calls to open/close can get the final sizes.
+  await null;
+
+  await transitionHeight(content, {
+    from,
+    to: 0,
+    duration: 300,
+  });
+
+  content.style.height = '';
+}
+
+async function open(heading: HTMLElement) {
+  const content = heading.nextElementSibling as HTMLElement;
+
+  // if there is no content, nothing to expand
+  if (!content) return;
+
+  const from = content.getBoundingClientRect().height;
+
+  heading.setAttribute('content-expanded', '');
+  content.setAttribute('aria-expanded', 'true');
+
+  const to = content.getBoundingClientRect().height;
+
+  // Wait a microtask so other calls to open/close can get the final sizes.
+  await null;
+
+  await transitionHeight(content, {
+    from,
+    to,
+    duration: 300,
+  });
+
+  content.style.height = '';
+}
+
+/**
+ * A multi-panel view that the user can add any number of 'panels'.
+ * 'a panel' consists of two elements. Even index element becomes heading,
+ * and odd index element becomes the expandable content.
+ */
+export default class MultiPanel extends HTMLElement {
+  static get observedAttributes() {
+    return [openOneOnlyAttr];
+  }
+
+  constructor() {
+    super();
+
+    // add EventListeners
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKeyDown);
+
+    // Watch for children changes.
+    new MutationObserver(() => this._childrenChange()).observe(this, {
+      childList: true,
+    });
+  }
+
+  connectedCallback() {
+    this._childrenChange();
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ) {
+    if (name === openOneOnlyAttr && newValue === null) {
+      this._closeAll({ exceptFirst: true });
+    }
+  }
+
+  // Click event handler
+  private _onClick(event: MouseEvent) {
+    const el = event.target as HTMLElement;
+    const heading = getClosestHeading(el);
+    if (!heading) return;
+    this._toggle(heading);
+  }
+
+  // KeyDown event handler
+  private _onKeyDown(event: KeyboardEvent) {
+    const selectedEl = document.activeElement!;
+    const heading = getClosestHeading(selectedEl);
+
+    // if keydown event is not on heading element, ignore
+    if (!heading) return;
+
+    // if something inside of heading has focus, ignore
+    if (selectedEl !== heading) return;
+
+    // don’t handle modifier shortcuts used by assistive technology.
+    if (event.altKey) return;
+
+    let newHeading: HTMLElement | undefined;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        newHeading = this._prevHeading();
+        break;
+
+      case 'ArrowRight':
+      case 'ArrowDown':
+        newHeading = this._nextHeading();
+        break;
+
+      case 'Home':
+        newHeading = this._firstHeading();
+        break;
+
+      case 'End':
+        newHeading = this._lastHeading();
+        break;
+
+      // this has 3 cases listed to support IEs and FF before 37
+      case 'Enter':
+      case ' ':
+      case 'Spacebar':
+        this._toggle(heading);
+        break;
+
+      // Any other key press is ignored and passed back to the browser.
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    if (newHeading) {
+      selectedEl.setAttribute('tabindex', '-1');
+      newHeading.setAttribute('tabindex', '0');
+      newHeading.focus();
+    }
+  }
+
+  private _toggle(heading: HTMLElement) {
+    if (!heading) return;
+
+    // toggle expanded and aria-expanded attributes
+    if (heading.hasAttribute('content-expanded')) {
+      close(heading);
+    } else {
+      if (this.openOneOnly) this._closeAll();
+      open(heading);
+    }
+  }
+
+  private _closeAll(options: CloseAllOptions = {}): void {
+    const { exceptFirst = false } = options;
+    let els = [...this.children].filter((el) =>
+      el.matches('[content-expanded]'),
+    ) as HTMLElement[];
+
+    if (exceptFirst) {
+      els = els.slice(1);
+    }
+
+    for (const el of els) close(el);
+  }
+
+  // children of multi-panel should always be even number (heading/content pair)
+  private _childrenChange() {
+    let preserveTabIndex = false;
+    let heading = this.firstElementChild;
+
+    while (heading) {
+      const content = heading.nextElementSibling;
+      const randomId = Math.random().toString(36).substr(2, 9);
+
+      // if at the end of this loop, runout of element for content,
+      // it means it has odd number of elements. log error and set heading to end the loop.
+      if (!content) {
+        console.error(
+          '<multi-panel> requires an even number of element children.',
+        );
+        break;
+      }
+
+      // When odd number of elements were inserted in the middle,
+      // what was heading before may become content after the insertion.
+      // Remove classes and attributes to prepare for this change.
+      heading.classList.remove(style.panelContent);
+      content.classList.remove(style.panelHeading);
+      heading.removeAttribute('aria-expanded');
+      heading.removeAttribute('content-expanded');
+
+      // If appreciable, remove tabindex from content which used to be header.
+      content.removeAttribute('tabindex');
+
+      // Assign heading and content classes
+      heading.classList.add(style.panelHeading);
+      content.classList.add(style.panelContent);
+
+      // Assign ids and aria-X for heading/content pair.
+      heading.id = `panel-heading-${randomId}`;
+      heading.setAttribute('aria-controls', `panel-content-${randomId}`);
+      content.id = `panel-content-${randomId}`;
+      content.setAttribute('aria-labelledby', `panel-heading-${randomId}`);
+
+      // If tabindex 0 is assigned to a heading, flag to preserve tab index position.
+      // Otherwise, make sure tabindex -1 is set to heading elements.
+      if (heading.getAttribute('tabindex') === '0') {
+        preserveTabIndex = true;
+      } else {
+        heading.setAttribute('tabindex', '-1');
+      }
+
+      // It's possible that the heading & content expanded attributes are now out of sync. Resync
+      // them using the heading as the source of truth.
+      content.setAttribute(
+        'aria-expanded',
+        heading.hasAttribute('content-expanded') ? 'true' : 'false',
+      );
+
+      // next sibling of content = next heading
+      heading = content.nextElementSibling;
+    }
+
+    // if no flag, make 1st heading as tabindex 0 (otherwise keep previous tab index position).
+    if (!preserveTabIndex && this.firstElementChild) {
+      this.firstElementChild.setAttribute('tabindex', '0');
+    }
+
+    // In case we're openOneOnly, and an additional open item has been added:
+    if (this.openOneOnly) this._closeAll({ exceptFirst: true });
+  }
+
+  // returns heading that is before currently selected one.
+  private _prevHeading() {
+    // activeElement would be the currently selected heading
+    // 2 elements before that would be the previous heading unless it is the first element.
+    if (this.firstElementChild === document.activeElement) {
+      return this.firstElementChild as HTMLElement;
+    }
+    // previous Element of active Element is previous Content,
+    // previous Element of previous Content is previousHeading
+    const previousContent = document.activeElement!.previousElementSibling;
+    if (previousContent) {
+      return previousContent.previousElementSibling as HTMLElement;
+    }
+  }
+
+  // returns heading that is after currently selected one.
+  private _nextHeading() {
+    // activeElement would be the currently selected heading
+    // 2 elemements after that would be the next heading.
+    const nextContent = document.activeElement!.nextElementSibling;
+    if (nextContent) {
+      return nextContent.nextElementSibling as HTMLElement;
+    }
+  }
+
+  // returns first heading in multi-panel.
+  private _firstHeading() {
+    // first element is always first heading
+    return this.firstElementChild as HTMLElement;
+  }
+
+  // returns last heading in multi-panel.
+  private _lastHeading() {
+    // if the last element is heading, return last element
+    const lastEl = this.lastElementChild as HTMLElement;
+    if (lastEl && lastEl.classList.contains(style.panelHeading)) {
+      return lastEl;
+    }
+    // otherwise return 2nd from the last
+    const lastContent = this.lastElementChild;
+    if (lastContent) {
+      return lastContent.previousElementSibling as HTMLElement;
+    }
+  }
+
+  /**
+   * If true, only one panel can be open at once. When one opens, others close.
+   */
+  get openOneOnly() {
+    return this.hasAttribute(openOneOnlyAttr);
+  }
+
+  set openOneOnly(val: boolean) {
+    if (val) {
+      this.setAttribute(openOneOnlyAttr, '');
+    } else {
+      this.removeAttribute(openOneOnlyAttr);
+    }
+  }
+}
+
+customElements.define('multi-panel', MultiPanel);

src_old/components/compress/custom-els/MultiPanel/missing-types.d.ts

@@ -0,0 +1,9 @@
+interface MultiPanelAttributes extends JSX.HTMLAttributes {
+  'open-one-only'?: boolean;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'multi-panel': MultiPanelAttributes;
+  }
+}

src_old/components/compress/custom-els/MultiPanel/styles.css

@@ -0,0 +1,10 @@
+.panel-heading {
+  background: gray;
+}
+.panel-content {
+  height: 0px;
+  overflow: auto;
+}
+.panel-content[aria-expanded='true'] {
+  height: auto;
+}

src_old/components/compress/index.tsx

@@ -0,0 +1,774 @@
+import { h, Component } from 'preact';
+
+import { bind, Fileish } from '../../lib/initial-util';
+import { blobToImg, drawableToImageData, blobToText } from '../../lib/util';
+import * as style from './style.scss';
+import Output from '../Output';
+import Options from '../Options';
+import ResultCache from './result-cache';
+import * as identity from '../../codecs/identity/encoder-meta';
+import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
+import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
+import * as webP from '../../codecs/webp/encoder-meta';
+import * as avif from '../../codecs/avif/encoder-meta';
+import * as browserPNG from '../../codecs/browser-png/encoder-meta';
+import * as browserJPEG from '../../codecs/browser-jpeg/encoder-meta';
+import * as browserWebP from '../../codecs/browser-webp/encoder-meta';
+import * as browserGIF from '../../codecs/browser-gif/encoder-meta';
+import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
+import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
+import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
+import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
+import {
+  EncoderState,
+  EncoderType,
+  EncoderOptions,
+  encoderMap,
+} from '../../codecs/encoders';
+import {
+  PreprocessorState,
+  defaultPreprocessorState,
+} from '../../codecs/preprocessors';
+import { decodeImage } from '../../codecs/decoders';
+import { cleanMerge, cleanSet } from '../../lib/clean-modify';
+import Processor from '../../codecs/processor';
+import {
+  BrowserResizeOptions,
+  isWorkerOptions as isWorkerResizeOptions,
+  isHqx,
+  WorkerResizeOptions,
+} from '../../codecs/resize/processor-meta';
+import './custom-els/MultiPanel';
+import Results from '../results';
+import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
+import SnackBarElement from '../../lib/SnackBar';
+import {
+  InputProcessorState,
+  defaultInputProcessorState,
+} from '../../codecs/input-processors';
+
+export interface SourceImage {
+  file: File | Fileish;
+  decoded: ImageData;
+  processed: ImageData;
+  vectorImage?: HTMLImageElement;
+  inputProcessorState: InputProcessorState;
+}
+
+interface SideSettings {
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
+}
+
+interface Side {
+  preprocessed?: ImageData;
+  file?: Fileish;
+  downloadUrl?: string;
+  data?: ImageData;
+  latestSettings: SideSettings;
+  encodedSettings?: SideSettings;
+  loading: boolean;
+  /** Counter of the latest bmp currently encoding */
+  loadingCounter: number;
+  /** Counter of the latest bmp encoded */
+  loadedCounter: number;
+}
+
+interface Props {
+  file: File | Fileish;
+  showSnack: SnackBarElement['showSnackbar'];
+  onBack: () => void;
+}
+
+interface State {
+  source?: SourceImage;
+  sides: [Side, Side];
+  /** Source image load */
+  loading: boolean;
+  loadingCounter: number;
+  error?: string;
+  mobileView: boolean;
+}
+
+interface UpdateImageOptions {
+  skipPreprocessing?: boolean;
+}
+
+async function processInput(
+  data: ImageData,
+  inputProcessData: InputProcessorState,
+  processor: Processor,
+) {
+  let processedData = data;
+
+  if (inputProcessData.rotate.rotate !== 0) {
+    processedData = await processor.rotate(
+      processedData,
+      inputProcessData.rotate,
+    );
+  }
+
+  return processedData;
+}
+
+async function preprocessImage(
+  source: SourceImage,
+  preprocessData: PreprocessorState,
+  processor: Processor,
+): Promise<ImageData> {
+  let result = source.processed;
+
+  if (preprocessData.resize.enabled) {
+    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
+      result = processor.vectorResize(
+        source.vectorImage,
+        preprocessData.resize,
+      );
+    } else if (isHqx(preprocessData.resize)) {
+      // Hqx can only do x2, x3 or x4.
+      result = await processor.workerResize(result, preprocessData.resize);
+      // If the target size is not a clean x2, x3 or x4, use Catmull-Rom
+      // for the remaining scaling.
+      const pixelOpts = { ...preprocessData.resize, method: 'catrom' };
+      result = await processor.workerResize(
+        result,
+        pixelOpts as WorkerResizeOptions,
+      );
+    } else if (isWorkerResizeOptions(preprocessData.resize)) {
+      result = await processor.workerResize(result, preprocessData.resize);
+    } else {
+      result = processor.resize(
+        result,
+        preprocessData.resize as BrowserResizeOptions,
+      );
+    }
+  }
+  if (preprocessData.quantizer.enabled) {
+    result = await processor.imageQuant(result, preprocessData.quantizer);
+  }
+  return result;
+}
+
+async function compressImage(
+  image: ImageData,
+  encodeData: EncoderState,
+  sourceFilename: string,
+  processor: Processor,
+): Promise<Fileish> {
+  const compressedData = await (() => {
+    switch (encodeData.type) {
+      case oxiPNG.type:
+        return processor.oxiPngEncode(image, encodeData.options);
+      case mozJPEG.type:
+        return processor.mozjpegEncode(image, encodeData.options);
+      case webP.type:
+        return processor.webpEncode(image, encodeData.options);
+      case avif.type:
+        return processor.avifEncode(image, encodeData.options);
+      case browserPNG.type:
+        return processor.browserPngEncode(image);
+      case browserJPEG.type:
+        return processor.browserJpegEncode(image, encodeData.options);
+      case browserWebP.type:
+        return processor.browserWebpEncode(image, encodeData.options);
+      case browserGIF.type:
+        return processor.browserGifEncode(image);
+      case browserTIFF.type:
+        return processor.browserTiffEncode(image);
+      case browserJP2.type:
+        return processor.browserJp2Encode(image);
+      case browserBMP.type:
+        return processor.browserBmpEncode(image);
+      case browserPDF.type:
+        return processor.browserPdfEncode(image);
+      default:
+        throw Error(`Unexpected encoder ${JSON.stringify(encodeData)}`);
+    }
+  })();
+
+  const encoder = encoderMap[encodeData.type];
+
+  return new Fileish(
+    [compressedData],
+    sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`),
+    { type: encoder.mimeType },
+  );
+}
+
+function stateForNewSourceData(state: State, newSource: SourceImage): State {
+  let newState = { ...state };
+
+  for (const i of [0, 1]) {
+    // Ditch previous encodings
+    const downloadUrl = state.sides[i].downloadUrl;
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+
+    newState = cleanMerge(state, `sides.${i}`, {
+      preprocessed: undefined,
+      file: undefined,
+      downloadUrl: undefined,
+      data: undefined,
+      encodedSettings: undefined,
+    });
+  }
+
+  return newState;
+}
+
+async function processSvg(blob: Blob): Promise<HTMLImageElement> {
+  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
+  // In Chrome it loads, but drawImage behaves weirdly.
+  // This function sets width/height if it isn't already set.
+  const parser = new DOMParser();
+  const text = await blobToText(blob);
+  const document = parser.parseFromString(text, 'image/svg+xml');
+  const svg = document.documentElement!;
+
+  if (svg.hasAttribute('width') && svg.hasAttribute('height')) {
+    return blobToImg(blob);
+  }
+
+  const viewBox = svg.getAttribute('viewBox');
+  if (viewBox === null) throw Error('SVG must have width/height or viewBox');
+
+  const viewboxParts = viewBox.split(/\s+/);
+  svg.setAttribute('width', viewboxParts[2]);
+  svg.setAttribute('height', viewboxParts[3]);
+
+  const serializer = new XMLSerializer();
+  const newSource = serializer.serializeToString(document);
+  return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
+}
+
+// These are only used in the mobile view
+const resultTitles = ['Top', 'Bottom'];
+// These are only used in the desktop view
+const buttonPositions = ['download-left', 'download-right'] as (
+  | 'download-left'
+  | 'download-right'
+)[];
+
+const originalDocumentTitle = document.title;
+
+export default class Compress extends Component<Props, State> {
+  widthQuery = window.matchMedia('(max-width: 599px)');
+
+  state: State = {
+    source: undefined,
+    loading: false,
+    loadingCounter: 0,
+    sides: [
+      {
+        latestSettings: {
+          preprocessorState: defaultPreprocessorState,
+          encoderState: {
+            type: identity.type,
+            options: identity.defaultOptions,
+          },
+        },
+        loadingCounter: 0,
+        loadedCounter: 0,
+        loading: false,
+      },
+      {
+        latestSettings: {
+          preprocessorState: defaultPreprocessorState,
+          encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
+        },
+        loadingCounter: 0,
+        loadedCounter: 0,
+        loading: false,
+      },
+    ],
+    mobileView: this.widthQuery.matches,
+  };
+
+  private readonly encodeCache = new ResultCache();
+  private readonly leftProcessor = new Processor();
+  private readonly rightProcessor = new Processor();
+  // For debouncing calls to updateImage for each side.
+  private readonly updateImageTimeoutIds: [number?, number?] = [
+    undefined,
+    undefined,
+  ];
+
+  constructor(props: Props) {
+    super(props);
+    this.widthQuery.addListener(this.onMobileWidthChange);
+    this.updateFile(props.file);
+
+    import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
+  }
+
+  @bind
+  private onMobileWidthChange() {
+    this.setState({ mobileView: this.widthQuery.matches });
+  }
+
+  private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
+    this.setState({
+      sides: cleanSet(
+        this.state.sides,
+        `${index}.latestSettings.encoderState`,
+        {
+          type: newType,
+          options: encoderMap[newType].defaultOptions,
+        },
+      ),
+    });
+  }
+
+  private onPreprocessorOptionsChange(
+    index: 0 | 1,
+    options: PreprocessorState,
+  ): void {
+    this.setState({
+      sides: cleanSet(
+        this.state.sides,
+        `${index}.latestSettings.preprocessorState`,
+        options,
+      ),
+    });
+  }
+
+  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
+    this.setState({
+      sides: cleanSet(
+        this.state.sides,
+        `${index}.latestSettings.encoderState.options`,
+        options,
+      ),
+    });
+  }
+
+  private updateDocumentTitle(filename: string = ''): void {
+    document.title = filename
+      ? `${filename} - ${originalDocumentTitle}`
+      : originalDocumentTitle;
+  }
+
+  componentWillReceiveProps(nextProps: Props): void {
+    if (nextProps.file !== this.props.file) {
+      this.updateFile(nextProps.file);
+    }
+  }
+
+  componentWillUnmount(): void {
+    this.updateDocumentTitle();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State): void {
+    const { source, sides } = this.state;
+
+    const sourceDataChanged =
+      // Has the source object become set/unset?
+      !!source !== !!prevState.source ||
+      // Or has the processed data changed?
+      (source &&
+        prevState.source &&
+        source.processed !== prevState.source.processed);
+
+    for (const [i, side] of sides.entries()) {
+      const prevSettings = prevState.sides[i].latestSettings;
+      const encoderChanged =
+        side.latestSettings.encoderState !== prevSettings.encoderState;
+      const preprocessorChanged =
+        side.latestSettings.preprocessorState !==
+        prevSettings.preprocessorState;
+
+      // The image only needs updated if the encoder/preprocessor settings have changed, or the
+      // source has changed.
+      if (sourceDataChanged || encoderChanged || preprocessorChanged) {
+        this.queueUpdateImage(i, {
+          skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
+        });
+      }
+    }
+  }
+
+  private async onCopyToOtherClick(index: 0 | 1) {
+    const otherIndex = (index + 1) % 2;
+    const oldSettings = this.state.sides[otherIndex];
+    const newSettings = { ...this.state.sides[index] };
+
+    // Create a new object URL for the new settings. This avoids both sides sharing a URL, which
+    // means it can be safely revoked without impacting the other side.
+    if (newSettings.file)
+      newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
+
+    this.setState({
+      sides: cleanSet(this.state.sides, otherIndex, newSettings),
+    });
+
+    const result = await this.props.showSnack('Settings copied across', {
+      timeout: 5000,
+      actions: ['undo', 'dismiss'],
+    });
+
+    if (result !== 'undo') return;
+
+    this.setState({
+      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
+    });
+  }
+
+  @bind
+  private async onInputProcessorChange(
+    options: InputProcessorState,
+  ): Promise<void> {
+    const source = this.state.source;
+    if (!source) return;
+
+    const oldRotate = source.inputProcessorState.rotate.rotate;
+    const newRotate = options.rotate.rotate;
+    const orientationChanged = oldRotate % 180 !== newRotate % 180;
+    const loadingCounter = this.state.loadingCounter + 1;
+    // Either processor is good enough here.
+    const processor = this.leftProcessor;
+
+    this.setState({
+      loadingCounter,
+      loading: true,
+      source: cleanSet(source, 'inputProcessorState', options),
+    });
+
+    // Abort any current encode jobs, as they're redundant now.
+    this.leftProcessor.abortCurrent();
+    this.rightProcessor.abortCurrent();
+
+    try {
+      const processed = await processInput(source.decoded, options, processor);
+
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+
+      let newState = { ...this.state, loading: false };
+      newState = cleanSet(newState, 'source.processed', processed);
+      newState = stateForNewSourceData(newState, newState.source!);
+
+      if (orientationChanged) {
+        // If orientation has changed, we should flip the resize values.
+        for (const i of [0, 1]) {
+          const resizeSettings =
+            newState.sides[i].latestSettings.preprocessorState.resize;
+          newState = cleanMerge(
+            newState,
+            `sides.${i}.latestSettings.preprocessorState.resize`,
+            {
+              width: resizeSettings.height,
+              height: resizeSettings.width,
+            },
+          );
+        }
+      }
+      this.setState(newState);
+    } catch (err) {
+      if (err.name === 'AbortError') return;
+      console.error(err);
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+      this.props.showSnack('Processing error');
+      this.setState({ loading: false });
+    }
+  }
+
+  @bind
+  private async updateFile(file: File | Fileish) {
+    const loadingCounter = this.state.loadingCounter + 1;
+    // Either processor is good enough here.
+    const processor = this.leftProcessor;
+
+    this.setState({ loadingCounter, loading: true });
+
+    // Abort any current encode jobs, as they're redundant now.
+    this.leftProcessor.abortCurrent();
+    this.rightProcessor.abortCurrent();
+
+    try {
+      let decoded: ImageData;
+      let vectorImage: HTMLImageElement | undefined;
+
+      // Special-case SVG. We need to avoid createImageBitmap because of
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=606319.
+      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
+      if (file.type.startsWith('image/svg+xml')) {
+        vectorImage = await processSvg(file);
+        decoded = drawableToImageData(vectorImage);
+      } else {
+        // Either processor is good enough here.
+        decoded = await decodeImage(file, processor);
+      }
+
+      const processed = await processInput(
+        decoded,
+        defaultInputProcessorState,
+        processor,
+      );
+
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+
+      let newState: State = {
+        ...this.state,
+        source: {
+          decoded,
+          file,
+          vectorImage,
+          processed,
+          inputProcessorState: defaultInputProcessorState,
+        },
+        loading: false,
+      };
+
+      newState = stateForNewSourceData(newState, newState.source!);
+
+      for (const i of [0, 1]) {
+        // Default resize values come from the image:
+        newState = cleanMerge(
+          newState,
+          `sides.${i}.latestSettings.preprocessorState.resize`,
+          {
+            width: processed.width,
+            height: processed.height,
+            method: vectorImage ? 'vector' : 'lanczos3',
+          },
+        );
+      }
+
+      this.updateDocumentTitle(file.name);
+      this.setState(newState);
+    } catch (err) {
+      if (err.name === 'AbortError') return;
+      console.error(err);
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+      this.props.showSnack('Invalid image');
+      this.setState({ loading: false });
+    }
+  }
+
+  /**
+   * Debounce the heavy lifting of updateImage.
+   * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
+   */
+  private queueUpdateImage(
+    index: number,
+    options: UpdateImageOptions = {},
+  ): void {
+    // Call updateImage after this delay, unless queueUpdateImage is called again, in which case the
+    // timeout is reset.
+    const delay = 100;
+
+    clearTimeout(this.updateImageTimeoutIds[index]);
+
+    this.updateImageTimeoutIds[index] = self.setTimeout(() => {
+      this.updateImage(index, options).catch((err) => {
+        console.error(err);
+      });
+    }, delay);
+  }
+
+  private async updateImage(
+    index: number,
+    options: UpdateImageOptions = {},
+  ): Promise<void> {
+    const { skipPreprocessing = false } = options;
+    const { source } = this.state;
+    if (!source) return;
+
+    // Each time we trigger an async encode, the counter changes.
+    const loadingCounter = this.state.sides[index].loadingCounter + 1;
+
+    let sides = cleanMerge(this.state.sides, index, {
+      loadingCounter,
+      loading: true,
+    });
+
+    this.setState({ sides });
+
+    const side = sides[index];
+    const settings = side.latestSettings;
+
+    let file: File | Fileish | undefined;
+    let preprocessed: ImageData | undefined;
+    let data: ImageData | undefined;
+    const cacheResult = this.encodeCache.match(
+      source.processed,
+      settings.preprocessorState,
+      settings.encoderState,
+    );
+    const processor = index === 0 ? this.leftProcessor : this.rightProcessor;
+
+    // Abort anything the processor is currently doing.
+    // Although the processor will abandon current tasks when a new one is called,
+    // we might not call another task here. Eg, we might get the result from the cache.
+    processor.abortCurrent();
+
+    if (cacheResult) {
+      ({ file, preprocessed, data } = cacheResult);
+    } else {
+      try {
+        // Special case for identity
+        if (settings.encoderState.type === identity.type) {
+          file = source.file;
+          data = source.processed;
+        } else {
+          preprocessed =
+            skipPreprocessing && side.preprocessed
+              ? side.preprocessed
+              : await preprocessImage(
+                  source,
+                  settings.preprocessorState,
+                  processor,
+                );
+
+          file = await compressImage(
+            preprocessed,
+            settings.encoderState,
+            source.file.name,
+            processor,
+          );
+          data = await decodeImage(file, processor);
+
+          this.encodeCache.add({
+            data,
+            preprocessed,
+            file,
+            sourceData: source.processed,
+            encoderState: settings.encoderState,
+            preprocessorState: settings.preprocessorState,
+          });
+        }
+      } catch (err) {
+        if (err.name === 'AbortError') return;
+        this.props.showSnack(
+          `Processing error (type=${settings.encoderState.type}): ${err}`,
+        );
+        throw err;
+      }
+    }
+
+    const latestData = this.state.sides[index];
+    // If a later encode has landed before this one, return.
+    if (loadingCounter < latestData.loadedCounter) {
+      return;
+    }
+
+    if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
+
+    sides = cleanMerge(this.state.sides, index, {
+      file,
+      data,
+      preprocessed,
+      downloadUrl: URL.createObjectURL(file),
+      loading: sides[index].loadingCounter !== loadingCounter,
+      loadedCounter: loadingCounter,
+      encodedSettings: settings,
+    });
+
+    this.setState({ sides });
+  }
+
+  render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
+    const [leftSide, rightSide] = sides;
+    const [leftImageData, rightImageData] = sides.map((i) => i.data);
+
+    const options = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
+      <Options
+        source={source}
+        mobileView={mobileView}
+        preprocessorState={side.latestSettings.preprocessorState}
+        encoderState={side.latestSettings.encoderState}
+        onEncoderTypeChange={this.onEncoderTypeChange.bind(
+          this,
+          index as 0 | 1,
+        )}
+        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(
+          this,
+          index as 0 | 1,
+        )}
+        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(
+          this,
+          index as 0 | 1,
+        )}
+      />
+    ));
+
+    const copyDirections = (mobileView
+      ? ['down', 'up']
+      : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
+
+    const results = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
+      <Results
+        downloadUrl={side.downloadUrl}
+        imageFile={side.file}
+        source={source}
+        loading={loading || side.loading}
+        copyDirection={copyDirections[index]}
+        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0 | 1)}
+        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
+      >
+        {!mobileView
+          ? null
+          : [
+              <ExpandIcon class={style.expandIcon} key="expand-icon" />,
+              `${resultTitles[index]} (${
+                encoderMap[side.latestSettings.encoderState.type].label
+              })`,
+            ]}
+      </Results>
+    ));
+
+    // For rendering, we ideally want the settings that were used to create the data, not the latest
+    // settings.
+    const leftDisplaySettings =
+      leftSide.encodedSettings || leftSide.latestSettings;
+    const rightDisplaySettings =
+      rightSide.encodedSettings || rightSide.latestSettings;
+    const leftImgContain =
+      leftDisplaySettings.preprocessorState.resize.enabled &&
+      leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
+    const rightImgContain =
+      rightDisplaySettings.preprocessorState.resize.enabled &&
+      rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
+
+    return (
+      <div class={style.compress}>
+        <Output
+          source={source}
+          mobileView={mobileView}
+          leftCompressed={leftImageData}
+          rightCompressed={rightImageData}
+          leftImgContain={leftImgContain}
+          rightImgContain={rightImgContain}
+          onBack={onBack}
+          inputProcessorState={source && source.inputProcessorState}
+          onInputProcessorChange={this.onInputProcessorChange}
+        />
+        {mobileView ? (
+          <div class={style.options}>
+            <multi-panel class={style.multiPanel} open-one-only>
+              {results[0]}
+              {options[0]}
+              {results[1]}
+              {options[1]}
+            </multi-panel>
+          </div>
+        ) : (
+          [
+            <div class={style.options} key="options0">
+              {options[0]}
+              {results[0]}
+            </div>,
+            <div class={style.options} key="options1">
+              {options[1]}
+              {results[1]}
+            </div>,
+          ]
+        )}
+      </div>
+    );
+  }
+}

src_old/components/compress/result-cache.ts

@@ -0,0 +1,78 @@
+import { EncoderState } from '../../codecs/encoders';
+import { Fileish } from '../../lib/initial-util';
+import { shallowEqual } from '../../lib/util';
+import { PreprocessorState } from '../../codecs/preprocessors';
+
+import * as identity from '../../codecs/identity/encoder-meta';
+
+interface CacheResult {
+  preprocessed: ImageData;
+  data: ImageData;
+  file: Fileish;
+}
+
+interface CacheEntry extends CacheResult {
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
+  sourceData: ImageData;
+}
+
+const SIZE = 5;
+
+export default class ResultCache {
+  private readonly _entries: CacheEntry[] = [];
+
+  add(entry: CacheEntry) {
+    if (entry.encoderState.type === identity.type)
+      throw Error('Cannot cache identity encodes');
+    // Add the new entry to the start
+    this._entries.unshift(entry);
+    // Remove the last entry if we're now bigger than SIZE
+    if (this._entries.length > SIZE) this._entries.pop();
+  }
+
+  match(
+    sourceData: ImageData,
+    preprocessorState: PreprocessorState,
+    encoderState: EncoderState,
+  ): CacheResult | undefined {
+    const matchingIndex = this._entries.findIndex((entry) => {
+      // Check for quick exits:
+      if (entry.sourceData !== sourceData) return false;
+      if (entry.encoderState.type !== encoderState.type) return false;
+
+      // Check that each set of options in the preprocessor are the same
+      for (const prop in preprocessorState) {
+        if (
+          !shallowEqual(
+            (preprocessorState as any)[prop],
+            (entry.preprocessorState as any)[prop],
+          )
+        )
+          return false;
+      }
+
+      // Check detailed encoder options
+      if (!shallowEqual(encoderState.options, entry.encoderState.options))
+        return false;
+
+      return true;
+    });
+
+    if (matchingIndex === -1) return undefined;
+
+    const matchingEntry = this._entries[matchingIndex];
+
+    if (matchingIndex !== 0) {
+      // Move the matched result to 1st position (LRU)
+      this._entries.splice(matchingIndex, 1);
+      this._entries.unshift(matchingEntry);
+    }
+
+    return {
+      data: matchingEntry.data,
+      preprocessed: matchingEntry.preprocessed,
+      file: matchingEntry.file,
+    };
+  }
+}

src_old/components/compress/style.scss

@@ -0,0 +1,75 @@
+.compress {
+  width: 100%;
+  height: 100%;
+  contain: strict;
+  display: grid;
+  align-items: end;
+  align-content: end;
+  grid-template-rows: 1fr auto;
+
+  @media (min-width: 600px) {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 100%;
+  }
+}
+
+.options {
+  color: #fff;
+  opacity: 0.9;
+  font-size: 1.2rem;
+  display: flex;
+  flex-flow: column;
+  max-width: 400px;
+  margin: 0 auto;
+  width: calc(100% - 60px);
+  max-height: calc(100% - 104px);
+  overflow: hidden;
+
+  @media (min-width: 600px) {
+    max-height: calc(100% - 75px);
+    width: 300px;
+    margin: 0;
+  }
+
+  @media (min-width: 860px) {
+    max-height: calc(100% - 40px);
+  }
+}
+
+.multi-panel {
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  overflow: hidden;
+
+  // Reorder so headings appear after content:
+  & > :nth-child(1) {
+    order: 2;
+    margin-bottom: 10px;
+  }
+
+  & > :nth-child(2) {
+    order: 1;
+  }
+
+  & > :nth-child(3) {
+    order: 4;
+  }
+
+  & > :nth-child(4) {
+    order: 3;
+  }
+}
+
+.expand-icon {
+  transform: rotate(180deg);
+  margin-left: -12px;
+}
+
+[content-expanded] .expand-icon {
+  transform: none;
+}
+
+:focus .expand-icon {
+  fill: #34B9EB;
+}

src_old/components/custom-els/LoadingSpinner/index.ts

@@ -0,0 +1,62 @@
+import * as styles from './styles.css';
+
+/**
+ * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll
+ * spin. You can configure the following using CSS custom properties:
+ *
+ * --size: Size of the spinner element (it's always square). Default: 28px.
+ * --color: Color of the spinner. Default: #4285f4.
+ * --stroke-width: Width of the stroke of the spinner. Default: 3px.
+ * --delay: Once the spinner enters the DOM, how long until it shows. This prevents the spinner
+ *          appearing on the screen for short operations. Default: 300ms.
+ */
+export default class LoadingSpinner extends HTMLElement {
+  private _delayTimeout: number = 0;
+
+  constructor() {
+    super();
+
+    // Ideally we'd use shadow DOM here, but we're targeting browsers without shadow DOM support.
+    // You can't set attributes/content in a custom element constructor, so I'm waiting a microtask.
+    Promise.resolve().then(() => {
+      this.style.display = 'none';
+      this.innerHTML =
+        '' +
+        `<div class="${styles.spinnerContainer}">` +
+        `<div class="${styles.spinnerLayer}">` +
+        `<div class="${styles.spinnerCircleClipper} ${styles.spinnerLeft}">` +
+        `<div class="${styles.spinnerCircle}"></div>` +
+        '</div>' +
+        `<div class="${styles.spinnerGapPatch}">` +
+        `<div class="${styles.spinnerCircle}"></div>` +
+        '</div>' +
+        `<div class="${styles.spinnerCircleClipper} ${styles.spinnerRight}">` +
+        `<div class="${styles.spinnerCircle}"></div>` +
+        '</div>' +
+        '</div>' +
+        '</div>';
+    });
+  }
+
+  disconnectedCallback() {
+    this.style.display = 'none';
+    clearTimeout(this._delayTimeout);
+  }
+
+  connectedCallback() {
+    const delayStr = getComputedStyle(this).getPropertyValue('--delay').trim();
+    let delayNum = parseFloat(delayStr);
+
+    // If seconds…
+    if (/\ds$/.test(delayStr)) {
+      // Convert to ms.
+      delayNum *= 1000;
+    }
+
+    this._delayTimeout = self.setTimeout(() => {
+      this.style.display = '';
+    }, delayNum);
+  }
+}
+
+customElements.define('loading-spinner', LoadingSpinner);

src_old/components/custom-els/LoadingSpinner/missing-types.d.ts

@@ -0,0 +1,7 @@
+interface LoadingSpinner extends JSX.HTMLAttributes {}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'loading-spinner': LoadingSpinner;
+  }
+}

src_old/components/custom-els/LoadingSpinner/styles.css

@@ -0,0 +1,158 @@
+@keyframes spinner-left-spin {
+  from {
+    transform: rotate(130deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  to {
+    transform: rotate(130deg);
+  }
+}
+
+@keyframes spinner-right-spin {
+  from {
+    transform: rotate(-130deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+  to {
+    transform: rotate(-130deg);
+  }
+}
+
+@keyframes spinner-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes spinner-container-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-fill-unfill-rotate {
+  12.5% {
+    transform: rotate(135deg);
+  } /* 0.5 * ARCSIZE */
+  25% {
+    transform: rotate(270deg);
+  } /* 1   * ARCSIZE */
+  37.5% {
+    transform: rotate(405deg);
+  } /* 1.5 * ARCSIZE */
+  50% {
+    transform: rotate(540deg);
+  } /* 2   * ARCSIZE */
+  62.5% {
+    transform: rotate(675deg);
+  } /* 2.5 * ARCSIZE */
+  75% {
+    transform: rotate(810deg);
+  } /* 3   * ARCSIZE */
+  87.5% {
+    transform: rotate(945deg);
+  } /* 3.5 * ARCSIZE */
+  to {
+    transform: rotate(1080deg);
+  } /* 4   * ARCSIZE */
+}
+
+loading-spinner {
+  --size: 28px;
+  --color: #4285f4;
+  --stroke-width: 3px;
+  --delay: 300ms;
+
+  pointer-events: none;
+  display: inline-block;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  border-color: var(--color);
+}
+
+loading-spinner .spinner-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  height: 100%;
+  width: 200%;
+  border-width: var(--stroke-width);
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+}
+
+/*
+  Patch the gap that appear between the two adjacent div.circle-clipper while the
+  spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+*/
+loading-spinner .spinner-gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+loading-spinner .spinner-gap-patch .spinner-circle {
+  width: 1000%;
+  left: -450%;
+}
+
+loading-spinner .spinner-circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+loading-spinner .spinner-left .spinner-circle {
+  border-right-color: transparent !important;
+  transform: rotate(129deg);
+  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+loading-spinner .spinner-right .spinner-circle {
+  left: -100%;
+  border-left-color: transparent !important;
+  transform: rotate(-129deg);
+  animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+    both;
+}
+
+loading-spinner.spinner-fadeout {
+  animation: spinner-fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+loading-spinner .spinner-container {
+  width: 100%;
+  height: 100%;
+  border-color: inherit;
+
+  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+  animation: spinner-container-rotate 1568ms linear infinite;
+}
+
+loading-spinner .spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-color: inherit;
+  /* durations: 4 * ARCTIME */
+  animation: spinner-fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
+    infinite both;
+}

src_old/components/expander/index.tsx

@@ -0,0 +1,78 @@
+import { h, Component, ComponentChild, ComponentChildren } from 'preact';
+import * as style from './style.scss';
+import { transitionHeight } from '../../lib/util';
+
+interface Props {
+  children: ComponentChildren;
+}
+interface State {
+  outgoingChildren: ComponentChild[];
+}
+
+export default class Expander extends Component<Props, State> {
+  state: State = {
+    outgoingChildren: [],
+  };
+  private lastElHeight: number = 0;
+
+  componentWillReceiveProps(nextProps: Props) {
+    const children = this.props.children as ComponentChild[];
+    const nextChildren = nextProps.children as ComponentChild[];
+
+    if (!nextChildren[0] && children[0]) {
+      // Cache the current children for the shrink animation.
+      this.setState({ outgoingChildren: children });
+    }
+  }
+
+  componentWillUpdate(nextProps: Props) {
+    const children = this.props.children as ComponentChild[];
+    const nextChildren = nextProps.children as ComponentChild[];
+
+    // Only interested if going from empty to not-empty, or not-empty to empty.
+    if ((children[0] && nextChildren[0]) || (!children[0] && !nextChildren[0]))
+      return;
+    this.lastElHeight = this.base!.getBoundingClientRect().height;
+  }
+
+  async componentDidUpdate(previousProps: Props) {
+    const children = this.props.children as ComponentChild[];
+    const previousChildren = previousProps.children as ComponentChild[];
+
+    // Only interested if going from empty to not-empty, or not-empty to empty.
+    if (
+      (children[0] && previousChildren[0]) ||
+      (!children[0] && !previousChildren[0])
+    )
+      return;
+
+    // What height do we need to transition to?
+    this.base!.style.height = '';
+    this.base!.style.overflow = 'hidden';
+    const newHeight = children[0]
+      ? this.base!.getBoundingClientRect().height
+      : 0;
+
+    await transitionHeight(this.base!, {
+      duration: 300,
+      from: this.lastElHeight,
+      to: newHeight,
+    });
+
+    // Unset the height & overflow, so element changes do the right thing.
+    this.base!.style.height = '';
+    this.base!.style.overflow = '';
+    if (this.state.outgoingChildren[0]) this.setState({ outgoingChildren: [] });
+  }
+
+  render(props: Props, { outgoingChildren }: State) {
+    const children = props.children as ComponentChild[];
+    const childrenExiting = !children[0] && outgoingChildren[0];
+
+    return (
+      <div class={childrenExiting ? style.childrenExiting : ''}>
+        {children[0] ? children : outgoingChildren}
+      </div>
+    );
+  }
+}

src_old/components/expander/style.scss

@@ -0,0 +1,5 @@
+.children-exiting {
+  & > * {
+    pointer-events: none;
+  }
+}

src_old/components/intro/index.tsx

@@ -0,0 +1,260 @@
+import { h, Component } from 'preact';
+
+import { bind, linkRef, Fileish } from '../../lib/initial-util';
+import '../custom-els/LoadingSpinner';
+
+import logo from './imgs/logo.svg';
+import largePhoto from './imgs/demos/demo-large-photo.jpg';
+import artwork from './imgs/demos/demo-artwork.jpg';
+import deviceScreen from './imgs/demos/demo-device-screen.png';
+import largePhotoIcon from './imgs/demos/icon-demo-large-photo.jpg';
+import artworkIcon from './imgs/demos/icon-demo-artwork.jpg';
+import deviceScreenIcon from './imgs/demos/icon-demo-device-screen.jpg';
+import logoIcon from './imgs/demos/icon-demo-logo.png';
+import * as style from './style.scss';
+import SnackBarElement from '../../lib/SnackBar';
+
+const demos = [
+  {
+    description: 'Large photo (2.8mb)',
+    filename: 'photo.jpg',
+    url: largePhoto,
+    iconUrl: largePhotoIcon,
+  },
+  {
+    description: 'Artwork (2.9mb)',
+    filename: 'art.jpg',
+    url: artwork,
+    iconUrl: artworkIcon,
+  },
+  {
+    description: 'Device screen (1.6mb)',
+    filename: 'pixel3.png',
+    url: deviceScreen,
+    iconUrl: deviceScreenIcon,
+  },
+  {
+    description: 'SVG icon (13k)',
+    filename: 'squoosh.svg',
+    url: logo,
+    iconUrl: logoIcon,
+  },
+];
+
+const installButtonSource = 'introInstallButton-Purple';
+
+interface Props {
+  onFile: (file: File | Fileish) => void;
+  showSnack: SnackBarElement['showSnackbar'];
+}
+interface State {
+  fetchingDemoIndex?: number;
+  beforeInstallEvent?: BeforeInstallPromptEvent;
+}
+
+export default class Intro extends Component<Props, State> {
+  state: State = {};
+  private fileInput?: HTMLInputElement;
+  private installingViaButton = false;
+
+  constructor() {
+    super();
+
+    // Listen for beforeinstallprompt events, indicating Squoosh is installable.
+    window.addEventListener(
+      'beforeinstallprompt',
+      this.onBeforeInstallPromptEvent,
+    );
+
+    // Listen for the appinstalled event, indicating Squoosh has been installed.
+    window.addEventListener('appinstalled', this.onAppInstalled);
+  }
+
+  @bind
+  private resetFileInput() {
+    this.fileInput!.value = '';
+  }
+
+  @bind
+  private onFileChange(event: Event): void {
+    const fileInput = event.target as HTMLInputElement;
+    const file = fileInput.files && fileInput.files[0];
+    if (!file) return;
+    this.resetFileInput();
+    this.props.onFile(file);
+  }
+
+  @bind
+  private onButtonClick() {
+    this.fileInput!.click();
+  }
+
+  @bind
+  private async onDemoClick(index: number, event: Event) {
+    try {
+      this.setState({ fetchingDemoIndex: index });
+      const demo = demos[index];
+      const blob = await fetch(demo.url).then((r) => r.blob());
+
+      // Firefox doesn't like content types like 'image/png; charset=UTF-8', which Webpack's dev
+      // server returns. https://bugzilla.mozilla.org/show_bug.cgi?id=1497925.
+      const type = /[^;]*/.exec(blob.type)![0];
+      const file = new Fileish([blob], demo.filename, { type });
+      this.props.onFile(file);
+    } catch (err) {
+      this.setState({ fetchingDemoIndex: undefined });
+      this.props.showSnack("Couldn't fetch demo image");
+    }
+  }
+
+  @bind
+  private onBeforeInstallPromptEvent(event: BeforeInstallPromptEvent) {
+    // Don't show the mini-infobar on mobile
+    event.preventDefault();
+
+    // Save the beforeinstallprompt event so it can be called later.
+    this.setState({ beforeInstallEvent: event });
+
+    // Log the event.
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-shown',
+      nonInteraction: true,
+    };
+    ga('send', 'event', gaEventInfo);
+  }
+
+  @bind
+  private async onInstallClick(event: Event) {
+    // Get the deferred beforeinstallprompt event
+    const beforeInstallEvent = this.state.beforeInstallEvent;
+    // If there's no deferred prompt, bail.
+    if (!beforeInstallEvent) return;
+
+    this.installingViaButton = true;
+
+    // Show the browser install prompt
+    beforeInstallEvent.prompt();
+
+    // Wait for the user to accept or dismiss the install prompt
+    const { outcome } = await beforeInstallEvent.userChoice;
+    // Send the analytics data
+    const gaEventInfo = {
+      eventCategory: 'pwa-install',
+      eventAction: 'promo-clicked',
+      eventLabel: installButtonSource,
+      eventValue: outcome === 'accepted' ? 1 : 0,
+    };
+    ga('send', 'event', gaEventInfo);
+
+    // If the prompt was dismissed, we aren't going to install via the button.
+    if (outcome === 'dismissed') {
+      this.installingViaButton = false;
+    }
+  }
+
+  @bind
+  private onAppInstalled() {
+    // We don't need the install button, if it's shown
+    this.setState({ beforeInstallEvent: undefined });
+
+    // Don't log analytics if page is not visible
+    if (document.hidden) {
+      return;
+    }
+
+    // Try to get the install, if it's not set, use 'browser'
+    const source = this.installingViaButton ? installButtonSource : 'browser';
+    ga('send', 'event', 'pwa-install', 'installed', source);
+
+    // Clear the install method property
+    this.installingViaButton = false;
+  }
+
+  render({}: Props, { fetchingDemoIndex, beforeInstallEvent }: State) {
+    return (
+      <div class={style.intro}>
+        <div>
+          <div class={style.logoSizer}>
+            <div class={style.logoContainer}>
+              <img
+                src={logo}
+                class={style.logo}
+                alt="Squoosh"
+                decoding="async"
+              />
+            </div>
+          </div>
+          <p class={style.openImageGuide}>
+            Drag &amp; drop or{' '}
+            <button class={style.selectButton} onClick={this.onButtonClick}>
+              select an image
+            </button>
+            <input
+              class={style.hide}
+              ref={linkRef(this, 'fileInput')}
+              type="file"
+              onChange={this.onFileChange}
+            />
+          </p>
+          <p>Or try one of these:</p>
+          <ul class={style.demos}>
+            {demos.map((demo, i) => (
+              <li key={demo.url} class={style.demoItem}>
+                <button
+                  class={style.demoButton}
+                  onClick={this.onDemoClick.bind(this, i)}
+                >
+                  <div class={style.demo}>
+                    <div class={style.demoImgContainer}>
+                      <div class={style.demoImgAspect}>
+                        <img
+                          class={style.demoIcon}
+                          src={demo.iconUrl}
+                          alt=""
+                          decoding="async"
+                        />
+                        {fetchingDemoIndex === i && (
+                          <div class={style.demoLoading}>
+                            <loading-spinner class={style.demoLoadingSpinner} />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div class={style.demoDescription}>{demo.description}</div>
+                  </div>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {beforeInstallEvent && (
+          <button
+            type="button"
+            class={style.installButton}
+            onClick={this.onInstallClick}
+          >
+            Install
+          </button>
+        )}
+        <ul class={style.relatedLinks}>
+          <li>
+            <a href="https://github.com/GoogleChromeLabs/squoosh/">
+              View the code
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/GoogleChromeLabs/squoosh/issues">
+              Report a bug
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy">
+              Privacy
+            </a>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}

src_old/components/intro/missing-types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
+ * before a user is prompted to "install" a web site to a home screen on mobile.
+ */
+interface BeforeInstallPromptEvent extends Event {
+  /**
+   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
+   * This is provided for user agents that want to present a choice of versions to the user such as,
+   * for example, "web" or "play" which would allow the user to chose between a web version or
+   * an Android version.
+   */
+  readonly platforms: Array<string>;
+
+  /**
+   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
+   */
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+
+  /**
+   * Allows a developer to show the install prompt at a time of their own choosing.
+   * This method returns a Promise.
+   */
+  prompt(): Promise<void>;
+}
+
+interface WindowEventMap {
+  beforeinstallprompt: BeforeInstallPromptEvent;
+}

src_old/components/intro/style.scss

@@ -0,0 +1,223 @@
+@font-face {
+  font-family: 'intro-text';
+  font-style: normal;
+  font-weight: 300;
+  font-display: block;
+  // This only contains the chars for "Drag & drop or"
+  src: url('data:font/woff2;base64,d09GMgABAAAAAAXcAA4AAAAACowAAAWJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbg2gcMAZgAGwRCAqIQIcnCxYAATYCJAMoBCAFgwAHIBvqCFEU84FMI2Xh/P3g+Tfn532yQ/IgYz4BrJyhtkkZwFBYAZ49sI63e5v/NnqzIfbADyE0qxOqK8ESLoNNdULHihxbW0W86/qHEk4wT/eHShPRZJYYqUGkQdLSWCeSemZBzwpKyX/LRoAhMEQhqCFBw5RHNCc4hbVn35FsxtTXVHYyo7miu5VN2AW1fwzVauRgXnIGo2IWsYdViUoLu6mms5VFAn+SeQ4eBazfj7QodrMt4oyQHaGADEPRpTbDqJaoTENNK6DpOralUszf6gI/QsAhWZSMKVOirikSJxZRLBVD0S4mB0kTBRwopjZ/mt/2/25+bcSipgiHRmwiFI1g+XhwlshyEAsbJzGiGH+U5whHNgiXooplafI1rMFbmIqjGAPhmcSkVFxeu9hw87aXsGyL+dPE05qUpK2WyaVQcZVW+aDmw3aalLJKNmQORcpZYtBIuTrncN4xXoVZY617TBSsx2T1DHgGU6u4etE04wha1GEwjVkEaDttOrl1FCOwUMxgHnuooJo62ukcWEuc1/aT+dZ8b142t5tbzc3mGnP1EJqVTEGMYTjG14YxtGEEG+0E2axhe6Oa1E8UrDHDFjhTRywYNWrU9JHTlw7RmaslkrrGcTJ+znW4EzzP0zovE4Z5d0hqVhBobftBIKkwL09SOv3hhCuv1Dp9taTeCJ2Mj3KDT8iDng5DkWzPw/UdP8idNDkMnUyOwEauwnYLQeLC7GskNe72QKe97AmuA42E5FjfyYTM+HTdQ+Xqb+q4JvptyKZN1w47qMMwL58fyKZM1U6NXgWlOFdxx7DpXHDTz4UB89WMK3HH3uY7mavFopGF+u36lGlqZsL4ugmbqvZxveycMO+a4uyN3o7GT2qdHpfr6W++kNTn1crdx7Z+FW7PfffTmfnXV/2ivsh5UX93zdlzct6QlSuHSumG3oGNNT9/m9yXnDcnKfsmDx8xUaoKi+uvGs99H2ieUJUg8bTnVwQcDd/SPKwYWDUv+QkpT6MulMrcPTXNWYnIowxvoiwnX+opTMkvzOMGgpNpqnK32CNVwCnassw0BwQwTa0rLS3m1DfIoxx5PIE8SvEmSk3pHSWZiRVKjOOQSylJSHGXkhT/u/tg/Vm9UZQcS59TGb1qjcuuT0925iaaU1vaWpZJM4ukqWWlrdWSIcVNlOImvnrzLn53UpnSLzbGT5lUlpTiKiPJFEmyqywFLtOhcaYJkWkaGe/oGBlnmiIiIiKYpqHxLmdaWg5JpxxHSXpajsuVlkPSvb1JelqOC0pubbAn2A2UsDdYmTmjvbVlgTRhVBSSxpbF1nZD+jvkUR4rcJeSFBp2d19SUsVW5DjkUkoSoITHJ7iJEpZnZaL4OiF7g92DN1mz8b1RiM9RDk9ps9pcanamlnj2ftqbJpHJ0wpkRn2+RJ6qsGflpYrPnxG6A4r9zqGY3qCcqDuhsWGQhoXpQ0663cWFM4qNR0Jxj1R0UBT36pahMneH4NYV27jElOeyAAAACACAABy4uvGyOsj21Y9h3gIA3PuxYAYAuC/7vftf7L+PXunMAQDwBQIAAAIA5vR/HwCvOQ//TzLL7cPIHUC0zMI5v7+tHiVfzWOeSrJKZbFabWGNSnJE+jmsnmTjTZm6kBi9r0aLgm8qNk6t67ATuPlEitG+g+E7in1GMYxCxmIF9YzNJK7lRoSPc6PCD+8fxhp+YjdttDNAJw3UUU83M1jFClaylkpkU08NVZqkh0oaaBLPnaCTNhqpoaok2UkPZqy/JyfpKnVLkhrq6KGZCjpZxTJWqN9uJofD5HGMzSXHLaVbOmuTSnOp6cTQgJlaB6oF7RIITul8N+1sYjnL6aJqqoZ2inaxDIY2s2zwlXUs5zj7OPJmAPao+ZhVHy0A') format('woff2');
+}
+
+@font-face {
+  font-family: 'intro-text';
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  // Only contains the chars for "select an image"
+  src: url('data:font/woff2;base64,d09GMgABAAAAAAXMAA4AAAAACwQAAAV5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbg1IcMAZgAGwRCAqJUId/CxoAATYCJAMwBCAFgnAHIBskCcjEh6dNff8Ou/9Tj9VZGnUhJeqFzWGiVVOkxkTthr9f6kWkRdsBbkIj3YuLaloFZWr7aBg22z7IOoWqBWCW5cZU3GBrh0n+dAcBYAUlzYHAzWTYchqKXEyAT0zOLIS1qqm+B8q2ur4OhEMy0PHHUH8KklaSr8T0mp/EU7kRvXlI1E09HXA1qLN8Djxa0AsSDOg3cJARb9mtQJoSK3gvEn372/gcAigg/gOnbsT/MYv491GTReW4rJC5LA+h5FFclF6QQgoZ5Kx7GbsuGeytUgFClkOomY2Gdake3m9HegkHieAx/a0hBTALsy4jvpxBcnFXUnjC+2ZS5zHnDeEaJVwi+ZWqzOm4Uvgy4k6kGv4kFDVkfjk1gkVRRkk2zlo42PBbRJmG30cClJQjak7BnfQqHza4ITKftQZ/ZMUaEiyy1+mYCh4clKhDA5rQglZ0oG9jw+qiNvT+SfxIXCeuFdeIq8VV4gpxyRaGOl0JiChiCocfc7e93DwZIPvWgPiZJLcJugxyjW7UQyl4TJk6dWqYU7Cn0WQiWnNJCdGeprqjW63fpVS3mKy4YGZ6I3ya4nbIVgM1mwkpNEBzixlNxfPmH7owvdE4973OM9quvk11dwvnzDUy/Zn5S5Ywpn/PeqXBQI2m4lna05CRtsI6+GIENjS9K4jWRHUGYA2ozdZm2Smmf0DI3aqpeNbsJfxe7YdFmcZAn5gXLCFa2/Umqiu017APFhMZ0rfQp4sJX0ZrJ+n9UtAljr5VYWb6oj1MrpvX3qe6u8WRJg0bj7aPkDOa7m+E0Oa9Y8eY/gbRbr+efH7hcO49bMd28fbDVHcUmm3XkozQGKjeBHSJ4TQnI879LIFmF2v/BJuEQlffJPfE9oKayS/PsPE44fvM4MsBESxbuEEV39d5pw6oW4vD6S1WQC3UpSbHNbK0Jikl0bphSs+0CGW8Ew4Kzw7zarmcVz873JHTFhKYay18R8vY0ozPiHPAGyROAqlW5fLj5+HbWBn9TpgekKsOy8N+4dlFfL9i/Nk3+gY1bwzZUAvLVNiFpvqHRenetSoVrgn2obGtPsltEVxEeHJAQFhyBIcHT9rDvTJm06e0TLgase2gd2RffGJNg0o1zrdRyi9s1bYE5bi85cK+o/nUwvBR5+jweEBaSMoCub29fEFISmib9Dn5yl5kVFpoGrPQSmZhafQ7WimttNCH7Cktohb6kFpoEfIsdDF7SgvZTbaY3mKFyLXQh+wpzWE3mUNQQkWnR+lgiW9Afkunej49Nz3sYlI8XFTRdkNhUR5d6h4oOpJc8OjcItMXVqoHW2fSW6ycWuiM8NDYoICouLAZ9BYrwwmhycvKlt4Q8hUlCV5nZ7vOm2ut2rizcFpuWpSrT3K1Z3xinbuHnXBTyGAljV/XzHZaNGu6y7vLDziMpIyUdOBBRXXlxznUQiOoheZsZk9njG8er1mNmz2eOCQ3x9BbLP+Zxt+VrbEz9aWxmimRvyl4/sumyoM/nw+LNzV4/uP0/9T/P5f08cvhl38USAS/xTYs2fL/VNFF0vd+SVsRB/khPwW4SCi5SHhx8fDgVPAiAqIJRQL/EuK5bsRzNnAiezD1i7u2VyHHAKRU+E2YUaA5DUsE2ZfbApAmsJcxjBwmQ2Xk4Y2BqZJ+oxSzsNEogz1O3/xkBMKEBHSiC8PoQStaoEIflPCHL/wQBCUKoUITlMhHP+olt5ojykUPOrEQTWgY+f449KMPKnSiB72jGrLQhEZO24925LtbkG5DndTkD2/4um+NQBEyUIJsRBxX24tcDGmbWtGJjq05jhzTaMgCcR+6EA4f+KAXDay5u6RsL7xJsm3w3mzvFvggB8nI/AYBdVnxNvx/2wA=') format('woff2');
+}
+
+@keyframes fade-in {
+  from { opacity: 0 }
+}
+
+.intro {
+  display: grid;
+  grid-template-rows: 1fr min-content;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.25);
+  text-align: center;
+  font-size: 2rem;
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+  padding: 20px 0 0;
+  height: 100%;
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  position: relative;
+}
+
+.logo-container {
+  position: relative;
+  padding-top: 100%;
+}
+
+.logo-sizer {
+  width: 90%;
+  max-width: 52vh;
+  margin: 0 auto;
+}
+
+.logo {
+  composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
+}
+
+.open-image-guide {
+  font: 300 11vw intro-text, sans-serif;
+  margin-bottom: 0;
+
+  @media (min-width: 460px) {
+    font-size: 50.6px;
+    padding: 0 40px;
+  }
+}
+
+.select-button {
+  composes: unbutton from '../../lib/util.scss';
+  font-weight: 500;
+  color: #5D509E;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+.hide {
+  display: none;
+}
+
+.demos {
+  display: block;
+  padding: 0;
+  border-top: 1px solid #e8e8e8;
+  margin: 0 auto;
+
+  @media (min-width: 400px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 580px) {
+    border-top: none;
+    width: 523px;
+  }
+
+  @media (min-width: 900px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    width: 773px;
+  }
+}
+
+.demo-item {
+  background: #fff;
+  display: flex;
+  border-bottom: 1px solid #e8e8e8;
+
+  @media (min-width: 580px) {
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    margin: 3px;
+  }
+}
+
+.demo-button {
+  composes: unbutton from '../../lib/util.scss';
+  flex: 1;
+
+  &:hover,
+  &:focus {
+    background: #f5f5f5;
+  }
+}
+
+.demo {
+  display: flex;
+  align-items: center;
+  padding: 7px;
+  font-size: 1.3rem;
+}
+
+.demo-img-container {
+  overflow: hidden;
+  display: block;
+  width: 47px;
+  background: #ccc;
+  border-radius: 3px;
+  flex: 0 0 auto;
+}
+
+.demo-img-aspect {
+  position: relative;
+  padding-top: 100%;
+
+}
+
+.demo-icon {
+  composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
+}
+
+.demo-description {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  flex: 1;
+  padding: 0 10px;
+}
+
+.demo-loading {
+  composes: abs-fill from '../../lib/util.scss';
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fade-in 300ms ease-in-out;
+}
+
+.demo-loading-spinner {
+  --color: #fff;
+}
+
+.install-button {
+  composes: unbutton from '../../lib/util.scss';
+
+  &:hover,
+  &:focus {
+    background: #504488;
+  }
+
+  background: #5D509E;
+  border: 1px solid #e8e8e8;
+  color: #fff;
+  padding: 14px;
+  font-size: 1.3rem;
+
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  animation: fade-in .3s ease-in-out;
+}
+
+@keyframes fade-in {
+	from { opacity: 0; }
+}
+
+.related-links {
+  display: flex;
+  padding: 0;
+  justify-content: center;
+  font-size: 1.3rem;
+
+  & li {
+    display: block;
+    border-left: 1px solid #000;
+    padding: 0 0.6em;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  & a:link {
+    color: #5D509E;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src_old/components/range/index.tsx

@@ -0,0 +1,52 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import RangeInputElement from '../../custom-els/RangeInput';
+import '../../custom-els/RangeInput';
+import { linkRef, bind } from '../../lib/initial-util';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Range extends Component<Props, State> {
+  rangeWc?: RangeInputElement;
+
+  @bind
+  private onTextInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const value = input.value.trim();
+    if (!value) return;
+    this.rangeWc!.value = input.value;
+    const { onInput } = this.props;
+    if (onInput) onInput(event);
+  }
+
+  render(props: Props) {
+    const { children, ...otherProps } = props;
+
+    const { value, min, max, step } = props;
+
+    return (
+      <label class={style.range}>
+        <span class={style.labelText}>{children}</span>
+        {/* On interaction, Safari gives focus to the first element in the label, so the
+        <range-input> is deliberately first. */}
+        <div class={style.rangeWcContainer}>
+          <range-input
+            ref={linkRef(this, 'rangeWc')}
+            class={style.rangeWc}
+            {...otherProps}
+          />
+        </div>
+        <input
+          type="number"
+          class={style.textInput}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onInput={this.onTextInput}
+        />
+      </label>
+    );
+  }
+}

src_old/components/range/style.scss

@@ -0,0 +1,55 @@
+.range {
+  position: relative;
+  z-index: 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.label-text {
+  color: #fff; /* TEMP */
+}
+
+.range-wc-container {
+  position: relative;
+  z-index: 1;
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+}
+
+.range-wc {
+  width: 100%;
+}
+
+.text-input {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+
+  text-align: right;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  border: none;
+  padding: 2px 5px;
+  box-sizing: border-box;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-position: under;
+  width: 48px;
+  position: relative;
+  left: 5px;
+
+  &:focus {
+    background: #fff;
+    color: #000;
+  }
+
+  // Remove the number controls
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}

src_old/components/results/FileSize.tsx

@@ -0,0 +1,43 @@
+import { h, Component } from 'preact';
+import * as prettyBytes from 'pretty-bytes';
+import * as style from './style.scss';
+
+interface Props {
+  blob: Blob;
+  compareTo?: Blob;
+}
+
+interface State {}
+
+export default class FileSize extends Component<Props, State> {
+  render({ blob, compareTo }: Props) {
+    let comparison: JSX.Element | undefined;
+
+    if (compareTo) {
+      const delta = blob.size / compareTo.size;
+      if (delta > 1) {
+        const percent = Math.round((delta - 1) * 100) + '%';
+        comparison = (
+          <span class={`${style.sizeDelta} ${style.sizeIncrease}`}>
+            {percent === '0%' ? 'slightly' : percent} bigger
+          </span>
+        );
+      } else if (delta < 1) {
+        const percent = Math.round((1 - delta) * 100) + '%';
+        comparison = (
+          <span class={`${style.sizeDelta} ${style.sizeDecrease}`}>
+            {percent === '0%' ? 'slightly' : percent} smaller
+          </span>
+        );
+      } else {
+        comparison = <span class={style.sizeDelta}>no change</span>;
+      }
+    }
+
+    return (
+      <span>
+        {prettyBytes(blob.size)} {comparison}
+      </span>
+    );
+  }
+}

src_old/components/results/index.tsx

@@ -0,0 +1,139 @@
+import { h, Component, ComponentChildren, ComponentChild } from 'preact';
+
+import * as style from './style.scss';
+import FileSize from './FileSize';
+import {
+  DownloadIcon,
+  CopyAcrossIcon,
+  CopyAcrossIconProps,
+} from '../../lib/icons';
+import '../custom-els/LoadingSpinner';
+import { SourceImage } from '../compress';
+import { Fileish, bind } from '../../lib/initial-util';
+
+interface Props {
+  loading: boolean;
+  source?: SourceImage;
+  imageFile?: Fileish;
+  downloadUrl?: string;
+  children: ComponentChildren;
+  copyDirection: CopyAcrossIconProps['copyDirection'];
+  buttonPosition: keyof typeof buttonPositionClass;
+  onCopyToOtherClick(): void;
+}
+
+interface State {
+  showLoadingState: boolean;
+}
+
+const buttonPositionClass = {
+  'stack-right': style.stackRight,
+  'download-right': style.downloadRight,
+  'download-left': style.downloadLeft,
+};
+
+const loadingReactionDelay = 500;
+
+export default class Results extends Component<Props, State> {
+  state: State = {
+    showLoadingState: false,
+  };
+
+  /** The timeout ID between entering the loading state, and changing UI */
+  private loadingTimeoutId: number = 0;
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (prevProps.loading && !this.props.loading) {
+      // Just stopped loading
+      clearTimeout(this.loadingTimeoutId);
+      this.setState({ showLoadingState: false });
+    } else if (!prevProps.loading && this.props.loading) {
+      // Just started loading
+      this.loadingTimeoutId = self.setTimeout(
+        () => this.setState({ showLoadingState: true }),
+        loadingReactionDelay,
+      );
+    }
+  }
+
+  @bind
+  private onCopyToOtherClick(event: Event) {
+    event.preventDefault();
+    this.props.onCopyToOtherClick();
+  }
+
+  @bind
+  onDownload() {
+    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
+    // avoid cases where exact image sizes leak something interesting about the user.
+    const before = Math.round(this.props.source!.file.size / 1024);
+    const after = Math.round(this.props.imageFile!.size / 1024);
+    const change = Math.round((after / before) * 1000);
+
+    ga('send', 'event', 'compression', 'download', {
+      metric1: before,
+      metric2: after,
+      metric3: change,
+    });
+  }
+
+  render(
+    {
+      source,
+      imageFile,
+      downloadUrl,
+      children,
+      copyDirection,
+      buttonPosition,
+    }: Props,
+    { showLoadingState }: State,
+  ) {
+    return (
+      <div class={`${style.results} ${buttonPositionClass[buttonPosition]}`}>
+        <div class={style.resultData}>
+          {(children as ComponentChild[])[0] ? (
+            <div class={style.resultTitle}>{children}</div>
+          ) : null}
+          {!imageFile || showLoadingState ? (
+            'Working…'
+          ) : (
+            <FileSize
+              blob={imageFile}
+              compareTo={
+                source && imageFile !== source.file ? source.file : undefined
+              }
+            />
+          )}
+        </div>
+
+        <button
+          class={style.copyToOther}
+          title="Copy settings to other side"
+          onClick={this.onCopyToOtherClick}
+        >
+          <CopyAcrossIcon
+            class={style.copyIcon}
+            copyDirection={copyDirection}
+          />
+        </button>
+
+        <div class={style.download}>
+          {downloadUrl && imageFile && (
+            <a
+              class={`${style.downloadLink} ${
+                showLoadingState ? style.downloadLinkDisable : ''
+              }`}
+              href={downloadUrl}
+              download={imageFile.name}
+              title="Download"
+              onClick={this.onDownload}
+            >
+              <DownloadIcon class={style.downloadIcon} />
+            </a>
+          )}
+          {showLoadingState && <loading-spinner class={style.spinner} />}
+        </div>
+      </div>
+    );
+  }
+}

src_old/components/results/style.scss

@@ -0,0 +1,131 @@
+@keyframes action-enter {
+  from {
+    transform: rotate(-90deg);
+    opacity: 0;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes action-leave {
+  from {
+    transform: rotate(0deg);
+    opacity: 1;
+    animation-timing-function: ease-out;
+  }
+}
+
+.results {
+  display: grid;
+  grid-template-columns: [text] 1fr [copy-button] auto [download-button] auto;
+  background: rgba(0, 0, 0, 0.9);
+  font-size: 1rem;
+
+  @media (min-width: 400px) {
+    font-size: 1.2rem;
+  }
+
+  @media (min-width: 600px) {
+    font-size: 1.4rem;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.result-data {
+  grid-row: 1;
+  grid-column: text;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.download-right {
+  grid-template-columns: [copy-button] auto [text] 1fr [download-button] auto;
+}
+
+.download-left {
+  grid-template-columns: [download-button] auto [text] 1fr [copy-button] auto;
+}
+
+.stack-right {
+  & .result-data {
+    padding: 0 15px;
+  }
+}
+
+.result-title {
+  display: flex;
+  align-items: center;
+  margin-right: 0.4em;
+}
+
+.size-delta {
+  font-size: 0.8em;
+  font-style: italic;
+  position: relative;
+  top: -1px;
+  margin-left: 0.3em;
+}
+
+.size-increase {
+  color: #e35050;
+}
+
+.size-decrease {
+  color: #50e3c2;
+}
+
+.download {
+  grid-row: 1;
+  grid-column: download-button;
+  background: #34B9EB;
+  --size: 38px;
+  width: var(--size);
+  height: var(--size);
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.download-link {
+  animation: action-enter 0.2s;
+  grid-area: 1/1;
+}
+
+.download-link-disable {
+  pointer-events: none;
+  opacity: 0;
+  transform: rotate(90deg);
+  animation: action-leave 0.2s;
+}
+
+.download-icon,
+.copy-icon {
+  color: #fff;
+  display: block;
+  --size: 24px;
+  width: var(--size);
+  height: var(--size);
+  padding: 7px;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
+}
+
+.spinner {
+  --color: #fff;
+  --delay: 0;
+  --size: 22px;
+  grid-area: 1/1;
+}
+
+.copy-to-other {
+  grid-row: 1;
+  grid-column: copy-button;
+  composes: unbutton from '../../lib/util.scss';
+  composes: download;
+
+  background: #656565;
+}

src_old/components/select/index.tsx

@@ -0,0 +1,25 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+
+interface Props extends JSX.HTMLAttributes {
+  large?: boolean;
+}
+interface State {}
+
+export default class Select extends Component<Props, State> {
+  render(props: Props) {
+    const { large, ...otherProps } = props;
+
+    return (
+      <div class={style.select}>
+        <select
+          class={`${style.builtinSelect} ${large ? style.large : ''}`}
+          {...otherProps}
+        />
+        <svg class={style.arrow} viewBox="0 0 10 5">
+          <path d="M0 0l5 5 5-5z" />
+        </svg>
+      </div>
+    );
+  }
+}

src_old/components/select/style.scss

@@ -0,0 +1,33 @@
+.select {
+  position: relative;
+}
+
+.builtin-select {
+  background: #2f2f2f;
+  border-radius: 4px;
+  font: inherit;
+  padding: 4px 25px 4px 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  color: #fff;
+  width: 100%;
+}
+
+.arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  fill: #fff;
+  width: 10px;
+}
+
+.large {
+  padding: 10px 35px 10px 10px;
+  background: #151515;
+
+  & .arrow {
+    right: 13px;
+  }
+}