feat(barcode reader): add close btn

public/barcode-reader/barcode-reader.css

@@ -13,7 +13,22 @@
     width: var(--video-width);
     background-color: #000000;
 }
-    
+
+.close-btn {
+    background: none;
+    border-radius: 50%;
+    border-style: none;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    margin-right: 12px;
+    margin-top: 12px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 101;
+}
+
 @media screen and (min-width: 1024px) {
     #container {
         min-width: 400px;

src/app/web-components/barcode-reader.ts

@@ -24,10 +24,16 @@ export class BarcodeReader extends HTMLElement {
     link.rel = 'stylesheet';
     link.href = '/barcode-reader/barcode-reader.css';
     this.container.setAttribute('id', 'container');
+    const closeBtn = document.createElement('button');
+    closeBtn.textContent = 'X';
+    closeBtn.onclick = this.stopScan.bind(this);
+    closeBtn.classList.add('close-btn')
+    this.container.appendChild(closeBtn);
     const videoContainer = document.createElement('div');
     videoContainer.setAttribute('id', 'video-container');
     this.container.appendChild(videoContainer);
 
+    
     const overlay = document.createElement('div');
     overlay.classList.add('overlay');
     this.video.setAttribute('autoplay', '');