From c860efdb8d3944b1eac0aa67cb7fe537a51a2e3b Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Fri, 29 Nov 2024 08:56:50 +0000 Subject: [PATCH] move qr code scanner to its own component --- .gitignore | 3 +- .../qrcode-scanner-component.ts | 84 +++++++++++++ src/pages/home/home.ts | 118 +----------------- 3 files changed, 88 insertions(+), 117 deletions(-) create mode 100644 src/components/qrcode-scanner/qrcode-scanner-component.ts diff --git a/.gitignore b/.gitignore index ded76cb..4a4fa51 100755 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ pkg/ Cargo.lock node_modules/ dist/ -.vscode \ No newline at end of file +.vscode +public/ssl/ \ No newline at end of file diff --git a/src/components/qrcode-scanner/qrcode-scanner-component.ts b/src/components/qrcode-scanner/qrcode-scanner-component.ts new file mode 100644 index 0000000..8c13d3d --- /dev/null +++ b/src/components/qrcode-scanner/qrcode-scanner-component.ts @@ -0,0 +1,84 @@ +import QrScanner from 'qr-scanner'; +import Services from '../../services/service'; + + export default class QrScannerComponent extends HTMLElement { + videoElement: any; + wrapper: any + qrScanner: any + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.wrapper = document.createElement('div'); + this.wrapper.style.position = 'relative'; + this.wrapper.style.width = '150px'; + this.wrapper.style.height = '150px'; + + this.videoElement = document.createElement('video'); + this.videoElement.style.width = '100%'; + document.body?.append(this.wrapper); + this.wrapper.prepend(this.videoElement); + } + + connectedCallback() { + this.initializeScanner(); + } + + async initializeScanner() { + if (!this.videoElement) { + console.error('Video element not found!'); + return; + } + console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement) + this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{ + highlightScanRegion: true, + highlightCodeOutline: true, + }); + + try { + await QrScanner.hasCamera(); + this.qrScanner.start(); + this.videoElement.style = 'height: 200px; width: 200px' + this.shadowRoot?.appendChild(this.wrapper) + + } catch (e) { + console.error('No camera found or error starting the QR scanner', e); + } + } + + async onQrCodeScanned(result: any) { + console.log(`QR Code detected:`, result); + const data = result.data; + const scannedUrl = new URL(data); + + // Extract the 'sp_address' parameter + const spAddress = scannedUrl.searchParams.get('sp_address'); + if(spAddress) { + const service = await Services.getInstance(); + // Call the sendPairingTx function with the extracted sp_address + try { + const sharedSecret = await service.getSecretForAddress(spAddress); + if (!sharedSecret) { + const member = { + sp_addresses: [spAddress], + } + await service.connectMember([member]); + } + const mySPAddress = await service.getDeviceAddress() + await service.createPairingProcess([spAddress], mySPAddress, 1); + + // await service.sendPairingTx(spAddress); + } catch (e) { + console.error('Failed to pair:', e); + } + } + this.qrScanner.stop(); // if you want to stop scanning after one code is detected + } + + disconnectedCallback() { + if (this.qrScanner) { + this.qrScanner.destroy(); + } + } + } + + customElements.define('qr-scanner', QrScannerComponent); \ No newline at end of file diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index 4d391cc..9b7491a 100755 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -3,11 +3,8 @@ import Services from '../../services/service'; import { addSubscription } from '../../utils/subscription.utils'; import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils'; import { getCorrectDOM } from '../../utils/html.utils'; - -let resultContainer = document.getElementById('qr-reader-results'); -let lastResult: any, - countResults = 0; - +import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; +export {QrScannerComponent} export async function initHomePage(): Promise { console.log('INIT-HOME'); const container = getCorrectDOM('login-4nk-component') as HTMLElement @@ -25,21 +22,6 @@ export async function initHomePage(): Promise { const spAddress = await service.getDeviceAddress(); generateQRCode(spAddress); displayEmojis(spAddress); - - //// ATTENTION A SORTIR D'ICI - const notifBell = document.getElementById('notification-bell'); - if (notifBell) addSubscription(notifBell, 'click', openCloseNotifications); -} - -export function toggleMenu() { - let menu = document.getElementById('menu'); - if (menu) { - if (menu.style.display === 'block') { - menu.style.display = 'none'; - } else { - menu.style.display = 'block'; - } - } } //// Modal @@ -48,18 +30,9 @@ export async function openModal(myAddress: string, receiverAddress: string) { router.openLoginModal(myAddress, receiverAddress); } -function openCloseNotifications() { - const notifications = document.querySelector('.notification-board') as HTMLDivElement; - notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none'; -} - // const service = await Services.getInstance() // service.setNotification() -(window as any).toggleMenu = toggleMenu; -(window as any).openModal = openModal; - - function scanDevice() { const container = getCorrectDOM('login-4nk-component') as HTMLElement const scannerImg = container.querySelector('#scanner') as HTMLElement; @@ -75,90 +48,3 @@ function scanDevice() { (window as any).scanDevice = scanDevice; -import QrScanner from 'qr-scanner'; - - class QrScannerComponent extends HTMLElement { - videoElement: any; - wrapper: any - qrScanner: any - constructor() { - super(); - this.attachShadow({ mode: 'open' }); - this.wrapper = document.createElement('div'); - this.wrapper.style.position = 'relative'; - this.wrapper.style.width = '150px'; - this.wrapper.style.height = '150px'; - - this.videoElement = document.createElement('video'); - this.videoElement.style.width = '100%'; - document.body?.append(this.wrapper); - this.wrapper.prepend(this.videoElement); - } - - connectedCallback() { - this.initializeScanner(); - } - - async initializeScanner() { - if (!this.videoElement) { - console.error('Video element not found!'); - return; - } - console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement) - this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{ - highlightScanRegion: true, - highlightCodeOutline: true, - }); - console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.qrScanner:", this.videoElement) - - try { - await QrScanner.hasCamera(); - this.qrScanner.start(); - this.videoElement.style = 'height: 200px; width: 200px' - this.shadowRoot?.appendChild(this.wrapper) - - } catch (e) { - console.error('No camera found or error starting the QR scanner', e); - } - } - - async onQrCodeScanned(result: any) { - console.log(`QR Code detected:`, result); - const data = result.data; - console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ data:", data) - const scannedUrl = new URL(data); - - // Extract the 'sp_address' parameter - const spAddress = scannedUrl.searchParams.get('sp_address'); - console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ spAddress:", spAddress) - if(spAddress) { - const service = await Services.getInstance(); - // Call the sendPairingTx function with the extracted sp_address - try { - const sharedSecret = await service.getSecretForAddress(spAddress); - console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ sharedSecret:", sharedSecret) - if (!sharedSecret) { - const member = { - sp_addresses: [spAddress], - } - await service.connectMember([member]); - } - const mySPAddress = await service.getDeviceAddress() - await service.createPairingProcess([spAddress], mySPAddress, 1); - - // await service.sendPairingTx(spAddress); - } catch (e) { - console.error('Failed to pair:', e); - } - } - this.qrScanner.stop(); // if you want to stop scanning after one code is detected - } - - disconnectedCallback() { - if (this.qrScanner) { - this.qrScanner.destroy(); - } - } - } - - customElements.define('qr-scanner', QrScannerComponent); \ No newline at end of file