Move logic to builtinDecode

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

@@ -34,7 +34,6 @@ import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import { Arrow, ExpandIcon } from '../icons';
 import { generateCliInvocation } from '../util/cli';
-import * as WebCodecs from '../util/web-codecs';
 
 export type OutputType = EncoderType | 'identity';
 
@@ -111,14 +110,8 @@ async function decodeImage(
         return await workerBridge.wp2Decode(signal, blob);
       }
     }
-    // If none of those work, let’s see if Web Codecs API is available
-    if (await WebCodecs.isTypeSupported(mimeType)) {
-      try {
-        return await abortable(signal, WebCodecs.decode(blob, mimeType));
-      } catch (e) {}
-    }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await abortable(signal, builtinDecode(blob));
+    return await builtinDecode(signal, blob, mimeType);
   } catch (err) {
     if (err.name === 'AbortError') throw err;
     console.log(err);

src/client/lazy-app/util/index.ts

@@ -10,6 +10,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import * as WebCodecs from '../util/web-codecs';
+
 /**
  * Compare two objects, returning a boolean indicating if
  * they have the same properties and strictly equal values.
@@ -234,13 +237,27 @@ export function drawableToImageData(
   return ctx.getImageData(0, 0, width, height);
 }
 
-export async function builtinDecode(blob: Blob): Promise<ImageData> {
+export async function builtinDecode(
+  signal: AbortSignal,
+  blob: Blob,
+  mimeType: string,
+): Promise<ImageData> {
+  // If WebCodecs are supported, use that.
+  if (await WebCodecs.isTypeSupported(mimeType)) {
+    if (signal.aborted) return Promise.reject('Aborted');
+    try {
+      return await WebCodecs.decode(blob, mimeType);
+    } catch (e) {}
+  }
+  if (signal.aborted) return Promise.reject('Aborted');
+
   // Prefer createImageBitmap as it's the off-thread option for Firefox.
   const drawable =
     'createImageBitmap' in self
       ? await createImageBitmap(blob)
       : await blobToImg(blob);
 
+  if (signal.aborted) return Promise.reject('Aborted');
   return drawableToImageData(drawable);
 }