stream.place
Live video on the AT Protocol
1import {
2 createContext,
3 ReactNode,
4 useContext,
5 useEffect,
6 useState,
7} from "react";
8import { useStore } from "store";
9
10interface FullscreenContextValue {
11 fullscreen: boolean;
12 setFullscreen: (value: boolean) => void;
13}
14
15const FullscreenContext = createContext<FullscreenContextValue | undefined>(
16 undefined,
17);
18
19export const FullscreenProvider = ({ children }: { children: ReactNode }) => {
20 const [fullscreen, setFullscreen] = useState(false);
21
22 const setSidebarHidden = useStore((state) => state.setSidebarHidden);
23 const setSidebarUnhidden = useStore((state) => state.setSidebarUnhidden);
24
25 useEffect(() => {
26 if (fullscreen) {
27 setSidebarHidden();
28 } else {
29 setSidebarUnhidden();
30 }
31 }, [fullscreen]);
32
33 return (
34 <FullscreenContext.Provider value={{ fullscreen, setFullscreen }}>
35 {children}
36 </FullscreenContext.Provider>
37 );
38};
39
40export function useFullscreen() {
41 const ctx = useContext(FullscreenContext);
42 if (!ctx) {
43 throw new Error("useFullscreen must be used within a FullscreenProvider");
44 }
45 return ctx;
46}