diff --git a/packages/rocketchat-ui-message/client/message.js b/packages/rocketchat-ui-message/client/message.js index da38747d1576..867e9a4c28bd 100644 --- a/packages/rocketchat-ui-message/client/message.js +++ b/packages/rocketchat-ui-message/client/message.js @@ -9,21 +9,34 @@ import moment from 'moment'; import { DateFormat } from 'meteor/rocketchat:lib'; async function renderPdfToCanvas(canvasId, pdfLink) { + const isSafari = /constructor/i.test(window.HTMLElement) || + ((p) => p.toString() === '[object SafariRemoteNotification]')(!window.safari || + (typeof window.safari !== 'undefined' && window.safari.pushNotification)); - if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1) { + if (isSafari) { const [, version] = /Version\/([0-9]+)/.exec(navigator.userAgent) || [null, 0]; if (version <= 12) { return; } } - if (!pdfLink || !/\.pdf$/i.test(pdfLink)) { return; } + if (!pdfLink || !/\.pdf$/i.test(pdfLink)) { + return; + } + const canvas = document.getElementById(canvasId); - if (!canvas) { return; } + if (!canvas) { + return; + } + const pdfjsLib = await import('pdfjs-dist'); pdfjsLib.GlobalWorkerOptions.workerSrc = `${ Meteor.absoluteUrl() }node_modules/pdfjs-dist/build/pdf.worker.js`; + const loader = document.getElementById('js-loading-${canvasId}'); - if (loader) { loader.style.display = 'block'; } + if (loader) { + loader.style.display = 'block'; + } + const pdf = await pdfjsLib.getDocument(pdfLink); const page = await pdf.getPage(1); const scale = 0.5; @@ -35,7 +48,11 @@ async function renderPdfToCanvas(canvasId, pdfLink) { canvasContext: context, viewport, }); - if (loader) { loader.style.display = 'none'; } + + if (loader) { + loader.style.display = 'none'; + } + canvas.style.maxWidth = '-webkit-fill-available'; canvas.style.maxWidth = '-moz-available'; canvas.style.display = 'block';