Simplify the PDF Viewer on Web

[marcaaron]

If you haven’t already, check out our contributing guidelines for onboarding!

---

We currently are using PDF.js to show PDFs inside an iframe on web and also hosting some demo code for the Mozilla PDF viewer. For this issue we will need to replace the complicated PDF viewer code with a simple bare bones viewer.

Deliverables:

• Replace the existing PDF.js code + usage here with a PDF viewer using this library - https://github.com/wojtekmaj/react-pdf
• That package is largely a React wrapper around PDF.js and should be simple to implement by using the recipe here to display all pages
• Make sure to use the webpack esm imports https://github.com/wojtekmaj/react-pdf#webpack

Upwork: https://www.upwork.com/jobs/~01eb10da2c43ab7ead

[parasharrajat]

Proposal

1. Use the react-pdf lib and replace the Pdf.js code completely.
2. Drop the Pdf.js vendor code from the repo.
3. Optimize the Pdf page rendering so that If a pdf have hundreds of page, it doesn't become a memory pit. (the possible solution is to render only a couple of pages before and after the current page and clean up as the user navigates through pages ).
4. Take input of design from the team and Update if needed to match the product theme.

Questions

1. Do we need to support non-Latin characters here?

[marcaaron]

Do we need to support non-Latin characters

I think if we support them now then we should continue to support them.

[parasharrajat]

Is this issue on Hold? If not, Can I work on this one, I see it's been sometime it's unassigned? I already submitted a proposal above.

[marcaaron]

Proposal looks good @parasharrajat. I don't think we need to worry about 3.

[parasharrajat]

So it seems that we have to use our own CSS rules to modify the designs as react-pdf does not provide the styling like the old pdf viewer. Any inputs here.
I am planning to put the basic styling same as the old PDF viewer into a global CSS file to modify the PDF look.

To adjust the width we can use the useWindowDimensions and then set the width of the page.

What should the breakpoints and their respective width for the pages?
a) Set the page to 100% on the mobileResponsiveWidthBreakpoint.
b) need help here.

[marcaaron]

I would maybe pause on adding any CSS for now and we can loop in @shawnborton to help advise on the styles.

Is there any sort of default look to it at all with styling?

we have to use our own CSS rules to modify the designs

By CSS do you mean actual .css file or can we add inline styles like we do for most other react-native/react-native-web components?

[laurenreidexpensify]

@parasharrajat I just issued payment for this one for you 👍🏽