Skip to main content

File Embed Rendering Overhaul

Background​

File-embed uses google's unofficial file embed API and if it stops working we need some backup plan. Additionally, googles file embed is flaky...it sometimes doesn’t load and seems to be broken in windows.

Goal​

Provide a reliable alternative to existing google drive hack. At the minimum, for this task we should find a better solution for PDF embeds since they are the majority of our embed types:


[https://docs.google.com/document/d/1eCp60KMmwMOzzcmt3GPKLtrad2Nw99Bddec0DdLdhyI/edit](https://docs.google.com/document/d/1eCp60KMmwMOzzcmt3GPKLtrad2Nw99Bddec0DdLdhyI/edit)

TECH NOTE​

_Additionally: file embed seems to NOT work in Windows. This should be fixed as part of this task._


_Ticket: [https://powr-support.zendesk.com/agent/tickets/169271](https://powr-support.zendesk.com/agent/tickets/169271)_


_^ This issue can be reproduced on browserstack/_

Figma Mock for POWr File Embed​

SCENARIO: Filetype PDF and browser supports PDF rendering, then use native rendering

SCENARIO: Filetype PDF and browser DOES NOT support PDF rendering, then use selected rendering engine \ SCENARIO: Filetype Image should embed the image as it does not (NO rendering engine) \ SCENARIO: Filetype anything other than PDF or image should use the rendering engine \ SCENARIO: Selector for rendering engine with Google Viewer as default (see figma mocks) \ SCENARIO: Height should work correctly when using native rendering (change relative height in design, and make sure height changes appropriately).

SCENARIO: Height should work correctly with using microsoft rendering (change relative height in design, and make sure height changes appropriately).

SCENARIO: File embed should work in Windows

YILI SPECS |### Scenario:|### User creates POWr File-Embed for PDF | |-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |GIVEN |existing logic to receive file uploaded to an S3-AWS AND $aws_link pointing on that file | |WHEN |creating embed view of that file | |THEN |use <iframe src="$aws\_link"> formula to create embed | |### Scenario:|### User creates POWr File-Embed for pdf AND their browser is IE OR don’t support native pdf embed | |GIVEN |js ability to detect pdf support: https://stackoverflow.com/a/24115017 OR use this sheet: https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support| |THEN |use existing google file viewer method of creating an iframe | |### Scenario:|### User creates POWr File-Embed for docx, pptx, xlsx, doc, txt, xls, ppt, rtf, ppsx, xlsm, HTML, pps, pptm | |GIVEN |use existing logic to receive file uploaded to an S3-AWS AND $aws_link points on that file | |WHEN |creating embed view of that file | |THEN |Show selector of file embed engine with two options: Google Viewer, MS Office Viewer. (default is google, see the mock) | |### Scenario:|### User creates POWr File-Embed for docx, pptx, xlsx, doc, txt, xls, ppt, rtf, ppsx, xlsm, HTML, pps, pptm | |THEN |use existing google file viewer method of creating an iframe | |### Scenario:|### User creates POWr File-Embed for docx, pptx, xlsx, doc, txt, xls, ppt, rtf, ppsx, xlsm, HTML, pps, pptm AND MS Office Viewer is chosen