diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md index 343d7c0537ffd60be191f774656ea3988e7a0c7d..15a0695536a275875fec651dc63921ee95839f70 100644 --- a/packages/qr-code-scanner/README.md +++ b/packages/qr-code-scanner/README.md @@ -32,6 +32,7 @@ after loaded. This attribute is also used to stop the QR code reader or if you d ## Events - `'code-detected'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`. +- `'scan-started`: Fired after the first image is drawn. Can be used to scrolling or other layout dependent tasks. ## Local development diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js index 2ace15988d59f2ade07f2c03e63be8dc6e2db413..87aa3bfa406d1e0c71d15a458b79da2913b48445 100644 --- a/packages/qr-code-scanner/src/qr-code-scanner.js +++ b/packages/qr-code-scanner/src/qr-code-scanner.js @@ -198,8 +198,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { this.stopScan = false; let canvasElement = this._("#canvas"); - let qrContainer = this._("#qr"); - let scroll = false; + let firstDrawDone = false; this._askPermission = true; this._loadingMessage = i18n.t('no-camera-access'); @@ -232,6 +231,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { canvasElement.width = video.videoWidth; let canvas = canvasElement.getContext("2d"); canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); + if (!firstDrawDone) { + that.dispatchEvent(new CustomEvent("scan-started", {bubbles: true, composed: true})); + firstDrawDone = true; + } let maskWidth = canvasElement.width; let maskHeight = canvasElement.height; @@ -303,10 +306,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { lastSentData = null; } } - if (video.readyState === video.HAVE_ENOUGH_DATA && !scroll) { - qrContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); - scroll = true; - } console.assert(that._requestID === null); that._requestID = requestAnimationFrame(tick); } @@ -446,7 +445,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { return html` <div class="columns"> - <div class="column" id="qr"> + <div class="column"> <div class="${classMap({hidden: !hasDevices})}">