Adds Bulk Processing Support

package.json

@@ -44,6 +44,7 @@
     "preact-render-to-string": "^5.1.11",
     "prettier": "^2.4.1",
     "rollup": "^2.38.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "serve": "^11.3.2",
     "typescript": "^4.4.4",
     "wasm-feature-detect": "^1.2.11",
@@ -53,5 +54,8 @@
     "*.{js,css,json,md,ts,tsx}": "prettier --write",
     "*.{c,h,cpp,hpp}": "clang-format -i",
     "*.rs": "rustfmt"
+  },
+  "dependencies": {
+    "fflate": "^0.8.2"
   }
 }

src/client/initial-app/App/index.tsx

@@ -25,7 +25,7 @@ interface Props {}
 
 interface State {
   awaitingShareTarget: boolean;
-  file?: File;
+  files: File[];
   isEditorOpen: Boolean;
   Compress?: typeof import('client/lazy-app/Compress').default;
 }
@@ -36,7 +36,7 @@ export default class App extends Component<Props, State> {
       'share-target',
     ),
     isEditorOpen: false,
-    file: undefined,
+    files: [],
     Compress: undefined,
   };
 
@@ -60,7 +60,7 @@ export default class App extends Component<Props, State> {
       // Remove the ?share-target from the URL
       history.replaceState('', '', '/');
       this.openEditor();
-      this.setState({ file, awaitingShareTarget: false });
+      this.setState({ files: [file], awaitingShareTarget: false });
     });
 
     // Since iOS 10, Apple tries to prevent disabling pinch-zoom. This is great in theory, but
@@ -76,14 +76,13 @@ export default class App extends Component<Props, State> {
 
   private onFileDrop = ({ files }: FileDropEvent) => {
     if (!files || files.length === 0) return;
-    const file = files[0];
     this.openEditor();
-    this.setState({ file });
+    this.setState({ files });
   };
 
-  private onIntroPickFile = (file: File) => {
+  private onIntroPickFile = (files: File[]) => {
     this.openEditor();
-    this.setState({ file });
+    this.setState({ files });
   };
 
   private showSnack = (
@@ -109,21 +108,25 @@ export default class App extends Component<Props, State> {
 
   render(
     {}: Props,
-    { file, isEditorOpen, Compress, awaitingShareTarget }: State,
+    { files, isEditorOpen, Compress, awaitingShareTarget }: State,
   ) {
     const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
 
     return (
       <div class={style.app}>
-        <file-drop onfiledrop={this.onFileDrop} class={style.drop}>
+        <file-drop onfiledrop={this.onFileDrop} class={style.drop} multiple>
           {showSpinner ? (
             <loading-spinner class={style.appLoader} />
           ) : isEditorOpen ? (
             Compress && (
-              <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+              <Compress
+                files={files}
+                showSnack={this.showSnack}
+                onBack={back}
+              />
             )
           ) : (
-            <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
+            <Intro onFiles={this.onIntroPickFile} showSnack={this.showSnack} />
           )}
           <snack-bar ref={linkRef(this, 'snackbar')} />
         </file-drop>

src/client/lazy-app/Compress/Output/index.tsx

@@ -1,26 +1,26 @@
-import { h, Component, Fragment } from 'preact';
-import type PinchZoom from './custom-els/PinchZoom';
-import type { ScaleToOpts } from './custom-els/PinchZoom';
-import './custom-els/PinchZoom';
-import './custom-els/TwoUp';
-import * as style from './style.css';
 import 'add-css:./style.css';
-import { shallowEqual, isSafari } from '../../util';
+import { drawDataToCanvas } from 'client/lazy-app/util/canvas';
+import { Component, Fragment, h, JSX } from 'preact';
+import { linkRef } from 'shared/prerendered-app/util';
+import type { SourceImage } from '../../Compress';
+import type { PreprocessorState } from '../../feature-meta';
 import {
-  ToggleAliasingIcon,
-  ToggleAliasingActiveIcon,
-  ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
-  ToggleBackgroundActiveIcon,
   RotateIcon,
+  ToggleAliasingActiveIcon,
+  ToggleAliasingIcon,
+  ToggleBackgroundActiveIcon,
+  ToggleBackgroundIcon,
 } from '../../icons';
-import { twoUpHandle } from './custom-els/TwoUp/styles.css';
-import type { PreprocessorState } from '../../feature-meta';
+import { isSafari, shallowEqual } from '../../util';
 import { cleanSet } from '../../util/clean-modify';
-import type { SourceImage } from '../../Compress';
-import { linkRef } from 'shared/prerendered-app/util';
-import { drawDataToCanvas } from 'client/lazy-app/util/canvas';
+import './custom-els/PinchZoom';
+import type PinchZoom from './custom-els/PinchZoom';
+import type { ScaleToOpts } from './custom-els/PinchZoom';
+import './custom-els/TwoUp';
+import { twoUpHandle } from './custom-els/TwoUp/styles.css';
+import * as style from './style.css';
 interface Props {
   source?: SourceImage;
   preprocessorState?: PreprocessorState;
@@ -30,6 +30,7 @@ interface Props {
   leftImgContain: boolean;
   rightImgContain: boolean;
   onPreprocessorChange: (newState: PreprocessorState) => void;
+  children?: JSX.Element;
 }
 
 interface State {
@@ -361,6 +362,9 @@ export default class Output extends Component<Props, State> {
               <AddIcon />
             </button>
           </div>
+          {this.props.children && (
+            <div class={style.buttonGroup}>{this.props.children}</div>
+          )}
           <div class={style.buttonGroup}>
             <button
               class={style.firstButton}

src/client/lazy-app/Compress/Results/index.tsx

@@ -123,11 +123,11 @@ export default class Results extends Component<Props, State> {
           class={showLoadingState ? style.downloadDisable : style.download}
           href={downloadUrl}
           download={imageFile ? imageFile.name : ''}
-          title="Download"
+          title="Download All"
           onClick={this.onDownload}
         >
           <svg class={style.downloadBlobs} viewBox="0 0 89.6 86.9">
-            <title>Download</title>
+            <title>Download All</title>
             <path d="M27.3 72c-8-4-15.6-12.3-16.9-21-1.2-8.7 4-17.8 10.5-26s14.4-15.6 24-16 21.2 6 28.6 16.5c7.4 10.5 10.8 25 6.6 34S64.1 71.8 54 73.6c-10.2 2-18.7 2.3-26.7-1.6z" />
             <path d="M19.8 24.8c4.3-7.8 13-15 21.8-15.7 8.7-.8 17.5 4.8 25.4 11.8 7.8 6.9 14.8 15.2 14.7 24.9s-7.1 20.7-18 27.6c-10.8 6.8-25.5 9.5-34.2 4.8S18.1 61.6 16.7 51.4c-1.3-10.3-1.3-18.8 3-26.6z" />
           </svg>