Skip to content

[NEW] PDF message attachment preview (client side rendering)#10519

Merged
ggazzo merged 7 commits intoRocketChat:developfrom
kb0304:pdfpreview
Oct 15, 2018
Merged

[NEW] PDF message attachment preview (client side rendering)#10519
ggazzo merged 7 commits intoRocketChat:developfrom
kb0304:pdfpreview

Conversation

@kb0304
Copy link
Copy Markdown
Contributor

@kb0304 kb0304 commented Apr 20, 2018

Preview of PDF files
Rendering first page on a canvas using a Worker on client side

Closes #2741
pdf-preview

@kb0304 kb0304 changed the title [NEW] PDF preview (client side rendering) [NEW] PDF message attachment preview (client side rendering) Apr 20, 2018
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10519 April 20, 2018 02:32 Inactive
@gdelavald gdelavald requested a review from a team April 20, 2018 02:34
@graywolf336
Copy link
Copy Markdown
Contributor

@kb0304 can you link to your repository where the worker code lives? That way we can review that code as well? Thanks!

@kb0304
Copy link
Copy Markdown
Contributor Author

kb0304 commented Apr 20, 2018

@graywolf336 Sure, here's the link

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10519 April 20, 2018 09:40 Inactive
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10519 April 20, 2018 09:58 Inactive
@graywolf336
Copy link
Copy Markdown
Contributor

Not sure how I feel about this. Why are you only committing the build files and not the source files? Why not create a new package inside of Rocket.Chat if there's no real documentation for other projects to use your source code?

@kb0304
Copy link
Copy Markdown
Contributor Author

kb0304 commented Apr 20, 2018

@graywolf336
Its just a wrapper for Mozilla's pdf.js (source code)
The build files are taken from pdfjs-dist, and just added this to export globaly.

I initially used pascoual:pdfjs, but since the version of pdf.js used is outdated and it no longer seems to be maintained I made a wrapper myself and used it.

Documentation, examples to use it are available here

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10519 April 21, 2018 18:35 Inactive
@ggazzo ggazzo added this to the 0.67.0 milestone Jul 3, 2018
@ggazzo ggazzo added the area: ui/ux Related to UI/UX, frontend code, accessibility, and user interaction label Jul 19, 2018
@theorenck theorenck modified the milestones: 0.67.0, 0.68.0 Jul 19, 2018
@theorenck theorenck modified the milestones: 0.68.0, Short-term Jul 31, 2018
@tobzsc
Copy link
Copy Markdown

tobzsc commented Sep 27, 2018

Any news here? That's a very nice feature.

import _ from 'underscore';
import moment from 'moment';

pdfjsLib.GlobalWorkerOptions.workerSrc = '/packages/kb0304_pdfjs/build/pdf.worker.js';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This path can cause some troubles if Rocket.Chat is running under a root URL with a subdirectory.


Template.message.onViewRendered = function(context) {
return this._domrange.onAttached(function(domRange) {
return this._domrange.onAttached((domRange) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ggazzo Do you know if Meteor provides a public method to access this property?

@ugzv
Copy link
Copy Markdown

ugzv commented Oct 3, 2018

Any news on this? Looks like a very helpful addition to the Rocket.Chat!

@ggazzo ggazzo temporarily deployed to rocket-chat-pr-10519 October 15, 2018 13:58 Inactive
@ggazzo ggazzo merged commit 9ac5b55 into RocketChat:develop Oct 15, 2018
@ggazzo ggazzo modified the milestones: Short-term, 0.71.0 Oct 15, 2018
@rafaelks
Copy link
Copy Markdown
Contributor

This pull-request started crashing Safari 12, I cannot share the GIF here because there's sensitive information on it, but I shared with the internal team already.

@sampaiodiego sampaiodiego mentioned this pull request Oct 27, 2018
@datafukuro
Copy link
Copy Markdown

Does this feature needs to be enabled somewhere in the administration settings?
As it doesn't show preview of any pdf sent to a direct message or group. I have SentOS 7 and version 0.71.0 of RC

@tobzsc
Copy link
Copy Markdown

tobzsc commented Nov 2, 2018

I have the same issue. Does not seem to work with latest stable.

@beranPro
Copy link
Copy Markdown

beranPro commented Nov 2, 2018

#12449

@reetp
Copy link
Copy Markdown
Collaborator

reetp commented Nov 2, 2018

Tested on my own 0.71.1 test setup and on https://openrocket.chat/general
No apparent errors on upload - file is there and can be downloaded, but no preview/thumbnail

@flam22
Copy link
Copy Markdown

flam22 commented Nov 15, 2018

The reason the pdf preview no longer works is that it was broken by PR #12375. An extra test was added to disable the preview in safari versions <= 12. That also affects Chrome (which may or may not be intentional).

In addition the original first line of 'renderPdfToCanvas' was changed to use a regular expression but a '!' was omitted, which stops it ever producing a preview. It should read:
if (!pdfLink || ! /\.pdf$/i.test(pdfLink)) { return; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: ui/ux Related to UI/UX, frontend code, accessibility, and user interaction

Projects

None yet

Development

Successfully merging this pull request may close these issues.