From f9f80868aa78d0b6fef996349d94d10a705dd0bb Mon Sep 17 00:00:00 2001
From: Allan Brault <allan.brault@gmail.com>
Date: Mon, 24 Oct 2022 06:34:40 +0200
Subject: [PATCH] Fix qrbox border placement (#555)

* Add display: block; to the video element

A video element behave like an inline element, which mean it honours
whitespace around. When in a div with whitespace it adds empty spaces.

ref: https://stackoverflow.com/a/36397260

* Update logic to display the qrbox border elements

Using the bottom allow the 4 boxes on the bottom of the qrbox to be
pixel perfect on the bottom of the qrbox area, instead of relying on the
qrbox size that can be with a floating point.
---
 src/html5-qrcode.ts | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/html5-qrcode.ts b/src/html5-qrcode.ts
index 0e32371..728522f 100644
--- a/src/html5-qrcode.ts
+++ b/src/html5-qrcode.ts
@@ -1461,6 +1461,7 @@ export class Html5Qrcode {
     private createVideoElement(width: number): HTMLVideoElement {
         const videoElement = document.createElement("video");
         videoElement.style.width = `${width}px`;
+        videoElement.style.display = "block";
         videoElement.muted = true;
         videoElement.setAttribute("muted", "true");
         (<any>videoElement).playsInline = true;
@@ -1562,6 +1563,7 @@ export class Html5Qrcode {
                 /* width= */ largeSize, 
                 /* height= */ smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ 0,
                 /* isLeft= */ true);
             this.insertShaderBorders(
@@ -1569,20 +1571,23 @@ export class Html5Qrcode {
                 /* width= */ largeSize,
                 /* height= */ smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ 0,
                 /* isLeft= */ false);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ largeSize,
                 /* height= */ smallSize,
-                /* top= */ qrboxSize.height + smallSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ 0,
                 /* isLeft= */ true);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ largeSize,
                 /* height= */ smallSize,
-                /* top= */ qrboxSize.height + smallSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ 0,
                 /* isLeft= */ false);
             this.insertShaderBorders(
@@ -1590,13 +1595,15 @@ export class Html5Qrcode {
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ -smallSize,
                 /* isLeft= */ true);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
-                /* top= */ qrboxSize.height + smallSize - largeSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ -smallSize,
                 /* isLeft= */ true);
             this.insertShaderBorders(
@@ -1604,13 +1611,15 @@ export class Html5Qrcode {
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ -smallSize,
                 /* isLeft= */ false);
             this.insertShaderBorders(
                 shadingElement,
                 /* width= */ smallSize,
                 /* height= */ largeSize + smallSize,
-                /* top= */ qrboxSize.height + smallSize - largeSize,
+                /* top= */ null,
+                /* bottom= */ -smallSize,
                 /* side= */ -smallSize,
                 /* isLeft= */ false);
             this.hasBorderShaders = true;
@@ -1622,7 +1631,8 @@ export class Html5Qrcode {
         shaderElem: HTMLDivElement,
         width: number,
         height: number,
-        top: number,
+        top: number|null,
+        bottom: number|null,
         side: number,
         isLeft: boolean) {
         const elem = document.createElement("div");
@@ -1630,7 +1640,12 @@ export class Html5Qrcode {
         elem.style.backgroundColor = Constants.BORDER_SHADER_DEFAULT_COLOR;
         elem.style.width = `${width}px`;
         elem.style.height = `${height}px`;
-        elem.style.top = `${top}px`;
+        if (top !== null) {
+            elem.style.top = `${top}px`;
+        }
+        if (bottom !== null) {
+            elem.style.bottom = `${bottom}px`;
+        }
         if (isLeft) {
           elem.style.left = `${side}px`;
         } else {