Adding browser's webp encoder (#72)

* Adding WebP (without feature detect in place)

* Adding WebP check

* Remove unused import

src/components/app/index.tsx

@@ -12,7 +12,13 @@ import * as mozJPEG from '../../codecs/mozjpeg/encoder';
 import * as identity from '../../codecs/identity/encoder';
 import * as browserPNG from '../../codecs/browser-png/encoder';
 import * as browserJPEG from '../../codecs/browser-jpeg/encoder';
-import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
+import * as browserWebP from '../../codecs/browser-webp/encoder';
+import {
+    EncoderState,
+    EncoderType,
+    EncoderOptions,
+    encoderMap,
+} from '../../codecs/encoders';
 
 interface SourceImage {
   file: File;
@@ -54,7 +60,8 @@ async function compressImage(
       case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
       case browserPNG.type: return browserPNG.encode(source.data, encodeData.options);
       case browserJPEG.type: return browserJPEG.encode(source.data, encodeData.options);
-      default: throw Error(`Unexpected encoder name`);
+      case browserWebP.type: return browserWebP.encode(source.data, encodeData.options);
+      default: throw Error(`Unexpected encoder ${JSON.stringify(encodeData)}`);
     }
   })();
 

src/components/options/index.tsx

@@ -3,18 +3,28 @@ import * as style from './style.scss';
 import { bind } from '../../lib/util';
 import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
 import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
+import BrowserWebPEncoderOptions from '../../codecs/browser-webp/options';
 
-import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
-import { type as identityType } from '../../codecs/identity/encoder';
-import { type as browserPNGType } from '../../codecs/browser-png/encoder';
-import { type as browserJPEGType } from '../../codecs/browser-jpeg/encoder';
-import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
+import * as mozJPEG from '../../codecs/mozjpeg/encoder';
+import * as identity from '../../codecs/identity/encoder';
+import * as browserPNG from '../../codecs/browser-png/encoder';
+import * as browserJPEG from '../../codecs/browser-jpeg/encoder';
+import * as browserWebP from '../../codecs/browser-webp/encoder';
+import {
+    EncoderState,
+    EncoderType,
+    EncoderOptions,
+    encoders,
+    encodersSupported,
+    EncoderSupportMap,
+} from '../../codecs/encoders';
 
 const encoderOptionsComponentMap = {
-  [mozJPEGType]: MozJpegEncoderOptions,
-  [identityType]: undefined,
-  [browserPNGType]: undefined,
-  [browserJPEGType]: BrowserJPEGEncoderOptions,
+  [mozJPEG.type]: MozJpegEncoderOptions,
+  [identity.type]: undefined,
+  [browserPNG.type]: undefined,
+  [browserJPEG.type]: BrowserJPEGEncoderOptions,
+  [browserWebP.type]: BrowserWebPEncoderOptions,
 };
 
 interface Props {
@@ -24,11 +34,18 @@ interface Props {
   onOptionsChange(newOptions: EncoderOptions): void;
 }
 
-interface State {}
+interface State {
+  encoderSupportMap?: EncoderSupportMap;
+}
 
 export default class Options extends Component<Props, State> {
   typeSelect?: HTMLSelectElement;
 
+  constructor() {
+    super();
+    encodersSupported.then(encoderSupportMap => this.setState({ encoderSupportMap }));
+  }
+
   @bind
   onTypeChange(event: Event) {
     const el = event.currentTarget as HTMLSelectElement;
@@ -39,18 +56,22 @@ export default class Options extends Component<Props, State> {
     this.props.onTypeChange(type);
   }
 
-  render({ class: className, encoderState, onOptionsChange }: Props) {
+  render({ class: className, encoderState, onOptionsChange }: Props, { encoderSupportMap }: State) {
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
       <div class={`${style.options}${className ? (' ' + className) : ''}`}>
         <label>
           Mode:
-          <select value={encoderState.type} onChange={this.onTypeChange}>
-            {encoders.map(encoder => (
-              <option value={encoder.type}>{encoder.label}</option>
-            ))}
-          </select>
+          {encoderSupportMap ?
+            <select value={encoderState.type} onChange={this.onTypeChange}>
+              {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
+                <option value={encoder.type}>{encoder.label}</option>
+              ))}
+            </select>
+            :
+            <select><option>Loading…</option></select>
+          }
         </label>
         {EncoderOptionComponent &&
           <EncoderOptionComponent