From 402c16e7dfc3d52aae67b842834912660366cf2c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 30 May 2024 10:37:08 -0500
Subject: [PATCH] don't sleep mobile devices when fullscreen (#11652)

---
 web/package-lock.json           | 6 ++++++
 web/package.json                | 1 +
 web/src/hooks/use-fullscreen.ts | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/web/package-lock.json b/web/package-lock.json
index 283e3c613..930bd9350 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -43,6 +43,7 @@
         "lucide-react": "^0.379.0",
         "monaco-yaml": "^5.1.1",
         "next-themes": "^0.3.0",
+        "nosleep.js": "^0.12.0",
         "react": "^18.3.1",
         "react-apexcharts": "^1.4.1",
         "react-day-picker": "^8.10.1",
@@ -5724,6 +5725,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nosleep.js": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.12.0.tgz",
+      "integrity": "sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA=="
+    },
     "node_modules/npm-run-path": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index 94831b777..d498609fd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -49,6 +49,7 @@
     "lucide-react": "^0.379.0",
     "monaco-yaml": "^5.1.1",
     "next-themes": "^0.3.0",
+    "nosleep.js": "^0.12.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-day-picker": "^8.10.1",
diff --git a/web/src/hooks/use-fullscreen.ts b/web/src/hooks/use-fullscreen.ts
index 0c5d28fbf..a0f0a1e56 100644
--- a/web/src/hooks/use-fullscreen.ts
+++ b/web/src/hooks/use-fullscreen.ts
@@ -1,4 +1,7 @@
 import { RefObject, useCallback, useEffect, useState } from "react";
+import nosleep from "nosleep.js";
+
+const NoSleep = new nosleep();
 
 function getFullscreenElement(): HTMLElement | null {
   return (
@@ -96,9 +99,11 @@ export function useFullscreen<T extends HTMLElement = HTMLElement>(
   const toggleFullscreen = useCallback(async () => {
     try {
       if (!getFullscreenElement()) {
+        NoSleep.enable();
         await enterFullScreen(elementRef.current!);
       } else {
         await exitFullscreen();
+        NoSleep.disable();
       }
       setError(null);
     } catch (err) {