[PR #4713] [CLOSED] Implement PDF reader zoom controls #4323

Closed
opened 2026-04-25 00:19:17 +02:00 by adam · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4713
Author: @farhanisrakalvy
Created: 10/1/2025
Status: Closed

Base: masterHead: PDF_zoomIn_zoomOut


📝 Commits (2)

  • c4e59f6 Implement PDF reader zoom controls and fix theme support
  • 5f5292d Remove binary files (PDF/EPUB) and add to .gitignore

📊 Changes

20 files changed (+923 additions, -112 deletions)

View changed files

📝 .gitignore (+7 -0)
📝 client/assets/app.css (+5 -5)
client/assets/theme.css (+345 -0)
📝 client/components/app/Appbar.vue (+13 -1)
📝 client/components/app/SideRail.vue (+11 -11)
📝 client/components/cards/AuthorCard.vue (+1 -1)
📝 client/components/controls/PlaybackSpeedControl.vue (+52 -8)
📝 client/components/controls/VolumeControl.vue (+144 -22)
📝 client/components/readers/PdfReader.vue (+160 -8)
📝 client/components/stats/PreviewIcons.vue (+5 -5)
📝 client/components/tables/BackupsTable.vue (+10 -4)
📝 client/components/tables/UsersTable.vue (+13 -7)
📝 client/components/widgets/BookDetailsEdit.vue (+11 -1)
📝 client/layouts/default.vue (+5 -1)
📝 client/pages/config/rss-feeds.vue (+13 -6)
📝 client/pages/config/sessions.vue (+18 -9)
📝 client/pages/config/stats.vue (+6 -6)
📝 client/pages/config/users/_id/index.vue (+28 -9)
📝 client/pages/config/users/_id/sessions.vue (+20 -8)
client/store/theme.js (+56 -0)

📄 Description

📌 Summary

Enhanced PDF reader zoom functionality for better reading experience.
Users can now zoom in/out, view current zoom level, select predefined zoom options, and use fit modes.

🛠 Fixes

N/A (new feature enhancement for PDF reader)

🔍 Detailed Description

  • Added keyboard zoom support:
    • + key → zoom in
    • - key → zoom out
  • Zoom range limited between 100% (minimum) and 200% (maximum).
  • Current zoom level is displayed in a zoom box for clarity.
  • Added manual zoom options: 100%, 125%, 150%, 175%, 200%.
  • Introduced Fit Width (PDF page fills the reader’s width) and Fit Page (entire PDF page fits into the screen).
  • Designed to improve usability, accessibility, and comfort while reading eBooks in PDF format.

Testing

Steps to test in the PDF reader:

  1. Open any PDF book in the reader.
  2. Press the + key → PDF zooms in until max 200%.
  3. Press the - key → PDF zooms out until min 100%.
  4. Verify zoom level updates correctly in the zoom box.
  5. Select manual zoom levels (100, 125, 150, 175, 200) → PDF scales accordingly.
  6. Test Fit Width → PDF page adjusts to reader’s full width.
  7. Test Fit Page → entire PDF page is visible within the screen.

Manually tested with multiple PDF files.
Verified zoom limits and display accuracy.
Confirmed fit modes adjust layout correctly.

📷 Screenshots / Demo

Screenshot 2025-10-01 202123 Screenshot 2025-10-01 202206

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/4713 **Author:** [@farhanisrakalvy](https://github.com/farhanisrakalvy) **Created:** 10/1/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `PDF_zoomIn_zoomOut` --- ### 📝 Commits (2) - [`c4e59f6`](https://github.com/advplyr/audiobookshelf/commit/c4e59f61a4e5abe3281aa2c1dd65fc83f117d2fc) Implement PDF reader zoom controls and fix theme support - [`5f5292d`](https://github.com/advplyr/audiobookshelf/commit/5f5292d695873d54a70609ef8c75e796a9305466) Remove binary files (PDF/EPUB) and add to .gitignore ### 📊 Changes **20 files changed** (+923 additions, -112 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+7 -0) 📝 `client/assets/app.css` (+5 -5) ➕ `client/assets/theme.css` (+345 -0) 📝 `client/components/app/Appbar.vue` (+13 -1) 📝 `client/components/app/SideRail.vue` (+11 -11) 📝 `client/components/cards/AuthorCard.vue` (+1 -1) 📝 `client/components/controls/PlaybackSpeedControl.vue` (+52 -8) 📝 `client/components/controls/VolumeControl.vue` (+144 -22) 📝 `client/components/readers/PdfReader.vue` (+160 -8) 📝 `client/components/stats/PreviewIcons.vue` (+5 -5) 📝 `client/components/tables/BackupsTable.vue` (+10 -4) 📝 `client/components/tables/UsersTable.vue` (+13 -7) 📝 `client/components/widgets/BookDetailsEdit.vue` (+11 -1) 📝 `client/layouts/default.vue` (+5 -1) 📝 `client/pages/config/rss-feeds.vue` (+13 -6) 📝 `client/pages/config/sessions.vue` (+18 -9) 📝 `client/pages/config/stats.vue` (+6 -6) 📝 `client/pages/config/users/_id/index.vue` (+28 -9) 📝 `client/pages/config/users/_id/sessions.vue` (+20 -8) ➕ `client/store/theme.js` (+56 -0) </details> ### 📄 Description ## 📌 Summary Enhanced **PDF reader zoom functionality** for better reading experience. Users can now zoom in/out, view current zoom level, select predefined zoom options, and use fit modes. ## 🛠 Fixes N/A (new feature enhancement for PDF reader) ## 🔍 Detailed Description - Added keyboard zoom support: - `+` key → zoom in - `-` key → zoom out - Zoom range limited between **100% (minimum)** and **200% (maximum)**. - Current zoom level is displayed in a zoom box for clarity. - Added manual zoom options: **100%, 125%, 150%, 175%, 200%**. - Introduced **Fit Width** (PDF page fills the reader’s width) and **Fit Page** (entire PDF page fits into the screen). - Designed to improve **usability, accessibility, and comfort** while reading eBooks in PDF format. ## ✅ Testing Steps to test in the PDF reader: 1. Open any PDF book in the reader. 2. Press the `+` key → PDF zooms in until max 200%. 3. Press the `-` key → PDF zooms out until min 100%. 4. Verify zoom level updates correctly in the zoom box. 5. Select manual zoom levels (100, 125, 150, 175, 200) → PDF scales accordingly. 6. Test **Fit Width** → PDF page adjusts to reader’s full width. 7. Test **Fit Page** → entire PDF page is visible within the screen. ✅ Manually tested with multiple PDF files. ✅ Verified zoom limits and display accuracy. ✅ Confirmed fit modes adjust layout correctly. ## 📷 Screenshots / Demo <img width="308" height="344" alt="Screenshot 2025-10-01 202123" src="https://github.com/user-attachments/assets/ef8e81cc-6964-4793-ba4b-df5f6e8ec3f4" /> <img width="1903" height="886" alt="Screenshot 2025-10-01 202206" src="https://github.com/user-attachments/assets/25ec7c0a-1d74-4d8b-802d-17836acb4518" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:19:17 +02:00
adam closed this issue 2026-04-25 00:19:17 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4323