pdf-flipbook 1.0.0 → 1.2.0

package/dist/pdf-flipbook.esm.js

@@ -21209,291 +21209,331 @@ 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 = {
-  /** 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 */
+  flipDuration: 800,
+  shadowIntensity: 0.35,
   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 even = (n) => n % 2 === 0 ? n : n - 1;
-var isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0;
+var lerp = (a, b, t) => a + (b - a) * t;
+var easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 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: ${container}`);
+    if (!this._el) throw new Error("[PdfFlipbook] container not found");
     this._url = pdfUrl;
     this._opts = { ...DEFAULTS, ...options };
     this._pages = [];
-    this._pdf = null;
-    this._total = 0;
     this._spread = 0;
+    this._total = 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._flip(1);
+    this._startFlip(1);
   }
-  /** Go to the previous spread */
   prev() {
-    this._flip(-1);
+    this._startFlip(-1);
   }
-  /** 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);
+  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);
   }
-  /** Destroy the flipbook and clean up */
   destroy() {
-    this._el.innerHTML = "";
-    this._el.classList.remove("pfb", `pfb--${this._opts.theme}`);
-    this._pages = [];
+    cancelAnimationFrame(this._animId);
     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 (err) {
-      console.error("[PdfFlipbook]", err);
-      this._showError(err.message);
-      this._opts.onError?.(err);
+    } catch (e) {
+      console.error("[PdfFlipbook]", e);
+      this._showError(e.message);
+      this._opts.onError?.(e);
     }
   }
-  // ── DOM Shell ──────────────────────────────────────────────────────────────
   _buildShell() {
     this._el.classList.add("pfb", `pfb--${this._opts.theme}`);
     this._el.innerHTML = `
       <div class="pfb__stage">
-        <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>
+        <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__error" hidden></div>
       </div>
-      ${this._opts.toolbar ? `
-      <div class="pfb__toolbar">
-        <button class="pfb__tb-btn pfb__tb-prev" aria-label="Previous">&#8592;</button>
+      ${this._opts.toolbar ? `<div class="pfb__toolbar">
+        <button class="pfb__tb-btn pfb__tb-prev">&#8592;</button>
         <span class="pfb__page-info"></span>
-        <button class="pfb__tb-btn pfb__tb-next" aria-label="Next">&#8594;</button>
+        <button class="pfb__tb-btn pfb__tb-next">&#8594;</button>
       </div>` : ""}
     `;
     this._stage = this._el.querySelector(".pfb__stage");
-    this._book = this._el.querySelector(".pfb__book");
+    this._canvas = this._el.querySelector(".pfb__canvas");
+    this._ctx = this._canvas.getContext("2d");
     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._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 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._renderSpread(0, false);
+    this._resizeCanvas();
   }
-  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;
+  _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();
   }
-  // ── 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);
+  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);
+    }
+    this._loader.hidden = true;
+    this._drawSpread();
     this._updateUI();
   }
-  _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);
+  _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);
     }
+    if (flip) this._renderFlip(ctx, flip, x, y, pageW, pageH, mobile);
   }
-  // ── 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);
+  _renderFlip(ctx, { t, dir }, bx, by, pageW, pageH) {
+    const si = this._opts.shadowIntensity;
+    const sp = this._spread;
     if (dir === 1) {
-      this._setFace(this._rightBack, targetSpread + 1);
-      this._setFace(this._leftBack, targetSpread);
+      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);
     } else {
-      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 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;
     const step = (ts) => {
-      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);
+      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);
       } else {
-        flippingPage.style.transform = "";
-        shadow2.style.opacity = 0;
-        this._spread = targetSpread;
+        this._spread = next;
         this._flipping = false;
-        this._renderSpread(targetSpread, false);
+        this._drawSpread();
+        this._updateUI();
       }
     };
-    requestAnimationFrame(step);
+    this._animId = requestAnimationFrame(step);
   }
-  // ── Events ────────────────────────────────────────────────────────────────
   _bindEvents() {
-    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._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()));
     this._onKey = (e) => {
-      if (e.key === "ArrowRight" || e.key === "ArrowDown") this.next();
-      if (e.key === "ArrowLeft" || e.key === "ArrowUp") this.prev();
+      if (["ArrowRight", "ArrowDown"].includes(e.key)) this.next();
+      if (["ArrowLeft", "ArrowUp"].includes(e.key)) this.prev();
     };
     window.addEventListener("keydown", this._onKey);
-    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;
+    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;
     }, { passive: true });
-    this._stage.addEventListener("touchend", (e) => {
-      const dx = e.changedTouches[0].clientX - startX;
+    this._canvas.addEventListener("touchend", (e) => {
+      const dx = e.changedTouches[0].clientX - tx0;
       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() {
-    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--prev, .pfb__tb-prev").forEach((b) => {
+      b.disabled = this._spread <= 0;
     });
-    nextBtns.forEach((b) => {
+    this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").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 Could not load PDF: ${msg}`;
+    this._errorEl.textContent = `\u26A0\uFE0F ${msg}`;
   }
 };
 function createFlipbook(container, pdfUrl, options) {