232 lines
10 KiB
JavaScript
232 lines
10 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Button } from '@/components/ui/button';
|
|
import { RefreshCw, User, Mic, MicOff, Crown, ArrowLeft, ServerCrash, UserX, Phone, Lock, LogIn } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
|
|
export default function ConferenceDetails({ conferenceId }) {
|
|
const [participants, setParticipants] = useState([]);
|
|
const [conferenceInfo, setConferenceInfo] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const { token, isLoggedIn } = useAuth();
|
|
const [isConnecting, setIsConnecting] = useState(false);
|
|
const [currentUserExtension, setCurrentUserExtension] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (isLoggedIn && token) {
|
|
const fetchUserDetails = async () => {
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/extensions/me`, {
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setCurrentUserExtension(data.extensionId);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch user details", err);
|
|
}
|
|
};
|
|
fetchUserDetails();
|
|
}
|
|
}, [isLoggedIn, token]);
|
|
|
|
const fetchDetails = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
// Fetch both participants and conference room info
|
|
const [participantsRes, roomsRes] = await Promise.all([
|
|
fetch(`${process.env.NEXT_PUBLIC_API_URL}/conferences/${conferenceId}`),
|
|
fetch(`${process.env.NEXT_PUBLIC_API_URL}/conferences`)
|
|
]);
|
|
|
|
if (!participantsRes.ok) {
|
|
const errorData = await participantsRes.json();
|
|
if (participantsRes.status === 401) throw new Error("Unauthorized: Please log in to view conference details.");
|
|
throw new Error(errorData.error || `Failed to fetch details for conference ${conferenceId}`);
|
|
}
|
|
const participantsData = await participantsRes.json();
|
|
setParticipants(Array.isArray(participantsData) ? participantsData : []);
|
|
|
|
if (roomsRes.ok) {
|
|
const roomsData = await roomsRes.json();
|
|
const currentRoom = roomsData.find(room => room.conferenceId === conferenceId);
|
|
setConferenceInfo(currentRoom);
|
|
} else {
|
|
// If fetching all rooms fails, we can assume we don't know the lock status
|
|
setConferenceInfo(null);
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error(`Failed to fetch details for ${conferenceId}`, err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [conferenceId]);
|
|
|
|
useEffect(() => {
|
|
fetchDetails();
|
|
const interval = setInterval(fetchDetails, 5000); // Refresh every 5 seconds
|
|
return () => clearInterval(interval);
|
|
}, [fetchDetails]);
|
|
|
|
const handleConnectMe = async () => {
|
|
if (!token) return;
|
|
setIsConnecting(true);
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/conferences/${conferenceId}/connectme`, {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
if (!res.ok) {
|
|
const errorData = await res.json();
|
|
throw new Error(errorData.error || 'Failed to connect to conference');
|
|
}
|
|
// Optionally show a success message
|
|
} catch (err) {
|
|
console.error("Failed to connect", err);
|
|
alert(err.message);
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
};
|
|
|
|
const isUserInConference = participants.some(p => p.callerIdNum === currentUserExtension);
|
|
|
|
const ConnectButton = () => {
|
|
if (!isLoggedIn) {
|
|
return (
|
|
<Button asChild className="w-full sm:w-auto">
|
|
<Link href="/dashboard">
|
|
<LogIn className="mr-2 h-4 w-4" />
|
|
Sign in to Connect
|
|
</Link>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (conferenceInfo?.locked) {
|
|
return (
|
|
<Button disabled className="w-full sm:w-auto">
|
|
<Lock className="mr-2 h-4 w-4" />
|
|
Conference is Locked
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (isUserInConference) {
|
|
return (
|
|
<Button disabled className="w-full sm:w-auto">
|
|
<User className="mr-2 h-4 w-4" />
|
|
Already in Conference
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button onClick={handleConnectMe} disabled={isConnecting || !currentUserExtension} className="w-full sm:w-auto">
|
|
<Phone className={`mr-2 h-4 w-4 ${isConnecting ? 'animate-pulse' : ''}`} />
|
|
{isConnecting ? 'Connecting...' : 'Connect Me'}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="container py-12 px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="mb-8">
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href="/conferences">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Conferences
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
Conference <span className="text-blue-400">{conferenceId}</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-300">
|
|
Participants currently in the room.
|
|
</p>
|
|
<div className="flex items-center justify-center gap-4 mt-6">
|
|
<Button onClick={fetchDetails} disabled={loading}>
|
|
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
|
{loading ? 'Refreshing...' : 'Refresh'}
|
|
</Button>
|
|
<ConnectButton />
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<Card className="bg-red-950/50 border-red-800 mb-8">
|
|
<CardContent className="flex items-center gap-3 p-4">
|
|
<ServerCrash className="h-5 w-5 text-red-400" />
|
|
<div className="text-red-100">
|
|
{error}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="space-y-4">
|
|
{[...Array(3)].map((_, i) => (
|
|
<Card key={i} className="bg-gray-950/50 border-gray-800 p-4">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-12 w-12 rounded-full" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-5 w-32" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-8 w-20" />
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : participants.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{participants.map(p => (
|
|
<Card key={p.channel} className={`bg-gray-950/50 border-gray-800 transition-all duration-300 ${p.talking ? 'border-green-500/50 shadow-lg shadow-green-500/10' : ''}`}>
|
|
<CardContent className="p-4 flex justify-between items-center">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`p-3 rounded-full ${p.talking ? 'bg-green-900/50' : 'bg-gray-800'}`}>
|
|
<User className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{p.callerIdName}</div>
|
|
<div className="text-sm text-blue-400 font-mono">{p.callerIdNum}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{p.admin && <Badge variant="outline" className="border-yellow-500/50 bg-yellow-900/20 text-yellow-300"><Crown className="h-3 w-3 mr-1" /> Admin</Badge>}
|
|
{p.muted ? <MicOff className="h-5 w-5 text-red-400" title="Muted" /> : <Mic className="h-5 w-5 text-green-400" title="Unmuted" />}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20 text-gray-500 flex flex-col items-center justify-center border-2 border-dashed border-gray-800 rounded-lg">
|
|
<UserX className="mx-auto h-16 w-16 mb-4 text-gray-600" />
|
|
<h3 className="text-2xl font-semibold text-gray-300">Room is Empty</h3>
|
|
<p className="mt-2">There are no participants in this conference room.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|