book viewer full screen

src/pages/viewer/hooks/useBrowserFullscreen.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { exitViewerFullscreen } from '@/pages/viewer/utils/viewerFullscreen';
+
+type Options = {
+  enabled: boolean;
+};
+
+/** Leaves browser fullscreen when the viewer route unmounts. */
+export function useBrowserFullscreen({ enabled }: Options) {
+  useEffect(() => {
+    if (!enabled) return;
+    return () => {
+      exitViewerFullscreen();
+    };
+  }, [enabled]);
+}

src/pages/viewer/hooks/useIsBrowserFullscreen.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react';
+import { isViewerFullscreen } from '@/pages/viewer/utils/viewerFullscreen';
+
+function subscribeFullscreen(callback: () => void) {
+  document.addEventListener('fullscreenchange', callback);
+  return () => document.removeEventListener('fullscreenchange', callback);
+}
+
+export function useIsBrowserFullscreen() {
+  return useSyncExternalStore(subscribeFullscreen, isViewerFullscreen, () => false);
+}

src/pages/viewer/hooks/useViewerViewport.ts

@@ -0,0 +1,37 @@
+import { useLayoutEffect, useState } from 'react';
+
+export type ViewerViewport = { w: number; h: number };
+
+function readViewport(): ViewerViewport {
+  const vv = window.visualViewport;
+  return {
+    w: Math.round(vv?.width ?? window.innerWidth),
+    h: Math.round(vv?.height ?? window.innerHeight),
+  };
+}
+
+/** Tracks layout size; updates on resize, orientation, fullscreen, and visualViewport changes. */
+export function useViewerViewport(): ViewerViewport {
+  const [viewport, setViewport] = useState<ViewerViewport>(() =>
+    typeof window !== 'undefined' ? readViewport() : { w: 1200, h: 800 },
+  );
+
+  useLayoutEffect(() => {
+    const update = () => setViewport(readViewport());
+    update();
+    window.addEventListener('resize', update);
+    window.addEventListener('orientationchange', update);
+    document.addEventListener('fullscreenchange', update);
+    window.visualViewport?.addEventListener('resize', update);
+    window.visualViewport?.addEventListener('scroll', update);
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('orientationchange', update);
+      document.removeEventListener('fullscreenchange', update);
+      window.visualViewport?.removeEventListener('resize', update);
+      window.visualViewport?.removeEventListener('scroll', update);
+    };
+  }, []);
+
+  return viewport;
+}