easyproctor-hml 2.5.8 → 2.5.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/esm/index.js CHANGED
@@ -10446,11 +10446,17 @@ var DeviceCheckerUI = class {
10446
10446
  display: inline-block;
10447
10447
  width: 22px;
10448
10448
  height: 22px;
10449
+ min-width: 22px;
10450
+ max-width: 22px;
10451
+ min-height: 22px;
10452
+ max-height: 22px;
10453
+ flex-shrink: 0;
10449
10454
  -ms-transform: rotate(45deg); /* IE 9 */
10450
10455
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
10451
10456
  transform: rotate(45deg);
10452
10457
  border: 1px solid #16A34A;
10453
10458
  border-radius: 22px;
10459
+ box-sizing: border-box;
10454
10460
  }
10455
10461
 
10456
10462
  .checkmark_stem {
@@ -10475,11 +10481,17 @@ var DeviceCheckerUI = class {
10475
10481
  display: inline-block;
10476
10482
  width: 22px;
10477
10483
  height: 22px;
10484
+ min-width: 22px;
10485
+ max-width: 22px;
10486
+ min-height: 22px;
10487
+ max-height: 22px;
10488
+ flex-shrink: 0;
10478
10489
  -ms-transform: rotate(45deg); /* IE 9 */
10479
10490
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
10480
10491
  transform: rotate(45deg);
10481
10492
  border: 1px solid #FF0000;
10482
10493
  border-radius: 22px;
10494
+ box-sizing: border-box;
10483
10495
  }
10484
10496
 
10485
10497
  .checkmark_stem_error {
@@ -10540,6 +10552,13 @@ var DeviceCheckerUI = class {
10540
10552
  box-sizing: border-box;
10541
10553
  }
10542
10554
 
10555
+ /* Desktop screens - maintain gap between checks and camera */
10556
+ @media (min-width: 769px) {
10557
+ #checkDevices .modal-responsive .camera-container-responsive {
10558
+ gap: 20px !important;
10559
+ }
10560
+ }
10561
+
10543
10562
  @media (max-width: 768px) {
10544
10563
  #checkDevices .modal-responsive {
10545
10564
  width: 95% !important;
@@ -10566,29 +10585,28 @@ var DeviceCheckerUI = class {
10566
10585
  }
10567
10586
 
10568
10587
  #checkDevices .modal-responsive .camera-container-responsive {
10569
- flex-direction: column !important;
10570
- align-items: center !important;
10588
+ flex-direction: row !important;
10589
+ align-items: flex-start !important;
10590
+ gap: 15px !important;
10591
+ padding-left: 10px !important;
10592
+ padding-right: 10px !important;
10571
10593
  }
10572
10594
 
10573
10595
  #checkDevices .modal-responsive .video-responsive {
10574
- width: 100% !important;
10575
- max-width: 100% !important;
10596
+ width: auto !important;
10597
+ max-width: 320px !important;
10598
+ flex-shrink: 0 !important;
10576
10599
  max-height: 240px !important;
10577
10600
  }
10578
10601
 
10579
10602
  #checkDevices .modal-responsive .video-responsive video {
10580
10603
  width: 100% !important;
10581
- max-width: 100% !important;
10604
+ max-width: 320px !important;
10582
10605
  max-height: 200px !important;
10583
10606
  height: auto !important;
10584
10607
  object-fit: contain !important;
10585
10608
  }
10586
10609
 
10587
- #checkDevices .modal-responsive .camera-container-responsive {
10588
- padding-left: 10px !important;
10589
- padding-right: 10px !important;
10590
- }
10591
-
10592
10610
  #checkDevices .modal-responsive .mic-container-responsive {
10593
10611
  flex-direction: column !important;
10594
10612
  padding: 0px 20px !important;
@@ -10626,17 +10644,48 @@ var DeviceCheckerUI = class {
10626
10644
  margin: 5px !important;
10627
10645
  }
10628
10646
 
10647
+ #checkDevices .modal-responsive .camera-header-responsive,
10648
+ #checkDevices .modal-responsive .mic-header-responsive {
10649
+ gap: 0px !important;
10650
+ }
10651
+
10652
+ #checkDevices .modal-responsive .camera-header-responsive h3,
10653
+ #checkDevices .modal-responsive .mic-header-responsive h3 {
10654
+ margin: 0 !important;
10655
+ margin-top: 0 !important;
10656
+ margin-bottom: 0 !important;
10657
+ margin-left: 0 !important;
10658
+ margin-right: 0 !important;
10659
+ padding: 0 !important;
10660
+ padding-top: 0 !important;
10661
+ padding-bottom: 0 !important;
10662
+ }
10663
+
10664
+ #checkDevices .modal-responsive .camera-header-responsive select,
10665
+ #checkDevices .modal-responsive .mic-header-responsive select {
10666
+ margin: 0 !important;
10667
+ margin-top: 0 !important;
10668
+ margin-bottom: 0 !important;
10669
+ margin-left: 0 !important;
10670
+ margin-right: 0 !important;
10671
+ padding-top: 0 !important;
10672
+ }
10673
+
10629
10674
  #checkDevices .modal-responsive .camera-container-responsive {
10675
+ flex-direction: row !important;
10676
+ gap: 10px !important;
10630
10677
  padding-left: 5px !important;
10631
10678
  padding-right: 5px !important;
10632
10679
  }
10633
10680
 
10634
10681
  #checkDevices .modal-responsive .video-responsive {
10635
- max-height: 180px !important;
10682
+ max-width: 200px !important;
10683
+ max-height: 150px !important;
10636
10684
  }
10637
10685
 
10638
10686
  #checkDevices .modal-responsive .video-responsive video {
10639
- max-height: 180px !important;
10687
+ max-width: 200px !important;
10688
+ max-height: 150px !important;
10640
10689
  }
10641
10690
 
10642
10691
  #checkDevices .modal-responsive .pronounce-responsive {
@@ -10755,6 +10804,7 @@ var DeviceCheckerUI = class {
10755
10804
  width: "100%",
10756
10805
  display: "flex",
10757
10806
  justifyContent: "space-between",
10807
+ gap: "20px",
10758
10808
  borderBottom: "2px solid rgba(0, 0, 0, .1)",
10759
10809
  paddingBottom: "15px",
10760
10810
  paddingLeft: "20px",
@@ -10868,12 +10918,17 @@ var DeviceCheckerUI = class {
10868
10918
  alertDivSpyCam.appendChild(checkmark_SpyCam);
10869
10919
  alertDivSpyCam.appendChild(SpyCamAlert);
10870
10920
  center.style.transform = "rotateY(180deg)";
10921
+ center.style.display = "flex";
10922
+ center.style.flexDirection = "column";
10923
+ center.style.flex = "1";
10924
+ center.style.minWidth = "0";
10871
10925
  center.appendChild(alertDivResolution);
10872
10926
  center.appendChild(alertDivFacePosition);
10873
10927
  center.appendChild(alertDivAmbientVerify);
10874
10928
  center.appendChild(alertDivSpyCam);
10875
10929
  divCamera.appendChild(center);
10876
10930
  videoDiv.appendChild(video);
10931
+ videoDiv.style.flexShrink = "0";
10877
10932
  divCamera.appendChild(videoDiv);
10878
10933
  const mask = document.createElement("div");
10879
10934
  mask.setAttribute("class", "facial-biometry__mask");
@@ -10984,10 +11039,10 @@ var DeviceCheckerUI = class {
10984
11039
  alertDivMicrophone.setAttribute("class", "alert-div");
10985
11040
  alertDivMicrophone.setAttribute("id", "alertDivMicrophone");
10986
11041
  const alertDivMicrophoneStyles = {
10987
- // display: "flex",
10988
- alignItems: "start",
10989
- justifyContent: "end",
10990
- width: "inherit"
11042
+ display: "flex",
11043
+ alignItems: "center",
11044
+ justifyContent: "center",
11045
+ width: "100%"
10991
11046
  };
10992
11047
  this.applyStyles(alertDivMicrophone, alertDivMicrophoneStyles);
10993
11048
  const microphoneAlert = document.createElement("error");
package/index.js CHANGED
@@ -28543,11 +28543,17 @@ var DeviceCheckerUI = class {
28543
28543
  display: inline-block;
28544
28544
  width: 22px;
28545
28545
  height: 22px;
28546
+ min-width: 22px;
28547
+ max-width: 22px;
28548
+ min-height: 22px;
28549
+ max-height: 22px;
28550
+ flex-shrink: 0;
28546
28551
  -ms-transform: rotate(45deg); /* IE 9 */
28547
28552
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
28548
28553
  transform: rotate(45deg);
28549
28554
  border: 1px solid #16A34A;
28550
28555
  border-radius: 22px;
28556
+ box-sizing: border-box;
28551
28557
  }
28552
28558
 
28553
28559
  .checkmark_stem {
@@ -28572,11 +28578,17 @@ var DeviceCheckerUI = class {
28572
28578
  display: inline-block;
28573
28579
  width: 22px;
28574
28580
  height: 22px;
28581
+ min-width: 22px;
28582
+ max-width: 22px;
28583
+ min-height: 22px;
28584
+ max-height: 22px;
28585
+ flex-shrink: 0;
28575
28586
  -ms-transform: rotate(45deg); /* IE 9 */
28576
28587
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
28577
28588
  transform: rotate(45deg);
28578
28589
  border: 1px solid #FF0000;
28579
28590
  border-radius: 22px;
28591
+ box-sizing: border-box;
28580
28592
  }
28581
28593
 
28582
28594
  .checkmark_stem_error {
@@ -28637,6 +28649,13 @@ var DeviceCheckerUI = class {
28637
28649
  box-sizing: border-box;
28638
28650
  }
28639
28651
 
28652
+ /* Desktop screens - maintain gap between checks and camera */
28653
+ @media (min-width: 769px) {
28654
+ #checkDevices .modal-responsive .camera-container-responsive {
28655
+ gap: 20px !important;
28656
+ }
28657
+ }
28658
+
28640
28659
  @media (max-width: 768px) {
28641
28660
  #checkDevices .modal-responsive {
28642
28661
  width: 95% !important;
@@ -28663,29 +28682,28 @@ var DeviceCheckerUI = class {
28663
28682
  }
28664
28683
 
28665
28684
  #checkDevices .modal-responsive .camera-container-responsive {
28666
- flex-direction: column !important;
28667
- align-items: center !important;
28685
+ flex-direction: row !important;
28686
+ align-items: flex-start !important;
28687
+ gap: 15px !important;
28688
+ padding-left: 10px !important;
28689
+ padding-right: 10px !important;
28668
28690
  }
28669
28691
 
28670
28692
  #checkDevices .modal-responsive .video-responsive {
28671
- width: 100% !important;
28672
- max-width: 100% !important;
28693
+ width: auto !important;
28694
+ max-width: 320px !important;
28695
+ flex-shrink: 0 !important;
28673
28696
  max-height: 240px !important;
28674
28697
  }
28675
28698
 
28676
28699
  #checkDevices .modal-responsive .video-responsive video {
28677
28700
  width: 100% !important;
28678
- max-width: 100% !important;
28701
+ max-width: 320px !important;
28679
28702
  max-height: 200px !important;
28680
28703
  height: auto !important;
28681
28704
  object-fit: contain !important;
28682
28705
  }
28683
28706
 
28684
- #checkDevices .modal-responsive .camera-container-responsive {
28685
- padding-left: 10px !important;
28686
- padding-right: 10px !important;
28687
- }
28688
-
28689
28707
  #checkDevices .modal-responsive .mic-container-responsive {
28690
28708
  flex-direction: column !important;
28691
28709
  padding: 0px 20px !important;
@@ -28723,17 +28741,48 @@ var DeviceCheckerUI = class {
28723
28741
  margin: 5px !important;
28724
28742
  }
28725
28743
 
28744
+ #checkDevices .modal-responsive .camera-header-responsive,
28745
+ #checkDevices .modal-responsive .mic-header-responsive {
28746
+ gap: 0px !important;
28747
+ }
28748
+
28749
+ #checkDevices .modal-responsive .camera-header-responsive h3,
28750
+ #checkDevices .modal-responsive .mic-header-responsive h3 {
28751
+ margin: 0 !important;
28752
+ margin-top: 0 !important;
28753
+ margin-bottom: 0 !important;
28754
+ margin-left: 0 !important;
28755
+ margin-right: 0 !important;
28756
+ padding: 0 !important;
28757
+ padding-top: 0 !important;
28758
+ padding-bottom: 0 !important;
28759
+ }
28760
+
28761
+ #checkDevices .modal-responsive .camera-header-responsive select,
28762
+ #checkDevices .modal-responsive .mic-header-responsive select {
28763
+ margin: 0 !important;
28764
+ margin-top: 0 !important;
28765
+ margin-bottom: 0 !important;
28766
+ margin-left: 0 !important;
28767
+ margin-right: 0 !important;
28768
+ padding-top: 0 !important;
28769
+ }
28770
+
28726
28771
  #checkDevices .modal-responsive .camera-container-responsive {
28772
+ flex-direction: row !important;
28773
+ gap: 10px !important;
28727
28774
  padding-left: 5px !important;
28728
28775
  padding-right: 5px !important;
28729
28776
  }
28730
28777
 
28731
28778
  #checkDevices .modal-responsive .video-responsive {
28732
- max-height: 180px !important;
28779
+ max-width: 200px !important;
28780
+ max-height: 150px !important;
28733
28781
  }
28734
28782
 
28735
28783
  #checkDevices .modal-responsive .video-responsive video {
28736
- max-height: 180px !important;
28784
+ max-width: 200px !important;
28785
+ max-height: 150px !important;
28737
28786
  }
28738
28787
 
28739
28788
  #checkDevices .modal-responsive .pronounce-responsive {
@@ -28852,6 +28901,7 @@ var DeviceCheckerUI = class {
28852
28901
  width: "100%",
28853
28902
  display: "flex",
28854
28903
  justifyContent: "space-between",
28904
+ gap: "20px",
28855
28905
  borderBottom: "2px solid rgba(0, 0, 0, .1)",
28856
28906
  paddingBottom: "15px",
28857
28907
  paddingLeft: "20px",
@@ -28965,12 +29015,17 @@ var DeviceCheckerUI = class {
28965
29015
  alertDivSpyCam.appendChild(checkmark_SpyCam);
28966
29016
  alertDivSpyCam.appendChild(SpyCamAlert);
28967
29017
  center.style.transform = "rotateY(180deg)";
29018
+ center.style.display = "flex";
29019
+ center.style.flexDirection = "column";
29020
+ center.style.flex = "1";
29021
+ center.style.minWidth = "0";
28968
29022
  center.appendChild(alertDivResolution);
28969
29023
  center.appendChild(alertDivFacePosition);
28970
29024
  center.appendChild(alertDivAmbientVerify);
28971
29025
  center.appendChild(alertDivSpyCam);
28972
29026
  divCamera.appendChild(center);
28973
29027
  videoDiv.appendChild(video);
29028
+ videoDiv.style.flexShrink = "0";
28974
29029
  divCamera.appendChild(videoDiv);
28975
29030
  const mask = document.createElement("div");
28976
29031
  mask.setAttribute("class", "facial-biometry__mask");
@@ -29081,10 +29136,10 @@ var DeviceCheckerUI = class {
29081
29136
  alertDivMicrophone.setAttribute("class", "alert-div");
29082
29137
  alertDivMicrophone.setAttribute("id", "alertDivMicrophone");
29083
29138
  const alertDivMicrophoneStyles = {
29084
- // display: "flex",
29085
- alignItems: "start",
29086
- justifyContent: "end",
29087
- width: "inherit"
29139
+ display: "flex",
29140
+ alignItems: "center",
29141
+ justifyContent: "center",
29142
+ width: "100%"
29088
29143
  };
29089
29144
  this.applyStyles(alertDivMicrophone, alertDivMicrophoneStyles);
29090
29145
  const microphoneAlert = document.createElement("error");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "easyproctor-hml",
3
- "version": "2.5.8",
3
+ "version": "2.5.9",
4
4
  "description": "Modulo web de gravação do EasyProctor",
5
5
  "main": "./index.js",
6
6
  "module": "./esm/index.js",