Version 2.3.1 (#588)

* Update zxing-js for UPC support * add button type attributes on buttons * Update changelog.md * add unit test for new base UI library change. * Update base.ts FIx codacy suggestion. * Update html5-qrcode.min.js * Fix UPC-E scanning in zxing-js Also, Add `willReadFrequently` attribute to canvas context for camera scan as per Google Chrome recommendation. * Update base.test.ts Co-authored-by: Breno1288 <[email protected]> Co-authored-by: Joggel72 <[email protected]>
mebjas · Nov 16, 2022 · 7d3625a · 7d3625a
1 parent 1b63396
commit 7d3625a
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 564 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,9 @@
+### Version 2.3.1
+-   Improved support for UPC types - by [Breno1288](https://github.com/Breno1288), forked from PR - [pull#501](https://github.com/mebjas/html5-qrcode/pull/501)
+-   Fix form submission in Firefox issue - [Discussion#413](https://github.com/mebjas/html5-qrcode/discussions/413#discussioncomment-2124480) by [Joggel72](https://github.com/Joggel72), forked from PR - [pull#431](https://github.com/mebjas/html5-qrcode/pull/431)
+-   Fix support for UPC-E as called out in several bugs - [parent issue#605](https://github.com/mebjas/html5-qrcode/issues/605)
+-   Add `willReadFrequently` attribute to canvas context for camera scan as per Google Chrome recommendation.
+
 ### Version 2.3.0
 
 -    Added support for drag and drop of image in file based scanner.

diff --git a/minified/html5-qrcode.min.js b/minified/html5-qrcode.min.js
diff --git a/src/html5-qrcode.ts b/src/html5-qrcode.ts
@@ -1174,11 +1174,17 @@ export class Html5Qrcode {
 
         const canvasElement = this.createCanvasElement(
             qrRegion.width, qrRegion.height);
+        // Tell user agent that this canvas will be read frequently.
+        // More info:
+        // https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
+        const contextAttributes: any = { willReadFrequently: true };
+        // Casting canvas to any, as Microsoft's interface definition hasn't
+        // caught up with latest definition for 'CanvasRenderingContext2DSettings'.
         const context: CanvasRenderingContext2D
-             = canvasElement.getContext("2d")!;
+            = (<any>canvasElement).getContext("2d", contextAttributes)!;
         context.canvas.width = qrRegion.width;
         context.canvas.height = qrRegion.height;
- 
+
         // Insert the canvas
         this.element!.append(canvasElement);
         if (shouldShadingBeApplied) {

diff --git a/src/ui/scanner/base.ts b/src/ui/scanner/base.ts
@@ -70,6 +70,9 @@ export class BaseUiElementFactory {
         let element: Type = <Type>(document.createElement(elementType));
         element.id = elementId;
         element.classList.add(PublicUiElementIdAndClasses.ALL_ELEMENT_CLASS);
+        if (elementType === "button") {
+            element.setAttribute("type", "button");
+        }
         return element;
     }
 }
diff --git a/src/zxing-html5-qrcode-decoder.ts b/src/zxing-html5-qrcode-decoder.ts
@@ -75,6 +75,8 @@ export class ZXingHtml5QrcodeDecoder implements QrcodeDecoderAsync {
         const formats = this.createZXingFormats(requestedFormats);
         const hints = new Map();
         hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, formats);
+        // TODO(minhazav): Make this configurable by developers.
+        hints.set(ZXing.DecodeHintType.TRY_HARDER, false);
         this.hints = hints;
     }
 

diff --git a/tests/ui/scanner/base.test.ts b/tests/ui/scanner/base.test.ts
@@ -22,16 +22,32 @@ describe("BaseUiElementFactory#createElement()", () => {
     it("Creates element with expected ID", () => {
         const expectedId = "test-id";
         let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
-            "select", expectedId);
+            "button", expectedId);
         expect(button.id).eq(expectedId);
     });
 
     it("Creates element with common class", () => {
         let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
-            "select", "test-id");
+            "button", "test-id");
         let hasClass = button.classList.contains(
             PublicUiElementIdAndClasses.ALL_ELEMENT_CLASS);
 
         expect(hasClass).to.be.true;
     });
+
+    it("Creates button element with button type attribute", () => {
+        let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
+            "button", "test-id");
+        let typeAttributeValue = button.getAttribute("type");
+
+        expect(typeAttributeValue).eq("button");
+    });
+
+    it("Creates select element without type attribute", () => {
+        let select = BaseUiElementFactory.createElement<HTMLSelectElement>(
+            "select", "test-id");
+        let typeAttributeValue = select.getAttribute("type");
+
+        expect(typeAttributeValue).to.be.null;
+    });
 });
diff --git a/third_party/zxing-js.umd.d.ts b/third_party/zxing-js.umd.d.ts
@@ -18,7 +18,8 @@ declare class MultiFormatReader {
 }
 
 export declare enum DecodeHintType {
-    POSSIBLE_FORMATS = 2
+    POSSIBLE_FORMATS = 2,
+    TRY_HARDER = 3
 }
 
 export declare enum BarcodeFormat {