From 4e7c29390690347b89076d0921a5ab808d615c4f Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 26 Sep 2022 17:13:33 +0200 Subject: [PATCH] remove eslint disable in favor of feature detection Early returns aren't supported yet unfortunately, otherwise this code would be cleaner https://github.com/amilajack/eslint-plugin-compat/issues/523 --- .../workers/image-bitmap-data-url-worker.ts | 84 ++++++++++--------- 1 file changed, 43 insertions(+), 41 deletions(-) diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts index 171e6f49ea..51e75dbe06 100644 --- a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts +++ b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts @@ -29,16 +29,18 @@ async function getTransparentBlobFor( dataURLOptions: DataURLOptions, ): Promise { const id = `${width}-${height}`; - if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!; - // offScreenCanvas will significantly increase the requirements for browser compatibility so that I disable this rule here. - // eslint-disable-next-line compat/compat - const offscreen = new OffscreenCanvas(width, height); - offscreen.getContext('2d'); // creates rendering context for `converToBlob` - const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while - const arrayBuffer = await blob.arrayBuffer(); - const base64 = encode(arrayBuffer); // cpu intensive - transparentBlobMap.set(id, base64); - return base64; + if ('OffscreenCanvas' in globalThis) { + if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!; + const offscreen = new OffscreenCanvas(width, height); + offscreen.getContext('2d'); // creates rendering context for `converToBlob` + const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while + const arrayBuffer = await blob.arrayBuffer(); + const base64 = encode(arrayBuffer); // cpu intensive + transparentBlobMap.set(id, base64); + return base64; + } else { + return ''; + } } // `as any` because: https://github.com/Microsoft/TypeScript/issues/20595 @@ -46,42 +48,42 @@ const worker: ImageBitmapDataURLResponseWorker = self; // eslint-disable-next-line @typescript-eslint/no-misused-promises worker.onmessage = async function (e) { - if (!('OffscreenCanvas' in globalThis)) - return worker.postMessage({ id: e.data.id }); + if ('OffscreenCanvas' in globalThis) { + const { id, bitmap, width, height, dataURLOptions } = e.data; - const { id, bitmap, width, height, dataURLOptions } = e.data; + const transparentBase64 = getTransparentBlobFor( + width, + height, + dataURLOptions, + ); - const transparentBase64 = getTransparentBlobFor( - width, - height, - dataURLOptions, - ); + const offscreen = new OffscreenCanvas(width, height); + const ctx = offscreen.getContext('2d')!; - // eslint-disable-next-line compat/compat - const offscreen = new OffscreenCanvas(width, height); - const ctx = offscreen.getContext('2d')!; + ctx.drawImage(bitmap, 0, 0); + bitmap.close(); + const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while + const type = blob.type; + const arrayBuffer = await blob.arrayBuffer(); + const base64 = encode(arrayBuffer); // cpu intensive - ctx.drawImage(bitmap, 0, 0); - bitmap.close(); - const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while - const type = blob.type; - const arrayBuffer = await blob.arrayBuffer(); - const base64 = encode(arrayBuffer); // cpu intensive + // on first try we should check if canvas is transparent, + // no need to save it's contents in that case + if (!lastBlobMap.has(id) && (await transparentBase64) === base64) { + lastBlobMap.set(id, base64); + return worker.postMessage({ id }); + } - // on first try we should check if canvas is transparent, - // no need to save it's contents in that case - if (!lastBlobMap.has(id) && (await transparentBase64) === base64) { + if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged + worker.postMessage({ + id, + type, + base64, + width, + height, + }); lastBlobMap.set(id, base64); - return worker.postMessage({ id }); + } else { + return worker.postMessage({ id: e.data.id }); } - - if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged - worker.postMessage({ - id, - type, - base64, - width, - height, - }); - lastBlobMap.set(id, base64); };