/* eslint-disable @typescript-eslint/no-explicit-any */
‘use client’;
import { useState, useRef, useEffect } from ‘react’;
import uitoolkit, { CustomizationOptions } from ‘@zoom/videosdk-ui-toolkit’;
import ‘@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css’;
import { useRouter } from ‘next/navigation’;
import { toast } from ‘sonner’;
import { getRoleValue } from ‘@/services/users-service’;
import { LoadingBar } from ‘./loaders/fullpage-loader’;
import { getMeetingSignature } from ‘@/services/zoom-service’;
import { Astrologer } from ‘@/lib/definitions/astrologer’;
interface Props {
sessionId: string;
user: Astrologer;
}
export default function ZoomUIToolkitPage({ sessionId, user }: Props) {
const [joined, setJoined] = useState(false);
const router = useRouter();
const sessionContainerRef = useRef(null);
useEffect(() => {
debugger;
if (!sessionId || !user || !sessionContainerRef.current) return;
async function join() {
try {
const role = getRoleValue(user);
const data = await getMeetingSignature({
sessionId,
role,
userIdentity: user?.email,
});
if (data?.signature && sessionContainerRef?.current) {
console.log('Iam inside the signature');
const config: CustomizationOptions = {
videoSDKJWT: data.signature,
sessionName: sessionId,
userName: user?.email,
featuresOptions: {
preview: {
enable: true,
},
theme: {
enable: true,
defaultTheme: 'blue',
},
subsession: {
enable: false,
},
},
};
uitoolkit.joinSession(sessionContainerRef.current, config);
uitoolkit.onSessionClosed(() => {
console.log('Session closed');
setJoined(false);
});
uitoolkit.onSessionDestroyed(() => {
console.log('Session destroyed');
uitoolkit.destroy();
});
setJoined(true);
} else {
console.error('Failed to get signature:', data);
toast.error(`You are not authorized to join the meeting. Please contact customer services for signature`, {
className: 'toast-error',
});
router.push('/not-found');
}
} catch (error: any) {
console.error('Error joining session:', error);
router.push('/not-found');
}
}
if (sessionId && user) {
join();
} else {
router.push('/not-found');
}
return () => {
// uitoolkit && uitoolkit.destroy();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sessionId, user]);
return (
<section
ref={sessionContainerRef}
style={{ width: ‘100vw’, height: ‘100vh’, display: joined ? ‘block’ : ‘none’ }}
/>
{!joined && (
)}
);
}