100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Phone, PhoneOff } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { OutlookNotification, OutlookNotificationData } from '@/components/outlook-notification';
|
|
|
|
export interface IncomingCall {
|
|
from: {
|
|
userId: string;
|
|
username: string;
|
|
name: string;
|
|
};
|
|
roomId: string;
|
|
roomName: string;
|
|
timestamp: Date;
|
|
}
|
|
|
|
interface IncomingCallNotificationProps {
|
|
call: IncomingCall | null;
|
|
onDismiss: () => void;
|
|
onAccept: (roomId: string) => void;
|
|
onReject: () => void;
|
|
}
|
|
|
|
export function IncomingCallNotification({
|
|
call,
|
|
onDismiss,
|
|
onAccept,
|
|
onReject,
|
|
}: IncomingCallNotificationProps) {
|
|
const router = useRouter();
|
|
const [notificationData, setNotificationData] = useState<OutlookNotificationData | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (call) {
|
|
console.log('[IncomingCallNotification] 📞 Call received, showing notification', {
|
|
from: call.from.name || call.from.username,
|
|
roomId: call.roomId,
|
|
});
|
|
|
|
const callerName = call.from.name || call.from.username || 'Inconnu';
|
|
|
|
const notification: OutlookNotificationData = {
|
|
id: `call-${call.roomId}-${Date.now()}`,
|
|
source: 'call',
|
|
title: 'Parole',
|
|
subtitle: 'Appel entrant',
|
|
message: `Vous avez un appel de ${callerName}${call.roomName && call.roomName !== callerName ? ` dans ${call.roomName}` : ''}`,
|
|
icon: Phone,
|
|
iconColor: 'text-blue-600',
|
|
iconBgColor: 'bg-blue-100',
|
|
borderColor: 'border-blue-500',
|
|
timestamp: call.timestamp,
|
|
autoDismiss: 30000, // 30 seconds
|
|
actions: [
|
|
{
|
|
label: 'Accepter',
|
|
onClick: () => {
|
|
onAccept(call.roomId);
|
|
router.push(`/parole?room=${call.roomId}`);
|
|
setNotificationData(null);
|
|
},
|
|
variant: 'default',
|
|
className: 'bg-green-600 hover:bg-green-700 text-white',
|
|
icon: Phone,
|
|
},
|
|
{
|
|
label: 'Raccrocher',
|
|
onClick: () => {
|
|
onReject();
|
|
setNotificationData(null);
|
|
},
|
|
variant: 'destructive',
|
|
icon: PhoneOff,
|
|
},
|
|
],
|
|
};
|
|
|
|
setNotificationData(notification);
|
|
} else {
|
|
setNotificationData(null);
|
|
}
|
|
}, [call, router, onAccept, onReject]);
|
|
|
|
if (!notificationData) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<OutlookNotification
|
|
notification={notificationData}
|
|
onDismiss={() => {
|
|
onDismiss();
|
|
setNotificationData(null);
|
|
}}
|
|
/>
|
|
);
|
|
}
|