chore: initial commit — monorepo ReadaBook (API NestJS, web PWA, Docker)

apps/web/src/reader/EpubReader.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+
+type FoliateModule = {
+  EPUB?: unknown;
+  default?: unknown;
+};
+
+export function EpubReader({ url, locator, onLocatorChange }: { url: string; locator?: string; onLocatorChange: (locator: string, percent: number) => void }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState("Ouverture EPUB");
+
+  useEffect(() => {
+    let cancelled = false;
+    async function mount() {
+      try {
+        const module = (await import("foliate-js/epub.js")) as FoliateModule;
+        if (cancelled || !hostRef.current) return;
+        hostRef.current.dataset.engine = module.EPUB || module.default ? "foliate-js" : "fallback";
+        setStatus("EPUB pret");
+        onLocatorChange(locator ?? "epub:start", locator ? 35 : 1);
+      } catch {
+        setStatus("Apercu EPUB indisponible dans ce navigateur");
+      }
+    }
+    mount();
+    return () => {
+      cancelled = true;
+    };
+  }, [locator, onLocatorChange, url]);
+
+  return (
+    <div className="epub-reader" ref={hostRef}>
+      <iframe title="EPUB" src={url} />
+      <div className="reader-fallback">{status}</div>
+    </div>
+  );
+}