[WebComponents] Enh document capture margins (#292)

* Make document capture to capture more margins * Convert portrait video to landscape * Fix preview image dimention * Fix lint * Format document capture * Fix document back preview Add height and width attributes * Dynamically calculate scaleOffset Reuse this._drawLandscapeImage for summited image when in landscape mode Refactor _drawLandscapeImage to accept scaleheight and width * Refactor mobile capture * Fix package.json * Fix lint * Crop mobile portrait view * [WebComponents] Enh document portrait margins (#294) * Handle Portrait Mode for documents like green card * Fix missing function error
smileidentity · Aug 13, 2024 · 2f28e9b · 2f28e9b
1 parent 652a382
commit 2f28e9b
Show file tree

Hide file tree

Showing 4 changed files with 301 additions and 238 deletions.
diff --git a/packages/web-components/components/document/src/DocumentCaptureScreens.js b/packages/web-components/components/document/src/DocumentCaptureScreens.js
@@ -187,7 +187,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.backOfIdReview.setAttribute('data-image', event.detail.image);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -196,7 +196,7 @@ class DocumentCaptureScreens extends HTMLElement {
       },
     );
     this.idCaptureBack.addEventListener('document-capture.publish', (event) => {
-      this.backOfIdReview.setAttribute('data-image', event.detail.image);
+      this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,

diff --git a/...ents/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js b/...ents/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js
@@ -423,7 +423,7 @@ class DocumentInstruction extends HTMLElement {
 
             this.dispatchEvent(
               new CustomEvent('document-capture-instructions.upload', {
-                detail: { image: fileData },
+                detail: { image: fileData, previewImage: fileData },
               }),
             );
           } catch (error) {

diff --git a/...s/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js b/...s/web-components/components/document/src/document-capture-review/DocumentCaptureReview.js
@@ -21,18 +21,6 @@ function templateString() {
         height: 100vh;
         justify-content: center;
       }
-
-      .video-overlay {
-        position: absolute;
-        border-width: 1rem;
-        border-color: white;
-        border-style: solid;
-        inset: 0px;
-      }
-
-      img {
-        clip-path: polygon(10% 10%, 90% 10%, 90% 85%, 10% 85%);
-      }
     }
     
     .id-image-container {
@@ -43,25 +31,15 @@ function templateString() {
     }
 
     .id-image {
-      max-width: fit-content;
-      height: auto;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
+        width: 100%;
+        text-align: center;
+        position: relative;
+        background: white;
     }
     img {
       height: 100%;
       min-height: 100px;
-      clip-path: polygon(5% 5%, 95% 5%, 95% 90%, 5% 90%);
-    }
-
-    .video-overlay .inner-border {
-      position: absolute;
-      border-width: 1rem;
-      border-color: #9394ab;
-      border-style: solid;
-      border-radius: 1rem;
-      inset: -8px;
+      width: 98%;
     }
 
     .action-buttons {
@@ -179,6 +157,12 @@ function templateString() {
     .padding-bottom-2 {
       padding-bottom: 2rem;
     }
+    img {
+        border-width: 0.25rem;
+        border-color: #9394ab;
+        border-style: solid;
+        border-radius: 0.25rem;
+      }
 
     .instructions-wrapper {
       display: inline-flex;
@@ -247,7 +231,7 @@ function templateString() {
       <div class='id-image-container'>
         <div class='id-image'>
           <div class='video-overlay'></div>
-          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' width='396' />` : ''}
+          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' />` : ''}
           </div>
         <div class='flow action-buttons'>
           <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>