From be897848feb3ce4f3847056c8020ba416d94d4e5 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sun, 12 May 2024 11:13:32 +0700
Subject: [PATCH] Cache screenshot's canvas context

---
 src/index.ts            |  1 +
 src/types/index.d.ts    |  1 +
 src/utils/screenshot.ts | 16 +++++++---------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 5e3d129..62bcd90 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -172,6 +172,7 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
     }
 
     STATES.isPlaying = false;
+    STATES.currentStream = {};
 
     // Stop MKB listeners
     getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index ea1e741..e78ec97 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -39,6 +39,7 @@ type BxStates = {
 
         $video: HTMLVideoElement | null;
         $screenshotCanvas: HTMLCanvasElement | null;
+        screenshotCanvasContext: CanvasRenderingContext2D | null;
 
         peerConnection: RTCPeerConnection;
         audioContext: AudioContext | null;
diff --git a/src/utils/screenshot.ts b/src/utils/screenshot.ts
index 58de110..dd298bc 100644
--- a/src/utils/screenshot.ts
+++ b/src/utils/screenshot.ts
@@ -3,12 +3,15 @@ import { CE } from "./html";
 
 
 export class Screenshot {
-    static #filters: string = '';
-
     static setup() {
         const currentStream = STATES.currentStream;
         if (!currentStream.$screenshotCanvas) {
             currentStream.$screenshotCanvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+
+            currentStream.screenshotCanvasContext = currentStream.$screenshotCanvas.getContext('2d', {
+                alpha: false,
+                willReadFrequently: false,
+            });
         }
         // document.documentElement.appendChild(currentStream.$screenshotCanvas!);
     }
@@ -22,7 +25,7 @@ export class Screenshot {
     }
 
     static updateCanvasFilters(filters: string) {
-        Screenshot.#filters = filters;
+        STATES.currentStream.screenshotCanvasContext && (STATES.currentStream.screenshotCanvasContext.filter = filters);
     }
 
     private static onAnimationEnd(e: Event) {
@@ -40,12 +43,7 @@ export class Screenshot {
         $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
         $video.parentElement?.classList.add('bx-taking-screenshot');
 
-        const canvasContext = $canvas.getContext('2d', {
-                alpha: false,
-                willReadFrequently: false,
-            })!;
-
-        canvasContext.filter = Screenshot.#filters;
+        const canvasContext = currentStream.screenshotCanvasContext!;
         canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
 
         // Get data URL and pass to parent app