@opexa/portal-components 0.0.262 → 0.0.264
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/dist/components/Disclaimer/DisclaimerV2.js +19 -2
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
- package/dist/components/KYC/IdentityVerification.js +20 -15
- package/dist/components/KYC/KYC.d.ts +1 -1
- package/dist/components/KYC/KYC.js +3 -3
- package/dist/components/KYC/KYC.lazy.js +1 -3
- package/dist/components/KYC/useKYC.d.ts +0 -2
- package/dist/components/KYC/useKYC.js +0 -4
- package/dist/components/KYC/utils.js +18 -18
- package/dist/components/SignIn/MobileNumberSignIn.js +20 -3
- package/dist/components/SignIn/NameAndPasswordSignIn.js +20 -3
- package/dist/components/SignUp/SignUpDefault/SignUpForm.js +20 -3
- package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +2 -2
- package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +3 -3
- package/dist/components/SignUp/SignUpKYC/ImageUploader.js +1 -1
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.d.ts +7 -0
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.js +9 -0
- package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js +19 -2
- package/dist/components/SignUp/SignUpKYC/utils.d.ts +9 -0
- package/dist/components/SignUp/SignUpKYC/utils.js +79 -0
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
- package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
- package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js +1 -1
- package/dist/components/shared/IdFrontImageField/useIdFrontImageField.js +26 -22
- package/dist/components/shared/SelfieImageField/SelfieImageField.client.js +1 -1
- package/dist/components/shared/SelfieImageField/useSelfieImageField.js +35 -30
- package/dist/handlers/index.d.ts +7 -7
- package/dist/handlers/index.js +0 -11
- package/dist/handlers/postTransformIdFrontImage.js +21 -6
- package/dist/handlers/postTransformSelfieImage.js +20 -9
- package/dist/services/queries.js +2570 -2570
- package/dist/styles/theme.css +694 -694
- package/package.json +166 -166
- package/dist/components/shared/IdDocumentField.client.d.ts +0 -25
- package/dist/components/shared/IdDocumentField.client.js +0 -204
- package/dist/components/shared/IdDocumentField.d.ts +0 -2
- package/dist/components/shared/IdDocumentField.js +0 -11
- package/dist/components/shared/SelfieField.client.d.ts +0 -20
- package/dist/components/shared/SelfieField.client.js +0 -327
- package/dist/components/shared/SelfieField.d.ts +0 -2
- package/dist/components/shared/SelfieField.js +0 -11
- package/dist/handlers.d.ts +0 -43
- package/dist/handlers.js +0 -297
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
@keyframes arrow-green-flash {
|
|
2
|
-
0% {
|
|
3
|
-
color: #abefc6;
|
|
4
|
-
}
|
|
5
|
-
100% {
|
|
6
|
-
color: #079455;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.animate-arrow-green-flash-1 {
|
|
11
|
-
animation: arrow-green-flash 0.4s infinite;
|
|
12
|
-
animation-delay: -0.2s;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.animate-arrow-green-flash-2 {
|
|
16
|
-
animation: arrow-green-flash 0.4s infinite;
|
|
17
|
-
animation-delay: -0.1s;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.animate-arrow-green-flash-3 {
|
|
21
|
-
animation: arrow-green-flash 0.4s infinite;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@keyframes arrow-red-flash {
|
|
25
|
-
0%,
|
|
26
|
-
100% {
|
|
27
|
-
color: #f97066;
|
|
28
|
-
}
|
|
29
|
-
50% {
|
|
30
|
-
color: #fecdca;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.animate-arrow-red-flash-1 {
|
|
35
|
-
animation: arrow-red-flash 0.4s infinite;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.animate-arrow-red-flash-2 {
|
|
39
|
-
animation: arrow-red-flash 0.4s infinite;
|
|
40
|
-
animation-delay: -0.1s;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.animate-arrow-red-flash-3 {
|
|
44
|
-
animation: arrow-red-flash 0.4s infinite;
|
|
45
|
-
animation-delay: -0.2s;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Animated BG */
|
|
49
|
-
@keyframes rotate {
|
|
50
|
-
to {
|
|
51
|
-
transform: rotate(1turn);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.light-rays {
|
|
56
|
-
position: absolute;
|
|
57
|
-
top: 0;
|
|
58
|
-
left: 0;
|
|
59
|
-
right: 0;
|
|
60
|
-
bottom: 0;
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
|
|
63
|
-
--first: var(--color-bg-tertiary);
|
|
64
|
-
--second: var(--color-bg-quaternary);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.light-rays::before,
|
|
68
|
-
.light-rays::after {
|
|
69
|
-
content: '';
|
|
70
|
-
position: absolute;
|
|
71
|
-
top: var(--light-rays-top, 150px);
|
|
72
|
-
left: calc(50% - 90px);
|
|
73
|
-
margin: -100vmax;
|
|
74
|
-
width: 200vmax;
|
|
75
|
-
height: 200vmax;
|
|
76
|
-
opacity: 0.6;
|
|
77
|
-
transform-origin: center;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.light-rays::before {
|
|
81
|
-
background: conic-gradient(
|
|
82
|
-
var(--first) 0deg 7.2deg,
|
|
83
|
-
var(--second) 7.2deg 14.4deg,
|
|
84
|
-
var(--first) 14.4deg 21.6deg,
|
|
85
|
-
var(--second) 21.6deg 28.8deg,
|
|
86
|
-
var(--first) 28.8deg 36deg,
|
|
87
|
-
var(--second) 36deg 43.2deg,
|
|
88
|
-
var(--first) 43.2deg 50.4deg,
|
|
89
|
-
var(--second) 50.4deg 57.6deg,
|
|
90
|
-
var(--first) 57.6deg 64.8deg,
|
|
91
|
-
var(--second) 64.8deg 72deg,
|
|
92
|
-
var(--first) 72deg 79.2deg,
|
|
93
|
-
var(--second) 79.2deg 86.4deg,
|
|
94
|
-
var(--first) 86.4deg 93.6deg,
|
|
95
|
-
var(--second) 93.6deg 100.8deg,
|
|
96
|
-
var(--first) 100.8deg 108deg,
|
|
97
|
-
var(--second) 108deg 115.2deg,
|
|
98
|
-
var(--first) 115.2deg 122.4deg,
|
|
99
|
-
var(--second) 122.4deg 129.6deg,
|
|
100
|
-
var(--first) 129.6deg 136.8deg,
|
|
101
|
-
var(--second) 136.8deg 144deg,
|
|
102
|
-
var(--first) 144deg 151.2deg,
|
|
103
|
-
var(--second) 151.2deg 158.4deg,
|
|
104
|
-
var(--first) 158.4deg 165.6deg,
|
|
105
|
-
var(--second) 165.6deg 172.8deg,
|
|
106
|
-
var(--first) 172.8deg 180deg,
|
|
107
|
-
var(--second) 180deg 187.2deg,
|
|
108
|
-
var(--first) 187.2deg 194.4deg,
|
|
109
|
-
var(--second) 194.4deg 201.6deg,
|
|
110
|
-
var(--first) 201.6deg 208.8deg,
|
|
111
|
-
var(--second) 208.8deg 216deg,
|
|
112
|
-
var(--first) 216deg 223.2deg,
|
|
113
|
-
var(--second) 223.2deg 230.4deg,
|
|
114
|
-
var(--first) 230.4deg 237.6deg,
|
|
115
|
-
var(--second) 237.6deg 244.8deg,
|
|
116
|
-
var(--first) 244.8deg 252deg,
|
|
117
|
-
var(--second) 252deg 259.2deg,
|
|
118
|
-
var(--first) 259.2deg 266.4deg,
|
|
119
|
-
var(--second) 266.4deg 273.6deg,
|
|
120
|
-
var(--first) 273.6deg 280.8deg,
|
|
121
|
-
var(--second) 280.8deg 288deg,
|
|
122
|
-
var(--first) 288deg 295.2deg,
|
|
123
|
-
var(--second) 295.2deg 302.4deg,
|
|
124
|
-
var(--first) 302.4deg 309.6deg,
|
|
125
|
-
var(--second) 309.6deg 316.8deg,
|
|
126
|
-
var(--first) 316.8deg 324deg,
|
|
127
|
-
var(--second) 324deg 331.2deg,
|
|
128
|
-
var(--first) 331.2deg 338.4deg,
|
|
129
|
-
var(--second) 338.4deg 345.6deg,
|
|
130
|
-
var(--first) 345.6deg 352.8deg,
|
|
131
|
-
var(--second) 352.8deg 360deg
|
|
132
|
-
);
|
|
133
|
-
animation: rotate 20s linear infinite;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
@media (max-width: 1024px) {
|
|
137
|
-
.light-rays::before,
|
|
138
|
-
.light-rays::after {
|
|
139
|
-
left: auto;
|
|
140
|
-
right: 11%;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/* ScrollArea.module.css */
|
|
145
|
-
.scrollArea {
|
|
146
|
-
overflow-y: scroll;
|
|
147
|
-
padding-right: 4px;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* WebKit-based browsers */
|
|
151
|
-
.scrollArea::-webkit-scrollbar {
|
|
152
|
-
width: 8px;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.scrollArea::-webkit-scrollbar-track {
|
|
156
|
-
background: var(--color-bg-primary-alt);
|
|
157
|
-
border-radius: 9999px;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.scrollArea::-webkit-scrollbar-thumb {
|
|
161
|
-
background-color: var(--color-bg-quaternary);
|
|
162
|
-
border-radius: 9999px;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
@keyframes waveColor {
|
|
166
|
-
0%,
|
|
167
|
-
2.5% {
|
|
168
|
-
color: var(--wave-highlight-color);
|
|
169
|
-
}
|
|
170
|
-
2.51%,
|
|
171
|
-
100% {
|
|
172
|
-
color: var(--color-brand-300);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.animate-wave-color-success {
|
|
177
|
-
--wave-highlight-color: var(--color-success-800);
|
|
178
|
-
animation: waveColor 4s ease-in-out infinite;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.animate-wave-color-error {
|
|
182
|
-
--wave-highlight-color: var(--color-error-600);
|
|
183
|
-
animation: waveColor 4s ease-in-out infinite;
|
|
184
|
-
}
|
|
1
|
+
@keyframes arrow-green-flash {
|
|
2
|
+
0% {
|
|
3
|
+
color: #abefc6;
|
|
4
|
+
}
|
|
5
|
+
100% {
|
|
6
|
+
color: #079455;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.animate-arrow-green-flash-1 {
|
|
11
|
+
animation: arrow-green-flash 0.4s infinite;
|
|
12
|
+
animation-delay: -0.2s;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.animate-arrow-green-flash-2 {
|
|
16
|
+
animation: arrow-green-flash 0.4s infinite;
|
|
17
|
+
animation-delay: -0.1s;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.animate-arrow-green-flash-3 {
|
|
21
|
+
animation: arrow-green-flash 0.4s infinite;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@keyframes arrow-red-flash {
|
|
25
|
+
0%,
|
|
26
|
+
100% {
|
|
27
|
+
color: #f97066;
|
|
28
|
+
}
|
|
29
|
+
50% {
|
|
30
|
+
color: #fecdca;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.animate-arrow-red-flash-1 {
|
|
35
|
+
animation: arrow-red-flash 0.4s infinite;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.animate-arrow-red-flash-2 {
|
|
39
|
+
animation: arrow-red-flash 0.4s infinite;
|
|
40
|
+
animation-delay: -0.1s;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.animate-arrow-red-flash-3 {
|
|
44
|
+
animation: arrow-red-flash 0.4s infinite;
|
|
45
|
+
animation-delay: -0.2s;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Animated BG */
|
|
49
|
+
@keyframes rotate {
|
|
50
|
+
to {
|
|
51
|
+
transform: rotate(1turn);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.light-rays {
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
right: 0;
|
|
60
|
+
bottom: 0;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
|
|
63
|
+
--first: var(--color-bg-tertiary);
|
|
64
|
+
--second: var(--color-bg-quaternary);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.light-rays::before,
|
|
68
|
+
.light-rays::after {
|
|
69
|
+
content: '';
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: var(--light-rays-top, 150px);
|
|
72
|
+
left: calc(50% - 90px);
|
|
73
|
+
margin: -100vmax;
|
|
74
|
+
width: 200vmax;
|
|
75
|
+
height: 200vmax;
|
|
76
|
+
opacity: 0.6;
|
|
77
|
+
transform-origin: center;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.light-rays::before {
|
|
81
|
+
background: conic-gradient(
|
|
82
|
+
var(--first) 0deg 7.2deg,
|
|
83
|
+
var(--second) 7.2deg 14.4deg,
|
|
84
|
+
var(--first) 14.4deg 21.6deg,
|
|
85
|
+
var(--second) 21.6deg 28.8deg,
|
|
86
|
+
var(--first) 28.8deg 36deg,
|
|
87
|
+
var(--second) 36deg 43.2deg,
|
|
88
|
+
var(--first) 43.2deg 50.4deg,
|
|
89
|
+
var(--second) 50.4deg 57.6deg,
|
|
90
|
+
var(--first) 57.6deg 64.8deg,
|
|
91
|
+
var(--second) 64.8deg 72deg,
|
|
92
|
+
var(--first) 72deg 79.2deg,
|
|
93
|
+
var(--second) 79.2deg 86.4deg,
|
|
94
|
+
var(--first) 86.4deg 93.6deg,
|
|
95
|
+
var(--second) 93.6deg 100.8deg,
|
|
96
|
+
var(--first) 100.8deg 108deg,
|
|
97
|
+
var(--second) 108deg 115.2deg,
|
|
98
|
+
var(--first) 115.2deg 122.4deg,
|
|
99
|
+
var(--second) 122.4deg 129.6deg,
|
|
100
|
+
var(--first) 129.6deg 136.8deg,
|
|
101
|
+
var(--second) 136.8deg 144deg,
|
|
102
|
+
var(--first) 144deg 151.2deg,
|
|
103
|
+
var(--second) 151.2deg 158.4deg,
|
|
104
|
+
var(--first) 158.4deg 165.6deg,
|
|
105
|
+
var(--second) 165.6deg 172.8deg,
|
|
106
|
+
var(--first) 172.8deg 180deg,
|
|
107
|
+
var(--second) 180deg 187.2deg,
|
|
108
|
+
var(--first) 187.2deg 194.4deg,
|
|
109
|
+
var(--second) 194.4deg 201.6deg,
|
|
110
|
+
var(--first) 201.6deg 208.8deg,
|
|
111
|
+
var(--second) 208.8deg 216deg,
|
|
112
|
+
var(--first) 216deg 223.2deg,
|
|
113
|
+
var(--second) 223.2deg 230.4deg,
|
|
114
|
+
var(--first) 230.4deg 237.6deg,
|
|
115
|
+
var(--second) 237.6deg 244.8deg,
|
|
116
|
+
var(--first) 244.8deg 252deg,
|
|
117
|
+
var(--second) 252deg 259.2deg,
|
|
118
|
+
var(--first) 259.2deg 266.4deg,
|
|
119
|
+
var(--second) 266.4deg 273.6deg,
|
|
120
|
+
var(--first) 273.6deg 280.8deg,
|
|
121
|
+
var(--second) 280.8deg 288deg,
|
|
122
|
+
var(--first) 288deg 295.2deg,
|
|
123
|
+
var(--second) 295.2deg 302.4deg,
|
|
124
|
+
var(--first) 302.4deg 309.6deg,
|
|
125
|
+
var(--second) 309.6deg 316.8deg,
|
|
126
|
+
var(--first) 316.8deg 324deg,
|
|
127
|
+
var(--second) 324deg 331.2deg,
|
|
128
|
+
var(--first) 331.2deg 338.4deg,
|
|
129
|
+
var(--second) 338.4deg 345.6deg,
|
|
130
|
+
var(--first) 345.6deg 352.8deg,
|
|
131
|
+
var(--second) 352.8deg 360deg
|
|
132
|
+
);
|
|
133
|
+
animation: rotate 20s linear infinite;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (max-width: 1024px) {
|
|
137
|
+
.light-rays::before,
|
|
138
|
+
.light-rays::after {
|
|
139
|
+
left: auto;
|
|
140
|
+
right: 11%;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ScrollArea.module.css */
|
|
145
|
+
.scrollArea {
|
|
146
|
+
overflow-y: scroll;
|
|
147
|
+
padding-right: 4px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* WebKit-based browsers */
|
|
151
|
+
.scrollArea::-webkit-scrollbar {
|
|
152
|
+
width: 8px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.scrollArea::-webkit-scrollbar-track {
|
|
156
|
+
background: var(--color-bg-primary-alt);
|
|
157
|
+
border-radius: 9999px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.scrollArea::-webkit-scrollbar-thumb {
|
|
161
|
+
background-color: var(--color-bg-quaternary);
|
|
162
|
+
border-radius: 9999px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@keyframes waveColor {
|
|
166
|
+
0%,
|
|
167
|
+
2.5% {
|
|
168
|
+
color: var(--wave-highlight-color);
|
|
169
|
+
}
|
|
170
|
+
2.51%,
|
|
171
|
+
100% {
|
|
172
|
+
color: var(--color-brand-300);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.animate-wave-color-success {
|
|
177
|
+
--wave-highlight-color: var(--color-success-800);
|
|
178
|
+
animation: waveColor 4s ease-in-out infinite;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.animate-wave-color-error {
|
|
182
|
+
--wave-highlight-color: var(--color-error-600);
|
|
183
|
+
animation: waveColor 4s ease-in-out infinite;
|
|
184
|
+
}
|
|
@@ -43,7 +43,7 @@ export function IdFrontImageField__client(props) {
|
|
|
43
43
|
}, disabled: context.field?.disabled ||
|
|
44
44
|
context.query.isLoading ||
|
|
45
45
|
context.mutation.isPending ||
|
|
46
|
-
localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
|
|
46
|
+
localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "text-text-placeholder-subtle size-4" })) : (_jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" })) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
|
|
47
47
|
context.inputRef.current?.click();
|
|
48
48
|
}, disabled: context.field?.disabled ||
|
|
49
49
|
context.field?.readOnly ||
|
|
@@ -47,38 +47,42 @@ export function useIdFrontImageField(props) {
|
|
|
47
47
|
video: {
|
|
48
48
|
facingMode: desktop ? 'user' : 'environment',
|
|
49
49
|
},
|
|
50
|
-
async transform(
|
|
51
|
-
const body = new FormData();
|
|
50
|
+
async transform(data) {
|
|
52
51
|
const guideRect = guideRef.current?.getBoundingClientRect();
|
|
53
|
-
const videoRect =
|
|
52
|
+
const videoRect = data.video.getBoundingClientRect();
|
|
54
53
|
invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
|
|
55
|
-
const scaleX =
|
|
56
|
-
const scaleY =
|
|
54
|
+
const scaleX = data.image.width / videoRect.width;
|
|
55
|
+
const scaleY = data.image.height / videoRect.height;
|
|
57
56
|
const cropTop = (guideRect.top - videoRect.top) * scaleY;
|
|
58
57
|
const cropLeft = (guideRect.left - videoRect.left) * scaleX;
|
|
59
58
|
const cropWidth = guideRect.width * scaleX;
|
|
60
59
|
const cropHeight = guideRect.height * scaleY;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
60
|
+
const targetWidth = 1200;
|
|
61
|
+
const targetHeight = 757;
|
|
62
|
+
const canvas = document.createElement('canvas');
|
|
63
|
+
const context = canvas.getContext('2d');
|
|
64
|
+
invariant(context, "'canvas.getContext' failed");
|
|
65
|
+
canvas.width = targetWidth;
|
|
66
|
+
canvas.height = targetHeight;
|
|
67
|
+
context.imageSmoothingEnabled = true;
|
|
68
|
+
context.imageSmoothingQuality = 'high';
|
|
69
|
+
context.filter = 'brightness(1.05) contrast(1.1) saturate(1.1)';
|
|
70
|
+
context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
|
|
71
|
+
const file = await new Promise((resolve) => canvas.toBlob((blob) => {
|
|
72
|
+
invariant(blob);
|
|
73
|
+
resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
|
|
74
|
+
type: 'image/jpeg',
|
|
75
|
+
endings: 'native',
|
|
76
|
+
lastModified: Date.now(),
|
|
77
|
+
}));
|
|
78
|
+
}, 'image/jpeg', 1.0));
|
|
76
79
|
const url = URL.createObjectURL(file);
|
|
77
80
|
const image = new Image();
|
|
78
81
|
image.src = url;
|
|
79
82
|
image.alt = '';
|
|
80
|
-
image.width =
|
|
81
|
-
image.height =
|
|
83
|
+
image.width = targetWidth;
|
|
84
|
+
image.height = targetHeight;
|
|
85
|
+
context.filter = 'brightness(1.05)';
|
|
82
86
|
return {
|
|
83
87
|
ok: true,
|
|
84
88
|
data: {
|
|
@@ -43,7 +43,7 @@ export function SelfieImageField__client(props) {
|
|
|
43
43
|
}, disabled: context.field?.disabled ||
|
|
44
44
|
context.query.isLoading ||
|
|
45
45
|
context.mutation.isPending ||
|
|
46
|
-
localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
|
|
46
|
+
localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "text-text-placeholder-subtle size-4" })) : (_jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" })) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
|
|
47
47
|
context.inputRef.current?.click();
|
|
48
48
|
}, disabled: context.field?.disabled ||
|
|
49
49
|
context.field?.readOnly ||
|
|
@@ -43,9 +43,14 @@ export function useSelfieImageField(props) {
|
|
|
43
43
|
const inputRef = useRef(null);
|
|
44
44
|
const maskRef = useRef(null);
|
|
45
45
|
const guideRef = useRef(null);
|
|
46
|
+
const [validatingFace, setValidatingFace] = useState(false);
|
|
46
47
|
const camera = useCamera({
|
|
47
|
-
async transform(
|
|
48
|
-
|
|
48
|
+
async transform(data) {
|
|
49
|
+
if (validatingFace)
|
|
50
|
+
return { ok: true, data };
|
|
51
|
+
setValidatingFace(true);
|
|
52
|
+
const hasFace = await validateFaceFromImage(data.image);
|
|
53
|
+
setValidatingFace(false);
|
|
49
54
|
if (!hasFace) {
|
|
50
55
|
return {
|
|
51
56
|
ok: false,
|
|
@@ -55,37 +60,40 @@ export function useSelfieImageField(props) {
|
|
|
55
60
|
},
|
|
56
61
|
};
|
|
57
62
|
}
|
|
58
|
-
const body = new FormData();
|
|
59
63
|
const guideRect = guideRef.current?.getBoundingClientRect();
|
|
60
|
-
const videoRect =
|
|
64
|
+
const videoRect = data.video.getBoundingClientRect();
|
|
61
65
|
invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
|
|
62
|
-
const scaleX =
|
|
63
|
-
const scaleY =
|
|
66
|
+
const scaleX = data.image.width / videoRect.width;
|
|
67
|
+
const scaleY = data.image.height / videoRect.height;
|
|
64
68
|
const cropTop = (guideRect.top - videoRect.top) * scaleY;
|
|
65
69
|
const cropLeft = (guideRect.left - videoRect.left) * scaleX;
|
|
66
70
|
const cropWidth = guideRect.width * scaleX;
|
|
67
71
|
const cropHeight = guideRect.height * scaleY;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
72
|
+
const targetWidth = 1200;
|
|
73
|
+
const targetHeight = 1200;
|
|
74
|
+
const canvas = document.createElement('canvas');
|
|
75
|
+
const context = canvas.getContext('2d');
|
|
76
|
+
invariant(context, "'canvas.getContext' failed");
|
|
77
|
+
canvas.width = targetWidth;
|
|
78
|
+
canvas.height = targetHeight;
|
|
79
|
+
context.imageSmoothingEnabled = true;
|
|
80
|
+
context.imageSmoothingQuality = 'high';
|
|
81
|
+
context.filter = 'brightness(1.05)';
|
|
82
|
+
context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
|
|
83
|
+
const file = await new Promise((resolve) => canvas.toBlob((blob) => {
|
|
84
|
+
invariant(blob);
|
|
85
|
+
resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
|
|
86
|
+
type: 'image/jpeg',
|
|
87
|
+
endings: 'native',
|
|
88
|
+
lastModified: Date.now(),
|
|
89
|
+
}));
|
|
90
|
+
}, 'image/jpeg', 1.0));
|
|
83
91
|
const url = URL.createObjectURL(file);
|
|
84
92
|
const image = new Image();
|
|
85
93
|
image.src = url;
|
|
86
94
|
image.alt = '';
|
|
87
|
-
image.width =
|
|
88
|
-
image.height =
|
|
95
|
+
image.width = targetWidth;
|
|
96
|
+
image.height = targetHeight;
|
|
89
97
|
return {
|
|
90
98
|
ok: true,
|
|
91
99
|
data: {
|
|
@@ -110,7 +118,7 @@ export function useSelfieImageField(props) {
|
|
|
110
118
|
}
|
|
111
119
|
setFaceFound(await validateFaceFromVideo(camera.videoRef.current, guideRef.current));
|
|
112
120
|
}, disclosure.open && !camera.data && !camera.error && !camera.loading
|
|
113
|
-
?
|
|
121
|
+
? 500
|
|
114
122
|
: null);
|
|
115
123
|
return {
|
|
116
124
|
field,
|
|
@@ -137,7 +145,7 @@ async function getImageFaceDetector() {
|
|
|
137
145
|
}
|
|
138
146
|
const detector = await FaceDetector.createFromOptions(__vision__, {
|
|
139
147
|
runningMode: 'IMAGE',
|
|
140
|
-
minDetectionConfidence: 0.
|
|
148
|
+
minDetectionConfidence: 0.8,
|
|
141
149
|
baseOptions: {
|
|
142
150
|
delegate: 'GPU',
|
|
143
151
|
modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
|
|
@@ -155,7 +163,7 @@ async function getVideoFaceDetector() {
|
|
|
155
163
|
}
|
|
156
164
|
const detector = await FaceDetector.createFromOptions(__vision__, {
|
|
157
165
|
runningMode: 'VIDEO',
|
|
158
|
-
minDetectionConfidence: 0.
|
|
166
|
+
minDetectionConfidence: 0.8,
|
|
159
167
|
baseOptions: {
|
|
160
168
|
delegate: 'GPU',
|
|
161
169
|
modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
|
|
@@ -185,10 +193,7 @@ async function validateFaceFromVideo(video, guide) {
|
|
|
185
193
|
const detection = result.detections.at(0);
|
|
186
194
|
if (!detection)
|
|
187
195
|
return false;
|
|
188
|
-
const
|
|
189
|
-
if (!category || category.score < 0.75)
|
|
190
|
-
return false;
|
|
191
|
-
const videoRect = video.getBoundingClientRect(); // DOM position & size
|
|
196
|
+
const videoRect = video.getBoundingClientRect();
|
|
192
197
|
const guideRect = guide.getBoundingClientRect();
|
|
193
198
|
if (!detection.boundingBox)
|
|
194
199
|
return false;
|
package/dist/handlers/index.d.ts
CHANGED
|
@@ -6,13 +6,6 @@ interface Context {
|
|
|
6
6
|
params: Promise<Params>;
|
|
7
7
|
}
|
|
8
8
|
export declare const GET: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
|
|
9
|
-
ok: true;
|
|
10
|
-
data?: never;
|
|
11
|
-
} | {
|
|
12
|
-
ok: false;
|
|
13
|
-
message: string;
|
|
14
|
-
__error?: unknown;
|
|
15
|
-
}> | NextResponse<{
|
|
16
9
|
ok: false;
|
|
17
10
|
message: string;
|
|
18
11
|
__error?: unknown;
|
|
@@ -26,6 +19,13 @@ export declare const GET: (req: NextRequest, { params }: Context) => Promise<Nex
|
|
|
26
19
|
} | {
|
|
27
20
|
ok: true;
|
|
28
21
|
data: import("../types").Session;
|
|
22
|
+
}> | NextResponse<{
|
|
23
|
+
ok: true;
|
|
24
|
+
data?: never;
|
|
25
|
+
} | {
|
|
26
|
+
ok: false;
|
|
27
|
+
message: string;
|
|
28
|
+
__error?: unknown;
|
|
29
29
|
}>>;
|
|
30
30
|
export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
|
|
31
31
|
ok: true;
|
package/dist/handlers/index.js
CHANGED
|
@@ -5,8 +5,6 @@ import { getSession } from './getSession.js';
|
|
|
5
5
|
import { patchSession } from './patchSession.js';
|
|
6
6
|
import { postAuthenticate } from './postAuthenticate.js';
|
|
7
7
|
import { postSession } from './postSession.js';
|
|
8
|
-
import { postTransformIdFrontImage } from './postTransformIdFrontImage.js';
|
|
9
|
-
import { postTransformSelfieImage } from './postTransformSelfieImage.js';
|
|
10
8
|
export const GET = async (req, { params }) => {
|
|
11
9
|
const { auth } = await params;
|
|
12
10
|
const path = auth[0];
|
|
@@ -29,21 +27,12 @@ export const DELETE = async (req, { params }) => {
|
|
|
29
27
|
export const POST = async (req, { params }) => {
|
|
30
28
|
const { auth } = await params;
|
|
31
29
|
const path = auth[0];
|
|
32
|
-
const subpath = auth[1];
|
|
33
30
|
if (path === 'sessions') {
|
|
34
31
|
return await postSession(req);
|
|
35
32
|
}
|
|
36
33
|
if (path === 'authenticate') {
|
|
37
34
|
return await postAuthenticate(req);
|
|
38
35
|
}
|
|
39
|
-
if (path === 'transformers') {
|
|
40
|
-
if (subpath === 'selfie-image') {
|
|
41
|
-
return await postTransformSelfieImage(req);
|
|
42
|
-
}
|
|
43
|
-
if (subpath === 'id-front-image') {
|
|
44
|
-
return await postTransformIdFrontImage(req);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
36
|
return NextResponse.json({ ok: false, message: 'Not found' }, { status: 404 });
|
|
48
37
|
};
|
|
49
38
|
export const PATCH = async (req, { params }) => {
|