From e3ee361711039af756b600b857938e5a5b94038a Mon Sep 17 00:00:00 2001
From: Dmitry Kaznacheev <cazzznach@gmail.com>
Date: Mon, 4 Dec 2023 19:30:19 +1000
Subject: [PATCH] Add overlay qr scanner

---
 .../src/Component/QrScannerComponent.razor                | 5 ++++-
 .../src/JsInterop/QrScannerJsInterop.cs                   | 4 ++--
 .../src/wwwroot/qr-scanner-interop.js                     | 8 ++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/GenOne.Blazor.QrScanner/src/Component/QrScannerComponent.razor b/src/GenOne.Blazor.QrScanner/src/Component/QrScannerComponent.razor
index f1d40df..0b26cf3 100644
--- a/src/GenOne.Blazor.QrScanner/src/Component/QrScannerComponent.razor
+++ b/src/GenOne.Blazor.QrScanner/src/Component/QrScannerComponent.razor
@@ -16,6 +16,9 @@
     [Parameter]
     public EventCallback WhenInitialized { get; set; }
 
+	[Parameter]
+	public ElementReference Overlay { get; set; }
+
     private IJSObjectReference? _qrScanner;
 
     private ElementReference _videoTagReference;
@@ -24,7 +27,7 @@
     {
         if (firstRender)
         {
-            _qrScanner = await QrScannerInterop.CreateQrScannerInstance(_videoTagReference, OnResult.InvokeAsync);
+            _qrScanner = await QrScannerInterop.CreateQrScannerInstance(_videoTagReference, Overlay, OnResult.InvokeAsync);
             await WhenInitialized.InvokeAsync();
         }
     }
diff --git a/src/GenOne.Blazor.QrScanner/src/JsInterop/QrScannerJsInterop.cs b/src/GenOne.Blazor.QrScanner/src/JsInterop/QrScannerJsInterop.cs
index 0424a86..4fb2c5a 100644
--- a/src/GenOne.Blazor.QrScanner/src/JsInterop/QrScannerJsInterop.cs
+++ b/src/GenOne.Blazor.QrScanner/src/JsInterop/QrScannerJsInterop.cs
@@ -12,11 +12,11 @@ internal class QrScannerJsInterop : BaseJsInterop
         public QrScannerJsInterop(IJSRuntime jsRuntime) : base(jsRuntime, QrScannerInteropPath)
         { }
 
-        public async ValueTask<IJSObjectReference> CreateQrScannerInstance(ElementReference videoElementReference, Func<string, Task> onSuccessScanning)
+        public async ValueTask<IJSObjectReference> CreateQrScannerInstance(ElementReference videoElementReference, ElementReference overlayReference, Func<string, Task> onSuccessScanning)
         {
             var module = await EnsureModuleImported();
             var handler = JsHandlerFactory.AsyncCallbackHandler(onSuccessScanning);
-            return await module.InvokeAsync<IJSObjectReference>("createQrScanner", videoElementReference, handler);
+            return await module.InvokeAsync<IJSObjectReference>("createQrScanner", videoElementReference, overlayReference, handler);
         }
 
         public async ValueTask StartScanning(IJSObjectReference qrScannerReference)
diff --git a/src/GenOne.Blazor.QrScanner/src/wwwroot/qr-scanner-interop.js b/src/GenOne.Blazor.QrScanner/src/wwwroot/qr-scanner-interop.js
index 78db9ea..1f3f2a1 100644
--- a/src/GenOne.Blazor.QrScanner/src/wwwroot/qr-scanner-interop.js
+++ b/src/GenOne.Blazor.QrScanner/src/wwwroot/qr-scanner-interop.js
@@ -1,11 +1,15 @@
 import "./qr-scanner-worker.min.js"
 import QrScanner from "./qr-scanner.min.js"
 
-export function createQrScanner(videoElem, successfulScanHandler) {
+export function createQrScanner(videoElem, overlay, successfulScanHandler) {
     var scanner = new QrScanner(
         videoElem,
         result => callback(successfulScanHandler, result),
-        { returnDetailedScanResult: true, highlightScanRegion: true }
+        {
+            returnDetailedScanResult: true,
+            highlightScanRegion: true,
+            overlay = overlay || undefined
+        }
     );
 
     scanner.setInversionMode('both');