merge: fix/36-reader-fullscreen-overlay dans develop (header overlay + auto-hide plein écran)

apps/web/src/reader/ReaderShell.tsx

@@ -2,7 +2,15 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { ErrorRibbon } from "../components/ui";
 import { navigate } from "../router";
-import { enterElementFullscreen, exitElementFullscreen, isElementFullscreen, readerArrowAction, shouldHandleReaderArrowKey, supportsElementFullscreen } from "./readerFullscreen";
+import {
+  enterElementFullscreen,
+  exitElementFullscreen,
+  isElementFullscreen,
+  isReaderHeaderActive,
+  readerArrowAction,
+  shouldHandleReaderArrowKey,
+  supportsElementFullscreen
+} from "./readerFullscreen";
 import { readerZoomLabel, READER_ZOOM_DEFAULT, READER_ZOOM_MAX, READER_ZOOM_MIN } from "./readerLayout";
 
 export type ReaderControls = {
@@ -32,10 +40,40 @@ type ReaderShellProps = {
 
 export function ReaderShell({ title, backHref, error, onRetry, controls, zoomControls, children }: ReaderShellProps) {
   const readerRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLElement>(null);
+  const headerHideTimerRef = useRef<number | undefined>(undefined);
   const [nativeFullscreen, setNativeFullscreen] = useState(false);
   const [fallbackFullscreen, setFallbackFullscreen] = useState(false);
+  const [headerVisible, setHeaderVisible] = useState(true);
   const fullscreenActive = nativeFullscreen || fallbackFullscreen;
 
+  const clearHeaderHideTimer = useCallback(() => {
+    if (headerHideTimerRef.current === undefined) return;
+    window.clearTimeout(headerHideTimerRef.current);
+    headerHideTimerRef.current = undefined;
+  }, []);
+
+  const scheduleHeaderHide = useCallback(() => {
+    clearHeaderHideTimer();
+    if (!fullscreenActive) {
+      setHeaderVisible(true);
+      return;
+    }
+    headerHideTimerRef.current = window.setTimeout(() => {
+      if (isReaderHeaderActive(headerRef.current, document)) {
+        scheduleHeaderHide();
+        return;
+      }
+      setHeaderVisible(false);
+    }, 2000);
+  }, [clearHeaderHideTimer, fullscreenActive]);
+
+  const revealHeader = useCallback(() => {
+    if (!fullscreenActive) return;
+    setHeaderVisible(true);
+    scheduleHeaderHide();
+  }, [fullscreenActive, scheduleHeaderHide]);
+
   const toggleFullscreen = useCallback(async () => {
     const readerElement = readerRef.current;
     if (!readerElement) return;
@@ -73,6 +111,18 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
     return () => document.removeEventListener("fullscreenchange", syncFullscreen);
   }, []);
 
+  useEffect(() => {
+    if (fullscreenActive) {
+      setHeaderVisible(true);
+      scheduleHeaderHide();
+      return;
+    }
+    clearHeaderHideTimer();
+    setHeaderVisible(true);
+  }, [clearHeaderHideTimer, fullscreenActive, scheduleHeaderHide]);
+
+  useEffect(() => clearHeaderHideTimer, [clearHeaderHideTimer]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && fallbackFullscreen) {
@@ -80,6 +130,7 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
         return;
       }
       if (!shouldHandleReaderArrowKey(event, readerRef.current)) return;
+      revealHeader();
       const action = readerArrowAction(event);
       if (action === "previous" && controls.canPrevious) {
         event.preventDefault();
@@ -92,11 +143,37 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [controls, fallbackFullscreen]);
+  }, [controls, fallbackFullscreen, revealHeader]);
 
   return (
-    <div ref={readerRef} className={`reader-page reader-mode-horizontal${fallbackFullscreen ? " reader-fullscreen-fallback" : ""}`}>
-      <header className="reader-topbar">
+    <div
+      ref={readerRef}
+      className={`reader-page reader-mode-horizontal${fallbackFullscreen ? " reader-fullscreen-fallback" : ""}${fullscreenActive ? " reader-fullscreen-active" : ""}${
+        fullscreenActive && !headerVisible ? " reader-header-hidden" : ""
+      }`}
+      onMouseMove={revealHeader}
+      onPointerDown={revealHeader}
+      onScrollCapture={revealHeader}
+      onWheel={revealHeader}
+    >
+      <header
+        ref={headerRef}
+        className="reader-topbar"
+        onBlur={scheduleHeaderHide}
+        onFocus={() => {
+          clearHeaderHideTimer();
+          setHeaderVisible(true);
+        }}
+        onMouseEnter={() => {
+          clearHeaderHideTimer();
+          setHeaderVisible(true);
+        }}
+        onMouseLeave={scheduleHeaderHide}
+        onPointerDown={() => {
+          clearHeaderHideTimer();
+          setHeaderVisible(true);
+        }}
+      >
         <button className="ghost-button" onClick={() => navigate(backHref)}>
           <ArrowLeft size={17} />
           Retour

apps/web/src/reader/readerFullscreen.ts

@@ -64,6 +64,15 @@ export function isReaderInteractiveTarget(target: EventTarget | null) {
   return Boolean(target.closest(INTERACTIVE_SELECTOR));
 }
 
+export function isReaderHeaderActive(header: HTMLElement | null, documentRef: Document = document) {
+  if (!header) return false;
+  const activeElement = documentRef.activeElement;
+  if (activeElement && header.contains(activeElement)) return true;
+  if (typeof header.matches === "function" && (header.matches(":hover") || header.matches(":focus-within"))) return true;
+  if (typeof header.querySelector === "function" && header.querySelector("[aria-expanded='true'], [data-reader-menu-open='true'], details[open]")) return true;
+  return false;
+}
+
 export function shouldHandleReaderArrowKey(event: KeyboardEvent, readerElement: HTMLElement | null) {
   if (!readerArrowAction(event)) return false;
   if (isReaderInteractiveTarget(event.target)) return false;

apps/web/src/reader/readerRuntime.test.ts

@@ -15,7 +15,7 @@ import {
   zoomReaderSize
 } from "./readerLayout";
 import { classifyPdfCanvas, pdfCanvasHasVisibleContent, pdfCanvasVisible, pdfRenderScale } from "./pdfRender";
-import { isElementFullscreen, isReaderInteractiveTarget, readerArrowAction, shouldHandleReaderArrowKey, supportsElementFullscreen } from "./readerFullscreen";
+import { isElementFullscreen, isReaderHeaderActive, isReaderInteractiveTarget, readerArrowAction, shouldHandleReaderArrowKey, supportsElementFullscreen } from "./readerFullscreen";
 import { configurePdfWorker, pdfWorkerSrc } from "./pdfWorker";
 import { readerErrorMessage } from "./ReaderError";
 
@@ -185,6 +185,35 @@ describe("reader runtime helpers", () => {
     expect(isElementFullscreen(regularElement, documentRef)).toBe(false);
   });
 
+  it("keeps the fullscreen reader header visible while it is actively used", () => {
+    const focusedControl = {};
+    const focusedHeader = {
+      contains: (target: unknown) => target === focusedControl,
+      matches: () => false,
+      querySelector: () => null
+    } as unknown as HTMLElement;
+    const hoveredHeader = {
+      contains: () => false,
+      matches: (selector: string) => selector === ":hover",
+      querySelector: () => null
+    } as unknown as HTMLElement;
+    const menuOpenHeader = {
+      contains: () => false,
+      matches: () => false,
+      querySelector: () => ({})
+    } as unknown as HTMLElement;
+    const idleHeader = {
+      contains: () => false,
+      matches: () => false,
+      querySelector: () => null
+    } as unknown as HTMLElement;
+
+    expect(isReaderHeaderActive(focusedHeader, { activeElement: focusedControl } as unknown as Document)).toBe(true);
+    expect(isReaderHeaderActive(hoveredHeader, { activeElement: null } as unknown as Document)).toBe(true);
+    expect(isReaderHeaderActive(menuOpenHeader, { activeElement: null } as unknown as Document)).toBe(true);
+    expect(isReaderHeaderActive(idleHeader, { activeElement: null } as unknown as Document)).toBe(false);
+  });
+
   it("keeps reader arrow shortcuts away from interactive or external targets", () => {
     const originalElement = globalThis.Element;
     const originalNode = globalThis.Node;

apps/web/src/styles/app.css

@@ -892,6 +892,42 @@ main.app-main-reader .reader-page {
   z-index: 1000;
 }
 
+.reader-fullscreen-active {
+  grid-template-rows: minmax(0, 1fr);
+  padding: 0;
+}
+
+.reader-fullscreen-active .reader-topbar {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  z-index: 20;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.reader-fullscreen-active.reader-header-hidden .reader-topbar {
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+.reader-fullscreen-active .reader-status {
+  position: absolute;
+  top: 64px;
+  right: 10px;
+  left: 10px;
+  z-index: 15;
+}
+
+.reader-fullscreen-active .reader-stage {
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+}
+
 .reader-topbar {
   grid-row: 1;
   display: flex;