app/BTCPayApp.UI/Components/QrScanModal.razor
2024-06-28 18:50:32 +02:00

59 lines
1.9 KiB
Plaintext

@inject IJSRuntime JS
@implements IAsyncDisposable
@using ReactorBlazorQRCodeScanner
<div class="modal fade" id="ScanQrCodeModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title">Scan QR code</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<Icon Symbol="close"/>
</button>
</div>
<div class="modal-body">
<QRCodeScanner Width="100%" />
</div>
</div>
</div>
</div>
@code {
private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;
[Parameter]
public Action<string>? OnScan { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender) return;
var reference = DotNetObjectReference.Create(this);
await JS.InvokeVoidAsync("Interop.addEventListener", reference, "#ScanQrCodeModal", "show.bs.modal", "OnShow");
await JS.InvokeVoidAsync("Interop.addEventListener", reference, "#ScanQrCodeModal", "hide.bs.modal", "OnHide");
}
public async ValueTask DisposeAsync()
{
var show = new[] {"#ScanQrCodeModal", "show.bs.modal", "OnShow"};
var hide = new[] {"#ScanQrCodeModal", "hide.bs.modal", "OnHide"};
await JS.InvokeVoidAsync("Interop.removeEventListeners", [show, hide]);
}
[JSInvokable]
public async Task OnShow()
{
if (OnScan == null) return;
_qrCodeScannerJsInterop ??= new QRCodeScannerJsInterop(JS);
await _qrCodeScannerJsInterop.Init(OnScan);
}
[JSInvokable]
public async Task OnHide()
{
if (_qrCodeScannerJsInterop == null) return;
await _qrCodeScannerJsInterop.StopRecording();
}
}