From c417bd0a7ad034b9f9545f18678fb2259c96aabf Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.dev>
Date: Tue, 18 May 2021 20:02:43 +0100
Subject: [PATCH] Its working now

---
 src/client/lazy-app/util/index.ts             | 28 +++++++++---
 src/client/lazy-app/util/web-codecs/index.ts  |  4 +-
 .../util/web-codecs/missing-types.d.ts        | 43 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/client/lazy-app/util/index.ts b/src/client/lazy-app/util/index.ts
index 3c6dd6bc..85ed4c4b 100644
--- a/src/client/lazy-app/util/index.ts
+++ b/src/client/lazy-app/util/index.ts
@@ -192,17 +192,35 @@ interface DrawableToImageDataOptions {
   sh?: number;
 }
 
+function getWidth(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayWidth' in drawable) {
+    return drawable.displayWidth;
+  }
+  return drawable.width;
+}
+
+function getHeight(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayHeight' in drawable) {
+    return drawable.displayHeight;
+  }
+  return drawable.height;
+}
+
 export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement,
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = drawable.width,
-    height = drawable.height,
+    width = getWidth(drawable),
+    height = getHeight(drawable),
     sx = 0,
     sy = 0,
-    sw = drawable.width,
-    sh = drawable.height,
+    sw = getWidth(drawable),
+    sh = getHeight(drawable),
   } = opts;
 
   // Make canvas same size as image
diff --git a/src/client/lazy-app/util/web-codecs/index.ts b/src/client/lazy-app/util/web-codecs/index.ts
index 1d946a1f..c0c39291 100644
--- a/src/client/lazy-app/util/web-codecs/index.ts
+++ b/src/client/lazy-app/util/web-codecs/index.ts
@@ -21,6 +21,6 @@ export async function decode(
     // Non-obvious way to turn an Blob into a ReadableStream
     data: new Response(blob).body!,
   });
-  const result = await decoder.decode();
-  return drawableToImageData(result.image);
+  const { image } = await decoder.decode();
+  return drawableToImageData(image);
 }
diff --git a/src/client/lazy-app/util/web-codecs/missing-types.d.ts b/src/client/lazy-app/util/web-codecs/missing-types.d.ts
index e5e72cc1..30246cfe 100644
--- a/src/client/lazy-app/util/web-codecs/missing-types.d.ts
+++ b/src/client/lazy-app/util/web-codecs/missing-types.d.ts
@@ -18,8 +18,47 @@ interface ImageDecodeResult {
   complete: boolean;
 }
 
-// Absolutely not correct, but it’s all we need and I’m lazy.
-type VideoFrame = ImageBitmap;
+// I didn’t do all the types because the class is kinda complex.
+// I focused on what we need.
+declare class VideoFrame {
+  codedWidth: number;
+  codedHeight: number;
+  cropLeft: number;
+  cropTop: number;
+  cropWidth: number;
+  cropHeight: number;
+  displayWidth: number;
+  displayHeight: number;
+
+  clone(): VideoFrame;
+  close(): void;
+}
+
+interface CanvasDrawImage {
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    dx: number,
+    dy: number,
+  ): void;
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ): void;
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ): void;
+}
 
 declare class ImageDecoder {
   static isTypeSupported(type: string): Promise<boolean>;