@opexa/portal-components 0.0.1035 → 0.0.1036
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.
|
@@ -1,119 +1,48 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import isMobile from 'is-mobile';
|
|
4
4
|
import { useRouter } from 'next/navigation';
|
|
5
|
-
import { useEffect,
|
|
5
|
+
import { useEffect, useState } from 'react';
|
|
6
6
|
import { twJoin } from 'tailwind-merge';
|
|
7
7
|
import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
|
|
8
8
|
import { toaster } from '../../client/utils/toaster.js';
|
|
9
9
|
import { Fallback } from './Fallback.js';
|
|
10
10
|
export function DigitainContainer(props) {
|
|
11
11
|
const session = useSessionQuery();
|
|
12
|
-
const [isLoading, setLoading] = useState(
|
|
13
|
-
const [hasBooted, setHasBooted] = useState(false);
|
|
12
|
+
const [isLoading, setLoading] = useState(false);
|
|
14
13
|
const router = useRouter();
|
|
15
|
-
const hasBootedRef = useRef(false);
|
|
16
|
-
const containerRef = useRef(null);
|
|
17
14
|
useEffect(() => {
|
|
18
15
|
if (session.data?.status === 'authenticated') {
|
|
19
16
|
router.refresh();
|
|
20
17
|
}
|
|
21
18
|
}, [session.data?.status, router]);
|
|
22
19
|
useEffect(() => {
|
|
23
|
-
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
20
|
+
setLoading(true);
|
|
26
21
|
let attempts = 0;
|
|
27
|
-
const maxAttempts = 5;
|
|
28
|
-
|
|
29
|
-
if (window.Bootstrapper) {
|
|
22
|
+
const maxAttempts = 5; // e.g. wait up to ~10 seconds
|
|
23
|
+
function checkAndBoot() {
|
|
24
|
+
if (typeof window !== 'undefined' && window.Bootstrapper) {
|
|
30
25
|
console.log('Bootstrapper found, booting with params:', props.params);
|
|
31
|
-
hasBootedRef.current = true;
|
|
32
26
|
window.Bootstrapper.boot(props.params, {
|
|
33
27
|
name: isMobile() ? 'Mobile' : 'AsianView',
|
|
34
28
|
}).then(() => {
|
|
35
29
|
console.log('Sportsbook booted!');
|
|
36
|
-
setHasBooted(true);
|
|
37
|
-
}).catch((error) => {
|
|
38
|
-
console.error('Sportsbook boot failed:', error);
|
|
39
|
-
setLoading(false);
|
|
40
|
-
toaster.error({
|
|
41
|
-
title: 'Error',
|
|
42
|
-
description: 'Failed to initialize sportsbook.',
|
|
43
|
-
});
|
|
44
30
|
});
|
|
31
|
+
setTimeout(() => setLoading(false), 1000); // Give some time for the UI to update
|
|
45
32
|
clearInterval(intervalId);
|
|
46
33
|
}
|
|
47
34
|
else if (++attempts >= maxAttempts) {
|
|
48
|
-
console.warn('Bootstrapper did not load in time.');
|
|
49
35
|
setLoading(false);
|
|
50
36
|
toaster.error({
|
|
51
37
|
title: 'Error',
|
|
52
38
|
description: 'Sportsbook failed to load. Please try again later.',
|
|
53
39
|
});
|
|
40
|
+
console.warn('Bootstrapper did not load in time.');
|
|
54
41
|
clearInterval(intervalId);
|
|
55
42
|
}
|
|
56
|
-
}
|
|
43
|
+
}
|
|
44
|
+
const intervalId = setInterval(checkAndBoot, 500);
|
|
57
45
|
return () => clearInterval(intervalId);
|
|
58
46
|
}, [props.params]);
|
|
59
|
-
|
|
60
|
-
if (!hasBooted || !containerRef.current) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
const container = containerRef.current;
|
|
64
|
-
const handleIframeReady = (iframe) => {
|
|
65
|
-
const onLoad = () => {
|
|
66
|
-
console.log('Digitain iframe loaded successfully!');
|
|
67
|
-
setTimeout(() => setLoading(false), 300);
|
|
68
|
-
};
|
|
69
|
-
const onError = () => {
|
|
70
|
-
console.error('Digitain iframe failed to load');
|
|
71
|
-
setLoading(false);
|
|
72
|
-
toaster.error({
|
|
73
|
-
title: 'Error',
|
|
74
|
-
description: 'Failed to load sportsbook. Please try again.',
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
if (iframe.contentDocument?.readyState === 'complete') {
|
|
78
|
-
console.log('Iframe already loaded!');
|
|
79
|
-
setTimeout(() => setLoading(false), 300);
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
iframe.addEventListener('load', onLoad, { once: true });
|
|
83
|
-
iframe.addEventListener('error', onError, { once: true });
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
const existingIframe = container.querySelector('iframe');
|
|
87
|
-
if (existingIframe) {
|
|
88
|
-
handleIframeReady(existingIframe);
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
let iframeDetected = false;
|
|
92
|
-
const observer = new MutationObserver((mutations) => {
|
|
93
|
-
for (const mutation of mutations) {
|
|
94
|
-
for (const node of mutation.addedNodes) {
|
|
95
|
-
if (node.nodeName === 'IFRAME') {
|
|
96
|
-
console.log('Digitain iframe detected');
|
|
97
|
-
iframeDetected = true;
|
|
98
|
-
handleIframeReady(node);
|
|
99
|
-
observer.disconnect();
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
observer.observe(container, { childList: true, subtree: true });
|
|
106
|
-
const fallbackTimeout = setTimeout(() => {
|
|
107
|
-
if (!iframeDetected) {
|
|
108
|
-
console.warn('No iframe detected after 10 seconds. Hiding loader.');
|
|
109
|
-
setLoading(false);
|
|
110
|
-
observer.disconnect();
|
|
111
|
-
}
|
|
112
|
-
}, 10000);
|
|
113
|
-
return () => {
|
|
114
|
-
observer.disconnect();
|
|
115
|
-
clearTimeout(fallbackTimeout);
|
|
116
|
-
};
|
|
117
|
-
}, [hasBooted]);
|
|
118
|
-
return (_jsxs("div", { className: "relative h-full min-h-screen w-full", children: [_jsx("div", { className: twJoin('absolute inset-0 transition-opacity duration-300', isLoading ? 'z-10 opacity-100' : 'pointer-events-none opacity-0'), children: _jsx(Fallback, { type: "loading", fallbackBackgroundImage: props.fallbackBackgroundImage }) }), _jsx("div", { ref: containerRef, id: "digitain-container", className: twJoin('absolute inset-0 transition-opacity duration-300', isLoading ? 'opacity-0' : 'opacity-100') })] }));
|
|
47
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: twJoin(!isLoading && 'hidden'), children: _jsx(Fallback, { type: "loading", fallbackBackgroundImage: props.fallbackBackgroundImage }) }), _jsx("div", { id: "digitain-container", className: twJoin(isLoading && 'hidden') })] }));
|
|
119
48
|
}
|