Function useFullscreen

src/components/hooks/useFullscreen.ts:39–145

({
  useBrowserFullscreen = true,
  onScreenChange,
  galleryRef,
}: UseFullscreenProps)

 * Custom hook for managing fullscreen functionality
 */
export function useFullscreen({
  useBrowserFullscreen = true,
  onScreenChange,
  galleryRef,
}: UseFullscreenProps): UseFullscreenReturn {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [modalFullscreen, setModalFullscreen] = useState(false);

  // Handle browser fullscreen change events
  const handleScreenChange = useCallback(() => {
    const doc = document as FullscreenDocument;
    const fullScreenElement =
      doc.fullscreenElement ||
      doc.msFullscreenElement ||
      doc.mozFullScreenElement ||
      doc.webkitFullscreenElement;

    const isCurrentlyFullscreen = galleryRef?.current === fullScreenElement;

    if (onScreenChange) {
      onScreenChange(isCurrentlyFullscreen);
    }

    if (useBrowserFullscreen) {
      setIsFullscreen(isCurrentlyFullscreen);
    }
  }, [galleryRef, useBrowserFullscreen, onScreenChange]);

  // Set modal fullscreen (fallback for browsers without fullscreen API)
  const setModalFullscreenState = useCallback(
    (state: boolean) => {
      setModalFullscreen(state);
      if (onScreenChange) {
        onScreenChange(state);
      }
    },
    [onScreenChange]
  );

  // Enter fullscreen
  const fullScreen = useCallback(() => {
    const gallery = galleryRef?.current as FullscreenElement | null;
    if (!gallery) return;

    if (useBrowserFullscreen) {
      if (gallery.requestFullscreen) {
        gallery.requestFullscreen();
      } else if (gallery.msRequestFullscreen) {
        gallery.msRequestFullscreen();
      } else if (gallery.mozRequestFullScreen) {
        gallery.mozRequestFullScreen();
      } else if (gallery.webkitRequestFullscreen) {
        gallery.webkitRequestFullscreen();
      } else {
        // Fallback to modal fullscreen
        setModalFullscreenState(true);
      }
    } else {