@somecat/epub-reader 0.1.5 → 0.1.7

package/dist/react.cjs

@@ -5,33 +5,52 @@ require('foliate-js/view.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/EBookReader.tsx
-var getContentCSS = (fontSize, isDark, lineHeight, letterSpacing, extraCSS) => `
+var getContentCSS = (fontSize, isDark, lineHeight, letterSpacing, extraCSS) => {
+  const scale = fontSize / 100;
+  return `
 @namespace epub "http://www.idpf.org/2007/ops";
-html {
+:root:root {
   color-scheme: ${isDark ? "dark" : "light"} !important;
 }
-body {
+:root:root body {
   background-color: transparent !important;
   color: ${isDark ? "#e0e0e0" : "black"} !important;
   font-size: ${fontSize}% !important;
   line-height: ${lineHeight} !important;
   letter-spacing: ${letterSpacing}em !important;
+  -webkit-text-size-adjust: 100% !important;
+  text-size-adjust: 100% !important;
 }
-p {
+
+:root:root body :is(p, li, blockquote) {
   line-height: inherit !important;
+}
+
+:root:root body p {
   margin-bottom: 1em;
 }
-a {
+
+:root:root body a {
   color: ${isDark ? "#64b5f6" : "#2563eb"} !important;
 }
-img {
+
+:root:root body img {
   max-width: 100%;
   height: auto;
   object-fit: contain;
   ${isDark ? "filter: brightness(0.8) contrast(1.2);" : ""}
 }
+
+@supports (zoom: 1) {
+  :root:root body[data-epub-reader-force-zoom='true'] {
+    zoom: ${scale};
+    font-size: 100% !important;
+  }
+}
+
 ${extraCSS ?? ""}
 `;
+};
 function createEBookReader(container, options = {}) {
   if (!container) throw new Error("container is required");
   if (!customElements.get("foliate-view")) throw new Error("foliate-view is not defined");
@@ -55,6 +74,8 @@ function createEBookReader(container, options = {}) {
   let lineHeight = initialLineHeight;
   let letterSpacing = initialLetterSpacing;
   let searchToken = 0;
+  let activeDoc = null;
+  let forceZoomEnabled = false;
   container.innerHTML = "";
   const viewer = document.createElement("foliate-view");
   viewer.style.display = "block";
@@ -62,21 +83,59 @@ function createEBookReader(container, options = {}) {
   viewer.style.height = "100%";
   viewer.setAttribute("margin", "48");
   viewer.setAttribute("gap", "0.07");
-  const applyStyles = () => {
+  const pickSampleEl = (doc) => {
+    const candidates = doc.querySelectorAll("p, li, blockquote, span, div");
+    for (const el of candidates) {
+      const text = el.textContent?.trim();
+      if (!text) continue;
+      if (text.length < 24) continue;
+      return el;
+    }
+    return doc.body;
+  };
+  const readFontSizePx = (doc) => {
+    const el = pickSampleEl(doc);
+    if (!el) return null;
+    const px = Number.parseFloat(getComputedStyle(el).fontSize);
+    return Number.isFinite(px) ? px : null;
+  };
+  const applyForceZoomIfNeeded = () => {
+    if (!forceZoomEnabled) return;
+    if (!activeDoc?.body) return;
+    activeDoc.body.setAttribute("data-epub-reader-force-zoom", "true");
+  };
+  const applyStyles = (check) => {
     if (destroyed) return;
     if (!viewer.renderer?.setStyles) return;
+    applyForceZoomIfNeeded();
     viewer.renderer.setStyles(getContentCSS(fontSize, darkMode, lineHeight, letterSpacing, extraContentCSS));
     requestAnimationFrame(() => {
       setTimeout(() => {
         if (destroyed) return;
         viewer.renderer?.render?.();
         viewer.renderer?.expand?.();
+        if (!check) return;
+        if (forceZoomEnabled) return;
+        if (!activeDoc) return;
+        const { beforePx, beforeFontSize, afterFontSize } = check;
+        const afterPx = readFontSizePx(activeDoc);
+        if (beforePx == null || afterPx == null) return;
+        const isMeaningfulChange = Math.abs(afterFontSize - beforeFontSize) >= 10;
+        const isIneffective = Math.abs(afterPx - beforePx) < 0.5;
+        if (isMeaningfulChange && isIneffective) {
+          forceZoomEnabled = true;
+          applyForceZoomIfNeeded();
+          viewer.renderer?.setStyles?.(getContentCSS(fontSize, darkMode, lineHeight, letterSpacing, extraContentCSS));
+          viewer.renderer?.render?.();
+          viewer.renderer?.expand?.();
+        }
       }, 50);
     });
   };
   const handleLoad = (e) => {
-    applyStyles();
     const detail = e.detail;
+    activeDoc = detail?.doc ?? null;
+    applyStyles();
     if (detail?.doc) onContentLoad?.(detail.doc);
   };
   const handleRelocate = (e) => {
@@ -93,6 +152,8 @@ function createEBookReader(container, options = {}) {
       try {
         viewer.clearSearch?.();
         searchToken++;
+        activeDoc = null;
+        forceZoomEnabled = false;
         await viewer.open?.(file);
         const nextToc = viewer.book?.toc ?? [];
         toc = nextToc;
@@ -138,8 +199,10 @@ function createEBookReader(container, options = {}) {
     },
     setFontSize(nextFontSize) {
       const safe = Math.min(300, Math.max(50, nextFontSize));
+      const beforeFontSize = fontSize;
+      const beforePx = activeDoc && !forceZoomEnabled ? readFontSizePx(activeDoc) : null;
       fontSize = safe;
-      applyStyles();
+      applyStyles({ beforePx, beforeFontSize, afterFontSize: safe });
     },
     setLineHeight(nextLineHeight) {
       const safe = Math.min(3, Math.max(1, nextLineHeight));
@@ -259,6 +322,7 @@ var icons = {
   x: '<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
   type: '<path d="M4 7V4h16v3M9 20h6M12 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
   sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  progress: '<g transform="scale(0.0234375)"><path fill="currentColor" d="M835.79 610.26a25.38 25.38 0 1 1 0-50.77h129.77a25.38 25.38 0 0 1 0 50.77zM58.23 606.63a25.38 25.38 0 1 1 0-50.77h64.87a25.38 25.38 0 1 1 0 50.77z"/><path fill="currentColor" d="M479.73 264.12C627.34 264.12 747 383.78 747 531.39S627.34 798.66 479.73 798.66 212.46 679 212.46 531.39s119.66-267.27 267.27-267.27m0-46a312.43 312.43 0 1 0 122 24.64 311.35 311.35 0 0 0-122-24.64z"/></g>',
   settings: '<path fill="currentColor" fill-rule="evenodd" d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/>'
 };
 var SvgIcon = ({ name, size = 24, color = "currentColor", className }) => {
@@ -511,7 +575,7 @@ var MobileUI = ({
           onTouchEnd: handleTouchEnd,
           onTouchCancel: handleTouchEnd,
           title: "\u8FDB\u5EA6",
-          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "sliders" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "progress" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -581,7 +645,7 @@ var MobileUI = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: () => onSearch(search.query), disabled: status !== "ready", children: "\u641C\u7D22" })
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn epub-reader__btn--wide", onClick: () => onSearch(search.query), disabled: status !== "ready", children: "\u641C\u7D22" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__checks", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "epub-reader__check", children: [
@@ -634,6 +698,39 @@ var MobileUI = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "epub-reader__status", children: status === "error" ? errorText || "\u9519\u8BEF" : status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "" }),
                 sectionLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: sectionLabel }) : null
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mprogress", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: "epub-reader__range",
+                    type: "range",
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    value: displayedPercent,
+                    style: {
+                      background: `linear-gradient(to right, var(--epub-reader-range-fill) 0%, var(--epub-reader-range-fill) ${displayedPercent}%, var(--epub-reader-range-track) ${displayedPercent}%, var(--epub-reader-range-track) 100%)`
+                    },
+                    onChange: (e) => {
+                      onSeekStart();
+                      onSeekChange(Number(e.target.value));
+                    },
+                    onPointerUp: (e) => {
+                      const v = Number(e.target.value);
+                      onSeekEnd(v);
+                    },
+                    onKeyUp: (e) => {
+                      if (e.key !== "Enter") return;
+                      const v = Number(e.target.value);
+                      onSeekCommit(v);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mprogress-percent", children: [
+                  displayedPercent,
+                  "%"
+                ] })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mnav", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -687,36 +784,6 @@ var MobileUI = ({
                     children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-right" })
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mprogress", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    className: "epub-reader__range",
-                    type: "range",
-                    min: 0,
-                    max: 100,
-                    step: 1,
-                    value: displayedPercent,
-                    onChange: (e) => {
-                      onSeekStart();
-                      onSeekChange(Number(e.target.value));
-                    },
-                    onPointerUp: (e) => {
-                      const v = Number(e.target.value);
-                      onSeekEnd(v);
-                    },
-                    onKeyUp: (e) => {
-                      if (e.key !== "Enter") return;
-                      const v = Number(e.target.value);
-                      onSeekCommit(v);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mprogress-percent", children: [
-                  displayedPercent,
-                  "%"
-                ] })
               ] })
             ] }) : null,
             activePanel === "settings" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msettings", children: [
@@ -760,59 +827,61 @@ var MobileUI = ({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__mfont-a is-big", children: "A" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u884C\u9AD8" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-value", children: lineHeight.toFixed(2) })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msettings-row", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u884C\u9AD8" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-value", children: lineHeight.toFixed(2) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      className: "epub-reader__range",
+                      type: "range",
+                      min: 1,
+                      max: 3,
+                      step: 0.05,
+                      value: lineHeight,
+                      "aria-label": "\u884C\u9AD8",
+                      onChange: (e) => onLineHeightChange(Number(e.target.value))
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    className: "epub-reader__range",
-                    type: "range",
-                    min: 1,
-                    max: 3,
-                    step: 0.05,
-                    value: lineHeight,
-                    "aria-label": "\u884C\u9AD8",
-                    onChange: (e) => onLineHeightChange(Number(e.target.value))
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u5B57\u95F4\u8DDD" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-value", children: [
-                    letterSpacing.toFixed(2),
-                    "em"
-                  ] })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u5B57\u95F4\u8DDD" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-value", children: [
+                      letterSpacing.toFixed(2),
+                      "em"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      className: "epub-reader__range",
+                      type: "range",
+                      min: 0,
+                      max: 0.3,
+                      step: 0.01,
+                      value: letterSpacing,
+                      "aria-label": "\u5B57\u95F4\u8DDD",
+                      onChange: (e) => onLetterSpacingChange(Number(e.target.value))
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                  "button",
                   {
-                    className: "epub-reader__range",
-                    type: "range",
-                    min: 0,
-                    max: 0.3,
-                    step: 0.01,
-                    value: letterSpacing,
-                    "aria-label": "\u5B57\u95F4\u8DDD",
-                    onChange: (e) => onLetterSpacingChange(Number(e.target.value))
+                    type: "button",
+                    className: "epub-reader__btn",
+                    onClick: () => onToggleDarkMode(!darkMode),
+                    "aria-pressed": darkMode,
+                    "aria-label": darkMode ? "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5F00\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u4EAE\u8272" : "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5173\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u6697\u9ED1",
+                    title: darkMode ? "\u5207\u6362\u5230\u4EAE\u8272" : "\u5207\u6362\u5230\u6697\u9ED1",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: darkMode ? "sun" : "moon" })
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "epub-reader__btn",
-                  onClick: () => onToggleDarkMode(!darkMode),
-                  "aria-pressed": darkMode,
-                  "aria-label": darkMode ? "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5F00\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u4EAE\u8272" : "\u6697\u9ED1\u6A21\u5F0F\uFF1A\u5173\uFF0C\u70B9\u51FB\u5207\u6362\u5230\u6697\u9ED1",
-                  title: darkMode ? "\u5207\u6362\u5230\u4EAE\u8272" : "\u5207\u6362\u5230\u6697\u9ED1",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: darkMode ? "sun" : "moon" })
-                }
-              )
+              ] })
             ] }) : null
           ] })
         ]