pdf-flipbook 1.2.0 → 1.3.0

package/dist/pdf-flipbook.umd.js

@@ -21238,331 +21238,291 @@ var PdfFlipbook = (() => {
     __webpack_exports__GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${__webpack_exports__version}/pdf.worker.min.mjs`;
   }
   var DEFAULTS = {
-    flipDuration: 800,
-    shadowIntensity: 0.35,
+    /** Flip animation duration in ms */
+    flipDuration: 700,
+    /** Shadow opacity at peak of flip (0-1) */
+    shadowIntensity: 0.4,
+    /** Device-pixel-ratio cap for canvas rendering */
     maxDpr: 2,
+    /** Whether to show the toolbar */
     toolbar: true,
+    /** Toolbar theme: "light" | "dark" */
     theme: "dark",
+    /** Preload N pages ahead */
+    preloadAhead: 2,
+    /** Called when a page turn starts: (fromPage, toPage) */
     onFlip: null,
+    /** Called when all pages are loaded */
     onReady: null,
+    /** Called on load error */
     onError: null
   };
   var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-  var lerp = (a, b, t) => a + (b - a) * t;
-  var easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+  var even = (n) => n % 2 === 0 ? n : n - 1;
+  var isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0;
   var PdfFlipbook = class {
+    /**
+     * @param {string|HTMLElement} container  CSS selector or DOM element
+     * @param {string}             pdfUrl     Remote or local PDF URL
+     * @param {object}             [options]  See DEFAULTS
+     */
     constructor(container, pdfUrl, options = {}) {
       if (!pdfUrl) throw new Error("[PdfFlipbook] pdfUrl is required");
       this._el = typeof container === "string" ? document.querySelector(container) : container;
-      if (!this._el) throw new Error("[PdfFlipbook] container not found");
+      if (!this._el) throw new Error(`[PdfFlipbook] container not found: ${container}`);
       this._url = pdfUrl;
       this._opts = { ...DEFAULTS, ...options };
       this._pages = [];
-      this._spread = 0;
+      this._pdf = null;
       this._total = 0;
+      this._spread = 0;
       this._flipping = false;
-      this._animId = null;
-      this._pageAspect = 1.414;
       this._init();
     }
+    // ── Static workerSrc override ──────────────────────────────────────────────
     static set workerSrc(src) {
       __webpack_exports__GlobalWorkerOptions.workerSrc = src;
     }
+    // ═══ PUBLIC API ═══════════════════════════════════════════════════════════
+    /** Go to the next spread */
     next() {
-      this._startFlip(1);
+      this._flip(1);
     }
+    /** Go to the previous spread */
     prev() {
-      this._startFlip(-1);
+      this._flip(-1);
     }
-    goTo(n) {
-      const idx = clamp(n - 1, 0, this._total - 1);
-      const target = idx % 2 === 0 ? idx : idx - 1;
-      if (target !== this._spread) this._startFlip(target > this._spread ? 1 : -1, target);
+    /** Jump directly to a page (1-indexed) */
+    goTo(pageNum) {
+      const target = clamp(pageNum - 1, 0, this._total - 1);
+      const targetSpread = even(target);
+      if (targetSpread === this._spread) return;
+      const dir = targetSpread > this._spread ? 1 : -1;
+      this._animateFlip(dir, targetSpread);
     }
+    /** Destroy the flipbook and clean up */
     destroy() {
-      cancelAnimationFrame(this._animId);
+      this._el.innerHTML = "";
+      this._el.classList.remove("pfb", `pfb--${this._opts.theme}`);
+      this._pages = [];
       window.removeEventListener("resize", this._onResize);
       window.removeEventListener("keydown", this._onKey);
-      this._el.innerHTML = "";
     }
+    // ═══ PRIVATE ══════════════════════════════════════════════════════════════
     async _init() {
       this._buildShell();
       try {
         await this._loadPdf();
         this._bindEvents();
         this._opts.onReady?.();
-      } catch (e) {
-        console.error("[PdfFlipbook]", e);
-        this._showError(e.message);
-        this._opts.onError?.(e);
+      } catch (err) {
+        console.error("[PdfFlipbook]", err);
+        this._showError(err.message);
+        this._opts.onError?.(err);
       }
     }
+    // ── DOM Shell ──────────────────────────────────────────────────────────────
     _buildShell() {
       this._el.classList.add("pfb", `pfb--${this._opts.theme}`);
       this._el.innerHTML = `
       <div class="pfb__stage">
-        <canvas class="pfb__canvas"></canvas>
-        <button class="pfb__btn pfb__btn--prev" aria-label="Previous">&#8592;</button>
-        <button class="pfb__btn pfb__btn--next" aria-label="Next">&#8594;</button>
-        <div class="pfb__loader"><div class="pfb__spinner"></div><span class="pfb__loader-text">Loading\u2026</span></div>
+        <div class="pfb__book">
+          <div class="pfb__page pfb__page--left">
+            <div class="pfb__page-front"></div>
+            <div class="pfb__page-back"></div>
+            <div class="pfb__shadow pfb__shadow--left"></div>
+          </div>
+          <div class="pfb__spine"></div>
+          <div class="pfb__page pfb__page--right">
+            <div class="pfb__page-front"></div>
+            <div class="pfb__page-back"></div>
+            <div class="pfb__shadow pfb__shadow--right"></div>
+          </div>
+        </div>
+        <button class="pfb__btn pfb__btn--prev" aria-label="Previous page">&#8592;</button>
+        <button class="pfb__btn pfb__btn--next" aria-label="Next page">&#8594;</button>
+        <div class="pfb__loader">
+          <div class="pfb__spinner"></div>
+          <span class="pfb__loader-text">Loading PDF\u2026</span>
+        </div>
         <div class="pfb__error" hidden></div>
       </div>
-      ${this._opts.toolbar ? `<div class="pfb__toolbar">
-        <button class="pfb__tb-btn pfb__tb-prev">&#8592;</button>
+      ${this._opts.toolbar ? `
+      <div class="pfb__toolbar">
+        <button class="pfb__tb-btn pfb__tb-prev" aria-label="Previous">&#8592;</button>
         <span class="pfb__page-info"></span>
-        <button class="pfb__tb-btn pfb__tb-next">&#8594;</button>
+        <button class="pfb__tb-btn pfb__tb-next" aria-label="Next">&#8594;</button>
       </div>` : ""}
     `;
       this._stage = this._el.querySelector(".pfb__stage");
-      this._canvas = this._el.querySelector(".pfb__canvas");
-      this._ctx = this._canvas.getContext("2d");
+      this._book = this._el.querySelector(".pfb__book");
       this._loader = this._el.querySelector(".pfb__loader");
-      this._loaderTx = this._el.querySelector(".pfb__loader-text");
       this._errorEl = this._el.querySelector(".pfb__error");
       this._pageInfo = this._el.querySelector(".pfb__page-info");
-      this._resizeCanvas();
-    }
-    _resizeCanvas() {
-      const W = this._stage.clientWidth || 900;
-      const H = this._stage.clientHeight || 560;
-      this._canvas.width = W;
-      this._canvas.height = H;
-      this._canvas.style.width = W + "px";
-      this._canvas.style.height = H + "px";
-      if (this._total) this._drawSpread();
-    }
+      this._leftFront = this._el.querySelector(".pfb__page--left .pfb__page-front");
+      this._leftBack = this._el.querySelector(".pfb__page--left .pfb__page-back");
+      this._leftShadow = this._el.querySelector(".pfb__shadow--left");
+      this._rightFront = this._el.querySelector(".pfb__page--right .pfb__page-front");
+      this._rightBack = this._el.querySelector(".pfb__page--right .pfb__page-back");
+      this._rightShadow = this._el.querySelector(".pfb__shadow--right");
+    }
+    // ── PDF Loading ────────────────────────────────────────────────────────────
     async _loadPdf() {
-      const pdf = await __webpack_exports__getDocument({ url: this._url, withCredentials: false }).promise;
-      this._total = pdf.numPages;
-      const fp = await pdf.getPage(1);
-      const vp0 = fp.getViewport({ scale: 1 });
-      this._pageAspect = vp0.height / vp0.width;
-      for (let i = 1; i <= this._total; i++) {
-        if (this._loaderTx) this._loaderTx.textContent = `Loading ${i} / ${this._total}\u2026`;
-        const page = await pdf.getPage(i);
-        const dpr = clamp(window.devicePixelRatio || 1, 1, this._opts.maxDpr);
-        const rW = 1200 * dpr;
-        const vp = page.getViewport({ scale: rW / vp0.width });
-        const cvs = document.createElement("canvas");
-        cvs.width = vp.width;
-        cvs.height = vp.height;
-        await page.render({ canvasContext: cvs.getContext("2d"), viewport: vp }).promise;
-        this._pages.push(cvs);
-      }
+      const loadingTask = __webpack_exports__getDocument({ url: this._url, withCredentials: false });
+      this._pdf = await loadingTask.promise;
+      this._total = this._pdf.numPages;
+      await this._prerenderAll();
       this._loader.hidden = true;
-      this._drawSpread();
+      this._renderSpread(0, false);
+    }
+    async _prerenderAll() {
+      this._loaderText = this._el.querySelector(".pfb__loader-text");
+      for (let i = 1; i <= this._total; i++) {
+        const canvas = await this._renderPage(i);
+        this._pages.push(canvas);
+        if (this._loaderText) {
+          this._loaderText.textContent = `Loading ${i} / ${this._total}\u2026`;
+        }
+      }
+    }
+    async _renderPage(pageNum) {
+      const page = await this._pdf.getPage(pageNum);
+      const dpr = clamp(window.devicePixelRatio || 1, 1, this._opts.maxDpr);
+      const viewport = page.getViewport({ scale: 1 });
+      const baseW = 900;
+      const scale = baseW / viewport.width;
+      const vp = page.getViewport({ scale: scale * dpr });
+      const canvas = document.createElement("canvas");
+      canvas.width = vp.width;
+      canvas.height = vp.height;
+      canvas.style.width = `${vp.width / dpr}px`;
+      canvas.style.height = `${vp.height / dpr}px`;
+      canvas.dataset.pageNum = pageNum;
+      const ctx = canvas.getContext("2d");
+      await page.render({ canvasContext: ctx, viewport: vp }).promise;
+      return canvas;
+    }
+    // ── Spread Rendering ───────────────────────────────────────────────────────
+    _renderSpread(spreadIndex, animate) {
+      this._spread = clamp(spreadIndex, 0, even(this._total - 1) || 0);
+      const leftIdx = this._spread;
+      const rightIdx = this._spread + 1;
+      this._setFace(this._leftFront, leftIdx);
+      this._setFace(this._rightFront, rightIdx);
+      this._setFace(this._leftBack, null);
+      this._setFace(this._rightBack, null);
       this._updateUI();
     }
-    _bookRect() {
-      const cW = this._canvas.width, cH = this._canvas.height;
-      const mobile = cW < 580;
-      let bW, bH;
-      if (mobile) {
-        bW = Math.min(cW - 24, 440);
-        bH = bW * this._pageAspect;
-      } else {
-        bH = Math.min(cH - 60, 680);
-        bW = bH / this._pageAspect * 2;
-        if (bW > cW - 80) {
-          bW = cW - 80;
-          bH = bW / 2 * this._pageAspect;
-        }
-      }
-      const x = (cW - bW) / 2, y = (cH - bH) / 2;
-      return { x, y, w: bW, h: bH, mobile, pageW: mobile ? bW : bW / 2, pageH: bH };
-    }
-    _drawPage(ctx, canvas, px, py, pw, ph) {
-      ctx.fillStyle = "#fdfaf5";
-      ctx.fillRect(px, py, pw, ph);
-      if (canvas) ctx.drawImage(canvas, px, py, pw, ph);
-      ctx.strokeStyle = "rgba(0,0,0,0.07)";
-      ctx.lineWidth = 1;
-      ctx.strokeRect(px + 0.5, py + 0.5, pw - 1, ph - 1);
-    }
-    _drawSpine(ctx, sx, sy, sh) {
-      const g = ctx.createLinearGradient(sx - 10, 0, sx + 10, 0);
-      g.addColorStop(0, "rgba(0,0,0,0.2)");
-      g.addColorStop(0.45, "rgba(0,0,0,0.5)");
-      g.addColorStop(0.55, "rgba(0,0,0,0.5)");
-      g.addColorStop(1, "rgba(0,0,0,0.08)");
-      ctx.fillStyle = g;
-      ctx.fillRect(sx - 10, sy, 20, sh);
-    }
-    _drawBookShadow(bx, by, bw, bh) {
-      const ctx = this._ctx;
-      const g = ctx.createLinearGradient(0, by + bh, 0, by + bh + 40);
-      g.addColorStop(0, "rgba(0,0,0,0.35)");
-      g.addColorStop(1, "rgba(0,0,0,0)");
-      ctx.fillStyle = g;
-      ctx.fillRect(bx, by + bh - 4, bw, 44);
-    }
-    _drawSpread(flip) {
-      const ctx = this._ctx;
-      const { x, y, w, h, mobile, pageW, pageH } = this._bookRect();
-      ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-      this._drawBookShadow(x, y, w, h);
-      if (mobile) {
-        this._drawPage(ctx, this._pages[this._spread] || null, x, y, pageW, pageH);
-      } else {
-        this._drawPage(ctx, this._pages[this._spread] || null, x, y, pageW, pageH);
-        this._drawPage(ctx, this._pages[this._spread + 1] || null, x + pageW, y, pageW, pageH);
-        this._drawSpine(ctx, x + pageW, y, pageH);
+    _setFace(face, pageIndex) {
+      face.innerHTML = "";
+      if (pageIndex === null || pageIndex >= this._total) {
+        face.classList.add("pfb__face--blank");
+        return;
+      }
+      face.classList.remove("pfb__face--blank");
+      const canvas = this._pages[pageIndex];
+      if (canvas) {
+        const clone = canvas.cloneNode();
+        clone.getContext("2d").drawImage(canvas, 0, 0);
+        face.appendChild(clone);
       }
-      if (flip) this._renderFlip(ctx, flip, x, y, pageW, pageH, mobile);
     }
-    _renderFlip(ctx, { t, dir }, bx, by, pageW, pageH) {
-      const si = this._opts.shadowIntensity;
-      const sp = this._spread;
+    // ── Flip Animation ────────────────────────────────────────────────────────
+    _flip(dir) {
+      if (this._flipping) return;
+      const next = this._spread + dir * 2;
+      if (next < 0 || next > even(this._total - 1)) return;
+      this._animateFlip(dir, next);
+    }
+    _animateFlip(dir, targetSpread) {
+      if (this._flipping) return;
+      this._flipping = true;
+      const { flipDuration, shadowIntensity, onFlip } = this._opts;
+      const currentLeft = this._spread;
+      const currentRight = this._spread + 1;
+      onFlip?.(currentLeft + 1, targetSpread + 1);
       if (dir === 1) {
-        const foldX = lerp(bx + pageW * 2, bx + pageW, t);
-        const turnW = bx + pageW * 2 - foldX;
-        this._drawPage(ctx, this._pages[sp + 2] || null, bx, by, pageW, pageH);
-        this._drawPage(ctx, this._pages[sp + 3] || null, bx + pageW, by, pageW, pageH);
-        if (foldX > bx + pageW) {
-          ctx.save();
-          ctx.beginPath();
-          ctx.rect(bx + pageW, by, foldX - (bx + pageW), pageH);
-          ctx.clip();
-          this._drawPage(ctx, this._pages[sp + 1] || null, bx + pageW, by, pageW, pageH);
-          ctx.restore();
-        }
-        if (turnW > 1) {
-          ctx.save();
-          ctx.beginPath();
-          ctx.rect(foldX, by, turnW, pageH);
-          ctx.clip();
-          const sc = Math.max(0.82, 1 - t * 0.18);
-          ctx.translate(foldX + turnW, by);
-          ctx.scale(-sc, 1);
-          ctx.drawImage(this._pages[sp + 2] || this._pages[sp + 1], 0, 0, turnW / sc, pageH);
-          const lg = ctx.createLinearGradient(0, 0, turnW / sc, 0);
-          lg.addColorStop(0, `rgba(255,255,255,${0.08 * (1 - t)})`);
-          lg.addColorStop(1, `rgba(0,0,0,${0.12 * t})`);
-          ctx.fillStyle = lg;
-          ctx.fillRect(0, 0, turnW / sc, pageH);
-          ctx.restore();
-        }
-        const fg = ctx.createLinearGradient(foldX - 28, 0, foldX + 8, 0);
-        fg.addColorStop(0, "rgba(0,0,0,0)");
-        fg.addColorStop(0.55, `rgba(0,0,0,${si * 0.55})`);
-        fg.addColorStop(0.85, `rgba(0,0,0,${si})`);
-        fg.addColorStop(1, "rgba(255,255,255,0.15)");
-        ctx.fillStyle = fg;
-        ctx.fillRect(foldX - 28, by, 36, pageH);
-        const cg = ctx.createLinearGradient(bx + pageW, 0, bx + pageW - 50, 0);
-        cg.addColorStop(0, `rgba(0,0,0,${si * 0.4 * (1 - t)})`);
-        cg.addColorStop(1, "rgba(0,0,0,0)");
-        ctx.fillStyle = cg;
-        ctx.fillRect(bx + pageW - 50, by, 50, pageH);
+        this._setFace(this._rightBack, targetSpread + 1);
+        this._setFace(this._leftBack, targetSpread);
       } else {
-        const foldX = lerp(bx, bx + pageW, t);
-        const turnW = foldX - bx;
-        this._drawPage(ctx, this._pages[sp - 2] || null, bx, by, pageW, pageH);
-        this._drawPage(ctx, this._pages[sp - 1] || null, bx + pageW, by, pageW, pageH);
-        if (foldX < bx + pageW) {
-          ctx.save();
-          ctx.beginPath();
-          ctx.rect(foldX, by, bx + pageW - foldX, pageH);
-          ctx.clip();
-          this._drawPage(ctx, this._pages[sp] || null, bx, by, pageW, pageH);
-          ctx.restore();
-        }
-        if (turnW > 1) {
-          ctx.save();
-          ctx.beginPath();
-          ctx.rect(bx, by, turnW, pageH);
-          ctx.clip();
-          const sc = Math.max(0.82, 1 - t * 0.18);
-          ctx.translate(bx + turnW, by);
-          ctx.scale(-sc, 1);
-          ctx.drawImage(this._pages[sp - 2] || this._pages[sp], 0, 0, turnW / sc, pageH);
-          const lg = ctx.createLinearGradient(turnW / sc, 0, 0, 0);
-          lg.addColorStop(0, `rgba(255,255,255,${0.08 * (1 - t)})`);
-          lg.addColorStop(1, `rgba(0,0,0,${0.12 * t})`);
-          ctx.fillStyle = lg;
-          ctx.fillRect(0, 0, turnW / sc, pageH);
-          ctx.restore();
-        }
-        const fg = ctx.createLinearGradient(foldX - 8, 0, foldX + 28, 0);
-        fg.addColorStop(0, "rgba(255,255,255,0.15)");
-        fg.addColorStop(0.15, `rgba(0,0,0,${si})`);
-        fg.addColorStop(0.45, `rgba(0,0,0,${si * 0.55})`);
-        fg.addColorStop(1, "rgba(0,0,0,0)");
-        ctx.fillStyle = fg;
-        ctx.fillRect(foldX - 8, by, 36, pageH);
-        const cg = ctx.createLinearGradient(bx + pageW, 0, bx + pageW + 50, 0);
-        cg.addColorStop(0, `rgba(0,0,0,${si * 0.4 * (1 - t)})`);
-        cg.addColorStop(1, "rgba(0,0,0,0)");
-        ctx.fillStyle = cg;
-        ctx.fillRect(bx + pageW, by, 50, pageH);
-      }
-      this._drawSpine(ctx, bx + pageW, by, pageH);
-    }
-    _startFlip(dir, targetSpread) {
-      if (this._flipping || !this._total) return;
-      const next = targetSpread !== void 0 ? targetSpread : this._spread + dir * 2;
-      if (next < 0 || next + 1 > this._total) return;
-      this._flipping = true;
-      this._opts.onFlip?.(this._spread + 1, next + 1);
-      const duration = this._opts.flipDuration;
-      let start = null;
+        this._setFace(this._leftBack, targetSpread);
+        this._setFace(this._rightBack, targetSpread + 1);
+      }
+      const flippingPage = dir === 1 ? this._el.querySelector(".pfb__page--right") : this._el.querySelector(".pfb__page--left");
+      const shadow2 = dir === 1 ? this._rightShadow : this._leftShadow;
+      const startAngle = 0;
+      const endAngle = dir === 1 ? -180 : 180;
+      const easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+      let startTime = null;
       const step = (ts) => {
-        if (!start) start = ts;
-        const raw = clamp((ts - start) / duration, 0, 1);
-        const t = easeInOut(raw);
-        this._drawSpread({ t, dir });
-        if (raw < 1) {
-          this._animId = requestAnimationFrame(step);
+        if (!startTime) startTime = ts;
+        const elapsed = ts - startTime;
+        const progress = clamp(elapsed / flipDuration, 0, 1);
+        const eased = easeInOut(progress);
+        const angle = startAngle + (endAngle - startAngle) * eased;
+        flippingPage.style.transform = `rotateY(${angle}deg)`;
+        const shadowPeak = Math.sin(progress * Math.PI);
+        shadow2.style.opacity = shadowPeak * shadowIntensity;
+        if (progress < 1) {
+          requestAnimationFrame(step);
         } else {
-          this._spread = next;
+          flippingPage.style.transform = "";
+          shadow2.style.opacity = 0;
+          this._spread = targetSpread;
           this._flipping = false;
-          this._drawSpread();
-          this._updateUI();
+          this._renderSpread(targetSpread, false);
         }
       };
-      this._animId = requestAnimationFrame(step);
+      requestAnimationFrame(step);
     }
+    // ── Events ────────────────────────────────────────────────────────────────
     _bindEvents() {
-      this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev").forEach((b) => b.addEventListener("click", () => this.prev()));
-      this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").forEach((b) => b.addEventListener("click", () => this.next()));
+      const prevBtns = this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev");
+      const nextBtns = this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next");
+      prevBtns.forEach((b) => b.addEventListener("click", () => this.prev()));
+      nextBtns.forEach((b) => b.addEventListener("click", () => this.next()));
       this._onKey = (e) => {
-        if (["ArrowRight", "ArrowDown"].includes(e.key)) this.next();
-        if (["ArrowLeft", "ArrowUp"].includes(e.key)) this.prev();
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") this.next();
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") this.prev();
       };
       window.addEventListener("keydown", this._onKey);
-      this._canvas.addEventListener("click", (e) => {
-        const rect = this._canvas.getBoundingClientRect();
-        const cx = e.clientX - rect.left;
-        if (cx < this._canvas.width / 2) this.prev();
-        else this.next();
-      });
-      let tx0 = 0;
-      this._canvas.addEventListener("touchstart", (e) => {
-        tx0 = e.touches[0].clientX;
+      if (isTouchDevice()) this._bindSwipe();
+      this._onResize = () => this._updateUI();
+      window.addEventListener("resize", this._onResize);
+    }
+    _bindSwipe() {
+      let startX = 0;
+      this._stage.addEventListener("touchstart", (e) => {
+        startX = e.touches[0].clientX;
       }, { passive: true });
-      this._canvas.addEventListener("touchend", (e) => {
-        const dx = e.changedTouches[0].clientX - tx0;
+      this._stage.addEventListener("touchend", (e) => {
+        const dx = e.changedTouches[0].clientX - startX;
         if (Math.abs(dx) > 40) dx < 0 ? this.next() : this.prev();
       }, { passive: true });
-      this._onResize = () => this._resizeCanvas();
-      window.addEventListener("resize", this._onResize);
     }
+    // ── UI Helpers ────────────────────────────────────────────────────────────
     _updateUI() {
-      this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev").forEach((b) => {
-        b.disabled = this._spread <= 0;
+      if (!this._pageInfo) return;
+      const leftPage = this._spread + 1;
+      const rightPage = this._spread + 2;
+      if (rightPage <= this._total) {
+        this._pageInfo.textContent = `${leftPage} \u2013 ${rightPage} / ${this._total}`;
+      } else {
+        this._pageInfo.textContent = `${leftPage} / ${this._total}`;
+      }
+      const prevBtns = this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev");
+      const nextBtns = this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next");
+      prevBtns.forEach((b) => {
+        b.disabled = this._spread === 0;
       });
-      this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").forEach((b) => {
+      nextBtns.forEach((b) => {
         b.disabled = this._spread + 2 >= this._total;
       });
-      if (this._pageInfo) {
-        const r = this._spread + 2;
-        this._pageInfo.textContent = r <= this._total ? `${this._spread + 1} \u2013 ${r} / ${this._total}` : `${this._spread + 1} / ${this._total}`;
-      }
     }
     _showError(msg) {
       this._loader.hidden = true;
       this._errorEl.hidden = false;
-      this._errorEl.textContent = `\u26A0\uFE0F ${msg}`;
+      this._errorEl.textContent = `\u26A0\uFE0F Could not load PDF: ${msg}`;
     }
   };
   function createFlipbook(container, pdfUrl, options) {