Button to copy settings to the other side

global.d.ts

@@ -13,10 +13,6 @@ declare namespace JSX {
   interface IntrinsicElements { }
 }
 
-declare module 'preact-i18n';
-declare module 'preact-material-components-drawer';
-declare module 'material-radial-progress';
-
 declare module 'classnames' {
   export default function classnames(...args: any[]): string;
 }

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@types/node": "^9.6.23",
+    "@types/pretty-bytes": "^5.1.0",
     "@types/webassembly-js-api": "0.0.1",
     "babel-loader": "^7.1.5",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
@@ -62,15 +63,10 @@
     "webpack-plugin-replace": "^1.1.1"
   },
   "dependencies": {
-    "@types/filesize": "^3.6.0",
     "classnames": "^2.2.6",
     "comlink": "^3.0.3",
     "comlink-loader": "^1.0.0",
-    "filesize": "^3.6.1",
-    "material-components-web": "^0.32.0",
     "preact": "^8.2.9",
-    "preact-i18n": "^1.2.2",
-    "preact-material-components": "^1.4.7",
-    "preact-router": "^2.6.1"
+    "pretty-bytes": "^5.1.0"
   }
 }

src/components/App/index.tsx

@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
-import { partial } from 'filesize';
 
 import { bind, linkRef, bitmapToImageData } from '../../lib/util';
 import * as style from './style.scss';
 import Output from '../Output';
 import Options from '../Options';
 import { FileDropEvent } from './custom-els/FileDrop';
 import './custom-els/FileDrop';
+import ResultCache from './result-cache';
 
 import * as quantizer from '../../codecs/imagequant/quantizer';
 import * as mozJPEG from '../../codecs/mozjpeg/encoder';
@@ -37,7 +37,9 @@ import {
 import { decodeImage } from '../../codecs/decoders';
 import { cleanMerge, cleanSet } from '../../lib/clean-modify';
 
-interface SourceImage {
+type Orientation = 'horizontal' | 'vertical';
+
+export interface SourceImage {
   file: File;
   bmp: ImageBitmap;
   data: ImageData;
@@ -64,14 +66,13 @@ interface State {
   images: [EncodedImage, EncodedImage];
   loading: boolean;
   error?: string;
+  orientation: Orientation;
 }
 
 interface UpdateImageOptions {
   skipPreprocessing?: boolean;
 }
 
-const filesize = partial({});
-
 async function preprocessImage(
   source: SourceImage,
   preprocessData: PreprocessorState,
@@ -113,6 +114,8 @@ async function compressImage(
 }
 
 export default class App extends Component<Props, State> {
+  widthQuery = window.matchMedia('(min-width: 500px)');
+
   state: State = {
     loading: false,
     images: [
@@ -131,9 +134,11 @@ export default class App extends Component<Props, State> {
         loading: false,
       },
     ],
+    orientation: this.widthQuery.matches ? 'horizontal' : 'vertical',
   };
 
-  private snackbar?: SnackBarElement;
+  snackbar?: SnackBarElement;
+  readonly encodeCache = new ResultCache();
 
   constructor() {
     super();
@@ -146,6 +151,13 @@ export default class App extends Component<Props, State> {
         window.STATE = this.state;
       };
     }
+
+    this.widthQuery.addListener(this.onMobileWidthChange);
+  }
+
+  @bind
+  onMobileWidthChange() {
+    this.setState({ orientation: this.widthQuery.matches ? 'horizontal' : 'vertical' });
   }
 
   onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
@@ -206,6 +218,14 @@ export default class App extends Component<Props, State> {
     await this.updateFile(file);
   }
 
+  onCopyToOtherClick(index: 0 | 1) {
+    const otherIndex = (index + 1) % 2;
+
+    this.setState({
+      images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
+    });
+  }
+
   async updateFile(file: File) {
     this.setState({ loading: true });
     try {
@@ -242,19 +262,38 @@ export default class App extends Component<Props, State> {
     const image = images[index];
 
     let file;
-    try {
-      // Special case for identity
-      if (image.encoderState.type === identity.type) {
-        file = source.file;
-      } else {
-        if (!skipPreprocessing || !image.preprocessed) {
-          image.preprocessed = await preprocessImage(source, image.preprocessorState);
+    let preprocessed;
+    let bmp;
+    const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
+
+    if (cacheResult) {
+      ({ file, preprocessed, bmp } = cacheResult);
+    } else {
+      try {
+        // Special case for identity
+        if (image.encoderState.type === identity.type) {
+          ({ file, bmp } = source);
+        } else {
+          preprocessed = (skipPreprocessing && image.preprocessed)
+            ? image.preprocessed
+            : await preprocessImage(source, image.preprocessorState);
+
+          file = await compressImage(preprocessed, image.encoderState, source.file.name);
+          bmp = await decodeImage(file);
+
+          this.encodeCache.add({
+            source,
+            bmp,
+            preprocessed,
+            file,
+            encoderState: image.encoderState,
+            preprocessorState: image.preprocessorState,
+          });
         }
-        file = await compressImage(image.preprocessed, image.encoderState, source.file.name);
+      } catch (err) {
+        this.showError(`Processing error (type=${image.encoderState.type}): ${err}`);
+        throw err;
       }
-    } catch (err) {
-      this.showError(`Encoding error (type=${image.encoderState.type}): ${err}`);
-      throw err;
     }
 
     const latestImage = this.state.images[index];
@@ -263,17 +302,10 @@ export default class App extends Component<Props, State> {
       return;
     }
 
-    let bmp;
-    try {
-      bmp = await decodeImage(file);
-    } catch (err) {
-      this.setState({ error: `Encoding error (type=${image.encoderState.type}): ${err}` });
-      throw err;
-    }
-
-    images = cleanMerge(this.state.images, '' + index, {
+    images = cleanMerge(this.state.images, index, {
       file,
       bmp,
+      preprocessed,
       downloadUrl: URL.createObjectURL(file),
       loading: images[index].loadingCounter !== loadingCounter,
       loadedCounter: loadingCounter,
@@ -287,38 +319,38 @@ export default class App extends Component<Props, State> {
     this.snackbar.showSnackbar({ message: error });
   }
 
-  render({ }: Props, { loading, images }: State) {
+  render({ }: Props, { loading, images, source, orientation }: State) {
     const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
     const anyLoading = loading || images.some(image => image.loading);
 
     return (
       <file-drop accept="image/*" onfiledrop={this.onFileDrop}>
-        <div id="app" class={style.app}>
+        <div id="app" class={`${style.app} ${style[orientation]}`}>
           {(leftImageBmp && rightImageBmp) ? (
-            <Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
+            <Output
+              orientation={orientation}
+              leftImg={leftImageBmp}
+              rightImg={rightImageBmp}
+            />
           ) : (
-              <div class={style.welcome}>
-                <h1>Select an image</h1>
-                <input type="file" onChange={this.onFileChange} />
-              </div>
-            )}
-          {images.map((image, index) => (
-            <span class={index ? style.rightLabel : style.leftLabel}>
-              {encoderMap[image.encoderState.type].label}
-              {(image.downloadUrl && image.file) && (
-                <a href={image.downloadUrl} download={image.file.name}>🔻</a>
-              )}
-              {image.file && ` - ${filesize(image.file.size)}`}
-            </span>
-          ))}
-          {images.map((image, index) => (
+            <div class={style.welcome}>
+              <h1>Drop, paste or select an image</h1>
+              <input type="file" onChange={this.onFileChange} />
+            </div>
+          )}
+          {(leftImageBmp && rightImageBmp) && images.map((image, index) => (
             <Options
-              class={index ? style.rightOptions : style.leftOptions}
+              orientation={orientation}
+              imageIndex={index}
+              imageFile={image.file}
+              sourceImageFile={source && source.file}
+              downloadUrl={image.downloadUrl}
               preprocessorState={image.preprocessorState}
               encoderState={image.encoderState}
               onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
               onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
               onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
+              onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
             />
           ))}
           {anyLoading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}

src/components/App/result-cache.ts

@@ -0,0 +1,68 @@
+import { EncoderState } from '../../codecs/encoders';
+import { shallowEqual } from '../../lib/util';
+import { SourceImage } from '.';
+import { PreprocessorState } from '../../codecs/preprocessors';
+
+import * as identity from '../../codecs/identity/encoder';
+
+interface CacheResult {
+  preprocessed: ImageData;
+  bmp: ImageBitmap;
+  file: File;
+}
+
+interface CacheEntry extends CacheResult {
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
+  source: SourceImage;
+}
+
+const SIZE = 5;
+
+export default class ResultCache {
+  private readonly _entries: CacheEntry[] = [];
+  private _nextIndex: number = 0;
+
+  add(entry: CacheEntry) {
+    if (entry.encoderState.type === identity.type) throw Error('Cannot cache identity encodes');
+    this._entries[this._nextIndex] = entry;
+    this._nextIndex = (this._nextIndex + 1) % SIZE;
+  }
+
+  match(
+    source: SourceImage,
+    preprocessorState: PreprocessorState,
+    encoderState: EncoderState,
+  ): CacheResult | undefined {
+    const matchingEntry = this._entries.find((entry) => {
+      // Check for quick exits:
+      if (entry.source !== source) 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 (matchingEntry) {
+      return {
+        bmp: matchingEntry.bmp,
+        preprocessed: matchingEntry.preprocessed,
+        file: matchingEntry.file,
+      };
+    }
+
+    return undefined;
+  }
+}