search

allenai / pdf-component-library

51 stars 5 forks source link

Add page render context and use it logic in PageWrapper in PDF Component #163

Closed huytr1995 closed 2 years ago

huytr1995 commented 2 years ago

Description

Ref: https://github.com/allenai/scholar/issues/32835 Ref: https://github.com/allenai/scholar/issues/33194

After getting tracking page in & beta v6 of react-pdf. The next step is to improve our loading time and performance for Safari by using single canvas and each page become a URL link background image.

Reviewer Instructions

Add thePageRenderContext.ts and applied the logic for PageWrapper.tsxand verified that each page is rendering as background image as showing by Paul last time. Per discussion with Paul we cant unit test the PageRenderContext due to pdf worker external cant be run local (its vital since PageRenderContext use pdfDocProxy and also mocking canvas is also difficult) so im only creating the PageRenderContext.test.ts. @yensung attached video about Safari performance as u can see now its more fluid not lagging and we can perform stuff on it.

Testing Plan

Verify console.log print out objectURL and open development tool to verify that each page is rendering as background image

Output / Screenshots

image

image

Safari Performance

https://user-images.githubusercontent.com/84343285/184935739-546b706d-2d50-44d8-be59-abf5098c2cd8.mov

Safari Performance on Prod

https://user-images.githubusercontent.com/84343285/184945150-0faf576f-4533-4409-9dc9-321797544b04.mov

A11y

N/A