From 288d9266dfcd71ea04dd5b22bd9d10fc88a167fb Mon Sep 17 00:00:00 2001
From: yashrajbharti <y.bharti@cybtekk.com>
Date: Wed, 12 Jun 2024 17:07:57 +0530
Subject: [PATCH] fix zoom multiplier

---
 assets/line.svg | 3 +++
 index.html      | 5 +++--
 js/stream.mjs   | 1 +
 style.css       | 6 +++++-
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 assets/line.svg

diff --git a/assets/line.svg b/assets/line.svg
new file mode 100644
index 0000000..7b16a02
--- /dev/null
+++ b/assets/line.svg
@@ -0,0 +1,3 @@
+<svg width="2" height="12" viewBox="0 0 1 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.5" y1="-2.18557e-08" x2="0.500001" y2="12" stroke="#3F83F8"/>
+</svg>
diff --git a/index.html b/index.html
index 83a697d..ef1c5ec 100644
--- a/index.html
+++ b/index.html
@@ -17,9 +17,10 @@
     <section id="camera">
         <video id="stream" muted autoplay playsinline data-lens="none"></video>
        <div class="range-container">
-        <input type="range" name="range" id="range">
+        <input type="range" name="range" id="range" aria-label="Zoom Level">
         <img src="./assets/trackMeter.svg" alt="zoom feature">
-        <p class="zoom-multiplier"></p>
+        <img class="slider" src="./assets/line.svg" alt="zoom slider">
+        <p class="zoom-multiplier" aria-live="polite"></p>
        </div>
         <div class="switch-camera-video-photo-mode" role="button" tabindex="0">
             <input type="radio" id="photo-mode" name="modes" value="photo-mode" checked />
diff --git a/js/stream.mjs b/js/stream.mjs
index 6aa34e6..394d96b 100644
--- a/js/stream.mjs
+++ b/js/stream.mjs
@@ -45,6 +45,7 @@ export const streamWebCamVideo = (isFrontCamera = true) => {
 
       input.oninput = function (event) {
         track.applyConstraints({ advanced: [{ zoom: event.target.value }] });
+        document.querySelector(".slider").style.left = "-60px"
       }
       input.hidden = false;
       document.querySelector(".range-container").style.visibility = "visible"
diff --git a/style.css b/style.css
index ddf42f8..d75e899 100644
--- a/style.css
+++ b/style.css
@@ -218,9 +218,13 @@ video.flip {
     color: #fff;
     font-size: 10px;
     translate: 0 18px;
+    pointer-events: none;
 }
 .range-container img{
     position: absolute;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: none;
+}
+.range-container .slider{
+    position: absolute;
 }
\ No newline at end of file