1.3.0

* Add basic history handling (#288)

* Move history management to Compress component

* Remove unused pathname property from history

* Rename history listener functions

* Use history.back instead of history.replace

* Support going forward in history. Persist last selected file in runtime

* Add netlify redirects file

* Use 301 status code for redirect

* Cleanup _redirects file

* Use 200 status code for redirects

* Simplify onPopState function

* Always redirect to 301 with url rewrite

* Remove redundant history function

* Remove file check on render. Call openEditor synchronously

* Use pushState only if user is on the initial screen. Mount history listener in constructor

* Simplify openEditor condition

* Update early return condition

* Rolling abstractions back into the main component

_redirects.ejs

@@ -0,0 +1,2 @@
+/index.html / 301
+/* /index.html 301

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",

src/codecs/processor.ts

@@ -20,7 +20,7 @@ import * as browserPDF from './browser-pdf/encoder';
 type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
 
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 1000;
+const workerTimeout = 10000;
 
 interface ProcessingJobOptions {
   needsWorker?: boolean;

src/codecs/rotate/processor.ts

@@ -4,10 +4,6 @@ const bpp = 4;
 
 export function rotate(data: ImageData, opts: RotateOptions): ImageData {
   const { rotate } = opts;
-
-  // Early exit if there's no transform.
-  if (rotate === 0) return data;
-
   const flipDimensions = rotate % 180 !== 0;
   const { width: inputWidth, height: inputHeight } = data;
   const outputWidth = flipDimensions ? inputHeight : inputWidth;

src/components/App/index.tsx

@@ -9,6 +9,8 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';
 
+const ROUTE_EDITOR = '/editor';
+
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress',
@@ -18,15 +20,21 @@ const offlinerPromise = import(
   '../../lib/offliner',
 );
 
+function back() {
+  window.history.back();
+}
+
 interface Props {}
 
 interface State {
   file?: File | Fileish;
+  isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
 }
 
 export default class App extends Component<Props, State> {
   state: State = {
+    isEditorOpen: false,
     file: undefined,
     Compress: undefined,
   };
@@ -53,17 +61,20 @@ export default class App extends Component<Props, State> {
         window.STATE = this.state;
       };
     }
+
+    window.addEventListener('popstate', this.onPopState);
   }
 
   @bind
-  private onFileDrop(event: FileDropEvent) {
-    const { file } = event;
+  private onFileDrop({ file }: FileDropEvent) {
     if (!file) return;
+    this.openEditor();
     this.setState({ file });
   }
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
+    this.openEditor();
     this.setState({ file });
   }
 
@@ -74,18 +85,25 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  private onBack() {
-    this.setState({ file: undefined });
+  private onPopState() {
+    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
   }
 
-  render({}: Props, { file, Compress }: State) {
+  @bind
+  private openEditor() {
+    if (this.state.isEditorOpen) return;
+    history.pushState(null, '', ROUTE_EDITOR);
+    this.setState({ isEditorOpen: true });
+  }
+
+  render({}: Props, { file, isEditorOpen, Compress }: State) {
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {(!file)
+          {!isEditorOpen
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
+              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/Options/style.scss

@@ -43,6 +43,7 @@ $horizontalPadding: 15px;
 
 .text-field {
   background: #fff;
+  color: #000;
   font: inherit;
   border: none;
   padding: 2px 0 2px 10px;

src/components/Output/style.scss

@@ -36,6 +36,8 @@
   // 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 {

src/components/compress/index.tsx

@@ -85,12 +85,18 @@ interface UpdateImageOptions {
   skipPreprocessing?: boolean;
 }
 
-function processInput(
+async function processInput(
   data: ImageData,
   inputProcessData: InputProcessorState,
   processor: Processor,
 ) {
-  return processor.rotate(data, inputProcessData.rotate);
+  let processedData = data;
+
+  if (inputProcessData.rotate.rotate !== 0) {
+    processedData = await processor.rotate(processedData, inputProcessData.rotate);
+  }
+
+  return processedData;
 }
 
 async function preprocessImage(
@@ -154,7 +160,7 @@ function stateForNewSourceData(state: State, newSource: SourceImage): State {
   for (const i of [0, 1]) {
     // Ditch previous encodings
     const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
 
     newState = cleanMerge(state, `sides.${i}`, {
       preprocessed: undefined,
@@ -313,9 +319,14 @@ export default class Compress extends Component<Props, State> {
   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, this.state.sides[index]),
+      sides: cleanSet(this.state.sides, otherIndex, newSettings),
     });
 
     const result = await this.props.showSnack('Settings copied across', {

webpack.config.js

@@ -251,6 +251,11 @@ module.exports = async function (_, env) {
         filename: '_headers',
       }),
 
+      isProd && new AssetTemplatePlugin({
+        template: path.join(__dirname, '_redirects.ejs'),
+        filename: '_redirects',
+      }),
+
       new ScriptExtHtmlPlugin({
         inline: ['first']
       }),