From ebee06b37ac1b7c74ac8e3bf3bf0418cceb9aaac Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 10 Feb 2025 15:02:38 +0100 Subject: [PATCH] ui: test new snapshotter for thumbnail --- .../components/AssistStats/pdfGenerator.ts | 2 +- .../components/WidgetForm/renderMap.ts | 2 +- .../Session_/Highlight/HighlightPanel.tsx | 26 ++++++++++- frontend/package.json | 5 +-- frontend/yarn.lock | 44 ++++++++++++------- 5 files changed, 57 insertions(+), 22 deletions(-) diff --git a/frontend/app/components/AssistStats/pdfGenerator.ts b/frontend/app/components/AssistStats/pdfGenerator.ts index 1364343f7..2d1f0f3f1 100644 --- a/frontend/app/components/AssistStats/pdfGenerator.ts +++ b/frontend/app/components/AssistStats/pdfGenerator.ts @@ -2,7 +2,7 @@ import { fileNameFormat } from 'App/utils'; export const getPdf2 = async () => { // @ts-ignore - import('html2canvas').then(({ default: html2canvas }) => { + import('@codewonders/html2canvas').then(({ default: html2canvas }) => { // @ts-ignore window.html2canvas = html2canvas; diff --git a/frontend/app/components/Dashboard/components/WidgetForm/renderMap.ts b/frontend/app/components/Dashboard/components/WidgetForm/renderMap.ts index 05aaff537..c2cc128ac 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/renderMap.ts +++ b/frontend/app/components/Dashboard/components/WidgetForm/renderMap.ts @@ -1,6 +1,6 @@ export const renderClickmapThumbnail = () => { // @ts-ignore - return import('html2canvas').then(({ default: html2canvas }) => { + return import('@codewonders/html2canvas').then(({ default: html2canvas }) => { // @ts-ignore window.html2canvas = html2canvas; const element = document.querySelector('#clickmap-render * iframe').contentDocument.body diff --git a/frontend/app/components/Session_/Highlight/HighlightPanel.tsx b/frontend/app/components/Session_/Highlight/HighlightPanel.tsx index c992fde91..47b84bd5a 100644 --- a/frontend/app/components/Session_/Highlight/HighlightPanel.tsx +++ b/frontend/app/components/Session_/Highlight/HighlightPanel.tsx @@ -239,10 +239,32 @@ window.__debugElementToImage = (el) => elementToImage(el).then(img => { a.click(); }); -function elementToImage(doc: Document) { +async function elementToImage() { + const constraints = { + video: { + displaySurface: 'browser', + preferCurrentTab: true, + }, + preferCurrentTab: true, + monitorTypeSurfaces: "exclude", + audio: false, + }; + const stream = await navigator.mediaDevices.getDisplayMedia(constraints); + const track = stream.getVideoTracks()[0]; + const imageCapture = new ImageCapture(track); + const bitmap = await imageCapture.grabFrame(); + track.stop(); + const canvas = document.createElement('canvas'); + canvas.width = bitmap.width; + canvas.height = bitmap.height; + canvas.getContext('2d').drawImage(bitmap, 0, 0); + return canvas.toDataURL('image/png'); +} + +function elementToImage1(doc: Document) { const el = doc.body const srcMap = new WeakMap() - return import('html2canvas').then(({ default: html2canvas }) => { + return import('@codewonders/html2canvas').then(({ default: html2canvas }) => { const images = doc.querySelectorAll('img') images.forEach((img) => { const sameOrigin = new URL(img.src, location.href).origin === location.origin diff --git a/frontend/package.json b/frontend/package.json index 7a39d78d2..9c860fb9b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,6 +24,7 @@ "dependencies": { "@ant-design/icons": "^5.2.5", "@babel/plugin-transform-private-methods": "^7.23.3", + "@codewonders/html2canvas": "^1.0.2", "@floating-ui/react-dom-interactions": "^0.10.3", "@medv/finder": "^4.0.2", "@sentry/browser": "^5.21.1", @@ -39,9 +40,7 @@ "fflate": "^0.8.2", "fzstd": "^0.1.1", "hls.js": "^1.5.13", - "html-to-image": "^1.9.0", - "html2canvas": "^1.4.1", - "html2canvas-pro": "^1.5.8", + "html-to-image": "^1.11.11", "immutable": "^4.3.7", "jest-environment-jsdom": "^29.5.0", "js-untar": "^2.0.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 40e3667b9..3c1c78138 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1683,6 +1683,15 @@ __metadata: languageName: node linkType: hard +"@codewonders/html2canvas@npm:^1.0.2": + version: 1.0.2 + resolution: "@codewonders/html2canvas@npm:1.0.2" + dependencies: + css-line-break: "npm:1.1.1" + checksum: 10c1/04d703efb85773e3ce2f6c804a1434a9b50b603872f0b9e855c4d569b86d86a6a3176f736691e29515eb7d96d2e9414e390a5f5f359e663008b50eace2ed09c3 + languageName: node + linkType: hard + "@colors/colors@npm:1.5.0": version: 1.5.0 resolution: "@colors/colors@npm:1.5.0" @@ -4881,6 +4890,13 @@ __metadata: languageName: node linkType: hard +"base64-arraybuffer@npm:^0.2.0": + version: 0.2.0 + resolution: "base64-arraybuffer@npm:0.2.0" + checksum: 10c1/2ea35fa6360eb84a97dc530d6098c6c8b2ec7a6edbba91c7dc11775d9b3d5bc757ad15bdc12db295536b8b55c894b13b1689eebf67ba70fd43f89ce3ba37ee97 + languageName: node + linkType: hard + "base64-arraybuffer@npm:^1.0.2": version: 1.0.2 resolution: "base64-arraybuffer@npm:1.0.2" @@ -5933,6 +5949,15 @@ __metadata: languageName: node linkType: hard +"css-line-break@npm:1.1.1": + version: 1.1.1 + resolution: "css-line-break@npm:1.1.1" + dependencies: + base64-arraybuffer: "npm:^0.2.0" + checksum: 10c1/62939681b4182df1c0ad1dae9e6acb6ef27e38cee714b52b8fb6e2478b8e0d3f7386bb619eab651c76ccfc78ee50db136a5fed9b333c8795fadf5b511baf22ab + languageName: node + linkType: hard + "css-line-break@npm:^2.1.0": version: 2.1.0 resolution: "css-line-break@npm:2.1.0" @@ -8624,7 +8649,7 @@ __metadata: languageName: node linkType: hard -"html-to-image@npm:^1.9.0": +"html-to-image@npm:^1.11.11": version: 1.11.11 resolution: "html-to-image@npm:1.11.11" checksum: 10c1/d46f5586f2a8b2f0bd5964ced849a07edc75efb6fdbf74afcfce4bf0d41c2b3b13f0e45b5cbe16f2ff41f1bb5c527ecf002598f9c47098ef56e8f968c87c4d9c @@ -8652,17 +8677,7 @@ __metadata: languageName: node linkType: hard -"html2canvas-pro@npm:^1.5.8": - version: 1.5.8 - resolution: "html2canvas-pro@npm:1.5.8" - dependencies: - css-line-break: "npm:^2.1.0" - text-segmentation: "npm:^1.0.3" - checksum: 10c1/1ee4751bc65e307a483e994c7d1ec446c8f2bab27fb1a623551a866c0043f1e5dbfc879d128885f4f6e82d760f620ee8b87f02e8969442d337f8cb5a01cd594b - languageName: node - linkType: hard - -"html2canvas@npm:^1.0.0-rc.5, html2canvas@npm:^1.4.1": +"html2canvas@npm:^1.0.0-rc.5": version: 1.4.1 resolution: "html2canvas@npm:1.4.1" dependencies: @@ -11590,6 +11605,7 @@ __metadata: "@babel/preset-react": "npm:^7.22.15" "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" + "@codewonders/html2canvas": "npm:^1.0.2" "@floating-ui/react-dom-interactions": "npm:^0.10.3" "@jest/globals": "npm:^29.7.0" "@medv/finder": "npm:^4.0.2" @@ -11635,10 +11651,8 @@ __metadata: file-loader: "npm:^6.2.0" fzstd: "npm:^0.1.1" hls.js: "npm:^1.5.13" - html-to-image: "npm:^1.9.0" + html-to-image: "npm:^1.11.11" html-webpack-plugin: "npm:^5.5.0" - html2canvas: "npm:^1.4.1" - html2canvas-pro: "npm:^1.5.8" immutable: "npm:^4.3.7" jest: "npm:^29.5.0" jest-environment-jsdom: "npm:^29.5.0"