Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.9 kB · 74 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475// Fullscreen state for the player. The web's shadcn sidebar manages its// own state, so this context just exposes a boolean + setter. Future// fullscreen UI can subscribe.import { createContext, ReactNode, useCallback, useContext, useEffect, useState,} from "react";
interface FullscreenContextValue { fullscreen: boolean; setFullscreen: (value: boolean) => void; theatre: boolean; setTheatre: (value: boolean) => void;}
const FullscreenContext = createContext<FullscreenContextValue | undefined>( undefined,);
export const FullscreenProvider = ({ children }: { children: ReactNode }) => { const [fullscreen, setFullscreen] = useState(false); const [theatre, setTheatre] = useState(() => { try { return localStorage.getItem("streamplace:theatre") === "true"; } catch { return false; } });
useEffect(() => { // Browser-level fullscreen state is the source of truth on web; // sync our local state when the user hits Esc. if (typeof document === "undefined") return; const onChange = () => { setFullscreen(!!document.fullscreenElement); }; document.addEventListener("fullscreenchange", onChange); return () => document.removeEventListener("fullscreenchange", onChange); }, []);
const handleSetTheatre = useCallback((value: boolean) => { setTheatre(value); try { localStorage.setItem("streamplace:theatre", String(value)); } catch { // ignore } }, []);
return ( <FullscreenContext.Provider value={{ fullscreen, setFullscreen, theatre, setTheatre: handleSetTheatre, }} > {children} </FullscreenContext.Provider> );};
export function useFullscreen() { const ctx = useContext(FullscreenContext); if (!ctx) { throw new Error("useFullscreen must be used within a FullscreenProvider"); } return ctx;}