don't sleep mobile devices when fullscreen

blakeblackshear · May 30, 2024 · 4023de3 · 4023de3
1 parent 3e6b8c2
commit 4023de3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git 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
@@ -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) {