move qr code scanner to its own component

This commit is contained in:
AnisHADJARAB 2024-11-29 08:56:50 +00:00
parent f473617e5f
commit c860efdb8d
3 changed files with 88 additions and 117 deletions

3
.gitignore vendored
View File

@ -3,4 +3,5 @@ pkg/
Cargo.lock
node_modules/
dist/
.vscode
.vscode
public/ssl/

View File

@ -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);

View File

@ -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<void> {
console.log('INIT-HOME');
const container = getCorrectDOM('login-4nk-component') as HTMLElement
@ -25,21 +22,6 @@ export async function initHomePage(): Promise<void> {
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);