From 004fc5f834ac1fabb2d75cbfb3800034ef87f768 Mon Sep 17 00:00:00 2001
From: Alexander Guryanov <caiiiycuk@gmail.com>
Date: Mon, 1 Jul 2024 14:07:43 +0700
Subject: [PATCH] Fix #315: pause execution when documment is hidden

---
 src/main.tsx                   | 4 ++++
 src/store/ui.ts                | 5 +++++
 src/window/dos/dos-runtime.tsx | 5 +++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index ef6183ea..53b7c98d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -214,6 +214,10 @@ function setupRootElement(root: HTMLDivElement, nonSerializableStore: NonSeriali
         const fullscreen = document.fullscreenElement === root;
         store.dispatch(uiSlice.actions.setFullScreen(fullscreen));
     });
+    function listen() {
+        store.dispatch(uiSlice.actions.documentHidden(document.hidden));
+    };
+    document.addEventListener("visibilitychange", listen);
 }
 
 (window as any).Dos = Dos;
diff --git a/src/store/ui.ts b/src/store/ui.ts
index 3570a6dd..67846adf 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -32,6 +32,7 @@ const initialState: {
     cloudSaves: boolean,
     autoStart: boolean,
     kiosk: boolean,
+    documentHidden: boolean,
 } = {
     modal: "none",
     frame: "none",
@@ -50,6 +51,7 @@ const initialState: {
     cloudSaves: true,
     autoStart: false,
     kiosk: false,
+    documentHidden: document.hidden ?? false,
 };
 
 export type UiState = typeof initialState;
@@ -159,6 +161,9 @@ export const uiSlice = createSlice({
         kiosk: (state, a: { payload: boolean }) => {
             state.kiosk = a.payload;
         },
+        documentHidden: (s, a: { payload: boolean }) => {
+            s.documentHidden = a.payload;
+        },
     },
     extraReducers: (builder) => {
         builder
diff --git a/src/window/dos/dos-runtime.tsx b/src/window/dos/dos-runtime.tsx
index 231d8960..8a606e66 100644
--- a/src/window/dos/dos-runtime.tsx
+++ b/src/window/dos/dos-runtime.tsx
@@ -153,9 +153,10 @@ function useAudioBackend(ci: CommandInterface): void {
 
 function usePause(ci: CommandInterface): void {
     const paused = useSelector((state: State) => state.dos.paused);
+    const documentHidden = useSelector((state: State) => state.ui.documentHidden);
     useEffect(() => {
-        paused ? ci.pause() : ci.resume();
-    }, [paused, ci]);
+        (paused || documentHidden) ? ci.pause() : ci.resume();
+    }, [paused, documentHidden, ci]);
 }
 
 function useStats(ci: CommandInterface): void {