fix: fix clip-path regression (#10)

smileidentity · Oct 25, 2022 · 9bb96d8 · 9bb96d8
1 parent 772c91b
commit 9bb96d8
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/smart-camera-web.js b/smart-camera-web.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const VERSION = '1.0.0-beta.9';
+const VERSION = '1.0.0-beta.10';
 
 const DEFAULT_NO_OF_LIVENESS_FRAMES = 8;
 
@@ -262,10 +262,17 @@ template.innerHTML = `
 
 	.video-container video {
 		min-height: 100%;
-		clip-path: ellipse(101px 118px);
 		transform: scaleX(-1) translateX(50%) translateY(-50%);
 	}
 
+	.video-container .video {
+		background-color: black;
+		position: absolute;
+		left: 50%;
+		height: calc(100% - 6px);
+		clip-path: ellipse(101px 118px);
+	}
+
 	.id-video-container {
 		min-height: calc((2 * 10rem) + 198px);
 	}
@@ -381,6 +388,8 @@ template.innerHTML = `
 		</p>
 
 		<div class='video-container'>
+			<div class='video'>
+			</div>
 			<svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path d="M210.981 122.838C210.981 188.699 164.248 241.268 107.55 241.268C50.853 241.268 4.12018 188.699 4.12018 122.838C4.12018 56.9763 50.853 4.40771 107.55 4.40771C164.248 4.40771 210.981 56.9763 210.981 122.838Z" stroke="#17A3DC" stroke-width="7.13965"/>
 			</svg>
@@ -742,7 +751,7 @@ class SmartCameraWeb extends HTMLElement {
 		this.backOfIDReviewScreen = this.shadowRoot.querySelector('#back-of-id-review-screen');
 		this.thanksScreen = this.shadowRoot.querySelector('#thanks-screen');
 
-		this.videoContainer = this.shadowRoot.querySelector('.video-container');
+		this.videoContainer = this.shadowRoot.querySelector('.video-container > .video');
 		this.smileCTA = this.shadowRoot.querySelector('#smile-cta');
 		this.imageOutline = this.shadowRoot.querySelector('#image-outline path');
 		this.startImageCapture = this.shadowRoot.querySelector('#start-image-capture');