@opexa/portal-components 0.0.954 → 0.0.956

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.
@@ -13,7 +13,7 @@ export interface UseCameraReturn<T extends string = never> {
13
13
  open(): Promise<void>;
14
14
  openNativeCamera(direction: 'front' | 'back'): Promise<File | null>;
15
15
  close(): Promise<void>;
16
- snap(): Promise<CameraData | null>;
16
+ snap(): CameraData | null;
17
17
  reopen(): Promise<void>;
18
18
  reset(): Promise<void>;
19
19
  data: CameraData | null;
@@ -1,7 +1,6 @@
1
1
  import { CameraDirection } from '@capacitor/camera';
2
2
  import { isBoolean } from 'lodash-es';
3
3
  import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
4
- import invariant from 'tiny-invariant';
5
4
  import { useMediaQuery } from 'usehooks-ts';
6
5
  export function useCamera(options = {}) {
7
6
  const videoRef = useRef(null);
@@ -122,76 +121,33 @@ export function useCamera(options = {}) {
122
121
  resolve();
123
122
  });
124
123
  }, []);
125
- const snap = useCallback(async () => {
126
- setData(null);
127
- setError(null);
128
- setSnapping(true);
124
+ const snap = useCallback(() => {
129
125
  const video = videoRef.current;
126
+ if (!video)
127
+ return null;
130
128
  const canvas = document.createElement('canvas');
131
129
  const context = canvas.getContext('2d');
132
- invariant(video, 'Could not find video element');
133
- invariant(context, 'Could not get canvas context');
134
- video.currentTime = 1;
130
+ if (!context)
131
+ return null;
135
132
  canvas.width = video.videoWidth;
136
133
  canvas.height = video.videoHeight;
137
- context.imageSmoothingEnabled = true;
138
- context.imageSmoothingQuality = 'high';
139
- context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
140
- return new Promise((resolve) => {
141
- canvas.toBlob(async (blob) => {
142
- if (!blob) {
143
- setSnapping(false);
144
- resolve(null);
145
- return setError({
146
- name: 'CameraError',
147
- message: "'canvas.toBlob' failed to create blob",
148
- });
149
- }
150
- const url = canvas.toDataURL('image/jpeg', 1);
151
- const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
152
- type: 'image/jpeg',
153
- endings: 'native',
154
- lastModified: Date.now(),
155
- });
156
- const image = new Image();
157
- image.src = url;
158
- image.alt = '';
159
- image.width = canvas.width;
160
- image.height = canvas.height;
161
- if (!image.complete || image.naturalWidth === 0) {
162
- await new Promise((resolve, reject) => {
163
- image.onload = () => resolve();
164
- image.onerror = () => reject();
165
- });
166
- }
167
- const data = {
168
- url,
169
- file,
170
- image,
171
- };
172
- if (!options.transform) {
173
- setData(data);
174
- setSnapping(false);
175
- resolve(data);
176
- return;
177
- }
178
- const transformResult = await options.transform({
179
- ...data,
180
- video,
181
- canvas,
182
- });
183
- if (transformResult.ok) {
184
- setData(transformResult.data);
185
- resolve(transformResult.data);
186
- }
187
- else {
188
- setError(transformResult.error);
189
- resolve(null);
190
- }
191
- setSnapping(false);
192
- }, 'image/jpeg', 1);
134
+ context.drawImage(video, 0, 0, canvas.width, canvas.height);
135
+ const url = canvas.toDataURL('image/jpeg', 0.9);
136
+ const arr = atob(url.split(',')[1]);
137
+ const u8arr = new Uint8Array(arr.length);
138
+ for (let i = 0; i < arr.length; i++)
139
+ u8arr[i] = arr.charCodeAt(i);
140
+ const file = new File([u8arr], `${crypto.randomUUID()}.jpeg`, {
141
+ type: 'image/jpeg',
193
142
  });
194
- }, [options]);
143
+ const image = new Image();
144
+ image.src = url;
145
+ image.width = canvas.width;
146
+ image.height = canvas.height;
147
+ const data = { url, file, image };
148
+ setData(data);
149
+ return data;
150
+ }, []);
195
151
  const reset = useCallback(() => {
196
152
  setData(null);
197
153
  setError(null);
@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
8
8
  import { useShallow } from 'zustand/shallow';
9
9
  import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
10
10
  import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
11
+ import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
11
12
  import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
12
13
  import { CheckIcon } from '../../icons/CheckIcon.js';
13
14
  import pagcorLogo from '../../images/pagcor2.png';
@@ -30,6 +31,20 @@ export function DisclaimerV3(props) {
30
31
  const isAuthenticated = sessionQuery.data?.status === 'authenticated';
31
32
  const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
32
33
  const [showWarning, setShowWarning] = useState(false);
34
+ const signOutMutation = useSignOutMutation();
35
+ const handleExit = () => {
36
+ if (props.redirectUrlOnNoConsent) {
37
+ if (Capacitor.isNativePlatform()) {
38
+ App.exitApp();
39
+ }
40
+ else {
41
+ window.location.href = props.redirectUrlOnNoConsent;
42
+ }
43
+ }
44
+ else {
45
+ disclaimer.close();
46
+ }
47
+ };
33
48
  return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", children: "Notice" }), _jsx("div", { className: "mt-2 mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "mt-4 w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
34
49
  if (e.checked === 'indeterminate')
35
50
  return;
@@ -58,17 +73,11 @@ export function DisclaimerV3(props) {
58
73
  globalStore.onboarding.setOpen(true);
59
74
  }
60
75
  }, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
61
- if (props.redirectUrlOnNoConsent) {
62
- if (Capacitor.isNativePlatform()) {
63
- App.exitApp();
64
- }
65
- else {
66
- window.location.href = props.redirectUrlOnNoConsent;
67
- }
68
- }
69
- else {
70
- disclaimer.close();
76
+ if (isAuthenticated && !checked) {
77
+ signOutMutation.mutate();
78
+ handleExit();
71
79
  }
80
+ handleExit();
72
81
  }, variant: "outline", children: "Exit" })] })] }) })] }) }));
73
82
  }
74
83
  const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));
@@ -58,7 +58,6 @@ export function useSelfieImageField(props) {
58
58
  invariant(blob);
59
59
  resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
60
60
  type: 'image/jpeg',
61
- endings: 'native',
62
61
  lastModified: Date.now(),
63
62
  }));
64
63
  }, 'image/jpeg', 1.0));
@@ -87,7 +87,6 @@ export function useSelfieImageField(props) {
87
87
  invariant(blob);
88
88
  resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
89
89
  type: 'image/jpeg',
90
- endings: 'native',
91
90
  lastModified: Date.now(),
92
91
  }));
93
92
  }, 'image/jpeg', 1.0));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.954",
3
+ "version": "0.0.956",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",