Add bookmode, zoom and dpi aware rendering to pdf player

[dulli]

After working on a plugin to read PDF metadata so that I could add magazines to Jellyfin, I realized that the PDF player is almost unusable on phones as you couldn't zoom and on the other hand it was basically hit or miss if the PDF was actually displayed in a readable way on desktop.

Changes

• Improved the determination of the scale parameter to ensure non-blurry PDF rendering on both mobile and desktop viewports.
• Added a book mode (i.e. displaying two pages each (except the cover and the last page) side by side on landscape viewports.
• Added a way to zoom into the displayed PDF page(s) and scroll them.
• Listen to click events (instead of touch events) to change the page, so that you actually can scroll the document without it directly changing the page (and also click through your PDF on the desktop without having to use the keyboard).

Issues

• The blurry PDFs on high DPI displays were mentioned in jellyfin/jellyfin-android#977 and allegedly fixed, but this introduced blurriness (for at least some?) PDFs on low DPI displays (i.e. desktop monitors). Now it shouldn't be blurry for both.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
6.6% Duplication

[dulli]

Is there anything I need to do / can do for this to progress?

[sonarqubecloud[bot]]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
1.2% Duplication on New Code

See analysis details on SonarCloud

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	fa9516e
Status	✅ Deployed!
Preview URL	https://6c0d4bb1.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs View bot logs

[silentTeee]

This would solve a lot of issues for me! I have entire textbooks that I prefer to keep backed up on my server, but I like to reference from my phone occasionally.

As stated, the blurry text is still an issue for such PDFs, so it would really help to have this fixed!

[silentTeee]

Alright, I just played around with this by using the Preview URL and my own server, and I have to say the UX is much nicer:

On mobile (Firefox for Android)

Quality with PDFs

Current Release	This PR

Zoom ability with PDFs

Current Release	This PR
Can't zoom....trying will simply trigger a page change	Can zoom by pushing the expand button at the top-left, can scroll around without abruptly jumping to the next page

Page changing behavior

Current Release	This PR
Tapping on left side brings to previous page, tapping on right side brings to next page.	Tapping on left side brings to previous page, tapping on right side brings to next page. Zooming via the button provided at the top-left does not break this

On PC (Firefox v 122.0 on Ubuntu 22.04 LTS)

Quality with PDFs

Current Release	This PR

Zoom ability with PDFs

Current Release	This PR
No built-in ability to zoom, the browser's zoom function works but does nothing to trigger increased quality as one zooms in (i.e. the initial render is all you get)	Newly provided zoom button at top left works fairly well, resizing the two pages to the width of my screen. One thing I did notice though is that the browser-provided zoom functionality does not work at all on my screen until you click the provided zoom button. Until you do that, the only thing that gets zoomed into is the UI-provided elements. But honestly that's just a nitpick.

Page changing behavior

Current Release	This PR
Only the Arrow Keys can be used.	Both the Arrow Keys and using the Mouse to click on the sides of the view can be used

I couldn't find any obvious bugs to speak of, either, so I'd say this is quite the winner of a PR!