diff --git a/web/package-lock.json b/web/package-lock.json index 283e3c6137..930bd93501 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 94831b777b..d498609fdd 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 0c5d28fbfb..a0f0a1e56f 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( const toggleFullscreen = useCallback(async () => { try { if (!getFullscreenElement()) { + NoSleep.enable(); await enterFullScreen(elementRef.current!); } else { await exitFullscreen(); + NoSleep.disable(); } setError(null); } catch (err) {