pdf-flipbook 1.1.0 → 1.3.0

package/dist/pdf-flipbook.esm.js

@@ -21209,331 +21209,291 @@ if (typeof window !== "undefined") {
   __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) {