1 files changed, 30 insertions, 0 deletions
diff --git a/apps/web/src/hooks/use-fullscreen.ts b/apps/web/src/hooks/use-fullscreen.ts
new file mode 100644
index 00000000..193441c9
--- /dev/null
+++ b/apps/web/src/hooks/use-fullscreen.ts
@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useFullscreen({
+	containerRef,
+}: {
+	containerRef: React.RefObject<HTMLElement | null>;
+}) {
+	const [isFullscreen, setIsFullscreen] = useState(false);
+
+	useEffect(() => {
+		const handleChange = () => {
+			setIsFullscreen(document.fullscreenElement !== null);
+		};
+		document.addEventListener("fullscreenchange", handleChange);
+		return () => {
+			document.removeEventListener("fullscreenchange", handleChange);
+		};
+	}, []);
+
+	const toggleFullscreen = useCallback(() => {
+		if (!containerRef.current) return;
+		if (document.fullscreenElement) {
+			document.exitFullscreen();
+		} else {
+			containerRef.current.requestFullscreen();
+		}
+	}, [containerRef]);
+
+	return { isFullscreen, toggleFullscreen };
+}