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/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,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') 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;
+    }
+  }
+}