[Plan B] TF-2764 Printing pdf when preview

[dab246]

Issue

#2764

Task

• [x] Preview PDF file on all browser
• [x] Download PDF file on all browser
• [x] Printing PDF file on all browser (but file names are randomly generated from the respective browser)
• [x] Show current page, total page in PDFViewer
• [x] Zoom in/Zoom out in PDF Viewer

Demo

https://github.com/linagora/tmail-flutter/assets/80730648/77cdcc54-3684-453e-aaa8-f8fc75abeae9

[hoangdat]

Brief about this proposal: View one-by-one PDF in Dart side in only Web app

• Download PDF file
• Open PDF with https://pub.dev/packages/syncfusion_flutter_pdfviewer
• Viewer will stay overlay in web app tab (same with gmail)
• Add actions: Download, Print, Zoom In/Out, Jump page in viewer
• But downside note: print still not have a exactly name

Hi @chibenwa what do you think with this proposal (we were in progress while you sent email about revert PDF viewer). And for sure, we need to verify very carefully in all OS and browser.

[github-actions[bot]]

This PR has been deployed to https://linagora.github.io/tmail-flutter/2780.

[hoangdat]

• [ ] the same page maybe reload many times when trying to scroll document

https://github.com/linagora/tmail-flutter/assets/6462404/8530d525-8dc5-49dc-96fe-bd2711cb7490

[hoangdat]

Chrome:

• [ ] print big file maybe we should show popup to indicate user
• [ ] scroll document will skip some pages: Fx: document have 3 pages, can not scroll to page 2

[hoangdat]

• [ ] try to open 2 documents in the same time, document 1 will show well, but document 2 can not load

https://github.com/linagora/tmail-flutter/assets/6462404/3bfa4e59-f0d0-4f25-9b65-9ef1a42e6cb7

[dab246]

• [ ] try to open 2 documents in the same time, document 1 will show well, but document 2 can not load

Screen.Recording.2024-05-07.at.16.51.24.mov

We should only have 1 page at a time, preventing opening multiple pages at a time.

[dab246]

Chrome:

• [ ] print big file maybe we should show popup to indicate user

IMO, We just need to show the toast, which is enough for the user to understand, to avoid blocking other user actions.

[hoangdat]

Firefox:

• [ ] Name of print file in Firefox wrong

[dab246]

Chrome:

• [x] print big file maybe we should show popup to indicate user

• [x] try to open 2 documents in the same time, document 1 will show well, but document 2 can not load

Screen.Recording.2024-05-07.at.16.51.24.mov

Solution

• Perform download attachment in PDF Viewer

Demo

https://github.com/linagora/tmail-flutter/assets/80730648/ceab8ed2-c33a-412b-81a7-b10595825eb6

[dab246]

• [x] the same page maybe reload many times when trying to scroll document
• [x] scroll document will skip some pages: Fx: document have 3 pages, can not scroll to page 2

Solution

• Use pdf_render to cache data when scroll page in PDF Viewer instead of syncfusion_flutter_pdfviewer

Demo

https://github.com/linagora/tmail-flutter/assets/80730648/89e93090-f56d-4067-8ccf-00cd5d5deee2

[dab246]

• [ ] Memory leak
• [ ] Disable go to page
• [ ] Set the standard size for the page

[dab246]

• [x] Memory leak
• [x] Disable go to page
• [x] Set the standard size for the page

https://github.com/linagora/tmail-flutter/assets/80730648/83792ad2-8f75-4361-a57e-28cf3660147a

[hoangdat]

hi @chibenwa please take a look on demo video, and read the ADR.

At the moment, we still have some things:

• Print name when people try to print, PDF file is ugly. Try many ways, but can not fix (but the download work well)

• Can not jump to page. We can, but to have this we need to trade off with full screen size document.

• Can not scroll by dragging on scroll bar in right screen. But right now, still scroll by mouse.

[hoangdat]

Hi @chibenwa , hope this find you well https://github.com/linagora/tmail-flutter/pull/2780#issuecomment-2116606054

[chibenwa]

Cool.

Proposal: Escape to exit the PDF viewer?

[chibenwa]

Chromium: when printing and "save as pdf" the filename is a UUID

Direct download from the pdf viewer is OK

[chibenwa]

Also on GMail when I click on the grey zone around the PDF document, it closes the document.

[hoangdat]

• [x] Download is ok
• [ ] file name in printing is wrong in Edge, Firefox, Safari is pdf.js viewer -> Should hide this button in these browsers
• [ ] click to outside of document or Esc keyboard -> close viewer

[dab246]

• [x] Download is ok
• [x] file name in printing is wrong in Edge, Firefox, Safari is pdf.js viewer -> Should hide this button in these browsers
• [x] click to outside of document or Esc keyboard -> close viewer

Done. @hoangdat Please review again.

• Chrome browser:

https://github.com/linagora/tmail-flutter/assets/80730648/72f551b7-c1d1-4cbf-a652-2a62c7e40348

• Firefox browser:

https://github.com/linagora/tmail-flutter/assets/80730648/1f98231c-b0b7-42d4-b806-de806983e3f4