Fix: disabling loaderOverlay when video starts playing

BodiAli · Oct 23, 2024 · 14bf743 · 14bf743
1 parent c118583
commit 14bf743
Showing 1 changed file with 12 additions and 20 deletions.
diff --git a/main.js b/main.js
@@ -2,6 +2,8 @@ let pass = document.querySelector("#password");
 let confirmPass = document.querySelector("#confirmpass");
 let confirmPassSpan = document.querySelector(".confirmpassspan");
 let passSpan = document.querySelector(".passspan");
+let loaderOverlay = document.querySelector(".loader-overlay");
+let video = document.querySelector("#video");
 
 function validate() {
   if (pass.value !== confirmPass.value) {
@@ -16,28 +18,18 @@ function validate() {
     pass.setCustomValidity("");
   }
 }
+
 pass.addEventListener("input", validate);
 confirmPass.addEventListener("input", validate);
 
-document.addEventListener("DOMContentLoaded", function () {
-  let loaderOverlay = document.querySelector(".loader-overlay");
-  let video = document.querySelector("#video");
-  function fadeOutLoader() {
-    let fadeOutInterval = setInterval(function () {
-      if (loaderOverlay.style.opacity > 0) {
-        loaderOverlay.style.opacity -= 0.01;
-      } else {
-        clearInterval(fadeOutInterval);
-        loaderOverlay.style.display = "none";
-      }
-    }, 10);
-  }
-
-  video.addEventListener("play", function () {
-    fadeOutLoader();
-  });
+function fadeOutLoader() {
+  loaderOverlay.style.display = "none";
+}
 
-  setTimeout(function () {
-    fadeOutLoader();
-  }, 10000);
+video.addEventListener("playing", function () {
+  fadeOutLoader();
 });
+
+setTimeout(function () {
+  fadeOutLoader();
+}, 5000);