easyproctor-hml 2.5.6 → 2.5.7

package/esm/index.js

@@ -10175,7 +10175,9 @@ var CameraRecorder = class {
     let { width = 0, height = 0 } = settings;
     const isPortrait = (_d = screen.orientation) == null ? void 0 : _d.type.includes("portrait");
     if (isPortrait && this.isMobileDevice()) {
-      [width, height] = [height, width];
+      if (this.videoOptions.width == height && this.videoOptions.height == width) {
+        [width, height] = [height, width];
+      }
     }
     console.log("isPortrait -> ", isPortrait);
     console.log("this.isMobileDevice() -> ", this.isMobileDevice());
@@ -10439,6 +10441,166 @@ var DeviceCheckerUI = class {
               align-items: center;
               margin-bottom: 5px;
           }
+          
+          @media (max-width: 768px) {
+              #checkDevices {
+                  padding: 10px;
+                  align-items: flex-start !important;
+                  padding-top: 20px !important;
+              }
+              
+              #checkDevices > div {
+                  width: 95% !important;
+                  max-width: 95% !important;
+                  margin: 10px !important;
+              }
+              
+              h3 {
+                  font-size: 18px !important;
+                  padding: 15px 10px !important;
+              }
+              
+              .device-checker-header {
+                  flex-direction: column !important;
+                  align-items: flex-start !important;
+                  gap: 10px !important;
+              }
+              
+              select {
+                  width: 100% !important;
+                  max-width: 100% !important;
+                  font-size: 14px !important;
+              }
+              
+              video {
+                  max-width: 100% !important;
+                  width: 100% !important;
+              }
+              
+              #liveCheckDevices {
+                  width: calc(100% - 20px) !important;
+                  flex-direction: column !important;
+                  align-items: center !important;
+              }
+              
+              .device-checker-microphone {
+                  padding: 0px 20px !important;
+                  flex-direction: column !important;
+                  align-items: center !important;
+              }
+              
+              p {
+                  padding: 0 20px !important;
+                  font-size: 14px !important;
+                  margin-left: 0 !important;
+              }
+          }
+          
+          @media (max-width: 480px) {
+              #checkDevices {
+                  padding: 0 !important;
+              }
+              
+              #checkDevices > div {
+                  width: 100% !important;
+                  max-width: 100% !important;
+                  margin: 0 !important;
+                  border-radius: 0 !important;
+                  max-height: 100vh !important;
+              }
+              
+              h3 {
+                  font-size: 16px !important;
+                  padding: 12px 10px !important;
+              }
+              
+              .device-checker-header {
+                  padding: 0 15px !important;
+              }
+              
+              #liveCheckDevices {
+                  width: calc(100% - 30px) !important;
+              }
+              
+              .device-checker-microphone {
+                  padding: 0px 15px !important;
+              }
+              
+              p {
+                  padding: 0 15px !important;
+                  font-size: 13px !important;
+                  margin-left: 0 !important;
+              }
+              
+              .alert-div {
+                  font-size: 12px !important;
+              }
+              
+              button {
+                  height: 60px !important;
+                  font-size: 14px !important;
+              }
+              
+              .device-checker-divider {
+                  height: 60px !important;
+              }
+          }
+          
+          @media (max-height: 700px) {
+              #checkDevices > div {
+                  max-height: 95vh !important;
+                  overflow-y: auto !important;
+              }
+              
+              video {
+                  max-height: 30vh !important;
+              }
+              
+              h3 {
+                  padding: 12px 0px !important;
+                  margin-bottom: 10px !important;
+              }
+              
+              .device-checker-header {
+                  margin-bottom: 10px !important;
+              }
+              
+              #liveCheckDevices {
+                  padding-bottom: 10px !important;
+              }
+          }
+          
+          @media (max-height: 600px) {
+              video {
+                  max-height: 25vh !important;
+              }
+              
+              h3 {
+                  padding: 10px 0px !important;
+                  margin-bottom: 8px !important;
+                  font-size: 16px !important;
+              }
+              
+              .device-checker-header {
+                  margin-bottom: 8px !important;
+              }
+              
+              #liveCheckDevices {
+                  padding-bottom: 8px !important;
+              }
+              
+              .alert-div {
+                  margin-bottom: 3px !important;
+              }
+              
+              button {
+                  height: 55px !important;
+              }
+              
+              .device-checker-divider {
+                  height: 55px !important;
+              }
+          }
   
           .checkmark {
               display: inline-block;
@@ -10542,28 +10704,38 @@ var DeviceCheckerUI = class {
       width: "100%",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      padding: "10px",
+      boxSizing: "border-box",
+      overflowY: "auto"
     };
     this.applyStyles(fullBg, fullBgStyles);
     const modal = document.createElement("div");
+    modal.setAttribute("class", "device-checker-modal");
     const modalStyles = {
       backgroundColor: "#fff",
       zIndex: "1001",
-      width: "600px",
+      width: "90%",
+      maxWidth: "600px",
+      minWidth: "320px",
       borderRadius: "10px",
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      maxHeight: "90vh",
+      overflowY: "auto",
+      overflowX: "hidden",
+      margin: "20px"
     };
     this.applyStyles(modal, modalStyles);
     const h3 = document.createElement("h3");
-    h3.innerText = "Para iniciar configure a c\xE2mera e o microfone";
+    h3.innerText = "Checagem de dispositivos";
     const h3Styles = {
       color: "rgba(0, 0, 0, .7)",
       fontWeight: "bold",
-      fontSize: "20px",
+      fontSize: "clamp(16px, 4vw, 20px)",
       marginBottom: "15px",
-      padding: "20px 0px",
+      padding: "20px 10px",
       borderBottom: "2px solid rgba(0, 0, 0, .1)",
       width: "100%",
       textAlign: "center"
@@ -10571,6 +10743,7 @@ var DeviceCheckerUI = class {
     this.applyStyles(h3, h3Styles);
     modal.appendChild(h3);
     const divCameraHeader = document.createElement("div");
+    divCameraHeader.setAttribute("class", "device-checker-header");
     const h3Camera = document.createElement("h3");
     const selectCamera = document.createElement("select");
     selectCamera.setAttribute("id", "cameraSelect");
@@ -10586,17 +10759,20 @@ var DeviceCheckerUI = class {
     const h3CameraStyles = {
       color: "rgba(0, 0, 0, .75)",
       fontWeight: "bold",
-      fontSize: "16px"
+      fontSize: "clamp(14px, 3.5vw, 16px)"
     };
     this.applyStyles(h3Camera, h3CameraStyles);
+    selectCamera.style.width = "100%";
     selectCamera.style.maxWidth = "400px";
     divCameraHeader.appendChild(h3Camera);
     divCameraHeader.appendChild(selectCamera);
     modal.appendChild(divCameraHeader);
     const divCamera = document.createElement("div");
     divCamera.setAttribute("id", "liveCheckDevices");
+    divCamera.setAttribute("class", "device-checker-camera");
     const videoDiv = document.createElement("div");
     const video = document.createElement("video");
+    video.setAttribute("class", "device-checker-video");
     const center = document.createElement("div");
     video.setAttribute("id", "cameraStream");
     video.muted = true;
@@ -10611,6 +10787,8 @@ var DeviceCheckerUI = class {
     this.applyStyles(divCamera, divCameraStyles);
     const videoStyles = {
       width: "20rem",
+      maxWidth: "100%",
+      height: "auto",
       backgroundColor: "#000",
       borderRadius: "10px",
       marginBottom: "15px"
@@ -10710,13 +10888,13 @@ var DeviceCheckerUI = class {
     alertDivSpyCam.appendChild(checkmark_SpyCam);
     alertDivSpyCam.appendChild(SpyCamAlert);
     center.style.transform = "rotateY(180deg)";
+    divCamera.appendChild(center);
+    videoDiv.appendChild(video);
+    divCamera.appendChild(videoDiv);
     center.appendChild(alertDivResolution);
     center.appendChild(alertDivFacePosition);
     center.appendChild(alertDivAmbientVerify);
     center.appendChild(alertDivSpyCam);
-    divCamera.appendChild(center);
-    videoDiv.appendChild(video);
-    divCamera.appendChild(videoDiv);
     const mask = document.createElement("div");
     mask.setAttribute("class", "facial-biometry__mask");
     mask.style.width = "100%";
@@ -10738,6 +10916,7 @@ var DeviceCheckerUI = class {
     videoDiv.appendChild(frame);
     modal.appendChild(divCamera);
     const divMicHeader = document.createElement("div");
+    divMicHeader.setAttribute("class", "device-checker-header");
     const h3Mic = document.createElement("h3");
     const selectMic = document.createElement("select");
     selectMic.setAttribute("id", "micSelect");
@@ -10753,14 +10932,16 @@ var DeviceCheckerUI = class {
     const h3MicStyles = {
       color: "rgba(0, 0, 0, .7)",
       fontWeight: "bold",
-      fontSize: "16px"
+      fontSize: "clamp(14px, 3.5vw, 16px)"
     };
     this.applyStyles(h3Mic, h3MicStyles);
+    selectMic.style.width = "100%";
     selectMic.style.maxWidth = "400px";
     divMicHeader.appendChild(h3Mic);
     divMicHeader.appendChild(selectMic);
     modal.appendChild(divMicHeader);
     const divMic = document.createElement("div");
+    divMic.setAttribute("class", "device-checker-microphone");
     const divMicStyles = {
       width: "100%",
       padding: "0px 40px",
@@ -10816,10 +10997,10 @@ var DeviceCheckerUI = class {
     alertDivMicrophone.setAttribute("class", "alert-div");
     alertDivMicrophone.setAttribute("id", "alertDivMicrophone");
     const alertDivMicrophoneStyles = {
-      // display: "flex",
-      alignItems: "start",
-      justifyContent: "end",
-      width: "inherit"
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%"
     };
     this.applyStyles(alertDivMicrophone, alertDivMicrophoneStyles);
     const microphoneAlert = document.createElement("error");
@@ -10839,12 +11020,14 @@ var DeviceCheckerUI = class {
     divMicMeter.appendChild(divMeter);
     divMicMeter.appendChild(divRange);
     const pronunceMic = document.createElement("p");
-    pronunceMic.innerText = 'Pronuncie em voz alta: "um, dois, tr\xEAs, quatro".';
+    pronunceMic.setAttribute("class", "device-checker-pronounce");
+    pronunceMic.innerText = 'Pronuncie em voz alta: "Testando...".';
     pronunceMic.style.textAlign = "start";
     const pronunceMicStyles = {
       width: "100%",
       marginLeft: "40px",
-      marginBottom: "15px"
+      marginBottom: "15px",
+      fontSize: "clamp(12px, 3vw, 14px)"
     };
     this.applyStyles(pronunceMic, pronunceMicStyles);
     divMic.appendChild(divMicMeter);
@@ -10862,6 +11045,7 @@ var DeviceCheckerUI = class {
     this.applyStyles(divBtn, divBtnStyles);
     const buttonCancel = document.createElement("button");
     buttonCancel.setAttribute("id", "cancelBtn");
+    buttonCancel.setAttribute("class", "device-checker-button");
     buttonCancel.innerText = "Cancelar";
     const buttonCancelStyles = {
       width: "100%",
@@ -10870,12 +11054,15 @@ var DeviceCheckerUI = class {
       border: "none",
       color: "rgba(0, 0, 0, .7)",
       fontWeight: "bold",
+      fontSize: "clamp(14px, 3.5vw, 16px)",
       borderRadius: "10px",
       paddingTop: "5px",
-      paddingBottom: "5px"
+      paddingBottom: "5px",
+      cursor: "pointer"
     };
     this.applyStyles(buttonCancel, buttonCancelStyles);
     const divider = document.createElement("span");
+    divider.setAttribute("class", "device-checker-divider");
     const dividerStyles = {
       width: "3px",
       height: "70px",
@@ -10886,6 +11073,7 @@ var DeviceCheckerUI = class {
     const button = document.createElement("button");
     button.innerText = "Continuar";
     button.setAttribute("id", "confirmBtn");
+    button.setAttribute("class", "device-checker-button");
     const buttonStyles = {
       width: "100%",
       height: "70px",
@@ -10893,9 +11081,11 @@ var DeviceCheckerUI = class {
       border: "none",
       color: "rgba(0, 0, 0, .7)",
       fontWeight: "bold",
+      fontSize: "clamp(14px, 3.5vw, 16px)",
       borderRadius: "10px",
       paddingTop: "5px",
-      paddingBottom: "5px"
+      paddingBottom: "5px",
+      cursor: "pointer"
     };
     this.applyStyles(button, buttonStyles);
     if (this.options.useSpyScan) {
@@ -11359,9 +11549,26 @@ var _DeviceCheckerService = class _DeviceCheckerService {
       return Promise.reject(error);
     }
   }
+  isMobileDevice() {
+    if ("userAgentData" in navigator) {
+      const navUAData = navigator.userAgentData;
+      const mobile = navUAData.mobile || false;
+      const platform = navUAData.platform || "";
+      return mobile || /Android|iOS/i.test(platform);
+    }
+    return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+  }
   isUnderResolution() {
+    var _a2;
     const settings = this.cameraRecorder.cameraStream.getVideoTracks()[0].getSettings();
-    if (this.videoOptions.minWidth > settings.width || this.videoOptions.minHeight > settings.height) {
+    let { width = 0, height = 0 } = settings;
+    const isPortrait = (_a2 = screen.orientation) == null ? void 0 : _a2.type.includes("portrait");
+    if (isPortrait && this.isMobileDevice()) {
+      if (this.videoOptions.width == height && this.videoOptions.height == width) {
+        [width, height] = [height, width];
+      }
+    }
+    if (this.videoOptions.minWidth > width || this.videoOptions.minHeight > height) {
       this.allowedResolution = false;
     } else {
       this.allowedResolution = true;