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.
mebjas · Oct 24, 2022 · f9f8086 · f9f8086
1 parent 5e8251e
commit f9f8086
Showing 1 changed file with 21 additions and 6 deletions.
diff --git 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,55 +1563,63 @@ export class Html5Qrcode {
                 /* width= */ largeSize, 
                 /* height= */ smallSize,
                 /* top= */ -smallSize,
+                /* bottom= */ null,
                 /* side= */ 0,
                 /* isLeft= */ true);
             this.insertShaderBorders(
                 shadingElement,
                 /* 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(
                 shadingElement,
                 /* 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(
                 shadingElement,
                 /* 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,15 +1631,21 @@ 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");
         elem.style.position = "absolute";
         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 {