From 293ba5314f17bbc6661cc9dffb3ac91881649e16 Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Tue, 30 Apr 2024 13:27:44 +0200 Subject: [PATCH] CAPI-173(feat): add background overlay CAPI-173(chore): remove border overlay --- CHANGELOG.md | 5 +++++ package.json | 2 +- src/components/container/index.module.css | 9 --------- src/components/container/index.ts | 6 ------ src/components/overlay/index.module.css | 18 +++++++++++++++--- src/components/overlay/overlay.svg | 16 ++-------------- 6 files changed, 23 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c760bbf..3fd903e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index bcc364f..deb9ce8 100644 --- a/package.json +++ b/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", diff --git a/src/components/container/index.module.css b/src/components/container/index.module.css index 98b13f1..12e1b98 100644 --- a/src/components/container/index.module.css +++ b/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) -} diff --git a/src/components/container/index.ts b/src/components/container/index.ts index d3ae397..dde9d0f 100644 --- a/src/components/container/index.ts +++ b/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); diff --git a/src/components/overlay/index.module.css b/src/components/overlay/index.module.css index 4d0e6a1..7e24261 100644 --- a/src/components/overlay/index.module.css +++ b/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; } } diff --git a/src/components/overlay/overlay.svg b/src/components/overlay/overlay.svg index f6b122b..36a3800 100644 --- a/src/components/overlay/overlay.svg +++ b/src/components/overlay/overlay.svg @@ -1,18 +1,6 @@ - + - + - - - - - - - - - - - -