Don't call animate() when hiding renderer

src/modules/player/webgl2-player.ts

@@ -73,7 +73,8 @@ export class WebGL2Player {
 
     setTargetFps(target: number) {
         this.targetFps = target;
-        this.frameInterval = Math.ceil(1000 / target);
+        this.lastFrameTime = 0;
+        this.frameInterval = target ? Math.floor(1000 / target) : 0;
     }
 
     getCanvas() {
@@ -94,6 +95,11 @@ export class WebGL2Player {
     }
 
     drawFrame() {
+        // Don't draw when FPS is 0
+        if (this.targetFps === 0) {
+            return;
+        }
+
         // Limit FPS
         if (this.targetFps < 60) {
             const currentTime = performance.now();
@@ -233,10 +239,10 @@ export class WebGL2Player {
         const gl = this.gl;
         if (gl) {
             gl.getExtension('WEBGL_lose_context')?.loseContext();
+            gl.useProgram(null);
 
             for (const resource of this.resources) {
                 if (resource instanceof WebGLProgram) {
-                    gl.useProgram(null);
                     gl.deleteProgram(resource);
                 } else if (resource instanceof WebGLShader) {
                     gl.deleteShader(resource);

src/modules/shortcuts/shortcut-renderer.ts

@@ -1,3 +1,7 @@
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { limitVideoPlayerFps } from "../stream/stream-settings-utils";
+
 export class RendererShortcut {
     static toggleVisibility(): boolean {
         const $mediaContainer = document.querySelector('#game-stream div[data-testid="media-container"]');
@@ -6,6 +10,9 @@ export class RendererShortcut {
         }
 
         $mediaContainer.classList.toggle('bx-gone');
-        return !$mediaContainer.classList.contains('bx-gone');
+        const isShowing = !$mediaContainer.classList.contains('bx-gone');
+        // Switch FPS
+        limitVideoPlayerFps(isShowing ? getPref(PrefKey.VIDEO_MAX_FPS) : 0);
+        return isShowing;
     }
 }

src/modules/stream/stream-settings-utils.ts

@@ -45,8 +45,7 @@ export function onChangeVideoPlayerType() {
 }
 
 
-export function limitVideoPlayerFps() {
+export function limitVideoPlayerFps(targetFps: number) {
-    const targetFps = getPref(PrefKey.VIDEO_MAX_FPS);
     const streamPlayer = STATES.currentStream.streamPlayer;
     streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
 }
@@ -58,7 +57,7 @@ export function updateVideoPlayer() {
         return;
     }
 
-    limitVideoPlayerFps();
+    limitVideoPlayerFps(getPref(PrefKey.VIDEO_MAX_FPS));
 
     const options = {
         processing: getPref(PrefKey.VIDEO_PROCESSING),

src/modules/ui/dialog/settings-dialog.ts

@@ -409,7 +409,9 @@ export class SettingsNavigationDialog extends NavigationDialog {
             onChange: onChangeVideoPlayerType,
         }, {
             pref: PrefKey.VIDEO_MAX_FPS,
-            onChange: limitVideoPlayerFps,
+            onChange: e => {
+                limitVideoPlayerFps(parseInt(e.target.value));
+            },
         }, {
             pref: PrefKey.VIDEO_POWER_PREFERENCE,
             onChange: () => {