CAPI-173(feat): add background overlay

CAPI-173(chore): remove border overlay

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [1.2.31] - 30-04-2024
+
+-   (feat): add background overlay outside the tire section
+-   (chore): remove top and bottom border shadow around the video stream
+
 ## [1.2.3] - 28-04-2024
 
 -   (feat): remove need to additionally import css when importing sdk

package.json

@@ -1,7 +1,7 @@
 {
 	"author": "Anyline",
 	"name": "@anyline/anyline-guidance-sdk",
-	"version": "1.2.3",
+	"version": "1.2.31",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"types": "dist/esm/index.d.ts",

src/components/container/index.module.css

@@ -5,12 +5,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.borderOverlay {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	box-shadow:
-		inset 0px 200px 100px -100px rgba(0, 0, 0, 0.9),
-		inset 0px -200px 100px -100px rgba(0, 0, 0, 0.9)
-}

src/components/container/index.ts

@@ -14,12 +14,6 @@ export default function createContainerElement(stream: MediaStream): {
 	const container = document.createElement('div');
 	container.className = css.container;
 
-	const borderOverlay = document.createElement('div');
-	borderOverlay.className = css.borderOverlay;
-
-	// attach top and bottom fading overlay
-	container.appendChild(borderOverlay);
-
 	// attach video
 	createVideoElementWithStream(container, stream);
 

src/components/overlay/index.module.css

@@ -4,8 +4,13 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-  justify-content: center;
+	justify-content: center;
 	flex-direction: column;
+	background: radial-gradient(
+		circle at center,
+		transparent min(248px, 44vw),
+		rgba(0, 0, 0, 0.7) min(248px, 44vw)
+	);
 }
 
 .imageWrapper {
@@ -16,11 +21,18 @@
 }
 
 .overlay {
-	width: 90%;
+	width: 90vw;
 	max-width: 500px;
 }
 
 @media (orientation: landscape) {
+	.overlayWrapper {
+		background: radial-gradient(
+			circle at center,
+			transparent min(248px, 41vh),
+			rgba(0, 0, 0, 0.7) min(248px, 41vh)
+		);
+	}
 	.imageWrapper {
 		position: absolute;
 		height: 100%;
@@ -30,6 +42,6 @@
 	}
 	.overlay {
 		width: unset;
-		height: 90%;
+		height: 84vh;
 	}
 }