Request from main process #208

Levminer · May 7, 2022 · f3a3909 · f3a3909
1 parent 5199387
commit f3a3909
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 37 deletions.
diff --git a/app/import/index.html b/app/import/index.html
@@ -130,13 +130,13 @@ <h5 data-loc class="m-0 pt-4">Enter a TOTP secret key and name manually.</h5>
 									<line x1="9" y1="16" x2="9" y2="20"></line>
 									<line x1="15" y1="16" x2="15" y2="20"></line>
 								</svg>
-								<span data-loc>Capture screen</span>
+								<span class="screenButton" data-loc>Capture screen</span>
 							</button>
 							<div class="flex flex-row justify-center gap-3">
 								<h5 data-loc class="m-0 pt-4 pb-4">Capture a 2FA QR code from your screen.</h5>
 								<div class="tooltipContainer">
 									<span class="tooltip -mt-[48px] w-max text-base">
-										You will have 5 seconds to navigate to the QR code you want to import. <br />
+										You will have 10 seconds to navigate to the QR code you want to import. <br />
 										Authme will capture your screen and import the QR code.
 									</span>
 									<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

diff --git a/app/import/index.js b/app/import/index.js
@@ -1,4 +1,4 @@
-const { app, dialog, shell, desktopCapturer, BrowserWindow } = require("@electron/remote")
+const { app, dialog, shell, BrowserWindow } = require("@electron/remote")
 const { qrcodeConverter, time, localization } = require("@levminer/lib")
 const logger = require("@levminer/lib/logger/renderer")
 const QrcodeDecoder = require("qrcode-decoder").default

diff --git a/app/import/src/js/screen.js b/app/import/src/js/screen.js
@@ -1,11 +1,13 @@
 // @ts-nocheck
 const { dialog, desktopCapturer, BrowserWindow } = require("@electron/remote")
+const { ipcRenderer: ipc } = require("electron")
 
 module.exports = {
 	/**
 	 * Read QR code from screen capture
 	 */
 	captureFromScreen: async () => {
+		const button = document.querySelector(".screenButton")
 		const window = BrowserWindow.getFocusedWindow()
 		let string = ""
 		let counter = 0
@@ -23,51 +25,55 @@ module.exports = {
 		const interval = setInterval(() => {
 			counter++
 
+			button.textContent = `${10 - counter}s remaining`
+
 			if (counter === 10) {
 				clearInterval(interval)
 			}
 		}, 1000)
 
-		setTimeout(() => {
-			desktopCapturer.getSources({ types: ["screen"], thumbnailSize: { height: 1280, width: 720 } }).then(async (sources) => {
-				const thumbnail = sources[0].thumbnail.toDataURL()
+		setTimeout(async () => {
+			const sources = await ipc.invoke("captureSources")
 
-				document.querySelector(".thumbnail").src = thumbnail
-				document.querySelector(".thumbnailContainer").style.display = "block"
+			const thumbnail = sources[0].thumbnail.toDataURL()
 
-				document.querySelector(".removeThumbnail").addEventListener("click", () => {
-					document.querySelector(".thumbnailContainer").style.display = "none"
-				})
+			document.querySelector(".thumbnail").src = thumbnail
+			document.querySelector(".thumbnailContainer").style.display = "block"
 
-				try {
-					const stream = await navigator.mediaDevices.getUserMedia({
-						audio: false,
-						video: {
-							mandatory: {
-								chromeMediaSource: "desktop",
-								chromeMediaSourceId: sources[0].id,
-								minWidth: 1280,
-								maxWidth: 1280,
-								minHeight: 720,
-								maxHeight: 720,
-							},
+			document.querySelector(".removeThumbnail").addEventListener("click", () => {
+				document.querySelector(".thumbnailContainer").style.display = "none"
+			})
+
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({
+					audio: false,
+					video: {
+						mandatory: {
+							chromeMediaSource: "desktop",
+							chromeMediaSourceId: sources[0].id,
+							minWidth: 1280,
+							maxWidth: 1280,
+							minHeight: 720,
+							maxHeight: 720,
 						},
-					})
+					},
+				})
 
-					qrHandleStream(stream)
-				} catch (error) {
-					dialog.showMessageBox(window, {
-						title: "Authme",
-						buttons: [lang.button.close],
-						type: "error",
-						noLink: true,
-						message: `${lang.import_dialog.capture_error} \n\n${error}`,
-					})
+				qrHandleStream(stream)
+			} catch (error) {
+				dialog.showMessageBox(window, {
+					title: "Authme",
+					buttons: [lang.button.close],
+					type: "error",
+					noLink: true,
+					message: `${lang.import_dialog.capture_error} \n\n${error}`,
+				})
 
-					logger.error("Error starting capture!", error.stack)
-				}
-			})
-		}, 5000)
+				logger.error("Error starting capture!", error.stack)
+			}
+
+			button.textContent = "Screen capture"
+		}, 10000)
 
 		const qrHandleStream = async (stream) => {
 			const track = stream.getTracks()[0]

diff --git a/main.js b/main.js
@@ -1382,6 +1382,15 @@ ipc.handle("saveWindowPosition", () => {
 	saveWindowPosition()
 })
 
+/**
+ * Return desktop capture sources
+ */
+ipc.handle("captureSources", async () => {
+	const { desktopCapturer } = require("electron")
+
+	return await desktopCapturer.getSources({ types: ["screen"], thumbnailSize: { height: 1280, width: 720 } })
+})
+
 /**
  * Logger path
  */